Основи дизайну інтерфейсу - DVD

Назва - "Основи дизайну інтерфейсу"

Тривалість - 10 годин

Рівень: основи

Демо: https://youtu.be/wk2fUenlp94

Що ви дізнаєтеся?

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

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

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

• Що таке ієрархія та стани кнопок?
• Що таке доступний та доступний дизайн?
• як вибрати шрифти для елементів?
• як правильно встановити міжрядковий інтервал?
• як вибрати значки для проектів?
• як покращити читабельність значків?
• як оживити значки?
• як самостійно створити палітру кольорів?
• що характеризує вдалий градієнт?
• як створити природні - виглядають тіні?
• як вирівняти елементи форми?
• ви дізнаєтесь про структуру компонентів: прапорці, поля, перемикачі
• як створювати розкривні списки ?
• як створити дані у формі таблиць і списків?
• li>
• як встановити простір і вирівнювання?
• як використовувати сітка та стовпці?
• як створити візуальні розділювачі?
• ви дізнаєтесь про основи мобільного дизайну
• ви побачите основи роботи у Figma

Для кого цей курс?

• Для початківців, які цікавляться UX/UI дизайном
• Для людей, які хочуть розпочати кар’єру UI дизайнер
• Для людей без досвіду в дизайні

Кольори

Велика глава курсу була присвячена кольорам. Тут ви навчитеся створювати колірні палітри з нуля, вибираючи лише один основний колір. Ви створите для нього відтінки і сіру палітру. Я також покажу вам, як автоматизувати цей процес.

Ви навчитеся створювати сучасні тонкі тіні, встановлюючи відповідні параметри. Ви дізнаєтесь про 3 типи тіней: Umbra, Penumbra, Ambient. Ви також побачите, як створити красиві градієнти.

Кнопки

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

Форми

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

Ви побачите, як вибрати кольори для форми, як розташувати допоміжні текст і написи. Далі ви дізнаєтеся, як створювати стани полів форми.

Прапорці, поля, перемикачі

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

Ви побачите, як вибрати кольори для форми, як розташувати допоміжний текст і мітки. Далі ви навчитеся створювати стани полів форми.

Таблиці

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

Зазори та простір

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

У цьому розділі я надам вам знання про використання візуальних роздільників і типів сіток.

Кнопки

Що таке кнопка та де її можна знайти на сторінках

Ролі та ієрархія кнопок

Кнопка зовнішній вигляд

Стани, форми, стилі кнопок

Основна типографіка

Міжрядковий інтервал і заголовки

Кольори та сірий колір

Поля

Піктограми

Основна інформація про піктограми

Властивості піктограм та їх використання

Видимість піктограм

Як легко оживити значки

Кольори

Створення основної палітри кольорів

Палітра – інше кольори

Палітра – градації сірого

Сторінки для створення палітр

Як створити градієнт

Сторінки для створення градієнтів

Огляд тіні

Тінь Penumbra

Тінь градієнта

Тінь для фотографії

Форми

Анатомія форм, частина 1

p>

Анатомія форм, частина 2

Заповнювач та його розташування

Інші елементи навколо контейнер

Текстові поля та стани

Радіо частина 1

Радіо частина 2

Прапорці

Перемикач

Випадаючі списки

Анатомія розкривних списків

Таблиці та списки

Списки та таблиці, Загальний огляд

Анатомія списку

Анатомія таблиці

Фільтри та сортування

Простір у дизайні

Інтервал між будівлями

Для кнопок і форм

Для карток

Для значків

Відступи та поля

Оптичне налаштування

Типи сіток

Роздільники частина 1

p>

Роздільники частина 2

Використання сітки

Пошук натхнення

Мобільний дизайн

Кнопка огляду

Панелі інструментів, вкладки

Типографіка

Огляд дизайнів