Використовуйте Firefox для створення простих макетів
Олівець - це інструмент для створення каркасу, який ми можемо використовувати, щоб накреслити макет інтерфейсу користувача нашої програми. Найкраще в Pencil - легкий, простий у використанні і тісно інтегрований з Firefox. Крім того, все це безкоштовне додаток з відкритим кодом! Наприкінці статті ми надамо вам просту демонстрацію, як використовувати Pencil для створення каркасу Brizzly.
Чому ми створюємо каркаси ?
Каркас - це ескіз ідеї верстки сторінки. Каркас фокусується на інформаційному оформленні сторінки, щоб гарантувати, що дизайн вписується в те, що потрібно користувачеві. Каркас зазвичай складається з різних форм (наприклад, коробок, овалів і діамантів) для представлення змісту, функціональних і навігаційних елементів. Ці форми відображають їхнє розташування на сторінці.
Спочатку це може здатися марною тратою часу, створюючи грубі ескізи сторінки. Дротовий каркас важливий для того, щоб користувачі могли зосередитися на важливості на вашій сторінці. Створення грубого ескізу сторінки, без елегантних візуальних елементів, перекласти увагу користувача на важливі елементи, такі як розмір, макет і розміщення компонентів сторінки. Ми почнемо краще розуміти, чого клієнт дійсно хоче і потребує від програмного забезпечення, коли користувач починає фокусуватися на важливих елементах сторінки. Створення дротового кадру дозволить вам і вашим користувачам ефективно співпрацювати та рано виявити потенційну проблему дизайну.
Початок роботи з олівцем
Завантажте Олівець з сторінки додавання олівця. Після встановлення олівця доступ до нього можна отримати за допомогою пункту "Інструменти"> "Намальовування олівців".
Так виглядає Брізлі. Це досить прохолодне веб-додаток, що об'єднує ваші Facebook і Twitter в межах однієї сторінки.
Це кінцевий результат каркаса. Основними фігурами в цьому каркасі є прямокутники, текстові поля та вкладки. Наступний розділ статті дасть простий приклад створення кожної форми.
Створення прямокутника
Першим кроком створення форми каркасу є перетягування форми з меню "Колекції форм" на полотно.
Змініть розмір прямокутника на відповідну ширину і висоту.
Ми можемо налаштувати текст, межу та колір тла будь-якої форми в олівці. Клацніть правою кнопкою миші на прямокутнику і виберіть "Властивості", щоб відкрити вікна Властивості. Це екран властивостей фону. Встановіть колір тла прямокутника на білий (#FFFFFF).
Перейдіть на вкладку "Кордон" і змініть властивості кордону. Встановіть колір кордону на чорний (# 000000) і змініть вагу кордону на 1.
Екран властивостей тексту дозволяє налаштувати тип шрифту, розмір, стиль, вагу, колір, яскравість і непрозорість тексту.
Створення вкладок
Вкладки будинку, чернетки, малюнка - це три вкладки, розташовані один над одним. Перетягніть три панелі "Tabs" у прямокутник. Змініть розмір кожної вкладки, щоб кожна вкладка відображалася поруч.
Відкрийте екран властивостей тексту, щоб налаштувати колір шрифту на вкладці "Зображення" та "Чернетка". Встановіть на сірий (# 989898).
Створення тексту
Перетягніть форму "Текст" на полотно, щоб створити кожне меню. Ми можемо налаштувати вигляд тексту за допомогою вікна властивостей тексту.
Корисні поради щодо зміни кольору
Колір є однією з найважливіших складових у наданні приємного каркасу. Найбільш точним способом зміни кольору фігури є визначення коду HTML кольору. Визначення HTML-коду для певного кольору може бути важким. Ми можемо використовувати HTML колір шпаргалку з w3cschools.com шукати правильний код HTML для конкретного кольору.
Нам також подобається використовувати colorzilla для вибору кольорів з екрану та використання його в олівці. Натисніть на піктограму крапельниці в нижньому лівому куті Firefox, щоб вибрати колір на екрані. Ми також можемо відкрити вибір кольорів ColorZilla, двічі клацнувши піктограму краплі ока. Просто скопіюйте вставити код Hex в кольоровий HTML-код Pencil.
Висновок
Олівець простий у використанні інструмент каркаса. Інтеграція олівця з Firefox дозволяє нам використовувати інший плагін Firefox для створення кращого каркасу
Посилання
Завантажити Олівець
Завантажити Colorzilla
W3C HTML Колір Чит лист
