В самом начале процесса проектирования мы знаем, как это заманчиво сразу погрузиться в подбор шрифтов и цветов. Но есть много преимуществ, связанных с wireframe— это экономит время, упрощает определение проблем использования и позволяет дизайнерам сосредоточиться на создании надежного пользовательского интерфейса.
Некоторые дизайнеры предпочитают создавать более презентационные wireframe высокой четкости, в то время как другие любят делать это как можно проще, используя только бумагу и пиксельную ручку. Ниже мы собрали некоторые из наших любимых примеров каркаса из Dribbble, чтобы показать, как они могут выглядеть, и дать немного вдохновения для вашего следующего проекта.
Фрилансер Алекс Alex Dovhyi отодвинул ручку и бумагу и попробовал Freehand от Invision для создания wireframe. «Эта конкретная страница представляет собой сетку карт с предварительным просмотром и базовой информацией», — говорит Алекс.
Хулио Кастеллано делится своим workflow для VR-приложения идентификаций опасности. «Этот проект предназначен для обучения новых сотрудников, которые должны работать на опасных объектах. С помощью этого приложения они могут просматривать местоположения на высококачественных 360° изображениях, прежде чем они действительно отправятся туда », — объясняет Хулио.
Wireframe от Martyna Królikowska для Wearly, платформы для продажи б.у. одежды.
Wireframe для целевой страницы туристического блога от Zahid Hasan Zisan.
Очень милый ранний пользовательский интерфейс для концепции приложения Dribbble. Хорошая работа, Krisztina Szerovay.
Посмотрите, как низкоуровневый wireframe Javier Oliver для страницы событий превращается в прототип высокого уровня, а затем к окончательному интерфейсу.
Этот wireframe для приложения Bitesize Chef от James Boross позволяет легко увидеть, что происходит после клика пользователя.
Говорит дизайнер “Go Nimbly” Grant Helton: “Для моего последнего прототипа я играл с приложением добавления поточного wireframe, который приведет вас к каждому экрану. Для каждого из этих экранов я добавил плавающий нижний колонтитул, который позволяет пользователям видеть, где они находятся в этом конкретном потоке, и прыгать по мере необходимости”. Сервис называется flowcharts
Кстати, Invision говорит, что тоже сейчас пилит подобный функционал.
Swapnil Borkar делится своим забавным результатом в Freehand для целевой страницы Lyearn
По-настоящему чистая работа от Shojol Islam. Этот wireframe предназначен для платформы REPTO
UX-дизайнер Jovan Belic использует slick-анимацию для презентации своего wireframe
Monica Galvan показывает нам сравнение бумажного wireframe и wireframe, сделанного в Sketch.
