Опубликовано автор в категориях Дизайнеру, Теория.

Советы дизайнерам веб-сайтов за которые верстальщик скажет спасибо

Отмечу сразу — не все дизайнеры мудаки. Но написать этот пост меня сподвиг один из последних заказов по верстке, где макет был сделан все-таки не хорошим дизайнером. Получив от заказчика макет дизайна сайта, я подумал, что верстка должна быть гладкой и приятной, но я ошибся.

Ошибка моя заключалась в том, что взглянув на превью макета и увидев довольно неплохой чистый дизайн, я до начала работы не открыл предоставленный послойный .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. К слову…

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

30 комментариев к записи “Дизайнерам-мудакам или…”

  1. Neolot

    Подписываюсь под каждым словом. Жаль вот только, что рядовому дизайнеру проще забить на эти правила, чем заботиться о верстальщике. Хорошо, если хотя бы слои по папкам разнесены… А базовых знаний HTML и CSS обычно просто нет, малюют что в голову придет.

    Ответить
  2. Hiway

    Да… Вот потому и сетую. Кстати, очень неплохой у вас сайт. Когда-то свой первый блог назвал «Путь Веб-мастера» 🙂

    Ответить
    • hiway

      Клёво. Очень неплохая задумка. У меня тоже в загашнике где-то есть стандартный типографский файл который можно отдавать дизайнерам для просмотра при макетировании.

      Ответить
    • Hiway

      YoYurec Очень накипело! Просто иногда «рисую» сам. И просто зла не хватает, когда встречаешь безобразные беспорядочные макеты.

      Ответить
  3. Валерий

    О верстальщике никто не заботится — последнее звено, вся ответственность на нём. Несколько лет верстал газету, постоянно приходилось исправлять и дорабатывать чужие косяки.

    Ответить
  4. Максим

    Большое спасибо. Я недавно искал в каком виде лучше передавать материалы на верстку.

    Ответить
  5. Kareg

    Видимо проще одновременно и дизайнить и верстать, чем дождаться от кого-либо соблюдения приятных для тебя правил 🙂

    Ответить
  6. Антон

    Мне ещё ни разу не попался дизайнер, который сделал бы подготовил макет как я хотел:

    – рассортированы и названы слои;
    – поведение блоков, стили для заголовков и ссылок.

    Иногда даже светящиеся ховеры для графических кнопок приходилось дорисовывать самому (!)

    Ответить
  7. Ирина Поттер

    Спасибо за толковое описание и ссылку. Возьму на заметку.
    Я поначалу тоже делала много ошибок, сознаюсь. И верстальщики попадались, которые напрочь игнорировали сетку и направляющие и все разъезжалось, но последний случай просто выбил… Впору писать заметку «Web-мастерам…». Даже не представляла, что и такое может быть :))))
    Делаю макет, все раскладываю по папочкам, слоям, подписываю, подсвечиваю… Инструкцию прилагаю, куда что должно кликать, все до пикселя… Отправляю макет верстальщику заказчика и получаю вопрос типа: «А что это за файл? У меня фотошопа нет, я им не умею пользоваться. Можете прислать в JPEG?»!!!!!!

    Ответить
    • Hiway

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

      Ответить
  8. лфьш

    хорошо конечно вам верстальшикам говорит сделай то сделай это, к вам приходит всё готовое остаеться прописать код и всё, а вы попробуйте нарисовть то что хочет заказчик, когда он полный тормоз, ему говоришь что так нельзя будет сверстать(сам иногда верстаю, так что как это делается знаю), а он дибил не понимает и говорит я плачу деньги так что делай так как я хочу. И что тут сделаешь, ведь он и в правду платит.

    P.S. Уважаемые верстильшики думайте не только о себе и своей жопе.

    Ответить
  9. Hiway

    Я считаю, что нарисовать можно что угодно, хоть Монну-Лизу, и сверстать тоже ее можно. Но здесь я говорю об эстетике макета. Пускай на рисунке будет полная ерунда, но если это сделано грамотно, по слоям, по сетке, по группам, с комментариями и нормальными шрифтами, которые прикреплены к макету — то нет проблем. А говорить мол заказчик мудак, а я нет — это удел слабых дизайнеров. Если вы не смогли предложить решение в рамках веб-концепции, которое подходит заказчику, а нарисовали картинку под диктовку, то вы не дизайнер вовсе.

    Ответить
  10. SAM-PROD

    Блин, спасибо большое, в закладки! я сам начинающий верстальщик и дизайнер (мне просто это интересно, и зарабатывать на этом не собираюсь), статья очень понравилась, автор все правильно пишет по моему 😉

    Ответить
  11. Lisa

    Спасибо большое за статью, это первая информация которую я получила, собирая знания о создании дизайна сайта)
    Надеюсь мой макет не вызовет у верстальщика плохих эмоций, я буду стараться следовать вашим советам )

    Ответить
    • Ivan

      Написано правильно и по существу. Сам являюсь дизайнером и могу полностью собрать сайт под ключ. Но ваши требования хоть они и абсолютно справедливы не всегда выполнимы для дизайнера. Когда же они не выполнимы? Тогда, когда нужно макет нарисовать за 4 часа. У меня нет времени простите на все эти заморочки с подписыванием слоев и прочее. Я рисую грамотную структуру и все…остальное меня не заботит — мне не дают на это времени. Если бы у меня было хотя бы 2 дня в запасе — то я бы раскладывал все по полочкам и разжевывал для верстальщика. Но времени нет, у меня план и поэтому я делаю красивую картинку, а как уж она там на слоях получается…

      Ответить
      • Hiway

        Ivan Знаете, вы правы. Нехватка времени является нашим «бичем», я бы сказал даже не не хватка, а неадекватная оценка часа рабочего времени. То есть если бы вам за макет платили больше, то вы могли бы и времени на него потратить больше. Но все-таки, я когда верстаю даже из плохого макета, я делаю комментарии в коде, делаю типографику, несмотря на то, что дизайнер ее не рисовал… То есть я стараюсь сделать максимально хорошо в рамках бюджета и думаю о программисте, которому потом работать с моей версткой.

        Ответить
  12. Bob

    Хм… Уже второй день сижу в этом блоге, и лишь прочитав эту статью решил все таки высказаться.
    Я и не думал что ТЕХНАРЮ (человеку который на ТЫ с техникой) может прийти в голову мысль работать в бедламе. Я только начал изучать вебдизайн, HTML,CSS но уже заметил что структурирование любого документа заранее, сокращает уйму времени в будущем.

    Ответить
  13. rivers

    Интересная статья,я как начинающий дизайнер многого узнал,но на свой основной вопрос ответа не нашел,какие размеры использовать лучше для создания макета? и вообще существует определенные размеры под которые все делают? Давно пользуюсь фотошопом,и решил попробовать себя в этом деле,но когда начал создавать новый документ,не смог определится с размерами =/

    Ответить
  14. rivers

    и вообще опубликовали бы простенький дизайн в psd,было бы понятно по каким размерам делать и что и как… 😉

    Ответить
  15. Jaket

    Спасибо тебе дорогой автор! Искал для себя ликбез по стандартам верстки макетов, найдя эту статью читал с удовольствием:) Написано ПОШАГОВО, что очень цепляет и хорошо укладывается в сознании.

    Ответить
  16. Smile21

    Кстати, в CS5 версии InDesign появилась возможность работать с web-параметрами, что позволяет создавать дизайн сайта с максимальной точностью (касательно сетки, размеров, размещения объектов на поле, ещё стоит отметить, что работать с текстом в Индизе намного удобнее, чем в Фотошопе или другой программе). Так вот к чему это я? Собственно к тому, что может стоит запрашивать у дизайнеров макет сайта для вёрстки в .indd, а не в .psd???

    Ответить
    • Hiway

      Smile21 По поводу текста в индизе согласен. Но заставить web-дизера перейти на индиз с привычного фотошопа будет очень трудно, не смотря на то, что в студии а.лебедева делают макеты сайтов именно в индизе.

      Ответить
  17. Максим

    «Да, и напоследок, для тех, кто считает что настоящее искусство не вписывается в рамки правил и сеток. Вспомните труды великих художников эпохи Возрождения, вспомните Правило третей, вспомните «Золотое сечение», вспомните Последовательность Фибоначчи и… идите в жопу.» — О Господи! Я эту фразу себе в цитатник запилю!

    Ответить
  18. Дизайнеры не просто мудаки

    Как раз сейчас верстаю творение одного гениального дизайнера. Чё-то занят был, цену по превьюшке сказал и быстро взял предоплату не просмотрев PSD. А в нем шедевр. Мало того что нет ни одной папки со слоями, хрен бы с тем, что они хз как все называются… но когда дизайнер рисует макет прямо поверх двух предыдущих не получившихся версий — это уже явный перебор. Как назвать такого дизайнера?

    Ответить
  19. Мистер зло

    Если бы верстальщики еще делали свою работу годно… Так вот отдаешь верстальщику макет и начинается, текста поехали, тут на 10px арт уехал,там не допилено, я уже не говорю,что большинство верстальщиков даже не знают о смарт-объектах. О чем можно говорить, когда верстальщик пишет,что не работает в Photoshop, предпочитая ему Gimp…Ну это конечно,господа, пиз#ец! Но зато каждый уважающий себя верстальщик считает просто необходимым написать злобный, адовый пост в своем недоблоге, о том,какая у них тяжкая судьба и какие дизайнеры пи#арасы….)))Так и представил клуб анонимных верстальщиков,реки слез и соплей.

    Ответить

Оставить комментарий

  • (не будет показан)