Для начала скажу, что создаю я лишь макеты по заданию заказчика, в дальнейшем они переходя т верстальщикам и программистам и они превращают мой макет в настоящий сайт. Поэтому и рассказывать буду о том, как создать самостоятельно свой макет.
Разберём на примере сайта под аренду помещений для магазинов одежды.
Работаю я в программе Figma. Самое главное преимущество этого редактора, что он бесплатный и очень прост в использовании.
Шаг 1. Тех. задание
Начинаем с ТЗ (технического задания). Даже если вы создаёте сайт самому себе, ТЗ все равно пригодится.
Что же стоит прописать
- Цель сайта
- Целевая аудитория. Для кого предназначен сайт
- Количество и примерное содержание страниц.
Шаг 2. Прототип
Прототип — это схематичный рисунок вашего сайта. Здесь не нужно прорабатывать детали, лишь показать расположение блоков. Можете вообще рисовать его на бумаге (кстати я часто так и делаю)
Шаг 3. Подбор цветов и шрифтов
Самый сложный шаг, нужно выбрать цвета и шрифты.
Начнем с цветов. Ни в коем случае не берите все цвета радуги, максимум 5 цветов иначе будет "цветная каша". Вам нужен:
- один акцентный (яркий, выделяющийся),
- 2 базовых для элементов дизайна
- 2 цвета для шрифта на темном фоне и на светлом. Чисто черный и белый лучше не брать.
Для упрощения задачи по подбору подходящих цветов можно использовать сайт с цветовым кругом colorscheme.ru
Шрифтов вам нужна пара подходящих друг к другу для заголовков и для основного текста. Можно использовать вообще один шрифт для всего.
Найти и скачать шрифты можно на Google.Fonts, а так же там есть подобранные пары к каждому шрифту.
Шаг 4. Проработка
И вот наконец мы добрались до работы с самим макетом
- Создаём сетку, чтобы было удобнее подстраивать объекты. Это можно сделать в Figma одной кнопкой.
- Согласно нашему прототипу обозначаем каждый блок и начинаем его прорабатывать. Лучше добавлять цвета уже в конце, поэтому при проработке пусть все будет черно-белое.
- Добавляем шрифты, цвета и картинки.
И вот наша одна страничка готова.
Если вы делаете одностраничный сайт, то на этом можно и остановиться, только добавить другие размеры: под планшет и под телефон.