Руководство по созданию макетов

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

Что такое макет сайта

Макет сайта — это его реалистичный прототип, созданный в графической программе вроде Photoshop. Он выглядит как готовый сайт: со всеми блоками текста и изображений, кнопками, фоновыми рисунками и так далее. Единственное отличие в том, что в макете нет функционального наполнения: например, страница с товарами заполнена шаблонами описаний.

Зачем нужен макет сайта

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

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

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

Макет во всем этом процессе помогает:

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

Разработка макета сайта: работаем поэтапно

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

Техзадание

Всегда начинайте «на берегу», с составления технического задания. Даже если вы самостоятельно делаете макет, задание вам пригодится: когда вы поймали дизайнерский кураж и три часа играете со шрифтами, задание вернет вас на нужный путь. Что стоит в нем прописать:

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

Прототип

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

Подбор цвета

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

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

• Adobe Color
• ColorCode
• ColrD
• Cohensive Colors
• ColorHunter

Подбор шрифта

Для макета сайта вам также понадобится пара шрифтов — один для заголовков, другой для основного текста. Как максимум можно подобрать третий, если очень нужно. Что нужно помнить, когда выбираешь шрифт:

• Авторские права. Шрифт нужно либо купить, либо найти тот, который можно использовать бесплатно. Бесплатные шрифты ищите на Google Fonts, Font Space, 1001 free fonts.

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

Статья по теме. «Выбираем шрифты для письма: стильные, уместные, безопасные».

Проработка

Теперь можно начинать непосредственно создавать макет сайта.

1. Создайте сетку из направляющих, под которую будут подстраиваться объекты на странице.
2. Разбейте страницу согласно прототипу — определите место для хедера, футера, основных блоков контента.
3. Создайте несколько базовых элементов — пример кнопки, описания, заголовка и другие, нужные вам, и вынесите их за рабочую область. Сможете копировать и вставлять их в нужные места.
4. Начинайте детально прорабатывать каждую из областей.
5. Не забудьте отрисовать интерактивные элементы в разных состояниях. Например, если кнопка меняет состояние при нажатии или шрифт увеличивается при наведении, создайте отдельные слои для обоих состояний.

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

Важно! Каждый элемент рисуйте на отдельном слое и логично называйте. Кнопка — button, название товара — item name и так далее. Не забывайте логически группировать слои и давать группам имена.

Создание гайда

Хорошим тоном будет сделать описание макета сайта для верстальщика. В описании можно зафиксировать все основные характеристики макета:

• выбранные цвета,
• размеры сетки,
• описания базовых элементов и так далее.

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

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

Как создать макет сайта в фотошопе

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

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

Создаем новый файл в Photoshop. Можете настроить самостоятельно или перейти на вкладку «Для Интернета». По умолчанию программа предлагает макет «Заказная» размерами 1366 на 4000 пикселей, я немного округлю ширину до 1380 пикселей. Это распространенный размер, подходящий под размер экрана компьютера или ноутбука. Цветовая модель — RGB, разрешение — 72 пикселя на дюйм, фон прозрачный.

Теперь задаем модульную сетку. Заходим во вкладку «Просмотр» верхнего меню и выбираем там пункт «Новый макет направляющей». По умолчанию программа предлагает создать восемь столбцов с полями и внутренними отступами, но мы сделаем 12 — так будет удобнее делить страницу на 2, 3, 4 или 6 блоков.

Также зададим значение средника в 15 пикселей (это внутренний промежуток между колонками), верхнее и нижнее поле поставим по нулям, правое и левое — 30 пикселей. Вы можете выбрать свои значения, но помните, что отступы и поля должны быть кратны одной цифре, например, 5.

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

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

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

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

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

Теперь добавлю главное изображение страницы и напишу на нем небольшой слоган. Контейнер для баннера, сам баннер и текст на нем сгруппирую в папку Banner. Если будете размещать картинку как в моем примере, не оставляя поле с одной стороны — обязательно сделайте пометку для верстальщика, как должна вести себя картинка при растягивании страницы в ширину. Например, что она должна оставаться «приклеенной», а справа будет возникать пустое поле; либо же она должна увеличиваться вместе со страницей.

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

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

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

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

Оставшуюся высоту холста можно обрезать и радоваться результату. Вот, что получилось у меня:

Уверена, ваш макет сайта выйдет гораздо круче :).

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

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

Wilda

Русскоязычный онлайн-конструктор, где можно создать макет сайта, документа, буклета, баннера и так далее. Пользователь выбирает один из шаблонов (для сайтов их 16) или работает с нуля.

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

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

Mockflow

Инструмент для быстрого прототипирования сайтов, предназначен для UI/UX дизайна. Макет сайта составляется из готовых блоков — например, хедера, карточки товара, баннера или блока «Эти товары недавно искали…». Эти блоки можно лишь изменять по размеру, отредактировать их цвет или содержимое не получится. Перед созданием макета нужно выбрать, для какого интерфейса вы будете составлять прототип, это повлияет на набор блоков.

Цена: есть бесплатный тариф на один проект объемом не более трех страниц. Далее от 15 долларов в месяц.

iPlotz

Удобный, хотя и немного устаревший онлайн-конструктор макетов сайтов. Работает на Flash Player, поэтому может притормаживать, особенно на слабых компьютерах.

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

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

Цена: бесплатно за один пятистраничный проект, далее от 15 долларов в месяц.

Moqups

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

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

Цена: бесплатно доступен один проект из максимум 200 элементов, далее от 16 долларов в месяц.

Marvel

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

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

Цена: бесплатно для одного проекта без возможности скачивать созданные файлы. Далее от 12 долларов в месяц.

Justinmind

Десктопная программа с обширными возможностями. В начале работы пользователь выбирает, для какого интерфейса будет создавать дизайн: мобильного на Android или iPhone, десктопа, планшета. Затем миксует страницу из готовых компонентов, которые можно гибко настроить под себя: изменить цвет, размер, текст и картинки.

Программа выгодно отличается от схожих онлайн-сервисов количеством функций, даже на бесплатной версии. Можно посмотреть симуляцию того, как страница будет выглядеть на устройстве, и экспортировать результат в формате HTML. Интерфейс напоминает Photoshop — дизайнерам будет легко разобраться. Программа принимает на вход файлы из Photoshop, Sketch и Adobe XD.

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

Ошибки в создании макета сайта

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

Ошибки в дизайне

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

Избегайте этих ошибок:

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

Ошибки, критичные для верстки

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

• Беспорядок в слоях. Нужно удалить ненужные слои — скрытые, пустые. Нормально назвать все оставшиеся и логически сгруппировать. В идеале нужно делать это на этапе разработки макета сайта, а не при сдаче, иначе сами запутаетесь.
• Эффекты прозрачности и наложения. Чтобы сделать цвет светлее, просто используйте другой цвет, но ни в коем случае не прозрачность. Не применяйте эффекты наложения — они непредсказуемо отображаются в разных браузерах.
• Элементы «гуляют» туда-сюда на пару пикселей. Выравнивайте все строго по сетке, иначе верстальщик может просто обрезать объект, который выступает за направляющую.
• Путаница с отступами. Проверьте отступы — они должны быть выражены целым четным числом, чтобы верстальщику было проще их перенести.
• Недокомплект файлов. Приложите шрифты и все изображения к макету — отдельный архив для шрифтов, отдельный для изображений. Если шрифты есть на Google Fonts, можете дать ссылки на них.

Создание макета сайта: что стоит запомнить

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

Создание макета идет по следующим этапам:

1. Техзадание
2. Отрисовка блочной схемы — прототипа
3. Подбор цветов
4. Подбор шрифтов
5. Отрисовка макета
6. Гайд по макету для верстальщика

Каких ошибок стоит избегать, чтобы макет сайта получился красивым и его было легко сверстать:

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

Чтобы сделать макет, можно нанять дизайнера или потратить время самостоятельно — есть много бесплатных сервисов и программ, просто найдите подходящую для себя. А когда сайт будет готов, обязательно подключайтесь к SendPulse — с нами легко собирать лиды и делать рассылки через email, SMS, push, Viber и чат-ботов.

Что такое макет сайта и зачем он нужен

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

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

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

Макет упрощает и ускоряет процесс создания сайта. Благодаря его наличию разработчики могут:

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

Этапы создания макета сайта

Поговорим о процессе работы над макетом подробнее и обратим внимание на важные нюансы.

Этап 1: Формирование техзадания

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

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

Скачать файл

Этап 2: Работа над прототипом

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

Этап 3: Подбор цвета

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

Упростить работу по подбору цветов помогут специальные сервисы. Бесплатно определиться с палитрой будущей веб-площадки вам помогут:

• Adobe Color
• ColorCode
• ColrD
• Cohensive Colors
• ColorHunter

Этап 4: Подбор шрифта

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

• Они могут быть защищены авторскими правами. Во избежание неприятностей оплатите возможность их использования или берите бесплатные варианты с Google Fonts, Font Space, 1001 free fonts.
• Не во всех шрифтах вы найдете необходимые знаки и начертания. Допустим, не сможете выделить фрагменты текста курсивом, вставить знак доллара или букву «ё». Попытки решить проблему при помощи Photoshop чреваты появлением проблем при верстке страницы, поэтому лучше найти шрифт, полностью соответствующий идее оформления веб-ресурса.

Этап 5: Проработка

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

• Формируем сетку из направляющих для расположения контентных блоков.
• Отводим место для хедера, футера и других базовых элементов.
• Разрабатываем внешний вид кнопок, описания, заголовка и выносим их за рабочую область. При необходимости они копируются и вставляются в нужное место.
• Тщательно продумываем компоновку элементов в каждой области.
• Интерактивные элементы отрисовываем в разных состояниях. Чтобы кнопка при наведении на нее курсора увеличивалась, понадобятся отдельные слои для обоих вариантов.

Для удобства присваивайте отдельным элементам, а также их группам логичные названия: button для кнопок, item name – для товаров и так далее.

Этап 6: Создание гайда

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

• используемые цвета,
• размеры сетки,
• текстовое описание базовых элементов и так далее.

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

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

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

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

• Формируем документ нужных размеров

Начинаем с кликов по «Файл» и «Создать», указываем параметры полей. Рекомендуем увеличить размер больше на 200 пикселей, чтобы добиться полного соответствия с реальным размером страницы.

• Включаем линейки и активируем сетку

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

• Подбираем изображение или палитру цветов для фона

Самый простой вариант – придать фону ровный оттенок при помощи кнопки «Заливка». Более выигрышно смотрятся картинки по тематике сайта.

• Добавляем логотип компании, используя стандартный инструмент.
• Формируем верхнее меню. После выставления линейки кликаем на «Прямоугольную область», выделяем место вдоль линейки.

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

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

Затем создаем слой, кликаем на «Линия», нажимаем Shift и вертикальной линией делим фон меню.

Потом копируем слой и выставляем после каждого раздела:

• Создаем основной блок с контентом. Устанавливаем линии – вертикальную и горизонтальную. Делаем слои – с заголовком и с текстом. При необходимости перемещаем изображения. Левой кнопкой жмем на «Текст» и растягиваем по диагонали, после чего вставляем и форматируем текст.
• В подвале сайте создаем группу и слой. Выполняем разметку, используя линейку. Далее «Прямоугольная область» и «Заливка».

Меню копируем из верхнего.

Готовый макет включает:

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

Создание макета сайта в конструкторе

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

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

Работа через сервис для создания макета сайта выгодна по нескольким причинам:

• Выбор готового шаблона из богатой библиотеки.
• Отсутствие финансовых затрат (но есть и платные варианты).
• Экономия времени.
• Моментальное внесение корректив.
• Доступна людям, не обладающими специальными знаниями.

Общие правила разработки макета сайта

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

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

К типичным дизайнерским ошибкам относятся следующие:

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

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

Правило 1: Выберите формат файлов, удобный для всех

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

Наиболее востребованным графическим редактором считается Adobe Photoshop. С ним одинаково успешно работают фотографы, иллюстраторы и веб-дизайнеры. Файлы Photoshop имеют расширение .psd, поэтому верстальщик получает от дизайнера PSD-макет.

Универсальность этого редактора приводит к тому, что на овладение его функциями требуется время. Для решения задач веб-дизайна созданы программы нового поколения, работать с которыми гораздо проще. Многие выполняют создание макета сайта в Figma, Adobe XD, Sketch. Кто-то предпочитает Adobe Illustrator или Adobe InDesign.

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

Правило 2: Соблюдайте правила интерактивного дизайна

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

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

Правило 3: Проследите, чтобы не было дробных размеров

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

Правило 4: Наведите порядок в слоях и артбордах

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

Во избежание этой ситуации:

• удалите скрытые и пустые слои,
• объедините элементы в группы по смыслу,
• дайте каждому слою название.

Все артборды также должны получить понятное логичное наименование. Это упростит работу верстальщика и других специалистов.

Правило 5: Поместите элементы на отдельный артборд

Это касается элементов, которые не отображаются с помощью HTML и CSS: иконки, карточки, отдельные кнопки. Все они выносятся на специальную страницу макета. Экспортировав их в PNG или SVG, вы поможете верстальщику: ему не придется тратить время на конвертацию.

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

Правило 6: Сопроводите макет шрифтами и иконками

Речь идет о редких шрифтах, которые отсутствуют в популярных библиотеках. Если он есть в Google Fonts, достаточно приложить ссылку.

Приложите к макету все элементы, экспортированные из артборда. Для формата PNG представьте версии в нескольких разрешениях.

Правило 7: Создавайте анимацию для демонстрации движущихся элементов

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

Анимированные макеты используют не только для демонстрации сайта в портфолио или презентации заказчику.

Макет, нарисованный в любом графическом редакторе, легко переносится в специальные программы: Adobe Animate, Adobe Edge или Principle.

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

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

• Что такое макет сайта и зачем он нужен
• Этапы разработки макета сайта
• Правила создания макета
• Как создать макет сайта онлайн или в программе
• Типичные ошибки при создании макета сайта
• Совет эксперта

Набросок помогает точнее сформулировать задачу

2. Вайрфрейм — план экранов сайта. Помогает увидеть логику распределения элементов по экранам. Во время работы над вайрфреймом дизайнер видит, где будет кнопка, меню, логотип.

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

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

Вайрфрейм — база, от которой можно отталкиваться и приступать к дальнейшей работе

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

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

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

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

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

В прототипах обычно прописаны кликабельность кнопок и меню

Онлайн-сервис для разработки интерфейсов и прототипирования. Позволяет рисовать вайрфреймы и верстать макеты. Аккаунты Figma для компаний не работают в России с марта 2022, но личные по-прежнему доступны.

Векторный графический редактор для macOS. Здесь нет инструментов для редактирования фото, создания анимации и 3D-графики, но для дизайна интерфейсов Sketch подойдёт.

Совет эксперта

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

Преподаватель и ревьюер на курсе «Дизайнер интерфейсов»

Вы открыли макет в Фигме и редактор кода. Сейчас расскажем, что нужно делать дальше, чтобы не впасть в прокрастинацию и всё сверстать.

Осмотрите макет

Зачем. Чтобы потом не отвлекаться от вёрстки.

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

Отметьте крупные смысловые блоки и разделы. Посмотрите на страницу и выделите крупные смысловые блоки. Базовая структура любого макета состоит из трех основных тегов:

• <header> — шапка сайта, одинаковая на всех страницах.
• <main> — уникальный контент;
• <footer> — подвал, одинаковый на всех страницах.

Теперь ищем смысловые разделы внутри этих блоков. Поможет схема:

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

На этом этапе отметьте:

1. Заголовок всего документа и заголовки смысловых разделов. Теги: <h1>-<h6>.
2. Мелкие элементы в смысловых разделах. Это списки, таблицы, демо-материалы, параграфы и переносы, формы, цитаты, контактная информация и прогресс.
3. Фразовые элементы. Изображения, ссылки, кнопки, видео, время и мелкие текстовые элементы.

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

Настройте редактор кода и проект

Установите редактор Visual Studio Code (или любой другой), если ещё этого не сделали, и плагин editorconfig. Он помогает разным разработчикам писать код в проекте в одном стиле.

Структура проекта. Создайте папку и положите туда файл index. html, папку css с файлами style. css и normalize. css, а также папки для картинок и шрифтов. Получится так:

Разметка

Рабочую среду подготовили, приступаем к разметке.

1. Создаем разметку страницы в файле index. html. Изображения пока не подключаем — этим займемся на этапе работы с графикой;
2. Далее, в файле при помощи нужных тегов: прописываете весь текст, расставляете все ссылки и кнопки. Нужен только HTML-код, стили пока делать не нужно.
3. Теперь определим !DOCTYPE, укажем язык содержимого, кодировку и заголовок страницы во вкладке браузера.

<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Заголовок страницы</title>
  </head>
  <body>
  </body>
</html>

Выделяем крупные смысловые блоки на каждой странице сайта. Это <header> — шапка, <footer> — подвал и <main> — основное содержимое.

Размечаем в блоках крупные смысловые разделы. Выделяем главную навигацию <nav>, секции через <section>, смысловые разделы через <article> и дополнительное содержимое через <nav>.

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

Например, текст про дизайн-студию из Краснодара прикидывается заголовком, но на самом деле это не он:

Это само содержание, а не его резюме. Хорошим заголовком для этого блока был бы текст «О нас» или «О студии».

Размечаем мелкие элементы в смысловых разделах. Списки <ul> и <ol>, таблицы <table>, демонстрационные материалы <figure>, параграфы <p> и переносы <br>, формы <form>, цитаты <blockquote>, контактную информацию, прогресс и измерения.

Определить, какие теги использовать, можно методом исключения:

• Получилось найти самый подходящий смысловой тег — использовать его.
• Для потоковых контейнеров — <div>.
• Для мелких фразовых элементов (слово или фраза) — <span>.

Размечаем фразовые элементы. Изображения <img>, ссылки <a>, кнопки <button>, видео-контент <video>, время <time>, мелкие текстовые элементы <span>, <b> или <i>.

Разметка в редакторе кода выглядит так:

А так проект выглядит в браузере:

Базовая стилизация

Начинается самое интересное — работа с внешним видом. Прописываем в style.css базовые стили. Для крупных блоков пока ничего не делаем.

Этапы базовой стилизации

• Добавление классов в разметку;
• Подключение нестандартных шрифтов (локально или из сервиса);
• Подключение normalize. css (по желанию);
• Указываем параметры шрифта — название, размер, цвет, жирность;
• Указываем высоту строки;
• Описание фоновых параметров (фоновый цвет);
• Описание состояний интерактивных элементов, которые описаны в стайлгайде. На этом этапе задавайте только текстовые параметры и параметры фона;
• Все цвета вынесены в кастомные свойства в селектор :root.

Пример проекта с базовой стилизацией:

Работа с графикой

Экспортируйте всю графику из макета в Figma и подключите её в разметке.

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

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

project
| – css
| – fonts
| – img
|      [ваши картинки]
|   favicon.ico
|   index.html
|   catalog.html

Подключите контентные изображения в разметке. Фоновые и декоративные изображения пока подключать не нужно.

При подключении изображений используйте относительные адреса, обязательно укажите размер картинки без пикселей, а также alt. Например, так:

<img src="img/logo.png" width="100" height="50" alt="Девайс">

Подключите к проекту фавиконки. favicon. ico размером 32×32 положите в корень проекта и подключите в <head>, остальные версии фавиконок делать не обязательно.

Пример проекта в котором подключена графика:

Построение сетки

Построение сеток производится в общем стилевом файле style. css.

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

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

1. C помощью свойства background-color c разными цветами для разных блоков;
2. С помощью свойства outline (для удобства также можно использовать разные цвета).
3. Свойство border лучше не использовать, так как оно влияет на ширину блока и может что-нибудь сломать.

Пример проекта, где уже добавлены сетки:

Добавление декоративных элементов

На этом этапе добавляем мелкие сетки — например, для карточек товара. Подключаем кастомные шрифты и фоновые изображения. В конце оформляем остальные декоративные элементы, которые ещё не стилизовали раньше.

Пример готового проекта, где добавлены декоративные элементы:

Всё почти готово, осталась пара шагов.

Адаптивные сетки и декоративные элементы

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

Адаптивная графика

Ура! Мы и дошли до последнего пункта работы над проектом. Что нам осталось сделать?

1. Подключаем в разметке и стилях адаптивные изображения для разных девайсов и экранов с разной плотностью пикселей;
2. В HTML используем элемент picture, с помощью которого подключаем картинки для разных разрешений экрана, для экранов с разной плотностью пикселей, а также webp-варианты картинок для поддерживающих браузеров;
3. В CSS подключаем картинки для экранов с двухкратной плотностью пикселей и для разных разрешений с помощью медиа-выражений.

Пример готового проекта, где настроена адаптивная графика:

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

Следующие шаги:

• Шаблон простого сайта на HTML
• Шаблон HTML-формы
• Основы дизайна для верстальщиков