Создание макета сайта

10
Просмотров: 11 865

Создание макета сайта

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

Думаю, что вы заметили обновление дизайна на моем блоге? Как оно вам? В этот раз я отошел от любимого мной минимализма и решил не много добавить цветовой гаммы в шаблоне. Прежде чем этот шаблон появился и я окончательно решил, что именно он будет лицом блога, я успел нарисовать еще три разные версии для блога Все обо всем. Главной проблемой было то, что заканчивая очередной макет для редизайна блога, в голове появлялись мысли того как еще, что то добавить в дизайн либо исправить в нем. Именно макет который вы видите сейчас на блоге, можно наверное назвать чем то средним и оптимальным, неким «гибридом» всех работ по редизайну сложенным в одном.
Вообще редизайн блога был приурочен к трехлетию блога Все обо всем и должен был появиться на блоге 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 макет заказчику. Кстати вот еще один момент: при работе с фрилансерами или заказчиками как и когда брать или давать деньги за работу? Либо платить или брать деньги вперед, допустим хотя бы половину, либо платить и брать деньги в конце работы. Как то я написал вот этот пост, но сейчас если честно я пересмотрел свое мнение и думаю по другому. Прочитайте этот пост если еще не читали его, советую.

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

 

10 КОММЕНТАРИИ

  1. Очень интересно было почитать. Для меня всегда было загадкой, как-же именно делают макет опытные дизайнеры.

  2. Мне было бы конечно еще интересно почитать о создании темы, например на WP. Я читал уже один ресурс. Кое что получилось, но это было далеко от идеала)))

    • «интересно почитать о создании темы, например на WP» это уже имеется ввиду верстка? Если да, то я не верстаю, по этому и не могу ничего про это написать

  3. Кирилл, вопрос по теме: тех.задание заказчик пишет по твоему шаблону или сам пытается составить?
     
    По поводу нового дизайна: шрифт в цитатах (blockquote) слишком уж велик по сравнению с остальным текстом. А заголовки в тексте (h3 без ссылок которые) может сделать чуть-чуть темнее?
    И если совсем придираться, то счетчики как-то в кучку все, обратили внимание на себя (по центру, что ли их, и отступы между ними).
     
    В остальном – дизайн понравился!

    • Заказчик пишет свое ТЗ, то, что он хочет видеть на сайте. Я же после получения ТЗ, могу ему, что подсказать, посоветовать
      Спасибо за замечания. Именно сейчас исправляю blockquote, так как тоже не нравится его размер. h3 так же думаю чуть затемнить.

  4. Привет, такой вопрос на зрел — по чём ты берешь в среднем, за создание макета для блога? 3 страницы.

    • Все зависит от макета и ТЗ. На странице контакты, есть и мыло мое и аська, а так же форма для связи. Пиши там все 🙂

  5. А как же проектирование и прототипирование? Без него качественный сайт с большим функционалом сделать сложно.

  6. Про ТЗ: Тех.задание это хорошо, но в ТЗ заказчик не всегда описывает именно то что ему нужно, так как создавая сайт (1й раз) сам Заказчик не понимает что он хочет. Поэтому все ТЗ на дизайн сами по себе мизерные и описывается там только общий вид, какие блоки охото видеть и т.п. А вот сетку Заказчик очень редко когда может предоставить. Так как разработка юзабилити ложится на плечи дизайнера =))
    Про оплату: самый выгодный и не рисковый вариант — это брать 50 на 50. Иногда даже 30 30 40.

    Спс за статью.

  7. Мне очень нравиться визуальный стиль. Минимализм — это то, за что я полюбил Google, все гениальное — просто. Сайт не перегружен кнопками или информационными блоками, симпатичная, нейтральная цветовая гамма тоже импонирует. Я бы конечно кое — что изменил на сайте, (кнопку вверх переместил бы вправо, блок друзья — в шапку сайта) но в целом очень достойно, примерно такой сайт я и собираюсь делать. Но больше всего понравился информационный блок «пользуйтесь» — по моему просто гениально, так элегантно вывести архив статей на «свет Божий» (а там наверняка ссылочки верно?)

ОСТАВЬТЕ ОТВЕТ