Визуализация презентаций в стиле IT-компаний

Хочу рассказать о том, как можно использовать ярко-выраженные стили трех IT-компаний для оформления следующих инструментов визуализации в презентации:
  1. Иллюстрации — помогают передать сообщение быстрее текста.
  2. Цвет — позволяет поставить акцент.
  3. Список — структурирует информацию для лучшего восприятия.
  4. Заголовки (подзаголовки) — концентрируют внимание на смысле слайда.
  5. Pager (нумератор) — указывает номер/раздел на слайде из общего содержимого.
  6. Tracker (заглушка) — напоминает на каком месте в презентации находится слайд.





Подборка визуализаций, а также приемы использования определенных инструментов и стилей могут оказаться полезны тем, кто ищет новые (они же хорошо забытые старые) приемы оформления слайдов, и послужить tutorial’ом для составления интересных презентаций.

Disclaimer
При изучении стилей презентаций компании не брались за основу соответствующие руководства/guidelines компаний.
Компании используют также другой инструментарий и другие стили оформления слайдов.
Представленные инструменты используются не только упомянутыми компаниями.
Изображения использованы в образовательных целях.
Стили упомянутых компаний являются собирательными образами.


Стильные IT-компании


Примеры использования инструментов из жизни продуктов компании, презентаций, элементов интерфейса продуктов и сервисов, философии и концепции:
  • Apple использует укрупненные объекты на слайде (изображения, текст), градиентный фон, блики и тени на изображениях.
  • Opera работает с выделением текста на белом фоне, а также на полупрозрачной полосе.
  • Microsoft предложил собственный стиль: минимализм, иконографика, grid (выравнивание по решетке), равномерные и тусклые цвета, продолговатый шрифт без засечек Segoe UI.

Примеры инструментов визуализации в действии:
  • Иллюстрации: от картинки для привлечения внимания до инфографики.
  • Цвет: выделить текст на фоне или изображении.
  • Список: от bullet points до комиксов.
  • Заголовки: от заглавной буквы с красной строки до титульного листа.
  • Pager: указать текущий слайд можно как 2/5, а можно и [ 1 2 3 4 5 ].
  • Tracker: вставить слайд посреди презентации — “до конца презентации осталось 10 слайдов”.



1. Инструмент: иллюстрации


Apple
Размещение изображения “настоящего, живого” предмета, о котором в данный момент идет речь.



Opera
Размещение фонового рисунка в качестве дополнения к основному текстовому сообщению.



Microsoft
Использование иконографики, подбор пиктограмм в качестве основного смыслового выражения и дополнение вспомогательным текстом.





2. Инструмент: цвет


Apple
Белый текст, контрастирующий с темным фоном.



Opera
Черный и серый цвета для основного текста, красный (фирменный) цвет для выделения на белом (или сером) фоне.



Microsoft
Разного цвета текст на светлом/темном фоне, обязательно контрастный. Выделение “жирным” или другим цветом.





3. Инструмент: список


Apple
Разделение списков разного уровня за счет изменения размера шрифта, отступов и выделение “жирным”. Отсутствие маркеров (bullet points), нумерации.



Opera
Использование нумерованного и маркированного списка.



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





4. Инструмент: заголовки


Apple
В качестве заголовка — крупный текст или картинка, несущая всю смысловую нагрузку.



Opera
Текстовый заголовок отделен от другой информации на слайде.



Microsoft
Текстовый заголовок встроен в другую информацию на слайде.





5. Инструмент: pager


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



Opera
Помимо простой нумерации в (правом нижнем) углу слайда используется шапка (header) и футер (footer).



Microsoft
Эффект панорамы с фокусом на месте нахождения.





6. Инструмент: tracker


Apple
Слайд состоит целиком из порядкового номера или объекта, показывающего о каком предмете или каких цифрах сейчас пойдет речь.



Opera
Текстовое выделение названия следующего раздела в списке содержимого презентации. Классика для tracker’a.



Microsoft
Отображение всего содержимого с акцентом на текущем разделе за счет фона.





И в качестве заключения


Пока готовится новая статья с описанием интересных инструментов и стилей, рекомендую посмотреть пару популярных презентаций на Slideshare для вдохновения:
Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 13

    +2
    Pager (нумератор) — указывает номер/раздел на слайде из общего содержимого.
    Tracker (заглушка) — напоминает на каком месте в презентации находится слайд.

    В чем отличие Pager от Tracker в вашем определении? Даже в примере заметно, что вы не очень видите разницу:
    Pager: указать текущий слайд можно как 2/5, а можно и [ 1 2 3 4 5 ].
    Tracker: вставить слайд посреди презентации — “до конца презентации осталось 10 слайдов”.
      0
      Pager — информация внутри смыслового слайда.
      Tracker — отдельный смысловой слайд.
        0
        Достаточно бессмысленно напоминать, в каком месте презентации находится трекер, потому что эта информация очевидна из пейджера.

        Так что смысловое разделение между этими двумя вещами все равно неочевидно.
          0
          Пример использования сразу двух инструментов:
          Pager — нумерация в правом нижнем углу каждого слайда
          Tracker — слайды #2, 10, 15, 19, 29, 37.



          Субъективную оценку (бессмысленно или нет) давать не буду. Можно использовать один из двух инструментов.
            0
            Так вот, все трекеры в вашем примере не показывают, сколько осталось, а пейджер не показывает общее содержимое (да и вообще не очень понятно, зачем он нужен, если честно — помимо работы с хендаутами, которых все равно нет).
      0
      Мне субъективно стиль презентаций Майкрософта кажется наименее удачным. И-за, пусть и бледновато-тусклой, но разноцветности, не всегда ясно на чём именно сфокусировать внимание.
        +3
        Дело в том, что для всех остальных компаний приведены слайды из презентаций для пользователей, причем презентаций, нацеленных на ознакомление с продуктом.

        В случае же с microsoft приведены слайды со скришотами их новых операционных систем, и анализируется не сама презентация и ее структура, а структура дизайна операционной системы
          0
          В случае же с microsoft приведены слайды со скришотами их новых операционных систем, и анализируется не сама презентация и ее структура, а структура дизайна операционной системы

          Что лишний раз показывает нам, что у автора в голове, гм, каша.
            0
            На 300% каша. Я не понял, причём тут презентации когда увидел некое кустарное описание дока OS X. Причём тут презентация?
          0
          На самом деле в самой презентации цвет как раз выделяет разделы. Там есть разноцветный список всех разделов в начале, а потом идут слайды по темам, где уже используется один акцентирующий цвет. Так что с тем на чем фокусироваться там проблем нет.
          +1
          Выступления, в которых применялись данные презентации, рассказывали о разных сущностях. Выступление Apple было ориентировано на широкий круг пользователей, которым преподносилась информация о новых hardware-продуктах, успехе компании на разных рынках; выступление Opera, сопровождаемое данной презентацией было направлено на круг специалистов, которых было необходимо убедить в целесообразности использования инструментов Opera; выступление же Microsoft повествовало о новом интерфейсе операционных систем. Сравнивать данные презентации не имеет никакого смысла — все они решают разные задачи.

          Корректным было бы сравнение, к примеру, презентаций Safari, IE и Opera Desktop, направленных на одну и ту же целевую аудиторию.

          Продуманная же визуальная составляющая (так называемый «дизайн») есть только у презентации Apple — когда команда дизайнеров работала над каждым конкретным слайдом. Компания Opera использовала стандартные элементы оформления, Microsoft по сути просто показывала новый интерфейс и его конкретные элементы.
            0
            Возьмём не презентации, а страницы похожих продуктов разных компаний:

            www.apple.com/ru/safari/
            www.opera.com/browser/features/
            windows.microsoft.com/ru-RU/windows-8/internet-explorer

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

            И разница в подходах тоже на лицо: показать только часть интерфейса или весь экран монитора, перечислить несколько и много возможностей, где расположить ссылку для загрузки программы и нужно ли её размещать вообще? И так далее.
            +2
            Одна из самых успешных IT компаний в России.
            Только хардкор.

            image

            Only users with full accounts can post comments. Log in, please.