Главное Свежее Вакансии Образование
Выбор редакции:
😼
Выбор
редакции
765 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

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

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

Шрифты


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

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


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

Сетка


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


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

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


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

Страница 404


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

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

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


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

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


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


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

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

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


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


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

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


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


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


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

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


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

  1. вводный текст;
  2. цитата и длинная цитата с подписью и фото;
  3. видео (и подпись, если она нужна);
  4. картинка (и подпись, если она нужна);
  5. ссылки;
  6. слайдер;
  7. жирный текст;
  8. списки (нумерованный и маркированный), вложенные списки;
  9. блок «поделиться».


Блог HTML Academy

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


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

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


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


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

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


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


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

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


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


Блог HTML Academy

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


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


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

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


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


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

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


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


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

Фильтры


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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


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

Фавикон


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


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

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


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


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

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


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

  1. «Спасибо за заявку»
  2. «Ваша заявка не отправлена, произошла ошибка»

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


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

Календарь


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

  1. текущую дату;
  2. выбранную дату;
  3. интервал между выбранными датами;
  4. ховер.

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


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

UI kit


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


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

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

Еще больше полезного для дизайнеров на канале: https://shot.spark.ru/ch/628

+1
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Леонид Томов
Это очень ценные советы. Спасибо за подробный гайд.
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.