Сайт и блог

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

Собираем вариант, который нас устраивает, и показываем его арт‑директору.

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

И ещё проще:

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

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

Клиент принимает подход и оставляет несколько замечаний к конкретным элементам.

Дорабатываем макет по замечаниям и рисуем страницы тегов и подборок, версии для разных ширин браузера, поисковую выдачу, состояния элементов:

Параллельно с главной пилим шаблоны страниц статей.

Майндбокс публикует три вида статей: истории клиентов, интервью и обучающие статьи.

Истории клиентов — это самые важные и длинные статьи, их Майндбокс рекламирует в соцсетях и использует для привлечения новых клиентов. Клиенты читают о том, чего добились их конкуренты с Майндбоксом и решают, что им он тоже нужен. Но есть проблема: обычно история — это длинная простыня текста, которую далеко не всякий человек сможет одолеть, а руководитель бизнеса не найдёт для этого столько времени. Чтобы повысить вероятность, что читатели заинтересуются и прочитают статью вместе с клиентом, решаем «зацепить» крутыми показателями, результатами и цифрами: масштабом клиента, продолжительностью проекта, предметной областью, ключевыми условиями на стороне айти. Придумываем упаковать это всё в компактную карточку в начале статьи:

Собираем шаблоны интервью и обучающей статьи:

Рисуем всевозможные элементы статей: таблицы, графики, фактоиды, выноски, заголовки, картинки, формулы. Унифицируем вертикальные отступы между элементами:

Майндбокс пишет о маркетинге, а маркетинг касается расчётов выручки и прочего, поэтому в блоге встречается много формул.

В старом блоге формула выглядела так:

А в новом вот так:

Чтобы авторы блога Майндбокс могли сами делать красивые формулы, составляем для них инструкцию:

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

Придумываем, как это можно победить. Первая мысль — использовать фотораму, которая будет подстраиваться под пропорции самой картинки:

Но это не решит проблему кликов, которые никто не хочет делать. Предлагаем Майндбоксу стараться избегать фоторам. Например, если надо показать два скриншота примерно одного размера, то лучше просто поставить их рядом и в Фотошопе подровнять по высоте:

Прокрутка лучше клика. А фотораму оставляем только для случаев, когда нужно показать больше трёх картинок разом.

***

По ходу разработки тестируем вёрстку и реализацию, пишем замечания и следим за исправлениями:

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

На стадии обсуждения задачи появилась идея продемонстрировать пользу Майндбокса на примере кейсов реальных клиентов и конкретных схем решений, использованных для клиентов. Рисуем схемы решений. Получается невозможно сложная, непонятная и некрасивая бурда:

Упрощаем демонстрацию решений:

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

После первой презентации клиенту и получения замечаний ведущий дизайнер решает испортить весь дизайн:

Но появляется арт‑директор и помогает вернуть красоту и при этом учесть пожелания клиента:

Главная страница согласована, принимаемся за внутренние. По своему устройству они должны быть очень похожи на главную: наверху описание модуля Майндбокса, ниже примеры кейсов клиентов. Арт‑директор предлагает всё же не заниматься тупым клонированием страниц, а придумать для каждой какую‑то фишку, выразить эмоцию или как‑то удачно пошутить.

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

Клиент в восторге от затеи с картинками, ура!

Собираем форму заявки и прорабатываем состояния:

Рисуем страницу мероприятий Майндбокса, калькулятор стоимости и всякие другие страницы.

Параллельно с рисованием дизайна, как у нас заведено, передаём утверждённые макеты в разработку, согласовываем спецификацию, флексим реализацию, чтобы успеть к дедлайну.