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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Маркетинг

Читайте также:

Как выбрать метрики для продукта

Как выбрать метрики для продукта

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

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

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

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

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

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

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

Стиль

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

Логотип

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

Структура

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

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

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

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

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

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

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

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

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

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

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

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

Заключение

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

Эффективный маркетинг с Calltouch

• Анализируйте весь маркетинг и продажи в одном окне
• Удобные дашборды и воронки от показов рекламы до ROI

Узнать подробнее