Научете се да използвате телени рамки при създаване на сайт

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

Рамката е като архитектурен проект: трябва да видите всичко в 2D черно и бяло, преди да започнете да строите къщи. Същото е и за дизайна: не можете да започнете да изграждате пиксели на слоя във Photoshop, без да знаете каква е структурата на проекта.

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

Подобно на основата на една сграда, тя трябва да е фундаментално здрава, преди да решите дали да я боядисате със скъпа боя.

Стъпка 1: Вдъхновение

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

Можете също така да използвате страхотното приложение Wirify, което ви позволява да видите wireframe версия на всеки сайт.

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

Стъпка 2: Планиране на процеса

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

Стъпка 3: Избор на инструменти

Axure е един от първите професионални инструменти за wireframe сайтове. Доскоро беше наличен само за Windows.

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

Moqups е невероятно wireframe приложение. Проектът е в процес на разработка

Sketchy Illustrator wireframes - готови скици за създаване на wireframe на сайт

Webpage Wireframe Stencil - набор от елементи за създаване на телени рамки на сайт във формати .ai и .eps

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

Стъпка 4: Използване на мрежата

* Можете да прочетете какво представляват решетките и с какво се хранят в тази статия

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

Първо задайте размера на документа.

Поставете изтегления шаблон на мрежата в документа.

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

Стъпка 5: Определяне на позицията на блоковете

Понякога, в зависимост от предназначението и предназначението на сайта, който проектирате, можете да добавите повече творчески идеи към работата си, но не забравяйте да имате предвид йерархията на информацията. Ето пример за необичаен wireframe на сайт за технологична компания:

Стъпка 6: Дефиниране на информационна йерархия и типография

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

Използването на различни размери на шрифта в началото е чудесен начин за разграничаване на различните нива на информация.

Не се страхувайте да експериментирате на този етап. Може би, когато работите върху рамката по-подробно, ще разберете какви са нейните недостатъци.

Стъпка 7: Детайлиране със скала на сивото

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

Стъпка 8: Черно-бяло оформление

Това е незадължителна стъпка, но можете да я опитате. Добавете повече детайли към вашата рамка. На този етап можете да изберете семейства шрифтове и да определите техните идеални размери.

Стъпка 9: Преобразуване на черно-бялата телена рамка в оформлението на сайта

Както споменахме по-рано, причината много хора да предпочитат да използват Illustrator за създаване на телени рамки е, че можете да експортирате файлове в PSD с редактируеми слоеве:

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

Заключение

Свързани връзки

Помогне

	Задайте въпрос
програми
образование
изпити
компютри
	Безплатно обаждане
	ICQ консултанти
	Skype консултанти
Обща помощ
Как да направите поръчка
Тарифи за доставка
начини за плащане
Ценова листа
Карта на сайта

Най-продавани

	Обучителни курсове "Atlassian JIRA - система за управление на проекти и задачи в предприятието"
	Microsoft Office 365 Home 32-bit/x64. 5 PC/Mac + 5 таблета + 5 телефона. Абонамент за 1 година. Електронен ключ
	Microsoft Windows 10 Professional 32-bit/64-bit. Всички езици. Електронен ключ
	Microsoft Office Home & Student 2019. Всички езици. Електронен ключ
	Курс "Oracle. Програмиране в SQL и PL/SQL"
	Курс "Основи на TOGAF® 9"
	Microsoft Windows Professional 10 Sngl OLP 1 Лиценз без ниво на легализация GetGenuine wCOA (FQC-09481)
	Microsoft Office 365 Personal 32-bit/x64. 1 PC/MAC + 1 таблет + 1 телефон. Всички езици. Абонамент за 1 година. Електронен ключ
	Windows Server 2016 Standard
	Курс "BPMN 2.0 Нотация. Използването му за моделиране на бизнес процеси и тяхното регулиране"
	ESET NOD32 Antivirus Business Edition
	Corel CorelDRAWНачало и усилвател Студентски апартамент X8

За нас

Интернет магазин ITShop.ru предлага широка гама от информационни технологии и софтуерни услуги. Дълги години онлайн магазинът предлага продукти и услуги, насочени към бизнес потребители и професионалисти в областта на информационните технологии. Добрите отзиви от редовни клиенти и високото ниво на специалисти ви позволяват да получите най-добрия резултат при съвместна работа.

---