PINGDOM_CANARY_STRING
Lucidspark LogoЧто такое каркас сайта?
    Бесплатная регистрация
Diagram

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

Какие у вас потребности в белой доске?

Я хочу сделать свою собственную доску в Lucidspark.

содержание

Читается за 14 мин.

Хотите сделать доску самостоятельно? Попробуйте Lucidspark. Это быстро, легко и совершенно бесплатно.

Бесплатная регистрация

Что такое каркас сайта или приложения?

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

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

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

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

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

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

Разновидности каркасов

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

Каркасы низкой точности

каркас низкой точности

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

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

Каркасы средней точности

каркасы средней точности

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

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

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

Каркасы высокой точности

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

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

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

Чем каркас отличается от макета

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

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

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

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

Как каркасы применяются в UX-дизайне?

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

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

Что это означает на практике? В процессе создания дизайна UX-команда обращает внимание на разные аспекты пользовательского поведения, например: как пользователи попадают на страницу? есть ли всплывающие окна? а всплывающие меню? если да, то где они находятся?

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

Бесплатная регистрация

Когда приступить к созданию каркаса?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


каркас

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

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

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

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


каркас

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

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

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

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


каркас

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

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

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

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


каркас

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

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

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

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


каркас

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

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

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


Pусский
EnglishFrançaisDeutsch日本語PortuguêsEspañolNederlandsPусскийItaliano
КонфиденциальностьЮриспруденция
© 2021 Lucid Software Inc.