Как сделать дизайн-макет сайта в фигме — урок с примерами

Структура страниц и блоков сайта

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

Каждая страница, в свою очередь, может состоять из нескольких блоков:

• Шапка сайта (Header). Это самый верхний блок, обычно занимает небольшую полосу в начале страницы. Чаще всего там располагается логотип, меню ссылок на основные разделы сайта, номера телефонов или другие контакты.
• Главный блок (Main block, Hero block). Как следует из названия — это часть сайта с наиболее важной информацией — основным заголовком сайта, кратким описанием, кнопкой с призывом к действию и главным изображением (иллюстрацией или фотографией).
• Обычные блоки — могут содержать самую разнообразную информацию: о компании, преимущества, услуги/товары и цены, акции и специальные предложения, ответы на часто задаваемые вопросы, портфолио и примеры работ, отзывы и так далее.
• Подвал (Footer) — завершающий блок на странице. В нем как правило дублируются ссылки из главного меню, здесь же могут располагаться контакты, копирайты и юридическая информация.

Размеры фрейма и сетки для страниц веб-сайта в фигме

Размер фрейма для сайта определяется только его шириной, поскольку высота сайта динамическая и зависит от количества контента. То, что не помещается в экран пользователя, просто будет доступно при прокрутке. Тем не менее, этот аспект также стоит учитывать, и цельные блоки не стоит делать по высоте больше одной прокрутки, чтобы у пользователя не было необходимости листать сайт вверх-вниз несколько раз. В среднем высота одной прокрутки — это примерно 50-60% от ширины.

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

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

Что касается сетки, то её оптимально делать 12-колоночной. При этом отступы по бокам стоит делать больше, чем между колонками. Более подробный урок, посвященный работе с сетками и направляющими в фигме, также есть на нашем сайте.

Инструменты фигмы для дизайна сайтов

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

Также часто в работе помогают плагины, особенно в том что касается поиска бесплатных иконок (например iconify) или фотографий (например Unsplash).

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

Пошаговая инструкция по созданию первого крана сайта в фигме

Подробный туториал с детальными пояснениями и наглядными примерами смотрите в видео-версии этого урока (в самом верху страницы). Вот что можно сделать на этом уроке:

Домашнее задание по созданию дизайна сайта в фигме

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

Легкий уровень сложности: пошагово повторить пример первого экрана сайта видеоурока.

Средний уровень сложности: нарисовать в фигме один или несколько первых экранов сайта из примеров ниже:

По желанию можно внести в дизайн этих сайтов свои изменения.

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

Дополнительное задание (по желанию): сделать дизайн одной или нескольких страниц сайта полностью (не только первого блока), а также их адаптивы под мобильный телефон.