Что такое каркасный веб-дизайн?

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

Если вы подумываете о создании веб-сайта, вы можете быстро и легко создать его каркас. Для этого вам даже не нужно быть графическим дизайнером.
Для начала все, что вам понадобится, это карандаш и бумага. (Или iPad и iPencil.)

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

Вот несколько шагов, которые мы рассмотрим в этой статье:

  • Планирование карты сайта;
  • Создание каркаса домашней страницы;
  • Использование разметки в каркасах;
  • Компоненты каркаса (заголовок, меню, нижний колонтитул);
  • Каркас страницы функций и страницы контактов;
  • Мобильные адаптивные каркасы;
  • Набросок карты сайта.

Набросок карты сайта

Шаг №1: Планирование карты сайта

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

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

При этом, как только ваш веб-сайт или приложение станут больше и сложнее, вам понадобится карта сайта.

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

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

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

Создание каркаса главной страницы

Шаг №2: Создание каркаса домашней страницы

Мы собираемся создать нашу первую каркасную страницу. Если вы раньше не создавали вайрфреймы, процесс довольно прост. Каждый аспект веб-сайта представлен в форме или простой графике, например:

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

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

Это также полезно для организации каждого раздела в прямоугольники, которые мы позже можем скопировать и вставить на другие страницы (особенно для верхнего и нижнего колонтитула).

Также создадим еще один раздел для знакомства с компанией (О нас) и раздел спонсоров (с логотипами и изображениями наших спонсоров).

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

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

Шаг 3: Использование разметки в каркасах

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

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

Обратите внимание, что разметка не должна буквально объяснять, каким будет контент в конечном итоге. Таким образом, вместо того, чтобы вставлять фактический «Пример заголовка вступления», вы можете пометить заголовок как «Заголовок вступления».

Шаг 4: добавьте другие компоненты каркаса, такие как заголовок, меню и нижний колонтитул

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

Это позволяет вашему каркасному дизайну оставаться последовательным. Такие инструменты, как Figma или XD позволят вам создавать компоненты ресурсов, которые вы также можете копировать и вставлять в свой дизайн. Вы даже можете настроить их для динамического обновления других частей вашего каркаса при изменении корневого компонента.

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

Шаг No 5: Страница демонстрации и Страница контактов

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

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

Контактная форма будет расположена ниже (без рамки), а также карта Google с правой стороны.

Шаг No 6. Создайте мобильный адаптивный каркас

Хороший каркас для сайта не может существовать без мобильной версии. Если у вас больше свободного времени, вы также можете создать планшетную версию адаптивного каркаса.

В нашем примере мы поэтапно строим каркас дизайна домашней страницы. Большинство строк и столбцов свернуто. А поскольку мы находимся в мобильном окне просмотра, многие изображения, тексты и блоки уменьшаются в размере. Из-за этого некоторые разделы могут иметь ту же высоту, что и ПК версии. С другой стороны, некоторые разделы с большим количеством изображений (например, раздел спонсоров) могут иметь гораздо большую высоту прокрутки.

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

Вывод

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

Каркасное построение сайта - идеальный подход, поскольку он занимает гораздо меньше времени, чем создание полноценного прототипа пользовательского интерфейса дизайнером.

Удачного каркасного моделирования.

Комментарии ()

    Написать комментарий