Какво е Wireframe? Този урок за UX дизайн ще ви покаже.

Първата стъпка към проектирането на уебсайт: го подгответе.

Един добър каркасен кадър може да ви даде визия за цялото оформление и функционалност на вашия уебсайт. Той може да служи и като първи етап от дизайна.

Wireframes ви дават представа за общата структура на страниците и как ще тече навигацията.

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

За да започнете, всичко, от което се нуждаете, е молив и малко хартия. (Или ако искате да получите фантазия, iPad и iPencil, каквито използвам в моя видеоурок по-горе.)

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

Ето няколко стъпки, които ще разгледаме в тази статия (и в придружаващия видео урок):

  1. Планиране на карта на сайта
  2. Създаване на каркас за начална страница
  3. Използване на маркиране в телени рамки
  4. Каркасни компоненти (заглавна част, меню, долен колонтитул)
  5. Качествено изграждане на вашата страница с функции и страница за контакти
  6. Мобилни адаптивни телекомуникации

Стъпка 1: Планиране на Sitemap

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

Повечето малки сайтове може да не се нуждаят от карта на сайта. Те обикновено имат или една-единствена целева страница, или няколко често срещани страници като Характеристики, Информация и Свържете се с нас.

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

Картата на сайта ви предоставя кратък преглед на това къде съществуват елементи и как те се свързват.

В нашия пример ще създадем проста карта на сайта, която ще съдържа само началната страница, страницата с функции и страницата за контакти.

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

Стъпка 2: Създаване на каркас на начална страница

Ще създадем първата ни каркасна страница. Ако досега не сте поставяли рамки, процесът е доста прост. Всеки аспект на уебсайта е представен с форма или проста графика, като например:

  • кутии с диагонални линии през тях за представяне на изображения
  • хоризонтални линии за представяне на абзаци от текст
  • и кръг с L в него, за да представлява вашето лого.

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

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

Нека създадем и друга секция за въведение в компанията (За нас) и секция за спонсори (с лога и изображения на нашите спонсори).

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

Финализираме дизайна с раздел Footer, където добавяме често срещани елементи като формуляр за контакт, информация за контакт и използваме логото отново.

Стъпка # 3: Използване на маркиране в Wireframes

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

В нашия пример нека маркираме началната страница и обозначим всяка част от съдържанието с червен текст.

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

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

Стъпка # 4: Добавете други компоненти на Wireframe като Header, Menu и Footer

След като вече сме създали заглавна и долна колонтитул, можем да ги използваме повторно за допълнителни страници. Ако работите цифрово, можете да копирате и поставите заглавки, долни колонтитули и други повтарящи се елементи в нови каркаси на страници. (И ако използвате само хартия и писалка, винаги можете да използвате самобръсначка и фотокопирна машина, за да постигнете същия ефект.)

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

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

Стъпка # 5: Страница с функции и страница за контакти

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

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

Формулярът за контакт ще бъде разположен отдолу (без контур на полето), както и карта на Google от дясната страна.

Стъпка # 6: Направете мобилна адаптивна рамка

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

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

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

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

Поради това често добавям и допълнителна маркировка, за да покажа кои раздели на настолната версия съответстват на кои отзивчиви еквиваленти за мобилната версия.

Заключение

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

Wireframing е идеалният подход за това, тъй като отнема много по-малко време от това дизайнерът да направи пълен прототип на потребителския интерфейс.

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

Честит каркас.

Надявам се тази статия да ви е харесала. Ако не знаете кой съм, аз съм Адриан от Австралия? Имам малък канал в Twitter и YouTube, така че ако искате да знаете повече за мен или да се насладите на съдържанието ми, проверете ме някога?

  • Youtube: //youtube.com/adriantwarog
  • Twitter: //twitter.com/adrian_twarog