Создание макета сайта, это очень интересный и увлекательный процесс. Многие часто задают вопрос с чего начать создание дизайна макета, с чего начать разработку сайта. Как сделать так, что бы сайт был привлекательным, запоминающимся, а так же легким и удобным в плане юзабилити. Лично я делю работу по созданию макетов для сайта на два типа. Первый это макет сайта для себя и последующей его продажи, а второй это создание дизайна сайта для заказчика. В этом посте, я расскажу вам как я создаю макеты для сайтов, а так же расскажу какого прогресса достиг и чему научился за все то время которое я посвятил созданию макетов.

Думаю, что вы заметили обновление дизайна на моем блоге? Как оно вам? В этот раз я отошел от любимого мной минимализма и решил не много добавить цветовой гаммы в шаблоне. Прежде чем этот шаблон появился и я окончательно решил, что именно он будет лицом блога, я успел нарисовать еще три разные версии для блога Все обо всем. Главной проблемой было то, что заканчивая очередной макет для редизайна блога, в голове появлялись мысли того как еще, что то добавить в дизайн либо исправить в нем. Именно макет который вы видите сейчас на блоге, можно наверное назвать чем то средним и оптимальным, неким «гибридом» всех работ по редизайну сложенным в одном.
Вообще редизайн блога был приурочен к трехлетию блога Все обо всем и должен был появиться на блоге 28 января. Но, возникли некоторые задержки с разных сторон. И новый дизайн блога появился только два дня тому назад. Над блогом работали два верстальщика. Первый взял сначала макет, сверстал и натянул его на WordPress. Второй верстальщик Илья, уже принял сырой шаблон и занялся доработкой и привел шаблон к тому виду который сейчас вы наблюдаете.
Хочется услышать ваше мнение о самом шаблоне, о том как вам дизайн, как юзабилити, может где заметили баг или еще что. Пишите!

Ну, что же, а теперь вернемся к самой теме поста о создании макета сайта.

И так как я уже сказал, что я делю работу на две категории:

• Для себя и на продажу
• Работа с заказчиком

Для себя и на продажу

Наверно это самый мой любимый вариант создания макета. Его единственный минус, что за работу ни кто не платит и совсем нет ни какой уверенности в том, что макет потом кто то купит. Но мне все равно нравится, вот просто так открыть Фотошоп и начать создавать макет. Заметьте, что практически почти всегда я создаю макет в сразу в программной среде. И лишь изредка с начала рисую на бумаге, а потом переношу все в Фотошоп.

За все то время работы с Фотошопом и создания макетов для сайтов и блогов у меня уже выработалась стратегия и по очередность действий.
И так, открыв Photoshop работа идет в следующем направлении:

• Разметка
• Цвет бекграунда будущего макета
• Работа над лого
• Меню блога
• Контент
• Сайдбар
• Футер

Вот так я работаю почти всегда и в 99% случаев. То есть создав лого и если надо шапку, я перехожу к тому как будет выглядеть навигация будущего макета. Затем начинаю наполнять макет текстом. Раньше я постоянно заполнял макет «рыбой» типа такого: Lorem ipsum dolor sit amet, consectetur adipiscing elit., но однажды Webmozg, сказал мне, что данное наполнение макета не совсем верное и не может показать ошибки допущенные при расположении текста.

Самым лучшим способом, наполнения макета стало копирование текста с любых новостных сайтов. А совсем не давно у себя в Twitter, один из моих фолловеров опубликовал ссылку на сервис рефератов от Яндекса. Этот сервис и стал отличным решением для набивания текстов в макете. Так, что теперь все мои макеты идут с человечески понятным текстом.

Закончив с текстами, я перехожу к сайдбару. Тут всегда есть много способов и опций как показать сайдбар. Я стараюсь ничего не придумывать, а элементарно вставляю в макет лишь самые не обходимые виджиты которые есть на любом блоге:

• Поиск по блогу
• Кнопки подписки и счетчики подписчиков
• Свежие записи
• Популярные записи
• Комментарии
• Архивы
• Счетчики посетителей

Не знаю почему, но самым моим не любимым делом в создании макета сайта, является прорисовка сайдбара. Лично у меня он занимает больше всего времени. Может у вас так же, а может и наоборот, что то другое забирает больше всего времени.

Еще один момент при создании макета, это определиться какие размеры давать картинкам в постах. У меня есть два размера:

• 302х200
• 600х200

Предпочитаю работать со вторым 600х200. Между прочим для дизайна который сейчас на блоге, был выбран «экспериментальный» вариант картинок 302х200. Но, посмотрев тему в действии и поняв, что уж слишком много придется исправлять на блоге в плане картинок которые сейчас содержат размер 600х200, было принято решение изменить размер картинок в макете и использовать размер 600х200.

Футер, делается быстро, так как стараюсь в футер вообще ничего кроме копирайтов не выносить. Чего нельзя сказать сейчас для нынешнего шаблона где в футере аж три колонки.

Самым важным, что еще я понял при разработке макетов особенно для блогов, что в шаблоне и макете обязана присутствовать кнопка именуемая «Вверх». И если уж мы говорим о юзабилити, то эта кнопка очень полезна, так как позволяет посетителю в один клик вернуться в начало страницы.

Вот, так я создаю макеты сайта или блога для себя. Как я сказал, что единственный минус этой работы, это то, что за работу вам не платят и 50/50, что потом макет кто купит. Что я делаю с макетами после завершения работы? Либо складываю их в папку рядом с другими работами, либо…..удаляю.

Работа с заказчиком

По работе, все тоже самое. Отличие только в том, что заказчик дает вам ТЗ и вы работаете уже с ним. В последнее время, я предпочитаю работать только с ТЗ от заказчика, почти не беру работу где заказывают макет и говорят сделай как ты это видишь. С одной стороны нет ни каких рамок и ограничений коими является работа с ТЗ, с другой, это потом позволит заказчику «иметь ваш мозг» в плане тут переделай, а тут добавить надо. По этому предпочитаю работать только с ТЗ. А вы?

Опять таки, при работе с заказчиком, полностью отошел от «сел за комп и нарисовал макет». Я внимательно изучаю ТЗ, если появляются моменты либо не понятные, либо те нюансы которые забыл указать заказчик, я обращаюсь к заказчику за пояснениями.

Затем на листке бумаги рисую каркас и то как будет выглядеть будущий дизайн макета и показываю его заказчики. Затем мелкие доработки все еще на листке бумаги и только после полного согласия и утверждения со стороны заказчика, я сажусь за Фотошоп и начинаю работать.

Плюсы такой работы, вам за нее платят. И еще один плюс, это то, что начинаете работать только после полного согласия заказчика. Именно этот момент не позволит заказчику сеть вам на шею в плане исправлений то и сего. Конечно же исправления и доработки бывают, но они мизерные.

Когда макет готов, я заливаю его на один из облачных сервисов и даю ссылку заказчику. После одобрения работы, получаю деньги и пересылаю PSD макет заказчику. Кстати вот еще один момент: при работе с фрилансерами или заказчиками как и когда брать или давать деньги за работу? Либо платить или брать деньги вперед, допустим хотя бы половину, либо платить и брать деньги в конце работы. Как то я написал вот этот пост, но сейчас если честно я пересмотрел свое мнение и думаю по другому. Прочитайте этот пост если еще не читали его, советую.

На этом все. Я рассказал вам о создании макета сайта, о том, чему научился и во что сейчас верю в плане работы с фрилансерами и заказчиками.
Жду ваших откликов по теме поста, а так же не забудьте написать о том нравится ли вам новый дизайн блога Все обо всем.

Похожие посты:

• Акция: Уникальный макет для блога
• Два дня без дела
• Очередной макет на продажу
• Макет — Привет Мозг
• Минимализм