Сайт

Начинаем с главной страницы. Первый подход:

Жёлтый фон выглядит ярко и прикольно, но выжигает глаза. Пробуем успокоить. Для начала оставляем жёлтой только верхушку, а потом вовсе весь фон делаем белым. В качестве эксперимента делаем плашки разноцветными.

Разноцветные плашки не выжили. Собираем страницу до конца, но ещё с чужими иллюстрациями:

Начинаем работу над своими иллюстрациями. Ищем стиль. Сначала делаем подборку штук, которые показываем клиенту, чтобы утвердить с ним направление:

Потом рисуем эскизы персонажа:

Примеряем на главную и утверждаем у клиента.

Принимаемся за страницу олимпиады. На ней куча всего: события, статьи, примеры заданий, отзывы. Сначала делим сущности на плиточки. Затем составляем всё в ленту событий:

Арт‑директор говорит, что надо вообще не так. Страница должна помогать решиться на участие в олимпиаде. Структура страницы должна быть такой, чтобы появилось явно видное расписание, инструкции по участию и подготовке. Применяем наставление арт‑директора:

А потом собираем красиво:

Отдельно дорабатываем шапку страницы:

Шапка принимает итоговый вид, но иллюстрации в ней нужно добавить смысла. Решаем ставить в шапки страниц предметные иллюстрации. Ищем композицию:

Останавливаемся на траектории знаний, которую придумали во время работы над логотипом. Добавляем цвет:

Для важных олимпиад рисуем отдельные иллюстрации. Эскизы:

Готовые иллюстрации:

Ломаем голову, как показать примеры заданий олимпиад:

Находим удачный способ:

Принимаемся за список олимпиад. Сначала пытаемся составить страницу из плиток, а затем переходим к списку:

Успокаиваем страницу. Попутно приходит идея сразу в списке показывать этапы олимпиад:

Арт‑директор предлагает попробовать два варианта таймлайна: как внизу карточек проектов из портфолио бюро и в виде подкрашенной строки из экселя. Рисуем и показываем арт‑директору:

Прорабатываем вариант со строкой из экселя:

Добавляем цветовое кодирование для разных этапов олимпиад. Составные олимпиады сворачиваем в компактные списки. Показываем, как будет смотреться список на странице составной олимпиады. Между этажами вставляем перебивки с советами, интересностями и рекламой. Отдаём в вёрстку.

Фильтры в списке олимпиад прошли долгий путь эволюции:

Думаем, как оформить статьи. Первый подход:

Выглядит скучно. Пытаемся развеселить:

Находим удачный вариант. Добавляем лайки, рекомендации и комментарии:

Для важных статей нужны заглавные иллюстрации. Рисуем эскизы:

Отдаём иллюстратору и получаем обратно красоту:

Статьи хранятся в журнале. Начинаем со списка, переходим к карточкам и добавляем веселухи:

Объясняем разработчикам, как раскладывать элементы в журнале:

Тем временем рисуем эскизы иллюстраций предметов, которые будем показывать на главной в плитках олимпиад:

Принимаемся за избранное. На старом сайте избранное представляет собой просто склад ссылок на новости о выбранных олимпиадах:

Придумываем, что избранное должно помогать следить за олимпиадами. В нём нужно показывать ближайшие события и предупреждать о них заранее. Дизайним страницу:

Тем временем клиент утверждает новый логотип. Примеряем логотип на главную и слегка освежаем стиль. В частности, успокаиваем цвета плиток:

Одновременно с докруткой дизайна и иллюстраций следим за внедрением, тестируем вёрстку, помогаем с устройством админки, пишем баги:

Исправляем баги, проверяем наполнение вместе с клиентом. За пару недель до пуска придумываем, как рассказать постоянным пользователям о грядущем обновлении. Готовим цикл статей и иллюстраций для публикации в социальных сетях. Заранее выпускаем статьи и в назначенное время открываем обновлённый сайт в режиме бета‑версии.