Отличие рядового веб-дизайнера от веб-дизайнера со знанием UX и юзабилити заключается в том, что второй может лучше понять какой сайт подойдёт задачам клиента и его посетителям. Для этого я и клиент совместно описываем концепцию сайта. Рассмотрим процесс разработки дизайна на примере образовательного проекта Abiturium. Я задаю заранее приготовленные вопросы, основные из которых будут приведены ниже.
Анкета состоит из следующих пунктов:
- Общая информация
- Целевая аудитория сайта
- Задачи сайта
- Оформление
- Конкуренты и ближайшие аналоги
- Описание страниц сайта
- Прочие идеи
Из анкеты мы рассмотрим три пункта: целевая аудитория, задачи сайта и описание страниц сайта, после чего перейдём к рисованию эскиза (наброска) главной страницы и макета (готового дизайна).
Целевая аудитория
Первый основной вопрос — на какую целевую аудиторию рассчитан сайт, какие люди нам важны прежде всего? Описание каждого персонажа (собирательного образа представителя целевой аудитории) состоит из двух пунктов:
- Название персонажа
- Бэкграунд — с каким бэкграундом (опытом, опасениями, ожиданиями, откуда) он пришёл на сайт.
- Стремления на сайте — какие стремления он хочет реализовать при помощи сайта (купить без регистрации, узнать, вступить и подписаться, познакомиться, записаться на приём, удостовериться и т. д.).
Задачи сайта
Далее опишем, к каким действиям следует направить пользователей на сайте. Что хочет проект получить от пользователя — что он должен сделать?
Каждая задача описывается по схеме:
- Название персонажа
- К каким действиям мы стремимся его направить.
- Какие запросы персонажа надо удовлетворить для совершения им обозначенных действий.
Описание страниц сайта
За счёт того, что в прошлых пунктах мы сформулировали, какими элементами и функционалом решить задачи пользователя и бизнеса, мы можем начать описывать содержимое страниц.
Рисование эскиза
Имея описание страниц, довольно просто нарисовать эскиз:
Была классная идея — сделать изображения для основных предметов (биология, физика, химия) в виде скриншотов из видео, которое бы запускалось при наведении: видео для биологии, физики, химии. Но она была нами отвергнута из-за веса видеофайлов, который мог помешать ученикам с медленным интернетом из дальних регионов России, тормозя загрузку страницы.
Рисование макета главной страницы
Страница состоит из шести блоков, эволюция которых представлена ниже.
Фавикон
В качестве фавикона (иконки сайта на вкладке в браузере) выбрали логотип проекта, придуманный сходу в процессе создания дизайна — ангстрем.
Википедия пишет:
А́нгстрем — единица измерения расстояний. Названа в честь шведского физика и астронома Андерса Ангстрема. Данная единица измерения часто используется в физике, поскольку 10−10 м — это приблизительный диаметр орбиты электрона в невозбуждённом атоме водорода.
В макете нарисованы различные состояния всех динамических объектов, а демонстрация анимации представлена при помощи программы Adobe Edge Animate.
В исходнике слои аккуратно названы и структурированы, а состояния динамических элементов обозначены цветом.
