Надеюсь, что вы уже ознакомились с заданиями, которые стоят перед UX-дизайнером, и для многих из вас они могли стать открытием. Если вы еще этого не сделали, то я советую вернуться к третьему уроку. А сейчас мы перейдем к заданиям UI-дизайнера. Уверена, что в вашем воображении – это будет что-то более очевидное и понятное. Эти задания в большинстве случаев имеют четкий физический результат – готовые макеты в графическом редакторе.
UI-дизайн – это о постоянном поиске баланса между креативностью и функциональностью. Это индустрия, где каждый год появляются и набирают популярность новые тренды, которые необходимо учитывать в своей работе.
- Кто такой UI–дизайнер?
- Типографика
- Цвет в дизайне
- Композиция и отступы
- Принципы дизайна
- Сетки
- Работа с иконками и изображениями
- Где брать идеи?
- Создание финального дизайна страниц
- Создание адаптивного и респонсив дизайна
- UI Kits и дизайн-системы
- Типичный день UI-дизайнера
- Анимация элементов. Работа моушн-дизайнера
- Задание графического дизайнера
- Домашнее задание
- Выводы
UI-дизайнер – это креативный специалист, который превращает идеи, исследования и функциональные требования в визуальные решения в виде макетов сайта, приложения или любого другого интерфейса. Его еще называют визуальным дизайнером.
Основная задача UI-дизайнера – сделать взаимодействие человека с продуктом максимально интуитивным и приятным. Он тщательно подбирает цвета, шрифты, иконки и расположение элементов, учитывая как эстетику, так и удобство использования. Благодаря этому, каждый пиксель интерфейса приобретает свою важную роль в создании гармоничного и функционального продукта.
Важным фактором для эффективной работы визуального дизайнера является развитие собственного вкуса, наглядность, знание правил и закономерностей теории дизайна. Именно к этим темам мы перейдем ниже.
Типографія — это правила, принципы и способы оформления текста. Типографія является одним из разделов графического дизайна. Позволяет подать текст наиболее понятным образом для восприятия читателем. UI-дизайнер занимается подбором шрифта, определяет размеры, расстояния между строками и символами. Определяет стили заголовков, параграфов, списков и других текстовых элементов страницы. Познакомимся с ключевыми терминами.
Шрифт — это набор символов, оформленных в одном стиле, что составляет единую систему.
Гарнітура — это набор шрифтов, объединённых в одно семейство.
Кегль — это высота буквы шрифта.
Интерліньяж – это межстрочный интервал или расстояние между строками.
Оцените сложность этой дисциплины взглянув на рисунок ниже.
Шрифт имеет способность создавать настроение и общий стиль не хуже, чем фотографии и цвета. Именно поэтому важно научиться подбирать шрифты под каждый проект. На каждого UI-дизайнера ждет множество препятствий на этом пути.
Первое препятствие – это научиться отличать хорошие, качественные и стильные шрифты среди всех остальных. Второе – это то, что большое количество красивых шрифтов являются платными и требуют дополнительных финансовых ресурсов. Третье препятствие будет актуально для дизайнеров, работающих с кириллицей, ведь для этого рынка количество хороших шрифтов уменьшается в десятки раз. Есть и другие незначительные препятствия.
Если вам интересно более подробно узнать о типографике, вы можете купить мой гайд, посвященный этой теме.
Обратите внимание на пример ниже (дизайн сайта для магазина кофе). Дизайнер с опытом вряд ли выбрал бы для сайта такие шрифты, как в верхнем примере. Они выглядят немного кривыми, а их читабельность резко падает с уменьшением размера букв. Но справедливости ради, у меня есть подозрение, что человеку без дизайнерского образования или без соответствующего опыта, такие шрифты кажутся весьма неплохими. На самом деле, добавлять рукописные шрифты в современный веб-дизайн нужно с большой осторожностью. Для интерфейсов – это вообще табу.
А вот комбинация шрифтов из нижнего примера является более привычной и правильной для современного подхода к типографике сайтов.
Цвет в дизайне
Цвет в UI-дизайне– это гораздо больше, чем просто выбор приятных оттенков. Он является мощным средством коммуникации, способным передавать эмоции, влиять на настроение пользователя и формировать его взаимодействие с продуктом.
Палитра или цветовая схема — это набор базовых цветов, которые используются, как основа идентификации вашего интерфейса. Помогает создавать целостные страницы, упрощает и значительно ускоряет работу, потому что подбор нужно выполнять лишь один раз.
Обычно используется готовая палитра, которая основана на фирменном стиле или рекламных материалах. Если таких нет, можно использовать логотип, чтобы получить несколько базовых цветов, а остальное подобрать самостоятельно. Если у клиента ничего нет, то всю цветовую схему вы делаете сами. Лучше заниматься созданием палитры цветов после создания вайрфреймов, чтобы понимать, какие элементы интерфейса и соответственно цвета вам понадобятся.
Когда подбираете палитру самостоятельно, то обратите внимание на цвета конкурентов и смежные области. Также неплохо было бы ознакомиться с психологией цвета. Найдите как можно больше существующих примеров, составьте мудборд.
Если хотите предметно углубиться в тему цвета в UI-дизайне, то советую приобрести мой гайд о цвете.
Есть множество сервисов для создания цветовых схем (Adobe Color, Coolors, Colormind, Colorhunt, Palettr), которые генерируют новый набор на основе лишь одного базового цвета или загруженного изображения.
Композиция и отступы
Композиция – это способ упорядочивания всех элементов интерфейса так, чтобы пользователь сразу понял, куда двигаться и что делать дальше. Тщательно продуманная композиция устанавливает визуальную иерархию: основные элементы выделяются благодаря размеру, цвету или расположению, а вспомогательные – органично интегрируются в общую схему.
Среди основных подходов к композиции можно выделить симметричную, асимметричную, сеточную, диагональную и радиальную. Каждый из этих вариантов имеет свои особенности и позволяет достичь определенного эмоционального и функционального эффекта, в зависимости от задач проекта.
Симметричный баланс предполагает отражение элементов относительно центральной оси. Такой подход создает ощущение гармонии, стабильности и порядка, что особенно полезно для проектов, где важно передать надежность и уверенность. Пользователям легче ориентироваться в симметричном интерфейсе, ведь все элементы упорядоченно и предсказуемо расположены.
Асимметричный баланс основывается на неравномерном расположении элементов, где равновесие достигается благодаря вариациям в размере, весе, цвете или форме компонентов. Этот подход позволяет создать динамичный, современный вид, который привлекает внимание благодаря интересным визуальным акцентам. Однако асимметрия требует тщательного подбора элементов, чтобы сохранить общую гармоничность композиции.
UI-дизайнеры активно используют сеточные структуры для организации пространства, а также диагональные композиции, которые добавляют ощущение движения и динамики
Отступы – это пространство между отдельными элементами, которое помогает избежать перегруженности интерфейса и способствует лучшей читабельности. Четко определенные отступы разделяют контент на логические блоки, подчеркивают связь между элементами и создают визуальную “дышащую” зону. Это позволяет пользователю быстро сориентироваться, выделить важные части страницы и сосредоточиться на основных действиях.
По тому, соблюдает ли дизайнер правильную иерархию и подход к созданию отступов, можно много сказать о его опыте в создании визуала.
Принципы дизайна – это фундамент, на котором строится каждый эффективный интерфейс. Они помогают создать понятный визуальный язык, способствующий интуитивному восприятию информации пользователем.
К основным принципам дизайна относятся:
- Баланс: равномерное распределение визуального веса создает гармоничный и стабильный интерфейс, который облегчает восприятие информации.
- Контраст: использование различных цветов, размеров и форм позволяет выделить ключевые элементы, обеспечивая четкую визуальную иерархию.
- Иерархия: вариации в размерах, цветах и расположении элементов помогают пользователю быстро определить приоритетность информации и логику структурирования интерфейса.
- Согласованность: последовательность в использовании стилей, шрифтов и других визуальных элементов создает единый, узнаваемый вид продукта.
- Воздух: использование свободного пространства вокруг элементов делает дизайн чище и удобнее для восприятия, позволяя важным компонентам «дышать».
Также, отдельно можно выделить гештальт-принципы, которые можно применить в дизайне. Они описывают, как наш мозг организует визуальную информацию, автоматически группируя отдельные элементы в единые целостные формы. Эти принципы помогают понять, почему мы воспринимаем набор отдельных объектов как связанный блок, даже если они расположены отдельно или имеют незначительные отличия.
Подбор, обработка иконок и изображений
Иконки – это простые и четкие образы (изображения) для ускорения понимания и восприятия информации. UI-дизайнеры часто используют готовые наборы иконок, которых существует множество (Fontawesome, Lineicons). Иногда иконки нужно редактировать или перекрашивать. UI-дизайнер должен следить, чтобы все иконки были выдержаны в едином стиле.
Изображения используются для улучшения подачи и дополняют текст. Фотографии и иллюстрации обрезают, подгоняют по размерам, проводят цветовую коррекцию.
Существуют бесплатные и платные сайты для подбора иллюстраций и фотографий (Freepik, Unsplash, Shutterstock). UI-дизайнеры не часто сами рисуют иконки и иллюстрации. Это больше работа графического дизайнера.
Применение гештальт-принципов в UI-дизайне позволяет создавать интерфейсы, которые пользователь воспринимает логично и естественно. Освоение темы принципов дизайна требует отдельного материала, где будут приведены развернутые примеры.
Сетки в UI-дизайне – это инструмент, который помогает структурировано организовать пространство на экране, разбив его на логические блоки. Они обеспечивают последовательность расположения элементов, упрощают адаптивную верстку и способствуют единству визуального оформления продукта.
Колончатые сетки являются одним из самых распространенных вариантов и базируются на делении пространства на вертикальные колонки с фиксированными или адаптивными отступами (gutters). Такой подход позволяет легко управлять шириной блоков, создавая четкий и сбалансированный макет, который автоматически подстраивается под разные размеры экранов. Использование колончатых сеток значительно упрощает работу с адаптивными дизайнами, обеспечивая сохранение пропорций и четкости структуры при изменении размеров дисплея.
Пример использования колончатой сетки в реальном дизайне:
Базовые сетки используются для организации элементов как в горизонтальном, так и в вертикальном направлениях. Они позволяют установить единую систему рядов и колонн, благодаря которой создается четкая иерархия информации и определяется порядок размещения содержимого. Такая сетка часто включает базовую линию (baseline grid), что обеспечивает согласованность отступов и выравнивания текстовых элементов.
Модульные сетки представляют собой расширение обычных сеток, сочетая как колонки, так и ряды, формируя сетку из многочисленных модулей. Каждый модуль можно использовать как отдельную единицу для размещения контента или комбинировать для создания больших блоков, что делает макет более гибким и адаптивным.
Применение сеток в UI-дизайне позволяет уменьшить хаос в расположении элементов и обеспечивает техническую базу для построения удобных, адаптивных и последовательных интерфейсов. Используя различные типы сеток, дизайнер может достичь оптимального баланса между творческой свободой и структурированностью, что является критически важным для современных цифровых продуктов.
Иконки – это простые и четкие образы (изображения) для ускорения понимания и восприятия информации.
Основное правило, которое дизайнер должен запомнить в работе с ними заключается в том, что иконка должна передавать смысл текста, к которому привязана или который заменяет. Если образ не считывается, то иконку лучше убрать или заменить на другую.
Также важная часть – это стилистика. Иконки должны хорошо сочетаться друг с другом и, конечно же, с интерфейсом, в который их добавляют. С этим могут помочь готовые решения.
UI-дизайнеры часто используют готовые наборы иконок, которых существует множество (Fontawesome, Lineicons). Иногда иконки нужно редактировать или перекрашивать. UI-дизайнер должен следить, чтобы все иконки были выдержаны в едином стиле.
Изображения используются для улучшения подачи и дополняют текст. Фотографии и иллюстрации обрезаются, подгоняются по размерам, проводится цветовая коррекция.
Существуют бесплатные и платные сайты для подбора иллюстраций и фотографий (Freepik, Unsplash, Shutterstock). UI-дизайнеры не часто сами рисуют иконки и иллюстрации. Это больше работа графического дизайнера.
Где брать идеи?
Вдохновение в сфере UI-дизайна можно находить практически везде – главное, уметь обращать внимание на детали и анализировать, что именно делает продукт успешным. Идеи часто возникают в процессе наблюдения за работой других дизайнеров, поэтому важно постоянно обновлять свои знания и знакомиться с новыми трендами.
Важно не просто просматривать все подряд, а научиться формировать целевые запросы и искать именно нужные вам референсы. Также создавайте папки для сохранения разнообразных идей, чтобы в момент острой необходимости или кризиса идей вы могли быстро вернуться к сохраненному.
Перед стартом работы конкретного проекта, UI-дизайнер тоже формирует мудборд, то есть доску настроения. Мы еще вернемся к обсуждению мудборда в следующих уроках. Есть даже вариант сотрудничества с клиентом, когда вы согласовываете сначала мудборд. Это этап идеи. А затем на основе него разрабатываете дизайн.
Представьте, что вы UI-дизайнер, и сегодня вам поручено создать интерфейс для нового мобильного приложения. Сначала вы встречаетесь с клиентом и/или командой, чтобы обсудить цели проекта, потребности целевой аудитории и ключевые функции продукта. Этот начальный этап помогает вам четко понять задачу и сформировать общую концепцию будущего интерфейса.
Прежде чем погрузиться в работу в графическом редакторе, вы начинаете собирать референсы для вдохновения. Вы просматриваете работы конкурентов, ищете современные и трендовые решения, и анализируете успешные кейсы из различных сфер. Этот этап помогает вам определить визуальное направление, которое будет гармонично сочетаться с целями проекта.
Трохи про сам процес. Розвію поширений міф. UI-дизайнери рідко все вигадують самі з нуля. Найчастіше вони шукають приклади робіт на таких сайтах, як Behance та Dribbble, де найкращі колеги зі всього світу діляться своїми роботами. Це не означає, що все просто копіюється, ні. Але дизайнер може підглянути якусь деталь, вдале поєднання кольорів, шрифтів, сітку, компонування елементів. Таким чином, новий дизайн поступово синтезується зі світогляду та вашого досвіду, а також з уже існуючих вдалих рішень. З напрацюванням проєктів у вас поступово сформується свій неповторний стиль з унікальними фішками. Але пам'ятайте, що на це потрібно дуже багато часу та зусиль.
У вас уже могут быть готовые вайрфреймы от UX-дизайнера, который уже поработал над логической структурой интерфейса. Или вы и есть этот дизайнер, потому что выполняете обе роли, UX и UI одновременно. Вайрфреймы содержат основные блоки и расположение элементов, что позволяет вам сосредоточиться на визуальном оформлении, не тратя время на разработку структуры с нуля. Они становятся вашей базой для дальнейшей работы над деталями и стилизацией.
В некоторых случаях вайрфреймы игнорируют и переходят сразу к дизайну. Но если мы говорим о мобильном приложении, то такой подход не лучшее решение. Оно может быть вполне целесообразным, если вы разрабатываете, например, небольшой креативный сайт.
Следующим шагом вы начинаете создание визуальной концепции. Используя собранные референсы, вы выбираете цветовую палитру, типографику, иконки и другие графические элементы, которые помогут сделать интерфейс не только привлекательным, но и интуитивно понятным. Вы тщательно работаете над пропорциями, отступами и композицией, чтобы каждый элемент соответствовал общей концепции продукта.
На завершающем этапе вы организуете тестовую сессию, демонстрируя свой дизайн коллегам и потенциальным пользователям. Полученные отзывы позволяют внести коррективы, усовершенствовать визуальную иерархию и улучшить удобство взаимодействия с интерфейсом. Таким образом, благодаря системному подходу – от сбора референсов до финальной презентации клиентам – вы превращаете идеи в реальный, современный интерфейс, который соответствует высоким стандартам UI-дизайна.
Mockup (читається мокап) — это дизайн отрисованной страницы. Также мокапом называют дизайн страницы или экрана, который вставлен в фотографию или иллюстрацию с устройством, на котором предполагается его использование. Когда вы видите фото с ноутбуком и запущенным сайтом, знайте, что это также мокап.
Теперь возьмем для примера другую задачу, а именно создание сайта. Обычно процесс начинается с рисования макетов для десктоп-версии (то есть версии для мониторов и ноутбуков). Но для того, чтобы команда разработки качественно реализовала ваш дизайн, будет мало только этих макетов.
Статистика последних лет говорит о том, что все больше пользователей посещают сайты с мобильных устройств. Этому способствует значительное улучшение скорости мобильного интернета. Веб-страницы на телефоне открываются так же быстро, как и с ПК или ноутбука. Поэтому дизайнер должен заранее продумать, как будет выглядеть и работать сайт на смартфоне.
Розберемся в чем заключается разница между адаптивным и респонсів дизайном.
Подход адаптивного дизайна заключается в разработке отдельных, заранее определенных макетов для различных размеров экранов. Вы создаете фиксированные версии интерфейса для смартфонов, планшетов и десктопов, каждая из которых оптимизирована для конкретной категории устройств. Это позволяет четко контролировать, как будет выглядеть ваш дизайн в каждой точке перелома, но требует больше ресурсов для поддержки нескольких вариантов макета.
При разработке этого вида дизайна выделяют ключевые варианты отображения, между которыми происходит резкий переход. Эти точки еще называют breakpoints (читается брейкпоинтс). При изменении размера окна браузера сайт будет адаптироваться «рывками» при переключении от одного отображения к другому. Каждое отображение может иметь уникальное компоновку.
Например, отображение для настольных компьютеров (где обычно используются большие мониторы), дизайн может включать правую колонку с дополнительной информацией. В отображении для смартфона того же сайта эта боковая колонка скроется, поскольку экран узкий.
Респонсів дизайн, наоборот, базируется на гибких сетках и относительных единицах измерения, что позволяет интерфейсу плавно адаптироваться к любому размеру экрана. Вы устанавливаете правила для элементов, которые масштабируются в зависимости от пространства, и таким образом обеспечиваете непрерывную трансформацию макета, независимо от конкретных точек перелома. Этот подход обеспечивает большую универсальность, но может потребовать тщательного тестирования для достижения идеальной удобства на всех устройствах.
При изменении размера окна браузера дизайн подстраивается как будто он сделан из резины. То есть структура компоновки статична и боковые колонки не исчезают.
Из своего опыта скажу, что респонсів дизайн хорошо работает с простыми макетами, где много однотипных элементов: слайдеров, карточек, простых текстов. Если же мы хотим достичь большей креативности или демонстрировать пользователям отличные от десктоп-версии подходы, то лучше работать с адаптивным дизайном.
Создание макетов для отдельных версий сайта требует от дизайнера следующих умений:
- Анализ аудитории и устройств: определение основных размеров экранов и точек перелома, которые используют ваши пользователи.
- Гибкая сетка: использование адаптивных сеток для логического распределения контента на странице.
- Оптимизация контента: масштабирование изображений и иконок, использование современных форматов для быстрого загрузки.
- Адаптивная типографика: обеспечение удобства использования кнопок, меню и форм на разных устройствах, включая сенсорные экраны.
- Интерактивные элементы и особенности устройств: обеспечение удобства использования кнопок, меню и форм на разных устройствах, включая сенсорные экраны. Помните о общепринятых приемах (тапы, свайпы и т.д.).
- Доступность: использование высокого контраста и понятной навигации для обеспечения комфортного пользования для всех групп пользователей.
UI Kits и дизайн-системы
UI-kit (читается юай-кіт) или User Interface Kit — это набор элементов интерфейса для дальнейшего проектирования страниц сайта. Набор будет отличаться для стартапа, блога и социальной сети. Наиболее распространенные элементы: кнопки, элементы навигации, поля ввода, списки, переключатели, формы и так далее.
UI-kit в современных графических редакторах делается на основе компонентов. Это позволяет значительно ускорить внесение изменений. Представьте себе ситуацию. У вас есть 20 изображенных экранов. Внезапно заказчик захотел изменить закругление кнопок вопреки всем уговором дизайнеров. Используя UI-kit на основе компонентов, вам придется внести изменения лишь в одном месте, правки на всех страницах будут сделаны автоматически и мгновенно. Разве это не магия? Без компонентов (например, если вы используете Photoshop) вам придется пройтись по всем страницам и переделать каждую кнопку вручную.
Дизайн-система – это более комплексный инструмент, который включает не только визуальные компоненты, а и набор правил, принципов, документированных шаблонов, а также рекомендации по использованию цветов, шрифтов, отступов и даже кода. Дизайн-система создается для того, чтобы обеспечить единый стандарт для всей команды, включая как дизайнеров, так и разработчиков, и гарантировать последовательность во всех продуктах компании.
Разница между UI Kits и дизайн-системами заключается в масштабе и глубине информации. UI Kits обычно являются статическими наборами графических элементов, которые используются для быстрого создания прототипов или как база для визуального оформления. Дизайн-система же гораздо шире: она включает как визуальные элементы, так и принципы, регулирующие их использование, что позволяет создавать не только красивые, но и функциональные интерфейсы, которые легко поддерживать и масштабировать.
Первые помогают быстро генерировать идеи и создавать прототипы, а вторые – поддерживать долгосрочное единство, эффективность и масштабируемость продукта.
Запомните также, что и дизайн-система, и UI-Kit имеют целью помогать не только команде дизайнеров, но и значительно облегчить и ускорить разработку интерфейса.
Типовий день UI-дизайнера
Як і UX-дизайнера, ранок починається з перевірки пошти, планування завдань або спільних колів з командою чи замовниками. Далі – безпосередня робота з пошуковиками, стоками, технічним завданням, проведеними дослідженнями та звісно ж, графічним редактором.
Левова частка часу UI-дизайнера присвячена пошуку. Ми шукаємо ідеї та конкретні референси для мудборду та макетів. Ми шукаємо хороші, частіше безкоштовні, шрифти. Ми шукаємо кольори та композиційні прийоми. Також часом ми шукаємо контент. Це можуть бути як тимчасові фото, відео, іконки, так і ті, що будуть використані у кінцевому продукті.
Оскільки на пошук може йти доволі багато часу, то важливо оптимізувати швидкість роботи з графічним редактором. Щоб можна було оперативно реалізувати ідею, накидати декілька варіантів і т.д. Робота з компонентами, варіантами та автолейаутами вам у допомогу.
UI-дизайнери створюють екрани інтерфейсів з нуля або візуалізують вже наявні вайрфрейми.
Як бачите, UI-дизайнер менше спілкується з людьми та більше малює. Але прокачувати комунікацію необхідно у будь-якому випадку. Адже існує етап презентації, коли дизайнер зобовʼязаний захищати свої ідеї. І коли ми говоримо про візуал, то зі сторони інших тут може включатись ірраціональний фактор смаків та вподобань. Саме тому дизайнеру необхідне вміння пояснювати та відстоювати свої рішення.
Анимация элементов. Работа моушн-дизайнера
В UI-дизайне анимации используются для направления внимания, объяснения изменений состояний, создания плавных переходов и вау-эффекта. Главная цель анимации – обеспечить интуитивное взаимодействие: она помогает пользователю понять, что происходит, и создает ощущение непрерывности в процессе использования продукта.
Микроанимации – это короткие, тонкие эффекты, которые подтверждают действия пользователя, сигнализируют об активных элементах или облегчают восприятие интерфейса. Они могут отображаться при нажатии кнопок, загрузке контента или изменении состояний элементов, делая взаимодействие более понятным и приятным. Такие анимации несложно создать, работая в Figma. Для сложных анимаций обычно используют Adobe After Effects или Adobe Animate.
На самом деле UI-дизайнер не должен концентрировать все свое внимание на работе с анимациями. Потому что это отдельное направление с отдельным специалистом – моушн-дизайнером. Основные задачи моушн-дизайнера:
- Разработка концепций и идей для анимаций.
- Создание сторибордов и прототипов движений.
- Интеграция анимаций в конечный продукт. Например, использование технологии Lottie.
- Тестирование и оптимизация анимаций для различных устройств.
- Сотрудничество с UI/UX-дизайнерами и разработчиками для согласования движений с общим дизайном.
Также стоит отметить, что большая часть анимаций, реализованная в современных веб-продуктах, создана разработчиками с помощью специальных готовых css и js библиотек. Работая в команде с фронт-энд разработчиками, можно попробовать реализовать анимации без помощи моушн-дизайнера.
Задачи графического дизайнера
Сюда входит широкий круг задач, но я выделила лишь основные, которые пересекаются с UX/UI-дизайном:
- Создание логотипа и фирменного стиля;
- Отрисовка иллюстраций и иконок;
- Создание баннеров, маркетинговых материалов, упаковки.
В отличие от дизайнера UX/UI, графический дизайнер иногда использует дополнительное оборудование, например, графический планшет. Кроме того, художественное образование и умение рисовать могут очень помочь в профессии.
Домашнее задание
С этого момента этот курс рассчитан на самостоятельное изучение и выполнение домашних заданий. Понимаю, что некоторые задания могут быть непростыми для вас.
Для дополнительной поддержки воспользуйтесь чатом в телеграме. Здесь вы сможете задать вопросы, касающиеся уроков, или просмотреть примеры правильного выполнения от других учеников.
Чат недоступен для граждан россии.
1.Зайдіть на сайт Behance та збережіть собі варіанти портфоліо трьох різних дизайнерів: UX/UI дизайнера, графічного дизайнера та моушн-дизайнера. Ще одна умова – портфоліо повинні вам подобатись. Можете поділитись посиланнями у телеграм-чаті.
2.Уявіть собі ситуацію: ви працюєте в команді та погодили з замовником вайрфрейми його майбутнього додатку. Але він гадки не має, яким додаток має бути візуально. Тепер ваше завдання знайти для замовника 2-3 референси, які будуть відрізнятись стилістикою. Оскільки це вигадане завдання, оберіть тему додатку самостійно із списку нижче.
- Мобільний застосунок для фітнесу. Відстеження тренувань, планування харчування, мотиваційні нагадування.
- Сервіс з доставки готової їжі. Різні раціони, підписки, персоналізовані рекомендації.
- Застосунок для планування бюджету (фінансів). Витрати, заощадження, щоденники витрат, нагадування про платежі.
- Застосунок для вивчення іноземних мов. Щоденні уроки, гейміфікація, соціальні взаємодії між користувачами.
- Онлайн-платформа для пошуку репетиторів чи курсів. Рейтинг викладачів, розклад занять, відгуки, пошук за спеціалізаціями.
- Додаток для турботи про психологічне здоров’я. Медитації, поради щодо зняття стресу, щоденник настрою.
Референси шукайте на тому ж таки Behance та збережіть собі в якості посилань.
Выводы
Приветствую! Это был еще один объемный урок этого бесплатного курса. Надеюсь, что теперь вам стало более очевидно, какие знания нужны UI-дизайнеру и какие задачи ежедневно встают перед ним. Чтобы стать умелым специалистом в этом направлении, нужно отдельно углубиться в каждый из разделов. Удачи!
Выполняйте домашнее задание. Только практика по-настоящему приблизит вас к заветной профессии.
Подписывайтесь на меня в Instagram @frusia.pro, чтобы не пропустить анонсы новых уроков и получать полезные советы для UX/UI дизайнеров, в частности о создании портфолио и поиске работы. В ленте на вас ждет множество практических постов, которые помогут вам совершенствоваться в дизайне каждый день. Присоединяйтесь и развивайте свою профессиональную мастерство вместе со мной!
Пройти тест
Чтобы урок был засчитан как пройденный, вам нужно правильно ответить на 80% вопросов из теста. Чтобы пройти тест и проверить свои знания, вам нужно войти в систему и записаться на курс или зарегистрироваться, если вы еще этого не сделали.
Продолжить обучение