Отмечу сразу — не все дизайнеры мудаки. Но написать этот пост меня сподвиг один из последних заказов по верстке, где макет был сделан все-таки не хорошим дизайнером. Получив от заказчика макет дизайна сайта, я подумал, что верстка должна быть гладкой и приятной, но я ошибся.
Ошибка моя заключалась в том, что взглянув на превью макета и увидев довольно неплохой чистый дизайн, я до начала работы не открыл предоставленный послойный .psd макет в редакторе для более детального изучения. Да, говно я верстальщик после этого, но приходится учится на своих ошибках и делиться опытом с другими.
После того, как я более детально ознакомился с макетом то понял, что дизайнер, по меньшей мере, аматор, а те эпитеты, которыми он был награжден в последствии я здесь приводить не стану.
Что было не так в макете? Самое плохое было то, что от него так и веяло «плакатом». Помимо этого были нарушены все основные требования грамотного дизайна макетов сайтов: полное отсутствие структуры макета, использовались нестандартные шрифты, при этом к исходнику не были предоставлены эти самые шрифты, помимо этого графика и текстовые материалы были смешаны, а местами вообще сведены в единые слои. Ну… Естественно о сетке, каких либо направляющих и линейках я вообще и не говорю, ими там и не «пахло».
В общем, испытав немало проблем с версткой макета, а скорее с правками после верстки я решил, что нужно написать некую памятку, которая бы говорила об основных правилах подготовки макетов дизайна сайтов для передачи на верстку.
Итак, изначально давайте обозначим основные моменты о которых мы будем говорить далее.
- Сетка макета
- Структура макета
- Разделение графики и текстов
- Шрифты
- Единицы измерения
- Обязательные элементы макета
Собственно, далее подробно по каждому моменту.
Дизайн сайта по сетке
Если вы не знаете с чего начать работу над дизайном макета сайта, то начните ее с сетки. Сетка подразумевает собой разделение всей площади макета дизайна на блоки равных размеров, которые станут для дизайнера основой гармоничной и ровной композиции сайта.
Если вы считаете, что у вас идеальное чувство баланса и пропорций, то наложите направляющие на макет просто для проверки своего чувства. Но помните, что сетка только тогда является таковой, когда в ней есть логика. То есть, когда структурные блоки имеют равный размер и равноудалены друг от друга. При этом я не говорю что нужно использовать какие-либо существующие модели сеток типа 960gs и прочих. Главное в сетке — порядок, а не размеры блоков.
Поверьте, верстальщик, получив от вас макет с направляющими сетки будет вам очень благодарен.
Структура макета
Макет дизайна сайта должен иметь структуру схожую со структурой самой верстки сайта. То есть, если вы создаете макет дизайна классического сайта из трех колонок, то и ваш документ должен быть структурирован соответственно. Я не стану утверждать, что Adobe Photoshop является лучшим инструментом для создания макетов дизайна сайтов, более того я считаю, что для этого куда больше подходит тот же «адобовский» FireWorks, но исходя из того, что в 95% случаев на верстку отдаются исходники именно в «фотошопе», мы будем в нашем дальнейшем рассмотрении структуры макета дизайна сайта использовать в качестве примера именно документ .psd
Итак, у нас есть стандартный макет сайта в три колонки: шапка («хедер»), левая колонка, центральная колонка, правая колонка, подвал («футер»). Внутри этих основных блоков могут находится другие блоки и элементы, но это — скелет.
Так вот. Ваш .psd документ должен быть разделен на соответствующие группы слоев. Говоря проще, у вас должны иметься папки (это и есть группы слоев) с соответствующими названиями основных блоков и уже в них вы должны размещать графику и тексты для данного блока. О разделении графики и текста подробнее в следующем разделе.
Далее сами слои. Названия слоев должны быть логически осмысленными. То есть название «Layer10» с помещенным на слое растром логотипа — это первая стадия олигофрении. Если вы размещаете на слое какой-либо структурный или логический элемент сайта, то и назовите слой соответствующим образом. Кроме этого, если какие-либо структурные элементы макета состоят из нескольких слоев они должны быть объеденные в подгруппы внутри родительских групп.
А еще есть смысл группы слоев, образующие структурный или логический элемент макета и подразумевающиеся в верстке как единый графический фрагмент переводить в Smart Object с соответствующим названием.
Ну вот, когда есть хоть какой-то порядок в структуре, можно отделить «зерна от плевел».
Разделение графики и текстов
Здесь все просто. Каждая группа слоев основных структурных элементов должна содержать в себе две основные папки — графика и тексты. Для чего такая скрупулезность? Для того, чтобы при верстке творения вашего дизайнерского таланта верстальщику не пришлось бы отыскивать нужные слои особенно в больших многослойных макетах. Достаточно было бы просто отключить группу с текстами и разработчику сразу же видна вся графика для нарезки без лишних деталей.
Шрифты
В дизайне сайтов крайне желательно использовать «безопасные» шрифты. Данный тип шрифтов гарантирует вам что при верстке конечный макет не будет искажен за счет разности высоты символов, кернинга и интерлиньяжа. Если кратко, то вот список:
- Arial
- Arial Black
- Comic Sans MS
- Courier New
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Или же читайте детально про способы шрифтового оформления контента web-страницы.
Если же вам никак не обойтись без кастомных шрифтов в диазйне, то вы должны давать, в первую очередь себе, полный отчет где будет использоваться растрированный вариант надписи а где символы шрифта. Если таки предусматривается использование символов кастомного шрифта, то дизайнер, в обязательном порядке должен включить файлы шрифта в папку с файлами макетов дизайна. Как внедрять ваши шрифты в верстку, это уже проблема верстальщика, но снабдить его шрифтами вы должны сами.
Единицы измерения
Как бы вам не хотелось, что бы вы не любили и с какими бы единицами измерения вы бы не привыкли работать, забудьте обо всем, кроме пикселя. На сегодняшний день при имущественным медиа-типом большинства стилей оформления сайта является экранная проекция. А любой экран в основе своей имеет точку, которую и принято называть пикселем. Поэтому когда вы создаете дизайн сайта помните о пикселе. Размер макета — в пикселях. Размер шрифтов — в пикселях. Размеры элементов — в пикселях.
Кроме этого. Очень важно не допускать беспорядка в величинах. Золотое правило — округление. Не делайте сетку с размерами оканчивающимися на что либо иное кроме как 0 или 5. Будьте вы хоть сто раз педантом, но переступите через себя и округлите размер шрифта в 36.6 px до 36 и верстальщик будет вам благодарен.
Обязательные элементы макета
Теперь, когда у вас в макет более-менее все нормально. Вы должны позаботиться о том, какую информацию сможет получить верстальщик, взглянув на ваш макет.
Не важно как много страниц содержит ваш дизайн, но в макете дизайна обязательно должны быть показаны следующие элементы:
- Простые ссылки в обычном состоянии, на наведение курсора, посещенные;
- Ссылки меню в обычном состоянии, на наведение курсора, посещенные, активные (когда находимся в пределах выбранного пункта);
- Заголовки h1-h6, причем не просто приведенные списком, а с абзацем текста ниже (для всех кроме h1 еще и выше), чтобы был виден отступ заголовка;
- Базовый текст страницы, чтобы можно было легко определить параметры основного шрифта;
- Списки упорядоченные и неупорядоченные;
- Цитаты;
- Преформатированный текст, код;
- Таблицы. Причем, в идеале показать стандартный вариант вида таблицы по умолчанию так и с определенными кастомными классами типа бордеров и зебры.
Это обязательный минимум. Если вы покажите дополнительные элементы, то получите еще «пуд» благодарности от верстальщика.
Заключение
В заключении хочу сказать. Что если вы классный дизайнер-полиграфист и вдруг решили «нарисовать» дизайн сайта, то не поленитесь ознакомится с базовыми принципами html и CSS, а также рекомендациями по юзабилити веб-сайтов. Если вы изначально позиционируете себя как дизайнер макетов сайтов и при этом не делаете что-либо из перечисленного выше или не знаете основ html и CSS, то все что вы о себе думаете — самообман. Если же то, что написано здесь для вас не новость и более того у вас есть много чего добавить к тексту выше, то я с радостью бы сотрудничал с вами как с дизайнером макетов веб-сайтов.
Кстати, очень хороший материал по этой теме есть здесь: http://habrahabr.ru/blogs/web_design/50497/. Нашел сегодня, когда просматривал статьи по запросу «памятка дизайнеру веб-сайтов» после написания данного материала. Отчасти есть схожие моменты но в целом статья по ссылке более глубокая и осмысленная нежели мой эмоциональный выкрик. Самое интересное, что материалов много. Неужели дизайнеры-мудаки не умеют читать?
Да, и напоследок, для тех, кто считает что настоящее искусство не вписывается в рамки правил и сеток. Вспомните труды великих художников эпохи Возрождения, вспомните Правило третей, вспомните «Золотое сечение», вспомните Последовательность Фибоначчи и… идите в жопу.
P.S. К слову…
Пока я рассказываю о том как делать макеты, Яха говорит про то, что почта на Яндексе в своем собственном домене — это просто. Ну что же, Яндекс растет. Раньше такое сделать было нельзя.Загородный деревянный дом и бани брусовые. Брусовые дома бани и брусовые бани под ключ.
Спонсоры статьи: