Skip to content

Прототипирование в веб-дизайне

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

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

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

Разработка креативных прототипов

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

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

Пример прототипа, созданного в приложении Balsamiq
Пример прототипа, созданного в приложении Balsamiq

Из чего состоит хорошо спроектированный прототип?

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

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

Прототипирование блоками

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

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

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

Не воспринимайте это слишком буквально

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

Совет: помечайте прототипы

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

Рассмотрим поток

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

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

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

Создаем прототип для отзывчивого дизайна

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

Этот совет из выступления Сары Парментер «Responsive Day Out», где Сара объяснила, как она добавляет числа к своим прототипам, которые помогают клиенту понять, как содержимое и элементы могут выстраиваться на маленьком экране. Это действительно полезно, так как это поможет клиенту начать понимать иерархию контента, а также означает, что вы можете начать смотреть на любые возможные подводные камни или проблемы, если учитываете отзывчивый веб-дизайн на ранней стадии проекта. Это может спасти вам много времени позже в проекте.

Приложения и инструменты

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

Графическое ПО (Photoshop и пр)

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

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

Keynote и Powerpoint

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

Balsamiq Mockups

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

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

Полезные ресурсы: UIkits

Используя UIkit (набор элементов пользовательского интерфейса), вам будет проще начать работать над прототипом для различных приложений. Существует широкий спектр таких ресурсов: от полных наборов элементов для Photoshop, до специальных наборов для Keynote. Вот несколько полезных ссылок:

Задания

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

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Делаем эскиз вашего дизайна

Определяем и учитываем цвета