Что должно быть в макете сайта: шпаргалка для дизайнера

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

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

    Осторожно, в статье много иллюстраций.

    Общие рекомендации

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

    Шрифты

    Их нужно прикреплять к макету, иначе разработчик скачает какие-нибудь не те и испортит дизайн.

    Векторные объекты

    Удивительно, но векторная картинка должна быть в векторе и на макете. Если в макет вставить изображение другого формата, там оно будет выглядеть нормально, но при тестировании станет мыльным. Чтобы такого не происходило, надо всегда использовать вектор: скажем, прикреплять SVG-иконки.

    Сетка

    Лучше всего не удалять сетку с макета, так как по ней удобно ориентироваться. Когда есть сетка, проще разбивать макет на части, делать колонки нужной ширины. Тогда в адаптивной вёрстке меньше багов, и сайт в целом выглядит аккуратнее.

    Сетка на макете сайта в Figma
    Сетка на макете сайта в Figma

    Обязательные элементы для сайта

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

    Страница 404 

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

    404 — это код самой популярной ошибки. Кроме неё существует и множество других состояний, но для упрощения работы 404 стала универсальной страницей для обработки ошибок. 

    Если не забыть про 404, можно пофантазировать и сделать креативной даже эту, самую типовую, страницу. Например, можно добавить интерактивности

    Страница 404 сайта компании Dewis
    Страница 404 сайта компании Dewis

    Пустая страница 

    Если поисковик или фильтр не выдал никаких вариантов, то открывается страница с текстом из разряда «Записей за выбранный период нет». И о ней тоже надо подумать заранее.

    Пустая страница при отсутствии вариантов на сайте «N+1»
    Пустая страница при отсутствии вариантов на сайте «N+1»

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

    Страница с результатами поиска

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

    Поиск товаров на сайте Zara Home
    Поиск товаров на сайте Zara Home

    А так выглядит та же страница, если выпадающего списка нет:

    Картинка для шаринга 

    Речь идёт о картинке, которая появляется в соцсетях или мессенджерах вместо текстовой строки, когда пользователь отправляет кому-либо ссылку. Кстати, разные соцсети отображают этот блок по-разному. Чтобы задать картинку и подпись к ней, нужна разметка Open Graph.

    Ссылка на HTML Academy во Вконтакте
    Ссылка на HTML Academy во Вконтакте

    Страница с текстом 

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

    •   вводный текст;

    •   цитата и длинная цитата с подписью и фото;

    •   видео (и подпись, если она нужна);

    •   картинка (и подпись, если она нужна);

    •   ссылки;

    •   слайдер;

    •   жирный текст;

    •   списки (нумерованный и маркированный), вложенные списки;

    •   блок «поделиться».

    Блог HTML Academy
    Блог HTML Academy

    Необязательные элементы

    Они помогают пользователю сориентироваться на сайте, добавляют наглядности. Такие элементы есть не в каждом проекте, но если они всё-таки предполагаются, надо отрисовать и их. Вот список элементов, которые дизайнеры могут забыть. 

    Стили для карты отдельным текстовым файлом 

    Если вместо обычной карты хочется сделать что-то нестандартное, можно воспользоваться сервисом Snazzy maps. Только нужно уточнить у клиента, будет ли он покупать лицензионный ключ к картам. Если да, передавать разработчикам стили надо в виде JSON-файла. 

    Разные стили карты Санкт-Петербурга на Snazzy maps
    Разные стили карты Санкт-Петербурга на Snazzy maps

    Выделение активного пункта в меню

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

    Поисковый запрос в Google
    Поисковый запрос в Google

    Хлебные крошки

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

    Блог HTML Academy
    Блог HTML Academy

    Личный кабинет 

    Сюда относятся страницы входа, страницы с настройками и введёнными данными, страницы с предпочтениями (любимые товары и т.д.).

    Редактирование профиля на ivi.ru
    Редактирование профиля на ivi.ru

    Постраничная навигация 

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

    Статья на сайте National Geographic
    Статья на сайте National Geographic

    Кнопка «Вверх»

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

    Кнопка «вверх» при поиске товаров на сайте Румиком
    Кнопка «вверх» при поиске товаров на сайте Румиком

    Фильтры

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

    Чекбоксы, радиокнопки — надо учесть особенности всех типов фильтров.

    Выбор товаров на Ozon
    Выбор товаров на Ozon

    Кнопка «Сбросить/очистить всё» или сбросить отдельные пункты.

    Поиск товаров на Ozon
    Поиск товаров на Ozon

    Раскрытый список с пунктами.

    Фильтр категории на Ozon
    Фильтр категории на Ozon

    Ползунок для фильтра с ценой (от… до…).

    Фильтрация цены товаров на Ozon
    Фильтрация цены товаров на Ozon

    Блок с количеством товаров:

    Выбор количества товаров на Ozon
    Выбор количества товаров на Ozon

    Обработка ошибок или подсказки к полям:

    Подсказка к полю на Ozon
    Подсказка к полю на Ozon

    Согласие на обработку персональных данных

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

    Регистрация на сайте Zara.Home
    Регистрация на сайте Zara.Home

    Фавикон

    Это маленькая картинка рядом с названием страницы на вкладке. Чтобы она корректно отображалась во всех браузерах и на всех устройствах, нужно подготовить картинку в разных размерах и форматах. А ещё можно для разных страниц одного сайта нарисовать свой фавикон.

    Фавиконки YouTube и Google Документов
    Фавиконки YouTube и Google Документов

    Заглушки для изображений 

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

    Товары с сайта Ozon
    Товары с сайта Ozon

    Модальные окна

    То, что происходит после отправки формы: 

    • «Спасибо за заявку»

    • «Ваша заявка не отправлена, произошла ошибка»

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

    Оформление заказа на на сайте Румиком
    Оформление заказа на на сайте Румиком

    Календарь

    Если делать календарь, то стоит задизайнить несколько состояний::

    • текущую дату; 

    • выбранную дату;

    • интервал между выбранными датами;

    • ховер.

    Если что-то из этого не сделать, пользователь просто не сможет сориентироваться в календаре.

    Выбор даты на Aviasales.ru
    Выбор даты на Aviasales.ru

    UI kit

    Это готовый набор графических элементов. Если они понадобятся верстальщику снова, их не придётся искать по всему проекту, а можно будет сразу обратиться к Ul kit. Так будет проще разобраться и другому верстальщику, если по прошествии времени клиент захочет собрать новые страницы на основе существующих. Сделать UI kit — хороший тон для дизайнера. В UI Kit могут входить кнопки, хлебные крошки, формы, ссылки, отступы, фон, декоративные псевдоэлементы (например, полосочки), 

    Набор кнопок с сайта UI Garage
    Набор кнопок с сайта UI Garage

    Дизайн сайта подразумевает много мелких деталей, и все их трудно учесть. Даже если кажется, что макет готов, позже может оказаться, что какую-нибудь мелочь всё же упустили: забыли отрисовать кнопку, добавили картинку не в том формате и т.д. Поэтому на протяжении всей работы дизайнеру лучше держать перед глазами список, по которому можно проверить, всё ли сделано. Так дизайнер ничего не забудет и подготовит макет полностью сразу. А верстальщику не придётся добавлять недостающие элементы самому и ломать дизайн. 


    Чтобы лучше понимать верстальщиков и сразу делать всё, как нужно, пройдите курсы по вёрстке Можно начать с бесплатных тренажёров по основам HTML и CSS или с курса "HTML и CSS. Профессиональная вёрстка сайтов". А с промокодом SKUCHNO цена на любой профессиональный курс станет ещё приятнее.

    Любой из вариантов поможет говорить на одном языке с разработчиками и не тратить время на переделку каждого блока в макете. А там и до фронтенда недалеко.


    Над статьёй работали:

    Текст, иллюстрации

    Редактура, иллюстрации

    Шеф-редактор

    Даша Владыко

    Алёна Кудлаева

    Евгений Шкляр

    HTML Academy
    Обучаем веб-разработке и меняем жизни

    Комментарии 15

      +2
      1. Обязательным элементом каждого сайта является селектор с поиском наподобие select2 без него жизни нет. С поиском ключевое слово. Кстати на вашем примере раскрытого списка вижу :selected но не вижу :hover и :selected:hover
      2. UIKit должен быть совершенно не таким, потому как:
      — input, input:disabled, input.error, etc и для всех них :hover, :focus и так по каждому типу
      — Для кнопок нужен :active
      — Для чекбоксов :checked, :disabled, их сочетание (и снова не забываем про :hover)
      — В кит нужно выносить только стили, для цветов же вот так
      — etc, изложить это в рамках одного коммента довольно сложно, но если уж делать — делать хорошо. Инет итак наводнен бесполезными «китами»

      3. Ползунок для фильтра с ценой — совершенно бесполезное ненужное изобретение
      4. Блок с количеством товаров должен быть инпутом если планируется какое либо значимое количество. Да и во всех остальных случаях тоже было бы неплохо.
      5. Почему в демонстрации переключателей один из них синий но расположен слева — для меня загадка. Что делает на отдельной строке подсказка (i) тоже не понятно.
      6. Бесконечного скролла («показать еще») быть не должно в природе, если ваш контент хоть сколько нибудь важен, а равно и переходы на него с поисковиков.
      7. Стили для карт в статье «что должно быть в макете»? Серьезно? Это очень редкая, мало где применимая и ненужная фича.
      8. Почему только 404? Где куда более страшные 5**?
      9. «В UI Kit могут входить кнопки» не могут а должны и в этот список стоит добавить Input/textarea, select
      10. Обязательно нужно добавить примеры сообщений валидации полей/формы.
      11. Почему у вас одновременно круглые кнопки и кнопки с острыми углами для меня загадка, в ките должно быть однозначность, посему там должны остаться только кнопки проработанные под конкретный дизайн. А вообще, кнопки с большим радиусом скругления рядом с прямыми линиями — преступление.

      Зы на скриншоте «Оформление заказа на на сайте Румиком» плохо почти все. Отсутпы, типографика, расположение элементов: «заказ в один клик» либо совсем убрать либо заменить на «успешно/отправлено/etc», padding-bottom модала существенно увеличить, padding-top/bottom у заголовка уменьшить, причем верхний сильнее, Margin-bottom у заголовка уменьшить. Крестик отцентрировать по заголовку. Внизу добавить «Понял/Ок»

      Зызы пожалуйста, не надо так
        0
        Я не имею отношения к автору статьи и тем более к обучающим курсам, но с Вами не согласен по некоторым пунктам:
        1. Если честно, мы в своих проектах двойной селект используем максимум в админках.
        2. Зачем чекбоксам hover? Если и так понятно что это и не перепутаешь (если не мудрить)
        3. Ползунок с ценой я в магазинах регулярно двигаю и считаю, что это довольно полезным элементом формы.
        6. Бесконечный скрол и кнопка «показать ещё» ничего общего не имеют, тем более, что в своей практике мы вполне успешно решаем вопрос сео дублированием пагинация под/над кнопкой «показать ещё» и смещением истории (history api) при нажатии на эту кнопку. Но я как и Вы против бесконечного скрола — это ад и муки для пользователя, но опять же иногда это очень полезно (листать так логи например).

        Но вот 7-10, я прям обеими руками «за», хотя статья и не полная на 100%, и пусть в ней есть огрехи, но если дизайнер (студия) полностью выполнит все пункты статьи, то это будет тоже отлично. Знаю по себе, как человек, которому приходится работать по продуктам с дизайнерами: то нужно окошко дорисовать про успех, то про ошибку, то валидацию в форме (особенно ошибки на чекбоксах про принять соглашение), то форму в процессе отправки (часть полей деактивировано, есть анимация и неактивный сабмит) и обычно это надо через несколько недель после сдачи в момент разработки, т.е. когда дизайнер мог и позабыть какую идею вкладывал в дизайн, потому что он занимается уже другим, а ты в это время только-только в него въехал и он только начал нравится на 100% (стадия принятия) и думаешь глядя на доработки: «а точно это сюда было нарисовано?»
          0
          1. То есть это вы из тех адептов что нас на сайтах заставляет Россию искать в длинном списке без поиска?) И вы же заставляете возраст накликивать стрелочками?) Селект с поиском элемент универсальный и должен использоваться по максимуму. Можете кинуть ссылку на произвольный сайт и я расскажу как его улучшить селектами.
          2. Затем что у них есть еще и тултип и он должен быть кликабельным и я хочу точно знать на что я кликаю, кроме того я могу выбирать элемент табом, и в третьем «зачем ховер» вопрос некорректный, он должен быть.
          6. Бывает но хорошие реализации очень редки и сложны, уж лучше рекомендоватьн е делать его вообще.

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

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

          стадия принятия

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

          а точно это сюда было нарисовано

          Ну значит плохо было сделано.

          то нужно окошко дорисовать про успех, то про ошибку, то валидацию в форме

          Вот потому я требую сразу, если этого нет то зачем это все?

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

          На мобилах может быть, но цену указать намного быстрее, тем более что ползунки вида от рубля до миллиона просто невозможно использовать.
          +1
          Я с вами не соглашусь. Эта статья закрывает большую часть моих болей, дизайнеру переслал.

          1) Да пусть отрисовывают хоть что-нибудь. А то нарисовали макет, а как это будет выглядеть, если куда-то нажать они забыли.
          2) Пусть будет хоть какой-нибудь, надо чаще им рассказывать про единообразие в макете. Иначе будет 18 разных кнопок потому что «ну вот здесь вот так и вообще мы всё согласовали, верстай 18 кнопок».
          3) Определенно. Но если заказчик его хочет, то пусть дизайнер сначала отрисует
          4) Так он итак инпут, просто кнопки по бокам меняют значение.
          6) Определенно! Но пусть нарисуют что-нибудь, а не сиди как дурак и думай что здесь вообще должно быть. А то сделаешь на своё усмотрение, а потом начинается «а давайте подвинем и другие цвета сделаем»
          7) Да, редкая. Но когда она встречается, эти стили ждёшь месяц.
          8) У нас в компании для бэка их не существует. В любой непонятной ситуации на 404 отправляет.
          10) Это уже от дизайнера зависит. Но предложение дельное
            0
            Вот как раз изза «что нибудь» с интерфейсами и происходит то что происходит.
            Каждому дизайнеру нужно выдать страницу со всеми возможными элементами и шаблон для цветов наподобие того что я картинку кинул. И тогда они все дружно начнут делать по шаблону а не каждый по своему.

            Я вот только недавно нанимал дизайнера и в тч встречался с последствиями курсов: 1 из 5 знает что такое композиция, 1 из 20 оформляет блок с учетом всех нюансов, причем этот 1 был как раз из недавних выпускников и наголову превосходил по уровню «бывалых ui-дизайнеров», когда задал уточняющие вопросы человек мне ответил что просто делает как учили. И получается ведь хорошо.

            Зы я кроме всего прочего считаю что статья школы должны быть намного выше уровнем. Я бы постеснялся ее кому либо кидать хотя бы изза блока «Оформление заказа на на сайте Румиком», ну нельзя так делать, нельзя.
            Зызы если апач/nginx свалится скажем изза косяка в конфиге то вы получите 500
          0
          Кнопка «Вверх»
          Её обычно рисуют для длинных лендингов и каталогов с товарами, чтобы пользователю было удобно вернуться наверх страницы.

          Одно из самых бесполезных ux-изобретений для веба. Где-то рядом с куки-баннерами. Если надо вернуться наверх, есть отличная кнопка Home, прекрасный скроллбар и крайне недооценённая прокрутка нажатием на колесо. Для мобильных этот вопрос тоже по-хорошему решается на уровне браузера, как у Оперы, например, если скроллить сильно, а не понемногу.
            0
            Во-первых UI, а не UX. Во-вторых не проецируйте свой опыт на всех. У кого-то нет кнопки Home, скрола, руки. Тут как раз фидбэк пользователей показал, что фича удобна и нужна. Ну и лично я, тут же, на Хабре, часто пользуюсь этой большой удобной плашкой слева.
              0
              Речь всё же о поведении фичи и пользовательском опыте, а также о том, что эта задача решена давно аж несколькими способами. А в плане UI с фичей тоже всё плохо, поскольку она ни капли не стандартизирована и каждый делает её как хочет и где хочет. Я считаю, что это проблема, и также считаю, что при нужде в этой фиче решить это универсально на уровне браузеров было бы лучшей идеей (пример с мобильной оперой для тех, у кого нет кнопок, скролла и ног приводил).
              Также, фидбэк пользователей показал, что пользователи не умеют пользоваться уже имеющимися стандартными инструментами, и вместо того, чтобы научить (или исправить имеющиеся стандартные решения так, чтобы они стали удобнее), людям прививают плохие привычки, а потом этим привычкам пытаются угодить, замусоривая интерфейсы самопальным костылём.
            +1
            Порой дизайнер предоставляет заказчику макет, в котором чего-то не хватает...

            Порой? Зачастую! Обычно выглядит так: заказчик — «Нарисуйте нам макеты главной для десктопа и мобилок, а дальше программисты сам сделают».
              0
              Даже больше скажу: нет ни одного проработанного на 100% темплейта, даже если шаблон в основе хорош то на формах начинаются проблемы, а ка ктолько доходим до таблиц — все, жизни нет.
                0
                С шаблонами всегда не было ничего хорошего. Год назад изучал рынок шаблонов под фигму. Получилось выгоднее с нуля нарисовать самому и доплатить фронту для создания полноценной библиотеки. Правда заказчик все-равно потом все испоганил )
                  0
                  Ну тот же limitless весьма неплох, но таки да, начинаешь собирать приложение и нюансы лезут сотнями. Доплатить фронту это вы здорово преуменьшили) Под действительно хороший уи там очень много работы.
                    0
                    Для всяких дашбордов еще более-менее. Под социалки вообще шаблонов, можно сказать, что нет. А уж про иконки в этих шаблонах… )
              0
              del
                0

                Зачем была нужна статья, если в конце такое:


                pic

                image

                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                Самое читаемое