Чем раньше вы возьметесь за создание каркаса, тем лучше. (Конечно, не забывайте про здравый смысл.) У разных проектов разные потоки работ, но в целом рекомендуем наметить первый каркас либо на вводном этапе жизненного цикла, либо на стадии планирования.
На вводном этапе проекта целесообразно составить каркас низкой точности. Напомним, что вводная фаза (или «инициация») — это время экспериментов: вы задумали создать сайт или приложение, но еще не решили, как он будет выглядеть. Каркас низкой точности не отнимет много времени и сил, а потому идеально подойдет для мозгового штурма. Подготовив исходные идеи, вы сможете отправить их заказчику и другим участникам проекта, чтобы собрать комментарии и вновь вернуться к поиску вариантов.
С переходом проекта в фазу планирования стоит всерьез задуматься о создании каркасов средней и высокой точности. На этом этапе дизайн вашего сайта или приложения приобретет более конкретные очертания, а на следующей фазе (исполнение) вам понадобятся еще более солидные каркасы.
Таким образом, вместе с развитием проекта в течение первых двух фаз будет развиваться и ваш каркас, постепенно обрастая деталями и приобретая все более лощеный вид. К моменту передачи проекта разработчикам (фаза исполнения) у вас на руках должен быть готовый каркас.
Составляющие каркаса
На поверхности каркасы выглядят просто. Эстетики в них, мягко говоря, мало. Но отчасти именно в этом и кроется их практичность. При создании сайта или приложения велик соблазн ворваться в мир шрифтов и цветовых наборов, толком не продумав, как будет работать интерфейс. Каркас не даст вам отвлечься на эстетические тонкости и заставит сфокусировать внимание на трех китах дизайна — информации, навигации и интерфейсе.
Информационный дизайн
Пользуясь вашим приложением или сайтом, люди непрерывно получают информацию: какой теме посвящен сайт? как с ним можно взаимодействовать? с какой целью он создан? Прием информации происходит на автомате и в основном на подсознательном уровне. Задача дизайнера — поспособствовать этому процессу, то есть грамотно выбрать способ подачи информации на странице.
Что это означает на практике?
Предположим, ваш сайт обеспечивает услуги мессенджера, а подавляющее большинство заходящих на него людей можно отнести к одной из двух категорий — уже знакомые с вами пользователи и новые посетители. «Старые знакомые», скорее всего, захотят выполнить вход, а новички — зарегистрироваться или просто подробнее узнать о ваших услугах. Поэтому при создании домашней страницы нужно учитывать интересы и тех, и других и дать обеим группам достаточно информации для достижения желаемого результата. Возможно, эта информация появится на сайте в виде кнопок — для регистрации, входа и чтения подробностей. Суть информационного дизайна как раз заключается в том, чтобы решить, какую информацию предоставить пользователям и куда ее поместить.
Навигационный дизайн
Наверное, каждому хотя бы раз приходилось тратить неоправданно много времени на поиски обычного меню настроек. В какой-то момент наступает осознание, что сайт водит тебя по кругу: вроде бы вот-вот должна открыться «Информация об учетной записи», а выходишь почему-то в лучшем случае на домашнюю страницу, а в худшем — на ошибку 404. В общем, вы поняли суть этой истории: плохая навигация встречается на каждом шагу.
Как уже понятно из названия, навигационный дизайн диктует, как пользователь будет перемещаться по вашему приложению или сайту. Обычно с каждой отдельной страницы можно попасть еще на N-ное число страниц. Вот только пользователь об этом не узнает, если вы сами ему не расскажете. Выпадающие меню, кликабельные ссылки и полосы прокрутки — всё это примеры визуальных элементов, которые помогут вашим пользователям не заблудиться на сайте.
Дизайн интерфейса
Дизайн интерфейса сводит воедино всё — информацию, навигацию и все остальные части каркаса. Оба предыдущих вида дизайна — информационный и навигационный — опираются на графические элементы (кнопки, меню и так далее), тогда как дизайн интерфейса определяет, как эти элементы будут встроены в общую структуру сайта или приложения, включая текстовые блоки, изображения хедера, боковые панели и так далее.
Как создать каркас
Опираясь на теорию, полученную в данном разделе, самое время приступить к практике. Эта инструкция поможет вам создать собственный каркас:
1. Составьте план
Войти в систему через GoogleGoogle
Войти в систему через MicrosoftMicrosoft
Войти в систему через SlackSlack