Websoft

четверг, января 26, 2012

Сикось-нафиг или аптекарская точность?

А вот и первый пост Сергея Колкова, который я сделал от своего имени по техническим причинам:

После конкурса на лучший электронный курс, разработанный с помощью редактора CourseLab 2011г, в котором участвовал наш курс, я «получил по башке» от зрителей за один слайд типа: «Чтож так все криво!».



Соглашусь, что блоки расположены немного странно, но так ли слайд крив в целом?
Стрелками одного цвета показаны одинаковые отступы.

Как это возможно?
Легко! Если для размещения объектов на слайде использовать модульную сетку.


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



Все современные профессиональные графические редакторы и настольные издательские системы снабжены инструментами для настройки параметров модульной сетки (даже в последних версиях MS PowerPoint появилась сетка).

В CourseLab модульной сетки нет, но ее нетрудно сделать самому.
Как сделать модульную сетку для курса?



Шаг1 – определяем размер будущей сетки.

Создаем прямоугольный объект на слайде. Подойдет любой текстовый блок или автофигура Прямоугольник.
Подгоняем ее размер под размер рабочей области.
Смотрим и запоминаем размер в свойствах объекта.
Шаг 2 – определяем размер модуля (ячейки сетки или количество горизонтальных и вертикальных направляющих).

Однажды я спросил у нашего дизайнера в банке: «Чем надо руководствоваться при определении размера модуля?». У нас получился гениальный по содержательности и глубине диалог, поэтому привожу его целиком.

Колков. Чем надо руководствоваться при определении размера модуля?
Дизайнер. Бренд-буком.
Колков. А если его нет?
Дизайнер. Здравым смыслом и чувством прекрасного.

Поэтому сегодня могу посоветовать делать «на глаз» с учетом размеров и количества объектов, которое будете размещать на слайде. И/или размер модуля должен быть сопоставим с размером шрифта.

По бренд-буку Банка «Возрождение» – 40х40.

Шаг 3 – создаем стеку.

Я использовал Adobe Illustrator, но подойдет и CorelDRAW (или ваАще Excel).
Результат сохраняем как растровое изображение (*.gif или *.png).

Шаг 4 – вставляем в CourseLab.

Полученную сетку кладем на Мастер в CourseLab и включаем параметр Появление – Показать – Нет. Тогда при монтаже слайда сетка видна, а при просмотре – нет. И после того как курс готов, сетку можно даже не удалять.


Внимание! Модульная сетка нужна для размещения и согласования местоположения объектов. Для выравнивания и распределения все же лучше использовать стандартные средства CourseLab – Выровнять и Распределить.



P.S. В «кривизне» есть своя изюминка. Если все слайды оформлены идеально «правильно», то никто это не заметит и не оценит – так оно и должно быть. Но стоит один слайд сделать «наоборот» и это заметят все (а некоторые даже скажут). Этим можно воспользоваться!

7 комментариев:

М. Н. Морозов комментирует...

Какое отношение верстка имеет к Технологии e-learning ?

Алексей Корольков комментирует...

Верстка электронных курсов, по моему, имеет прямое отношение к e-learning.

Описан вполне себе практический прием работы в авторском средстве.

Дюсьмикеев. МедиуМ. комментирует...

Сергей, здОрово!
Я - за аптекарскую точность и за "кривой элемент", который послужит акцентом.
Нужно бы обозначить, что в курсоделании (я намеренно избегаю тему контента), как и в любом содержательном проекте есть 3 кита, которые определяют основные параметры удачной верстки: цвета, шрифты и композиция.

Сергей Колков комментирует...

2 Дюсьмикеев. МедиуМ.
Андрей, спасибо за поддержку!
До «кривых элементов» тоже со временем доберемся именно с точки зрения расстановки акцентов.

2 М. Н. Морозов
А вы много знаете компаний, где автор, «пед дизайнер», верстальщик, программист, художник, администратор и тд и тп - разные люди?
До тех пор пока не появится узкая специализация в ДО, верстка будет неотъемлемой частью «Технологии e-learning».
И как только такая специализация появится, надобность в подобных статьях, тем более с таким уровнем детализации, отпадет.

Russian Top Blogspot комментирует...

Привет, этот пост попал в Топ каталога Russian Top Blogspot

Александр Путко комментирует...

Полезная статья )
Правда от создания графического объекта с сеткой я отказался - мне хватает только одной вертикальной направляющей слева, нарисованной в самом Курслабе )

а вот совет не показывать объект полезен был ) сам как то не додумался - в каждом курсе перед публикацией удалял направляющую.

Было бы отлично, если в Курслабе появятся направляющие и привязка к ним.

Кира Гусева комментирует...

Я тоже за точность, хотя ограничиваюсь обычно отступами от краев (рисую квадратик без показа в мастер-слайде). Иногда задумываюсь о том, что визуальный ряд - пожалуй, самое важное в e-Learning. И в презентациях. Иначе все можно раздавать в файлах *doc или *txt ) А ровность и точность - характеристики визуального ряда. Когда слайд ровный, любо-дорого смотреть. А то бывают курсы, по содержанию - конфетка, по оформлению - зеро. Если честно, когда я смотрела работы участников конкурса прошлого года, те, которые с первого-второго слайда не нравились внешне, закрывала, каюсь :) Да и сама часто грешу кривизной.
А ты - молодец! Буду читать твой блог с удовольствием и пользой для себя.