Мои работы

Редизайн интернет-магазина westskate.ru (2011). Индивидуальная разработка сайта ~с нуля. Поисковая оптимизация, продвижение сайта, копирайтинг, рекламные тексты

Редизайн сайта спортивных товаров westskate.ru. 2011 года выпуска. Полный редизайн сайта, т.е. создание сайта с нуля (со сменой движка). Поисковая оптимизация и продвижение сайта. Копирайтинг, создание рекламных текстов, веб-брендинг. Поддержка сайта, развитие сайта.

Создание сайта - полный редизайн - westskate.ru (2011)


См. также Создание сайта westskate.ru (2009). Развитие сайта. Ре-дизайн сайта происходил со сменой движка (CMS). Для разработки нового сайта была использована модифицированная CMS интернет-магазина, подробнее о которой можно прочитать в статье: Тюнинг osCommerce v.2.3, или прокачка интернет-магазина для дизайнерских и seo-целей.

Сайт WESTSKATE (westskate.ru)
 Год
выполнения
2011
 Заказчик ВЕСТСКЕЙТ
Сфера
деятельности компании
Продажа спортивных и специализированных товаров: скейтборды, самокаты, ролики, сноуборды, зимние коньки, йо-йо.
Цели
и задачи проекта
Создание интернет-витрины товаров (создание каталога товаров витринного типа) с учетом удобства и простоты навигации и обзорности товара. «Товар лицом» – таков главный принцип, на котором базируется построение пространства разделов и категорий.
Инструментарий создание сайта,
рассчитанного на полную обзорность каждого раздела и демонстрацию «товара лицом»; разработка сайта на
основе CMS интернет-магазина с
последующей модернизацией функционала; установка, отладка и модернизация ряда модулей, модульное программирование, индивидуальная разработка ряда динамичных скриптов на основе PHP-программирования; веб-дизайн
Произведенные работы и полученные результаты создание сайта, веб-дизайн с «резиновой» растяжкой (автоматически приводит страницу в соответствие с размерами экрана или окна браузера): оригинальный веб-дизайн главной
страницы, веб-дизайн
внутренних
страниц, веб-дизайн разделов;
HTML-верстка
(блоковая + табличная), CSS; проработка
имиджевого оформления; FLASH? динамичные эффекты JavaScript, JQuery, AJAX; оптимизация для поисковиков (поисковая оптимизация кода CMS и контента сайта), копирайтинг (написание текстов для сайта), создание рекламных текстов, продвижение сайта в поисковиках
  Создание сайта: технологии PhotoShop
(веб-дизайн), PHP (разработка уникальных модульных решений в программировании базового движка), приложения на Java Script и JQuery

Главная страница:

Создание сайта - полный редизайн интернет-магазина westskate.ru (2011)

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

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

  • Вывод категорий и рубрик;
  • Вывод случайных товаров (рандомный вывод товаров) в горизонтальную полосу во вкладке «Продукция» (в количестве 25);
  • Вывод случайных скидок во вкладке «Скидки» (в количестве 3);
  • Вывод последних новостей (в количестве 3);
  • Мини-чат.

Разработка сайта: анимационные и динамичные эффекты главной страницы

На главной странице применяется множество анимационных и динамичных эффектов, начиная от кликабельности иконок — в меню и в левой центральной части страницы (серо-белые иконки преображаются в цветные при наведении), и заканчивая небольшой FLASH во вкладке «Продукция», горизонтальным скроллингом самих товаров при наведении на блок (кликабельность этих товаров с эффектом осветления), анимированием новостей, выезжающей полупрозрачной панелью «Каталог» (с перечнем категорий с описаниями), модульными всплывающими окнами по вкладкам «Скидки», «Мой Westskate», «Мини-чат». Скриншоты некоторых указанных позиций представлены ниже.

Скринцот 1. Кликабельность пунктов верхнего меню и иконок в левой центральной панели. (Каждый пункт имеет свой цвет при наведении: Скейтборды — розовый, Ролики — зелёный, Самокаты — красный, Йо-йо — оранжевый, Игрушки — жёлтый, Фингерборды — голубой).

Разработка интернет-магазина - кликабельность пунктов меню

Скриншот 2. Кликабельность иконок в левой центральной панели. Типографика заголовка. 

Разработка сайта: кликабельность иконок, типографика заголовка

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

Разработка сайта - интернет-магазина westskate: выплывающая панель каталог

Скриншот 4. Всплывающее модульное окно с вкладки «Скидки». На скриншоте также показана смена картинки во FLASH-баннере.

Разработка сайта - интернет-магазина westskate: модульное окно со скидками

Скриншот 5. Всплывающее модульное окно с вкладки «Мини-чат». На скриншоте также показана очередная смена картинки во FLASH-баннере.

Разработка сайта - редизайн интернет-магазина westskate: модульное окно мини-чат

Разработка сайта: поисковая оптимизация главной страницы

Скриншот 6. В моих привычках заранее подготавливать сайты для поисковой оптимизации, поэтому основному тексту и поисковой оптимизации (как основного текста, так и всех материалов главной страницы) было уделено должное внимание. Текст выводится по нажатию на  кружке с сопутствующей надписью «Первый раз на Westskate? О магазине». Основной текст (с использованием прокрутки) выводится вместо иконок категорий и вступительного краткого описания. Переключается также по щелчку на соседнем кружке. Текст этот является полностью читаемым для поисковиков, несмотря на его частичную «скрытность» (равно, как и прочие полускрытые материалы, вроде описаний категорий из выезжающей панели «Каталог», и др.). Многим разработчикам и seo-оптимизаторам известно, что скрытые/полускрытые тексты технически игнорируются поисковиками и даже входят в серые методы продвижения. Кто сможет правильно ответить, почему касательно этой разработки сайта, ВСЕ полускрытые тексты являются абсолютно полноценными и положительными для поисковиков, получит с полки пирожок, может просить публикацию статьи на любую тему в рамках специфики моего блога (включая раскрытие секретов, которые, конечно, имеются у каждого шеф-повара). Стоит дополнительно сказать, что и для асессоров (реальных людей из проверочного штаба Яндекса или Google) все тексты являются формально чистыми, т.к. физически и фактически они являются доступными для посетителя/пользователя сайта.

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

Скриншот 7. Выпадающее меню. В пунктах задействуются разделы статей, оптимизированных для поисковиков.

Разработка интернет-магазина - выпадающее меню

Разработка сайта: внутренние страницы интернет-магазина

Скринцшот 8. Страница категории.

Разработка сайта. Редизайн интернет-магазина Westskate.ru - обзор товаров в категории

Скриншот 9. Сниппеты товаров при наведении — купить сейчас:

Создание интернет-магазина. Карточки товара - купить сейчас

Скриншот 10. Обзор товара в категории: листание дополнительных катинок товара.

Создание интернет-магазина. Обзор товара в категории

Скринцоты 11-12. Всплывающее модульное окно (при нажатии) с увеличенным изображением товара:

Создание интернет-магазина. Обзор товара

Создание интернет-магазина. Обзор товара

 

Этот материал опубликован в Мои работы и тегирован , , , , , , , . Bookmark the permalink.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>