16 основных требований к дизайн-макету сайта

16 основных требований к дизайн-макету сайта

В практике разработчика сайта часто встречается следующая ситуация  — заказчик обращается к разработчику с готовым (уже согласованным и утвержденным) макетом и предлагает на его основе создать сайт.

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

Приведу наиболее яркий диалог из собственной практики:

Заказчик: У нас есть макет, мы на его основе хотим сделать сайт.

Я: Ок, давайте посмотрим на макет.

Я: Простите, но презентация в PowePoint никак не может быть макетом сайта… Вы уверены? Возможно, это только блок-схема?

Заказчик: Нет, это макет сайта — нам знакомый дизайнер так нарисовал и сказал, что проблем не возникнет!  Он хороший специалист, нам его […] рекомендовали!

Обосновать свою точку зрения удалось исключительно демонстрацией нескольких настоящих дизайн-макетов. А вот вернуть потраченные на вот такой «дизайн» деньги, насколько мне известно, заказчику удалось с некоторым трудом, а кроме того, затраченное на подобную «разработку» время привело к срыву сроков запуска сайта.

Если вам нужен сайт, но вы собираетесь заказывать разработку макета у своего дизайнера — для того, чтобы  не попасть в такую ситуацию, обязательно убедитесь в том, что дизайнер ознакомлен с изложенными ниже основными требованиями, которые выдвигаются к дизайн-макетам сайтов.

1.Используйте правильные форматы файлов

Макет представляется только в одном из 2-х форматов — PSD (Photoshop Document) или TIFF (Tagged Image File Format).

PDF, AI, EPS, BMP, QXD, QXT и прочие, не говоря уже о расширениях файлов пакета программ Microsoft Office — не допускаются.

Обратите внимание — мы говорим именно о макете, миниатюры и превью могут предоставляться в файлах сжатого формата, например JPG.

2. Новый элемент — новый слой

Каждый элемент дизайна должен быть представлен в отдельном слое. Это означает, что любой элемент цельного изображения является автономным и может быть в любой момент включен/выключен/удален/изменен — не затрагивая другие элементы.

3. Размер макета для фиксированного по ширине шаблона

Если планируется фиксированный по ширине шаблон — ширина макета обязательно должна учитывать отступы справа-слева от края экрана. Кроме того, отдельно указывается цвет фона «подложки».

Отступы от края браузера

4. Размер макета для «резинового» шаблона

Если шаблон «резиновый» — в шапке и подвале страницы не менее 20-50 пикселей с правой стороны должны быть отрисованы так, чтобы их без проблем можно было дублировать.

Дублирующийся фон

5. Учитывайте рамки и отступы браузера

Если шаблон рисуется под определенное разрешение, необходимо учитывать, что размер макета создается в соответствии с разрешением окна браузера, а не монитора. Например, при разрешении монитора 1024, размер макета составляет 1002 пикселя.

6. Правильно рисуйте фон

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

Если вы используете сложные фоновые элементы, обязательно хотя бы небольшую часть изображения сделайте однотипной — для дублирования в случае необходимости.

7. Не используйте фоновые фотографии

Использование в качестве фона «тяжелых» изображений (например, полноразмерных фотографий) — не допускается.

8. Используйте направляющие

Все выравнивания слоев должны делаться по направляющим (rulers), которые не удаляются из макета.

Направляющие (rulers)

9. Используйте стандартные шрифты

Для текстового содержимого должны использоваться стандартные шрифты. В случае использования нестандартного шрифта, он должен прилагаться к макету и в обязательном порядке должен быть указан шрифт-заменитель из стандартного набора.

Да, можно использовать правило CSS3 font-face, которое позволяет внедрять нестандартные шрифты. Но даже на сегодняшний день, работа этого правила отлажена не до конца и его использование чревато проблемами при отображении в разных браузерах.

Шрифты

10. Используйте текст по назначению

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

11.Осторожно обращайтесь с формами

Стандартные элементы форм должны подвергаться изменениям только в рамках здравого смысла. Для дизайнера, не знакомого с возможностями CSS в этой области, оптимальным будет использование стандартных элементов.

12. Готовьте сборку дизайна

Мелкие элементы дизайна (иконки, стрелки, буллеты и т.д.) в случае их многократного повторения в макете (например, маркированный список, меню и прочее) должны быть представлены в отдельных файлах. В самом макете все повторения могут размещаться в одном слое.

13. Оформляйте внешний вид меню

Выпадающие-выезжающие-разворачивающиеся меню должны быть отображены в двух видах:

  • собранный;
  • разложенный.

14. Оформляйте пункты меню

Пункты меню должны быть отображены в 2 видах:

  • пассивный (курсор не наведен)
  • активный (курсор наведен).

Кроме того, тексты пунктов меню должны учитывать возможность длинного названия раздела и переноса его на вторую строку.

15. Оформляйте ссылки

Оформление ссылок должно быть указано в 3 статусах: обычная ссылка (link), ссылка при наведении курсора (hover link), посещенная ссылка (visited link).

16. Оформляйте навигационные цепочки

Навигационные цепочки должны быть прописаны с учетом реальных названий разделов и переноса слов.

39 комментариев к “16 основных требований к дизайн-макету сайта”

  1. А где вы их используете при заказе макета?…
    У Темплмонстра нет ли стандарта это описывающего, проверенного годами?

    зы. При ошибке кода пришлось переписывать коммент, так как он при нажатии на back исчез… лажа имхо.

    ОтветитьОтветить
  2. Onore, в каком смысле — «где»? Требования используются при заказе макета у дизайнера.
    Честно говоря, я не видел на http://www.templatemonster.com таких стандартов, впрочем, не буду утверждать, поскольку их услугами пользовался буквально пару раз.
    Буду благодарен за ссылку.

    ОтветитьОтветить
  3. Респект — весьма полезная статья!
    Хорошо бы также:
    1) В дизайн-макете должны быть представлены внутренние страницы приложения, а не только индексная.
    2) Не забыть заполнить поля формы.

    ОтветитьОтветить
  4. @zmei: спасибо за комментарий.

    1) Вы абсолютно правы, очень важное дополнение — большое спасибо!

    2) а вот здесь, к сожалению, не совсем понятно, что имеется ввиду.

    ОтветитьОтветить
  5. Часто встречается что поля форм в макете оставляют пустыми. Например на вашем сайте форма комментариев по умолчанию пустая, так ее порой видит и дизайнер когда сдает макет в производство. А теперь представим что бэкграуновый цвет сайта белый, цвет шрифта — черный, а бэкграундовый цвет полей формы так же черный. Что делать верстальщику? Черный цвет шрифта для полей формы не поставишь потому как буквы на том же фоне видны не будут, поставить на свое усмотрение — можно не угадать с концепцией дизайна и т.д. Это конечно мелочь, но хорошо офрмленный сайт из мелочей и формируется :)

    Я еще один момент вспомнил, гораздо более важный. Контент на живом сайте формируется динамически, а в дизайн макете он иногда, ограничен размерами отведенной для него области(т.е. не рипитится). Представим листинг категорий. Бэкграундовое изображение — например развернутый рулон старинной рукописи со сложной текстурой и диагональной тенью( думаю вам встречалось нечто подобное). В дизайн макете представлено 5 категорий, а на «живом» сайте их 10. Версальщику надо найти эту однопиксельную полоску которая будет рипитится по Y(вертикали), а ее нет. И таких мест на сайте достаточно много. Важно помнить что количество контента на живом проекте «плавает» и его нельзя жестко ограничивать рамками какой либо плашки. Для того чтобы избежать подобных ситуаций нужна та самая повторяющаяся область (это не обязательно должен быть один пиксель) которая будет рипитится по вертикали или горизонтали(это уже зависит от конкретного проекта).

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

    ОтветитьОтветить
  6. Спасибо, интересно было почитать все в одном месте :) думаю для многих дизайнеров это будет очень полезным, я бы перед регистрацией на фрилансе (и подобных проектах, где люди предлогают услуги дизайнеров) добавил бы чекбокса (рядом согласен с правилами) о прочтении этой статьи.

    Еще по поводу шрифтов. Их можно кстати сделать не только используя CSS3 font-face (который на сегоднешний день еще не стандарт, и пройдет не мало времени пока таким станет). Вспоминается проект, когда клиенту захотелись оригинальные шрифты + чтобы это работало под ие! Мы сделали при помощи cufon (http://cufon.shoqolate.com/generate/), но это не было хорошее решения (тормаза сплошные, особенно под ие). Так что, не стоит спешить использывать не стандартные шрифты, как говорится — еще не время.

    ОтветитьОтветить
  7. @slon1024: спасибо за комментарий.

    Я не стал упоминать cufon как вариант именно по описанным Вами причинам. Когда-то я ради эксперимента пробовал сделать через него нестандартные варианты шрифта — действительно, тормозило очень сильно, а кроме того в тогда еще более-менее поддерживаемом ИЕ6, все отображалось с ошибками и большими проблемами.

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

    ОтветитьОтветить
  8. По поводу пункта 9 хочу заметить, что есть ведь технология куфон, при помощи которой можно прекрасно использовать нестандартные шрифты.

    ОтветитьОтветить
  9. @ Игорь: спасибо за комментарий.

    Да, использовать Cufón можно — спору нет, но только в нем есть несколько недостатков:
    — увеличение веса страницы. Поскольку подгружаются внешние скриптовые файлы, это автоматически увеличивает размер документа и страница открывается дольше;
    — отключенный JS. Если выключить яваскрипт на страницах, то весь текст, который сделан с помощью Cufón, будет отображаться как обычный текст;
    — текст нельзя скопировать;
    — не годится для больших объемов текста — по понятным причинам;
    — пока скрипт не загрузится и не отработает, пользователь будет видеть весь текст — обычным шрифтом. При сбое — тоже самое.

    Соответственно, Cufón — это хорошо, но только в экстраординарных случаях.

    ОтветитьОтветить
  10. Прочитав статью со всеми комментариями, так и не понял, что из себя должен представлять «дизайн- макет» :( Я только недавно начал увлекаться вёрсткой и дизайном, и в дальнейшем планирую связать с этим свою жизнь… Yaroslav.CH, не могли бы вы, выслать «дизайн-макет» для демонстрации? Так я хотя бы пойму, что это такое… Спасибо!

    ОтветитьОтветить
  11. Вот теперь всё понятно! И о том, что вы писали и что «оно» из себя представляет. :) Спасибо, добавил блог в закладки и пошёл читать вас дальше…

    Продолжайте в том же духе! Удачи :)

    P.S. На самом деле сложно найти хороший блог, по теме, и где вам ответят.

    ОтветитьОтветить
  12. @ roomster: я стараюсь отвечать на все вопросы читателей — блог создавался также и с целью общения :)

    ОтветитьОтветить
  13. Конечно замечательно когда клиенты предоставляют макеты именно в графических форматах. Сам предпочитаю PNG.
    Хотя бывают и такие кто до сих пор шлет картинки вставленные в MSWord :)
    Спасибо за статью, полезно, но особенно интересно было почитать комментарии.

    ОтветитьОтветить
  14. Статья полезная, спасибо.

    Только вот с первым пунктом не согласен. Как-то очень жестко отмели все форматы, кроме psd и tiff. Векторные форматы также вполне пригодны для создания макетов (например, SVG), не говоря уже о том, что есть открытые аналоги psd (XCF и ORA).

    ОтветитьОтветить
  15. По поводу 4 пункта: тянущиеся шапку и подвал можно также «резать» посередине. Подвал я режу посередине почти всегда, а вот с шапкой часто приходится пытать дизайнера: что он имел в виду, и где то место, по которому можно тянуть, или тот «сбег градиентиком», в который должен «уйти» правый край. И часто в ответ получаешь: «Пусть лучше будет фикса»…

    А то, что дизайнеры «наивно» рисуют дизайн шириной 1024 и не понимают, а почему это он не влезет, если разрешение как раз такое, и про залихватские нестандартные шрифты даже говорит не хочется…

    ОтветитьОтветить
  16. Здравствуйте, я начинающий дизайнер и у меня есть вопрос по 4му пункту. С какой целью правые части шапки и подвала должны быть дублируемы. Их потом разрезают, зачем? И это относится к подложке? Может для вас вопрос покажется глупым, но очень хотелось бы разбираться в таких деталях, чтобы не допускать ошибок. Заранее спасибо за ответ!

    ОтветитьОтветить
  17. @gulasha:

    Их потом разрезают, зачем?

    Это правило действует только для «резинового» шаблона и изображений в хедере.

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

    Таким образом, в том случае, если разрешение пользовательского монитора будет 1024х768, то картинка в шапке будет от края до края экрана. А если разрешение — 1280х1024? При этом ширина картинки, само собой, не меняется. Соответственно, справа (если шапка прибита влево) или слева и справа (если изображение в шаке отцентрировано) у Вас появится пустая область, которую просто нечем заполнить.

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

    Если есть вопросы — спрашивайте :)

    ОтветитьОтветить
  18. Спасибо,теперь ясно, оказывается все очень просто ))) чувствую теперь себя из племени тумба-юмба, которым показывают, как пользоваться ножом и вилкой.

    ОтветитьОтветить
  19. @gulasha: скажу откровенно из своей практики — лучше вовремя спросить, чем потом получить тонны ненависти и разборок с разработчиком / верстальщиком, а очень может быть, что и с заказчиком, если первые два смогут аргументированно объяснить в чем Вы ошиблись :)

    И вот это будет намного хуже и неприятнее — как с точки зрения ощущений, так и денег :) Так что…

    ОтветитьОтветить
  20. Не могли бы написать урок по созданию темы для ворпресс. Так бы вы облегчили жизнь многих.

    ОтветитьОтветить
  21. @Согдиана: честно говоря — не вижу в этом смысла. В англо- и русскоязычном сегменте Интернет, количество подобных статьей очень велико.

    ОтветитьОтветить
  22. @Yaroslav.CH:
    Я извиняюсь. В своем предыдущем комменте, я хотела попросить вас написать урок по создании премиум темы для вордпресс, так как такого урока я еще не встречала. Может быть и есть уроки о создании премиум темы, но мне не довелось изучать их. Ну конечно если знаете какой – нибудь ресурс о создании премиум темы под вордпресс, то прошу вас поделиться ссылкой. Не каждому по карману покупать платные премиум темы, использовать украденную версию платного шаблона не хочется. Зачем брать грех на душу. Лучше самой создать премиум тему и пользоваться.

    ОтветитьОтветить
  23. Помнится, столкнулся с нюансом №9 при заказе макета — шрифт был какой-то сказочный) Хорошо, что при смене его на стандартный не возникло различных неприятностей и таймс-нью-роман вписался как родной)

    ОтветитьОтветить
  24. Если бы все дизайнеры придерживались данных правил — верстальщики умерли бы со скуки)

    ОтветитьОтветить
  25. Здравствуйте. Была попытка создать свой шаблон, но увы, видимо не дано=)
    Теперь перешел на готовые шаблоны, мне кажется, что так честнее, ведь если вы не собрались создавать свой собственный магазин, к примеру, тогда и создавать обычный шаблон глупо.
    Хотя статья очень толковая, и я уже нашел несколько ошибок, жаль что я не нашел Вашу статью ранее.

    ОтветитьОтветить
  26. я бы добавил _ не давайте на страницу много рекламы, такие сильно раздражают

    ОтветитьОтветить
  27. А почему нельзя использовать полноразмерные фотографии? Видела несколько интересных дизайнов, когда фотка на фоне, смотрелась отлично.

    ОтветитьОтветить
  28. @Margo: В статье сказано, что полноформатное фото тяжелое. То есть фотография утяжеляет вес страницы и она медленно открывается. При медленном интернете это жесть.
    Не знаю, может быть есть другие причины. Дизайном я только начинаю интересоваться. Статья мне показалась очень полезной.

    ОтветитьОтветить
  29. Спасибо за подробный материал. Познавательно! Я уже заказала макет для своего сайта у разработчика, теперь буду знать на что стоит обратить внимание при приемке.

    ОтветитьОтветить
  30. Спасибо за статью. У меня как раз «смешной» случай: занимаюсь в основном версткой и дизайном для полиграфии как фрилансер, некоторое время назад пригласили сотрудничать с веб-агентством. Ни верстальщиков, ни программистов у них в штате нет. Соответственно, обратной связи от спецов никакой. На мой вопрос про техтребования менеджер, которая дает мне задания, ничего внятного ответить не смогла (о тз вообще молчу — в полиграфии я бы за такое тз просто убила бы). Спасибо таким ресурсам как ваш — есть где быстро получить подсказки. А то ведь совсем нелепо получается: мне, неспециалисту, приходится объяснять менеджеру веб-агентства азы ее профессии. И совсем грустно, что при таком раскладе создать качественный сайт маловероятно.

    ОтветитьОтветить
  31. Ну вообщем-то все грамотно и полезно. И шрифты и бекграунд (нетяжелый) — все актуально. Сталкивался с подобной проблемой когда начинал учиться делать самостоятельно макет)), жаль тогда не было вот таких вот доступных учебных пособий. Автору спасибо.

    ОтветитьОтветить
  32. Где — то на просторах интернета бродит хороший туториал по 12 сеточной grid верстке. Сайт называется tutplus.com Кто шарит в английском — рекомендую, получите хорошую практику от западных специалистов

    ОтветитьОтветить
  33. @zmei: Думаю, что в дизайне также должны быть адаптивность, так как без адаптивности процент отказов будет большая.

    ОтветитьОтветить
  34. Здравствуйте. Спасибо за статью.
    От себя еще хочу добавить:
    1. нестандартные шрифты использовать можно и даже нужно, но 1-2 семейства максимум, главное, чтобы шрифт был бесплатный, лучше использовать с репозитория гугла. Если используется не из гугла, то дизайнер в идеале должен прикрепить используемые шрифты в архив с psd макетом.
    2. сейчас без адаптивности уже нереально представить качественный сайт, поэтому в идеале нужно нарисовать главную в 2-3 вариантах: (fullHD) и хотя бы 768пх, а лучше еще 1000 для планшетов и ноутов/нетбуков.
    3. Если шаблон фиксирован, то его фикс ширина должна быть в одном из вариантов: 960, 1000, 1170 пх (если планируется использовать bootstrap), а сам холст размеров 1920пх (или даже 2550 для Retina). Т.к. сейчас 24″ монитор — не редкое явление (а у него как раз ширина 1920 пх ну минус скроллбар и бордеры браузера).
    4. к каждому элементу, по которому можно кликнуть сделать hover’ы в скрытых слоях или показать рядом с иконкой «руки»
    5. делать какие-то нотсы с комментарием, если элемент динамический, в этой сноске писать подробно как должен вести себя элемент и при каком событии.
    6. Если заказчик строго требует IE7-8, в котором он хочет, чтобы сходство с макетом было на 100% (а сейчас это периодически встречается, когда заказчик из ГОС структуры, у них там стоит Windows XP+ IE7-8, как правило), тогда дизайнер в идеале не должен расбрасываться своими умением делать тени/градиенты и подобные вещи, где только возможно :) Костыли и обилие скриптов, которые кое-как эмулируют работу css3 для верстки — это не самый лучший выход.

    Вот такое небольшое дополнение :)

    ОтветитьОтветить
  35. Очень полезная статья,спасибо огромное. Буду следовать инструкциям, может когда-нибудь сделаю свой бомба сайт,который выстрелит как пушка) Но на самом деле читая вашу статью,понимаешь,что не знающим очень сложно влиться((((

    ОтветитьОтветить
  36. Спасибо Вам огромное очень полезная статья

    ОтветитьОтветить

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *


Срок проверки reCAPTCHA истек. Перезагрузите страницу.