Вспоминаем, как создать макет сайта (мокап)

Содержимое:

1. Решите, как представить бренд
2. Создайте линейное повествование
3. Соберите элементы бренда
4. Шаблоны дизайна для каждого типа страниц
5. Добавьте значимые заполнители
6. Получите обратную связь
7. Инструменты для создания макетов

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

1. Решите, как представить бренд

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

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

Например, вы можете начать с цели побудить пользователей проводить больше времени на вашей домашней странице. Домашняя страница часто является начальной точкой взаимодействия с брендом. Он также имеет самый высокий показатель отказов. Но вместо того, чтобы начинать с точки зрения функций или оптимизации конверсии, спросите себя: «Как нам установить более глубокую связь с посетителями главной страницы?».

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

2. Создайте линейное повествование

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

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

3. Соберите элементы бренда

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

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

4. Шаблоны дизайна для каждого типа страниц

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

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

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

5. Добавьте значимые заполнители

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

Даже если изображения и текст, используемые в макете, временные, они должны быть максимально приближены к конечной цели. Таким образом, просматривая макеты, вы действительно получаете представление о предполагаемом направлении сайта. Например, вместо использования текста-заполнителя «lorem ipsum» вы можете набросать образец текста, соответствующий бренду.

6. Получите обратную связь

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

7. Инструменты для создания макетов веб-сайтов:

• Существует множество инструментов дизайна, которые можно использовать для создания макета веб-сайта, но некоторые из наиболее популярных включают в себя:
• Sketch — это приложение для веб-дизайна, позволяющее быстро выполнять итерации. Созданный в 2010 году специально для дизайна пользовательского интерфейса, Sketch может создавать как макеты, так и интерактивные прототипы. Стандартная подписка начинается от 12 долларов в месяц.
• Figma — это инструмент проектирования, позволяющий сотрудничать в режиме реального времени. Если над макетом одновременно работают несколько человек, Figma может стать хорошим вариантом. Вы можете зарегистрироваться в Figma бесплатно, но если вы хотите использовать все ее функции, стоимость тарифа начинается от 15 долларов в месяц.
• Adobe XD. Дизайнеры, работающие со всем дизайнерским пакетом Adobe (такими приложениями, как Photoshop, Illustrator, InDesign и Lightroom), любят Adobe XD за его полную интеграцию с другими приложениями Adobe.