Домашнее задание (3. Композиция и модульные сетки)

Для того чтобы закрепить понимание темы модульных сеток, я попрошу вас:

1. Выбрать один качественный, современный и хорошо работающий многостраничный сайт
2. Установить, по какой модульной сетке выстраивался данный сайт и отобразить ее поверх скриншота его главной страницы
3. Отправить на проверку ссылку на свой проект в Фигме (желательно с возможностью редактирования)

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

Полезные материалы
● Гайд по подбору сетки: https://www.figma.com/file/walxkAfmNCg39mQHAW1oAi/GRID_howTo?node-id=0%3A1
● Основы композиции: https://telegraf.design/konspekt-dizajnera-osnovy-kompozitsii/
● Основы модульных сеток https://almanac-rus.readymag.com/grid/theory/

Друзья, новая лекция курса уже через 10 минут начнется на канале — Типографика и верстка. Это важнейшее дополнение к предыдущему уроку и в целом, как по мне, одна из самых интересных тем в дизайне.

https://www.youtube.com/watch?v=WsNCwTprBIQ

Домашнее задание (4. Типографика и верстка)

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

Полезные материалы
● УТП: https://bit.ly/334OKIV
● Советы по типографике: https://ux.pub/sovety-po-tipografike-dlya-uluchsheniya-ux
● Референсы: https://www.awwwards.com/websites/sites_of_the_day | https://www.behance.net/collection/175588855/1st_screens
● Список шрифтов: https://www.dropbox.com/s/loxd7qxrs1piy9n/Fonts.png?dl=0

Этапы работы
1. Начните с УТП раскрывающего суть того, что лендинг предлагает пользователю
2. Сделайте простой прототип с хедером, УТП и поначалу любой картинкой, постройте из этого сбалансированную композицию
3. Подберите читаемый шрифт, цвет, качественную иллюстрацию или фото, иконки (если надо).
4. Убедитесь что текст достаточно легко читать даже людям с плохим зрением, для этого проверьте что цвет всего текста достаточно контрастный по отношению к цвету фона (можно использовать любой contrast checker, к примеру https://webaim.org/resources/contrastchecker/ — должно быть хотя-бы AA)

На заметку
Самый простой первый экран сайта, как правило состоит из логотипа, меню и УТП конструкции, а дополнить композицию можно изображением переднего или заднего фона. Помните о силовых линиях и о читаемой композиции, а также не забывайте о векторах движения и конечно же о контрасте. Ничего не выдумывайте — уникальность в дизайне интерфейсов — априори плохо. Опирайтесь на простые и понятные референсы. Удачи!

На этой неделе вышло два больших занятия курса, надеюсь было интересно 🤩 И соответственно есть два задания!

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

Прошу в данную форму отправлять только задание №3 — Композиция и модульные сетки (где нужно было подобрать сетки под 3 сайта)

https://forms.gle/cxe3F5TsQpHov2fd6

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

Через эту форму оправляйте только задание №4.
Типографика и верстка — где нужно было задизайнить простой первый экран лендинга в Фигме.

https://forms.gle/5cwG8LiG6NvAzfTU7

Получил немало ссылок на оба задания 👍 Однако все еще есть время отправить свои ссылки тем кто пока не успел.

Сегодня будет прямая трансляция, в 16:00, хочется видеть большой онлайн 🙂
https://www.youtube.com/watch?v=E4EaayPKYvg

Всем привет 🖖 новый мощный урок на тему подхода к дизайну сайтов уже доступен для просмотра!
https://youtu.be/hUUAGBqEJnM

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

P.S.
Проект Bellator который разбирал на уроке:
https://www.figma.com/file/TLIPKCo1xc8sluT1eWLd5y/BellatorMMA_Project-ForStudy?node-id=0%3A1

Домашнее задание (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.

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