19 практических советов по ускорению создания макетов пользовательского интерфейса

Итак, начнём.

1. Сначала воплотите ваши идеи на бумаге

Эскиз выполняется быстро, просто и безопасно.

Перевод статей для сайтов | БП SmartPerevod

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

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

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

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

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

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

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

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

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

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

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

Перевод статей для сайтов | БП SmartPerevod

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

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

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

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

Перевод статей для сайтов | БП SmartPerevod

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

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

5. Просмотр других видимых успехов

Иногда лучшим способом изучения является простой просмотр.

Вы можете почти интуитивно сказать, какие сайты и продукты имеют “этот” Х-фактор, но вы можете сказать, почему? Изучайте другие примеры видимых успехов и посмотрите, сможете ли вы определить, что они сделали правильно, и как вы можете использовать тактику для вашего сайта.

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

  • awwwards
  • Dribbble
  • Site Inspire
  • CSS Design Awards

6. Удаление ненужных элементов

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

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

В Руководстве по каркасному моделированию, профессор дизайна Том Грин приводит ориентированную на пользователя процедуру выбора тех элементов, которые остаются и тех, которые исключаются:

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

7. Использование системы-сетки

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

Перевод статей для сайтов | БП SmartPerevod

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

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

8. Использование преимуществ бесплатных элементов и значков пользовательского интерфейса

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

Перевод статей для сайтов | БП SmartPerevod

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

Есть много таких наборов для программ Photoshop и Sketch, и вы можете также найти дополнительные ресурсы для мобильных приложений — таких как этот набор Android Lollipop — с заранее подготовленной основой.

9. Использование векторов

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

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

Обратите внимание на эти бесплатные векторные элементы, которые могут помочь в начале вашей работы.

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

10. Безопасная веб-типографика

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

Перевод статей для сайтов | БП SmartPerevod

Использование шрифтов по умолчанию или вариантов сторонних производителей — таких как Шрифты Google или эти 653 бесплатных ресурса типографики — экономят много времени при выполнении дизайна макетов.

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

11. Инструменты цветовой палитры экономят время

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

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

Перевод статей для сайтов | БП SmartPerevod

Например, Cohesive Colors, бесплатный проект GitHub, содержит цветовые схемы, основанные на входных цветах и различных изменяемых шаблонах. Другой вариант – Paletton, колесо, цветовой селектор, также является бесплатным. Но их не только два: проверьте Creativebloq перечень 28 цветовых инструментов , чтобы найти тот, который вам поможет.

12. Дублирование слоев

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

image08

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

13. Использование Композиции слоев (Photoshop)

Те, кто знаком с программой Photoshop, возможно, уже знают о панели композиции слоев (layer comp), и насколько она полезна. В принципе, она сохраняет “снимки” файла PSD файл с определенными группами и скрытыми слоями. Преимуществом является возможность создания нескольких экранов или страниц в одном документе, используя опцию выбора слоев для всех.

Перевод статей для сайтов | БП SmartPerevod

Эта функция задает организацию очень просто. Однако, она доступна только в программе Photoshop, а Sketch пока не может конкурировать в этом вопросе, хотя ходят слухи, что разработки чего-то подобного ведутся.

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

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

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

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

Считайте, что вы присваиваете имена вашим файлам с “хорошей гигиеной” для работы с другими. Джош Сирс предлагает дополнительные советы по организации в программе Photoshop.

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

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

Перевод статей для сайтов | БП SmartPerevod

Ваша выгода от контроля версий – это возможность получить доступ/восстановить предыдущую сохраненную версию (отсюда и название “контроль версий”). Это намного лучше, чем собирать коллекцию файлов с именами v1, v2, v3 и т.д.

16. Хранение файлов в надёжном месте

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

  • Сеть Intranet
  • Сервис облачных вычислений (например, Dropbox)

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

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

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

Перевод статей для сайтов | БП SmartPerevod

Такой подход как “Мне нужно услышать от X, прежде чем я начну” только приведет к замедлению всего процесса для всей команды. Немного покопавшись в интернете можно ответить почти на все вопросы с экономией 95% времени, поэтому подумайте внимательно, если Google может сэкономить ваше время и время вашей команды.

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

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

Одно дело просматривать макет в окне программы Photoshop или Sketch , другое дело просматривать его в сети на заданном экране. Демо даст вам представление о том, как ваш макет будет выглядеть после кодирования.

Перевод статей для сайтов | БП SmartPerevod

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

19. Извлечение уроков путем организации правильной обратной связи

Обратная связь может быть негативной, но она также может быть полезна, если собрана правильно.

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

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

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

В действительности, это идеальная форма обратной связи.

Перевод статьи Steven Snell “19 Best Practices for Faster UI Mockups”