178

Правки по проекту luxstore

Сегодня хотел рассказать о правках на сайте luxstor.ru

Ко мне обратился руководитель компании ABP Company и поставил несколько задач:
— изменить шапку сайта
— сверстать страницу
— стилизовать список.

Расскажу о каждой подробнее.

Верстка страницы «Партнерам»

Страница до:

Правки по проекту luxstore 1
Пустая страница «Партнерам»

Страница после:

Правки по проекту luxstore 2
Готовая страница «Партнерам»

Также были добавлены модальные окна, которые появляются при нажатии на кнопки «Заказать звонок» и «Написать нам»

Правки по проекту luxstore 3
Правки по проекту luxstore 4

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

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

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

Изменение шапки

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

Я сделал чтобы все изменения в новой шапке были видны только администратору сайта, а когда все было готово, просто отключил это условие и подменил шапки, никто и не заметил 🙂

Шапка до:

Правки по проекту luxstore 5

И шапка после:

Правки по проекту luxstore 6

Стилизация списка

Изначальный вид списка:

Правки по проекту luxstore 7

На такой список не хочется смотреть второй раз. Нет отступов, отделения сущностей друг от друга. Теряешься когда смотришь на него.

Заказчик хотел выполнить его в стиле списка заказов и в добавок пожелание: «Чтобы было красиво!» 🙂

Не вопрос, сделаем:

Правки по проекту luxstore 8

Другое дело!

Список стал читабельнее: четкое разделение пунктов, ярко выделен статус, выделена кнопка действия.

Изменение оформления мобильного меню

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

Было:

Правки по проекту luxstore 9
Старая версия дизайна мобильного меню

В верхней панели меня не устраивали маленькие внутренние отступы. Маленький шрифт, текст по центру выглядит как-то неаккуратно. Меню не нужно столько места.

Стало:

Правки по проекту luxstore 10

Увеличил отступы, шрифт, уменьшил ширину блока с меню.

Спасибо за просмотр поста.
Хорошего вам дня!

Поделиться
Отправить

Получай новые статьи на почту

Подпишись на интересующие тебя темы и получай списки новых постов на почту. Пишу редко, поэтому спамить не чем. Ориентируюсь на рассылку раз в неделю.

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

Комментарии