ИЛЛЮСТРАЦИЯ КАК ИНСТРУМЕНТ UX/UI ДИЗАЙНА (НА ПРИМЕРЕ СОЗДАНИЯ ИЛЛЮСТРАТИВНОГО ПРОМО-САЙТА ДЛЯ ИСТОРИЧЕСКОГО ФАКУЛЬТЕТА ТГУ)
|
ВВЕДЕНИЕ 3
ГЛАВА 1. Роль и значение иллюстрации в UX/UI дизайне 6
1.1 Различие и особенности UX/UI дизайна 6
1.2 Иллюстрация, как способ визуальной коммуникации 16
ГЛАВА 2: Создание иллюстративной промо-страницы для абитуриентов
исторического факультета ТГУ 31
2.1 Проектирование посадочной страницы 31
2.2 Выбор стилистики 46
3.3 Создание иллюстраций 53
Заключение 73
Список использованных источников и литературы 76
ГЛАВА 1. Роль и значение иллюстрации в UX/UI дизайне 6
1.1 Различие и особенности UX/UI дизайна 6
1.2 Иллюстрация, как способ визуальной коммуникации 16
ГЛАВА 2: Создание иллюстративной промо-страницы для абитуриентов
исторического факультета ТГУ 31
2.1 Проектирование посадочной страницы 31
2.2 Выбор стилистики 46
3.3 Создание иллюстраций 53
Заключение 73
Список использованных источников и литературы 76
Недостаточно просто расположить информацию на сайте, ожидая, что потребитель сможет быстро найти ее, и удовлетвориться результатом поиска. Она должна быть представлена так, чтобы люди воспринимали и понимали её с лёгкостью. Поэтому самые интересные и передовые решения в подаче информации могут потерпеть неудачу, если пользователи не смогут понять, как с ней обращаться. В тоже время, качественно разработанный UX-сценарий (то, как пользователь взаимодействует с продуктом в рамках конкретного проекта) является существенным преимуществом в борьбе за привлечение и удержание пользователей.
В течение нескольких лет мы могли наблюдать рост числа иллюстративных сайтов, самых разных тематик и категорий: от образовательных проектов до сайтов крупных продуктовых компаний. С чем связан такой спрос на иллюстрацию? Для каких целей сайты используют ее? Может ли иллюстрация быть не просто красивой картинкой на сайте, а стать частью интерфейса?
Как сказал Томер Шарон, старший исследователь UX в Google, дизайн UX — это искусство и наука создания положительных эмоций через взаимодействие с продуктом . В выпускной квалификационной работе будет рассмотрено значение иллюстрации в веб-дизайне, ее влияний на опыт пользователя (UX) и на пользовательский интерфейс (UI). Чтобы понять, как иллюстрация может влиять на пользовательский опыт и взаимодействие, необходимо понять и установить, что такое UX/UI дизайн, сформулировать методы и цели применения иллюстрации в веб-дизайне. Кроме этого, мы практически проверим, как иллюстрация может быть инструментом решения конкретных задач в ходе проектирования интерфейса.
Актуальность работы подтверждается тем, что уже несколько лет в трендах веб-дизайна использование графических иллюстраций в качестве инструмента UX/UI занимает устойчивую позицию. Большие сайты, приложения, социальные сети используют не просто иконки, а целые иллюстрации для объяснения своих процессов, значимости их продуктов и просто эмоционального воздействия на пользователя. Данная тенденция обусловлена тем, что идет переход от использования стоковых фотографий и изображений к более индивидуальным способам раскрытия брендов. Повышается ценность ручного и авторского труда.
В качестве проектной работы мы представляем дизайн промо-сайта для исторического факультета ТГУ. Заказчиком данного проекта является, непосредственно, исторический факультет, который ведет борьбу за абитуриентов, старается популяризировать свои специальности среди выпускников, создать образ интересного и актуального образования, несмотря на всю сложность изучения и подачи исторической науки. Задача лендинга — максимально облегчить понимание специальностей у абитуриентов, привлечь их к данной гуманитарной науке, заинтересовать. Для решения этих задач, был выбран иллюстративный стиль промо-страницы. Особенностью данной работы является то, что иллюстрация в дизайне конкретного проекта может стать инструментом навигации по сложному контенту, элементом взаимодействия с пользователем на эмоциональном и понятном ему уровне. В ходе работы над данным проектом, я применяю на себе разные роли: аналитика, проектировщика, дизайнера и иллюстратора. Данный проект был выбран для того, чтобы иметь возможность опробовать себя в разных профессиональных областях. Дипломный проект имеет для меня большое значение, как теоретическое, так и практическое, и очень важен для моего развития, как дизайнера-иллюстратора.
Работа носит проектный характер. Объектом исследования является иллюстрация и пользовательский интерфейс, предметом изучения — особенности применения иллюстрации, как инструмента UX/UI дизайна в контексте решения конкретных прикладных задач.
Главной целью работы является разработка промо-страницы для абитуриентов по заказу исторического факультета ТГУ, — этот проект должен быть понятным, наглядным и решать проблемы заказчика и аудитории (в данном случае, абитуриентов ТГУ). В ходе работы будут решен следующий ряд задач:
1. Описание понятий UX/UI дизайна
2. Выявление основных целей применения иллюстраций в веб-дизайне
3. Проведение анализа аудитории проекта и их потребностей
4. Создание иллюстраций для лендинга
5. Создание дизайна лендинга с использованием иллюстраций.
Для решения поставленных задач были использованы теоретические работы западных и отечественных исследователей в сфере графического дизайна, UX/UI дизайна, психологии, маркетинге, иллюстрации. Мы обратились к таким исследователям и дизайнерам как: Алан Купер, Якоб Нильсон, Стив Круг, Джесс Гаррет, Яна Франк, Расс Унгер, Кэролайн Чендлер. В практической части работы представлен результат проектной деятельности.
В течение нескольких лет мы могли наблюдать рост числа иллюстративных сайтов, самых разных тематик и категорий: от образовательных проектов до сайтов крупных продуктовых компаний. С чем связан такой спрос на иллюстрацию? Для каких целей сайты используют ее? Может ли иллюстрация быть не просто красивой картинкой на сайте, а стать частью интерфейса?
Как сказал Томер Шарон, старший исследователь UX в Google, дизайн UX — это искусство и наука создания положительных эмоций через взаимодействие с продуктом . В выпускной квалификационной работе будет рассмотрено значение иллюстрации в веб-дизайне, ее влияний на опыт пользователя (UX) и на пользовательский интерфейс (UI). Чтобы понять, как иллюстрация может влиять на пользовательский опыт и взаимодействие, необходимо понять и установить, что такое UX/UI дизайн, сформулировать методы и цели применения иллюстрации в веб-дизайне. Кроме этого, мы практически проверим, как иллюстрация может быть инструментом решения конкретных задач в ходе проектирования интерфейса.
Актуальность работы подтверждается тем, что уже несколько лет в трендах веб-дизайна использование графических иллюстраций в качестве инструмента UX/UI занимает устойчивую позицию. Большие сайты, приложения, социальные сети используют не просто иконки, а целые иллюстрации для объяснения своих процессов, значимости их продуктов и просто эмоционального воздействия на пользователя. Данная тенденция обусловлена тем, что идет переход от использования стоковых фотографий и изображений к более индивидуальным способам раскрытия брендов. Повышается ценность ручного и авторского труда.
В качестве проектной работы мы представляем дизайн промо-сайта для исторического факультета ТГУ. Заказчиком данного проекта является, непосредственно, исторический факультет, который ведет борьбу за абитуриентов, старается популяризировать свои специальности среди выпускников, создать образ интересного и актуального образования, несмотря на всю сложность изучения и подачи исторической науки. Задача лендинга — максимально облегчить понимание специальностей у абитуриентов, привлечь их к данной гуманитарной науке, заинтересовать. Для решения этих задач, был выбран иллюстративный стиль промо-страницы. Особенностью данной работы является то, что иллюстрация в дизайне конкретного проекта может стать инструментом навигации по сложному контенту, элементом взаимодействия с пользователем на эмоциональном и понятном ему уровне. В ходе работы над данным проектом, я применяю на себе разные роли: аналитика, проектировщика, дизайнера и иллюстратора. Данный проект был выбран для того, чтобы иметь возможность опробовать себя в разных профессиональных областях. Дипломный проект имеет для меня большое значение, как теоретическое, так и практическое, и очень важен для моего развития, как дизайнера-иллюстратора.
Работа носит проектный характер. Объектом исследования является иллюстрация и пользовательский интерфейс, предметом изучения — особенности применения иллюстрации, как инструмента UX/UI дизайна в контексте решения конкретных прикладных задач.
Главной целью работы является разработка промо-страницы для абитуриентов по заказу исторического факультета ТГУ, — этот проект должен быть понятным, наглядным и решать проблемы заказчика и аудитории (в данном случае, абитуриентов ТГУ). В ходе работы будут решен следующий ряд задач:
1. Описание понятий UX/UI дизайна
2. Выявление основных целей применения иллюстраций в веб-дизайне
3. Проведение анализа аудитории проекта и их потребностей
4. Создание иллюстраций для лендинга
5. Создание дизайна лендинга с использованием иллюстраций.
Для решения поставленных задач были использованы теоретические работы западных и отечественных исследователей в сфере графического дизайна, UX/UI дизайна, психологии, маркетинге, иллюстрации. Мы обратились к таким исследователям и дизайнерам как: Алан Купер, Якоб Нильсон, Стив Круг, Джесс Гаррет, Яна Франк, Расс Унгер, Кэролайн Чендлер. В практической части работы представлен результат проектной деятельности.
В ходе работы мы не только выяснили, что иллюстрация является частью UX/UI дизайна, может быть как визуальным элементом страницы, так и частью пользовательского интерфейса (навигации по контенту сайта). Кроме того, использование набирает популярность и обороты за счет большого количества приложений и лендингов направленных под конкретную аудиторию. Можно предположить, что тенденция к использованию иллюстраций в веб сайтах и мобильных приложениях только вырастет, так как иллюстрация является порой наиболее удобным способом передачи нужного информационного сообщения, интересным и запоминающимся способом визуальной коммуникации и взаимодействия с пользователем. Также можно сделать вывод, что использование иллюстраций и назначение целей для них, происходит на этапе проектирования: когда проводится исследование аудитории и конкурентов, можно понять насколько эффективен будет использование иллюстраций в дизайне, как пользователи могут к ним относитесь и насколько прогрессивная аудитория, чтобы вводить иллюстраци как элемент интерфейса. Кроме этого, иллюстрация важна в проектировании на этапе создания функционала, когда закладываются смыслы и действия в блоки.
Для того, чтобы иллюстрация стала инструментом UI/UX дизайна, нужно не бояться экспериментировать. Объяснять сложные для восприятия данные с помощью иллюстраций, взаимодействовать с пользователем с помощью элементов геймификации, уроков и подсказок. Иллюстрация в UX-дизайне, это не только функционал, но и заложенный смысл, сообщение, который хочет донести проектировщик по конечного потребителя.
В этой работе использованы метод уровней проектирования, выделены способы создания иллюстрации, как визуального элемента веб-сайта, способы использования иллюстрации для улучшения пользовательского интерфейса.
В ходе работы был рассмотрен потенциал иллюстрации как элемента веб-дизайна. Было выявлено, что с помощью иллюстрации можно раскрыть суть передаваемого сообщения. Для нашего проекта было важно, чтобы иллюстрация не только раскрывала сопутствующий его текста, но и могла сама передать смысл информации. Для этого я создавала образы специальностей, чтобы они были максимально понятны для абитуриентов.
Также, было отмечено, как иллюстрация воздействует на эмоциональную сторону потребителя. С помощью принципов психологии и созданного дизайна мы воздействуем на абитуриента: говорим с ним на одном языке, создаем образ, с которым он может себя ассоциировать. С помощью несложных и интересных сюжетов мы оставляем впечатление о специальностях и факультете в сознании абитуриента.
Кроме этого иллюстрация создает иллюзию прямого взаимодействия с потребителем, когда является реакцией на его действия, например, похвала и как индикатор успешного выполнения действия.
Помимо этого, иллюстрация может быть частью геймификации, как средство поощрения, награды пользователя за его действия. В результатах теста сайт хвалит пользователя за его действия, награждает его позитивной информацией и вовлекает в игровой процесс.
В итоге, иллюстрация может стать инструментом навигации по контенту в рамках конкретных прикладных задач, вести пользователя по сложному тексту, облегчая его восприятие и создавай впечатление интересной и актуальной информации.
В процессе работы был нарисован дизайн лендинга для исторического факультета, были использованы такие навыки, как проектирование, дизайн сайтов, иллюстрирование. В общем и целом, нам удалось создать полноценный проект лендинга для абитуриента, выполнить задачи, стоящие перед промо-страницей исторического факультета, преобразовать сложную и научную подачу факультета в интересную и легкую форму восприятия, описать процесс создания сайта, на основе полученной теоретической базы. В первой части работы мы смогли проанализировать роли иллюстрации в UX/UI дизайне и применить полученные знания на практике.
В перспективе планируется разработать мобильную версию сайта.
Для того, чтобы иллюстрация стала инструментом UI/UX дизайна, нужно не бояться экспериментировать. Объяснять сложные для восприятия данные с помощью иллюстраций, взаимодействовать с пользователем с помощью элементов геймификации, уроков и подсказок. Иллюстрация в UX-дизайне, это не только функционал, но и заложенный смысл, сообщение, который хочет донести проектировщик по конечного потребителя.
В этой работе использованы метод уровней проектирования, выделены способы создания иллюстрации, как визуального элемента веб-сайта, способы использования иллюстрации для улучшения пользовательского интерфейса.
В ходе работы был рассмотрен потенциал иллюстрации как элемента веб-дизайна. Было выявлено, что с помощью иллюстрации можно раскрыть суть передаваемого сообщения. Для нашего проекта было важно, чтобы иллюстрация не только раскрывала сопутствующий его текста, но и могла сама передать смысл информации. Для этого я создавала образы специальностей, чтобы они были максимально понятны для абитуриентов.
Также, было отмечено, как иллюстрация воздействует на эмоциональную сторону потребителя. С помощью принципов психологии и созданного дизайна мы воздействуем на абитуриента: говорим с ним на одном языке, создаем образ, с которым он может себя ассоциировать. С помощью несложных и интересных сюжетов мы оставляем впечатление о специальностях и факультете в сознании абитуриента.
Кроме этого иллюстрация создает иллюзию прямого взаимодействия с потребителем, когда является реакцией на его действия, например, похвала и как индикатор успешного выполнения действия.
Помимо этого, иллюстрация может быть частью геймификации, как средство поощрения, награды пользователя за его действия. В результатах теста сайт хвалит пользователя за его действия, награждает его позитивной информацией и вовлекает в игровой процесс.
В итоге, иллюстрация может стать инструментом навигации по контенту в рамках конкретных прикладных задач, вести пользователя по сложному тексту, облегчая его восприятие и создавай впечатление интересной и актуальной информации.
В процессе работы был нарисован дизайн лендинга для исторического факультета, были использованы такие навыки, как проектирование, дизайн сайтов, иллюстрирование. В общем и целом, нам удалось создать полноценный проект лендинга для абитуриента, выполнить задачи, стоящие перед промо-страницей исторического факультета, преобразовать сложную и научную подачу факультета в интересную и легкую форму восприятия, описать процесс создания сайта, на основе полученной теоретической базы. В первой части работы мы смогли проанализировать роли иллюстрации в UX/UI дизайне и применить полученные знания на практике.
В перспективе планируется разработать мобильную версию сайта.
