Створення дизайну для сайту продажу книг ветерана «Казки незламного татка»

Хід роботи

Процес розробки розпочався з глибокого занурення в контекст. Ми розуміли, що книга написана автором під час реабілітації, коли «душа почала мандрувати казковими світами». Це стало фундаментом для візуальної мови сайту.

1. Розробка візуальної концепції та атмосфери

Першим етапом було визначення кольорової палітри та стилістики. Ми відмовилися від стандартних яскравих кольорів, притаманних дитячим магазинам, на користь глибоких, «вечірніх» тонів.

• Колірна гама: Основним став глибокий темно-синій та темно-зелений кольори, що асоціюються з вечірнім читанням перед сном. Для контрасту та виділення ключових елементів (кнопки «Купити», акценти на важливих думках) використано теплий сонячно-жовтий колір.
• Символізм: Ключовим візуальним образом став метелик, що сидить на руці у військовій рукавиці. Це пряма метафора крихкості життя та сили духу, що захищає цю крихкість. Цей образ проходить наскрізною лінією через усі сторінки, включаючи сторінку 404 та розділ контактів.
• Текстури: Для розділення блоків використано ефект «рваного паперу» або мазків фарби, що додає сайту тактильності та відчуття справжньої паперової книги.

2. Структурування контенту та сторінок

Наступним кроком стало проектування користувацького шляху (User Flow). Сайт мав бути максимально простим, щоб батьки могли швидко оформити замовлення, не відволікаючись від головного — змісту книги.

• Головна сторінка: Розроблена як лонгрід, що поступово знайомить з місією проєкту. Від першого екрана з оффером до розділу «Більше, ніж просто історії», де пояснюється терапевтичний ефект книги.

• Сторінка автора: Тут ми зробили акцент на особистості Олександра. Використано великий портрет автора та щирий текст про перехід «від гуркоту війни до тихої казки». Важливо було показати, що автор — реальна людина з власним досвідом незламності.

• Функціональні сторінки: Кошик та сторінка оформлення замовлення виконані у світлих тонах на білому фоні, що забезпечує максимальну читабельність та зручність заповнення даних.

• Контакти: Лаконічна сторінка з усіма необхідними каналами зв’язку (телефон, email, соцмережі), оформлена на фоні знакового зображення з метеликом у військовій рукавиці.

• Доставка та оплата: Окрема сторінка, що містить чіткі інструкції та умови отримання книги, що допомагає зняти всі питання користувача перед покупкою.

• Сторінка 404: Навіть технічна помилка була стилізована під загальну концепцію — з фірмовим метеликом та кнопкою повернення на головну, щоб не втрачати зв’язок із користувачем.

3. Робота над UX/UI елементами

Ми приділили увагу дрібним деталям, які формують загальне враження:

• Типографіка: Використано сучасні гротески, які добре читаються як у великих заголовках синього кольору, так і в основному тексті.
• Інтерактивні елементи: Кнопки мають закруглені кути, що візуально робить інтерфейс «м’якшим» та безпечнішим.
• Анімаційні акценти: Використання літаючих метеликів та птахів (ластівок) додає сторінкам динаміки та легкості.

4. Мобільна адаптація

Оскільки понад 80% трафіку подібних проєктів приходить із соціальних мереж через смартфони, мобільна версія була пріоритетом.

• Адаптивність блоків: Усі складні композиції (наприклад, книга поруч із текстом) перешиковуються у вертикальну стійку.
• Зручність великого пальця: Кнопки замовлення та навігаційне меню адаптовані для зручного натискання однією рукою.
• Швидкість завантаження: Важкі графічні елементи з метеликами були оптимізовані, щоб сайт відкривався миттєво навіть при слабкому мобільному інтернеті.
• Форми замовлення: Поля введення в кошику та при оформленні доставки розширені для зручного введення тексту на сенсорних екранах.

Отриманий результат