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