Метка: Разработка сайтов

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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