Как проверить дизайн сайта и не попасть на доработки (чек-лист)
Ура, дизайн сайта наконец-то готов, утвержден, и можно передавать его в верстку. Но радоваться рано. В веб-дизайне есть множество мелочей – и если их не учесть, то ваш крутой макет обернется головной болью для верстальщика и кучей дополнительных доработок.
Итак, я составила чек-лист – сохраняйте себе и пробегайтесь перед сдачей проекта верстальщику.
Вывод информации
Скорее всего, в дальнейшем заказчик будет менять контент на сайте: тексты, изображения, видео. Необходимо предусмотреть, чтобы при любых изменениях ничего не «ломалось», для этого нужно показать:
- Как будет выглядеть минимальное и максимальное количество информации в текстовом поле. Например, что если заголовок новости будет состоять из двух слов? А если из десяти?
- Как будут смотреться картинки в различной цветовой гамме. Возможно, на этом этапе придется что-то поменять в дизайне или дать заказчику конкретные рекомендации по цветовой гамме изображений. Например, вы можете сделать воздушный светлый дизайн блога, а что, если заказчик поставит туда темную картинку?
Как будет выглядеть контент без картинки. Например, в новостях предусмотрены фото – что будет, если заказчик не поставит фото? Возможно, стоит придумать несколько вариантов заглушек.
- Как вообще будет выводиться контент в различном формате. Например, для статьи в блоге нужно показать, как будет выглядеть текст с маркированными и нумерованными списками, фото, галереей, видео, несколькими фото или видео, врезками и т.д.
Интерактивные элементы
В статичном виде ваш макет может быть красив и удобен, но чтобы он был по-настоящему качественным, нужно продумать и отрисовать все мелочи – например, взаимодействие с интерактивными элементами:
- Варианты взаимодействия с каждым элементом, подсказки для пользователя, маски в полях ввода контактных и платежных данных;
- Визуализацию процессов взаимодействия – например, прогресс-бар во время загрузки файла, прелоадер, зеленая галочка справа от поля, если оно заполнено корректно.
Успешное и неуспешное завершение взаимодействия – например, поп-ап «Ваша заявка принята» после заполнения формы обратной связи или надпись «К сожалению, загрузка прервана», если это произошло.
Варианты повторного взаимодействия с элементом – например, надпись «Загрузить еще один файл» и поле для загрузки.
Поля для загрузки файлов с информацией о формате поддерживаемых файлов, вариантами загрузки (по ссылке, с компьютера, через drag and drop), максимальном объеме файлов. После загрузки должны появляться варианты взаимодействия с файлом – например: отредактировать, удалить, переименовать.
Поп-апы и ховеры
Предусмотрите все необходимые всплывающие окна и подсказки:
Окно регистрации;
Поп-апы успешной отправки формы;
Формы обратной связи;
Окно авторизации;
- Подсказки в полях для заполнения.
Страницы ошибок
Используйте их не просто, чтобы сообщить об ошибке, а чтобы повысить лояльность пользователей – например, оформите их с юмором или разместите на них полезную информацию. Необходимо предусмотреть страницы ошибок:
- 404 – страница не найдена;
- 403 – доступ к запрашиваемому ресурсу запрещен;
- 505 – ошибка запроса к серверу;
- 503 – сервис недоступен.
Полный список страниц ошибок можно найти здесь – необходимо уточнить у заказчика, какие страницы нужно отрисовать. Как правило, указанных четырех бывает достаточно.
Обязательные элементы
Ранее в своей статье я рассказывала, какие элементы обязательно должны быть на сайте. Более подробно можно почитать о них в статье, здесь я просто их перечислю:
- Предупреждение об использовании cookies – обязательно, можно составить самостоятельно. В случае GPDR (работы с Европой) точно нужен юрист.
- Согласие на обработку персональных данных – обязательно, лучше составить с юристом;
- Публичная оферта – опционально, лучше составить с юристом;
- Пользовательское соглашение – опционально, лучше составить с юристом;
- Реквизиты компании – обязательно.
Помните, что отсутствие некоторых из этих элементов может грозить заказчику серьезным штрафом – и он будет, мягко говоря, очень расстроен своим дизайнером.
Начальная SEO-оптимизация
SEO должно закладываться еще на этапе дизайна – более подробно я рассказываю здесь. Сейчас - просто перечислю:
- На каждой странице только один заголовок H1, соблюдена иерархия – после H1 строго следует H2, после H2 – H3 и т.д. В заголовках использованы ключевые фразы.
- Главные элементы, которые определяют задачи сайта, расположены так, чтобы сразу бросаться в глаза пользователям. Например, на информационном ресурсе пользователь легко может найти ответ на свой вопрос, в интернет-магазине – видит популярные товары.
- Предусмотрены все необходимые поля для текстового контента.
- Меню доступно на всех страницах, в нем содержатся главные блоки сайта, которые были определены на основе семантики.
- Имеются все значимые для SEO элементы – карта сайта, отзывы, контакты, реквизиты компании.
Навигация
Бывает так, что в макете предусмотрено все, страницы красиво отрисованы, а вот с навигацией беда. Поэтому проверяем:
- Вид раскрывающегося меню;
- Виды работающих фильтров и сортировки;
- Хлебные крошки;
- Пагинацию (если необходимо);
- Документ, где прописано взаимодействие между страницами – для сложных интерфейсов.
Визуальный контент
Убедитесь, что:
- Изображения пожаты;
- Видео оптимизированы и воспроизводятся даже при плохом соединении;
- На визуальном контенте присутствуют alt-описания, которые показываются, если картинки не прогружены (например, при плохом соединении).
ТЗ для верстальщика
Если все проверено, приступаем к составлению подробного ТЗ для специалиста по верстке:
- Покажите, как ведет себя контент в основных разрешениях: широкоэкранный десктоп, стандартный десктоп, планшет и мобильные устройства;
- Если в дизайне присутствует сложная анимация, создайте видео с полной анимацией. Если есть возможность – то с описанием таймингов и изингов (механик анимаций - замедления, ускорения и т.д.). Либо, если нужны какие-то отдельные моменты, прикрепите ссылки на примеры., желательно, с рабочих сайтов, чтобы верстальщик мог посмотреть код, если понадобится. В крайнем случае, пропишите каждую анимацию текстом.
- Полностью опишите функционал и логику фильтрации, попапов, и прочего – то есть, что будет происходить после действия пользователя с элементом.
- Если вы ведете проект в Photoshop, выгрузите верстальщику отдельно все иконки и фавикон. Так же нужно сделать и в Фигме, если проект крупный.
- Отдельным файлом выгрузите используемые шрифты и изображения.
- Удалите из макетов все скрытые слои, если они есть.
- Наведите порядок в слоях, назвав их корректно и объединив в логические группы.
- Между элементами не должно быть дробных расстояний – подкорректируйте их.
- Создайте UI-Kit со всевозможными отступами, ховерами, наполняемостью карточек или блоков, всеми используемыми размерами шрифтов с пояснением, для какой ситуации используется тот или иной кегль. Там же отразите различные состояния всех интерактивных элементов.
- Выгрузите все иконки в svg-формате.
- Везде выставите корректный интерлиньяж. Если заголовок или абзац, или название, например, сейчас заданы одной строкой, но в процессе там может быть 2-3 или более, то заранее предусмотрите это и задайте корректный интерлиньяж.
- Если для ховера нет примера анимации, или из макета не очень понятно, что именно меняется при ховере, то нужно оставить разработчику комментарий.
- При необходимости создайте библиотеку компонентов.
А более подробно про ТЗ для верстальщика вы можете почитать в моей статье.
Итак, надеюсь материал был полезен – жду ваших комментариев, они для меня очень важны!
Я UX/UI дизайнер со страстью к минимализму и современным трендам. Мечтаю, чтобы все сайты были максимально удобными и продуманными, и вношу в это свою лепту.