СВІТ ДИЗАЙНУ

01 ПЛАН 02 ПОСИЛАННЯ 03 практика

ЛІЗА
ПРО ДИЗАЙН
НА ЦІЛИЙ РІК ресурси для навчання чіткі практичні завдання
 ЛІЗА
ВІДЕОУРОКИ ПРО ДИЗАЙН

ВІДЕО, на основі якого складала план

https://youtu.be/jwCmIBJ8Jtc?si=OX0G-ilhxcUFUv-k

безкоштовний курс на YouTube українською

https://youtu.be/yaldA4jdGqE?si=xw3-M0J5j9aS4kfJ

ще один курс українською

https://youtu.be/cQSJrpF-t-w?si=1enGWbZ8WqZ_oUsP

цінна інформація з UX/UI дизайну від мене (там багато практики, щотижня
новий конспект та відеоуроки)
https://www.patreon.com/lizkhl
СІЧЕНЬ ЛІЗА
ПРО ДИЗАЙН
точка відліку - починаємо нашу пригоду!

ТИЖДЕНЬ 1

ДЕНЬ 1: Починаємо з основ: вивчення інструменту Figma та опановування

елементарних функцій.

https://help.figma.com/hc/en-us/sections/13148571463703-Tour-the-interface
огляд інтерфейсу інструменту з поясненнями від Figma
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Вступ до Типографіки. Вивчіть ієрархію текстів, стилі та види шрифтів…

(у відео ця тема з 36 хвилини )

https://dou.ua/forums/topic/43688/
стаття від DOU.UA про основи Типографії, шрифти, їхнє значення та підбір
стаття

ДЛЯ ЧОГО МЕНІ ЦЕ?

СІЧЕНЬ ЛІЗА
ПРО ДИЗАЙН
точка відліку - починаємо нашу пригоду!

ТИЖДЕНЬ 2

ДЕНЬ 1: Вступ до теми Кольори: почитайте про колірну палітру, Правило 60/30/10

https://ux.pub/uxp/vibir-koloru-u-dizaini-1hl4
про вибір кольору в UX/UI дизайні від UX PUB
стаття

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Вивчення теми Color Accessibility !!!

https://www.patreon.com/posts/videourok-12-for-71967282?
utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_cr
eator&utm_content=join_link
відеоурок з детальними прикладами та конспект у мене на Patreon
від $5

ДЛЯ ЧОГО МЕНІ ЦЕ?

СІЧЕНЬ ЛІЗА
ПРО ДИЗАЙН
точка відліку - починаємо нашу пригоду!

ТИЖДЕНЬ 3

ДЕНЬ 1: Що таке Grid system та які її види існують, що таке margins, puddings 

та gutters

https://www.nngroup.com/articles/using-grids-in-interface-designs/
детальна стаття англійською
стаття

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Grid system - це обширна тема, тому на наступний день одразу цікавтеся
далі - які існують базові одиниці та коли застосовуються...

https://www.patreon.com/lizkhl
у мене на Patreon знайдеш 2 обширні конспекти з прикладами на цю тему
українською
від $5

ДЛЯ ЧОГО МЕНІ ЦЕ?

СІЧЕНЬ ЛІЗА
ПРО ДИЗАЙН
точка відліку - починаємо нашу пригоду!

ТИЖДЕНЬ 4

ДЕНЬ 1 і 2 : Практика, спробуйте створити Hero Section повторюючи за будь-яким

відео-туторіолом з YouTube.

https://youtu.be/8PRuWvTDXiY?si=UHlSTQwgbZ5KSSG8
створюємо Hero у мене на каналі
безкоштовно

https://youtu.be/LJbkLdtEW00?si=TDw1efw0UEtmgRBE
відео-туторіал англійською
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ЛЮТИЙ
вітаю Ви переходите на наступний рівень!
ЛІЗА
ПРО ДИЗАЙН

ТИЖДЕНЬ 5
ДЕНЬ 1: Принципи форматування в Figma (а саме чим відрізняють групи, фрейми
та секції і коли їх застосовувати) у відео з 2:13:48
https://blog.logrocket.com/ux-design/figma-groups-frames-sections/
стаття, яка стане у нагоді
стаття

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Практика - створення груп, фреймів та секцій, повторення шорткатів,

копіювання та дублювання елементів

https://youtu.be/PSSwXeIccpw?si=p_RcHBruxcaEVcYG
детальне відео про фрейми та групи з поясненняи у Figma
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ЛЮТИЙ
вітаю Ви переходите на наступний рівень!
ЛІЗА
ПРО ДИЗАЙН

ТИЖДЕНЬ 6
ДЕНЬ 1: Вступ до теми Auto Layout у відео з 1:56:08
https://help.figma.com/hc/en-us/articles/5731482952599-Using-auto-layout
Auto Layout від Figma
стаття

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Absolute positioning та практика Auto Layout

https://uxdesign.cc/absolute-positioning-in-figma-cc5cb0a299c6
стаття про absolute positioning
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ЛЮТИЙ
вітаю Ви переходите на наступний рівень!
ЛІЗА
ПРО ДИЗАЙН

ТИЖДЕНЬ 7
ДЕНЬ 1: Cтилі в Figma - як їх створювати та для яких елементів це потрібно?
Приділіть особливу увагу цій теми.
https://help.figma.com/hc/en-us/articles/360039238753-Styles-in-Figma
все про стилі з поясненнями від Figma
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Компоненти - це об'єкти багаторазового використання у вашому дизайні.

Цю тему слід дуже добре вивчити та одразу почати застосовувати.

https://youtu.be/PSSwXeIccpw?si=p_RcHBruxcaEVcYG
про компоненти, стилі та загальні бібліотеки
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ЛЮТИЙ
вітаю Ви переходите на наступний рівень!
ЛІЗА
ПРО ДИЗАЙН

ТИЖДЕНЬ 8
ДЕНЬ 1: На цьому етапі вивчіть що таке дизайн-системи, які вже існують системи
та як їх застосовувати (за допомогою відео нище)
https://youtu.be/q3aAZBOmpZM?si=j64qibEPNrT8GRES
класне відео про дизайн-системи
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Починайте регулярно розвивати нетворкінг

https://www.linkedin.com/posts/liza-khlopkova_ask-liza-khlopkova
тут в пості поділилася як можна розвивати нетворкінг (і посилання
додала)
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

БЕРЕЗЕНЬ ЛІЗА
ПРО ДИЗАЙН
перша серйозна практика!

ЦІЛИЙ МІСЯЦЬ

У березні ви будете готові до більш серйозної практики, а саме створення першого

вебсайту, налаштовування макету, роботи з сітками, адаптивного дизайну і
створення першої респонсивної лендінг сторінки! Приділіть цьому цілий місяць, не
поспішайте, робіть все дуже уважно та придивляйтеся до деталей. Якщо
впораєтеся раніше - повторіть все вивчене.

https://www.saasdesign.io/figma-responsive-design-tutorial/
стаття про респонсивний дизайн в Figma
безкоштовно

https://youtu.be/FQXi15Ihoqw?si=bCRxOw4jeKlJvFSj
коротке відео про респонсивний дизайн
безкоштовно

для цього завдання також знадобиться:

*у відео ця практика з 7:25:45

** не обмежуйтеся цим відео, а також втілюйте свої ідеї

ДЛЯ ЧОГО МЕНІ ЦЕ?

КВІТЕНЬ ЛІЗА
ПРО ДИЗАЙН
так тримати! залишилося ще трішки!

ТИЖДЕНЬ 13

ДЕНЬ 1: Розібравшись з вебсайтами, у квітні варто перейти до мобільних версій.

Тут вам потрібно опанувати біблію мобільних застосунків - Material Design. Там
всі-всі правила, яких ви повинні дотримуватися під час розроблення застосунків,
від стану кнопок до розмірів елементів. ( це для Android )

https://m3.material.io/
Material Design (Android)
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Інформації в Material Design дужее багато. Продовжуйте вивчати його,

після закріпіть з відео.

https://youtu.be/jwCmIBJ8Jtc?si=OX0G-ilhxcUFUv-k
*у відео є про Material з 4:07:32
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

КВІТЕНЬ ЛІЗА
ПРО ДИЗАЙН
так тримати! залишилося ще трішки!

ТИЖДЕНЬ 14

ДЕНЬ 1: Окрім Android потрібно приділити увагу також і IOS. І тут на допомогу
прийде Apple's Human Interface Guidelines.

https://developer.apple.com/design/human-interface-guidelines
Apple's Human Interface Guidelines
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Інформації в Apple's Human Interface Guidelines дужее багато.

Продовжуйте вивчати його, після закріпіть з відео.

https://www.youtube.com/live/nLYdUhUMwNA?si=5uZHYE7DkMqB8Li2
відео-огляд Apple's Human Interface Guidelines
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

КВІТЕНЬ ЛІЗА
ПРО ДИЗАЙН
так тримати! залишилося ще трішки!

ТИЖДЕНЬ 15

ДЕНЬ 1: Тепер розберіться що таке прототипування

https://www.uxpin.com/studio/blog/what-is-a-prototype-a-guide-to-functional-ux/
корисна стаття
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Далі вам потрібно дізнайтися що таке вайрфрейм ( і чим відрізнається від
прототипу та макету)

https://skvot.io/uk/blog/ne-soromno-zapitati-shcho-take-vayrfreym-mokap-i-
prototip
а допоможе у цьому ця стаття
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

КВІТЕНЬ ЛІЗА
ПРО ДИЗАЙН
так тримати! залишилося ще трішки!

ТИЖДЕНЬ 16

ДЕНЬ 1: Закріпіть знання за допомогою відео

https://www.youtube.com/watch?v=ICegW10jvFg
відео про прототипування та вайрфреймінг з практикою
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: І щоб точно-точно закріпити цю тему перегляньте безкоштовний відеоурок

від Google UX Design Certificate

https://www.youtube.com/watch?v=I5u2QOH18W8
дуже корисне відео
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

травень ЛІЗА
ПРО ДИЗАЙН
прийшов час на мою улюблену тему!

ТИЖДЕНЬ 17

ДЕНЬ 1: Весь травень приділимо вивченню UX (досвід користувача)! Тут буде дуже
цікаво! Почніть з основ - детально почитайте, що UX включає в себе.

https://www.interaction-design.org/literature/article/ux-vs-ui-what-s-the-difference
стаття про різницю між UX i UI дизайном
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Опануйте всі UX закони з цим відео

https://www.youtube.com/watch?v=fYs2Mdyasuc
дуже корисне відео
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

травень ЛІЗА
ПРО ДИЗАЙН
прийшов час на мою улюблену тему!

ТИЖДЕНЬ 18

ДЕНЬ 1: Продовжуйте вивчати Закони, аналізуйте їх, шукайте приклади та думайте

як будете застосовувати в своїх дизайнах

https://lawsofux.com/
тут зібрані всі закони англійською
безкоштовно

https://lawsofux.com/
в мене на Patreon пояснення законів простою мовою з прикладами
від $5

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Почніть аналізувати реальні сайти, шукайте де законів дотримано, а де

навпаки порушено

https://youtu.be/aE8rlps6i8A
розбираю по UX-законах сайт Bershka
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

травень ЛІЗА
ПРО ДИЗАЙН
прийшов час на мою улюблену тему!

ТИЖДЕНЬ 19

ДЕНЬ 1: Дізнайтеся які є методи UX досліджень та як їх проводити

https://www.techtarget.com
детальна стаття про UX дослідження
стаття

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Вивчіть принципи інформаційної архітектури, щоб мати розуміння, як

структурувати вміст для оптимального розуміння та взаємодії з користувачем

https://ux.pub/zhmikhov/informatsiina-arkhitiektura-4e6m
дуже корисне відео
стаття

ДЛЯ ЧОГО МЕНІ ЦЕ?

травень ЛІЗА
ПРО ДИЗАЙН
прийшов час на мою улюблену тему!

ТИЖДЕНЬ 20

ДЕНЬ 1: Почитайте про 5 етапів дизайнерського спринту

https://www.craftinnovations.com.ua/post/waht-is-design-sprint
стаття англійською мовою
стаття

ДЛЯ ЧОГО МЕНІ ЦЕ?

ДЕНЬ 2: Поцікавтеся які використовують KPI в UX дизайні

https://www.uxdesigninstitute.com/blog/ux-kpis-and-how-to-measure-them/
про KPI в UX
стаття

ДЛЯ ЧОГО МЕНІ ЦЕ?

Червень ЛІЗА
ПРО ДИЗАЙН
практика! практика! практика!

ЦІЛИЙ МІСЯЦЬ

Тепер час на практику!

Завдання: створити вебсайт для книжкового магазину.

Назва магазину: BOOKLANDIA

Tone of Voice клієнта: “BOOKLANDIA - місце, де слова стають життям і кожна

обкладинка - ворота у світ пригод. Наша мова - це зухвалий розмовний стиль, що
легко перетинає межу між класикою та сучасністю. Ми ваш літературний
компаньйон у кожній подорожі між рядками.”

Вимоги клієнта
Ціль сайту: Зробити кожен візит користувача захопливим літературним
відкриттям. Вигідно представити асортимент, ознайомити з новинками та
підкреслити особливість кожної книги
Навігація: Забезпечити легку та зручну навігацію, щоб користувачі могли
швидко знаходити та долучатися до своїх улюблених творів
Секції: Окрім основних - додати розділи "Літературні Скарби", "Новинки тижня",
"Рекомендації" та "Наші Фаворити", щоб кожен знайшов щось за своїм смаком
Кольорова палітра: Використати теплі кольори, нагадуючи атмосферу
дружнього книжкового клубу.

референси:

https://www.yakaboo.ua/

https://www.arthuss.com.ua/

https://www.empik.com/

ДЛЯ ЧОГО МЕНІ ЦЕ?

липень ЛІЗА
ПРО ДИЗАЙН
і знову практика!

ЦІЛИЙ МІСЯЦЬ

Закінчивши вебверсію - переходьте до мобільної. Зробіть собі повторення всієї

теорії і Material Design. 

А конкретно - створіть застосунок замовлення їжі. Забезпечте легку та зручну

навігацію, щоб користувачі могли швидко виконувати потрібні їм дії. Також додайте
кнопку “Додати до замовлення” після оплати. Мало де це є, а дійсно user friendly
фунція, яка забезпечить позитивний досвід користування додатком і спонукатиме
повернутися ще.

Назва додатку: FastDash

Кольори: білий та блакитний

Tone of Voice клієнта: “FastDash - де смак швидкості та комфорту. Наш стиль -

енергійний та сміливий. Ми перетинаємо границі звичайного, пропонуючи вам
неперевершений шлях до смаку. З кожним замовленням ми подаруємо вам
шматочок емоцій та швидкість, щоб ваші гастрономічні подорожі були такими ж
захоплюючими, як і FastDash.

Дозвольте собі насолоджуватися смаком швидше!”

референси:

Uber Eats

Glovo

ДЛЯ ЧОГО МЕНІ ЦЕ?

 серпень ЛІЗА
ПРО ДИЗАЙН
портфоліііо

ЦІЛИЙ МІСЯЦЬ

Тепер, коли у вас є чим наповнити своє портфоліо - саме час його створити!
Наприклад, можете зробити це в Notion або просто в Dribbble, чи створити собі
окрему Інстаграм сторінку. Це вже залежить від вас. А також створіть резюме.

https://youtu.be/t5OYI-IEkgU?si=w0roCswfqI_azcvj
Як створити портфоліо в Notion
безкоштовно

https://youtu.be/JhlCgYAoTec?si=30Ex2O8Pr1RPPqIH
Як створити case study
безкоштовно

https://youtu.be/Z-mTJ35dpfI?si=PE788pphUOmVkaTD
Інтерв’ю з рекрутером Restream (корисно для резюме)
безкоштовно

https://telegraf.design/topgear-portfolio-part-one-design-interface/
Як створити успішне портфоліо
стаття

https://www.patreon.com/lizkhl
у мене на Patreon готові темплейти портфоліо в Notion, а також аналіз
реальних прикладів
від $5

ДЛЯ ЧОГО МЕНІ ЦЕ?

 вересень ЛІЗА
ПРО ДИЗАЙН
а тепер - пошук роботи, я у вас вірю!

ЦІЛИЙ МІСЯЦЬ

Допрацювавши портфоліо і створивши резюме переходьте до пошуку роботи.

Це може бути за допомогою знайомих (якщо не забуватимете розвивати

нетворкінг), чи в Linkedin, або на сайтах для фрілансерів. Варіантів безліч.

Також хочу поділитися, що існують різні стажі і практики, якщо у вас є можливість
- варто пробувати, адже це безцінний досвід.

https://www.youtube.com/playlist?list=PL9Dzq3Q1eQv8DDGD2TwMaaaTacLuVyobM
Плейлист з моїми відео про пошук роботи
безкоштовно

https://www.upwork.com/
Біржа для фрілансерів
безкоштовно

https://youtu.be/E7QXUf7mbIg?si=C6yEk-HcO2NKAos4
Типові помилки - чому вас не беруть на роботу
стаття

https://www.patreon.com/lizkhl
30-хвилинне відео про пошук роботи на моєму прикладі (знайшла за тиждень
дистанційно в Торонта)
від $5

https://youtu.be/Z-mTJ35dpfI?si=PE788pphUOmVkaTD
Інтерв’ю з рекрутером Restream (про пошук роботи)
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

 ЖОВТЕНЬ ЛІЗА
ПРО ДИЗАЙН
навчання! навчання! навчання!

ЦІЛИЙ МІСЯЦЬ

Не факт, що ви знайдете роботу за місяць, хоча може й набагато швидше. Але

весь цей час не здавайтеся і вдосконалюйтесь, поповнюйте портфоліо, вивчайте
нові закони, цікавтеся іншими темами (маркетингом, аналізом даних тощо) і як
вони пов’язані з дизайном, адже всі ці знання безцінні.

https://www.nngroup.com/articles/ux-and-marketing/
Cтаття про UX і маркетинг
стаття

https://www.ironhack.com/gb/blog/the-role-of-ux-ui-design-in-data-analytics
Про роль UX/UI дизайну в аналізі даних
стаття

https://www.ironhack.com/gb/blog/the-role-of-ux-ui-in-web-development
Про роль UX/UI дизайну в веброзробці
стаття

https://uxmag.com/articles/tone-of-voice-and-user-experience
Tone of voice і UX дизайн
стаття

https://www.patreon.com/lizkhl
ROI i UX/UI дизайн, Tone of voice для UX/UI дизайнера, культурна різниця в
UX/UI дизайні та багато інших корисних тем
від $5

ДЛЯ ЧОГО МЕНІ ЦЕ?

 ЛИСТОПАД
навчання і практика!
ЛІЗА
ПРО ДИЗАЙН

ЦІЛИЙ МІСЯЦЬ
Потрібна ще практика, нехай це буде… редизайн популярного сайту! Наприклад,
Udemy! Можете, обрати будь який курс і у них завжди є безкоштовно для
перегляду певний фрагмент з курсу, перегляньте його і зверніть увагу на
програвач, а саме нижню панель, там є порушення Закону Якоба (користувачі
звикли, що перемикач швидкості відтворення відео - праворуч, або з’являється
після натиснення на налаштування, а у них він ліворуч.)

Udemy Coursera

Буде круто якщо ви додасте ще й пояснення своїх рішень в редизайні (в case

study, наприклад). Це покаже ваш професіоналізм.

https://youtu.be/-BSXnvF9Tws?si=AOiC5frzqZZ_Co8u
дизайнимо разом для бренду косметики „Florence by Mills”
безкоштовно

https://youtu.be/opqIQ4bH7U0?si=0PhCKZ4HuUjHQ5C1
редизайн Airbnb (вебверсія)
безкоштовно

ДЛЯ ЧОГО МЕНІ ЦЕ?

грудень ЛІЗА
ПРО ДИЗАЙН
я вами пишаюся!

ЦІЛИЙ МІСЯЦЬ

Створіть застосунок для інтернет-магазину одягу та взуття. Нехай це буде

редизайн Cropp. (якщо маєте інші ідеї для застосунку - втілюйте їх)

референси:

Bershka

Stradivarius

Reserved

ДЛЯ ЧОГО МЕНІ ЦЕ?