Веб-дизайн и UX/UI-проектирование

Дизайн как решение, а не декор

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

Практический пример: компания-подрядчик в строительстве хочет «солидный сайт». Мы выясняем, что клиенты — это технические директора, которые сравнивают нескольких поставщиков, ищут опыт похожих объектов и сроки. Значит, главное на странице — конкретные кейсы с цифрами, документы и контакты ответственных людей, а не огромные фотографии техники. Так дизайн получает смысл.

Исследование перед рисованием

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

Прототип: каркас, с которого всё начинается

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

Визуальный язык: цвет, шрифт, сетка

Три основы любого интерфейса — цвет, типографика и сетка. Цвет задаёт настроение и расставляет акценты, о том, как выбирать палитру, мы рассказывали в отдельной статье. Шрифты влияют на доверие и читаемость, см. материал про типографику на сайте. Сетка обеспечивает порядок и ритм, её принципы разобраны в публикации про сетку в веб-дизайне. Мы подбираем сочетания, которые подходят бренду, читаются на разных экранах и не устаревают через полгода.

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

Мобильные экраны

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

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

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

Работа с обратной связью

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

Типичные ошибки в веб-дизайне

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

Дизайн и разработка вместе

Если вы заказываете дизайн и разработку у одной студии, мы можем обсуждать технические ограничения на раннем этапе. Это уменьшает риск, что красивый макет окажется слишком дорогим в реализации. Если дизайн заказан отдельно, мы готовим понятные материалы для вашей команды и остаёмся на связи на время вёрстки. Для действующих сайтов, которые нужно обновить, подойдёт редизайн, а чтобы выявить слабые места интерфейса до начала работ, можно заказать UX-аудит. Примеры работ смотрите в портфолио, например в кейсе клиники «Аура» или ресторана «Северный двор».