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

Название — «Курс по основам дизайна пользовательского интерфейса»

Продолжительность — 10 часов

Уровень: основы

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

Что вы изучите?

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

За 10 часов вы поймете ключевые приемы проектирования наиболее важных компонентов, которые включают в себя знание: цветов, кнопок, форм, типографики. , интервал, пространство, такие элементы, как флажки, поля, списки и таблицы.

Знания этого курса останутся актуальными даже через много лет, когда все инструменты и тенденции будут меняться несколько раз. Здесь вы изучите дизайн, а не только инструменты дизайна.

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

Для кого предназначен этот курс?

• Для новичков, интересующихся UX/UI-дизайном.
• Для людей, которые хотят начать карьеру в качестве UI-дизайнера.
• Для людей, которые хотят начать карьеру в качестве UI-дизайнера дизайнер
• Для людей без опыта в дизайне

Цвета

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

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

Кнопки

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

Формы

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

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

Флажки, поля, переключатели

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

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

Таблицы

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

Зазоры и пространство

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

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

Кнопки

Что такое кнопка и где ее найти на страницах

Роли и иерархия кнопок

Кнопка внешний вид

Состояния, фигуры, стили кнопок

Базовая типографика

Интерлиньяж и заголовки

Цвета и оттенки серого

Поля

Значки

Основная информация о значках

Свойства значков и их использование

Видимость значков

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

Цвета

Создание базовой цветовой палитры

Палитра — другое цвета

Палитра – оттенки серого

Страницы для создания палитр

Как создать градиент

Страницы для создания градиентов

Обзор теней

Тень полутени

Градиентная тень

Тень фото

Формы

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

p>

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

Заполнитель и его расположение

Другие элементы вокруг контейнер

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

Радио часть 1

Радио часть 2

Флажки

Переключатель

Раскрывающиеся списки

Анатомия раскрывающихся списков

Таблицы и списки

Списки и таблицы, Общий обзор

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

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

Фильтры и сортировка

Пространство в дизайне

b>

Интервал

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

Для карточек

Для значков

Отступы и поля

Оптическая настройка

Типы сеток

Сепараторы часть 1

p>

Сепараторы часть 2

Использование сетки

В поисках вдохновения

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

Кнопка «Обзор»

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

Типографика

Обзор дизайна