Как в Uplab разрабатывают сайты. Этап дизайна

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

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

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

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

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

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

Дизайн-макет — файл графического формата, содержащий визуальный образ будущего сайта / страницы сайта, разработанный с учетом технических возможностей HTML-верстки.

ТЗ — техническое задание, содержащее подробную информацию и требования к верстке.

Разработка дизайна — командная работа разных специалистов.

Участвует на всех этапах разработки проекта: контролирует реализацию задуманного с точки зрения взаимодействия пользователя с ресурсом.

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

Распределяет задачи между командой и консультирует специалистов. Комментирует и утверждает дизайн-макеты. Оценивает и планирует работы. Защищает концепты и дизайн-решения перед заказчиком.

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

Дает распоряжения и методические указания дизайнерам и подрядчикам. Оценивает и планирует работы. Создает концепты и дизайн-макеты. Планирует и распределяет ресурсы. Защищает концепты и дизайн-решения перед заказчиком. Отвечает: за качество дизайна, качество финального продукта, выполнение задач в срок.

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

Коммуницирует с дизайнерами и менеджером проекта для достижения должного качества продукта и реализации всего предполагаемого функционала.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Рассказываем, как разработали дизайн-систему для «Аэропортов регионов»

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

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

Делимся опытом по разработке корпоративных сайтов для «Группы ГАЗ»

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

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

Узнайте, как мы разработали промо-сайт для компании «Экомилк»

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

Наш кейс по разработке мобильного приложения для курорта «Имеретинский»

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

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

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

Создаем сайты на конструкторе Tilda Publishing, рекламные изображения, печатную продукцию и прочее.

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