Facebook и Twitter стали основными источниками новостей для Яндекса
Previous
выбрать за меня
Ключ к созданию долгосрочных отношений с клиентами
Next
веб дизайн, инструменты, макеты, советы, стратегия, юзабилити
Юзабилити

19 советов для быстрого создания UI макетов

Автор: Ия Пфанштиль15.02.2016

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

Начнем!

1. Сначала создайте наброски

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

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

2. Начните с мобильных экранов

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

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

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

3. Используйте инструменты для моделей и прототипов

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

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

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

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

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

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

4. Будьте верны своему редактору

Решая, какой инструмент лучше – Sketch или Photoshop – чаще всего стороны остаются при своем мнении. Дело в том, что среди них нет лучшего, выбор зависит только от предпочтений самого дизайнера.

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

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

5. Изучите удачные работы других дизайнеров

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

Для вдохновения посетите вот эти галереи, большинство из которых обновляется ежедневно:

6. Избавьтесь от ненужных элементов

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

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

Дизайнер Том Грин предлагает следующую процедуру определения нужных элементов:

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

7. Используйте сетку и направляющие

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

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

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

8. Используйте бесплатные UI элементы и иконки

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

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

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

9. Используйте векторную графику

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

10. Безопасные шрифты

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

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити
Используя шрифты по умолчанию или предложения сторонних ресурсов (например, Google Fonts), вы значительно экономите свое время. Но не ограничивайте себя. Если проект требует создания уникального шрифта, лучше потратить на это время. Только не забудьте проверить, насколько стабильно он отображается в интернете.

11. Инструменты для работы с цветом экономят время

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

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

Например, Cohesive Colors, бесплатный проект от GitHub, подбирает цветовые схемы на основе введенных цветов и элементов. Еще один бесплатный инструмент в виде цветового кольца – Paletton.

12. Дублируйте слои

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

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

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

13. Используйте Layer Comps (Photoshop)

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

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

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

14. Правильные названия файлов и слоев

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

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

15. Контроль версий

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

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

Используя контроль версий, вы можете возвращаться к предыдущим сохраненным версиям файла. Это намного проще, чем создавать коллекции файлов под названием «версия 1», «версия 2», «версия 3» и так далее.

16. Храните файлы разумно

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

  • Интранет
  • Облачные хранилища (например, Dropbox)

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

17. Будьте независимы

Другими словами, не рассчитывайте на чужую помощь, когда у вас возникают проблемы (интернет не в счет). Желание «посоветоваться с Павлом перед началом работы» только замедлит процесс. Интернет способен решить 95% всех проблем, поэтому лучше обращаться за помощью к Google.

18. Предварительный просмотр на реальных устройствах

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

веб дизайн, инструменты, макеты, советы, стратегия, юзабилити

19. Попросите оценить вашу работу

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

Найдите кого-нибудь, чьему мнению вы доверяете, покажите свой дизайн нескольким коллегам и узнайте их мнение. А создание интерактивного макета (совет №3) позволит вам оценить его юзабилити и провести тестирование по различным сценариям.

Реакция на статью
поделюсь
33%
интересно
33%
полезно
133%
не уверен
33%
скучно
0%
где автор?
33%
Ия Пфанштиль
Главный редактор, контент-маркетолог, автор. Четыре года пишу о digital. Делюсь открытиями.
Комментарии
Оставить отзыв

    You must log in to post a comment