М1Т1 UX_UI Теория композиции +Основы работы в Figma

1.

Модуль 1. Тема 1
Теория композиции
+Основы работы в Figma

2.

Цель урока — Изучить основы композиции. Работа в Figma.
Сегодня вы:
● Изучить основы композиции. Композиционном
и Геометрическом центре.
● Узнать о видах композиции.
● Разобрать на примерах сайтов и приложений.
● Исследовать правило золотого сечения
● Узнать о правиле трех третей
● Изучить базовые инструменты Figma

3.

МОДУЛЬ 1. Тема 1
Основы композиции в дизайне.
Что такое композиция?

4.

Основы композиции в дизайне.
Что такое композиция?
Композиция — это
грамотно организованное
пространство,
где все элементы смотрятся
целостно, гармонично
взаимодействуют
друг с другом и с
пользователем.
Правильное расположение элементов

5.

Геометрический центр
Мы строим композицию на плоскости.
Будь то фотография, лист бумаги или
монитор компьютера. Если через эту
плоскость провести две диагональные
линии, точка их пересечения укажет на
геометрический центр нашей будущей
композиции.
Любой предмет, вписанный в этот центр, будет чувствовать себя вполне уверенно

6.

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

7.

Композиционный центр
Композиционный
может быть выделен:
•Контрастом
тени
центр
света
и
Выделение
освещенностью
Выделение цветом
Выделение формой
Выделение размером
•Контрастом цвета
•Размером
•Формой

8.

Замкнутая и открытая композиция
В замкнутой композиции основные направления
линий стремятся к центру. Такая композиция
подойдет
для
передачи
чего-то
устойчивого,
неподвижного.
Элементы в ней не стремятся за рамки плоскости, а
как бы замыкаются в центре композиции.
Открытая композиция, в которой направления линий
исходят от центра, дает нам возможность продолжить
мысленно картину и увести ее за рамки плоскости.
Она подходит для передачи открытого пространства,
движения.

9.

Замкнутая и открытая композиция
Сайт моделирования с веб-дизайном
на открытой композиции. Kieran
Сайт моделирования с веб-дизайном
на замкнутой композицией.

10.

Практика
Figma. Начало работы

11.

Figma-онлайн-сервис для
разработки интерфейсов и
прототипирования. Сервис
доступен по подписке,
предусмотрен бесплатный
тарифный план для одного
пользователя. Имеются офлайнверсии для Windows, macOS
https://www.figma.com/

12.

Для работы нужно создать новую рабочую область. Это
можно сделать на главной странице, нажав на значок «+»
или кнопку Design file:
https://www.figma.com/

13.

Основы работы с Figma
https://www.figma.com/

14.

https://www.figma.com/
Создание геометрических
форм
Создание рабочей
области(Frame)

15.

https://www.figma.com/
Практика на уроке

16.

https://www.figma.com/
Конец первой части урока

17.

Перерыв

18.

https://www.figma.com/
Начало второй части
урока

19.

МОДУЛЬ 1. Тема 1
Новая тема: Правило золотого
сечения. Правило трех третей.
Продолжение работы в Figma

20.

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

21.

Правило золотого сечения

22.

Практика. Обсуждение

23.

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

24.

Правило трех третей

25.

Практика. Обсуждение

26.

Практика
Figma. Продолжение работы

27.

Работа с текстом
https://www.figma.com/

28.

https://www.figma.com/
Практика на уроке

29.

Задание на самостоятельную работу

30.

Модуль 1. Тема 1
Вопросы:
1. Что было самым интересным на сегодняшнем уроке?
2. Какую новую информацию вы узнали сегодня?
4. Есть ли у тебя вопросы по теме, которую мы изучали сегодня?
5. Как ты думаешь, какую практическую пользу может принести знание
этой темы в дизайне интерфейсов?

31.

Модуль 1. Тема 1
Завершение урока!