Блог

Создание сайта микронаушников December 2, 2010

Задача

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

У заказчика был готовый сайт, который был им в свое время создан самостоятельно, используя: «Какой-то готовый шаблон с движком». К сожалению история не сохранила нам его точный вид, но выглядел он примерно так:

Были поставлены следующие задачи:
– сделать современный, яркий дизайн
– сайт должен быть светлым и продавать продукцию заказчика
– сам товар при продаже помещался в пластиковый контейнер, похожий на упаковку для лапши Доширак, поэтому было необходимо нарисовать для него “вкусную” коробку, которая бы привлекала внимание и вызывало желание купить
– Контактная информация, информация о доставке и покупке должны быть легко доступны и их не надо было долго искать
– Заказчику дал список сайтов, стилистика которых ему нравилась:

http://sharf-na-zakaz.ru/

http://www.genieo.com/

http://www.2buylist.com/

http://www.chefonline.ru/

http://www.obeder.ru/

http://timepad.ru/

http://klavogonki.ru/

http://www.softfacade.ru/

И указал, что ему там нравятся различные красочные, небольшие иллюстрации (иконки), и он хотел чтобы в дизайне сайта они присутствовали.
– Целевая аудитория сайта – это студенты, нужно ориентироваться на них
– Сайт должен был хорошо продвигаться в поисковиках.

Эскизы

Были созданы эскизы будущего сайта и высланы на одобрение.
Ниже прямые цитаты из письма:

001 – Это набросок главной страницы. Основная иллюстрация по центру,
показывает установленный микронаушник. Рядом рекламная текстовка,
поясняющая, что как и зачем на сайте, обьясняющая пользователю, почему
ему просто необходимо приобрести микронаушник. Ниже расположены иконки
моделей микронаушников, при клике на них меняется центральная
иллюстрация и текстовка (см. 002). Переключения происходит без
перезагрузки страницы, пользователь может пощелкать поиграться с
сайтом. В верхнем правом углу блок контактов, он присутствует на всех
страницах сайта. Ниже идет информация о доставке, прокате, инструкция
и пр. (см. следущие эскизы)

002 – Главная страница с выбранным описанием модели. У каждой модели
есть крупная иллюстрация, краткое описание с ссылкой на более
подробное, стоимость и кнопка купит, которая ведет на страницу
описывающую как можно приобрести микронаушник.

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

004 – продолжение главной страницы, здемсь будет ссылка на инструкцию,
при нажатии на нее инструкция выдвигается сбоку и пользователь может
ее просмотреть, предпологаю ее сделать в стиле бумажной инструкции
(возможно застилизовав под гранж, или страую советскую инстукцию,
чтобы пользователю было интересно ее рассматривать)

005 – Вид выдвинутой инструкции, здесь пошагово расписано, что надо
делать с микронаушником. Есть стрелки для прокрутки.

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

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

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

Первый макет

По ходу работы заказчиком вносились правки:

Супер! Коробочка офигенная!
Можно коррективы некоторые внести. Монетку надо однокопеечную, или в элите -люкс ее, а в элите пусть 10 копеек будет. Из контактов только один телефон 213-41-16, все остальные не надо. Ценники все как у на сна сайте, все ок.

И еще номер аськи наш 611-9-611

Илья, еще надо сделать очень важное изменение
У нас есть 3 преимущества которые нужно выделить заметно
1) Бесплатная доставка в любой город по России
2) Пожизненная гарантия на модель Элита-Люкс
3) Помоги другу и получи 400 рублей
Их нужно добавить на главную

Иконки

Инструкция

Итоговый макет главной

Новые товары

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

Внутренние страницы

Были отрисованны все внутренние страницы, вот например карточка товара.

Итоги

5,481 views