Структура и карта страниц
До отрисовки решаем, какие страницы нужны и что клиент будет искать на каждой. От структуры зависит, найдут ли сайт Google и AI-поиск.
- Карта страниц
- Контент
- SEO
Веб-дизайн, который вы согласуете до кода.
Рисуем дизайн сайтов и интернет-магазинов в Figma: структуру, версии для компьютера и телефона и каждую страницу, которую увидит клиент. Программировать начинаем только после того, как вы согласуете дизайн, поэтому после запуска сюрпризов нет.
Что входит
Что входит в веб-дизайн.
Дизайн входит в цену разработки сайта и интернет-магазина. Рисуем так, чтобы его можно было собрать на WordPress или Wix Studio без отступлений от согласованного.
Версии для компьютера и телефона
Каждую страницу рисуем в обоих размерах. Мобильную версию проектируем под большой палец, а не сжимаем страницу для компьютера.
- Компьютер
- Телефон
- Планшет
Дизайн-система
Цвета, шрифты, кнопки и блоки в одной системе. Программист переносит её в код без догадок, и сайт везде выглядит одинаково.
- Цвета
- Шрифты
- Кнопки
Прототип
В Figma можно прокликать главный путь от главной страницы до формы или корзины и заметить, где что-то мешает.
- Прототип
- Путь
- Форма
Настоящие тексты в дизайне
Рисуем с настоящими заголовками и текстами, а не с текстом-заглушкой, поэтому вы видите, как сайт прочтёт клиент.
- Заголовки
- Тексты
- Кнопки
Движение
Лёгкие анимации, которые привлекают внимание, но не замедляют сайт. Отмечаем их уже в дизайне, чтобы результат совпал.
- Hover
- Прокрутка
- Загрузка
Процесс
От разговора до согласованного дизайна.
Дизайн вы согласуете до программирования. Исправить в Figma быстрее и дешевле, чем на готовом сайте.
-
Шаг 1
Бриф и примеры
Узнаём, что вы продаёте, кто ваши клиенты и какие сайты вам нравятся или не нравятся.
-
Шаг 2
Структура
Карта страниц и порядок блоков главной. Здесь решаем, что клиент увидит первым.
-
Шаг 3
Дизайн в Figma
Главная для компьютера и телефона, затем остальные страницы в той же системе.
-
Шаг 4
Согласование и передача
Правки по вашим комментариям в Figma. После согласования дизайн переходит к программисту.
Передача дизайна
vasha-kompaniya.lv
Образец
- Страницы
- 9
- Экраны в Figma
- 18
- Компоненты
- 46
Что передаём
| Часть | Содержание | Статус |
|---|---|---|
| Карта страниц | 9 страниц и связи между ними | Согласовано |
| Дизайн-система | Цвета, шрифты, кнопки, формы | Согласовано |
| Экраны | Компьютер 1440 px, телефон 390 px | Согласовано |
| Прототип | От главной до формы | Готово |
После согласования
- КодWordPress или Wix Studio
- ПроверкаСайт сверен с Figma
- ЗапускПосле вашего утверждения
Дизайн, который программист соберёт без догадок
Образец
Кому подходит
Кому подходит такой процесс.
Речь идёт о дизайне сайта и интернет-магазина. Логотип и картинки для соцсетей делаются отдельно.
Подходит, если
- Делаете новый сайт или переделываете старый
- Хотите увидеть результат до программирования
- Сайт должен одинаково выглядеть на компьютере и телефоне
- У бренда есть логотип и цвета, но у сайта нет системы
Не подходит, если
- Нужен только логотип или картинки для соцсетей
- Сайт должен быть готов завтра
- Дизайн уже готов, нужно только программирование
FAQ
Вопросы про веб-дизайн.
Не нашли свой? Напишите, и мы ответим в рабочее время.
Дизайн входит в цену сайта: сайт-визитка от 600 € + НДС, сайт компании от 1 400 € + НДС, интернет-магазин от 1 490 € + НДС. В цену входят дизайн в Figma, программирование, мобильная версия и базовое SEO.
В Figma вы видите каждую страницу в размере компьютера и телефона и можете комментировать прямо на дизайне. Исправить в Figma быстрее и дешевле, чем на готовом сайте.
Да. Программировать начинаем только после того, как вы согласуете дизайн. Если что-то нужно изменить, меняем в Figma.
Да. Мы рисуем дизайн для вашей компании с нуля, с вашими цветами, шрифтами и контентом.
Да. Начинаем с аудита, чтобы понять, что сейчас мешает заявкам, а затем рисуем новый дизайн. Аудит готовим за 5 рабочих дней.
Начнём
Расскажите, что вы продаёте.
Подготовим структуру сайта.
Узнать цену Отвечаем в тот же рабочий день.
Первая консультация бесплатно.