Заснята отработка всех элементов сайта-визитки магазина «Сварной».
Дата загрузки: 2020-07-28 00:00:00 +0500
О клиенте:
Евгений Ильич Гончаров — владелец магазина «Сварной». В магазине продаются товары различного назначения, а также реализуются кованные изделия из собственной мастерской владельца.
Задача:
Сделать сайт-визитку для представления товаров, продаваемых в магазине. Нужны были страницы общего назначения (О магазине, Контакты) и страницы для размещения непосредственно товаров магазина и фотографий изделий.
Что сделано:
Разработка прототипа (структуры страницы): расположение элементов, тексты.
Разработка дизайна страниц.
Вёрстка сайта-визитки.
Инструменты:
- Адобэ Иксди
- Редактор Крита
- Редактор Инкскейп
- ХТМЛ
- ЦСС
- Бутстрап
- Джейкуери
- Гулп
- Сасс
- Модэкс
Процесс
Прототипирование
Разработал прототип страниц сайта-визитки. Показал расположение всех элементов: тексты; изображения и т.д.
Пояснил какие будут анимации на страницах.
Согласовал с заказчиком.
Главная страница собирает в себе блоки с основных внутренних страниц сайта, как это в основном и бывает на сайтах-визитках подобного типа.
Далее идёт небольшая секция с четырьмя важными фактами о магазине «Сварной».
На третьей секции размещён каталог категорий товаров магазина. Следом за ней располагаются акции, которые действуют в данный момент в магазине.
Далее секция с галереей изображений товаров. Сразу за ней секция с краткой информацией о магазине. Потом секция с контактными данными и секция с призывом посмотреть каталог или галерею изображений.
В подвале карта и футер с повтором меню, контактных данных и копирайта.
На странице каталога размещены категории товаров магазина. Все страницы категорий повторяют структуру страницы каталога.
На странице карточки товара можно разместить до трех изображений, которые при клике увеличиваются до полноразмерных и любое количество аккордеонов с различным внутренним наполнением.
На странице галереи даётся выбор между товарами магазина и кованными изделиями отдельно.
Далее идут категории изображений по структуре эти страницы похожи на страницы категорий каталога.
На странице карточки изображений товара размещена галерея, в которую можно добавить любое количество изображений через админку сайта.
На странице «О сайте» дублируются данные с главной страницы: немного информации о магазине; галерея изображений и каталог товаров.
На странице «Контакты» размещены все контактные данные о магазине «Сварной». Адреса, время работы, телефоны, электронная почта и контактная форма.

Дизайн
Для дизайна использована цветовая схема оттенков стали при различных видах обработки. Для оттеночного фонового цвета использован цвет вороной стали, для акцентных оттенков использованы алый и желтый, присущие стали при разных степенях нагрева. В качестве основных цветов для текстов выбраны белый и серый цвета.
Вёрстка сайта-визитки
Сайт верстался с применением сетки bootstrap. Из фреймворка подключалась только сетка, чтобы избежать избыточности кода.
Вёрстка адекватно работает во всех браузерах, полностью адаптивная и валидная, с применением семантических тегов.
Внедрена разметка Open Graph и частично Schema.org

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

Анимация
На сайте сделаны мягкие, приятные для глаз анимации — в основном срабатывающие по наведению на элементы: ссылки и кнопки.
Также множество анимаций, сопутствующих другим интерактивным элементам: галереям; спойлерам и т.д.
Интеграция в CMS MODX
Для интеграции в CMS была выбрана система управления сайтом MODX.
Хорошая, удобная система управления, не слишком требовательная к хостингу и надёжная.
Выгрузка на хостинг
Зарегистрировал для Евгения хостинг на его имя и паспортные данные, согласовал доменное имя и оформил заявку на его покупку.
После того как всё было настроено и протестировано на локальном сервере — произвёл выгрузку проекта на хостинг клиента.

Запись инструкций
Записал видеоинструкции для Евгения, чтобы было проще работать с админ-панелью сайта.
Результат
- Посмотреть работу сайта: перейти
Затрачено времени:
25 дней
Бюджет проекта:
Конфиденциально
Отзыв

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