https://evkarn.ru
Сайт-визитка под ключ

Сайт-визитка магазина «Сварной»

https://magsvarnoj.ru/
На изображении секция кованного забора.

Заснята отработка всех элементов сайта-визитки магазина «Сварной».

Дата загрузки: 2020-07-28 00:00:00 +0500

Постер для видео - изображена секция кованного забора.

О клиенте:

Евгений Ильич Гончаров — владелец магазина «Сварной». В магазине продаются товары различного назначения, а также реализуются кованные изделия из собственной мастерской владельца.

Задача:

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

Что сделано:

Разработка прототипа (структуры страницы): расположение элементов, тексты.

Разработка дизайна страниц.

Вёрстка сайта-визитки.

Инструменты:

  • Адобэ Иксди
  • Редактор Крита
  • Редактор Инкскейп
  • ХТМЛ
  • ЦСС
  • Бутстрап
  • Джейкуери
  • Гулп
  • Сасс
  • Модэкс

Процесс

Прототип сайта-визитки — создание структуры сайта (расположение блоков, элементов, текстов).

Прототипирование

Разработал прототип страниц сайта-визитки. Показал расположение всех элементов: тексты; изображения и т.д.

Пояснил какие будут анимации на страницах.

Согласовал с заказчиком.

Главная страница собирает в себе блоки с основных внутренних страниц сайта, как это в основном и бывает на сайтах-визитках подобного типа.

Далее идёт небольшая секция с четырьмя важными фактами о магазине «Сварной».

На третьей секции размещён каталог категорий товаров магазина. Следом за ней располагаются акции, которые действуют в данный момент в магазине.

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

В подвале карта и футер с повтором меню, контактных данных и копирайта.

На странице каталога размещены категории товаров магазина. Все страницы категорий повторяют структуру страницы каталога.

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

На странице галереи даётся выбор между товарами магазина и кованными изделиями отдельно.

Далее идут категории изображений по структуре эти страницы похожи на страницы категорий каталога.

На странице карточки изображений товара размещена галерея, в которую можно добавить любое количество изображений через админку сайта.

На странице «О сайте» дублируются данные с главной страницы: немного информации о магазине; галерея изображений и каталог товаров.

На странице «Контакты» размещены все контактные данные о магазине «Сварной». Адреса, время работы, телефоны, электронная почта и контактная форма.

Первая секция лендинга — изображение кованных изделий на фоне, меню, логотип и торговое предложение для посетителей; телефон и адрес магазина

Дизайн

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

Экраны с кодом программы, символы программного кода, различные иконки и диаграммы.

Вёрстка сайта-визитки

Сайт верстался с применением сетки bootstrap. Из фреймворка подключалась только сетка, чтобы избежать избыточности кода.

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

Внедрена разметка Open Graph и частично Schema.org

Секция с каталогом и карточками товаров.

Интерактив

В процессе работы реализованы различные интерактивные элементы, сопутствующие сайту-визитке: формы заказа; постраничная навигация; кнопка возврата к верху страницы; ссылки и кнопки; иконки социальных сетей; галереи; карты; спойлеры (аккордеоны).

Секция с галереей изображений

Анимация

На сайте сделаны мягкие, приятные для глаз анимации — в основном срабатывающие по наведению на элементы: ссылки и кнопки.

Также множество анимаций, сопутствующих другим интерактивным элементам: галереям; спойлерам и т.д.

Изображения логотипа MODX и текст, описывающий его

Интеграция в CMS MODX

Для интеграции в CMS была выбрана система управления сайтом MODX.

Хорошая, удобная система управления, не слишком требовательная к хостингу и надёжная.

Изображения дата-центра - много серверов

Выгрузка на хостинг

Зарегистрировал для Евгения хостинг на его имя и паспортные данные, согласовал доменное имя и оформил заявку на его покупку.

После того как всё было настроено и протестировано на локальном сервере — произвёл выгрузку проекта на хостинг клиента.

Секция с галереей изображений

Запись инструкций

Записал видеоинструкции для Евгения, чтобы было проще работать с админ-панелью сайта.

Результат

Затрачено времени:

25 дней

Бюджет проекта:

Конфиденциально

Отзыв

Фотография клиента
Евгений Ильич Гончаров, владелец магазина «Сварной».

Добрый день.

Когда потребовался сайт для моего бизнеса встал вопрос где и как лучше и недорого сделать. Друзья посоветовали обратится к Евгению Карнаухову и дали номер тел. Многие работали уже с ним и им очень понравилось хотя работать пришлось на удалёнке.

Меня смущало это как на удалении довести мысль что я хочу увидеть.

Но пообщавшись Евгений сделал много предложений на доходчивом и понятном языке все объяснил. Записал видео уроки. Оставил все свои контактные данные. В любое время я могу написать или позвонить и он даст всегда консультацию. Очень комфортно с ним работать. Всё о чем договаривались делал всегда в срок. Очень советую. Не пожалеете что обратились к нему.

Посмотреть отзыв на странице Вконтакте