ІТ-професії. Знайомство.
Безплатний курс для самоосвіти
11. UI/UX дизайн. Урок 3. Дизайн-принципи

H1

H2

H3

H4

H5
H6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

easily create content.

easily create content.

easily create content.

easily create content.

easily create content.

easily create content.

easily create content.

easily create content.

easily create content.

easily create content.

  • sdfsd
  • sdfsdf
  • sdf

  1. sdfsd
  2. sdfsdf
  3. sdf

My alt text

Сьогодні надважливий день, адже ти дізнаєшся про поняття, на яких тримається дизайн.

Типографіку, колористику, гештальт-принципи та патерни F-Z обов'язково знати кожному дизайнеру. При цьому вивчати це все дуже захопливо, навіть без намірів працювати далі в цій галузі. Знання ніколи не завадять!

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

Орієнтовний час на опрацювання теорії: 90+ хвилин.

Орієнтовний час на виконання практики: 90+ хвилин.

Завдання на тиждень

Усі чотири уроки ти працюватимеш над дизайном залізничного квитка:

  • У першому уроці ми розберемо, хто наші користувачі та які в них потреби.
  • У другому уроці познайомимось із програмою Figma та її функціоналом, щоб потім створити в ній дизайн квитка.
  • У третьому уроці ти створиш 3 версії квитка, що найкраще підходять персоні користувача.
  • У четвертому уроці ти зведеш три версії квитка в одну, що задовольнить 3 різні персони користувачів (а це не найлегше завдання!)

Теорія

Вивчай теорію за допомогою статей і відео

Автори цього курсу підібрали статті та відео для базового розуміння теми та успішного виконання практичних домашніх завдань.

Відео та статті взаємодопоміжні, тож, будь ласка, переглянь і прочитай їх разом.

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

Переглянь

Візуальна ієрархія

Типографіка

Теорія кольору

Прочитай

1. Design principles: and introduction to visual hierarchy;

або ж Visual Hierarchy: Organizing content to follow natural eye movement patterns;

2. Choosing Web Fonts: A Beginner’s Guide;

3. How color is used in UI design.

Практика

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

Твоє завдання — створити 3 різні варіанти квитків для 3 різних персон користувачів, які були обрані в перший день.

1. Створити 3 копії квитка з минулого уроку;

2. Тепер ти маєш три однакові квитки. Тобі потрібно зробити 3 різні квитки, кожен з яких ідеально підходить для кожної з персон користувача, тобто:

  • 1 ідеальний квиток для людину похилого віку
  • 1 ідеальний квиток для студента
  • 1 ідеальний квиток для туриста

3. Фіналізувати 3 квитки.

Можеш поекспериментувати з:

  • Візуальними компонентами — де і в якому порядку розміщені елементи, як згрупована інформація;
  • Застосуванням правил гештальт-теорії;
  • Сполученням кольорів;
  • Типографікою.

Виконане завдання: В цьому фігма документі

В ньому ти знайдеш виконані домашні завдання для всіх днів цього напрямку.
Щоб відкрити даний файл в фігмі, зайди на сторінку з файлами, клікни на кнопку "import file" та завантаж файл.

My alt text

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

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

Щось не так з текстом/відео/посиланнями? - звернись до координатора курсу в телеграмі

Відчуваєш, що застряг(-ла) з виконанням домашнього завдання? - звернись за допомогою в студентський чат в телеграмі*

*в ось такому форматі "Привіт, в домашньому завданні : "Project Management. Урок 2" не дуже розумію що таке юзер сторіс..."