Начинаем с главной страницы. Первый подход:
Жёлтый фон выглядит ярко и прикольно, но выжигает глаза. Пробуем успокоить. Для начала оставляем жёлтой только верхушку, а потом вовсе весь фон делаем белым. В качестве эксперимента делаем плашки разноцветными.
Разноцветные плашки не выжили. Собираем страницу до конца, но ещё с чужими иллюстрациями:
Начинаем работу над своими иллюстрациями. Ищем стиль. Сначала делаем подборку штук, которые показываем клиенту, чтобы утвердить с ним направление:
Потом рисуем эскизы персонажа:
Примеряем на главную и утверждаем у клиента.
Принимаемся за страницу олимпиады. На ней куча всего: события, статьи, примеры заданий, отзывы. Сначала делим сущности на плиточки. Затем составляем всё в ленту событий:
Арт‑директор говорит, что надо вообще не так. Страница должна помогать решиться на участие в олимпиаде. Структура страницы должна быть такой, чтобы появилось явно видное расписание, инструкции по участию и подготовке. Применяем наставление арт‑директора:
А потом собираем красиво:
Отдельно дорабатываем шапку страницы:
Шапка принимает итоговый вид, но иллюстрации в ней нужно добавить смысла. Решаем ставить в шапки страниц предметные иллюстрации. Ищем композицию:
Больше о траектории знаний в ведре логотипа
Останавливаемся на траектории знаний, которую придумали во время работы над логотипом. Добавляем цвет:
Больше о траектории знаний в ведре логотипа
Для важных олимпиад рисуем отдельные иллюстрации. Эскизы:
Готовые иллюстрации:
Ломаем голову, как показать примеры заданий олимпиад:
Находим удачный способ:
Принимаемся за список олимпиад. Сначала пытаемся составить страницу из плиток, а затем переходим к списку:
Успокаиваем страницу. Попутно приходит идея сразу в списке показывать этапы олимпиад:
Арт‑директор предлагает попробовать два варианта таймлайна: как внизу карточек проектов из портфолио бюро и в виде подкрашенной строки из экселя. Рисуем и показываем арт‑директору:
Прорабатываем вариант со строкой из экселя:
Добавляем цветовое кодирование для разных этапов олимпиад. Составные олимпиады сворачиваем в компактные списки. Показываем, как будет смотреться список на странице составной олимпиады. Между этажами вставляем перебивки с советами, интересностями и рекламой. Отдаём в вёрстку.
Фильтры в списке олимпиад прошли долгий путь эволюции:
Думаем, как оформить статьи. Первый подход:
Выглядит скучно. Пытаемся развеселить:
Находим удачный вариант. Добавляем лайки, рекомендации и комментарии:
Для важных статей нужны заглавные иллюстрации. Рисуем эскизы:
Отдаём иллюстратору и получаем обратно красоту:
Статьи хранятся в журнале. Начинаем со списка, переходим к карточкам и добавляем веселухи:
Объясняем разработчикам, как раскладывать элементы в журнале:
Тем временем рисуем эскизы иллюстраций предметов, которые будем показывать на главной в плитках олимпиад:
Принимаемся за избранное. На старом сайте избранное представляет собой просто склад ссылок на новости о выбранных олимпиадах:
Придумываем, что избранное должно помогать следить за олимпиадами. В нём нужно показывать ближайшие события и предупреждать о них заранее. Дизайним страницу:
Тем временем клиент утверждает новый логотип. Примеряем логотип на главную и слегка освежаем стиль. В частности, успокаиваем цвета плиток:
Одновременно с докруткой дизайна и иллюстраций следим за внедрением, тестируем вёрстку, помогаем с устройством админки, пишем баги:
Исправляем баги, проверяем наполнение вместе с клиентом. За пару недель до пуска придумываем, как рассказать постоянным пользователям о грядущем обновлении. Готовим цикл статей и иллюстраций для публикации в социальных сетях. Заранее выпускаем статьи и в назначенное время открываем обновлённый сайт в режиме бета‑версии.