Използвайте Firefox, за да създадете прости макети

Моливът е инструмент за тестване, който можем да използваме, за да очертаем макет на потребителския интерфейс на нашето приложение. Голямото нещо за Pencil е, че е лек, лесен за използване и тясно интегриран с Firefox. Освен всичко това е безплатно приложение с отворен код! В края на статията ще ви дадем проста демонстрация за това как да използвате Pencil, за да създадете Brizzly подобен тест.

Защо създаваме wireframes ?

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

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

Първи стъпки с молив

Изтеглете молив от Pencil's add ons page. След като инсталирате молив, той е достъпен от „Инструменти“> „Нанасяне на молив“.

Ето как изглежда Бризли. Това е доста хладно уеб приложение, което събира вашите Facebook и Twitter в рамките на една страница.

Това е крайният резултат от телената рамка. Основните форми в тази рамка са правоъгълници, текстови полета и раздели. Следващият раздел на статията ще даде прост пример как да създадете всяка форма.

Създаване на правоъгълник

Първата стъпка при създаването на формата на телена рамка е да плъзнете форма от менюто „Колекции от форми“ върху платното.

Преоразмерете правоъгълника до подходяща ширина и височина.

Можем да персонализираме текста, границата и цвета на фона на всякаква форма в Pencil. Кликнете с десния бутон върху правоъгълника и изберете "Свойства", за да отворите прозорците Свойства. Това е екранът със свойства на фона. Задайте белия цвят на фона на правоъгълника (#FFFFFF).

Кликнете върху раздела „Граница“ и коригирайте свойствата на границата. Задайте цвета на рамката на черно (# 000000) и променете теглото на границата на 1.

Екранът със свойства на текста ни позволява да персонализираме вида на шрифта, размера, стила, теглото, цвета, яркостта и непрозрачността на текста.

Създаване на раздели

Разделите в дома, черновата, картината са три раздела, които са подредени един върху друг. Плъзнете три "Tabs Panel" в правоъгълника. Преоразмерете всеки раздел, така че всеки раздел да се показва един до друг.

Отворете екрана със свойства на текста, за да регулирате цвета на шрифта в раздела „Картини“ и „Чернови“. Задайте го на сиво (# 989898).

Създаване на текст

Плъзнете формата „Текст“ върху платното, за да създадете всяко от менюто. Можем да коригираме външния вид на текста, като влезем в прозореца със свойства на текста.

Полезни съвети за промяна на цвета

Цветът е една от най-съществената част в осигуряването на приятен проводник. Най-прецизният начин за промяна на цвета на формата е чрез задаване на HTML кода на цвета. Определянето на HTML кода за даден цвят може да бъде трудно. Можем да използваме HTML листа за цветове от w3cschools.com, за да потърсим правилния HTML код за определен цвят.

Също така обичаме да използваме colorzilla, за да избираме цветове от екрана и да ги използваме в Pencil. Кликнете върху иконата на капкомера в долния ляв ъгъл на Firefox, за да изберете цвят на екрана. Също така можем да отворим цвят на ColorZilla, като кликнем два пъти върху иконата за капки за очи. Просто копирайте поставения Hex код в HTML кода на Pencil.

заключение

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

звена
Свали Pencil
Изтеглете Colorzilla
W3C HTML Color Cheat Sheet