Правила верстки электронных курсов

Содержание

Слайд 2

РАЗМЕТКА ЭКРАНА

РАЗМЕТКА ЭКРАНА

Слайд 3

Разметка экрана

Используются следующие параметры:
– Расстояние от нижней границы
заголовка слайда до контента

Разметка экрана Используются следующие параметры: – Расстояние от нижней границы заголовка слайда
– 20 px
– Отступ с левой, правой стороны, снизу и сверху до заголовка – 50 px 
Контент слайда должен быть выравнен по левой направляющей.
Расстояние между заголовком и контентом слайда не должно меняться.
Весь контент должен в рамках области.

В данном случае идет строгая привязка к отступам, но не к логотипу. Так тоже можно :)

Слайд 4

Разметка экрана с привязкой к логотипу

В этом случае идет привязка рабочей области

Разметка экрана с привязкой к логотипу В этом случае идет привязка рабочей области к логотипу.
к логотипу.

Слайд 5

Разметка экрана

Запрещается выходить за рамки разметки.

Это возможно, но только в том

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

Слайд 6

ТИПОГРАФИКА

ТИПОГРАФИКА

Слайд 7

Типографика

Заголовок 1-го уровня
Размер 24 px
Заголовок 2-го уровня
Размер 20 px
Заголовок 3-го уровня
Размер 14

Типографика Заголовок 1-го уровня Размер 24 px Заголовок 2-го уровня Размер 20
px
Наборный текст:
Размер 14 px

Предпочтительнее использовать списки через тире.

Слайд 8

Типографика

Как это выглядит в жизни.

Типографика Как это выглядит в жизни.

Слайд 9

Типографика

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

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

Слайд 10

Типографика

Такой вариант более динамичен и приятен.

Типографика Такой вариант более динамичен и приятен.

Слайд 11

Типографика

Т.к. это заголовки 3-го уровня, возможно использование 2 цветов.

Типографика Т.к. это заголовки 3-го уровня, возможно использование 2 цветов.

Слайд 12

Типографика

Заголовок, принадлежащий тексту должен быть ближе к нему чем к предыдущему блоку

Типографика Заголовок, принадлежащий тексту должен быть ближе к нему чем к предыдущему
текста.
В идеальном случае должно быть заполнено от 60 до 70 % общей области контента.
На экране 50 %, не хватает объема.

Слайд 13

Шрифт + блоки

Шрифт + блоки

Слайд 14

Шрифт + блоки иллюстраций

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

Шрифт + блоки иллюстраций Объем распределен неправильно, внутри пустота, композиция не выглядит цельной.

Слайд 15

Шрифт + блоки иллюстраций

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

Шрифт + блоки иллюстраций Объем распределен неправильно, внутри пустота, композиция не выглядит цельной.

Слайд 16

Шрифт + блоки иллюстраций

Приемлемый вариант. Визуально заполнено 60 % экрана. Вокруг есть

Шрифт + блоки иллюстраций Приемлемый вариант. Визуально заполнено 60 % экрана. Вокруг
воздух, композиция не перевешивает.

Слайд 17

Шрифт + блоки иллюстраций

Визуально заполнено 80 % экрана. Вокруг есть воздух, композиция

Шрифт + блоки иллюстраций Визуально заполнено 80 % экрана. Вокруг есть воздух, композиция не перевешивает.
не перевешивает.

Слайд 18

Шрифт + блоки иллюстраций

Вышли за рамки рабочей области контента.

Шрифт + блоки иллюстраций Вышли за рамки рабочей области контента.

Слайд 19

Шрифт + блоки схем

Пример верстки текстовых блоков и большой схемы.
Выравнивание по

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

Слайд 20

Шрифт + блоки схем

Даже если схема меньше по объему, можно выравнивать как

Шрифт + блоки схем Даже если схема меньше по объему, можно выравнивать
по левому краю, так и по центру.

Слайд 21

Шрифт + блоки схем

Пример выравнивания небольшой схемы по центру.

Шрифт + блоки схем Пример выравнивания небольшой схемы по центру.

Слайд 22

Шрифт + блоки схем

Главное, не увлекаться добавлением воздуха.

Шрифт + блоки схем Главное, не увлекаться добавлением воздуха.

Слайд 23

Шрифт + блоки схем + иллюстрации

Пример большого количества информации на экране.
Главное правило:

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

Слайд 24

Шрифт + блоки схем + иллюстрации

Шрифт + блоки схем + иллюстрации

Слайд 25

Варианты расположения блоков

Варианты расположения блоков

Слайд 26

Главное правило:
все блоки экрана должны
вписываться в прямоугольник*

*есть огромное количество случаев, когда

Главное правило: все блоки экрана должны вписываться в прямоугольник* *есть огромное количество
не получается соблюсти это правило,. Не паникуем, выравниваем по левому краю и соблюдаем оптимальное количество воздуха в макете.

Слайд 27

Варианты расположения блоков

Все элементы верстки визуально составляют прямоугольник.

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

Слайд 28

Варианты расположения блоков

Внизу могут располагаться иллюстрации.

Варианты расположения блоков Внизу могут располагаться иллюстрации.

Слайд 29

Варианты расположения блоков

Варианты расположения блоков

Слайд 30

Варианты расположения блоков

Общим объемом стараемся не заходить за рамки разметки.

Варианты расположения блоков Общим объемом стараемся не заходить за рамки разметки.

Слайд 31

Варианты расположения блоков

Не делаем больших пустых пространств между блоками.

Варианты расположения блоков Не делаем больших пустых пространств между блоками.

Слайд 32

Варианты расположения блоков

Текст привязываем к верхней границе блоков иллюстраций.

Варианты расположения блоков Текст привязываем к верхней границе блоков иллюстраций.

Слайд 33

Верстка таблиц

Верстка таблиц

Слайд 34

Таблицы

Сверстанная таблица, идентичная исходнику.

Таблицы Сверстанная таблица, идентичная исходнику.

Слайд 35

Таблицы

Изменив расположение блоков, можно добиться лучшей основательности.
Но появилась проблема: окантовка –

Таблицы Изменив расположение блоков, можно добиться лучшей основательности. Но появилась проблема: окантовка
насыщенна, информационное поле – пустое.

Слайд 36

Таблицы

Убираем фон с незначимых мест.

Таблицы Убираем фон с незначимых мест.

Слайд 37

Таблицы

Убираем фон со значимой строки, выделяем текст жирным, она остается якорем. Таблицы

Таблицы Убираем фон со значимой строки, выделяем текст жирным, она остается якорем.
смотрится легко, хорошо читаема.

Слайд 38

Таблицы

Уменьшаем графические элементы в строках.

Таблицы Уменьшаем графические элементы в строках.

Слайд 39

Верстка схем

Верстка схем

Слайд 40

Схемы

Основные правила:
Текст в блоках выравнивается по левому краю*.
Блок текста выравнивается по центру

Схемы Основные правила: Текст в блоках выравнивается по левому краю*. Блок текста
плашки (равные отступы, помечены красными квадратами).

*если в блоке одно слово – выравнивается по центру.

Слайд 41

Схемы

Ошибки:
Блок текста не по центру плашки.
Схема «прилипла» к тексту.
Разные расстояния от краев

Схемы Ошибки: Блок текста не по центру плашки. Схема «прилипла» к тексту.
плашек до текста.

Слайд 42

Схемы

Блоки схем выравниваются по одной линии.

Схемы Блоки схем выравниваются по одной линии.

Слайд 43

Верстка балунов

Верстка балунов

Слайд 44

Балуны

Блок с текстом выравнивается по центру плашки.
Текст в прямоугольной плашке выравнивается

Балуны Блок с текстом выравнивается по центру плашки. Текст в прямоугольной плашке
по левому краю.
Текст в круглом или овальном балуне выравнивается по центру.

Слайд 45

Балуны

Ошибка – слишком близко к границе балунов.

Балуны Ошибка – слишком близко к границе балунов.

Слайд 46

Верстка кнопок

Верстка кнопок

Слайд 47

Кнопки

Не зависимо от длины набранного слова соблюдаем правило отступов:
Слева/справа одинаковый отступ.
Снизу отступ

Кнопки Не зависимо от длины набранного слова соблюдаем правило отступов: Слева/справа одинаковый
на пиксель меньше чем сверху.
Это позволит разместить слово визуально по центру.

Слайд 48

Балуны

Ошибка – разные расстояния в плашке от слова.

Балуны Ошибка – разные расстояния в плашке от слова.

Слайд 49

Полезные ссылки

Полезные ссылки

Слайд 50

Ссылки

Правила верстки http://artgorbunov.ru/bb/soviet/
Отличные визуальные примеры https://www.behance.net/
Ководство Артемия Лебедева http://www.artlebedev.ru/kovodstvo/sections/
Огромное количество всего https://ru.pinterest.com/
Примеры

Ссылки Правила верстки http://artgorbunov.ru/bb/soviet/ Отличные визуальные примеры https://www.behance.net/ Ководство Артемия Лебедева http://www.artlebedev.ru/kovodstvo/sections/
иллюстраций, верстки, иконок https://dribbble.com/
Статьи о верстке http://awdee.ru/
Бесплатные psd-исходники http://ru.365psd.com/free-psd/ui-kits/12
Иконки в png и svg бесплатно/платно https://www.iconfinder.com/