Разработка навигации по мобильной версии сайта для интернет – магазина Vzlate.ru

Содержание:

Введение

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

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

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

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

В своей курсовой работе я хочу рассмотреть сайт магазина Vzlate.ru, рассмотрев его полную версию, я сделала выводы, что мобильная версия сайта совершенно не удобна в использовании. Какую навигацию можно назвать хорошей? В первую очередь, если посетитель интуитивно чувствует, куда нужно нажать, чтобы сделать следующий шаг и пользуется ссылками «на автомате». Данный сайт не заточен под размер мобильного экрана, он не удобен и не кликабелен.

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

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

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

Задачи: создать удобный в навигации и понятный пользователю мобильную версию сайта интернет – магазина Vzlate.ru.

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

2. Показать процесс создания навигации по мобильному приложению.

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

1.1. Интернет – дизайн

Веб-дизайн охватывает множество различных навыков и дисциплин в области производства и обслуживания веб-сайтов. Различные области веб-дизайна включают графический дизайн, дизайн интерфейса, авторство, включая стандартизированный код и фирменное программное обеспечение, дизайн пользовательского опыта, и оптимизацию поисковой системы. Часто многие люди работают в командах, охватывающих различные аспекты процесса проектирования, хотя некоторые дизайнеры будут охватывать их все. Термин "веб-дизайн" обычно используется для описания процесса проектирования, относящегося к интерфейсному (клиентскому) дизайну веб-сайта, включая написание разметка. Веб-дизайн частично перекрывает веб-инжиниринг в более широком контексте веб-разработки. Ожидается, что веб-дизайнеры будут знать об удобстве использования, и если их роль включает создание разметки, то они также должны быть в курсе рекомендаций по обеспечению доступности веб-сайтов.

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

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

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

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

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

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

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

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

Компании быстро интегрируют визуальные элементы, поскольку они помогают улучшить взаимодействие на веб-сайте. На самом деле, клиенты в 10 раз чаще взаимодействуют с видео, чем с текстом. В то время как визуальные элементы отлично подходят для взаимодействия и разбиения текста, некоторые предприятия перебарщивают с изображениями. Их сайты переполнены фотографиями и видео. Это заставляет сайт чувствовать себя подавляющим и захламленным.

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

1.2. Восприятие цвета

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

Психология цвета — это изучение цвета в отношении человеческого поведения. Он направлен на определение того, как цвет влияет на наши повседневные решения, такие как предметы, которые мы покупаем. Разве цвет платья заставляет нас покупать его? Может ли цвет кнопки, заставить нас нажать на нее? Короткий ответ-да. Но почему, это часть немного сложнее. Цветовые значения могут оказывать влияние на то, почему мы предпочитаем одни цвета другим. Один и тот же цвет может также иметь различные значения, которые зависят от нашего воспитания, пола, местоположения, ценностей и множества других факторов.

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

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

Рис. 1.1. Схема эмоционального восприятия цветовых оттенков

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

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

Рис. 1.2. Влияние цвета на человека в маркетинге и рекламе

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

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

1.3. Тренды, определяющие дизайн

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

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

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

Отличный пример геометрического дизайна, который использует перспективу, находится на странице дизайнера Брэдли Манковица. Жесткие линии дизайна и мягкие лучи света привлекают ваше внимание к центру страницы (см. рис. 1.3).

Рис. 1.3. Четкие геометрические линии

Дизайн уличного искусства стремительно возвращается в популярный бренд–дизайн, и это неудивительно. Они не только выглядят оригинально, они также звонят в колокол подлинности. Дизайн в стиле стрит-арта выглядит по-разному и оригинально, и он выделяется в море стандартного графического дизайна (см. рис. 1.4). минималистский дизайн

Рис. 1.4. Дизайн в стиле уличного искусства

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

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

.

Рис. 1.5. Минималистичный дизайн

Интересные, Причудливые Иллюстрации. Иллюстрации могут позволить добавить свой собственный уникальный стиль в дизайн. Использование иллюстраций в дизайне–особенно на целевой странице-может помочь описать свой процесс или продукт в фирменном стиле (см. рис. 1.6.).

Рис. 1.6. Необычные иллюстрации

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

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

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

ГЛАВА 2. ПОЛЬЗОВАТЕЛЬСКОЕ МЕНЮ

2.1 Элементы графического меню

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

Уникальные, Веселые Шрифты

Они называются пунктами меню и могут обозначаться текстом или графическими значками — иконками.

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

Главная задача разработчиков — оптимально проработать структуру и сделать удобную навигацию. Поэтому часто используют термин навигационное меню сайта в контексте его основного предназначения.

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

Основные правила и ошибки:

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

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

- Единство оформления. На всех страницах ресурса стиль меню должен оставаться неизменным. Разные варианты будут сбивать пользователя, ухудшать восприятие информации.

- Стандарты верстки. Располагайте меню в общепринятых местах: вверху, справа, слева. Внизу в футере могут быть дублирующие ссылки, но никак не единственный элемент навигации. Пользователи не будут его искать, они просто уйдут. Был пример размещения элемента Корзина на сайте не в стандартном правом верхнем углу, а в левом нижнем. Результат — ее просто не находили.

- Тестирование. Если на старте трудно оценить, какой вариант будет оптимальным, подсмотрите у лидеров в топе. При вводе серьезных многоуровневых веб-проектов полезно проводить тесты на предмет доступности, удобства и т.д.

- Индикация. Настройка отображения меню таким образом, чтобы посетитель ориентировался, в каком разделе находится. Для этого используют выделение активного пункта графикой или цветом (см. рис. 2.1.).

Рис. 2.1. Выделение активного пункта цветом

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

- Меню должно быть понятным. Не пишите неизвестные аббревиатуры, сокращения, иностранные аналоги только потому, что они короче и оригинальнее смотрятся. Посетитель не должен догадываться, что скрывается в разделе Print: печатная продукция или размещение в прессе. Если рассчитываете таким образом заинтриговать, чтобы человек перешел и посмотрел, получите процент отказов под 100.

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

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

- Сегодня правило хорошего тона – верстать сайты с учетом адаптивных версий под мобильные устройства с отличными разрешениями.

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

На итоговые результаты выдачи в поиске могут влиять следующие критерии:

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

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

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

- Если ссылки оформлены в виде графических элементов, нужно прописывать alt и title к ссылкам. Тогда роботы при индексации смогут учесть эти пункты.

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

2.2. UI\UX дизайн

UX — это User Experience (дословно: «опыт пользователя»). То есть это то, какой опыт/впечатление получает пользователь от работы с вашим интерфейсом. Удается ли ему достичь цели и на сколько просто или сложно это сделать.

А UI — это User Interface (дословно «пользовательский интерфейс») — то, как выглядит интерфейс и то, какие физические характеристики приобретает. Определяет, какого цвета будет ваше «изделие», удобно ли будет человеку попадать пальцем в кнопочки, читабельным ли будет текст и тому подобное.

Разница между UX и UI — в том, что UX-дизайнер планирует, как пользователь будет взаимодействовать с интерфейсом, какие шаги ему нужно предпринять, чтобы достичь цели. А UI-дизайнер продумывает, как будут выглядеть эти шаги и путь к цели в целом.

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

ГЛАВА 3. РАЗРАБОТКА И СОЗДАНИЕ ДИЗАЙНА САЙТА

3.1. Проблематика

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

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

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

Сам сайт, на мой взгляд, удачный и удобный в эксплуатации. Все разделы четко распределены, легко найти раздел с интересующим сегментом изделий (см. рис. 3.1). Объектом для проектирования навигации я выбрала мобильную версию сайта (см. рис. 3.2).

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

Рис. 3.1. Сайт ювелирного интернет – магазина Vzlate.ru

Рис. 3.2. Мобильная версия сайта

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

3.2. Техническое задание

Структура сайта. Сайт должен состоять из следующих разделов:

− Главная страница (на ней должны располагаться основные разделы каталога и статьи)

− Каталог (при переходе в интересующий раздел, должны быть фильтры и сортировка изделий)

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

К навигации по страницам сайта предъявляются следующие основные требования:

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

Стиль сайта можно описать, как минималистичный и лакончиный. В качестве цветовой гаммы рекомендуется использовать светлые цвета (цветовая палитра должна соответствовать полноэкранной версии сайта Vzlate.ru).

Все страницы сайта должны:

• быть выполнены в едином стиле и четко идентифицироваться, как составляющие части веб-сайта компании;

• быть выполнены с доминирующим присутствием фирменных цветов, содержать логотип

• все страницы сайта должны содержать элементы, дающие посетителю сайта четкое представление о том, в каком из разделов он находится.

• при добавлении новых элементов на сайт, внешний вид страниц не должен меняться.

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

3.3. Описание концепта и идеи

Мной был проведен анализ других сайтов интернет – магазинов. В ходе исследования, были выявлены их плюсы и минусы. Опираясь на эти данные, я разрабатывала концепт и идею для сайти магазина Vzlate.ru.

Цветовая гамма соответствует гамме основного сайта. Я меняю размещение основных разделов каталога, располагая их в удобном месте для пользователя (см. рис. 3.3). У сайта много разделов и фильтров, для упрощенного поиска изделий. Необходимо разместить их так, чтобы пользователю было интуитивно понятно где располагается интересующий их раздел.

Рис. 3.3. Эскизы страниц сайта

Гамма меню остается такой же, логотип так же остается без изменений. Осиным шрифтом выбран Arsenal (см. рис. 3.4).

Рис. 3.4. Цветовые решения и шрифт

3.3. Разработка визуализации

Основываясь на концепте, цветовой гамме и шрифте, я создала визуальные эскизы интрфейса мобильной версии сайта меню ювелирного интрнет – магазина (см. рис. 3.5.)

Рис. 3.5. Навигация по мобильному сайту

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

телефонов в программе Photoshop (см. рис. 3.6).

Рис. 3. 6. Мокапы сайта

3.5. Расчет стоимости

Расчет стоимости создания мобильной версии навигации сайта для интернет-магазина.

Стоимость одного часа работы дизайнера 600 руб/час.

Концепт. 1 дня (7 рабочих часов)

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

Дизайн. 3 дня (21 рабочих часов)

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

Получается 28 час × 600 р/час = 16800 рублей. Заложим риски на переделки, если заказчик в очередной раз что-то надумает или передумает. Итого, стоимость дизайн – проекта 21000 рублей.

Заключение

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

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

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

Список использованных источников

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

1. Лукина М.М., Фомичева И.Д. (2005) СМИ в пространстве Интернет. / М.,

2. Красносельский С. А. Основы проектирования: учебное пособие. - М.: Директ-Медиа, 2014. – 232. - режим доступа http:// biblioclub.ru

Дополнительная литература:

3. Электронные СМИ: современное состояние и развитие. / Под. ред. М.Н.Кима. СПб.: Изд-во СПбГУП, 2002.

4. Дубровский А.В. (2004) Журналистика и Интернет. Саранск, 2004.

5. Зельдман Дж.(2005) Web-дизайн по стандартам / Пер. с англ. Г.П. Ковалева. – М.:НТ Пресс, 2005.

6. Алан Купер, Роберт М.Рейманн, Дэвид Кронин, Кристофер Носсел. Интерфейс. Основы проектирования взаимодействия. Четвертое издание. – СПБ.: 2017. – с. 720.

7. Тим Кедлек. “Адаптивный дизайн. Делаем сайты для любых устройств” /Ред. СПБ. – с 156

8. Роббинс Дженнифер Нидерст (2008) Web-дизайн. Справочник / Пер. с англ. Казаченко В. И., Лунин Сергей, Петров Александр Васильевич, - с. 395

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

9. Дизайн мания [электронный ресурс] Режим доступа: URL: http://design-mania.ru/category/web-design/articles/ (дата обращения 15. 06. 2020)

10. Веб-дизайнер — творческая интернет-профессия [электронный ресурс] Режим доступа: URL: https://webformyself.com/veb-dizajner-tvorcheskaya-internet-professiya/#more-16253 (дата обращения 15. 06. 2020)