Основные этапы работы над веб-проектом | Глава 6

В самом начале мой рабочий процесс был достаточно хаотичным: я легко отвлекался на разные идеи и вдохновляющие штуки и из-за этого не мог сосредоточиться на основной цели проекта. Не разузнав достаточно о целях и ограничениях проекта, я сразу прыгал в Photoshop и создавал какие-то макеты и наброски.
Иллюстрация tubik: https://dribbble.com/shots/6328148-Storytelling-in-UX-Illustration/attachments
270

Назад | Продолжение (Глава 7)

(Перед вами бесплатный курс Рафаля Томаля «Интро в веб-дизайн». В курсе 7 глав. Если вы здесь впервые, то лучше начните сначала)

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

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

Выстроенный процесс дизайна помогает вам:

  1. Быть креативным.

Креативность требует пространства и фокуса. Сложно придумать креативное решение, если вы подходите к работе как попало. Пик креативности наступает когда вы следуете четкому алгоритму и вас ничто не отвлекает.

2. Быть гибким.

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

3. Быть более продуктивным.

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

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

4. Придерживаться курса.

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

5. Получать обратную связь от клиентов.

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

6. Документировать и представлять свою работу.

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

Как выглядит мой текущий процесс дизайна

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

Рис. 6.0: Мой текущий процесс дизайна

Я быстро понял, что лучше всего получались те проекты, когда я придерживался четкого процесса и выполнял все шаги:

  1. Поиск и исследование

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

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

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

2. Первичная проработка дизайна

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

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

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

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

3. Руководство по стилю

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

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

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

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

4. Вайрфреймы

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

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

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

5. Макеты

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

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

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

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

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

Начинайте выстраивать свой процесс дизайна

Итак, как подойти к построению своего процесса?

  1. Документируйте этапы работы.
    В процессе работы над дизайном ведите заметки. Отслеживайте, на каких этапах вы застреваете, а где приходится делать двойную работу. Изобразите свой процесс схематично.
  2. Разбейте работу на этапы.
    Группируйте задачи по этапам. Каждый этап — ваша контрольная точка. Представьте, что вы работаете в команде и в каждой контрольной точке передаете работу другому дизайнеру.
  3. Продолжайте и улучшайте.
    Не отступайте от своего процесса. Если что-то идет не так или вам приходится нарушить последовательность шагов, запишите это. Завершив проект, вернитесь к своим заметкам и пересмотрите процесс.

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

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

(с) Над переводом работали: Ольга Жолудова и Анастасия


Назад | Продолжение (Глава 7)


Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →
Курс «Интро в веб-дизайн»

Посты в категории UI-дизайн

Программы для веб-дизайнера: где создавать сайты? | Глава 7

Ольга Жолудова

13 августа 2019

Посты в категории UI-дизайн

5 направлений, в которых веб-дизайнеру нужно развиваться постоянно | Глава 5

Ринат Шайхутдинов

13 августа 2019

Посты в категории UI-дизайн

Чем занимается веб-дизайнер на самом деле | Глава 4

Ольга Жолудова

13 августа 2019