Разработка концепции дизайна

Дизайн — это первое, что видят пользователи, пришедшие на любой сайт. Встречают по одежке, как говорили нам с детства — и к сайтам это относится на все 100%.

В сфере создания сайтов есть два варианта реализации дизайна — уникальный и шаблонный.

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

Первичное брифование клиента

Создание мудборда

Важно, чтобы стиль сайта отвечал требованиям бизнеса и нравился клиенту. Брифование клиента помогло понять желания заказчика, и перед стартом работ по дизайну арт-директор студии создает мудборд (пер. с англ. — доска настроения), где располагает примеры шрифтов, цветовых схем, стилей интерфейсов на основе предпочтений клиента, которые выяснил менеджер проекта. Затем проходит визуальный бриф — устный разговор в формате видео-колла, где арт-директор студии узнает предпочтения клиента по наброскам.

Выглядит мудборд примерно вот так. И вот так.

Создание скетча или прототипа

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

Мы разделяем UX и UI, чтобы проработать обе составляющие логичного и современного интерфейса.

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

Прототипы мы создаем в Axure RP, посмотреть наши работы можно здесь. Они выглядят как нераскрашенные макеты сайта.

Разработка концепции дизайна

Мы разрабатываем одну концепцию дизайна. Не боимся, что не попадем в ожидания заказчика, потому что скрупулезно проводим предпроектную аналитику и визуальное брифование. Когда у нас есть готовый прототип и результаты визуального брифа, мы собираемся креативной группой, состоящей из арт­-директора, дизайнера, аналитика и менеджера проекта, и проводим мозговой штурм. На нем анализируются конкуренты, целевая аудитория, учитываются ваши пожелания по дизайну — какие нравятся и не нравятся работы и почему. Разрабатываются уникальные фишки, которые заинтересуют пользователей сайта, а также продумывается удобство и функциональность страниц.

Затем мы начинаем собирать UI-kit (набор графических элементов и готовых решений для будущего сайта), отрисовывать главную страницу, ориентируясь на прототип.

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

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

Мы за то, чтобы сразу сделать круто и как нужно клиенту, а не делать несколько сырых концепций в надежде, что какая-то из них понравится заказчику.

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

Наши дизайнеры в своей работе используют онлайн-сервис Figma, который позволяет разрабатывать интерфейсы и прототипы в режиме совместной работы в реальном времени. Правильное использование данного редактора вывело наш рабочий процесс на новый уровень. Мы активно используем компоненты, лейауты, привязки и стили. Это позволило структурировать наши макеты, избавив верстальщиков от многих проблем.

Сколько это стоит

Разработка дизайна с нуля — это всегда много времени, проведенного за брейнштормами, поиском идей и фишек на сайтах типа https://www.awwwards.com/ и рутинной разработки всех страниц и их состояний.

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

Внутренняя страница — от 4 до 8 часов в зависимости от объема и сложности, длинные страницы-лендинги около 20.

Отрисовка адаптивной версии сайта (одно разрешение) занимает около 25% от времени, затраченного на десктопную. Сколько разрешений необходимо — зависит от назначения проекта и пожеланий клиента.

Отрисовка типового интернет-магазина на 12 типовых страниц и разделов займет около 210 часов, из них 140 на десктопную версию и 70 на адаптивную (2 разрешения).