Задания и материалы урока 10 — Принципы дизайна мобильных приложений.

Теперь вы знаете основные принципы дизайна мобильных приложений. В предстоящих занятиях мы разберемся с UI составляющей и отработаем все на практике

Задание на этот урок:
Нужно повысить уровень своей насмотренности рассматривая и анализируя различные мобильные интерфейсы — это критично для успешности выполнения последующих заданий.

Для развития мобильной насмотренности:
1. https://pttrns.com — библиотека мобильного дизайна. Хоть сервис стал платным, дается три бесплатных дня которых должно быть достаточно для начала.
2. App store / google play — просто устанавливайте и тестируйте разные приложения анализируя функциональные компоненты их интерфейса и обращая внимание на паттерны по которым они устроены.

- Также, почитайте эту статью, чтобы лучше понять отличия iOS и Android: https://ux.pub/rukovodstvo-po-dizaynu-mobilnyh-prilozheniy-pod-ios-i-android-osnovnye-razlichiya-platform

Шрифты о которых говорил на уроке:
San francisco (версия для windows): https://www.dropbox.com/s/4vfnar2tq9padrh/SanFranciscoFonts4Windows.zip?dl=0
Roboto: https://fonts.google.com

Урок 11, Обзор гайдлайнов iOS и Android — уже выходит в открытый доступ 🙂

Присоединяйтесь: https://youtu.be/XEjSY4DFlLc

Полезные материалы и задание к уроку 11 — Обзор гайдлайнов iOS и Android.

Гайдлайны IOS (Human Interface): https://developer.apple.com/design/
IOS 15 UI kit: https://www.figma.com/community/file/984106517828363349

Гайдлайны Material Design: https://material.io/design/guidelines-overview/
Material 3 Design Kit: https://www.figma.com/community/file/1035203688168086460


Домашнее задание

Самостоятельно изучите официальные гайдлайны Human Interface и Material Design – это единственный путь обрести в них уверенность и понимание, также прокачает ваше общее понимание в дизайне интерфейсов. Но не нужно зубрить и т.п. — главное, привыкнуть к двум этим ресурсам и научиться без труда в них ориентироваться чтобы в нужный момент быстро найти необходимую информацию в процессе работы над дизайном своих проектов.

Если на английском не понятно, можно воспользоваться браузерным переводчиком — он автоматически переведет текст гайдов на нужный вам язык прямо в браузере и в общем будет более понятно, однако, стоит учить английский потому что дизайнер со знанием английского хотя-бы на B2 востребован намного больше чем со слабым английским.

Новый урок на выходит в доступ 😎
12. Прототипирование нативного приложения с помощью UI Kit'а iOS:
Еще сегодня будет задание, которое буду проверять в пятницу )

https://youtu.be/E2Xq2nKDru8

Задание урока 12 — Прототипирование приложения по гайдлайнам iOS

Все просто — с помощью подготовленного User Flow и выбранного UI KIt'а создаете небольшой кликабельный прототип своего мобильного приложения — я буду в пятницу проверять именно ваши прототипы и в четверг скину ссылку на форму отправки на проверку. Подозреваю что далеко не все справятся с темпом, за-то для те кто успеет с этим заданием — получат более высокий шанс получить фидбек 🙂

На основе выполненного домашнего задания по user flow MVP версии ваших приложений, нужно сделать «живой» прототип. Используйте UI элементы той платформы под которую делаете приложение (iOS или Android). При возникновении вопросов о том, как что лучше сделать — ответы на них можно найти в гайдлайнах из предыдуших уроков и по референсам других приложений похожих на ваше.

⚠️ Внимание:
Получившейся прототип должен отражать лишь путь пользователя от запуска приложения до достижения им конечной цели — то есть, не нужно (это не будет приветствоваться) рисовать все экраны и функции приложения, а всего-лишь то, что необходимо в выбранном сценарии.

Друзья, приветствую! Завтра во-второй половине дня (уточню время позже) в прямом эфире буду проводить проверку ваших прототипов приложения.

Так как задания User-flow и Прототип приложения напрямую связаны друг с другом, следует хранить их в одном файле в Фигме на отдельных страницах, чтобы если что, при проверке я мог заглянуть в карту и разобраться лучше.

‼️Скидывайте ссылку на прототип, а не на режим его презентации, чтобы я мог смотреть слои и другие страницы.
— Чтобы получить правильную ссылку, нужно нажимать Share именно на странице где у вас хранятся все экраны прототипа.

Отправляйте ссылку на прототип через эту форму: https://forms.gle/udQyCPuAaoo9YZf76

А сегодня в 16 00 у нас прямой эфир с разборами ваших мобильных прототипов 🙂
https://youtu.be/BVqr7w2IHRs

Запускаю трансляцию 😎

https://youtu.be/BVqr7w2IHRs

Финальный урок блока по дизайну мобильных приложений на курсе, уже выходит на канале.

🔔 С предыдущего урока прошла ровно неделя, надеюсь этого времени хватило, чтобы выполнить накопившиеся задания по UX ваших приложений, потому что уже в эту пятницу будет финальный разбор заданий по дизайну ваших приложений.

https://youtu.be/S5oSdkB5Euc

Задание урока 13 — Дизайн мобильного приложения

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

В целом было бы круто все этапы проекта добавить в файл проекта в Фигме и распределить по отдельным страницам, где каждая по порядку показывает процесс работы — например:
1. Описание, тех.задание и портреты пользователей
2. User Flow
3. Скрины подходящих референсов
4. Прототип приложения
5. Набор компонентов приложения
6. Итоговый дизайн

Так проект будет выглядеть как профессиональная работа по которой видно основные этапы рабочего процесса. Данная структура еще полезна при собеседованиях, потому что часто просят презентовать свою работу и как раз хотят увидеть процесс, а не только готовый результат.

Увидимся в пятницу на финальной проверке 😉 ссылку на отправку задания опубликую в четверг.

Мне кажется, что проверка заданий на прошлой неделе была очень интересной, но уложиться в темпы курса удалось далеко не всем и потому на проверку пришло меньше десяти работ 😥

Прототипы приложения мне в каком-то смысле намного важнее визуального оформления, так как что если логика приложения хромает, никакое оформление не поможет. Поэтому, на ближайшей трансляции буду совмещать проверку нового задания (дизайн мобильного приложения) и предыдущее (прототип приложения).

Планирую провести трансляцию с разборами завтра во-второй половине дня, но это пока что не точно (точнее сообщу уже завтра).

А пока отправляйте задания в новую форму и лучше не затягивайте 😄

https://forms.gle/a3c5kLBP3WxWTHWW8

Завтра, в субботу в 16 00 начну прямую трансляцию с разборами заданий по 12 и 13 урокам — прототип и дизайн приложения. Поднажмите с выполнением и отправкой заданий, кто пока не успел закончить, но хочет попасть на разбор 🙂
Форма на отправку в предыдущем сообщении.

Выберите и присылайте любое из заданий, которое успели выполнить в рамках курса и я постараюсь дать вам фидбек сегодня в прямом эфире 😎

Скидывайте ссылку на работу сюда:
https://forms.gle/j3z3fyQBCoupenP36

Провел трансляцию с разборами ваших работ 🙂
https://youtu.be/qsGfZEK-lsw

Вот кстати ссылка на телеграм-группу где можно общаться друг с другом на тему развития в дизайне 😎
https://t.me/yemacademy

Кстати, сегодня на канале появился первый урок из блока UI анимации на курсе 🤩
https://youtu.be/XhIef4Bn_6s

Домашнее задание
Повторите анимацию которую я делал на занятии (можно в своей интерпретации). Если решите делать что-то свое — не нужно делать что-то сложное и большое. Главное, чтобы первый и последний кадры анимации совпадали (чтобы видео можно было зациклить без заметного перехода от конца на начало).

1. Сделайте анимацию (не более 5-6 секунд)
2. Если будете рендерить в Ae тогда в формате Quick Time (.mov), а если в Media Encoder, тогда в H.264 (.mp4) – mp4 файлы будут в десятки раз меньше весить, а качество останется таким же высоким!
3. Возможно буду проверять задания по анимации. Для этого нужно загрузить видео куда-то. В случае рендера в H.264 лучше всего грузить видео на Vimeo так как файл не большой. Иначе можно загружать на YouTube или на Google Drive.

Интересные материалы по анимации:
1. 12 принципов UX анимации для изучения: https://ux.pub/udobnyj-interfejs-s-pomoshhyu-dvizheniya-12-principov-ux-animacii
2. Для вдохновения: https://ux.pub/100-dnej-moushin-dizajna