Только 7.02
Онлайн-интенсив «Путь в ИТ. Новое время» Узнай всё о современных профессиях
 
Участвовать бесплатно
кнопка закрыть
Иконка пути Иконка
ГлавнаяБлогСоздание макета сайта: этапы, правила, инструменты
Как создать приложение для iOS
20.07.2022
6 393
Время чтения: 16 минут

Создание макета сайта: этапы, правила, инструменты

20.07.2022
6 393
Время чтения: 16 минут
Сохранить статью:
Сохранить статью:
В статье рассказывается:     
  1. Что такое макет сайта и зачем он нужен
  2. Этапы создания макета сайта
  3. Инструкция по созданию макета сайта в Фотошоп
  4. Создание макета сайта в конструкторе
  5. Общие правила разработки макета сайта
  6. Пройди тест и узнай, какая сфера тебе подходит:
    айти, дизайн или маркетинг.
    Бесплатно от Geekbrains

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • используемые цвета,
  • размеры сетки,
  • текстовое описание базовых элементов и так далее.
ТОП-30 IT-профессий
2022 года с доходом
от 200 000 ₽
Команда GeekBrains совместно с международными специалистами по развитию карьеры подготовили материалы, которые помогут вам начать путь к профессии мечты.
Подборка содержит только самые востребованные и высокооплачиваемые специальности и направления в IT-сфере. 86% наших учеников с помощью данных материалов определились с карьерной целью на ближайшее будущее!

Скачивайте и используйте уже сегодня:

Александр Сагун
Александр Сагун
Исполнительный
директор Geekbrains
pdf иконка

Топ-30 самых востребованных и высокооплачиваемых профессий 2022

Поможет разобраться в актуальной ситуации на рынке труда

doc иконка

Подборка 50+ ресурсов об IT-сфере

Только лучшие телеграм-каналы, каналы Youtube, подкасты, форумы и многое другое для того, чтобы узнавать новое про IT

pdf иконка

ТОП 50+ сервисов и приложений от Geekbrains

Безопасные и надежные программы для работы в наши дни

pdf 3,7mb
doc 1,7mb
Уже скачали 18642 pdf иконка

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Александр Волчек CEO GeekBrains
Александр Волчек CEO GeekBrains
Получите подробную стратегию для новичков на 2023 год, как с нуля выйти на доход 200 000 ₽ за 7 месяцев

Приглашаем вас на бесплатный онлайн-интенсив от Geek Brains.

За 3 часа эксперты подробно разберут каждый шаг новичка в IT, от составления резюме до выхода на зарплату в 200 000 ₽.

Также сразу после бесплатной регистрации на интенсив на вашу почту придут подарки от Geek Brains из закрытой базы:

pdf иконка

Точный инструмент «Колесо компетенций»

Для детального самоанализа по выбору IT-профессии

pdf иконка

Список грубых ошибок в IT, из-за которых сразу увольняют

Об этом мало кто рассказывает, но это должен знать каждый

doc иконка

Мини-тест из 11 вопросов от нашего личного психолога

Вы сразу поймете, что в данный момент тормозит ваш успех

Регистрируйтесь на бесплатный интенсив, чтобы за 3 часа начать разбираться в IT лучше 90% новичков.
Только до 6 февраля
Осталось 17 мест

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Правило 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.

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

Оцените статью
Рейтинг: 5
( голосов 3 )
Поделиться статьей
Добавить комментарий

Получите подробную стратегию для новичков на 2023 год, как с нуля выйти на доход 200 000 ₽ за 7 месяцев

Подарки от Geekbrains из закрытой базы:
Осталось 17 мест

Поздравляем! Вы выиграли 4 курса по ИТ профессиям. Чтобы закрепить подарок и получить к нему доступ, заполните информацию в открывшемся окне

Иван Степанин
Иван Степанин печатает ...