Кейс
Изменить устаревший дизайн сайта Лендинг(одностраничный сайт) на современный.
Сайт на тематику строительства Архитектурное бюро в Москве. Сайт начинаю реконструировать на платформе Тильда, т.к. эта платформа идеально подходит под Лендинги и гибкие настройки в создании сайта.
1. Меняем логотип.
Логотип сайта имеет 3 цвета-чёрный, красный и белый, немного его усовершенствуем и получаем более компактный.
Изначальный логотип
Изменённый логотип на более близкий к тематике сайта
2. Создаём меню
Начинаем с меню. Меню оставляем без изменений и выбираем блок МЕ301. Немного меняем пункты меню СТИЛИ, РАСЧЁТ, ПРОЕКТЫ, КОНТАКТЫ на такие пункты:
В меню добавляем логотип и номер телефона и ОБРАТНЫЙ ЗВОНОК,что бы посетители сайта могли оставить сразу же заявку на обратный звонок/
На сайте будут присутствовать цвета,что и в логотипе - это чёрный,белый,красный. КНОПКУ обратного звонка делаем в красном цвете. прямоугольной формы и текст белым.
В итоге вот такое меню получилось
3. Создаём первый блок.
На данном сайте первый блок выглядит громоско,белый текст сливается с фоном и из за этого трудно читаемый. Описание находится в углу,а должно находится на видном месте и сразу бросаться в глаза читателю.
Выбираем компактный блок TE108, на место фона вставляем картинку и затемняем её на 60% и пишем крупным заголовком название деятельности и шрифтом меньше УТП. Ниже, в центре прикручиваем кнопку ЗАКАЗАТЬ ЧЕРТЁЖ такого же дизайна,что и кнопка обратного звонка.
4. Этапы работы.
Так же меняем на более компактный блок, но оставляем в том же стиле с переключателями, потому что чем меньше информации,тем блок более привлекательнее. Фон блока не добавляем, только добавляем фон для текста, но не сильно яркий и броский.
5. Стили.
Блок со стилями домов выглядит чопорно,сливаясь друг с другом и надписи слева по горизонтали,что неудобно читать и занимает много пространства.
Я создам меню со стилями и слайдером с миниатюрами,где нажимая на каждое меню будет включатся желаемый слайдер.
Вписываем пункты меню, их получается 6 пунктов.
Делаем действующую кнопку под дизайн ранее наших кнопок с красным фоном и белым текстом. Не действующие кнопки белым фоном.
В каждом слайдер загружено по 6-8 картинок
Настраиваем дизайн стрелки, будет так же красным цветом.
Вот такой слайдер у нас получился,ярко, красиво и чёткое изображение.
6. Преимущества
На данном сайте в описании преимуществ много текста и много пространства занимаю на сайте. Сделаем по оригинальней и уберём половину текста.
Пример первой карточки в редакторе и меняем цвет фона блока.
В итоге получаем аккуратный, компактный блок с преимуществами.
7. Цены
Далее у нас будет блог с ценами, на данном сайте он выглядит так
Здесь можно оставить всё так же со всплывающим по-папом по нажатию кнопки.
-Добавляем слайдер на весь экран
Убираем надписи,загружаем нашу первую картинку,настраиваем кнопкуБцвет стрелки и пишем заголовок.
Выбираем в меню блока нужный по-пап, в нашем случае информационный.
Пишем текст, цвет фона делаем красным,текст выравниваем по правому боку.
И вот что получается после нажатия кнопки
7. Предварительный расчёт
Что бы на сайте не было больше таких полей, я решила сделать квиз(опросник) с каждым вопросом отдельно. Кнопка настроена под один и тот же стиль,что и предыдущие.
вопросы 1 и 2 с ответами в стиле картинок.Ярко и красиво.
Вот такой квиз получился и вот так он выглядит на сайте
9. Цифры.
10. Форма записи
11. Контакты
Карту оставили,а стиль поменяли на более понятный
11. Подвал
Оставили без изменений,только сменили фон немного потемнее.
Ну и в конуе добавили кнопку наверх. На данном сайте её не было и очень не удобно прокручивать с низу на верх.
Вот такой у нас получился обновлённый сайт! Если тебе понравилось,ставь пальчик вверх, а если нашли замечание,то обязательно пишите в коментария,мне очень это важно!!
Если себе хочешь тоже современный и конверсионный сайт,то вот мои контакты;