Полезное

20 маст-хэв вайрфреймов и наборов UI для вашей библиотеки дизайна

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

Вайрфреймы. Путешествие пользователя. Карты контента. Дизайн, ориентированный на пользователя. Информационная архитектура. Анимированные прототипы. Пути преобразования. Итеративные функции. Карта сайта.

Ох, что?

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

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

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

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

Что такое вайрфрейм?

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

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

Что такое набор пользовательского интерфейса?

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

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

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

Лучшие шаблоны вайрфреймов и наборы пользовательских интерфейсов

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

1. molo Mobile Wireframe Kit 

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

2. Codama iOS Wireframe UI Kit 

Codama — это вайрфрейм для iOS, созданный с помощью Sketch, одного из топовых программных обеспечений для дизайна. Он хорошо организован, а файлы названы способами, которые имеют смысл при использовании в Sketch. Выбранный шрифт — Montserrat, который является классическим для дизайна Apple.

3. Greyhound UX Flowcharts

Greyhound — это уникальный набор, который поставляется с более чем 100 картами мини блок-схем, плюс блоки действий, стрелки и многое другое.

4. WeDot — Wireframe UI Kit

WeDot — популярный набор вайрфреймов с более чем 170 макетами. Он особенно хорош и полезен для панелей мониторинга, данных и диаграмм.

5. Blokk Wireframe Kit

Blokk — это удивительный набор вайрфреймов для одностраничных веб-сайтов. Все блоки контента основаны на Bootstrap, поэтому он легко позволяет перейти от Photoshop или Sketch к реальному, живому веб-сайту.

6. UX Workflow — Wireframe and Sitemap Creator

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

7. Collector Wireframe Web Kit 

Collector Wireframe Web Kit –комплект, созданный для AdobeXD, бесплатного программного обеспечения для UX от Adobe. Он основан на Вootstrap и организован по популярным категориям, таким как заголовки, портфолио, блог, контакты и таблицы цен.

Примечание: он продается почти за $40 на других сайтах с ресурсами для дизайна, что больше, чем стоимость подписки на Envato Elements (на момент написания статьи)! Также комплект имеет полезную видео-демонстрацию на YouTube.

8. Wirey Wireframe Kit

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

9. Turbo iOS Wireframe Kit

Разработка приложения, которое будет иметь страницу регистрации, пошаговые руководства, профиль пользователя и социальные компоненты? Как насчет новостей, продаж или видео? Попробуйте этот набор Turbo iOS Wireframe Kit, который имеет Instagram-подобный вид.

10. 6 Ecommerce Wireframes

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

11. Google Fonts Combinations

Хорошо, технически это может быть не «набор пользовательских интерфейсов», но когда вы разрабатываете новый веб-сайт, первое, на чем вы можете застревать — это выбор типографики. Это такой важный элемент дизайна, но вариантов так много. Легко перегрузить мыслями голову, и внезапно вы понимаете, что потратили час, анализируя плюсы и минусы Open Sans против Lato. Просто загрузите этот набор комбинаций шрифтов Google, подберите выбранную дизайнером комбинацию шрифтов и продолжайте работать над проектом.

12. Basement Wireframe Kit

Набор для простых веб-сайтов, особенно для компаний и веб-сайтов онлайн-продаж. Поставляется с версиями файлов Photoshop и Sketch.

13. Clean UI Kit for Rough Sketching

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

14. Paper Wireframe Kit

«Как эскиз на бумаге», Paper wireframe Kit — простой, основанный на сетке инструмент для проектирования.

15. W1 UI Kit for watch Apps

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

16. Dashboard UI Kit

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

17. Awesome Web UI Kit 

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

18. Heavy UI Kit: Music 

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

19. Creative Mind UI Kit

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

20. Social Media Kit

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

Всем успешной работы!

Источник

 

  • 155