3.15M

Category:

programming

Графический дизайн. Создание дизайн-макета

1.

DS
Графический дизайн
Создание дизайн-макета

2.

Введение
Модульная сетка
Направляющие
Линейки
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

3.

Теория
Повторение
Вопрос 1
Что такое сайт?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

Теория
Повторение
Вопрос 1
Что такое сайт?
Это набор логически связанных между собой
веб-страниц, расположенных в Сети под
единым именем — доменом.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

5.

Теория
Повторение
Вопрос 2
Что такое внешняя структура на сайте?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

6.

Теория
Повторение
Вопрос 2
Что такое внешняя структура на сайте?
Та часть сайта, которую посетители видят на
экране.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

7.

Теория
Повторение
Вопрос 3
Что такое кп?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

8.

Теория
Повторение
Вопрос 3
Что такое кп?
Коммерческое предложение (КП) — это
документ, с помощью которого компания
предлагает приобрести услугу или начать
взаимовыгодное сотрудничество.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

9.

Теория
Знакомство с модульной сеткой
Как организовывали пространство на 1 занятии?
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

10.

Теория
Знакомство с модульной сеткой
Как организовывали пространство на 1 занятии?
На этом занятии: модульная сетка
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

11.

Теория
Знакомство с модульной сеткой
Как организовывали пространство на 1 занятии?
На этом занятии: модульная сетка
Модульная сетка — это система организации объектов в макете,
основанная на колонках, рядах и отступах между ними.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

12.

Теория
Типы модульных сеток
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

13.

Теория
Типы модульных сеток
Uniform grid позволяет создавать однородные
и равномерно распределенные области на
поверхности макета. Ее можно сравнить с
тетрадным листом в клетку, в котором вебдизайнер указывает размеры клеток.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

14.

Теория
Типы модульных сеток
Uniform grid позволяет создавать однородные
и равномерно распределенные области на
поверхности макета. Ее можно сравнить с
тетрадным листом в клетку, в котором вебдизайнер указывает размеры клеток.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

15.

Теория
Типы модульных сеток
Uniform grid позволяет создавать однородные
и равномерно распределенные области на
поверхности макета. Ее можно сравнить с
тетрадным листом в клетку, в котором вебдизайнер указывает размеры клеток.
Сторона клетки должна быть
кратна 8, так как почти все
популярные устройства имеют
экраны с размерами в пикселях,
кратными именно этому числу.
5px
8px
1х экспорт
5px
8px
1.5х экспорт
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

16.

17.

18.

19.

20.

21.

Теория
Типы модульных сеток
Uniform grid позволяет создавать однородные
и равномерно распределенные области на
поверхности макета. Ее можно сравнить с
тетрадным листом в клетку, в котором вебдизайнер указывает размеры клеток.
Column grid разделяет макет вертикально.
Колоночная сетка создает горизонтальный
ритм, основанный на соотношении ширины
колонок и отступов.
Count - количество колонок
Gutter - отступы между колонками
Stretch – сетка автоматически
подстраивается под ширину фрейма.
Margin - отступ от сетки до края фрейма
Type - определяет тип сетки:
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

22.

Теория
Типы модульных сеток
Uniform grid позволяет создавать однородные
и равномерно распределенные области на
поверхности макета. Ее можно сравнить с
тетрадным листом в клетку, в котором вебдизайнер указывает размеры клеток.
Column grid разделяет макет вертикально.
Колоночная сетка создает горизонтальный
ритм, основанный на соотношении ширины
колонок и отступов.
Count - количество колонок
Gutter - отступы между колонками
Margin - отступ от сетки до края фрейма
Stretch – сетка автоматически
подстраивается под ширину фрейма.
Center – сетка выравнивается по
центру.
Type - определяет тип сетки:
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

23.

Теория
Типы модульных сеток
Uniform grid позволяет создавать однородные
и равномерно распределенные области на
поверхности макета. Ее можно сравнить с
тетрадным листом в клетку, в котором вебдизайнер указывает размеры клеток.
Column grid разделяет макет вертикально.
Колоночная сетка создает горизонтальный
ритм, основанный на соотношении ширины
колонок и отступов.
Count - количество колонок
Gutter - отступы между колонками
Margin - отступ от сетки до края фрейма
Stretch – сетка автоматически
подстраивается под ширину фрейма.
Center – сетка выравнивается по
центру.
Left и Right – сетка выравнивается по
левому или правому краю.
Type - определяет тип сетки:
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

24.

Теория
Типы модульных сеток
Uniform grid позволяет создавать однородные
и равномерно распределенные области на
поверхности макета. Ее можно сравнить с
тетрадным листом в клетку, в котором вебдизайнер указывает размеры клеток.
Column grid разделяет макет вертикально.
Колоночная сетка создает горизонтальный
ритм, основанный на соотношении ширины
колонок и отступов.
Row grid организует макет горизонтально,
позволяя задавать высоту на определенных
уровнях индивидуально. Ее параметры
совпадают с колоночной сеткой.
Count - количество колонок
Gutter - отступы между колонками
Margin - отступ от сетки до края фрейма
Stretch – сетка автоматически
подстраивается под ширину фрейма.
Center – сетка выравнивается по
центру.
Left и Right – сетка выравнивается по
левому или правому краю.
Type - определяет тип сетки:
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

25.

Теория
Преимущества и недостатки модульной сетки
Преимущества
Недостатки
Помогают создавать
структурированные и
сосредоточенные объекты.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

26.

Теория
Преимущества и недостатки модульной сетки
Преимущества
Недостатки
Помогают создавать
структурированные и
сосредоточенные объекты.
Способствуют созданию визуальной
гармонии в дизайне, позволяя
дизайнерам более осознанно
использовать пространство.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

27.

Теория
Преимущества и недостатки модульной сетки
Преимущества
Недостатки
Помогают создавать
структурированные и
сосредоточенные объекты.
Способствуют созданию визуальной
гармонии в дизайне, позволяя
дизайнерам более осознанно
использовать пространство.
Основаны на физиологических
особенностях человеческого
восприятия
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

28.

Теория
Преимущества и недостатки модульной сетки
Преимущества
Недостатки
Помогают создавать
структурированные и
сосредоточенные объекты.
Способствуют созданию визуальной
гармонии в дизайне, позволяя
дизайнерам более осознанно
использовать пространство.
Основаны на физиологических
особенностях человеческого
восприятия
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

29.

Теория
Преимущества и недостатки модульной сетки
Преимущества
Недостатки
Помогают создавать
структурированные и
сосредоточенные объекты.
Ограничивают творческие
возможности дизайнеров
Способствуют созданию визуальной
гармонии в дизайне, позволяя
дизайнерам более осознанно
использовать пространство.
Основаны на физиологических
особенностях человеческого
восприятия
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

30.

Теория
Преимущества и недостатки модульной сетки
Преимущества
Недостатки
Помогают создавать
структурированные и
сосредоточенные объекты.
Ограничивают творческие
возможности дизайнеров
Способствуют созданию визуальной
гармонии в дизайне, позволяя
дизайнерам более осознанно
использовать пространство.
Создание модульной сетки требует
времени и усилий
Основаны на физиологических
особенностях человеческого
восприятия
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

31.

Теория
Преимущества и недостатки модульной сетки
Преимущества
Недостатки
Помогают создавать
структурированные и
сосредоточенные объекты.
Ограничивают творческие
возможности дизайнеров
Способствуют созданию визуальной
гармонии в дизайне, позволяя
дизайнерам более осознанно
использовать пространство.
Создание модульной сетки требует
времени и усилий
Основаны на физиологических
особенностях человеческого
восприятия
При использовании математических
систем дизайнер может создать
очень геометричный образ, который
больше напоминает саму сетку, чем
реальный макет
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

32.

33.

34.

Теория
1
2
Алгоритм расчета модульной сетки
Определение контента страницы
Определение базовой единицы
Базово используются значение – 8.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

35.

Теория
1
2
3
Алгоритм расчета модульной сетки
Определение контента страницы
Определение базовой единицы
Базово используются значение – 8.
Определение количества колонок
Обычно используют 12 колонок, что
позволяет создавать блоки различной
ширины и удобно располагать
разнообразные элементы.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

36.

Теория
1
2
3
4
Алгоритм расчета модульной сетки
Определение контента страницы
Определение базовой единицы
Базово используются значение – 8.
Определение количества колонок
Обычно используют 12 колонок, что
позволяет создавать блоки различной
ширины и удобно располагать
разнообразные элементы.
Задание параметров сетки
32 пикселя для расстояния между
колонками
240 пикселей для полей
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

37.

38.

Теория
Направляющие и линейка
Направляющие — это линии, которые можно размещать горизонтально
и вертикально в макете для точного позиционирования элементов.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

39.

Теория
Направляющие и линейка
Направляющие — это линии, которые можно размещать горизонтально
и вертикально в макете для точного позиционирования элементов.
Направляющие нужны, чтобы:
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

40.

Теория
Направляющие и линейка
Направляющие — это линии, которые можно размещать горизонтально
и вертикально в макете для точного позиционирования элементов.
Направляющие нужны, чтобы:
Выравнивать элементы
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

41.

Теория
Направляющие и линейка
Направляющие — это линии, которые можно размещать горизонтально
и вертикально в макете для точного позиционирования элементов.
Направляющие нужны, чтобы:
Выравнивать элементы
Создавать сетку
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании

42.

43.

ИТОГ
Повторение
Вопрос 1
Что такое модульная сетка?
Модульная сетка — это система организации
объектов в макете, основанная на колонках,
рядах и отступах между ними.
©2023 ООО «Юмакс». Все права защищены. Любое использование материалов допускается только с письменного согласия компании