Привет! Меня зовут Михаил, я разработчик Студии Лепёхина. Я работаю с разными дизайнерами: новичками и более опытными специалистами. Когда дизайнеры передают мне макеты на вёрстку, я задаю им вопросы и оставляю комментарии к макету, чтобы лучше понять их замысел и правильно воплотить его в жизнь.
Часто я замечаю, что макет ещё не готов к вёрстке и дизайнер не учёл много важных деталей. Например, как будут вести себя элементы на разных разрешениях экрана или как будут выглядеть пустые состояния страниц в сервисе. Подобные недочёты ведут к переработке и делают проект дороже. Чтобы уменьшить количество ошибок и замечаний от разработчиков, стоит предусмотреть всё заранее.
В этой статье я собрал список вопросов, которые помогут дизайнеру подготовить макет к вёрстке и передать его разработчику.
Адаптивность
Хороший интерфейс адаптируется под любое устройство и учитывает потребности пользователей. Он не может быть статичной картинкой, потому что иначе им будет неудобно пользоваться на разных устройствах.
Размеры интерфейса на разных экранах. Продумайте, как люди будут пользоваться как вашим сайтом или приложением: с мобильных устройств или с компьютера. Если сайт будут посещать и с десктопа и с мобильных устройств, стоит продумать адаптивную версию для каждого разрешения, либо сделать один макет с автолейаутом. Так разработчик сможет понять, как интерфейс будет вести себя при разной ширине экрана.
В студии мы проектируем мобильные версии сайтов и веб-сервисов под экран шириной 320 пикселей. Это ширина экранов на ранних моделях смартфонов, которые всё ещё широко распространены среди пользователей.
Версии сайта для компьютера и мобильного телефона
Поведение элементов. Придумайте, как будут вести себя элементы интерфейса — кнопки, карточки, колонки текста, картинки, — на разных экранах: на смартфонах, айпадах и компьютерах, на 4К-мониторах. Возможно, для некоторых элементов нужны ограничения по ширине или размеру в пикселях, зависимость от размера шрифта, родительского элемента или экрана.
Иногда Фигма не показывает размеры элементов в пикселях или процентах. Для таких элементов нужно подписать в макете их размеры, либо сделать так, чтобы размеры элемента отображались.
К элементам с неочевидными размерами можно добавить уточнение. Например, есть ли у элемента фиксированный размер, зависит ли он от содержимого, ширины или высоты экрана, есть ли у него минимальные и максимальные размеры.
Можно указать размер элемента в комментарии
Пустые состояния
Продумайте, как будут выглядеть отдельные поля, формы и страницы в незаполненном состоянии. Например, если человек ещё не добавил друзей в социальной сети или не заполнил раздел «Услуги» в сервисе онлайн-записи.
Пустые состояния можно разделить на четыре группы:
- Новый аккаунт — пользователь только зарегистрировался в продукте.
- Информация удалена — пользователь удалил всё, что заполнял раньше.
- Ошибки — технические неполадки или проблемы с сетью.
- Нет данных — продукту нечего показать, например, когда пользователь только открыл поисковую строку и ещё ничего не нашёл.
На экраны с пустыми состояниями можно добавить иллюстрации или подсказки, которые будут сообщать человеку, что сейчас происходит на странице, что можно или следует сделать, чтобы заполнить профиль.
Пустое состояние раздела «Контакты» в сервисе «Окошки»
Переполнение
Некоторые элементы дизайна изменяют свою форму: добавляются новые карточки в каталог товаров, текст переносится на другую строку, поля формы изменяют размер по мере заполнения. Дизайнеру следует продумать эти состояния ещё на этапе макета, чтобы всё работало и выглядело одинаково хорошо.
Размер полей в форме. В форму должны вмещаться длинные имена и фамилии, адреса и комментарии. Один из способов проверить форму — использовать длинные подсказки, например Константин Константинович Константинопольский. Возможно, имена ваших пользователей будут такими же длинными, поэтому стоит предусмотреть такую ситуацию.
Хорошо, если длина и высота полей подсказывает, какие данные и какой длины можно вписать в эти поля. Самая частая ошибка поле «Комментарий» высотой в одну строчку: у человека может возникнуть ощущение, что здесь можно написать лишь одно предложение.
Мы предусмотрели длинные имена и фамилии в сервисе «Окошки» и сделали длинные подсказки для имени и почты
Переносы. Проверьте, предусмотрены ли у вас переносы слов на странице, в крупных блоках и отдельных элементах.
Вот как можно оформить переносы:
- настроить автоматические переносы по правилам языка,
- расставлять «скрытые» переносы вручную в нужных местах,
- переносить невлезшие на строчку буквы,
- обрезать строку по ширине или по количеству строк.
Обращайте внимание на висячие предлоги, слова-сироты и слова-вдовы, которые при переносе остались в одиночестве. В таком случае следует отредактировать текст или найти такую ширину колонки, при которой «сирот» и «вдов» не останется.
Предлоги перенесены на следующую строку и не остаются «висеть»
Карточки. Продумайте, что будет происходить с экраном, если добавить на него ещё 12, 48, 100 или 277 карточек? Не сломается ли вёрстка? Не остаётся ли одна карточка по-сиротски висеть на следующей строке?
Например, если вам нужно разместить карточки с пятью людьми на одной странице, лучше сделать так, чтобы на одной строке было три карточки, а на другой две, либо уместить все пять карточек в одну строку.
Определите, как ведут себя карточки при добавлении новой или удалении. Сжимаются или переносятся на следующую строку? Переносятся с растягиванием на всю ширину?
Так мы расположили карточки с организаторами на сайте проекта «Давайте говорить и писать правильно»
Скроллбар. Если нужно сделать горизонтальную или вертикальную прокрутку элемента, решите, прячем ли мы скроллбар, оформляем его по своему или оставляем стандартный.
Добавьте на макет скроллбар, если у элемента есть прокрутка
Цвета
Когда цвета подобраны верно, между ними есть достаточный контраст, человеку легко пользоваться сайтом. И, наоборот, человеку неудобно пользоваться сайтом с неконтрастными цветами и непоследовательной цветовой палитрой. С большей вероятностью он закроет страницу, а бизнес потеряет потенциального клиента.
Контрастность. Проверьте контрастность цветов на страницы с помощью любого плагина. Мы рекомендуем плагин «Старк». Если текст будет набран светлым шрифтом на светлом фоне, пользователь не сможет его прочитать.
Плагин «Старк» оценивает контрастность сайта и шрифта
Цветовое кодирование. Если вы используете ли вы цветовое кодирование, убедитесь, что вы не используете цвета из палитры ошибочно, например: зелёный цвет для экрана ошибки, а красный или оранжевый для экрана успеха.
В сервисе «Окошки» жёлтый цвет уведомлений означает вопрос, а розовый — ошибку
Лишние цвета. Проверьте, нет ли в вашем макете лишних цветов не из палитры, заданных цветовым кодом. Цветовая схема или палитра упрощает разработку и поддержку сайта в будущем. Например, если вы решите заменить цвет ссылок на всём сайте разом, вам не придётся искать их вручную. Вы сможете заменить этот цвет в палитре и он применится ко всем ссылка на сайте автоматически.
Цветовая палитра для нашего проекта — сайта «Кейбокс»
Прозрачность. Прозрачность нужна только в местах с неоднородным или динамическим фоном. В других ситуациях используйте сразу конечный цвет. Пример конечного цвета — #FFDD00.
Конечный цвет #FFDD00 без прозрачности
Шапка браузера. Определите, в какой цвет красить шапку браузера. Так вы сможете выделить сайт среди остальных и визуально «подружить» его с операционной системой, которую использует пользователь.
Шапка студийного сайта
Текстовые стили
В хорошем интерфейсе текст хорошо читается, ссылки кликабельны и пользователь понимает, на что можно нажать, по какой ссылке он уже переходил, а по какой ещё нет.
Ссылки. Весь интернет состоит из текста и ссылок. HTML буквально означает HyperText Markup Language — «язык гипертекстовой разметки». Продумайте, как в вашем макете будут выглядеть ссылки в любом блоке текста на сайте и как будут выглядеть посещённые ссылки.
В поисковой выдаче Гугла посещённые ссылки фиолетовые, а непосещённые — синие
Размер шрифта. Проверьте размер шрифта на сайте и в полях для ввода. В полях для ввода шрифт должен быть не менее 16 пунктов — это современный стандарт.
Размер шрифта в блоге «Окошек» — 25
Картинки
Определите, как будут выглядеть на сайте фавикон, значок для строки закладок и превью в соцсетях. С хорошо подобранными фавиконом и картинкой для превью людям будет удобнее пользоваться вашим сайтом.
Фавиконка. Подходящий формат для фавикона — svg или png, размер сторон — до 512×512 пикселей. Можно сделать отдельные фавиконки для светлой и тёмной темы. Если не хотите рисовать вручную, попробуйте «Генератор фавиконок».
Фавиконка для сайта «Кейбокса»
Картинка для превью в соцсетях. Для каждой страницы можно установить разные картинки для превью в социальных сетях. Размер — 1280×640 пикселей с полями. Можете использовать шаблон для превью от «Фигмы».
У людей появляется всё больше устройств, с которых они могут выйти в интернет: от телефона и часов до телевизора и автомобиля. Необязательно адаптировать сайты под все размеры экранов. Достаточно следовать нашим советам, чтобы ваши сайты и сервисы были удобными и доступными максимальному количеству людей.
Если у вас есть вопросы о том, как разработаны наши проекты, или как мы бы подошли к вёрстке конкретных макетов, можете присылать их на misha@lepekhin.studio. Ответы на них могут стать заметками в этом блоге.