Skip to main content
Темплейты для Drupal
Небольшой список рекомендаций для дизайнров: какие нюансы нужно учитывать при создании дизайн-макета сайта. Этот список будет полезен и заказчику - некоторые из эих пунктов можно смело включать в тех.задание дизайнеру.

Что нужно учесть в дизан-макете сайта?

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

Ко мне часто приходят клиенты с готовым дизайном. Иногда это образцовые дизайн-макеты во всех отношениях. Но некоторые случаи заставляют ужасаться. Из недавних случаев: дизайн интернет-магазина 4138 х 5640 пикселей с разрешением в 150 dpi, на сетку даже намека нет, слои свалены в кучу, в самом макете отсутствуют очень нужные детали. Например, заголовки страниц, хлебные хлебные крошки, активные элемнты (hover, focus и т.д. для ссылок и элементов форм). Работать с таким макетом мягко говоря неудобно.  Уходит время на исправление косяков, додумывание элементов, расчеты размеров и соотношений элементов. К тому же много времени уходит на согласование изменений и деталей с заказчиком, и объяснение почему одно правильно, а другое - категоричеки не годится.

Такие ситуации возникают по разным причинам. Самые частые:

  1. дизайн делает не веб-дизайнер, а полиграфист, незнакомый со спецификой веб-дизайна;
  2. веб-дизайнер совсем начинающий и ему просто не хватает знаний и опыта.

Обязательные требования к макету

  • Стандартное разрешение для веба - 72dpi.
  • Ширина макета должна соответствовать одному из стандартных разрешений экрана. Оптимально 1600 или 1980px.
  • Логичная разбивка слоев по группам сэкономит время и вам, и верстальщику.
  • Рисуйте макет по сетке! Адаптивная верстка предполагает работу с сеткой, стандартно - 12 колонок. Разметку макета можно сделать направляющими или отдельным слоем.

Это пример сетки для Bootstrap 3. С наложением сетки и вам будет проще работать - все элементы дизайна будут стройнее. И верстальщику сразу будет видно - что, где и как должно располагаться.

И еще несколько моментов:

  • Не увлекайтесь креативом при дизайне форм: во многих случаях при верстке приходится изобретить "костыли", чтобы сделать элементы форм "точно как на макете" по требованию заказчика.
  • Узнайте на каком движке будет разрабатываться сайт, проконсультируйтесь с разрботчиком. У любой CMS есть свои "узкие" места, если вы их учтете - будет очень круто.
  • Не забвайте, что сайт - это все же сайт, а не рекламный баннер. В дизйне должны быть стандартные элементы - заголовки, типографика, хлебные крошки, меню, кнопки и ссылки в активных состояниях (hover,focus).
  • Приагайте к макету файлы шрифтов или по крайней мере названия шрифтов. Если это платные шрифты - они должны быть куплены закачиком.
  • Если предполагается использование CSS фреймворков (Twitter Bootstrap, Foundation, Skeleton, Uikit) - ознакомьтесь с возможностями фремворка и используйте его элемены в дизайне.

Большинство проблем решается в рабочем процессе. Но в особо запущенных случаях вам просто "завернут" макет с пометкой "технческое несоответствие". К счастью, веб-дизайнеры обычно знакомы с возможстями верстки, поэтому "тяжелые случаи" все же редкость.

 

0

Comments