Задача: создать минималистичный одностраничный сайт для элитного жилого комплекса
Решение: была выбрана черно-белая цветовая палитра, чтобы ничего не отвлекало пользователя от восприятия контента и трёхколоночная сетка.
Процесс создания сайта был разделен на следующие этапы, которые я подробно расписывал в одной из прошлых статей
Подробнее про дизайн-процесс читайте здесь: https://zen.yandex.ru/media/id/61e044da792f772750833f53/kak-pravilno-postroit-dizainprocess-62d1936ef42581431e9c141b?&
И так, переходим к процессу разработки
1) Аналитика
Аналитическая часть при проектировании одностраничных сайтов меньше, чем при создании интернет-магазинов, сложных интерфейсов или мобильных приложений. Но так или иначе она всегда должна присутствовать, потому что
одностраничный сайт создается, чтобы собирать заявки или быстро получать продажи с любого вида трафика
Поэтому перед непосредственным проектирование я провел: визуальный анализ и анализ конкурентов
В визуальном анализе я анализировал 10 сайтов элитных ЖК и выделял пересечения.
Мне удалось выделить следующие общие паттерны при проектировании сайтов для элитных ЖК:
- Очень качественный контент: профессионально снятые фотография, грамотно написанный копирайтером текст
- Часто используется Антиква для заголовков и гротескный для основного текста шрифты
- Цветовая гамма либо монохромный либо Ч/Б с одним акцентным цветом
- На сайтах отсутствуют какие-либо акции или специальные предложения, потому что это премиальный сегмент, в котором люди покупают не из-за цены, а из-за комфорта, статуса и других категорий престижа
- С технической точки зрения сайты идеальны: отсутствуют битые ссылки, сайты все адаптивны, быстро загружаются
- Все сайты имеют примерно одинаковое структурное наполнение: акцент на блоках с преимуществами, интуитивно понятная навигация, чаще всего присутствует описание хода строительства ЖК и его классное местоположение
2) Варфреймы и прототипирование
На основе полученной из аналитики информации я приступил к проектированию варфреймов. Первым шагом было создание функционального прототипа
Функциональный прототип - один из важнейших этапов при проектировании, потому что в ходе него я создаю логику сайта.
Просто текст, чтобы ничего не отвлекало от логики повествования и помогало видеть структуру будущего сайта
После этого перешел к лоуфидам и хайфидам
В проектировании одностраничных сайтов создание кликабельных прототипов не так важно, потому что весь контент листается скроллом вниз, а кнопки ведут в основном к целевому действию. Поэтому в этом лендинге я не создавал кликабельного прототипа
Как видите, уже на этапе прототипирования я выравнивал все по сетке, потому что это итоговой вариант, уже после подбора референсов
3) Поиск референсов и финализация
Референсы я подбираю как общие, так и к каждому блоку отдельно. Это помогает искать только лучшие решения внутри ниши и за ее пределами
После подбора референсов, приступаю к дизайну: добавлению шрифтовых пар, цветов и мелким деталям.
В итоге получаем
Итоги
Несмотря на то, что это одностраничный сайт, работа была проделана очень большая. Проект занял месяц с небольшим, включая все этапы проектирования