Обучение ui/ux дизайну

Анализ и разработка макета сайта с нуля

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

С чего необходимо начать?

В данной статье я не стану касаться UX-стратегий, интерпретации, анализа (создание архетипов пользователей, способов взаимодействия пользователя, а также карты их путешествия), а сразу перейду к следующему:

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

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

Анализ и разработка макета сайта с нуля

Шутка, пирамиду вы спроектировать не сможете.

Так или иначе, я сам использую этот метод.

Модель для проектирования структуры

Мы рассмотрим такие нюансы:

  1. Изучение конкурентов.
  2. Поиск таких примеров дизайна, которые вам нравятся.
  3. Изучение наилучших практик.
  4. Опора на предыдущие решения и работы.
  5. Эксперименты с различными идеями.
  6. Решать быстро, создавать лишь необходимое.
  7. Проверка различных решений.

1. Изучение конкурентов

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

Что именно искать на данных сайтах:

Каким визуальным языком они пользуются?

  • Цвета, шрифт, формы, изображения

Каким образом они проектируют информационную архитектуру?

  • Что они отмечают как важное, что нет?
  • Как расставляются приоритеты?

Какие сетки или структуры они применяют?

  • Они используют сетку с несколькими колонками или с одной?
  • У них многоуровневая навигация или одностраничный дизайн?

Ищите конкретные решения

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

Изучите контент

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

Несколько слов о воровстве

«Хороший художник копирует, а выдающийся — ворует», Пабло Пикассо

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

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

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

2. Вдохновение

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

Анализ и разработка макета сайта с нуля

Где можно найти хорошие идеи дизайна:

  • Dribble — наилучшие дизайнеры собрались в этом месте, чтобы показать вам свои изумительные работы. Изучать можно бесплатно.
  • Behance — также прекрасный бесплатный сайт.
  • Pinterest — да, здесь есть очень много классных работ!
  • Themeforest — в этом месте продаются шаблоны интернет-сайтов. Многие из них очень продуманы и созданы опытными и высококвалифицированными дизайнерами.
  • Погуглите сами)

Анализ и разработка макета сайта с нуля

Рекомендация эксперта 1

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

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

Рекомендация эксперта 2

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

Рекомендации по поиску

Ищите конкретные решения на Dribble, к примеру, подписка, оформление заказа, индикатор выполнения.

Найдите интересные решения для пользовательского интерфейса (вам может понравиться шрифт, кнопки или же интерфейс, в целом).

3. Изучение наилучших практик

Анализ и разработка макета сайта с нуля

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

Кроме того, необходимо изучить лучшие практики для отдельных решений.

Два полезных сайта для изучения наилучших практик:

  • CallToIdea — большая библиотека хороших (преимущественно) дизайнов по группам.
  • UiPatterns — это изумительная коллекция шаблонов пользовательского интерфейса.

4. Опора на предыдущие решения и работы

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

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

Создайте собственный стиль

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

5. Эксперименты с различными идеями

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

Начинайте с малого

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

Попробуйте набросать определенную идею на бумаге, либо кратко описать идею на доске.

Анализ и разработка макета сайта с нуля

Рекомендации для набросков:

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

Желательно разбавить собственные идеи идеями команды

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

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

Метод Design Studio

Слайды метод Design Studio

6. Решать быстро, создавать лишь необходимое

Анализ и разработка макета сайта с нуля

Качественный рабочий цикл проектирования:

  • Проведите исследование, применяйте шаблоны и наилучшие практики.
  • Быстро разрабатывайте дизайн.
  • Быстро принимайте решения.
  • Тестируйте все.

Давайте разберемся детальнее.

Мы уже обсуждали, как делать исследование.

Почему проектировать следует быстро?

Чем больше вы времени тратите на доведение дизайна до полного совершенства, тем больше углубляетесь в дебри.

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

Чем быстрее вы покажете свой интернет-сайт клиентам, тем раньше узнаете о правильности собственного выбора.

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

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

Скорость — неотъемлемая часть цикла проектирования. Это приводит к следующему выводу:

Быстро решайте все проблемы с дизайном

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

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

Реальность:

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

Практически всегда все эти детали важны исключительно для вас.

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

В связи с этим, придерживайтесь этой рекомендации: достаточно дизайна. Прочтите главу «Достаточно дизайна» из книги Лауры Кляйн «UX для бережливого стартапа».

Как понять, насколько важна опция или проблема?

Как пишет Лаура Кляйн:

Начните с ответов на два вопроса:

  • Какую именно проблему это решает?
  • Насколько важна данная проблема на фоне остальных проблем, которые мне надо решить? / Лаура Кляйн

Что значит «достаточно дизайна» и что я называю «быстрым принятием решений»?

Проектируйте важные моменты — это сильно влияет на ваш бизнес

Решайте исключительно главные проблемы (поверьте мне, у вас всегда есть значимые вопросы)

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

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

Рекомендация эксперта: что делать, если вы не можете выбрать дизайн?

  • Сделайте шаг назад, закройте глаза.
  • Просто ткните пальцем в любой дизайн.
  • Протестируйте его.

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

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

7. Тестируйте различные идеи

Я уже говорил, что тестировать надо несколько раз. Это основа проектирования.

Как можно протестировать дизайн (ряд идей)

  • A/B тестирование.
  • Юзабилити-тестирование.
  • Проверка восприятия.
  • Тестирование клика.

Я не буду здесь вдаваться в детали, однако скоро на эту тему появятся мои новые статьи. Буквально несколько идей, как можно выполнить тестирование:

  • A/B тестирование используется для измерения успеха и для выбора между несколькими вариантами.
  • Юзабилити-тестирование поможет вам выявить проблемы.
  • Проверка восприятия (к примеру, 5-секундный тест) показывает, как пользователи воспринимают дизайн, а также то, как он на них влияет.
  • Тестирование клика показывает, знают ли пользователи, как справляться с взаимодействием в различные критические моменты.

Проверенный метод: расставляйте приоритеты!

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

Главные выводы

Итак, это мой способ проектирования структуры интернет-сайта. Предлагаю вам пошаговый план:

1. Изучение конкурентов

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

2. Ищите вдохновение

  1. Создайте доску на Pinterest, которая будет посвящена вашему проекту.
  2. Посмотрите идеи дизайна на Behance, Dribble и Pinterest.
  3. Ищите конкретное решение.

3. Изучайте наилучшие шаблоны и практики

  1. Посмотрите шаблоны призывов к действию и UI.
  2. В случае если ваши пользователи привыкли к какому-нибудь решению (оформление заказа, регистрация), они будут вам очень благодарны, если вы будете применять именно его.

4. Используйте свои прошлые решения и работы

  1. В случае если у вас уже был удачный проект, обязательно используйте его еще раз.
  2. Создайте собственный стиль и библиотеку.

5. Поэкспериментируйте с различными идеями

  1. Начинайте с малого (прототип на доске, на бумаге, design studio).
  2. В начале не ограничивайте себя.

6. Решайте быстро, создавайте лишь необходимое

  1. Не тратьте время, сомневаясь, какое именно решение принять.
  2. Решайте быстро, быстро учитесь.
  3. Создавайте дизайн лишь необходимых деталей. Обращайте внимание лишь на то, что точно повлияет на ваш бизнес.

7. Тестируйте различные идеи

  1. Тестируйте всегда.
  2. Постоянно проводите A/B тестирование, проверку восприятия и юзабилити-тестирование.
  3. Пускай тесты будут вашим судьей.

перевод

Понравилось? Расскажите друзьям:






Комментарии:

(напишите, что вы думаете об этом)