Веб-сайт для ИП «Постригань В.А.»

Veb_razrabotka_ot_kompanii_Perec

Вид сайта: интернет-магазин.

Цель сайта: позиционирование и продвижение продукции компании Tapki-45 (товаров, услуг) на российском и международном рынках.

Перед нами стояли задачи:

  1. Разработка сайта интернет-магазина для ПК.
  2. Разработка адаптивной версии сайта интернет-магазина для смартфонов.
  3. Установка сайта интернет-магазина на хостинг.
  4. Установка дополнительных модулей для сайта интернет-магазина.
  5. Наполнение сайта интернет-магазина информацией.

Разработка сайта для ПК

После получения требований по внешнему виду, структуре и наполнению интернет-магазина от заказчика, мы приступили к разработке функционально удобного сайта.

«Главная страница» сайта

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

razrabotka_saita_internet-magazina
Изображение 1 — Скриншот страницы «Главная»

Страница «Доставка»

«Доставка» представляет собой разделы:

  • «Помощь» — информация с тонкостями оформления заказа;
  • «Условия оплаты» — общая информация и возможности оплаты;
  • «Условия доставки» — информация о способах и регионах доставки;
  • «Гарантия» — информация о гарантии продукции.
Изображение 2 — Скриншот страницы «Помощь»
Изображение 3 — Скриншот страницы «Условия оплаты»
Изображение 4 — Скриншот страницы «Условия доставки»
Изображение 5 — Скриншот страницы «Гарантия»

Страница «Каталог»

«Каталог» представляет собой перечень производимых товаров с полным описанием.

Изображение 6 — Скриншот страницы «Каталог»

Страница «Карточка товара»

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

Изображение 7 — Скриншот страницы «Карточка товара»

Cтраница «Акции»

Страница «Акции» представляет собой информацию о действующих выгодных предложениях компании.

Изображение 8 — Скриншот страницы «Акции»

Cтраница «Услуги»

Страница «Услуги» представляет собой информацию о действующих услугах компании.

Изображение 9 — Скриншот страницы «Услуги»

Страница «О компании»

Страница «О компании» представляет собой раздел с актуальной и важной информацией о производстве, сертификаты, контакты сотрудников, отзывы и новости.

Изображение 10 — Скриншот страницы «О компании»

Страница «Личный кабинет»

В Личном кабинете расположена личная информация пользователя, корзина, информация о заказах, подписках и контактах.

Изображение 11 — Скриншот страницы «Личный кабинет»

Страница «Форма обратной связи»

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

Изображение 12 — Скриншот страницы «Форма обратной связи»

Разработка адаптивной версии сайта интернет-магазина для смартфонов

Мы разработали адаптивную верстку страниц «Главная», «Доставка», «Гарантия», «Каталог товаров», «Карточка товара», «Подраздел каталога», «О компании», «Контакты», «Условия доставки», «Личный кабинет», «Форма обратной связи» интернет-магазина для смартфонов.

Изображение 13 — Скриншоты адаптивной верстки сайта

Установка сайта интернет-магазина на хостинг

Установка файлов интернет-магазина на хостинг

При помощи панели управления ресурса reg.ru мы произвели распаковку файлов интернет-магазина на хостинг заказчика. После распаковки мы создали базу данных для сайта и задали параметры безопасности.

Изображение 14 — Процесс установки интернет-магазина на хостинг

Подключение интернет-магазина к доменному имени

Мы подключили доменное имя к базе данных интернет-магазина, провели настройки безопасности доменного имени, прописали корректные IP адреса хостинга.  

Изображение 15 — Скриншот настроек подключения доменного имени

Подключение интернет-магазина к Яндекс Метрике

Яндекс Метрика — инструмент, предназначенный для оценки посещаемости веб-сайтов и анализа поведения пользователей. Мы произвели настройку Метрики под параметры интернет-магазина заказчика. В тело сайта интернет-магазина мы прописали код установки Яндекс Метрики.

Изображение 16 — Скриншот кода Яндекс метрики

Установка re captcha (антиспам модуль) для интернет-магазина

Мы сформировали ключи безопасности для сайта интернет-магазина, данные ключи необходимы для установки защиты от спам-ботов, защита разработана компанией Google ReCaptcha. Ключи безопасности прописали в CMS сайта заказчика.

Изображение 17 — Скриншот кода Google ReCaptcha

Установка SSL сертификата безопасности для интернет-магазина

Мы установили Сертификат безопасности для интернет-магазина заказчика. Сертификат безопасности — это расширение протокола HTTP для поддержки шифрования в целях повышения безопасности интернет-магазина. Данные в протоколе HTTPS передаются поверх криптографических, что позволяет существенно повысить безопасность.

Изображение 18 — Скриншот Сертификата безопасности

Наполнение сайта интернет-магазина информацией

Наполнение сайта интернет-магазина «Tapki-45» происходило следующим образом.

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

Изображение 19 — Создание группы товаров «Тапочки одноразовые для гостиниц»

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

Изображение 20 — Создание группы товаров «Одежда медицинская одноразовая»

Веб-дизайн трех баннеров для главной страницы интернет-магазина.

Изображение 21 — Макеты баннеров главной страницы

Веб-сайт для компании «Зауралзернопродукт»

razrabotka_veb_saita

Вид сайта: корпоративный

Цель сайта: сформировать имидж компании; рассказать потенциальным партнерам о работе компании и её товарах; повысить количество постоянных оптовых заказов и увеличить количество продаж.

В рамках данного проекта рекламным агентством «Перец» для заказчика были реализованы следующие работы:

  • Разработка оригинального интерфейса – цвета и стиль сайта выполнены в соответствии с логотипом компании
  • Разработка интуитивно понятной структуры сайта
  • Разработка дизайна главной и внутренних страниц в фирменном стиле
  • Разработка дизайн-макетов адаптивных страниц под смартфон, планшет, ПК и ноутбук
  • Вёрстка и интеграция сайта на CMS WordPress
  • Оптимизация и размещение материалов инструментом Bootstrap
  • Настройка и наполнение сайта информацией
  • Установка сайта на хостинг
  • Обслуживание и поддержка сайта

Разработка дизайн-макетов

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

Первый блок – Главная страница – отражает всю актуальную информацию о компании, производстве, разделы «Статьи» и «Обратная связь».

veb_studia_po_razrabotke_saitov
Изображение 1 – Главная страница сайта

Второй блок – страница «О компании» – отражает информацию о ценностях компании, качестве продукции и преимуществах перед конкурентами и дублирует раздел обратной связи.

uslugi_po_prodvizheniu_saitov
Изображение 2 – Страница «О компании»

Третий блок сайта – Страница «Каталог продукции» – содержит информацию и эстетически приятные изображения видов продукции.

studia_razrabotki_saitov
Изображение 3 – Страница «Каталог продукции»

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

prodvizhenie_i_razrabotka_saitov
Изображение 4 – Страница «Карточка продукта»

Пятый блок – Страница «Поставщикам»– информация с производимыми товарами, преимуществами и выгодами компании. Также содержится контактная информация и форма обратной связи.

sait_pod_kluch_nedorogo
Изображение 5 – Страница «Поставщикам»

Следующий блок сайта – Страница «Статьи» – содержит полезную информацию о видах продукции, условиях хранения, фасовки, методах производства и т.д.

zakazat_sozdanie_saita_pod_kluch
Изображение 6 – Страница «Статьи»

Последний блок – Страница «Контакты» – содержит информацию с адресами и контактными телефонами офиса, склада и отдела закупок. Также, для большего удобства посетителя сайта, содержится информация с указанием местонахождений офисов на карте.

razrabotka_saitov_internet_magazina
Изображение 8 – Страница «Контакты»

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

razrabotka_saitov_pod_kluch
Изображение 9 – Пример англоязычный адаптации сайта на Странице «Контакты»

Адаптивный дизайн и HTML верстка сайта

Для сайта «Зауралзернопродукт» реализована адаптивная верстка страниц сайта. Данная верстка позволяет автоматически менять дизайн страницы под необходимый экран пользователя (мобильный телефон, планшет, ПК, ноутбук и т.п.).

razrabotka_saita_html
Изображение 10 – Адаптивный дизайн сайта

Программирование страниц сайта в CMS

Для сайта была выбрана и интегрирована CMS система Word Press – это система управления контентом. Данное веб-приложение позволяет владельцу сайта, редактору, автору управлять сайтом и публиковать контент без знаний программирования. Мы разработали интуитивно понятный интерфейс и провели консультацию по его пользованию, благодаря чему у заказчика не возникнет проблем при работе с сайтом самостоятельно.

Сайт для компании ООО «АрмРесурс»

razrabotka_saita_dla_vashego_biznesa

Вид сайта — корпоративный

Цель сайта — Полно и подробно рассказать потенциальным партнерам о компании, ее товарах и услугах. Увеличить объемы продаж, обрести новых клиентов и расширить целевую аудиторию.

Этапы разработки сайта:

  • Определение целей сайта
  • Создание структуры с проработкой каждого блока
  • Создание дизайн — макетов
  • Верстка и интеграция на СMS WordPress
  • Наполнение сайта контентом
  • Установка сайта на хостинг
  • Обслуживание и поддержка сайта

Разработка дизайн — макетов

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

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

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

Изображение №1 — Первый блок главной страницы

Сайт «Эко — Авто»

Вид сайта — корпоративный

Цель сайта — представить компанию в сети интернет, продвижение и позиционирование новых товаров и услуг

Разработка проходила следующими этапами:

  • Аналитика целевой аудитории и конкурентов. Определение преимуществ компании
  • Прототипирование — расположение элементов на сайте
  • Создание дизайн — макетов
  • HTML — верстка
  • Интеграция с CMS WordPress
  • Базовое наполнение
  • Финальное тестирование

Разработка дизайн — макетов

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

Сайт «Эко — Авто» полностью адаптирован под интересы их заказчиков, адаптивен под разные устройства, удобен в навигации и отвечает всем требованиям современного веб — дизайна.

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

Затем прототип получает эстетичный внешний вид, прорисовывается в фирменных цветах компании.

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

Изображение №1 — Главный экран главной страницы

Вторым блоком — калькулятор расчета выгоды клиента при переходе с обычного топлива на газ. Этот блок имеет функцию лид — магнита, клиент видит для себя прямую выгоду и хочет «начать экономить» прямо сейчас.

Изображение №2 — Второй блок главной страницы

Третий и четвертый блок главной страницы — это Преимущества и Акции. Преимущества помогают укрепить доверие к компании, а Акции повысить интерес и информировать посетителей.

Изображение №3 — Третий и четвертый блок главной страницы

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

Изображение №4 — блок Контакты

На каждой странице для удобной навигации сквозными блоками сделаны «Хедер» и «Футер» сайта.

Размещен логотип, пункты меню, телефоны для быстрой связи — можно нажать и произойдет вызов.

Изображение №5 — Хедер и Футер сайта

Второстепенные страницы

Страница Установка ГБО метан — описано применение метана, преимущества перевода автомобиля на метан, расчет экономии при переходе на метан. Четвертый блок рассказывает о сотрудничестве «Эко-Авто» и «Газпром», так как компания «Газпром» известна во всем мире участие в акции такой крупной компании сильно повышает доверии клиентов, а сама акция увеличивает желание приобрести продукцию именно у компании «Эко-Авто». В каждом блоке есть форма обратной связи — возможность оставить заявку на сотрудничество.

Изображение №6 — Страница Установка ГБО метан

Страница Наши продукты — Перечислены основные услуги компании. К каждой услуге разработан графический элемент — иконка.

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

Изображение №7 — страница Наша продукция
Изображение №8 — Карточка услуги
Изображение №9 — Страница Статьи

Страница Рассрочка и Кредит — указаны условия для оформления рассрочки и кредита на продукцю «Эко — Сервис»

Изображение №10 — страница Рассрочка и кредит
Изображение №11 — страница Акции

Страница Производство — на странице размещены все ведущие разработчики газобетонного оборудования в мире, с которыми сотрудничаем компания «Эко-Авто»

Изображение №12 — страница Производство

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

Изображение №13 — страница Контакты

Адаптивные версии

Сайт полностью подстраивается под размеры экрана пользовательского устройства. Цель — сайт остается удобным и обеспечивает конверсию при загрузке на разных устройствах.

Изображение №14 — Адаптивные версии

Сайт разработан на CMS Word Press — самая популярная платформа в мире, имеет открытый исходный код и является бесплатной абсолютно для всех. Есть возможность реализовать весь необходимый функционал, а также в процессе работы сайта добавлять нужные блоки и «плагины» для модернизации.

При передаче сайта Заказчику, сайт наполняется базовой информацией, предоставленной клиентом. А также тестируется вся функциональная часть — отправка форм, калькулятор, переход между страницами, анимация и тд.

Комбинат бумажных изделий «Кристалл»

Вид сайта: корпоративный

Цель сайта: повысить количество постоянных оптовых заказов и увеличить количество продаж.

Мы реализовали разработку сайта этапами:

  • Разработка дизайн — макетов в фирменном стиле компании
  • Разработка адаптивных дизайн — макетов под мобильный телефон, планшет, ПК, ноутбук
  • Интеграция с CMS WordPress
  • Создана база данных MySQL
  • Осуществлена настройка файловой системы
  • Настройка и наполнение сайта информацией
  • Подключение домена
  • Размещение сайта на хостинге

Десктопные версии сайта

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

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

Изображение №1 — Главная страница сайты

При наведении во втором блоке на категорию продукции реализована анимация — категорию выделяется более темным фоном и появляется призыв к действию — кнопка «Перейти»

Изображение №2 — Второй блок главной страницы

Страница «О компании» — основная информация о компании, ее сотрудниках и производстве

Изображение №3 — Страница О компании

Страница «Заявка» — выбор категории продукции для заказа и форма обратной связи

Изображение №4 — страница Заявка

Страница «Примеры наших работ» — галерея выполненных работ для ознакомления

Изображение №5 — страница Примеры наших работ

Страница «Производство» — фото производства, показывающее целый комплекс современного высокотехнологичного оборудования. Такая страница на 100% подтверждает профессионализм и качество выпускаемой продукции.

Изображение №6 — страница Производство

Страница «Условия сотрудничества» — подробное описание сотрудничества с компанией «Кристалл»: этапы, нужные документы и требования к файлам для печати.

Изображение №7 — страница Условия сотрудничества

Страница «Контакты» — контакты для связи, карта для того, чтобы клиент выдел расположение и легко мог добраться до офиса.

Изображение №8 — страница Контакты

Адаптивный дизайн и HTML верстка сайта

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

  • Посадочная страница «Главная»; 
  • Страница «Заявка»;  
  • Страница «Производство»;  
  • Страница «Калькулятор заказа продукции»; 
  • Страница «Навигационное меню с товарами»;
  • Страница «Примеры наших работ»; 
  • Страница «О компании»; 
  • Страница «Контакты»; 
  • Страница «Условия работы»;
  • Страница «Форма обратной связи»;
Изображение №9 — адаптивные версии сайта

Финальные настройки сайта

Зарегистрирован домен logo-pack.ru и для корректной работы доменного имени с базой данных веб-сайта, были прописаны DNS адреса хостинга.

Настроен аккаунт «Яндекс метрика» для оценки посещаемости веб-сайта и анализа поведения пользователей.  В «тело» веб-сайта был прописан код установки Яндекс метрики.

Сформированы ключи безопасности для установки защиты от спам-ботов, защита разработана компанией Google ReCaptcha. Ключи безопасности прописаны в CMS сайта.

Установлен сертификат безопасности для веб-сайта. Сертификат безопасности — это расширение протокола HTTP для поддержки шифрования в целях повышения безопасности веб-сайта. Данные в протоколе HTTPS передаются поверх криптографических, что позволяет существенно повысить безопасность.

Мебельные детали — изготовление деталей для деревянной мебели

Вид сайта — корпоративный

Цель сайта — сформировать имидж компании; представить компанию в сети Интернет для привлечения большего числа клиентов; предоставить клиентам оперативный доступ к подробной информации о компании, ее услугах и товарах.

В рамках данного проекта рекламным агенством «Перец» для заказчика были реализованы следующие работы:

  • Разработка фирменного стиля компании — цвета, логотип
  • Разработка дизайна главной и внутренних страниц в фирменном стиле
  • Разработка адаптивных дизайн — макетов под мобильный телефон, планшет, ПК, ноутбук
  • Написание SEO — текстов для каждого отдельного товара, подобран графический контент
  • Интеграция с CMS WordPress
  • Настройка и наполнение сайта информацией по присланным материалам
  • Размещение сайта на постоянном хостинге

Фирменный стиль и логотип

Разработка фирменного стиля компании - цвета, логотип в Кургане

Десктопные версии сайта.

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

На главный странице понятная пользователям структура — главный экран, который привлекает внимание и рассказывает, чем занимается компания, а также краткие преимущества. Вторым блоком — продукция компании, чтобы клиенты могли быстро найти нужную категорию и совершить покупку. Новости необходимы для органического продвижения в поисковых системах, а также для ознакомления пользователей с акциями/актуальностями. Блок «О нас» глубже погружает пользователей в деятельность компании и подробнее раскрывает ее преимущества. Отзывы повышают доверие и лояльность клиентов к компании. И последним блоком для удобства — форма обратной связи, призыв к действию «Остались вопросы?»

Разработка дизайна главной и внутренних страниц в фирменном стиле
Изображение №1 — Главная страница сайта

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

Интеграция с CMS WordPress, разработка сайтов с нуля.
Изображние №2 — Каталог продукции

Из категории происходит переход в карточку конкурентного товара с возможность выбора определенных характеристик

Изображение №3 — Карточка товара — Балюстрада прямая

Страница «О компании» — Описание «Мебельных деталей», преимущества и этапы взаимодействия компании с клиентом

Написание SEO - текстов для каждого отдельного товара, подобран графический контент
Изображение №4 — О компании

Страница Контакты — быстрый доступ клиента к нужной информации для связи с компанией.

Настройка и наполнение сайта информацией по присланным материалам
Изображение 5 — Контакты

Адаптивный дизайн и HTML верстка сайта

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

Изображение 6 — Адаптивные версии

Система управления и размещение контента

Для веб сайта «Мебельные детали» была выбрана и интегрирована CMS система WordPress. WordPress — это система управления контентом. Данное веб-приложение позволяет владельцу сайта, редактору, автору управлять сайтом и публиковать контент без знаний программирования. Также внедрен интуитивно понятный интерфейс управления сайтом, что позволит Заказчику работать со страницами сайта без специальных навыков программирования.

Для сайта разработчики выбрали оптимизацию и размещение материалов на страницах веб сайта при помощи инструмента Bootstrap.  Bootstrap — это свободный набор инструментов для создания сайтов и веб-приложений. Включает в себя HTML- и CSS-шаблоны оформления для типографики, веб-форм, кнопок, меток, блоков навигации и прочих компонентов веб-интерфейса, включая JavaScript-расширения. Данный инструмент позволил корректно выставить блоки с изображениями и текстами на страницах сайта.