Top.Mail.Ru
С 9 до 21 вам ответит Денис
Написать:
Позвонить:
Обратный звонок:
Подписывайтесь в нашего telegram бота, чтобы получить структуру вашего будущего сайта. Это бесплатно!
Подписаться
Уже уходите? Не спешите!
лендинг на тильде цена
лендинг на тильде цена
#BLOGGING_UP!

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

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

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

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

Посмотрев примеры сайтов и графики, которая нравится заказчику мы приступили к подбору цветов, и сборке сайта.
Так же мы получили исчерпывающее количество фотографий, что позволило нам оформить сайт исключительно авторскими фотографиями самих ребят и их проекта.
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
Визуальное оформление
Kazimir Text — статичная антиква с простой графикой. Это версия заголовочного Kazimir'a предназначенная для использования в основном наборе. У Kazimir Text шире пропорции, уменьшен контраст и сильно расширена кодовая таблица.
Типографика
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
С помощью Adobe Color мы подобрали цветовую палитру, подходящую под желания ребят. Мы выделили два основных цвета для оформления сайта— Это светлый оттенок #c6a78a и более темный #977657.

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

Для первого экрана мы решили использовать большое фото на всю ширину экрана и небольшое оформление для текста.
Закончив с первой страницей мы пошли дальше
лендинг на тильде цена
Мы придерживались тех же приёмов, чтобы страницы выглядели целостно.Использовав слегка не стандартную верстку, мы сохранили удобство чтения и просмотра
лендинг на тильде цена
Блок об авторе мы выполнили в виде комбинации "изображение + текст"
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
Мы вынесли броскую цитату в отдельный блок, да бы подчеркнуть посыл и цель видеокурса Дарьи.
Полноэкранный блок с прокручивающейся фотографией и содержанием курса
лендинг на тильде цена
Программа курса выполнена в раскрывающихся карточках и оформлена схожими визуальными приемами.
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
Страницу заканчивает блок с формой на весь экран, блок с отзывами в виде галереи-слайдера и кнопка-ссылка на покупку курса.
Так же имеется "подвал" со всей юридической информацией.
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
лендинг на тильде цена
Адаптивность
Версии для экранов < 1200 px
лендинг на тильде цена
лендинг на тильде цена
Мы полностью адаптировали сайт под все возможные устройства и разрешения. Сейчас, когда более половины трафика приходится на портативные устройства, это уже не прихоть, а необходимость.
лендинг на тильде цена
Made on
Tilda