Автор Анна Евкова
Преподаватель который помогает студентам и школьникам в учёбе.

НАВИГАЦИЯ САЙТА-МАГАЗИНА

Содержание:

Введение

Тема работы­–навигация сайта-магазина.

Когда-то люди ориентировались по солнцу, звездам и луне. Затем появились первые бумажные карты, астролябии и компасы. Сейчас все гораздо проще — достаточно достать из кармана смартфон. Но речь пойдёт не просто о навигации, которая помогает человеку дойти или доехать до нужного пункта назначение, а именно о навигации сайта, а точнее сайта-магазина и почему эта тема является актуальной.

Для удобства перемещения по страницам необходима продуманная навигация по сайту. Это система средств, которые помогают искать нужную информацию. Задача вебмастера — сделать так, чтобы посетитель добрался до страницы за 2–3 клика, но это возможно не всегда. Продуманная система навигации важна для сайта, так как от удобства зависит лояльность людей.

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

Переход осуществляется при помощи гиперссылок — текстовых и графических. На сайтах используются следующие элементы навигации:

1) Меню на главной. С его помощью гость должен за один клик попасть в новости, каталог, портфолио, контакты. Если разделов много, их группируют. Так, банки делят разделы на две группы — для физических и юридических лиц.

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

3) Межтекстовая навигация сайта — вид, который используется для перемещения между разделами. По ссылкам пользователь переходит к новым статьям или позициям каталога.

4) Дополнительные элементы. Важно присутствие на веб-страницах иконки, при нажатии на которую пользователь возвращается на главную. Возможно разместить иконки отдельных разделов.

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

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

Цель проектирования: Проектирование комфортной среды для пользователей сайтов-магазинов

Задачи: Разработка навигации для сайта-магазина товаров для домашних питомцев.

  1. Проанализировать + и – существующих систем навигации
  2. Разработать систему навигации для сайта-магазина
  3. Разработать иконки для сайта-магазина.

ГЛАВА 1. ИСТОРИЯ НАВИГАЦИЯ САЙТА
 

1.1. Появление первого сайта

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

6 августа 1991 года был создан первый сайт, который можно найти по адресу info.cern.ch. Сайт доступен и сейчас, с тем же содержимым и интерфейсом, что и 28 лет назад. Его основатель - программист Тим Бернерс Ли (См. рис. 1), с которого началась история Всемирной паутины. Сайт был разработан совместно с бельгийским разаботчиком Робертом Кайо.

https://avatars.mds.yandex.net/get-pdb/1543345/6396f4c8-fa98-48d3-95a5-709cb561f4b9/s1200?webp=false

Рис. 1 Программист Тим Бернерс Ли

Они создали этот ресурс, работая в Европейской организации по ядерным исследованиям (ЦЕРН). Программисты просто хотели разместить данные в сети, чтобы упростить работу своим коллегам.

Самый первый сайт был посвящен Всемирной паутине — ее назначению и принципам работы.

На главной странице располагалось определение технологии: «Всемирная паутина или W3 даёт возможность поиска гипермедиа информации, целью которой является предоставление универсального доступа к бесконечному множеству документов».

Кстати Бернерс Ли создал сайт на компьютере NeXT, устройстве одноименной компании, основателем которой был Стив Джобс.

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

Помимо причастности к созданию первого сайта, Тим Бернерс Ли считается изобретателем URI, URL, HTTP и HTML. Именно эти технологии можно найти в info.cern.ch.

Если точнее, Бернерс Ли придумал:

- язык разметки HTML для создания веб-страниц

- протокол HTTP для передачи данных в Вебе

- систему унифицированных адресов ресурсов URL для поиска документа или страницы

Эти технологии применяются в интернете и сейчас.

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

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

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

До создания и развития веба популярностью пользовалась компьютерная сеть Юзнет (Usenet) (См. рис. 2).

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

https://www.iphones.ru/wp-content/uploads/2019/10/%D0%A1%D0%BD%D0%B8%D0%BC%D0%BE%D0%BA-%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B0-2019-10-25-%D0%B2-18.25.20.png

Рис. 2 Сеть Юзнет

Кстати, эта сеть стала фундаментом в развитии веба. Именно в ней появились первые интернет-сообщества. Ее пользователи ввели понятия «ник», «смайл», «флуд», «троллинг» и прочие термины, без которых мы не представляем интернет-сообщество.

Так как мы выяснили, как появился первый сайт, поговорим о навигации сайтов. Начнём с того же самого первого сайта info.cern.ch., так как с его появлением можно считать и первое появление навигации сайта. Его главная страница (См.рис.3) ничем не примечательна. На ней находятся всего лишь 4 ссылки на другие разделы. В целом - самая простая и понятная навигация: нажимаешь на первую ссылку - попадаешь на страницу с описанием разработки WWW (См. рис. 4), переходишь по второй ссылке - попадаешь на то, как разрабатывался сайт (См.рис.5), по третьей ссылке находится статья о рождении интернета (См. рис. 6), а в последней говорится о Церне, физической лаборатории (См. рис. 7), где всё это происходило.

https://www.iphones.ru/wp-content/uploads/2019/10/121212-8.jpg

Рис. 3 Главная страница info.cern.ch.

Рис. 4 Описание разработки WWW

Рис. 5 Разработка сайта.

Рис. 6 Рождение интернета

Рис. 7 ЦЕРН, физическая лаборатория

Любой человек, который посетит данный сайт с лёгкостью разберётся, так как он очень простой и в разделах уже сказано о том, чему они посвящены. Так как время не стоит на месте, то развитие и создание сайтов тоже не стояло на месте. Стали появляться и другие сайты, например, в 1994 году появилась первая библиотека (См. рис. 8), основанная программистом Максимом Мошковым.

https://s5.cdn.eg.ru/wp-content/uploads/2017/08/77853735801122239-1024x428.jpg

Рис. 8 Библиотека Максима Мошкова

В 1995 году в апреле СМИ стали переходить в онлайн. Первым из бумажных изданий это сделала «Учительская газета» (См. рис.9). У нее появился собственный сайт ug.ru, на котором была размещена информация об издании и перепечатывались статьи из бумажной версии.

https://s3.cdn.eg.ru/wp-content/uploads/2017/08/32057300501122242.jpg

Рис. 9 "Учительская газета"

Так же стали появляться сайты, которые специально на заказ разрабатывали дизайн-студии. Одной из первых в России такой услугой воспользовалась компания «Аэрофлот» (См. рис. 10), для которой онлайн-страницу создавала студия Seanet. Сейчас любой школьник сделает сайт круче, но в 1996-м такой дизайн выглядел очень привлекательно и современно.

https://s7.cdn.eg.ru/wp-content/uploads/2017/08/20847762201122248-1024x542.jpg

Рис. 10 Сайт компании «Аэрофлот»

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

1.2. История возникновения и развития сайта-магазина

В поезде на Сиэтл ехал человек и под стук колес размышлял о том, как здорово, что Интернет, наконец-то, стал свободным и публичным. Люди получили новый инструмент для работы и площадку для общения, где с удовольствием проводят свободное время. Потом человека озарило: если во Всемирной Паутине можно общаться, что же мешает людям прямо здесь делать покупки? Осталось только придумать, какие товары продавать этим способом? Что легче всего хранить и пересылать?  Пассажир поезда на Сиэтл не кричал «Эврика», но решил, что продавать лучше всего книги, аудио и видео кассеты, музыкальные диски. Человека звали Джефф Бизос (См. рис. 11), размышлениям в поезде на Сиэтл он предавался в 1994 году, а результатом мыслей, навеянных под стук колес, стал интернет-магазин Amazon (См. рис. 12), ставший сегодня гигантом электронной коммерции. Джефф Бизос стал основателем первого интернет-магазина, когда решил, что доход ему будет приносить продажа книг. На первоначальном этапе он занимался всем: от наполнения своего магазина до разработки маркетинговой стратегии. Новым толчком развития для магазина Amazon послужила возможность оплачивать в нем покупки банковскими картами. Последователи мистера Бизоса не отличались особой оригинальностью и большинство первых интернет-магазинов тоже сосредоточились на продаже книг. У книг не было срока хранения, их легко было упаковывать и отправлять. Потом в интернет-магазинах появились игрушки. У них тоже не было срока годности, хранение и отправка игрушек покупателям также не представляли особой сложности.

https://womanadvice.ru/sites/default/files/imagecache/width_660/32/viral/1dzheff_bezos.jpg

Рис. 11 Джеф Бизос

https://habrastorage.org/files/7da/53a/940/7da53a9406c44384b44a03bb3ec32982.jpg

Рис. 12 Первая версия Amazon

В реальности в 2000 году продажи Amazon превысили $1,6 млрд. Продавец стал одним из самых крупных игроков в онлайн-бизнесе. Если в 1997-м фирма на IPO была оценена в $438 млн, то теперь она стоила почти в пять раз дороже. А в 2001-м показалась и первая прибыль – $5 млн в последнем квартале – за счет больших продаж в сезон праздников, в Черную пятницу и Рождество. К тому времени компания продавала уже не только книги, но и музыку с DVD. Во-первых, продажа только печатной продукции сужала аудиторию. Во-вторых, у Amazon были судебные разбирательства с популярными книжными сетями из-за заявлений фирмы Безоса о том, что она «является крупнейшим книжным магазином в мире». Никто не спорил с тем, что Amazon продает больше печатной продукции, чем все остальные, но юристы решили придраться к слову «магазин» и настаивали на том, что Amazon – брокер, который занимается перепродажей, а не продажей. Безосу пришлось заплатить магазинам кругленькую сумму, и вопрос решился вопрос вне стен суда. Amazon растет до сих пор. Ребята постоянно покупают новые компании и предлагает удобные сервисы. Совсем недавно они успешно запустили доставку с помощью дронов, а также открыли оффлайн-магазин Amazon Go. Это уникальное место, где не надо платить за покупки: система автоматически подсчитывает, сколько стоит то, что вы уносите, и снимает эту сумму с вашего аккаунта в Amazon. Ожидается, что такие магазины начнут повсеместно появляться в городах США в 2017-м.
Уже сейчас компания стала огромной частью глобальной экономики. Каждая третья онлайн-покупка в Америке совершается на amazon.com. Каждый второй клиент онлайн-магазинов сначала идет на Amazon и исследует там цены товаров, чтобы примерно представлять, с чем он имеет дело. С течением времени сайт преображался, его дизайн стал намного интереснее и навигация намного удобнее (См. рис. 13), так как появились фотографии товаров, с помощью которых люди понимают в каком разделе искать нужный товар и так же могут видеть что он из себя представляет.

Рис. 13 Магазин "Amazon" в наши дни

1.3. Виды навигации сайта и типы её реализации

Навигацию сайта можно сравнить с планировкой жилого помещения. Благодаря хорошей планировке можно без труда найти нужную комнату, не заблудиться и не перепутать её с кухней или спальней, но, если помещений, коридоров и дверей очень много, то человек может потеряться и ему такое помещение будет доставлять дискомфорт. Такие дела и обстоят с сайтами. Запутанная навигация, бесконечные ссылки, по которым пользователь попадает не туда, куда надо - всё это сбивает с толку. Придуманная навигация важна для поисковиков, ведь очень важно понимать какую ту или иную роль играет данная веб-страница. Кроме того, логичная навигация улучшает поведенческие показатели, поскольку посетители быстрее находят то, что ищут. Итак, какой же должна быть хорошая навигация для сайта, чтобы любому человеку было удобно ориентироваться? Вот её основные характеристики: 1) Ясность. Необходимо, чтобы все составляющие меню или пользовательского интерфейса хорошо просматривались и были ясны любому человеку на интуитивном уровне. В идеале на любую страницу или раздел пользователь должен сделать 3 клика. 2) Доступность на любой странице веб-сайта. На каждой странице должны быть чётко проработаны элементы навигации. Это даёт возможность посетителю перейти из любого раздела туда, куда он хочет. 3) Продуманное визуальное оформление. Элементы навигации должны контрастировать с фоном и основным текстом , но не выбиваться из общего цветового решения веб-ресурса. Из множества видов навигаций вы можете отдать предпочтение тем, что принесёт наибольшую пользу именно вашему веб-ресурсу: 1) основная – ссылки на важнейшие разделы, размещаемые преимущественно в меню. 2) языковая – элементы для выбора удобного языка, применяемые на площадках с мультиязычной аудиторией. 3) глобальная – гиперссылки, доступные с любой веб-страницы (ведущие на главную, в личный кабинет, корзину). 4) тематическая – ссылки на страницы, объединенные похожей тематикой. 5) рекламная – навигация для привлечения посетителей к рекламным блокам с предложением товаров/услуг (относящиеся к онлайн-магазину или другим ресурсам). 6) текстовая – компоненты, применяемые с целью оптимизации путем внутренней перелинковки (направляют пользователей к упомянутому в контенте материалу, расположенному в других разделах) 7) указательная – показывает текущее местонахождение посетителя (актуальна для крупных площадок). Навигация на сайте может быть реализована в 4 формах: 1) Текстовая. Ссылки, оформляемые в виде обычного текста. 2) Графическая. Функциональные гиперссылки, «замаскированные» в различные графические элементы – кнопки, изображения. 3) HTML. Выпадающие списки, компоненты, открывающиеся при наведении курсора на корневой раздел. Позволяют значительно сэкономить пространство. 4) Технологии Flash, Java. Интерактивные компоненты, реагирующие на нажатие или наведение курсора запрограммированным действием, эффектом. Шапка сайта. Должна быть визуально отделена от других элементов страницы и содержать следующие элементы (См. рис. 14): 1) Логотип, который лучше расположить в левом верхнем углу, так как такой вариант привычнее для пользователей. 2) Название компании и краткое описание деятельности – теглайн (если эта информация не указана в логотипе). Дополнительно можете указать ваше УТП. 3) Регионы работы, доставки товаров. Не нужно перечислять весь список, укажите данную информацию кратко. 4) Контактная информация. Если у вас несколько офисов или магазинов, то в шапке сайта стоит указать важные сведения только для главного, чтобы не перегружать шапку. 5) Рядом с номером телефона обязательно добавляем режим работы, чтобы пользователи видели, в какое время можно позвонить в компанию. 6) Ссылка на страницу корзины, если у вас интернет-магазин. 7) Форма заказа обратного звонка. Добавляйте только в том случае, если у ваших специалистов есть время оперативно обрабатывать с нее заявки. Нужна для тех пользователей, которые по каким-либо причинам не могут сами позвонить в компанию.

Информативная шапка сайта

Рис. 14 Шапка сайта

Главное меню (См. рис. 15). Лучше всего данные ссылки расположить горизонтально под шапкой сайта. При выборе названий для разделов не забываем про семантическое проектирование. Основные разделы, которые должны быть в главном меню: 1) Каталог услуг или товаров (выпадающий пункт меню). 2) Страница о компании. 3) Способы оплаты и доставки (для интернет-магазинов). 4) Гарантии и возврат (для интернет-магазинов). 5) Портфолио (если есть, что показать). 6) Акции и скидки. 7) Отзывы (для сайтов услуг). 8) Блог (если есть). 9) Контакты.

Шапка сайта с двумя меню

Рис. 15 Главное меню

Форма поиска. Маст-хэв для больших сайтов, в особенности для интернет-магазинов и информационных порталов. Подвал сайта (См. рис. 16). Многие сайты игнорируют данный блок, а ведь он помогает пользователю после просмотра страницы быстрее перейти в другой раздел или найти дополнительные ссылки, которых нет в основном меню. В подвале должны содержаться: 1) Ссылки на все разделы сайта. На все без исключения. Продублируйте ссылки из основного меню и укажите дополнительные разделы. Размещайте их столбцами и делите на логические подгруппы, чтобы было легче в них ориентироваться. 2) Контактная информация. Лучше указать подробнее, чем в шапке сайта, добавив адрес и реквизиты компании. 3) Ссылки на соцсети. Здесь они не помешают. 4) Форма заказа обратного звонка (только если добавили ее в шапке сайта.)

Удобный подвал сайта

Рис. 16 Подвал сайта

Так же есть дополнительные элементы навигации, которые помогают пользователю разобраться в структуре сайта, но подходят не для всех ресурсов. Хлебные крошки или локальная навигация (См. рис. 18). Показывают путь, пройдённый пользователем, или местонахождение страницы в иерархии сайта. Стоит добавить, если у вас многоуровневый сайт (вложенность более 2 уровней). Рекомендации по оформлению: 1) Должны находиться на всех страницах сайта, кроме Главной. 2) Следует расположить хлебные крошки слева под главным меню и в одном месте на всех страницах. 3) Использовать небольшой размер шрифта. 4) Все элементы, кроме последнего, должны быть ссылками на соответствующие страницы сайта. 5) Последний элемент должен совпадать с названием страницы и быть выделенным (лучше жирным начертанием).

Хлебные крошки на сайте

Рис. 17 Хлебные крошки

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

Неудачное расположение бокового меню

Рис. 18 Боковое меню

В боковом меню также следует выделять выбранный раздел. Фильтры и сортировка товаров. Необходимы в основном для интернет-магазинов. Кнопка «Вверх». Помогает пользователям быстро вернуться в начало страницы. Располагать лучше в правом нижнем углу.

ГЛАВА 2. РАЗРАБОТКА НАВИГАЦИИ САЙТА-МАГАЗИНА

2.1. Описание идеи и создание эскизов

Идея по разработки навигации сайта-магазина пришла тогда, когда нужно было заказать товар для питомца на совсем не удобном сайте, который называется "Зоокурьер". На данном сайте не идеально абсолютно всё: шапка, под которой баннер и меню товаров (См. рис.19), акции (См. рис. 20) и подвал (См. рис. 21). Всё разбросано в разные стороны, словно всё существует отдельно друг от друга, много пустых мест, в одном блоке иконка находится внутри, в другом за его пределами, один текст больше-другой меньше. Во-вторых, запись о выгодных предложениях выглядит так, словно предупреждают о чём-то тревожном. Данную запись следует лучше убрать, так как при просмотре товаров на некоторых из них идёт акция и посетитель автоматически будет понимать о том, что в данном товаре идёт выгодное предложение. В-третьих, очень неудобное перечисление товаров. Само название «Товары» очень мелко написано, люди с плохим зрением трудно разберут запись и сами разделы плохо видно, к тому же было бы логично разделить это всё на такие разделы, как: для кошек, для собак, для птиц, для рыб, для грызунов и для рептилий, и обозначить эти разделы крупными иконками, чтобы было лучше видно и покупатель мог быстро сориентироваться. Говоря теперь об акциях. слово «Акция» написано очень мелко. Надпись нужно написать либо крупным кеглем, либо поставить знак % и на других акциях, где идёт что-либо в подарок – поставить иконку подарка. Так же очень плохо написана сама суть акции, текст плохо читается, так как он залезает на фотографию товара. Надписи нужно подписать под товаром и выделить жирным, чтобы было удобно читать и человек обращал внимание на выгодное предложение. Так как плохо оформлена шапка, то и с подвалом решили не заморачиваться. Логотип можно было уже и не применять, вместо него можно добавить раздел «Обратная связь», расстояние между столбцами разное, цвет шрифта можно было использовать и один (либо серый, либо коричневый), а так же не хватает информации о том, какими банковскими картами можно оплачивать заказ.

Рис. 19 Шапка, баннер и меню

Рис. 20 Акции

Рис. 21 Подвал

Разрабатывая макеты в программе, было тщательно всё продумано, где и что будет располагаться и на каком уровне. В начале был разработан макет шапки. Было принято решение логотип оставить на законном месте и в данном порядке расположить поисковую строку, телефон, кабинет и корзину. Под шапкой баннер, а под баннером блоки меню (См. рис. 22).

ШАПКА.jpg

Рис. 22 Макет шапки, баннера и меню

Второе по разработке - это акции (См. рис.23), в которых изменили пару нюансов - это добавление иконок знака процента и подарка и спуск текста под товар, чтобы покупателям было удобно читать о чём данная акция.

АКЦИИ.jpg

Рис. 23 Макет акций

И последний макет - это макет подвала (См. рис. 24). По разработке навигации подвала было принято убрать логотип, так как он там лишний и занимает место и сделать деление на три столбца. Первый столбец называется "Каталог", где под названием идёт перечисление того, что в нём имеется. Второй столбец посвящён дополнительной информации о том, как сделать заказ, о его доставке и тому подобное. Третий столбец говорит нам о способах оплаты, где будут располагаться иконки банковских карт, об обратной связи, где можно написать письмо в магазин и контактный номер телефона, который упоминался в шапке сайта.

ПОДВАЛ.jpg

Рис. 23 Макет подвала

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

2.2. Разработка иконок для сайта

Для того, чтобы покупателям было удобно ориентироваться на сайте, была разработана серия иконок (См. рис. 24). Знаки для товаров разработаны в виде животных, чтобы человек визуально понимал, что это за раздел. Так ещё доработаны другие знаки для личного кабинета, корзины, телефона и акций. Композиция закрыта, углы округленные, цвет взят из логотипа


Рис. 24 Иконки для сайта

2.3. Размещение разработок на сайте

Для лучшего восприятия проделанной работы и понимания как данные элементы работают в приложении, нужно поместить их в среду, в данном случае - это сам сайт. Быстрый и надёжный способ - это помещение на мокапы в программе Photoshop. Как видим, шапка приобрела после разработки иной вид и товары стало лучше видно, благодаря иконкам и чуть крупному тексту (См. рис.25).

Рис. 25 Мокап шапки, баннера и меню

Теперь надпись про акции (См. рис. 26) товаров стало лучше видно и благодаря иконкам сразу можно понять о чём данная акция: знак процента гласит о скидках, а иконка подарка о подарке при покупке данного товара.

Рис. 26 Мокап акций

Подвал (См. рис. 27) так же преобразился, глядя на него покупатель теперь сразу понимает как он может расплатиться: картой или наличными и может написать письмо администрации при необходимости. Каталог и дополнительная информация остались прежними, только благодаря сетке она расположена ровно, как полагается в дизайне сайта.


Рис. 27 Мокап подвала

2.4. Оценка стоимости проекта

Информация о компании: Компания "Зоокурьер" занимается продажей товаров для животных и их доставкой. Целевая аудитория: Мужчины и женщины от 30 до 40 лет со среднем доходом. Имеют собственное жильё или снимают квартиру. Анализ существующего сайта: неграмотная навигация и оформление сайта-магазина. Цель: разработка навигации для сайта-магазина товаров для домашних питомцев Задачи: проанализировать плюсы и минусы сайта, разработать систему навигации и иконки. Требования к дизайну и оформлению: Стиль сайта оставить прежним, отработать шапку сайта, подвал и акции. Так же разработать иконки для разделов животных, чтобы покупателю было проще ориентироваться в товарах. Состав исполнителей: арт-директор, 3 графических дизайнера, менеджер. Срок работы: 2 дня Работа менеджера - беседа с клиентом, расспрос о предпочтениях, составление брифа, поиск конкурентов, надзор работы дизайнеров в установленное время Работа дизайнеров - изучение брифа, создание эскизов, составление макетов в программах, создание нейминга, создание дизайна футболок и POS-материалов, согласование вариантов с менеджером или арт-директором. Работа арт-директора - подготовка данных для отдачи клиенту в типографию. Оплата: 5500 руб. - 11 иконок ( 1 иконка - 500 руб.), 3000 руб. - 3 макета (1 макет - 1000 руб.), 7500 руб.- 3 мокапа (1 мокап - 2500 руб). Итог: 16000 руб.

ЗАКЛЮЧЕНИЕ

Технологии не стоят на месте, каждый день рождается какой-то сайт, будь то сайт-магазин или чего-то другого. Любой сайт должен быть удобен в использовании, без хорошей навигации ни один человек не задержится на нем, он будет искать тот сайт, где ему будет удобно переходить по внутренним ссылкам, где всё расположено на своих местах, где имеются иконки для ориентирования, потому что, если расположено очень много текста, так ещё и мелким шрифтом, покупатель не станет морочить себе голову и вчитываться в то, что там написано. Об этом мы убедились на примере сайта-магазина Zoomagazin.ru, где навигация оставляет желать лучшего. Большинство сайтов всегда создаются для того, чтобы с помощью них было можно продавать свои услуги или товары и навигация - это первый ключ к успешным продажам и заинтересованности клиентов.

СПИСОК ИСПОЛЬЗОВАННОЙ ЛИТЕРАТУРЫ

Основная литература:

1. Я. Нильсон"Web-дизайн. Удобство использования веб-сайтов": Пер. с англ. — М. : ООО

“И.Д. Вильямс”, 2009. — 368 с. - режим доступа https://www.litmir.me/BookFileDownloadLink/?id=301951&inline=1

2. Крейг Джеймс Р., Скала Ирина К. "Шрифт и дизайн. Современная типографика": Издательский дом "Питер" , 1991 — 368 с. - режим доступа [https://habr.com/ru/company/piter/blog/282576/]

Электронные ресурсы:

3. История возникновения и развития интернет-магазина .[электронный ресурс] ‒ Режим доступа: ‒ URL: https://inet-shopping.ru/gde-kupit/istoria-inter(дата обращения: 12.04.2020).

4. Появление первых интернет-магазинов.[электронный ресурс] ‒ Режим доступа:‒https://readyscript.ru/text-article/poyavlenie-pervyh-internetmagazinov-kratkiy-ekskurs-v-istoriyu/ (дата обращения: 12.04.2020).

5. Навигация на сайте: как правильно её построить. [электронный ресурс] - режим доступа: ‒URL: https://sales-generator.ru/blog/navigatsiya-na-sayte/ (дата обращения: 12.04.2020)

6. Первый сайт. история создания первого сайта в интернете. [электронный ресурс] - Режим доступа: ‒URL: http://post-factum.net/pervyj-sajt-istoriya-sozdaniya-pervogo-internet-sajta/ (дата обращения 13.04.2020)

7. Развитие сайта-магазина. [электронный ресурс] ‒ Режим доступа: ‒ URL: https://inet-shopping.ru/gde-kupit/istoria-internet-magazina (дата обращения 13.04.2020)

8. Требования к навигации сайта. [электронный ресурс] ‒ Режим доступа: ‒ URL: https://fortress-design.com/trebovaniya-k-navigacii-sajta/ (дата обращения 13.04.2020)

9. Как выглядит хорошая навигация сайта.[электронный ресурс] ‒ Режим доступа: ‒ URL: https://wpuroki.ru/prodvizhenie-sajta/xoroshaya-navigaciya-sajta.html (дата обращения 13.04.2020)

10. Как сделать удобную навигацию по сайту.[электронный ресурс] ‒ Режим доступа: ‒ URL: https://webformyself.com/kak-sdelat-udobnuyu-navigaciyu-po-sajtu-yuzabiliti-dlya-chajnikov/ (дата обращения 13.04.2020)

АНТИПЛАГИАТ