Как в Uplab разрабатывают сайты. Этап дизайна
Article title
23 мая 2019

Как в Uplab разрабатывают сайты. Этап дизайна
~10 минут на чтение

Недавно мы запустили спецпроект «Разработка сайтов в Uplab» — цикл статей, в которых наши специалисты подробно рассказывают, как создают успешные digital-продукты для бизнеса. Под успешными мы понимаем удобные и функциональные сайты и сервисы, которые помогают компании выделиться на фоне конкурентов, привлечь целевую аудиторию и решить сразу несколько задач бизнеса. Первый материал был посвящен этапу аналитики и проектирования, сегодня поговорим о работе над дизайном сайтов.

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

Мы разрабатываем дизайн для корпоративных и промо-сайтов, интернет-магазинов, мобильных приложений, лендингов, печатной продукции, а также визуализируем данные и создаем дизайн-системы, айдентику, 3D и рекламную графику. Каждый из продуктов проходит классический этап производства, но при этом имеет отличительные черты. Давайте посмотрим, как это выглядит.

За что отвечает дизайнер

Результат работы специалиста — графические файлы, которые обеспечивают наиболее эффективные взаимоотношения пользователя с продуктом, создаваемым в рамках проекта. Вместе с тем дизайнер готовит подробные описания к макетам и технические задания для frontend-команды, контролирует их выполнение и несет ответственность за качество продукта.

Ценность дизайна

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

Этап разработки дизайна — ключевой для заказчика. Можно узнать, как будет выглядеть финальный продукт после верстки и наполнения контентом.

Как строится процесс разработки дизайна

Изучение задачи

Дизайнер изучает все полученные от заказчика материалы, цели и задачи проекта, а также знакомится с техзаданием и прототипом. Затем проходит встреча с командой проектирования, на которой UX-специалисты презентуют прототип, объясняют выбор тех или иных решений, указывают на моменты, на которые следует обратить особое внимание. Затем дизайнер обсуждает проект с арт-директором и получает от него комментарии и пожелания.

Сбор референсов

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

Часто для сбора референсов мы используем сайты:

Визуальная концепция

На этой ступени разрабатывается концепт главной страницы — он утверждается UX-специалистом, арт-директором и frontend-разработчиком (или тимлидом технической команды, за которой закреплен проект) и при необходимости в него сразу вносятся правки.

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

Представление и защиту макетов проводит арт-директор или ведущий дизайнер агентства. По результатам встречи вносятся правки. После согласования итоговой версии концепта дизайнер приступает к отрисовке внутренних страниц сайта или сервиса.

Дизайн

На первом этапе дизайнер создает базовую страницу стилей, в которую выносится необходимый минимум элементов: система отступов, заголовки H1-H5, основной текст, лид-абзац, врезки, ссылки, кнопки, карточки, меню, хедер, футер, другие элементы и их состояния. С ростом количества отрисованных страниц, пополняется и обрастает подробностями страница стилей.

Внутренние страницы сайта создаются по прототипу. После утверждения страниц для десктопов создаются адаптивные — для самых популярных разрешений.

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

Мы используем инструменты:

Sketch

Photoshop

Figma

Dropbox

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

Авторский контроль

После передачи проекта frontend-разработчикам дизайнер продолжает участвовать в нем в качестве лица, осуществляющего авторский контроль за реализацией продукта. Он отсматривает и комментирует готовые страницы, вносит изменения, если необходимо. Финальная верстка согласовывается с арт-директором.

Какие проекты создаются в Uplab

В самом начале статьи мы уже упомянули, для каких продуктов чаще всего готовим дизайн. Рассмотрим их на примере кейсов — проектов для наших заказчиков.

Дизайн-системы

Библиотека компонентов сайта или сервиса хранится в едином репозитории. В ней стандартизированы правила и принципы, создана сопутствующая документация.
Одна из самых свежих наших работ — дизайн-система для сайтов холдинга «Аэропорты регионов»: «Кольцово», «Курумоч», «Платов» и др. Команда разработала решение в в виде цветового кодирования сайтов аэропортов, которое позволяет на 40% сэкономить ресурсы заказчика на реализацию последующих веб-ресурсов холдинга.

Корпоративные сайты

Полноценные ресурсы с расширенными функциональными возможностями, которые решают задачи по повышению привлекательности бренда для целевой аудитории.
Знакомьтесь с нашими работами для автомобилестроительной компании «Группа ГАЗ», турагента в в Петропавловске-Камчатском Enjoy Kamchatka и популяризатора кино в Московской области «Мособлкино»:

Интернет-магазины

Сайты, которые позволяют пользователям заказать товар или услугу, выбрать способ оплаты и доставки, оплатить заказ.

Промо-сайты

Проекты, основная задача которых выгодно представить товар, услугу, бренд или компанию. В нашем портфолио — множество промо-сайтов для российских и зарубежных брендов. Ежегодно они получают высокую оценку экспертного сообщества и становятся обладателями наград конкурсов и премий «Золотой сайт», «Рейтинг Рунета», Tagline Awards и др.

Мобильные приложения

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

Айдентика

Совокупность графических элементов, направленная на создание определенного образа бренда в глазах потребителей.

Визуализация данных

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

3d и рекламная графика

Создание трехмерных и высококачественных коммерческих изображений.

Многое другое

Создаем сайты на конструкторе Tilda Publishing, рекламные изображения, печатную продукцию и прочее.
После дизайна продукта следует этапы frontend- и backend-разработки — читайте об этом в следующем материале из цикла «Разработка сайтов в Uplab».

Поделитесь материалом с друзьями и коллегами:

363
Оцените статью
(3.66)

Комментарии к статье

Другие статьи в блоге
Статьи ~ 25 минут на чтение

Обзор конкурсов для разработчиков сайтов: как участвовать и сколько это стоит

10
23 августа 2019
Статьи ~ 15 минут на чтение

Цифровой детокс: что это такое и как его устроить. Советы сотрудников Uplab

862
16 августа 2019
Статьи ~ 35 минут на чтение

Обработка и защита персональных данных: инструкция для владельцев сайтов

87
08 августа 2019
Статьи ~ 10 минут на чтение

Как написать статью, которую будут читать? Пошаговая инструкция

367
26 июля 2019
Статьи ~ 25 минут на чтение

OKR. Как достигать амбициозных целей

688
28 июня 2019
Статьи ~ 25 минут на чтение

Мобильный UX: как разработать удобный сайт финансовой компании

260
25 июня 2019
Статьи ~ 30 минут на чтение

Микроразметка для «Яндекс» и Google: как настроить и проверить

720
07 июня 2019
Статьи ~ 20 минут на чтение

Как в Uplab создают прототипы сайтов: принцип работы и обзор инструментов

12150
05 июня 2019
Статьи ~ 10 минут на чтение

Как автоматизировать создание документов в «Битрикс24»

610
31 мая 2019
Статьи ~ 10 минут на чтение

Как интегрировать «Битрикс24» и «1С»

1293
17 мая 2019
+7 499 653 78 83