Научете се да използвате прости телени мрежи, за да започнете дизайна си
Web wireframe е прост визуален наръчник, който ще ви покаже как изглежда една уеб страница . Тя предлага структурата на страница , без да използва графики или текст. Дълговата структура на уебсайта ще покаже цялата структура на сайта - включително кои страници се свързват с нея.
Уеб кадрите за уеб са чудесен начин да започнете дизайнерската си работа. И докато е възможно да се създадат сложни телени кадри с огромно количество детайли, планирането може да започне със салфетка и писалка. Ключът към създаването на добри телени рамки е да оставят всички визуални елементи. Използвайте полета и редове, за да представяте снимки и текст.
Неща, които да включите в wireframe на уеб страница:
- кутии за първични графични елементи
- поставяне на заглавия и подзаглавия
- опростена структура на оформлението
- призиви за действие
- текстови блокове
Как да създадем проста уеб скелет
Създайте рамка от уеб страници, като използвате всякакви остатъци хартия, които имате. Ето как го правя:
- Начертайте голям правоъгълник - това може да представлява цялата страница или само видимата част. Обикновено започвам с видимата част и след това я разширявам така, че да включва елементи, които ще бъдат под гънката.
- Скицирайте оформлението - това са 2 колони, 3 колони?
- Добавете в графа графиката на заглавките - Нарисувайте над колоните си, ако искате те да са едно заглавие над колоните или просто да ги добавите там, където искате.
- Напишете "заглавие", където искате заглавието на H1 да бъде.
- Напишете "Под-глава", където искате H2 и по-ниски заглавия да бъдат. Помага ви, ако ги направите пропорционални - h2 по-малки от h1, h3 по-малки от h2 и т.н.
- Добавете в кутии за други изображения
- Добавяне в навигацията. Ако планирате раздели, просто нарисувайте кутии и напишете "навигация" отгоре. Или поставете списъци с отметки в графите, където искате навигацията. Не пишете съдържанието. Просто напишете "навигация" или използвайте линия, за да представяте текст.
- Добавете допълнителни елементи към страницата - идентифицирайте какво представляват с текста, но не използвайте действителния текст на съдържанието. Ако например искате бутон за повикване в долния десен ъгъл, поставете там кутия и го маркирайте като "призоваване към действие". Не пишете "Купете сега!" в това поле.
След като веднъж сте написали простата си рамка и не трябва да ви отнеме повече от 15 минути, за да я нарисувате, покажете го на някой друг. Попитайте ги дали липсва нещо и за други обратни връзки. Въз основа на това, което те казват, можете да напишете друга рамка или да запазите онази, която имате.
Защо хартиените телени мрежи са най-добри за първите чертежи
Въпреки че е възможно да се създават скенери с помощта на програми като Visio, за вашите първоначални сесии за мозъчна атака трябва да се придържате към хартията. Хартията не изглежда постоянна и много хора ще предпочетат, че сте я хвърлили заедно за 5 минути и затова не се колебайте да ви даде добра обратна връзка. Но когато използвате програма за създаване на фантастични фигури с перфектни квадрати и цветове, рискувате да се хванат в самата програма и да прекарвате часове в усъвършенстване на нещо, което никога няма да стане жива.
Хартиените телени рамки са лесни за работа. И ако не ви харесва, просто разбийте хартията, хвърлете я в рециклирането и вземете нов лист.