Королевство шрифтов, или как использовать шрифты в e-learning?

Как-то давным-давно, а, может, и не так уж давно (смотря для кого), появилось в нашей Галактике королевство шрифтов. Ну как появилось… Скорее трансформировалось или модифицировалось, хотя не в этом суть! Главное, что такое королевство существует и оказывает немаловажное влияние на Его Величество e-Learning. Так чем же так полезно данное королевство для электронного обучения? 

Персонажи для курсов e-learning. Неудачный опыт использования в визуальных произведениях

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

  

Типографика и большие изображения в веб-дизайне

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

amazeelabs.com

Минимализм в веб-дизайне. Минималистичные сайты

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

Интерактивная инфографика для сайта

Представляем вашему вниманию новый обзор сайтов, на которых успешно реализованы актуальные приемы сайтостроительства.
На этот раз рассмотрим сайты, основной блок информации в которых представлен в виде очень модной и актуальной сейчас интерактивной инфографики. В основном это всяческие вариации в представлении временной шкалы (timeline), но есть и исключения.

toyotahalloffame.com/history

campbellharrison.co.uk

belvitabreakfast.com.au

nuestravidaeslaleche.es

latabladegisela.com/#gisela-pulido

Зрительная память как важный фактор для разработки интерактивных учебных курсов

При разработке интерактивных учебных курсов ставка делается на зрительную память обучающихся. 
У зрительной памяти, как и других видов памяти, выделяют три основных процесса:
-запоминание;
-хранение;
-воспроизведение и узнавание.
Не будем вдаваться в подробности работы всех процессов, остановимся только на процессе запоминания. 

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

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

Приведем  примеры сайтов, в которых отлично проработана анимация персонажей, а сцены отрисованы настолько осмысленно, что сопровождать их текстовыми пояснениями практически не нужно.

visualwebsiteoptimizer.com/what-is-ab-testing

everylastdrop.co.uk

www.rleonardi.com/interactive-resume

kohlsplayitforward.org

boksquiz.org

costa.co.uk/experience/#/1/nations-favourite

Новый обзор самых "вкусных" приемов в веб-дизайне и сайтов, где эти приемы успешно реализованы

Мир веб-дизайна не стоит на месте и мы вместе с ним развиваемся и впитываем в себя все самое лучшее из этой индустрии.

Эффект глубины, объема и параллакс
quatrofolhas.pt

Короткие видео-ролики и "живые" фотографии, также обратите внимание на размер изображений
meganemonacogp.renault.fr

Флэт-дизайн и динамика
agence-tactile.fr

Скролл, анимации, параллакс, работа с текстом
fueled.com

Работа с информацией, скролл-навигация, большие фото, анимация, параллакс, стиль
jilsanderfragrances.com

Флэт, "живые" фото, анимации, большие фото, вариант галереи и ее компоновки с информацией
agence-tactile.fr

ristorantebastimento.it

Flat дизайн или реализм?

Плоский дизайн ( или flat дизайн) в последние два года является крайне популярным направлением в веб-дизайне. Перечислим отличия flat дизайна от других направлений веб-дизайна и немного расскажем о них:

- простые элементы. Иконки и блоки обладают минимальным количеством деталей;

- отсутствие каких-либо эффектов кроме "длинной" тени. Не используются эффекты, которые придают картинке реальный и объемный вид;

- минимализм. Небольшое число объектов на сцене, каждый объект - акцент;

- активное использование типографики. Использование нескольких шрифтов и "правильная" по меркам типографики их компановка;

- использование ярких и красочных палитр. Палитры могут включать от 2 до 8 цветов. Используются "чистые" цвета цветового круга;

- упор на визуальное восприятие. Минимум текста и больше графики.

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

В заключении этого краткого обзора хотелось бы показать проект студии inFacto "flat дизайн против реализма"

flatvsrealism.com