Этап 6. UI и сбор проекта #дизайнпроект
Меня зовут Юля, я продуктовый дизайнер в экосистеме Мир Привилегий.
В этом цикле статей я создам проект-концепцию мобильного приложения для портфолио, который пройдет все стадии формирования дизайн-проекта.
Тема “приложение для выбора мероприятий”.
Автор статьи — Юлия Слащилина
Связаться со мной — телеграм
Мой телеграм-канал “Другой дизайн”, где я делюсь опытом работы в продукте и пишу о дизайне.
В прошлой статье мы создали прототип приложения и определили логическую связь между экранами.
Это завершающая часть в построении проекта для портфолио.
UI и визуальный стиль проекта, а позже и бренда — это способ визуального контакта с окружающим миром. Визуальный язык трактуется на уровне внутренних ощущений, ассоциаций и абстрактного восприятия.
Тут важно все — цвет, шрифт, фотографии, различные элементы, которые используются в интерфейсе и представлении продукта. Часто визуальный стиль так же формирует Tone of Voice и айдектика бренда, если они есть.
Итак. У нас есть прототипы, которые уже сформировали визуальную иерархию. Отсюда мы знаем, с какого элемента и на какой будет переход. На каком экране будет располагаться та или иная информация и на каких элементах должен быть акцент.
Для проекта не обязательно отрисовывать все существующие экраны, достаточно тех, которые будут демонстрировать основную ценность идеи и главный функционал продукта, который решает поставленные задачи.
Для того, чтобы начать «одевать» UI, я составила небольшой мудборд.
Мудборд — это не просто подобранные фотографии, это ассоциация, которая возникают у смотрящего. Мудборд демонстрирует атмосферу, в которую человек погружается при взаимодействии с продуктом. Она формируется не сразу, многие крупные компании формируют «свою атмосферу» для продукта годами, пока он глубоко не протиснется в подсознание пользователя, через рекламу, триггеры и прочее. Таким образом по ощущениям при взаимодействии с продуктом мы легко отличаем даже очень похожий интерфейс разных продуктов.
В мудборде можно отобразить цвета, шрифтовые пары, фотографии, примеры интерфейсов других приложений, определить стилистику. Так же я вынесла прилагательные, которыми в первую очередь можно описать мой проект.
После составления мудборда начинается самая медитативная часть для дизайнера. Прототипы начинают оживать, в них появляются краски, появляются вариации интерфейса.
Сначала я видела интерфейс совершенно в ином виде, в других цветах, немного другой стилистике. Но при отрисовке поняла, что это не стыкуется с моим личным ощущением того, как я его себе представляла. Хотя первый вариант мне очень нравился.
Когда делаешь проект с нуля и есть огромный выбор того, как все может выглядеть — появляются свои сложности. Слишком обширный выбор часто сильно стопорит, можно бесконечно перерисовывать и отыгрывать интерфейс в разных вариантах. Внутреннее ощущение и представление, а так же собственноручно выставленные рамки помогают в ориентире, и не позволяют перекрашивать одну кнопку бесконечное количество раз.
В ходе отрисовки может многое меняться. Так как техническое задании (ТЗ) для данного проекта — это выдумка, то логику можно перестаивать. Но главное, она не должна рушить построенную ранее структуру и принципы, которые были заложены в самом начале. Иначе просто напросто придется все переделывать.
В реальных проектах приходится действовать по четко поставленному тз и прописанной поставновке. Тем не менее, часто и в процессе разработки могут возникнуть вопросы, в рамках которых придется корректировать свои дизайн-решения, а иногда и наоборот, из-за дизайн-решений приходится корректировать постановку.
При построении интерфейса важно следить за компонентами, названиями, слоями и сразу тренироваться делать все чисто. Все компоненты типа кнопок, иконок, плашек — лучше всего переиспользовать, придерживаться выстроенных размерных линеек и отступов, выдерживать интерфейс в рамках единой компонентной системы. Можно сразу создать UI-Kit, его можно собрать из существующих элементов, скаченных в интернете, адаптировав под свой дизайн. Но лично мне доставляет удовольствие отрисовывать это дело вручную.
Хороший гайд по работе с элементами и визуальным дизайном.
Так как в проекте все делается по большей части перманентно, то в реальных проектах наоборот. Решения тестируются, проверяются и итерационно меняются. В проекте тоже может быть такая практика, протестировать свой дизайн полезно для понимания того, как пользователь в реальности будет с ним взаимодействовать. Есть сервисы, где пользователи могут ознакомиться с дизайном, выразить свое мнение по улучшению. На эту тему существует много лекций и статей. Улучшение дизайна после тестирования должно отвечать определённым целям, которые преследует продукт или бизнес, который за ним стоит.
Например, в своем дизайне я планировала объединить ленту в единый список из комментариев и записей друзей и рекомендованных событий.
Однако после небольшого тестирования, я заметила сильное смятение пользователя, пользователь не понимал смысл такой простыни, тем более в таком виде она оказалась бессодержательна. Таким образом я приняла решение разделить ленту на две категории.
Итак. Дизайн закончен. Интерфейс отражает задуманное, а все необходимое для проекта уже есть.
Осталось его собрать в единый ресурс. Собрать проект можно как в виде описания создания с фотографиями, например, в ноушн. Или по классике, на Behance. Дизайнеры разного мнения о том, как и где собирать свое портфолио, как выкладывать проекты и прочее.
Я пробовала и продолжаю пробовать разные методы. Тем не менее, я бы не пренебрегала Behance и не стала бы топить за один единый метод, на мой взгляд, это как в спорте — гибкая мышца равно сильная мышца. В гибкости сила и это относится вообще во всему. Самое главное навык, а при необходимости можно собрать и в ворде, да или распечать буклет))
Так вот. Основное, что должен отражать кейс, где бы он не был:
- Посыл, описание идеи
- Содержание проекта
- Для кого и зачем вообще нужен
- Составляющие из содержания (пункты могут быть разными)
- Дизайн
Кейс может быть разным, его описание и содержание, в целом, тоже. Единственное правило, что должно быть понятно, о чем проект и зачем он, а так же какие ваши навыки демонстрирует.
В интернете очень много разных проектов, нет единого шаблона, который гарантирует успех. Зайти может и не до конца проработанный кейс, но с классной идее и качественным визуалом. И наоборот, со слабым визуалом, но сильной исследовательской частью.
P.S. Под “зайти” я подразумеваю обращение на себя внимания, как на дизайнера, на свои работы и заинтересованность рекрутера, если это поиск работы, к примеру. Сейчас речь не идет о наградах на Behance.
Статья о том, как формить кейс на биханс
Примеры работ студентов школы дизайна
Мой готовый проект вот — кейс на Behance.
Спасибо за внимание!
