Что такое каркас сайта?

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

На вводном этапе проекта целесообразно составить каркас низкой точности. Напомним, что вводная фаза (или «инициация») — это время экспериментов: вы задумали создать сайт или приложение, но еще не решили, как он будет выглядеть. Каркас низкой точности не отнимет много времени и сил, а потому идеально подойдет для мозгового штурма. Подготовив исходные идеи, вы сможете отправить их заказчику и другим участникам проекта, чтобы собрать комментарии и вновь вернуться к поиску вариантов.

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

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

Составляющие каркаса

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

Информационный дизайн

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

Что это означает на практике?

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

Навигационный дизайн

Наверное, каждому хотя бы раз приходилось тратить неоправданно много времени на поиски обычного меню настроек. В какой-то момент наступает осознание, что сайт водит тебя по кругу: вроде бы вот-вот должна открыться «Информация об учетной записи», а выходишь почему-то в лучшем случае на домашнюю страницу, а в худшем — на ошибку 404. В общем, вы поняли суть этой истории: плохая навигация встречается на каждом шагу.

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

Дизайн интерфейса

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

Как создать каркас

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

1. Составьте план

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

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

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

2. Добавьте простейшие фигуры

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

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

Повторите этот процесс в каждом каркасе, который требуется вашему проекту.

3. Добавьте кнопки и ссылки на другие каркасы

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

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

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

4. Соберите отзывы и внесите правки

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

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

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

5. Добавьте детали

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

6. Поделитесь проделанной работой

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