Недавно тут принимала участие в одном всероссийском конкурсе в сфере творческих компетенций при поддержке Фонда Президентских Грантов. Выбрала самую близкую мне компетенцию из предложенного списка — Веб-дизайнер. Необходимо было предоставить свои паспортные данные, сертификаты о прохождении курсов (если имеются) и ссылку на портфолио. Все предоставленные данные оценивались жюри, которые по каким-то критериям ставили баллы. На первом этапе было онлайн-тестирование из 15 вопросов, и чем быстрее будет пройдет тест, тем выше итоговый балл.
В общем итоге из 1000+ человек, участвовавших в компетенции Веб-дизайнер, я вошла в Топ-100 участников, которые прошли во второй этап, заняв почетное 94 место. Я посчитала, что это большая удача.
Второй этап был разделен на несколько частей. В первой части нужно было выполнить практическое задание по адаптивной верстке в Figma. Во второй части необходимо было выложить готовый макет и ответить подробно на несколько вопросов по практической работе. В третьей части было второе онлайн-тестирование, состоявшее из 30 более сложных вопросов.
Для того, чтобы попасть в финал, из 100 участников члены жюри могли выбрать только лишь 10 счастливчиков для прохождения на следующий этап. А я заняла всего лишь 53 место. Я нисколько не расстроилась, поскольку понимала, что не настолько сильна в компетенции, но была рада, что смогла подняться с нижней на среднюю строчку рейтинга.
Это было лирическое отступление...
Так, о чем это я?
Организаторы перед первым этапом конкурса подготовили большой список литературы по компетенции Веб-дизайнер. Я достаточно хорошо подготовилась к тестированию, ознакомившись с материалом по каждой рекомендованной ссылке. Из этого списка я выделила 10 самых полезных ссылок, которыми поделюсь в этой статье.
10. Правило «внутреннего» и «внешнего»
Артем Горбунов, арт-директор студии, в своей статье освещает 13 четких правил, которых обязан знать каждый дизайнер, занимающийся версткой книг или журналов, сайтов или мобильных приложений. На примере таблички московского метрополитена Артем показывает и рассказывает, как применять данные правила на практике.
внешнее > внутреннее
Коротко и ясно. Подробности в статье.
9. Правила типографики в интерфейсах
хороший сайт = удобочитаемый текст
В данной статье говорится, как не стоит злоупотреблять количеством шрифтов, сколько символов удобно читать в одной строке, как выбрать шрифт и его размер, как определить расстояние между строками и многое другое. 10 правил типографики в интерфейсах можно найти здесь.
8. Как пользователи просматривают контент
хорошая визуальная иерархия = легкое сканирование
Достаточно представить, как мы читаем любую интересующую нас информацию: слева направо – вниз влево – слева направо и т.д.
UX-исследовательская американская компания и ее основатели Дон Норман (Don Norman), автор книги «Дизайн привычных вещей» (ориг. The Design of Everyday Things), и Якоб Нильсен (Jacob Nielsen), автор книги 10 Usability Heuristics for User Interface Design (нет официального перевода книги), проводя исследование движений глаз при чтении информации в интернете, открыли новое определение в UX-дизайне — «F-паттерн».
Главная суть в том, что создавая дизайн по данному шаблону (F-layout), пользователи с легкостью просканируют информацию на сайте с большим количеством контента (новости, блоги).
Несколько простых и доступных правил в статье.
7. Что нужно учесть при создании мобильной версии сайта
мобильная версия > онлайн-версия
Как видите, статистика показывает, что в 2020 году более 50% веб-сайтов просматриваются на мобильных устройствах. К тому же поисковые системы лучше ранжируют сайты, у которых доступна мобильная версия.
Веб-дизайнер это знает, но не всегда учитывает несколько важных аспектов, помогающих сделать сайт топовым. Допустим, какой должен быть минимальный размер шрифта и отступы от краев экрана? или какого размера должен быть тач-элемент? или какая оптимальная скорость загрузки страницы?
Ответы на эти вопросы и еще много другого можно найти в этой статье.
6. Якорные объекты
якорные объекты = баланс композиции
Очень полезная статья, чтобы вспомнить основы композиции. Якорные объекты, или «якоря», помогают найти на странице сайта нужную для пользователя информацию, будь это логотип, меню, кнопка, картинка.
О способах размещения объектов на странице с примерами подробно описано тут.
5. Эвристики Нильсена
эвристики Нильсена = удобный пользовательский интерфейс
Вы слышали о таком понятии, как «эвристики Нильсена»?
В начале 90-х Якоб Нильсен (да-да, тот самый, который придумал F-паттерн) вместе с Рольфом Моличем (Rolf Molich) создал 10 правил (эвристик) для улучшения юзабилити сайтов и интерфейсов. Этот чек-лист станет палочкой-выручалочкой на старте и в процессе разработки проекта.
Индикатор загрузки, система навигации, валидация, иконки и обозначения, распознавание ошибок — это лишь малая часть того, что необходимо проверить, прежде чем выпускать проект в свет.
Читать все 10 эвристик Нильсена в этой статье.
4. Пользовательские сценарии
Кто все эти люди, которые посещают данный сайт? Что они здесь нашли? Зачем им это вообще нужно? Вот так можно описать каждого посетителя сайта в общем смысле. Одни приходят, другие уходят. Пожалуй, лучший сценарий для любого успешного сайта — как можно дольше удержать посетителя и как можно быстрее заставить его сделать действие, например, подписаться или сделать покупку.
пользовательский сценарий = довольный посетитель
Как? Для этого, собственно, и нужны пользовательские сценарии. Коротко о создании и разновидностях сценариев можно почитать тут.
3. Метод персон
Основой для материала послужили статьи Дейва Чаффей (Dave Chaffey), директора по контенту и автора книг про маркетинг и e-commerce, и Криса Велласа (Chris Wallace).
Метод персон, оказывается, не так популярен в России, но зато уже больше 10 лет используется зарубежными компаниями, который позволяет создать наиболее вероятного посетителя сайта.
моделирование персон = улучшение юзабилити
В статье приводится несколько примеров моделей с возможными сценариями поведения, принципы моделирования и применение в веб-дизайне.
2. Сетки в веб-дизайне
применение сетки = приятный дизайн
Пс, дизайнер, нет времени читать книги по сеткам? Есть уже готовая статья. Колонки и колоночные сетки, столбцы, поля, акценты, ограничения, ментальная карта. Почитать текст и посмотреть множество картинок идем сюда.
1. Customer Journey Map
Customer Journey Map — это, если коротко, визуализация взаимодействия потребителя с продуктом или услугой в разных точках контакта. Успешно реализованная система работает по принципу «тяни-толкай», когда любая точка контакта мотивирует потребителя сделать следующий шаг «толкай», а следующая точка тянула из первой точки «тяни».
Задачи, которые решает CJM, и пошаговая инструкция по созданию с рекомендуемыми книгами читаем здесь.
