Карандаш - это инструмент для создания макетов, который мы можем использовать для создания наброска пользовательского интерфейса нашего приложения. В Pencil замечательно то, что он легкий, простой в использовании и тесно интегрирован с Firefox. Вдобавок ко всему это бесплатное приложение с открытым исходным кодом! В конце статьи мы покажем вам простую демонстрацию того, как использовать Pencil для создания каркаса, подобного Brizzly.
Зачем мы создаем каркасы?
Каркас - это набросок идеи макета страницы. Каркас фокусируется на информационном дизайне страницы, чтобы гарантировать, что дизайн соответствует потребностям пользователя. Каркас обычно состоит из различных форм (например, прямоугольников, овалов и ромбов) для представления элементов содержимого, функциональности и навигации. Эти фигуры отображают их расположение на странице.
Сначала может показаться пустой тратой времени создание черновых набросков страницы. Каркас важен для того, чтобы ваши пользователи могли сосредоточиться на важном элементе на вашей странице. Создавая грубый набросок страницы без сложных визуальных элементов, переключите внимание пользователя на важные элементы, такие как размер, макет и размещение компонентов вашей страницы. Мы начнем лучше понимать, что клиент действительно хочет и что ему нужно от программного обеспечения, когда пользователь начнет сосредотачиваться на важных элементах страницы. Создание каркаса позволяет вам и вашим пользователям эффективно сотрудничать и выявлять потенциальные проблемы проектирования на раннем этапе.
Начало работы с карандашом
Загрузите Pencil со страницы дополнений Pencil. После установки Pencil он будет доступен из «Инструменты»> «Карандашный набросок».
Так выглядит Бризли. Это довольно крутое веб-приложение, которое объединяет ваши Facebook и Twitter на одной странице.
Это конечный результат проволочного каркаса. Основными формами в этом каркасе являются прямоугольники, текстовые поля и вкладки. В следующем разделе статьи будет приведен простой пример создания каждой формы.
Создание прямоугольника
Первым шагом создания каркасной формы является перетаскивание фигуры из меню «Коллекции фигур» на холст.
Измените размер прямоугольника до подходящей ширины и высоты.
Мы можем настроить текст, границу и цвет фона любой формы в Pencil. Щелкните прямоугольник правой кнопкой мыши и выберите «Свойства», чтобы открыть окна свойств. Это экран свойств фона. Установите белый цвет фона прямоугольника (#FFFFFF).
Щелкните вкладку «Граница» и настройте свойства границы. Установите цвет границы на черный (# 000000) и измените толщину границы на 1.
Экран свойств текста позволяет нам настроить тип шрифта, размер, стиль, вес, цвет, яркость и непрозрачность текста.
Создание вкладок
Вкладки «Главная», «Черновик» и «Изображение» - это три вкладки, которые расположены друг над другом. Перетащите три «панели вкладок» в прямоугольник. Измените размер каждой вкладки, чтобы каждая вкладка отображалась рядом.
Откройте экран свойств текста, чтобы настроить цвет шрифта вкладок «Изображения» и «Черновик». Установите серый (# 989898).
Создание текста
Перетащите фигуру «Текст» на холст, чтобы создать каждое из меню. Мы можем настроить внешний вид текста, открыв окно свойств текста.
Полезные советы по изменению цвета
Цвет - одна из наиболее важных составляющих создания приятного каркаса. Самый точный способ изменить цвет фигуры - указать HTML-код цвета. Определить HTML-код для определенного цвета может быть сложно. Мы можем использовать шпаргалку по цветам HTML с сайта w3cschools.com, чтобы найти правильный HTML-код для определенного цвета.
Нам также нравится использовать colorzilla, чтобы выбирать цвета с экрана и использовать их в Pencil. Щелкните значок пипетки в нижнем левом углу Firefox, чтобы выбрать цвет на экране. Мы также можем открыть палитру цветов ColorZilla, дважды щелкнув значок в виде капли. Просто скопируйте и вставьте шестнадцатеричный код в цветной HTML-код карандаша.
Вывод
Карандаш - простой в использовании инструмент для создания каркасов. Интеграция Pencil с Firefox позволяет нам использовать другой плагин Firefox для создания лучшего каркаса.
Ссылки
Скачать карандаш
Скачать Colorzilla
Шпаргалка W3C HTML Color
