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

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



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

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

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

Редактор хорош не только для дизайнеров. В нем можно работать SMM-менеджерам и разработчикам, вести различные проекты и разрабатывать шаблоны рекламы для Facebook.

Фрилансерам, работающим самостоятельно или с напарником, будет комфортно: условно-бесплатный тариф Starter позволяет вести работу над проектом двоим людям. Если ваша команда больше, придется немного раскошелиться.

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

1. Surge iOS UI Kit – UI Kit приложения iOS для крипто и кошелька

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

UI-kit Surge представляет собой набор из 45 экранов pixel perfect, совместимых со Sketch и Figma одновременно. Одно из главных преимуществ этого пользовательского интерфейса — простая кастомизация (вы можете менять динамические компоненты, размеры, а также глобальные стили цвета и шрифта).

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

Особенности:

• 45 экранов (разрешение iPhone X);
• Родные шрифты (SF Pro Display);
• Дизайн Pixel-perfect дизайн;
• Хорошо реагирует на изменение размера;
• Можно полностью настроить под себя;
• Прост и комфортен для пользователей;

2. Storefront iOS UI Kit – UI Kit электронной коммерции iOS для Figma и Sketch

Бывают такие интернет-магазины, в которые хочется возвращаться снова и снова. И этот вариант точно поможет создать именно такую площадку e-commerce. Плавные формы, лаконичные иконки, приятные цвета — такой дизайн не раздражает покупателя, а вызывает симпатию с первого взгляда.

Storefront― многофункциональный вариант пользовательского интерфейса iOS для онлайн-продаж. В вашем распоряжении 25 видов экранов, каждый из которых можно настроить под себя, верстка pixel perfect и многое другое.

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

Особенности:

• 25 вариантов экранов (разрешение iPhone X);
• Глобальные стили цвета и текста;
• Множество кастомизируемых компонентов;
• Шрифты Apple SF;
• Частые обновления;

3. Fitness Pro: Website UI Kit

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

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

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

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

Особенности:

• 72 эксклюзивных готовых шаблона;
• 246 перемещаемых блоков;
• 400+ компонентов;
• Редактируемые 3D-иконки + Макеты (для Figma);
• Полностью настраиваемый;
• Светлый и темный режимы;

Чем хороши UI-kit?

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

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

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

Есть ли жизнь после Figma?

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

В отличие от Photoshop, Sketch не использует собственных средств для отрисовки создаваемого контента — эти функции возложены на встроенные инструменты Mac OS X. Это позволяет значительно экономить место на диске.

Особенности:

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

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

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

Особенности:

• В работе можно использовать предустановленные наборов пользовательского интерфейса или загружать свои;
• Прототипы мобильных приложений могут взаимодействовать в соответствии с реальными жестами рук;
• Формы могут быть полностью интерактивными и использовать реальные данные для реалистичного моделирования продукта;
• Justinmind полностью интегрирован с самыми популярными инструментами тестирования пользователей, такими как Hotjar, UserTesting, UserZoom, CrazyEgg, Validately и Clicktale;
• Как только прототипы становятся общедоступными в облаке, их можно тестировать в мобильном приложении на реальном устройстве.

P.S. Будем признательны за ссылки на ваши любимые, рабочие UI-kit в комментариях. Спасибо.