РАЗРАБОТКА ВИЗУАЛЬНОГО СТИЛЯ ВЕБ-ПРИЛОЖЕНИЯ ДЛЯ ЦВЕТОЧНОЙ МАСТЕРСКОЙ «ЦВЕТАЕВА»
|
ВВЕДЕНИЕ 3
ГЛАВА 1. ИНТЕРНЕТ И МОБИЛЬНЫЕ ПРИЛОЖЕНИЕ КАК СРЕДСТВО ПРОДВИЖЕНИЯ ЦВЕТОЧНОЙ ПРОДУКЦИИ 8
1.1. Общие требования к розничной реализации цветочной продукции 8
1.2. Интернет и мобильные приложения как средство продвижения цветочной
продукции 10
1.3. Влияние графического образа мобильного приложения на продвижение товаров 12
1.4. Анализ графического образа зарубежных и отечественных веб-приложений 14
1.5. Анализ потребительских сценариев в сфере услуг 17
ГЛАВА 2. ДИЗАЙН ИНТЕРФЕЙСА ПРИЛОЖЕНИЯ ЦВЕТОЧНОЙ
МАСТЕРСКОЙ «ЦВЕТАЕВА» 20
2.1. Задачи мобильного приложения цветочной мастерской «цветаева». Сценарии
использования приложения 20
2.2. Психологический портрет клиента компании «цветаева», целевая аудитория 22
2.3. Анализ операционных систем 24
2.4. Поиск графической концепции 28
2.4.1. Модульная сетка приложения 30
2.4.2. Цветовое решение 30
2.4.3. Подбор шрифтов 32
2.5. Концептуальное обоснование итогового графического образа 33
ГЛАВА 3. ТЕХНОЛОГИЧЕСКАЯ ЧАСТЬ 36
3.1. Технические требования к макету для ios платформы 36
3.2. Выбор и обоснование программы макетирования adobe experience design 38
3.3. Объектное проектирование: экраны приложения 39
ЗАКЛЮЧЕНИЕ 42
СПИСОК ЛИТЕРАТУРЫ 44
ПРИЛОЖЕНИЕ А 48
ПРИЛОЖЕНИЕ Б 52
ПРИЛОЖЕНИЕ В 64
ГЛАВА 1. ИНТЕРНЕТ И МОБИЛЬНЫЕ ПРИЛОЖЕНИЕ КАК СРЕДСТВО ПРОДВИЖЕНИЯ ЦВЕТОЧНОЙ ПРОДУКЦИИ 8
1.1. Общие требования к розничной реализации цветочной продукции 8
1.2. Интернет и мобильные приложения как средство продвижения цветочной
продукции 10
1.3. Влияние графического образа мобильного приложения на продвижение товаров 12
1.4. Анализ графического образа зарубежных и отечественных веб-приложений 14
1.5. Анализ потребительских сценариев в сфере услуг 17
ГЛАВА 2. ДИЗАЙН ИНТЕРФЕЙСА ПРИЛОЖЕНИЯ ЦВЕТОЧНОЙ
МАСТЕРСКОЙ «ЦВЕТАЕВА» 20
2.1. Задачи мобильного приложения цветочной мастерской «цветаева». Сценарии
использования приложения 20
2.2. Психологический портрет клиента компании «цветаева», целевая аудитория 22
2.3. Анализ операционных систем 24
2.4. Поиск графической концепции 28
2.4.1. Модульная сетка приложения 30
2.4.2. Цветовое решение 30
2.4.3. Подбор шрифтов 32
2.5. Концептуальное обоснование итогового графического образа 33
ГЛАВА 3. ТЕХНОЛОГИЧЕСКАЯ ЧАСТЬ 36
3.1. Технические требования к макету для ios платформы 36
3.2. Выбор и обоснование программы макетирования adobe experience design 38
3.3. Объектное проектирование: экраны приложения 39
ЗАКЛЮЧЕНИЕ 42
СПИСОК ЛИТЕРАТУРЫ 44
ПРИЛОЖЕНИЕ А 48
ПРИЛОЖЕНИЕ Б 52
ПРИЛОЖЕНИЕ В 64
В связи с развитием интернета большой успех получили покупки и продажи посредством социальных сетей или мобильных приложений, предназначенных специально для этого. В настоящий момент через интернет стало возможным приобрести любой продукт, представленный на рынке, в том числе и цветы. Но, неудобство состоит в том, что страницы сайтов, по большей части, не разработаны под смартфоны. Поэтому актуальной проблемой является продвижение посредством дизайна мобильного приложения флористических услуг.
Существует множество сайтов, задачей которых является обеспечение процесса заказа в данном случае букетов цветов. Однако большинство данных сайтов создают определенные трудности для клиентов, а именно специально созданная для сайта сетка с трудом читается на таком носителе, как смартфон. В результате данная проблема может привести к потере потенциального клиента, так как времени, потраченное на поиск по сайту, будет затрачиваться больше. В добавок, стоит вспомнить о рекламе, которая всплывает на весь экран. К счастью, существуют сайты, сетка которых адаптирована для экрана телефона. Но все же сайты предназначены для использования персонального компьютера (далее ПК). Зачастую разработчики мобильных приложений создают идентичную версию web-сайта, только на другом носителе. Из-за чего возникает вопрос: каким должен быть интерфейс мобильного приложения для заказа товаров?
Очень важный аспект в создании интерфейса для приложения - это функциональность. Развитие концепции, которую привнесли и реализовали мобильные устройства, а именно «устройство всегда с собой» очень сильно изменило вектор развития социальных сетей, web-сайтов и мобильных приложений. Исходя из этого, стоит отметить, что приложение для смартфона должно быть удобнее и проще по своей функциональности, чем web-сайт.
На данный момент в России существует несколько приложений для заказа цветов, однако принадлежат они не отдельно взятым частным компаниям. Эти приложения охватывают весь цветочный рынок, их можно сравнить с выставкой, где магазины из разных городов представляют потенциальным покупателям свой товар - цветы. Информация по этим приложениям будет более подробно описана в Главе 1. Следует отметить, что частные магазины, не имеющие собственного приложения, не страдают от нехватки клиентов. Приложение, для цветочного магазина, само по себе и не нужно, но, если оно все же есть, то оно предоставляет большое преимущество предпринимателю и его бизнесу. Именно для такого человека, который готов укрепить свой бизнес и выйти на новый уровень в своем деле, появилась цель - создать приложение для цветочной мастерской «Цветаева».
Мастерская «Цветаева» - это уютная мастерская, где ежедневно создаются букеты для самых разных поводов. Компания уже имеет свой web-сайт, через который клиенты могут ознакомиться о всей необходимой информации и заказать букет цветов. Мастерская позиционирует себя как интернет-магазин, имеет свои страницы в социальных сетях, а именно в Instagram, Twitter, Facebook, Одноклассники и Вконтакте. Потребность в мобильном приложении обусловлена потребностью увеличения продаж роз и букетов в дизайнерских коробках.
Объект исследование бакалаврской работы - мобильные приложения и их интерфейс.
Предметом исследования является интерфейс мобильного приложения для мастерской «Цветаева».
Для дипломного проекта были проанализированы работы специалистов в области дизайна приложений, такие как:
• «Отзывчивый веб-дизайн», И. Маркотт отвечает на два важных вопроса, относящихся к дизайну интерфейса: “Почему же интернет такой неповоротливый? Или вы просто не адаптировали ваш сайт к мобильным устройствам?”
• «Книга идей веб-разработчика», автор П. Макнейл. Книга включает в себя более 650 отобранных примеров различно оформленных сайтов, благодаря которым можно отыскать креативные образы для своей работы. Также в данном издании детально рассматриваются различные доступные системы управления содержимым, что позволяет отыскать наилучшую платформу для проекта.
• «Сначала мобильные!», Л. Вроблевски. В книге описывается поведение пользователей, базовые навыки контента, использование и взаимодействие с интерфейсом, также, сравнение хороших и плохих принципов веб-дизайна.
Приведенные книги можно отнести к пособию для создания веб-приложений.
Таким образом, изучая и опираясь на информацию в них, можно понять принцип работы приложения и взаимодействие потребителя и интерфейса.
Цель работы заключается в разработке функционального и примечательного дизайна интерфейса мобильного приложения для мастерской «Цветаева», которое бы позволило клиентам легко совершать заказ букетов.
Для достижения поставленной цели требуется решить следующие задачи:
1. проанализировать интерфейсы приложений, специализирующихся на продаже товаров и услуг, выявить главные тенденции в дизайне;
2. исследовать операционные системы и web-платформы, их функции;
3. изучить архитектуру интерфейсов и выбрать подходящую к определенной операционной системе;
4. исследовать целевую аудиторию мастерской «Цветаева», которая пользуется услугами заказа цветов через Интернет или социальные сети, выделить основные группы;
5. создать визуальный образ приложения, которое будет удовлетворять требованиям компании.
Методы исследования дипломной работы:
1. Метод синтеза и обобщений;
2. Метод классификации, сравнений;
3. Метод стилистического анализа;
4. Моделирование психологического портрета клиента мастерской «Цветаева»;
Новизна темы обусловлена созданием нестандартного мобильного интерфейса, разработанного специально для определенной целевой аудитории. Под нестандартным подразумевается совершенно новый формат приложения, подразумевающий не дублирование функций сайта, а направленность на минимальное количество конкретных задач, а именно:
• флористический-конструктор,
• календарь (с push-уведомлениями),
• быстрый заказ букета, с помощью генерируемых вопросов.
Практическая значимость работы заключается в том, что разработанное приложение поможет увеличить продажи определенных товаров, таких как розы. Кроме того, приложение для мастерской «Цветаева» поможет в снижении себестоимости букетов и сокращению затрат на рекламу.
Структура работы. Работа состоит из введения, трех глав, заключения, списка использованной литературы и приложений.
Во введении обосновывается актуальность и востребованность изучения выбранной темы, ставятся цели и задачи, характеризуется материал исследования и методология, теоретическая и практическая область применения, описывается структура работы.
Первая глава содержит теоретические положения работы. Проводится анализ мобильных приложений, их особенности и черты. Также определяются общие требования к мобильным приложениям.
Во второй главе представлена разработка интерфейса мобильного приложения для мастерской «Цветаева». Составляется психологический портрет клиента, производиться анализ операционных систем и поиск графической концепции, также обосновывается выбор цвета, шрифтов и модульной сетки.
В третьей главе представлена технологическая часть и макеты окон готового приложения.
В заключении бакалаврской работы приводятся результаты проведенной работы и намечаются дальнейшие ее перспективы.
Также к каждой главе прикреплены приложения, необходимые для предоставления визуального ряда аналогов мобильных приложений и сайтов, отсканированного эскизного ряда и полного визуального разбора работы над интерфейсом мобильного приложения. Текстовая часть ВКР подкрепляется приложениями для того, что бы видеть ход работы над дипломным проектом.
Существует множество сайтов, задачей которых является обеспечение процесса заказа в данном случае букетов цветов. Однако большинство данных сайтов создают определенные трудности для клиентов, а именно специально созданная для сайта сетка с трудом читается на таком носителе, как смартфон. В результате данная проблема может привести к потере потенциального клиента, так как времени, потраченное на поиск по сайту, будет затрачиваться больше. В добавок, стоит вспомнить о рекламе, которая всплывает на весь экран. К счастью, существуют сайты, сетка которых адаптирована для экрана телефона. Но все же сайты предназначены для использования персонального компьютера (далее ПК). Зачастую разработчики мобильных приложений создают идентичную версию web-сайта, только на другом носителе. Из-за чего возникает вопрос: каким должен быть интерфейс мобильного приложения для заказа товаров?
Очень важный аспект в создании интерфейса для приложения - это функциональность. Развитие концепции, которую привнесли и реализовали мобильные устройства, а именно «устройство всегда с собой» очень сильно изменило вектор развития социальных сетей, web-сайтов и мобильных приложений. Исходя из этого, стоит отметить, что приложение для смартфона должно быть удобнее и проще по своей функциональности, чем web-сайт.
На данный момент в России существует несколько приложений для заказа цветов, однако принадлежат они не отдельно взятым частным компаниям. Эти приложения охватывают весь цветочный рынок, их можно сравнить с выставкой, где магазины из разных городов представляют потенциальным покупателям свой товар - цветы. Информация по этим приложениям будет более подробно описана в Главе 1. Следует отметить, что частные магазины, не имеющие собственного приложения, не страдают от нехватки клиентов. Приложение, для цветочного магазина, само по себе и не нужно, но, если оно все же есть, то оно предоставляет большое преимущество предпринимателю и его бизнесу. Именно для такого человека, который готов укрепить свой бизнес и выйти на новый уровень в своем деле, появилась цель - создать приложение для цветочной мастерской «Цветаева».
Мастерская «Цветаева» - это уютная мастерская, где ежедневно создаются букеты для самых разных поводов. Компания уже имеет свой web-сайт, через который клиенты могут ознакомиться о всей необходимой информации и заказать букет цветов. Мастерская позиционирует себя как интернет-магазин, имеет свои страницы в социальных сетях, а именно в Instagram, Twitter, Facebook, Одноклассники и Вконтакте. Потребность в мобильном приложении обусловлена потребностью увеличения продаж роз и букетов в дизайнерских коробках.
Объект исследование бакалаврской работы - мобильные приложения и их интерфейс.
Предметом исследования является интерфейс мобильного приложения для мастерской «Цветаева».
Для дипломного проекта были проанализированы работы специалистов в области дизайна приложений, такие как:
• «Отзывчивый веб-дизайн», И. Маркотт отвечает на два важных вопроса, относящихся к дизайну интерфейса: “Почему же интернет такой неповоротливый? Или вы просто не адаптировали ваш сайт к мобильным устройствам?”
• «Книга идей веб-разработчика», автор П. Макнейл. Книга включает в себя более 650 отобранных примеров различно оформленных сайтов, благодаря которым можно отыскать креативные образы для своей работы. Также в данном издании детально рассматриваются различные доступные системы управления содержимым, что позволяет отыскать наилучшую платформу для проекта.
• «Сначала мобильные!», Л. Вроблевски. В книге описывается поведение пользователей, базовые навыки контента, использование и взаимодействие с интерфейсом, также, сравнение хороших и плохих принципов веб-дизайна.
Приведенные книги можно отнести к пособию для создания веб-приложений.
Таким образом, изучая и опираясь на информацию в них, можно понять принцип работы приложения и взаимодействие потребителя и интерфейса.
Цель работы заключается в разработке функционального и примечательного дизайна интерфейса мобильного приложения для мастерской «Цветаева», которое бы позволило клиентам легко совершать заказ букетов.
Для достижения поставленной цели требуется решить следующие задачи:
1. проанализировать интерфейсы приложений, специализирующихся на продаже товаров и услуг, выявить главные тенденции в дизайне;
2. исследовать операционные системы и web-платформы, их функции;
3. изучить архитектуру интерфейсов и выбрать подходящую к определенной операционной системе;
4. исследовать целевую аудиторию мастерской «Цветаева», которая пользуется услугами заказа цветов через Интернет или социальные сети, выделить основные группы;
5. создать визуальный образ приложения, которое будет удовлетворять требованиям компании.
Методы исследования дипломной работы:
1. Метод синтеза и обобщений;
2. Метод классификации, сравнений;
3. Метод стилистического анализа;
4. Моделирование психологического портрета клиента мастерской «Цветаева»;
Новизна темы обусловлена созданием нестандартного мобильного интерфейса, разработанного специально для определенной целевой аудитории. Под нестандартным подразумевается совершенно новый формат приложения, подразумевающий не дублирование функций сайта, а направленность на минимальное количество конкретных задач, а именно:
• флористический-конструктор,
• календарь (с push-уведомлениями),
• быстрый заказ букета, с помощью генерируемых вопросов.
Практическая значимость работы заключается в том, что разработанное приложение поможет увеличить продажи определенных товаров, таких как розы. Кроме того, приложение для мастерской «Цветаева» поможет в снижении себестоимости букетов и сокращению затрат на рекламу.
Структура работы. Работа состоит из введения, трех глав, заключения, списка использованной литературы и приложений.
Во введении обосновывается актуальность и востребованность изучения выбранной темы, ставятся цели и задачи, характеризуется материал исследования и методология, теоретическая и практическая область применения, описывается структура работы.
Первая глава содержит теоретические положения работы. Проводится анализ мобильных приложений, их особенности и черты. Также определяются общие требования к мобильным приложениям.
Во второй главе представлена разработка интерфейса мобильного приложения для мастерской «Цветаева». Составляется психологический портрет клиента, производиться анализ операционных систем и поиск графической концепции, также обосновывается выбор цвета, шрифтов и модульной сетки.
В третьей главе представлена технологическая часть и макеты окон готового приложения.
В заключении бакалаврской работы приводятся результаты проведенной работы и намечаются дальнейшие ее перспективы.
Также к каждой главе прикреплены приложения, необходимые для предоставления визуального ряда аналогов мобильных приложений и сайтов, отсканированного эскизного ряда и полного визуального разбора работы над интерфейсом мобильного приложения. Текстовая часть ВКР подкрепляется приложениями для того, что бы видеть ход работы над дипломным проектом.
В ходе исследования были проанализированы отечественные и зарубежные мобильные приложения, их интерфейсы, функциональность и общий дизайн. Также было проанализировано много специальной литературы, онлайн ресурсов и различных информационных источников по графическому дизайну, маркетингу, так же программированию мобильных приложений.
Дипломная работа проходила в несколько этапов, благодаря которым, в результате был разработан интерфейс для мобильного приложения «Цветаева».
Первым этапом был сбор информации о компании, в которой проходила преддипломная практика. Узнав структуру и работу мастерской «Цветаева» началась работа над определением целевой аудитории и ее ядра. Были проведены опросы клиентов мастерской в результате которых были выяснены их доходы, возрастная группа, область работы и заработок. Также, был проведен опрос о операционных системах пользователей. Исходя из этих данных было выделено три основных группы мужчин, для которых начался этап разработки интерфейса мобильного приложения.
Этап разработки начался с постановки задач мобильного приложения «Цветаева». Во-первых, функциональность и удобность в использовании. Во- вторых, использование легкого входа и авторизации пользователя. В-третьих, легкий и быстрый выбор товара, в данном случае букета, а также отслеживание курьерской доставки по карте. В-четвертых, создание максимально простого, интуитивного и стильного интерфейса. Платформа выбранная в ходе опроса полностью отвечала требованием поставленных задач.
После постановки задач и утверждение их начался этап эскизирования, поиск аналогов и параллельно создавался список пользовательских сценариев. Пользовательские сценарии важны для разработки приложения, так как они помогают простроить кратчайший путь от пользователя до совершения заказа. Благодаря этой информации было определено точное количество шагов пользователя и экранов, так же функции необходимые для комфортного пользования приложением.
Следующим этапом разрабатывался интерфейс приложения. Была выявлена его стилистика, подобран шрифт и определено цветовое решение. Также была подобрана модульная сетка приложения и по ней размещались все необходимые объекты: кнопки, плашки, направляющие, фотографии и информация. Далее интерфейс приложения был собран, запущен и протестирован в программе, в которой он создавался.
На заключительном этапе макеты окон и пояснительная часть дипломной работы были выведены в презентацию.
Таким образом, по окончанию практики все поставленные цели и задачи были достигнуты. Был создан удобный интерфейс, отвечающий всем поставленным требованиям мастерской «Цветаева». Также был получен бесценный опыт в работе с приложениями. Все имеющиеся знания были закреплены и применены на практике. Кроме того, выполнение дипломного проекта способствовало формированию и систематизации профессиональных навыков в области самостоятельной, исследовательской, творческой и проектной деятельности.
Дипломная работа проходила в несколько этапов, благодаря которым, в результате был разработан интерфейс для мобильного приложения «Цветаева».
Первым этапом был сбор информации о компании, в которой проходила преддипломная практика. Узнав структуру и работу мастерской «Цветаева» началась работа над определением целевой аудитории и ее ядра. Были проведены опросы клиентов мастерской в результате которых были выяснены их доходы, возрастная группа, область работы и заработок. Также, был проведен опрос о операционных системах пользователей. Исходя из этих данных было выделено три основных группы мужчин, для которых начался этап разработки интерфейса мобильного приложения.
Этап разработки начался с постановки задач мобильного приложения «Цветаева». Во-первых, функциональность и удобность в использовании. Во- вторых, использование легкого входа и авторизации пользователя. В-третьих, легкий и быстрый выбор товара, в данном случае букета, а также отслеживание курьерской доставки по карте. В-четвертых, создание максимально простого, интуитивного и стильного интерфейса. Платформа выбранная в ходе опроса полностью отвечала требованием поставленных задач.
После постановки задач и утверждение их начался этап эскизирования, поиск аналогов и параллельно создавался список пользовательских сценариев. Пользовательские сценарии важны для разработки приложения, так как они помогают простроить кратчайший путь от пользователя до совершения заказа. Благодаря этой информации было определено точное количество шагов пользователя и экранов, так же функции необходимые для комфортного пользования приложением.
Следующим этапом разрабатывался интерфейс приложения. Была выявлена его стилистика, подобран шрифт и определено цветовое решение. Также была подобрана модульная сетка приложения и по ней размещались все необходимые объекты: кнопки, плашки, направляющие, фотографии и информация. Далее интерфейс приложения был собран, запущен и протестирован в программе, в которой он создавался.
На заключительном этапе макеты окон и пояснительная часть дипломной работы были выведены в презентацию.
Таким образом, по окончанию практики все поставленные цели и задачи были достигнуты. Был создан удобный интерфейс, отвечающий всем поставленным требованиям мастерской «Цветаева». Также был получен бесценный опыт в работе с приложениями. Все имеющиеся знания были закреплены и применены на практике. Кроме того, выполнение дипломного проекта способствовало формированию и систематизации профессиональных навыков в области самостоятельной, исследовательской, творческой и проектной деятельности.
