Файл: Проектирование и выполнение проекта в материале. Навигация сайта-магазина.pdf

Введение

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

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

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

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

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

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

Задачи:

• Изучить литературу по данной теме;
• Изучить историю развития веб-дизайна;
• Изучить основные этапы разработки интернет-магазина;
• Выделить основные функции навигации сайта;
• Разработать элементы навигации интернет-магазина.

ГЛАВА 1. ТЕОРЕТИЧЕСКИЕ АСПЕКТЫ

---

1.1. История возникновения веб-дизайна

В 1990 году мир увидел первую веб-страницу — info.cern.ch. На сайте был лишь текст и ссылки (см. рис. 1.1). Первая версия HTML не позволяла визуализировать веб-страницы и придавать им индивидуальный лоск. Сплошь «текстовые» сайты просуществовали до 1994 года. Первые веб-дизайнеры — это люди без художественного образования, но умеющие писать на HTML.

Рис. 1.1. Первая веб-страница

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

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

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

Еще один качественный прорыв история развития web-дизайна совершила в 2000-е годы, когда технология CSS (Cascading Style Sheets) позволила отделить содержимое веб-страниц от их оформления. 2004–2006 годы считаются началом эры WEB-2.0 (см. рис. 1.2).

Рис. 1.2. Пример веб-страницы эры WEB-2.0

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

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

До 2007-го года просмотр веба на мобильных телефонах был испытанием не для слабонервных. Появление iPhone и массовое распространение социальных сетей дало толчок развитию мобильных приложений и веб-сайтов.

---

История web-дизайна ознаменовалась новыми проблемами. Стоит ли пытаться отобразить полноценную версию сайта на крохотном экране мобильного телефона, или от некоторых элементов макета лучше отказаться? Куда вставлять рекламу? Как загрузить на телефон весь контент сайта с этой позорной скоростью мобильного интернета?

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

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

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

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

В 2011-м году у веб-дизайнеров наконец-то начинает появляться художественный вкус, и на смену «карамельной» моде приходит натуралистический дизайн (см. рис. 1.3).

Рис. 1.3. Пример натуралистического дизайна

Характерными чертами можно назвать «кожаный» фон приложения-календаря у iOS или трехмерную иконку «мусорной корзины».

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

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

---

Рис. 1.4. Дизайн веб-страницы 2012 года

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

Прекрасно сочетается с Flat 2.0 такое направление, как Google Material Design (материальный дизайн), с его визуальными подсказками в виде интересной игры движений, света и теней.

Сейчас в моде также длительный скроллинг, винтажный стиль с пикселизированными картинками и галактическими фонами, визуальные элементы с большим разрешением (см. рис. 1.5).

Рис. 1.5. Современный дизайн сайта

1.2. Этапы разработки интернет-магазина

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

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

1. Сбор требований (брифинг)

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

---

1. Цели проекта и клиента

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

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

1. ЦА и персонажи

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

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

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

После подробного портрета ЦА можно приступать к персонажам. Это очень полезный прием для дальнейшей генерации идей. Имея понимание, кто ЦА в общем, её нужно разбить на группы типовых пользователей будущего проекта. Исходя из тематики проекта, группы можно объединять по роду деятельности, владению каким-то предметом, потребностям и т.д.

Для каждой группы придумывается типичный персонаж, который является представителем именно этой целевой группы. В идеале найти несколько живых людей и пообщаться с ними об их образе жизни. У каждого такого персонажа должно быть: имя-фамилия (использовать известных людей или знакомых – запрещено, чтобы не искажать восприятие), фотография (можно найти красивую аватарку в поиске VK), возраст, город проживания, род занятий, семейное положение, краткое описание его деятельности, привычек, задач, проблем, пользовательского опыта.

1. Исследование конкурентов

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

---