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

● Вам необходимо завершить работу над дизайном лендинга который вы начали делать в прошлом ДЗ.

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

2. Не делайте много экранов и не пытайтесь создать мега-уникальный и сложный дизайн — это не удобно пользователю и соответственно не востребовано на рынке. С «уникальным» дизайном в портфолио на работу не устроитесь просто потом.

3. Главное — это создать понятный, чистый, аккуратный и современный проект, который позволит пользователю сфокусироваться на том, зачем он на данный сайт придет.

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

5. Помните о том, что этот проект можно будет оформить в качестве Behance кейса и если все сделать круто — вам уже будет что показать при устройстве на первую работу если в этом ваша цель.

Друзья, премьера урока по адаптивному дизайну уже выходит на канале. Смотрите 🙂

https://youtu.be/_tRaueIlIvc

Задание урока №6. Адаптивный дизайн

В предыдущем задании нужно было закончить дизайн лендинга, а в том, нужно просто сделать адаптивные версии.

По итогу, включая то что уже есть, у вас должно получиться:
1. Десктопная версия (основная)
2. Десктопная (для небольших мониторов) = 1000px
2. Планшетная = 744px
3. Мобильная = 320px

По желанию, можно все настроить с использованием Autolayout и Constraints чтобы при расширении или сужении ваших адаптивных макетов контент в них растягивался и сужался соответственно.

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

Успехов 💪

Доброе утро друзья! 👋

А вот и новая форма отправки заданий этой недели!

В этот раз оба задания недели связаны друг с другом — дизайн лендинга и его адаптивы. Но если не успели сделать адаптивы, ничего страшного — тогда просто отправляйте лендинг.

Прямой эфир с разборами заданий будет завтра 😎

https://forms.gle/6CAHvVTwRd42uRkp8

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

Сел сейчас разбирать то что изменилось и подумал, а почему-бы не сделать это в прямом эфире? Как вам такая идея? Хотите? Могу провести сегодня )

Поставьте соответствующую реакцию посту, чтобы мне было проще принять решение )

⚠️ Внимание:
На случай если сутра пропустили, а потом затерялось в новых сообщениях, дублирую ссылку на форму отправки заданий этой недели, для завтрашнего разбора в эфире.

https://forms.gle/6CAHvVTwRd42uRkp8

Начинаем пятничный стрим с разборами заданий )
https://www.youtube.com/watch?v=JM3eoGVqJa0

Начинаем новую главу курса — UX 🤩
Седьмой урок курса посвященный введению в UX — проектирование пользовательского опыта.

Короткая (относительно всего что было до) и динамичная лекция.

Уверен, вам понравится и буду ждать вашу обратную связь в комментариях под видео )

https://www.youtube.com/watch?v=41DIXKQw-Gc

Домашнее задание (7. UX: проектирование пользовательского опыта)

Вашими заданиями на ближайшие занятия, будет полный цикл работы над проектированием UX собственного мобильного приложения, а пока:

1. Придумайте и запишите идею простого, но полезного приложения во всех необходимых подробностях
2. Составьте 1-2 портрета пользователей для данного приложения основываясь на представлении о том, кто и зачем/как будет пользоваться этим продуктом


Полезные материалы

● Портреты пользователей (примеры): https://www.dropbox.com/s/gnoh4i2lc3lkk2s/Users_UXDesign.png?dl=0
● Пять направлений интервьюирования клиентов: https://www.dropbox.com/s/eumqsa3drt9fj1v/5_client_interview_directions.docx?dl=0
● Что почитать на тему UX: https://ux.pub/10-statej-dlya-prokachki-navykov-ux-dizajnera

Друзья, второй урок курса по теме UX можно начинать смотреть через пару минут ) Несмотря на то, что это запись — чат во время премьеры живой 🤩

https://youtu.be/4phq2b6blDE

Домашнее задание (8. Подготовка к проекту, техническое задание)

Продолжаем работу над проектированием приложения

● В прошлом задании вы должны были пофантазировать и придумать идею полезного приложения и понять кому бы оно было полезно.
● Основываясь на примере который мы разбирали сегодня на занятии, в этом задании вам предстоит подготовить настоящее техническое задание, в котором будет подробно описано приложение и механика его работы.
● Представьте что вы заказчик и должны передать ТЗ дизайнеру-исполнителю. А потом представьте что вы дизайнер-исполнитель и убедитесь что в ТЗ есть ответы на все главные для вашей работы вопросы.

Полезные материалы

ТЗ — Приложение для ведения дел (***для изучения. Не для выполнения):[https://www.dropbox.com/s/6rt22qeo23h837h/aTask.docx?dl=0](https://www.dropbox.com/s/6rt22qeo23h837h/aTask.docx?dl=0)

Друзья, привет! Новый урок вместо завтра будет сегодня в 18 00. Буду проводить в прямом эфире — так что обязательно подключайтесь к трансляции 🙂

Будет практическое занятие по созданию User Flow в Figjam в продолжение к предыдущим двум урокам по UX.

Ссылку на стрим добавлю чуть позже.

Девятый урок курса: разбираемся с тем как и для чего создавать различные карты, типа user flow, cjm, карты сайта и т.п. в процессе проектирования дизайна интерфейсов сайтов и приложений.

https://youtu.be/xqct_-NQ1RE

Задание урока 9 — User Flow в FigJam.

Составьте User Flow либо карту структуры вашего приложения (по ТЗ, которое выполнили в предыдущем задании).

Задача текущего задания, произвести Ideation process чтобы прийти к лучшему пониманию того, какие и чьи проблемы, а также каким образом, ваш дизайн будет решать.

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

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

Привет! 🖖

Начинается новый учебный цикл курса — дизайн мобильных приложений.
На этой недели будет 3 не очень больших, но очень важных урока и один стрим с проверкой заданий.

Первый урок блока (десятый на курсе) станет доступен уже через пару минут:

10. Принципы дизайна мобильных приложений
https://youtu.be/t5Zv6YmH6Ic

Задания и материалы урока 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