Основные этапы работы над веб-проектом. Курс «Интро в веб-дизайн» / Глава 6

Nancy Pong

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5. Макеты

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

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

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

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

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

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

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

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

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

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

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


Все статьи и переводы по дизайну читайте в нашем блоге: https://ux-journal.ru

Если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать. Нас можно найти Вконтакте: Ольга Жолудова и Анастасия Свеженцева

Курс «Интро в веб-дизайн»

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

    Nancy Pong

    Written by

    Ольга Жолудова. Копирайтер и переводчик. Про копирайтинг: https://vk.com/copywriter.blog Про жизнь: https://www.instagram.com/nancypong4/

    Курс «Интро в веб-дизайн»

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

    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