Индивидуальный_проект_Пример_проекта_дизайн

1. Индивидуальный проект. Пример выполнения работы.

Дисциплина

2.

План занятия:
≻ Разберемся как выполняется проект на примере
создания дизайна приложения-компаньона и
дальнейшего продвижения
≻ Обсудим сложности и посмотрим на способы решения.
≻ Изучим шаги создания продукта с точки зрения дизайна
и маркетинга
≻ Подведем итоги активности

3.

Тематику для примера я выбрал приложение для игры The Legend of Zelda:
Tears of The Kingdom(далее сокращено totk).
Начать нужно с создания мудборда. Важный акцент на умении подбирать
шрифты и цвета.
В случае если создается дизайн по примеру некоторого продукта, то выбрать
акцентные цвета и шрифты придется напрямую из продукта.
В случае создании абсолютного нового продукта, придется подбирать все в
ручную.
Для получения акцентных цветов изображения можно использовать онлайн
сервисы по кластеризации цвета, например – ссылка.
Также можно подобрать изображения соответствующие тематике или
демонстрирующие схожий стиль.
Мудбордов может быть несколько. В таком случае ваш проект будет гибче. Я
покажу только пример одного мудборда.

4.

Результат полученного мудборда

5.

Анализ мудборда
Каждый элемент мудборда нужно
описать. В презентации 3-ого этапа
присутствуют пункты, по которым нужно
ответить.
Пример описания на следующем слайде.

6.

Анализ цвета #1a3a6e (TotK Deep Blue) для HyruleHub
Этот глубокий синий — один из доминирующих оттенков в Tears of the Kingdom, особенно в:
Небесных островах (фон за облаками).
Энергии Зонаи (светящиеся синие элементы технологий).
Ночном небе Хайрула (атмосфера тайны).
Он ассоциируется с приключениями, древними технологиями и магией — ключевыми темами Zelda.
Тайна и исследование — напоминает неизведанные локации TotK.
Технологии Зонаи — связь с механикой Ultrahand и загадочными артефактами.
Доверие и надёжность — синий часто используют для интерфейсов карт и меню.
Контраст с золотом — как в игре (синий + золотой = сочетание архаики и прогресса).
Для фанатов TotK:
Сразу вызывает узнаваемые ассоциации с игрой.
Подчёркивает «современный» стиль.
Для функционала приложения:
Идеален для фона карт, кнопок навигации и заголовков.
Не утомляет глаза (в отличие от ярких цветов).
Элемент
Пример применения
Эффект
Фон разделов
Кнопки
Текст
Рамки
Главная страница, база знаний
Интерактивные элементы (карта, гайды)
Заголовки (на светлом фоне)
Обводка изображений (арты, скриншоты)
Создаёт атмосферу «путешествия»
Контраст с золотым (#e9c46a)
Читаемость + стиль TotK
Акценты без перегруза

7.

Выбор стиля
Необходимо далее выбрать стиль и дать ему характеристику с точки зрения дизайна.
В моем варианте был выбран стиль «Hybrid of technological and archaic».

8.

Далее описываем тональность
«Вдохновляющая + Дружелюбно-профессиональная»
Подача контента:
Эпичная, но без пафоса — как диалоги Зельды: «Этот храм хранит тайны, но ты справишься».
Четкая и полезная — гайды пишутся так, будто их составил Линк: минимум слов, максимум
действий.
С намёком на тайну — «Эту способность Зонаи ещё никто не раскрыл… попробуй первым!».
Визуальный тон:
Современный, но с душой ретро — как интерфейс игрового КПК в игре.
Динамичный — анимации энергичных цветов Зонаи (бирюзовые вспышки, плавные переходы).

9.

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

10.

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

11.

Финальный макет
В конце в совокупности после всех
доработок вы получите финальный
макет

12.

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

13.

Полезные материалы:
Статья для подсказок о том как придумать свой дизайн – Ссылка 1
Пример создания дизайна интерьера – Ссылка 2
Статьи о различных инструментах для работы с дизайном – Ссылка 3

14.

Заключение
Данный пример разобран за 90 минут. Он может служить основной и
или примером для вашего проекта.
Попробуйте начать ваш проект с создания мудборда и пользуясь
этой презентацией как своеобразным руководством довести ваш
продукт до финальной стадии.

15.

Каждая линия — шаг
к совершенству.