Используйте Firefox для создания простых макетов

Карандаш - это каркасный инструмент, который мы можем использовать для создания макета пользовательского интерфейса нашего приложения. Отличительной особенностью Pencil является то, что он легкий, простой в использовании и тесно интегрирован с Firefox. Кроме того, это бесплатное приложение с открытым исходным кодом! В конце статьи мы дадим вам простую демонстрацию того, как использовать Карандаш для создания каркаса типа Brizzly..

Почему мы создаем каркасы ?

Каркас - это эскиз идеи макета страницы. Каркас фокусируется на информационном дизайне страницы, чтобы гарантировать, что дизайн соответствует потребностям пользователя. Каркас обычно состоит из различных форм (таких как прямоугольники, овалы и ромбы) для представления содержимого, функциональных и навигационных элементов. Эти фигуры отображают их размещение на странице.

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

Начало работы с карандашом

Загрузите Карандаш со страницы дополнений Карандаша. После того, как вы установите Карандаш, он станет доступен в меню «Инструменты»> «Эскиз карандаша»..

Вот как выглядит Brizzly. Это довольно крутое веб-приложение, которое объединяет ваш Facebook и Twitter на одной странице.

Это конечный результат каркаса. Основными фигурами в этом каркасе являются прямоугольники, текстовые поля и вкладки. В следующем разделе статьи приведен простой пример создания каждой фигуры..

Создание прямоугольника

Первым шагом создания формы каркасной рамки является перетаскивание фигуры из меню «Коллекции форм» на холст..

Изменить размер прямоугольника до подходящей ширины и высоты.

Мы можем настроить текст, рамку и цвет фона любой фигуры в Карандаш. Щелкните правой кнопкой мыши по прямоугольнику и выберите «Свойства», чтобы открыть окна свойств. Это экран свойств фона. Установите цвет фона прямоугольника на белый (#FFFFFF).

Перейдите на вкладку «Граница» и настройте свойства границы. Установите цвет границы на черный (# 000000) и измените вес границы на 1.

Экран свойств текста позволяет нам настраивать тип шрифта, размер, стиль, вес, цвет, яркость и прозрачность текста..

Создание вкладок

Вкладки «Домашняя страница», «Черновик» и «Рисунок» представляют собой три вкладки, расположенные друг над другом. Перетащите три панели вкладок в прямоугольник. Измените размер каждой вкладки, чтобы каждая вкладка отображалась рядом.

Откройте экран свойств текста, чтобы настроить цвет шрифта на вкладках «Рисунки» и «Черновик». Установите его на Серый (# 989898).

Создание текста

Перетащите фигуру «Текст» на холст, чтобы создать каждое из меню. Мы можем настроить внешний вид текста, открыв окно свойств текста.

Полезные советы по изменению цвета

Цвет - одна из самых важных частей в создании приятного каркаса. Самый точный способ изменить цвет фигуры - указать HTML-код цвета. Выяснить код HTML для определенного цвета может быть сложно. Мы можем использовать цветную шпаргалку HTML с w3cschools.com, чтобы найти правильный HTML-код для определенного цвета..

Нам также нравится использовать colorzilla, чтобы выбирать цвета с экрана и использовать его в Карандаш. Нажмите на значок пипетки в левом нижнем углу Firefox, чтобы выбрать цвет на экране. Мы также можем открыть палитру цветов ColorZilla, дважды щелкнув значок глазной капли. Просто скопируйте и вставьте шестнадцатеричный код в цветной HTML-код карандаша..

Заключение

Карандаш простой в использовании инструмент для создания каркасов. Интеграция карандашей с Firefox позволяет нам использовать другие плагины Firefox для создания лучшего каркаса

связи
Скачать Карандаш
Скачать Colorzilla
W3C HTML Color шпаргалка