Каркасы и как с ними работать
Каркасы и как с ними работать
26 февраля 2017

Каркасы имеют большое значение для создания хорошего сайта. Почему стоит их использовать и как это правильно делать?

Каркасы имеют большое значение для создания хорошего сайта. Аналогично с тем, как архитекторы представляют планы, прежде чем строить дом, бизнес-аналитики используют каркасы для визуальной поддержки бизнес-правил. Разработчики используют каркасы для того, чтобы получить четкую картину элементов, для которых необходимо прописать код.

Использование каркасов

Почему стоит использовать каркасы?

Для создания удачного сайта, все дизайнеры используют каркасы. Некоторые думают, что это отнимает много времени и создает больше работы. На самом, создание каркаса здорово экономит время, так как это позволяет увидеть все недочеты проекта еще на начальных стадиях его разработки.

Иными словами, каркас – это проект вашего сайта. Основная цель состоит в том, чтобы показать клиенту, как сайт будет структурирован до начала его разработки.

Что произойдет, если я не буду использовать каркасы?

Давайте предположим, Вы начали разработку сайта не с каркаса. Вместо этого, прыгнули в Photoshop и создали хороший сайт. Клиенту в целом понравилось, но ему хочется, чтобы элемент «Х» находится на левой стороне. Кроме того, ему не нравится панель навигации, над которой Вы работали весь уик-энд. Нужно сделать корректировки, переместить каждый элемент, что требует много работы и времени. Проблема в том, что Вы начали не с того.

Представляя простую структуру сайта, можно быстро изменить любое место положение элемента, чтобы удовлетворить потребности Вашего клиента. Уточните, что именно должно быть на разных страницах Вашего сайта, даже если это будет быстрый набросок на черновик.

Каркасы, прототипы, макеты

Прежде чем погрузится в детали, важно разобраться в основных терминах, которые не нужно путать между собой. Каркасы, макеты и ​​прототипы часто используются как синонимы, но это не так.

Каркас

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

Прототип

Прототип представляет собой более подробное интерактивное представление конечного продукта. Прототип подразумевает создание модели сайта перед началом его создания.

Макет

Макет представляет собой дизайн сайта, в котором фирменный стиль применяется через цвет, типографику и визуальный стиль.

Элементы каркаса

Для того, чтобы создать правильный каркас, важно продумать все основные элементы на каждой странице: верхний и нижний колонтитулы, боковые панели, области контента, панель навигации, виджеты, кнопки.

После того, как у Вас появился список элементов, можно приступать к созданию каркаса.

Стоить продумать до мелочей какими будут составляющие каркаса:

Содержание

Что будет отображаться на этой странице?

Структура

Как элементы будут на этой странице?

Иерархия

Как эти элементы будут отображаться: их позиционирование, маркировка и размер?

Функциональность

Как эти элементы будут работать вместе?

Поведение

Как эти элементы взаимодействуют с пользователем?

Что не включатся в каркас

Графические элементы

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

Случайный текст

Фиктивный текст не должен быть использован в каркасах. Для ясности используйте реальный текст.

Фактический дизайн

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

Виды каркасов

Существует два типа каркаса:

Эскиз

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

Цифровой

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

Каркасные инструменты

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

Наиболее популярными инструментами, которые помогут Вам создать хороший каркас для своего сайта являются:

Illustrator и InDesign

Программа Illustrator используется для рисования, а INDESIGN – для разметки страниц и документации. Illustrator не поддерживает работу в мультистраничном режиме, но ее поддерживает INDESIGN. Также, INDESIGN не предлагает чертежи и библиотеки иконок, что компенсирует Illustrator. Таким образом, объединение в работе этих двух программ позволяет получить отличный инструмент для разработки каркасов.

Balsamiq

Программа Balsamiq Mockups специализируется на создании отрывочных каркасов. Она проста в использовании, интуитивно понятна. Используя такую программу Вы можете приступить к работе в кратчайшие сроки. Программа платна, но Вы можете использовать для работы бесплатную пробную версию.

Wireframe.cc

Программа Wireframe.cc является очень простым инструментом для создания каркасов сайтов и приложений. Она также имеет 7-дневную бесплатную пробную версию.

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

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

Получи доступ к мастер-классам топовых спикеров и базе полезных материалов


Читайте также
Настройки, направляющие, модульная сетка - Секреты веб-дизайна 1-2Уровень сложности:
1. Начинающий
2. Любитель
Настройки, направляющие, модульная сетка - Секреты веб-дизайна

Вступительный урок по веб-дизайну в котором автор рассказывает про настройки, направляющие и модульную сетку.

28.02 0
Почему я бросил работу своей мечты в веб-дизайне?
Почему я бросил работу своей мечты в веб-дизайне?

Что толкает людей на то, чтобы бросить работу в компании, на которую ушло так много времени и усилий?

26.02 0
Тренды веб-дизайна 2017 года
Тренды веб-дизайна 2017 года

Наша команда обращает пристальное внимание на все изменения в мире дизайна. Это помогает всегда держать вас в курсе новостей и новинок этой сферы.

26.02 0
Специфика работы full-stack designer
Специфика работы full-stack designer

Кто такой full-stack дизайнер и в чём заключается специфика его работы? За что full-stack дизайнер несёт ответственность в проекте.

26.02 0
Комментарии

×
Подписка на новости Skillsup

Заполните поля, чтобы получать новости о дизайне от Skillsup,
обещаем не тревожить чаще 2-х раз в неделю.
Если передумаете — во всех письмах будет ссылка на отписку.