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

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

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

Читайте также: Разработка прототипов: 5 приложений, которые лучше, чем Photoshop

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

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

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

Эти определения не высечены на камне, некоторые дизайнеры могут иметь собственную терминологию и могут не согласиться с моей точной формулировкой. Но так я обычно их описывал, и именно так многие дизайнеры понимают эти термины лучше всего.
ОБРАЗ: Ойкун ЙилмазТак что же вы должны делать с этими ранними концептуальными работами? Они действительно необходимы? Я бы сказал, что создание прототипов не всегда необходимо, но это очень хорошая идея, особенно для разработки приложений со сложными взаимодействиями.

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

Читайте также: десять каркасных комплектов, которые вы можете скачать бесплатно

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

Используйте каркасный дизайн в качестве руководства, чтобы помочь вам найти лучшую стратегию для достижения цели (ий) веб-сайта. Это, вероятно, не произойдет на первом каркасе, поэтому будьте готовы набросать много разных идей,
ОБРАЗ: Ойкун ЙилмазИщите другие подобные сайты и запишите их лучшие функции. Проанализируйте, как организован контент и как вы перемещаетесь по каждой странице.

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

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

Читайте также: 20 книг по дизайну для рисования эскизов, типографий и новых идей

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

Эскизные планшеты с точечной сеткой – лучший способ пойти, если вы хотите очистить идею и придать ей больше структуры. Сетка помогает оценить расстояния между элементами на странице и создать своего рода симметрию в каркасе.
ОБРАЗ: Ойкун ЙилмазЕсть много отличных продуктов, если вы хотите начать каркас на бумаге, например, Rhodia Dot Pad поставляется в различных размерах для повседневного использования. Он поставляется только с 80 страницами, но это довольно типично для большинства сеточных альбомов.

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

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

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

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

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

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

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

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

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

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

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

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

Рекомендуемое чтение: полезные инструменты для создания каркасов и создания прототипов

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

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

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