С 9 до 21 вам ответит Денис

Написать:

Позвонить:

Обратный звонок:

Подписывайтесь в нашего telegram бота, чтобы получить структуру вашего будущего сайта. Это бесплатно!

Уже уходите? Не спешите!

#BLOGGING_UP!

Разработка посадочных страниц для школы блоггинга Дарьи Жуковой

Вводная информация

У школы уже работали страницы, но ребята захотели их переоформить и обратились к нам.

Мы выполнили две посадочных страницы, следуя пожеланиям заказчиков, а именно:

"Минималистичный, светлый. Тёплые тона молочный/кофейный/тёплый беж, без лишних цветов. Можно добавить каллиграфию или «пишущую машинку», «а-ля журнальные» подложки и вырезки, чтобы провести аналогию с хорошим глянцем и СМИ.
Много воздуха, каллиграфические или типографские шрифты."

Посмотрев примеры сайтов и графики, которая нравится заказчику мы приступили к подбору цветов, и сборке сайта.

Так же мы получили исчерпывающее количество фотографий, что позволило нам оформить сайт исключительно авторскими фотографиями самих ребят и их проекта.

Визуальное оформление

Kazimir Text — статичная антиква с простой графикой. Это версия заголовочного Kazimir'a предназначенная для использования в основном наборе. У Kazimir Text шире пропорции, уменьшен контраст и сильно расширена кодовая таблица.

Типографика

Посмотреть подробную информацию о шрифте

С помощью Adobe Color мы подобрали цветовую палитру, подходящую под желания ребят. Мы выделили два основных цвета для оформления сайта— Это светлый оттенок #c6a78a и более темный #977657.

Используемые цвета

Дизайн и Верстка

Первый экран содержит в себе текстовый логотип-заголовок, оффер с кнопкой-формой и видео в всплывающем окне. Блок сделан на 80% экрана, чтобы страница цепляла и пользователь смотрел сайт дальше.

Страница-презентация Гайда для блогеров

Следующий блок мы оформили в виде всплывающих карточек. Подчеркнули главное в тексте контрастным красным и добавили большие цифры для оглавления.
Здесь и далее используем фотографии заказчицы для создания уютного и личного восприятия сайта

Большое прокручивающееся изображение на фоне, при скролле появляется еще контент.

Аккуратная инфографика в цветах сайта, плавная анимация появления.

Блок с ответами для чего нужен гайд, приправлен галереей с автоматическим переключением фотографий

Завершает страницу броский оффер с кнопкой ведущей на форму покупки и полноэкранный баннер-ссылка на вторую страницу, речь о которой пойдет ниже.

Видеокурс

Попав в точку с пожеланиями заказчиков и внеся исправления, связанные с подбором фото, мы приступили к верстке второй странице, посвященной видеокурсу.

Для первого экрана мы решили использовать большое фото на всю ширину экрана и небольшое оформление для текста.

Закончив с первой страницей мы пошли дальше

Мы придерживались тех же приёмов, чтобы страницы выглядели целостно.Использовав слегка не стандартную верстку, мы сохранили удобство чтения и просмотра

Блок об авторе мы выполнили в виде комбинации "изображение + текст"

Мы вынесли броскую цитату в отдельный блок, да бы подчеркнуть посыл и цель видеокурса Дарьи.

Полноэкранный блок с прокручивающейся фотографией и содержанием курса

Программа курса выполнена в раскрывающихся карточках и оформлена схожими визуальными приемами.

Страницу заканчивает блок с формой на весь экран, блок с отзывами в виде галереи-слайдера и кнопка-ссылка на покупку курса.
Так же имеется "подвал" со всей юридической информацией.

Адаптивность

Версии для экранов < 1200 px

Мы полностью адаптировали сайт под все возможные устройства и разрешения. Сейчас, когда более половины трафика приходится на портативные устройства, это уже не прихоть, а необходимость.