Лучшие ресурсы для создания каркасов на основе сетки

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

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

Ранняя UI / UX Концептуализация

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

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

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

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

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

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

Цели для каркасного

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

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

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

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

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

Сетка Sketchpads

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

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

Есть много отличных продуктов, если вы хотите начать каркас на бумаге, например, Rhodia Dot Pad выпускается в различных размерах для повседневного использования. Он поставляется только с 80 страницами, но это довольно типично для большинства сеточных альбомов..

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

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

Несколько других альбомов с точечными сетками, которые я хочу упомянуть, включают Behance Dot Grid, которая в твердом переплете и спиральная, хотя она содержит только 50 листов бумаги.

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

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

Хотя дизайн скромнее по сравнению с книгами Dotgrid, никто не рассматривал адаптивные альбомы для веб-дизайнеров. Если вы любите подобные вещи, то стоит заказать один для тест-драйва..

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

Сетки поставляются в размерах А4 и США для бумаги разных типов. Вы можете выбрать один из множества вариантов, например, шаблоны для полноразмерного веб-браузера или разные экраны iPhone..

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

Цифровые инструменты и веб-приложения

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

Во-первых, я хотел бы отметить, что вы можете использовать инструменты Adobe, такие как Illustrator, для создать свои собственные каркасы. Это не часть рабочего процесса каждого, и Illustrator, безусловно, не является бесплатным. Но если вы уже работаете с Adobe Creative Cloud, то это может быть хорошим началом.

1. Мопс

Moqups - один из лучших онлайн инструментов для Wireframing. Вы работаете с визуальным редактором и библиотекой ресурсов для перетаскивания по всей странице.

Каждый новый проект Moqups имеет предопределенная сетка, и использует яркие фиолетовые линии, чтобы помочь вам выровнять элементы в выравнивание. Это отличный веб-инструмент, который значительно упрощает проектирование с использованием сетки..

Сайт работает по умолчанию на бесплатном плане, который ограничивает пользователя до 300 объектов страницы. На сайте есть варианты премиум-класса, но уплата ежемесячной платы может быть более раздражающей, чем просто использование инструментов Adobe или одноразовая покупка Sketch..

2. Сетка папр

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

Каждый новый каркас поставляется с сеткой который позволяет выполнять привязку к сетке для всех элементов. Функции просты, но их достаточно, чтобы создать каркас lo-fi за считанные минуты. Просто перетащите все, что вы хотите на страницу, и следуйте сетке, чтобы создать звездный каркас.

3. Wireframe.cc

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

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

4. Пересмешник

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

Mockingbird имеет бесконечную библиотеку элементов пользовательского интерфейса, таких как вкладки, аккордеоны, выпадающие меню, видеоплееры и простые текстовые ссылки. Сетка по умолчанию использует сетку 960gs, но вы можете выбрать 12, 16 и 24 столбца.

Заключительные слова

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

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

(Фото на обложке Ойкун Йылмаз)