Веб-дизайн без мучений

Alex Voloshyn
Jan 27, 2015 · 12 min read

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

В статье я коротко рассказываю об основных этапах. Более подробно методология рассматривается на онлайн-тренинге по проектированию цифровых продуктов DIGITAL PRODUCT JEDY


Немного теории

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

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

Image for post
Image for post

Это была теория а теперь посмотрим как же это все применяется на практике.

Постановка процесса

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

Image for post
Image for post
Этапы работы над проектом в Trello

Конечно, каждый проект уникален и не все этапы будут нужны, в таком случае спокойно пропускаем этапы в которых нет необходимости. Помимо контроля этапов работы так же потребуется некий проектный документ в который будут собираться все данные и к которым будут иметь доступ все участники процесса. Для этого лучше всего подходит Google Docs.

Image for post
Image for post
Проектный документ

Помимо этого при получении заказа нужно уведомить клиента о том как будет строиться работа, на каких ключевых этапах вы будете с ним обсуждать результаты и корректировать направление. Как показывает практика, таким образом вы сразу отсекаете проблемных клиентов которым нужен “тупо дизайн”.


1. Дизайн продукта

Сначала нам нужно описать видение будущего продукта и утвердить его с клиентом. Сформировать видение помогают различные типы исследований которые дают нам объективные данные и помогают лучше понять какие проблемы прийдется решать. Исследования дают пищу для ума и подсознания благодаря которой активно включаются механизмы генерации идей. Кроме того формируются критерии по которым оценивается конечный результат на соответствие поставленным целям. Итогом этой работы является документ содержащий описание типов пользователей и пользовательские сценарии. И никаких картинок.

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

Вот перечень этапов которые нужно пройти:

Цели и потребности

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

Пользователи

Ниже информация которая была предоставлена клиентом и внесена в проектный документ.

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

Профессиональные фотографы

Используют свой аккаунт для промо своих работ которые обработаны и сняты не на мобильный гаджет.

Фотографы-любители

Набор удачных фильтров дает возможность “сделать шедевр” даже из посредственного или плохого с технической стороны кадра.

И так далее…

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

Image for post
Image for post
Простое описание пользователя будущего продукта

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

Примеры, конкуренты

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

Пользовательские сценарии

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

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

Создание макета

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

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

Зачем: первый этап формирует вполне объективные критерии оценки по которым будет оцениваться конечный результат.


2. Дизайн взаимодействия

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

Перечень основных шагов:

Технические требования и ограничения

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

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

Диаграмма потоков задач (User flow)

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

Image for post
Image for post
Диаграмма потоков задач

Сценарии, структура, функционал и наполнение

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

Image for post
Image for post
Структура сайта
Image for post
Image for post
Описание функционала и наполнения

В нашем случае страниц не так уж много а функционал не такой уж сложный. Ниже приведу пример такого описания для другого проекта.

Image for post
Image for post
Функционал и информационное наполнение для каждой страницы

Прототипирование

После того как у нас появилась ясная картина количества экранов и их содержимого можно перейти к созданию прототипа. Так как я занимаюсь проектированием и финальным дизайном для прототипирования я использовал Adobe Illustrator после чего все экраны были без проблем открыты в Adobe Photoshop и доведены до блеска. Вообще же для создания прототипов существует огромное количество инструментов и каждый дизайнер подбирает тот который лучше всего подходит под его задачи.

Image for post
Image for post
Прототип одного из экранов Первой страницы
Image for post
Image for post
Прототип экрана мастера создания фото-книги
Image for post
Image for post
Оформление заказа
Image for post
Image for post
Все экраны, всего 70 файлов

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

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

Image for post
Image for post
Веб-версия
Image for post
Image for post
Мобильная версия
Image for post
Image for post
Увеличенная карта

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

Зачем: проработать несколько идей в виде прототипа и изменить их намного проще и быстрее чем править окончательный макет. По сути прототипы это черновики большая часть из которых пойдет в мусорную корзину.


3. Дизайн графического интерфейса

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

Основная идея

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

Image for post
Image for post
Главная страница
Image for post
Image for post
Фото готового продукта лучше любого описания

Тон, настроение

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

Image for post
Image for post
Мастер создания фото-книги

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

Image for post
Image for post
Все экраны, всего 49 файлов

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

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

Image for post
Image for post
Интерактивные элементы и их состояния

Будьте готовы к тому, что воплощенный в жизнь сайт может немного отличаться от того, что нарисовано у вас в макетах, и это нормально. Однако всегда стоит проверить работу верстальщиков/программистов и уточнить чем вызваны те или иные изменения.

Результат

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


Интерактивное руководство по проектированию сайтов, веб-сервисов и мобильных приложений с нуля до финального решения + PDF-версия

Подробнее о руководстве: https://ux-clan.org/manual

Image for post
Image for post

UX Clan

Блог Александра Волошина о проектировании цифровых…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app