Дизайн-процесс. Шаг №1. Сбор информации

Первая часть БЕСПЛАТНОГО курса по веб-дизайну. Полный дизайн-процесс по разработке макета сайта в Figma.

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

📋У нас есть 3 источника информации:

  1. Сбор информации с текущего сайта.
  2. Сбор пожеланий клиента.
  3. Сбор визуальных требований.

💻Сбор информации с текущего сайта

Если у клиента уже есть сайт, который нужно обновить, то мы можем из него взять всю интересующую нас информацию.

Брендовые составляющие

  1. Логотип. Рекомендую сразу взять его и добавить к себе в проект Figma.
  2. Цвет. Если у компании есть уже четко определенная цветовая палитра, которая может быть указана в брендбуке или гайдбуке, то мы спокойно берем и используем в работе. Если оттенки цвета клиенту могут не нравится, то не бойтесь предложить чуть освежить палитру на несколько тонов. Сделать ее более яркой и отражающей эмоции бренда.
  3. Шрифт. Если текущий шрифт устраивает, то окей. Если нет, то нам нужно будет подобрать его на этапе визуальной концепции. Но на текущем этапе вы можете спросить клиента — какой шрифт он хочет использовать в работе (Тонкий, энергичный, с декоративными элементами и т.д.). Это поможет нам на этапе создания Mood Boarda. Также бывает ситуация, когда клиенту все равно какой шрифт использовать. В этом случае мы просто подбираем его на свой вкус. Также рекомендую вам уточнить у клиента на счет возможности использовать пиратские шрифты. У меня были случаи, когда юридический отдел компании не допускал использование шрифта без покупки лицензии. Поэтому с того момента я всегда уточняю это у клиентов.

Текстовый контент

Тут внимательно! Если сайт компании хорошо располагается в поисковых системах, то мы берем всю текстовую структуру «один в один» и используем ее. Любое изменение, даже незначительное, может повлиять на ранжирование сайта в поисковой выдаче. И не всегда результат может быть положительным. Если компания активно не продвигала себя в поисковиках, и мы чувствуем, что можем улучшить и вычитать текст, то берем все тексты, а на следующем этапе будем их видоизменять.

📜Сбор пожеланий клиента

Техническое задание

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

  1. Ограничения (чтобы мы понимали как делать не надо).
  2. Визуальные пожелания клиента (второй вид ограничения только в положительном контексте).
  3. Дополнительные вопросы для беседы с клиентом. Если нужно что-то уточнить.
  4. Уровень и компетенция клиента (если клиент например не опытный, то могут быть риски в работе связанные со сроками, неверными ожиданиями клиента и т.д.).

Проблемы текущего сайта (если есть)

Нужно проговорить с клиентом, что сейчас не нравится в текущем дизайне сайта. Эта информация будет служить для нас целями в работе, чтобы потом можно было ответить на вопрос: «Удалось ли решить данную проблему при помощи нового дизайна?”

Цели создания нового сайта

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

  1. Создать дизайн сайта в соответствии с фирменным стилем.
  2. Переработать текущий дизайн сайта и улучшить визуал.
  3. Разработать дизайн интернет-магазина, где будет реализован процесс покупки товара, а также корпоративного блога.
  4. Создать Landing Page, а также дизайн-систему, чтобы в будущем масштабировать сайт в многостраничный и т.д.

Не нужно сильно углубляться в конкретные цели. Это не маркетинг, где можно выстроить четкие метрики, к которым нужно стремиться. Достаточно обрисовать общее направление, которое поможет вам и клиенту смотреть в одну сторону.

🖼️Сбор визуальных требований клиента

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

  1. Брендбук или гайдлайн. Если компания крупная, то готовая визуальная концепция бренда уже может существовать. Это наш основной ориентир и документ, который позволит сэкономить огромное количество времени. В нем обычно отражают: цветовую схему, фирменный шрифт, логотип и другую полезную для нас информацию. Поэтому сразу сохраните к себе данный документ. Он нам понадобиться чуть позже.
  2. Ценности и характер бренда. Казалось бы, как данная информация может помочь в дизайне? А на самом деле именно благодаря ней мы будем создавать визуальную концепцию. Пример характера и ценности: молодежный бренд или серьезный, гибкий или стабильный, мягкий и пушистый. Примеров можно придумать очень много.
  3. После этого мы должны проанализировать: как ценности и характер бренда, а точнее эти эпитеты (или прилагательные) мы можем реализовать на практике в интерфейсе. Здесь не нужно все детально продумывать достаточно просто указать направление, которое вы в процессе общения с клиентом — определите. Примеры: округлость форм, градиенты, негативное пространство и воздух в интерфейсе и т.д.

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

📍Выводы

  1. Сбор информации задает общий темп работы. Чем больше информации мы соберем, тем качественнее и быстрее будет процесс разработки макета.
  2. Виды информации от клиента: сбор информации из текущего сайта; сбор пожеланий клиента; сбор визуальных требований.

Свежие материалы

Все материалы