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

1.

www.labmedia.su
ПРАВИЛА ВЕРСТКИ ЭЛЕКТРОННЫХ КУРСОВ
www.labmedia.su

2.

www.labmedia.su
РАЗМЕТКА ЭКРАНА
www.labmedia.su

3.

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

4.

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

5.

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

6.

www.labmedia.su
ТИПОГРАФИКА
www.labmedia.su

7.

Типографика
Заголовок 1-го уровня
Размер 24 px
Заголовок 2-го уровня
Размер 20 px
Заголовок 3-го уровня
Размер 14 px
Наборный текст:
Размер 14 px
Предпочтительнее использовать списки через тире.
www.labmedia.su

8.

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

9.

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

10.

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

11.

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

12.

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

13.

www.labmedia.su
Шрифт + блоки
www.labmedia.su

14.

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

15.

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

16.

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

17.

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

18.

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

19.

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

20.

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

21.

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

22.

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

23.

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

24.

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

25.

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

26.

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

27.

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

28.

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

29.

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

30.

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

31.

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

32.

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

33.

www.labmedia.su
Верстка таблиц
www.labmedia.su

34.

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

35.

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

36.

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

37.

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

38.

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

39.

www.labmedia.su
Верстка схем
www.labmedia.su

40.

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

41.

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

42.

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

43.

www.labmedia.su
Верстка балунов
www.labmedia.su

44.

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

45.

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

46.

www.labmedia.su
Верстка кнопок
www.labmedia.su

47.

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

48.

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

49.

www.labmedia.su
Полезные ссылки
www.labmedia.su

50.

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

51.

www.labmedia.su
Следуй правилам!
www.labmedia.su