МИ ПРАЦЮЄМО ДЛЯ УКРАЇНИ
Входные данные
Ход работы
Процесс разработки начался с глубокого погружения в контекст. Мы понимали, что книга написана автором во время реабилитации, когда «душа начала странствовать по сказочным мирам». Это стало фундаментом для визуального языка сайта.
1. Разработка визуальной концепции и атмосферы
Первым этапом было определение цветовой палитры и стилистики. Мы отказались от стандартных ярких цветов, присущих детским магазинам, в пользу глубоких, «вечерних» тонов.
- Цветовая гамма: Основными стали глубокий темно-синий и темно-зеленый цвета, которые ассоциируются с вечерним чтением перед сном. Для контраста и выделения ключевых элементов (кнопки «Купить», акценты на важных мыслях) использован теплый солнечно-желтый цвет.
- Символизм: Ключевым визуальным образом стала бабочка, сидящая на руке в военной перчатке. Это прямая метафора хрупкости жизни и силы духа, защищающего эту хрупкость. Этот образ проходит сквозной линией через все страницы, включая страницу 404 и раздел контактов.
- Текстуры: Для разделения блоков использован эффект «рваной бумаги» или мазков краски, что добавляет сайту тактильности и ощущения настоящей бумажной книги.
2. Структурирование контента и страниц
Следующим шагом стало проектирование пользовательского пути (User Flow). Сайт должен был быть максимально простым, чтобы родители могли быстро оформить заказ, не отвлекаясь от главного — содержания книги.
- Главная страница: Разработана как лонгрид, постепенно знакомящий с миссией проекта. От первого экрана с оффером до раздела «Больше, чем просто истории», где объясняется терапевтический эффект книги.
- Страница автора: Здесь мы сделали акцент на личности Александра. Использован большой портрет автора и искренний текст о переходе «от грохота войны к тихой сказке». Важно было показать, что автор — реальный человек с собственным опытом стойкости.
- Функциональные страницы: Корзина и страница оформления заказа выполнены в светлых тонах на белом фоне, что обеспечивает максимальную читабельность и удобство заполнения данных.
- Контакты: Лаконичная страница со всеми необходимыми каналами связи (телефон, email, соцсети), оформленная на фоне знакового изображения с бабочкой в военной перчатке.
- Доставка и оплата: Отдельная страница, содержащая четкие инструкции и условия получения книги, что помогает снять все вопросы пользователя перед покупкой.
- Страница 404: Даже техническая ошибка была стилизована под общую концепцию — с фирменной бабочкой и кнопкой возврата на главную, чтобы не терять связь с пользователем.
3. Работа над UX/UI элементами
Мы уделили внимание мелким деталям, которые формируют общее впечатление:
- Типографика: Использованы современные гротески, которые хорошо читаются как в крупных заголовках синего цвета, так и в основном тексте.
- Интерактивные элементы: Кнопки имеют скругленные углы, что визуально делает интерфейс «мягче» и безопаснее.
- Анимационные акценты: Использование летящих бабочек и птиц (ласточек) добавляет страницам динамики и легкости.
4. Мобильная адаптация
Поскольку более 80% трафика подобных проектов приходит из социальных сетей через смартфоны, мобильная версия была приоритетом.
- Адаптивность блоков: Все сложные композиции (например, книга рядом с текстом) перестраиваются в вертикальный стек.
- Удобство большого пальца: Кнопки заказа и навигационное меню адаптированы для удобного нажатия одной рукой.
- Скорость загрузки: Тяжелые графические элементы с бабочками были оптимизированы, чтобы сайт открывался мгновенно даже при слабом мобильном интернете.
- Формы заказа: Поля ввода в корзине и при оформлении доставки расширены для удобного ввода текста на сенсорных экранах.
Полученный результат 
