Нет времени читать?
Отправить статью на почту

Как сделать макет сайта самостоятельно

14 июня 2020
11 мин на чтение
18543
Как сделать макет сайта самостоятельно
author__photo

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

Что такое макет сайта и для чего он нужен

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

От того, насколько качественно выполнено графическое оформление страниц, зависит понимание контента и общее восприятие сайта.

Преимущества

Разработка макета сайта позволяет:

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

Этапы разработки макета сайта

При разработке макета для сайта: 

  1. Определяют цели работы и характеристики сайта.
  2. Планируют структуру сайта.
  3. Рисуют прототип, чтобы утвердить структуру. Это схема без дизайна, где располагают блоки будущего сайта (шапка, слайдер, кнопки и пр.). Это экономит время на этапе отрисовки макета.
  4. Разрабатывают дизайна. В один файл собирают цвета, шрифты, фото и видео, иконки – все то, что задаст настроение будущему сайту.
  5. Создают окончательный дизайн-макет страницы, а при необходимости макет для мобильной версии.

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

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

Для разработки макета многие пользуются Фотошопом или инструментами сайтов-конструкторов. Рассмотрим каждый способ подробнее.

Шаблон сайта в Photoshop

С помощью Фотошопа можно разрабатывать простые макеты для проектов заказчиков. Для этого:

  1. Создаем документ нужных размеров:

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

Параметры полей макета

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

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

Линии макета

  1. Прорабатываем фон для будущей страницы. 

Это может быть любой цвет или картинка по теме сайта. Если нужен фон однородного цвета, то в инструментах выбираем «Заливку» и нужный цвет.

Фон страницы

  1. Вставляем логотип компании при помощи стандартного инструмента.

Импорт файлов

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

Создание верхнего меню

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

Выбор цвета

Далее выбираем «Горизонтальный текст» и шрифт. Кликаем по закрашенной области Меню и называем разделы. Текст можно будет перемещать.

Шрифт для раздела

Далее создаем слой, выбираем инструмент «Линия», зажимаем Shift и проводим вертикальную линию через весь фон меню. Получится разделитель:

Линии меню

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

Копирование слоев

  1. Делаем основной блок с контентом. Выставляем горизонтальную и вертикальную линии. Создаем слой с заголовком, слой с текстом. Если нужно, перетаскиваем изображения. Нажимаем левой кнопкой мыши на «Текст» и тянем по диагонали. Теперь можно вставить текст и форматировать его.

Основной блок

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

Добавляем меню такое же как сверху. Его можно просто скопировать.

Подвал сайта

Итак, на выходе макет должен состоять из:

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

Шаблон на сайте-конструкторе

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

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

Преимущества разработки макета на сайте-конструкторе: 

  • Готовые шаблоны. 
  • Бесплатно (есть и платные шаблоны).
  • Экономия времени.
  • Возможность вносить изменения одним кликом.
  • Не требует специальных навыков.

Шаблоны сайтов

Основные элементы макета

Рассмотрим основные элементы дизайн-макета сайта. 

Стиль

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

Логотип

От логотипа во многом зависит успех компании. Логотип должен выглядеть заметно, но не отпугивать.

Создание логотипа

Структура

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

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

Структура сайта mind map

Элементы призыва к действию

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

Призыв к действию

Типичные ошибки при создании макета

Основными ошибками при создании макета считают:

  • Количество элементов.

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

  • Яркие цвета.

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

  • Нечитаемый шрифт текста.

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

Заключение

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

Эффективный маркетинг с Calltouch
  • Анализируйте весь маркетинг и продажи в одном окне
  • Удобные дашборды и воронки от показов рекламы до ROI
Узнать подробнее
platform
Автор блога Calltouch
Нет времени читать?
Оцените
Поделитесь с друзьями
Лучшие маркетинговые практики — каждый месяц в дайджесте Calltouch
Подписывайтесь сейчас и получите 13 чек-листов маркетолога
Нажимая на кнопку "Подписаться", вы даёте своё согласие на обработку персональных данных и получение рекламной информации о продуктах, услугах посредством звонков и рассылок по предоставленным каналам связи.
У вас интересный материал?
Опубликуйте статью в нашем блоге
Опубликовать статью
Хотите получить актуальную подборку кейсов?
Прямо сейчас бесплатно отправим подборку обучающих кейсов с прибылью от 14 730 до 536 900р.
[contact-form-7 404 "Not Found"]
У нас тут cookies…
На сайте используются файлы cookies. Продолжая использование сайта, вы соглашаетесь с этим. Подробности об обработке ваших данных — в политике использования файлов cookie.
Вставить формулу как
Блок
Строка
Дополнительные настройки
Цвет формулы
Цвет текста
#333333
Используйте LaTeX для набора формулы
Предпросмотр
\({}\)
Формула не набрана
Вставить