Основные задачи
Предыдущий сайт был неадаптивен под мобайл, а также непригоден для SEO-продвижения.
На новом сайте надо было предусмотреть:
-
АдаптивностьСайт должен корректно и удобно отображаться на всех устройствах, в первую очередь на мобильных -
.svg)
Современные технологииЧтобы сайт было возможно поддерживать и при необходимости можно было найти подрядчика для внесения правок -
.svg)
Пригодность для SEOНа каждую страницу сайта можно разместить тексты, теги, мета теги, настроить редиректы -
Получение заявокНа сайте должны быть размещены электронная почта, номера телефонов и для быстрой связи и физический адрес
ЭТАП 1. Проектирование
Старый сайт включал в себя главную страницу и страницы с описанием продукции. В новый сайт было решено включить также страницы: Доставка, О компании, Контакты.
Позже в процессе создания сайта была создана дополнительная страница Продукция (аналог каталога) со ссылками на всю продукцию.
ЭТАП 2. Дизайн и вёрстка
Клиент не планировал развивать сайт и внедрять в него сложный функционал, поэтому наиболее оптимальным решением задач стала разработка на Tilda.
Особенности сайтов на Tilda:
- невысокая стоимость;
- быстрое создание;
- простое редактирование контента, которое не требует знаний кода.
При этом Tilda — это постоянно развивающаяся современная платформа, на которой можно сделать сайт, который прослужит много лет.
Перед разработкой страниц сайта подготовили и согласовали с клиентом стилистику будущего сайта (цветовая схема, шрифты).
По созданной стилистике в программе Figma были разработаны прототипы будущего сайта, по которым дизайнер верстал страницы уже в самой Тильде.
В проекте были использованы как готовые Tilda-блоки, так и zero-блоки.
Особенности дизайна:
- Благодаря zero-блокам нам удалось сделать контейнер сайта на 90−95% всей ширины экрана, что сделало сайт более современным и стильным. используя лишь готовые блоки такого эффекта достичь нельзя.
- При наведении на кнопки и пункты меню в шапке меняется их цвет.
- В некоторых карточках товаров настроены всплывающие окна с подробной информацией про продукцию.
-
Главная страница -
Главная страница (мобайл) -
Карточка товара -
Карточка товара (мобайл) -
Каталог -
Каталог (мобайл) -
Страница о доставке -
Страница о доставке (мобайл) -
Страница о нас -
Страница о нас (мобайл) -
Страница с контактами -
Страница с контактами (мобайл) -
Страница 404 -
Страница 404 (мобайл) -
Изменение цвета кнопок при наведении -
Модальное окно в карточке товара
ЭТАП 3. Программирование
Последний этап включал:
- настройку кнопок (ссылки на быстрый набор номера телефона и отправку писем по почте);
- подключение домена и SSL-сертификата, настройку редиректа с www на основной домен;
- настраивание ссылок в шапке и хлебных крошках для корректной перелинковке;
- подключение 404 страницы.
