Най-добри ресурси за скициране на грид-базирани Wireframes

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

Аз съм фен на традиционните хартия и молив с допълнителни инструменти, ако е необходимо. Но Цифрови кабелни рамки също е голям, и това е жизнеспособна опция за съвременни дизайнери. В тази статия бих искал да споделя най-добрите ресурси за двете техники, за да ви помогна да създадете свои собствени мрежови интерфейси на UI.

Ранното концептуализиране на UI / UX

Нека започнем с изясняване на различията между a телена рамка и a прототип. Тези две думи често се използват взаимозаменяемо, защото се отнасят до един и същ процес.

А телена рамка е единична статична скица на потребителския интерфейс на уеб страница или приложение. Може да има извиквания, които да обяснят текста на бутоните, полетата, размерите на елементите или дори анимациите. Но кабелите са просто груби чертежи за отделни страници.

По същия начин: a прототип е като a диаграма, показваща как различните страници се свързват заедно. Затова прототипът свързва жични рамки, за да покаже как различните бутони или връзки трябва да водят към други страници.

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

И така, какво точно трябва да направите с тези ранни концептуални парчета? Наистина ли са необходими? Бих казал, че прототипирането не винаги е необходимо, но е много добра идея, особено за проектиране на приложения със сложни взаимодействия.

Но безжична рамка винаги е добра идея за всеки нов проект. Тя ви помага фокусирайте се върху общата картина без да се притеснявате за подробности. Вие получавате представа за това как е изработена цялостната страница и това е безценно, когато проектирате конкретно оформление.

Цели за Wireframing

Всеки път, когато стартирате нов проект, трябва да помислите това, което се опитвате да решите. Всеки сайт е изграден с определена цел. Много сайтове имат дори няколко цели, където някои цели са по-важни от други.

Използвайте wireframing като ръководство, което ще ви помогне да намерите най-добрата стратегия улавяне на целта (ите) на даден уебсайт. Това вероятно няма да се случи на първата рамка, затова бъдете готови скицирайте много различни идеи.

Потърсете други подобни сайтове и напишете най-добрите им характеристики. Анализирайте как е организирано съдържанието и как се движите през всяка страница.

Помислете за кабелни рамки от интерактивна гледна точка. Това не са само хубави снимки. Те са представяния на дигитални интерфейси и вие искате да си скицирате идеите си с това предвид.

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

Сетки за скици

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

Скичкоподемни площадки са най-добрият начин да отидете, ако искате почисти идеята, и му придават по-голяма структура. Решетката ви помага оценява разстоянията между елементите на страницата и създайте нещо като симетрия в рамката.

Има много страхотни продукти там, ако искате започнете с теглене на хартия, например подложката Rhodia Dot Pad се предлага в различни размери за ежедневна употреба. Той идва само с 80 страници, но това е доста типично за повечето скицници.

Друг много готин и персонализиран продукт е Dotgrid. Всички предмети на Dotgrid са по-скъпи от книгите на Rhodia, но те идват с повече материали и дизайни по поръчка.

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

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

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

Тези отзивчиви дизайнерски подложки също имат 50 листа общо 100 страници, но всяка страница има четири различни реакционни решетки представящи различни точки на прекъсване в отзивчивия дизайн: настолен компютър, лаптоп, таблет и смартфон.

Въпреки че дизайнът е мек в сравнение с книгите Dotgrid, никой друг не е считал отзивчивите скицници за уеб дизайнери. Ако сте в това нещо, тогава си струва да поръчате един за тест драйв.

Ако наистина сте в ръчно изработени неща, и не искате да харчите пари, можете също отпечатайте страниците на вашата мрежа с интерфейсна скица. Този безплатен сайт предлага различни шаблони на мрежата които можете да отпечатате и да използвате за ръчно изработени рамки.

Решетките се доставят с формат А4 и САЩ за различни стилове хартия за принтери. Можете да избирате от много опции, като например шаблони за уеб браузър в пълен размер или различни екрани на iPhone.

Всички тези опции са страхотни и си заслужава да проучите, ако искате скициране на молив. Хартията е една от най-лесните средства за бързо намиране на нови идеи, така че често е предпочитаният избор дори от дизайнерите на потребителския интерфейс.

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

Има толкова много чудесни програми, които трудно могат да бъдат обхванати, без да рискуват парализата на анализите, затова сега ще се съсредоточим върху някои от най-добрите възможности за базирано на мрежата тел.

Първо, бих искал да спомена, че можете да използвате Adobe инструменти като Illustrator създайте свои собствени wireframes. Това не е част от работния процес на всеки, а Illustrator със сигурност не е свободен. Но ако вече работите с Adobe Creative Cloud, това може да е добро място за започване.

1. Moqups

Moqups е един от най-добрите онлайн инструменти за wireframing. Работите с визуален редактор и библиотека с активи, които да плъзгате и пускате по цялата страница.

Всеки нов проект на Moqups има предварително определена мрежа, и използва ярки лилави линии, за да ви помогне да прикачите елементи към изравняване. Това е чудесен уеб инструмент, който прави проектирането с мрежа толкова по-лесно.

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

2. Решетка Папр

Уеб приложението Grid Papr е напълно безплатно и предлага както публични, така и частни профили за вашите кабелни мрежи. Можете да създадете име за проекта си и да получите свой собствен уникален URL адрес за основната рамка, която можете да редактирате от всеки компютър.

Всеки нов проводник идва с мрежа което ви позволява да изпълнявате snap-to-grid за всички елементи. Характеристиките са прости, но те са достатъчни за създайте lo-fi wireframe за минути. Просто плъзнете каквото искате върху страницата и следвайте решетката, за да създадете звездния каркас.

3. Wireframe.cc

Wireframe.cc е един от най-простите и най-минимални инструменти, които можете да използвате за wireframing. Той разполага с a интерфейс без смущения с предварително изградена мрежа и организирани ленти с инструменти. Просто кликнете и плъзнете, за да създадете нови елементи на платното. Можете също да запазвате и споделяте работата си.

Това е още един инструмент, който се предлага безплатно с допълнителни планове. Всеки план се таксува месечно, така че е много подобен на Moqups в ценовата структура. Безплатният инструмент може да се използва от всеки компютър без акаунт.

4. Псевда

Mockingbird е още една чудесна възможност, която предлага много повече възможности, отколкото повечето инструменти за тестване. Можете да започнете безплатно, но опитът е ограничен до 7 дни. Това може да бъде досадно за някои потребители, но инструментът е наистина невероятен и работи във всички браузъри.

Mockingbird има безкрайна библиотека от елементи на потребителския интерфейс, като например табове, акордеони, падащи менюта, видео плейъри и обикновени текстови връзки. Решетката по подразбиране използва мрежата 960gs, но можете да избирате 12, 16 и 24 колони.

Заключителни думи

Независимо дали избирате традиционна или цифрова тел, тя винаги е за качество на продукцията. Има много какво да научите, когато правите този вид работа, така че намерете каквото и да е средство, което се чувства най-удобно за вас.

Придвижването напред е най-доброто просто започнете да тествате. Получете усещане за това, което харесвате най-доброто (хартия или цифрова), и го направете своя собствена. Ресурсите в тази статия трябва да ви дадат повече от достатъчно, за да започнете работа с вашите цифрови интерфейси.

(Снимка на корицата на Ойкун Йълмаз)