Как создать прототип веб-сайта из каркаса?

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

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

Давайте изучим и расширим знания. Что на самом деле означает прототипирование?

В этом уроке мы рассмотрим:

  1. Что такое прототип в веб-дизайне;
  2. Создание конструкции: рамка, строки, столбцы;
  3. Добавление содержимого: заголовок, слайдер, информацию;
  4. Проектирование разделов;
  5. Заключение: что мы узнали из процесса прототипировании.

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

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

Давайте посмотрим на каркас, который мы построили в предыдущей статье.

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

Как создать структуру прототипа веб-сайта: фрейм, строки, столбцы

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

В этом примере мы будем использовать дизайн из 12 столбцов с обычной шириной 1140 пикселей, который традиционно используется и встречается в Bootstrap. Это дает нам поле в 15-30 пикселей между единицами сетки. Это будет полезно чуть позже, когда мы свернем столбцы в строки для обеспечения адаптивности для мобильных устройств. Вы можете создать свою собственную сеточную структуру в Figma или в XD. 

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

Как добавить контент в прототип веб-сайта: заголовок, слайдер, разделы

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

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

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

  • Размер и расположение шрифта;
  • Расположение и интервал содержимого;
  • Поля и отступы между разделами и содержимым.

Как создать разделы прототипа веб-сайта

Для создания прототипа и окончательного макета важно начать разбивать ваши группы и разделы на слои. Разделы могут включать такие вещи, как заголовок, раздел «О нас» и раздел партнеров. Вы можете создавать группы в своем инструменте пользовательского интерфейса (например Figma делает это с помощью Ctrl + G). Обозначьте свои разделы и установите для них разные цвета фона. Это упростит их идентификацию и позволит легко перемещать их. Сгруппировав все компоненты в секции, вы значительно упростите себе задачу на этапе создания прототипа при проектировании.

Заключение: чему мы научились в процессе создания прототипа

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

Создав прототип нескольких страниц, вы можете переходить к этапу разработки полноценного макета. Для этого потребуется:

  • Изучения теории цвета;
  • Типографики и изображений.

Мы рассмотрим это в следующей статье.

Бонус: добавление интерактивного запуска прототипа

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

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

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