10 правил типографики

Онлайн-школа Contented перевела отличный материал о шрифтах за авторством Ника Бабича, главного редактора UX Planet.

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

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

Весь материал: http://clc.to/f1uiLw

А я выпишу в посте основные тезисы и припишу к ним свои соображения.

1. Используйте минимальное количество шрифтов. Для слайда вам должно хватить двух начертаний одного шрифта. Или двух шрифтов. Не более.

2. Старайтесь использовать стандартные шрифты (Если это не Calibri, Comic Sans или Times New Roman).

3. Ограничьте длину строк. Запомните: стандартный текстовый блок не должен превышать половину слайда.

4. Не минимизируйте расстояние между строками.

5. Используйте контрастные цвета для текста.

3 способа снизить тревожность перед выступлением

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

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

1. Метод 54321
Назовите в слух или про себя 5 предметов, которые вы видите в комнате (например, стул, стол и т.д.).
Назовите 4 ощущения, которые вы можете почувствовать (например, поток воздуха из кондиционера).
Назовите 3 звука, которые вы можете услышать (например, шум машин за окном).
Назовите 2 запаха, которые вы можете почувствовать сейчас (например, туалетная вода вашего спутника)
Назовите 1 свое положительное качество (например, что вы умный).

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

3. Упражнения для памяти
Чтобы отвлечь свой мозг от фантазий на тему негативного развития событий, нужно достать из своего багажа знания, которые вы давно не использовали.
Например, попробуйте вспомнить как можно больше собачьих пород.
Или все города мира, в которых вы побывали.
Имена и фамилии одноклассников.
В крайнем случае неплохо работает таблица умножения или алфавит (его можно попробовать прочитать наоборот).

Не переживайте. Никто еще не умер от публичного выступления (по крайней мере я таких случаев не встречал).

Подбор правильных цветовых палитр для визуализации данных

Удивительно, но и в PowerPoint и в Keynote предлагаются совершенно ужасные палитры для работы с графиками. Да, они контрастны и функциональны. Но когда вы смотрите на свои графики и думаете, почему они выглядят не так прекрасно, как могли бы — это все из-за палитры (и еще из-за пары других причин, о которых я писал или напишу позже).

Спасибо Nancy Pong и Ринату Шайхутдинову, которые перевели замечательный мануал по работе с цветом. Материал обладает отличным балансом теории и практики с примерами.

То есть можно целиком погрузиться в проблему:
— Сколько цветов нужно для визуализации данных
— Можно ли использовать градиентные палитры
— Почему “природные” цвета лучше работают

И найти решения:
— Где взять дополнительные палитры
— Список инструментов для подбора цветов
— Библиотеки для работы с цветами

http://clc.to/EI3EBQ

​Коллекция (огромная) бесплатных иллюстраций от Катерины Лимпитсоуни

Фотографии или иллюстрации — главный помощник любого слайдоваятеля. Они отлично усиливают сообщение на слайде, делают его запоминающимся и заполняют пустое пространство, которого все так боятся.

Греческая иллюстратор Катерина выкладывает свои творения в модном стиле (бесформенные пятна, складывающиеся в единого человека): http://clc.to/6iReew

На сайте можно настроить цветовую палитру картинки и скачать ее в PNG, чтобы сразу вставить на слайд. Или в векторном формате, чтобы подправить на свое усмотрение. Есть поиск по ключевым словам.

Как люди принимают решения

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

Ян Австрейх перевел статью доктора психологических наук Сьюзан Вйншенк о том, как люди принимают решения в тех или иных ситуациях: http://clc.to/3DFCkA
Статья на русском и с примерами.

Вот основные тезисы статьи, которые я отобрал для вас:

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

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

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

— Люди покупают, когда чувствуют уверенность в своем решении, а не когда у них достаточно информации о продукте.

— Людям нравится думать, что они последовательны и логичны. Чтобы у того, кто принимает решение, была «рациональная» причина, которую он представит себе и другим, можно презентовать ему логичные доводы.

— Есть два типа решений, которые принимают люди. Целенаправленные решения, принимаются в орбитофронтальной коре (ОФК). Если вы действительно сравниваете характеристики Honda и Subaru, когда покупаете автомобиль, вы принимаете целенаправленное решение. Решения на основе привычки осуществляются в базальных ганглиях (глубоко в мозге). Когда вы вновь берёте любимые хлопья в магазине и кладете их в корзину, это решение, основанное на привычке.

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

— Когда есть слишком много вариантов, люди не станут выбирать. Пять — это уже много. Ограничьте количество вариантов, между которыми нужно выбрать, одним, двумя или тремя.

Screely: сервис браузерных мокапов

Сайт с очень простой функцией, которая поможет лично мне сэкономить кучу времени.

Очень часто для иллюстраций на слайде мне нужно помещать  изображения в рамку браузера. Даже при наличии готовых рамок приходилось тратить время на их редактирование под размер картинки.

Теперь все быстрее.
Я захожу на сайт, загружаю картинку, настраиваю рамку браузера вокруг изображения и фон. Скачиваю.

Очень просто, очень удобно.

http://clc.to/hWu9MA

12 забавных графиков, на которых наглядно видно, как важен выбор цвета

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

Как выбирать правильные цвета, я уже рассказывал.

http://clc.to/tjwslw

Бесплатные шаблоны презентаций

Итак, начинается рабочая неделя, а значит кто-то из вас приступает к созданию новых презентаций или возвращается к финализации старых през.

Чтобы ваша неделя прошла чуть спокойнее, возобновляю привычную рубрику.
Новые слайды доступны и для PowerPoint и для Keynote.
Для скачивания достаточно оставить свой email, чтобы получить ссылку.

Первый набор с максимальным количеством слайдов: http://clc.to/Me7bsg

Второй набор со слайдами для презентации приложения: http://clc.to/xCaloA

Хорошей недели!

Сервис подбора шрифтовых пар (лучше, чем предыдущие)

Даже если ваши слайды состоят только из заголовков и буллет-поинтов, правильно подобранная шрифтовая пара сделает вашу презентацию сексуальнее.

Чем этот сервис лучше предыдущих:
— Есть поиск не только по “стилистике”, но и по настроению (субъективно, но интересно)
— Очень много шрифтовых комбинаций
— Для каждой пары шрифтов подобран отличный референс
— Шрифты можно скачать прям тут же сразу одним архивом

Вся прелесть по ссылке: http://clc.to/Ny8ISw

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

Рецензия на книгу HBR Guide: Эмоциональный Интеллект

Сегодня продолжу рассказывать о книгах Издательство МИФ с помощью карточек. Сегодня — комбо: книга от Harvard Business Review (я нередко ссылаюсь на их материалы в канале). И это книга о самой модной теме прошлого года — эмоциональном интеллекте. Думаю, получилось не скучно.

http://clc.to/e6ITRw

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

На очереди еще две книги: о дизайн-мышлении и работе мозга! Не отключайтесь!
illustration by Ouch.pics
https://icons8.com

Отстоять идею

Отличный материал в корпоративном блоге Мегаплана.
К сожалению, даже самые блестящие идеи могут быть непонятны или отвергнуты в силу огромного количества причин. Не ждите мгновенного признания, приготовьтесь к тому, что за идею придется повоевать. И, скорее всего, на слайдах и во время презентации.

Чем мне понравилась статья: очень четкой структурой повествования и упоминанием аспектов, которые очевидны и на 100% верны, но не упомянуты в большинстве аналогичных материалов.

Избранные цитаты:

Невозможно отстоять идею, в которую сам до конца не веришь. Это кажется очевидным, но мои идеи часто проваливались только из-за того, что я сама в них сомневалась.

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

Вашу идею примут с большей вероятностью, если вы возьмете ответственность за нее.

Когда мы завоевываем авторитет, коллеги быстрее с нами соглашаются и доверяют нашему мнению.

Это кажется абсурдом, но прием работает в обратную сторону: когда собеседник видит, что вы готовы уступить, он принимает вашу сторону.

Даже если вы красочно описываете идею, собедник не представит ее так, как представляете вы. Это снижает шансы получать одобрение. Поэтому лучше соберите быстрый прототип и покажите его. Даже схематичное изображение на бумаге сработает лучше слов.

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

Статья целиком на русском по ссылке:
http://clc.to/y0R0yw

TEDx: Томи МакКолл и гениальная простота отличной графики

Пост для всех, кто делает отчеты.

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

Даже если вы просто делаете графики с ростом доходов компании, это видео сделает вас немного лучше!

Видео
5 минут 44 секунды
Английский язык
Русские субтитры

http://clc.to/fbPucA

База человеческих аватарок

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

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

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

http://clc.to/nPHnjA

Ментальное моделирование

Очень полезное упражнение — представлять какие-то сложные события из жизни и продумывать пошаговый план достижения цели. Например, американские пилоты тренируются, представляя, как в самолете при стечении каких-то необычных обстоятельств произошла авария. И затем шаг за шагом они в голове визуализируют свои действия для решения проблемы.

Этот прием позволяет формировать в мозгу нейронные связи. И если вдруг заранее продуманная ситуация случится в жизни, пилоту будет легче выполнить все необходимые действия. Уровень стресса будет гораздо ниже, решения будут приниматься быстрее.

Как это работает для презентаций:
— Накануне важного выступления несколько раз в день ментально смоделируйте, как это будет. Прям в деталях: с чего вы начнете, как будете ходить, куда смотреть.
— Представьте, что вам задают разные вопросы. На некоторые вы знаете ответ. На некоторые — нет. Подумайте тщательно, как вы станете блестяще парировать.
— Подумайте о маловероятных ситуациях. Они могут быть гораздо вероятнее, чем вы думаете. Что вы будете делать, если вдруг все потянутся к выходу? А когда включится пожарная сигнализация? Внезапно погаснет дисплей? Перестанет работать пульт? Видео запустится без звука? Вы оступитесь перед проектором?

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

​Google Data GIF Maker

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

Как вы знаете, максимально эффективно графики работают в динамике (более смысла на площадь экрана). Но и в PowerPoint и в Keynote отображение данных статично.

Да, есть онлайн-сервисы, которые отображают бегающие графики. Но перенести всю эту красоту на слайды — нетривиальная задача. И, возможно, единственный странный, но доступный метод — это запись экрана. Но и тут есть проблема: не всегда удается вставить видео в Powerpoint так, чтобы оно нормально открывалось на других компьютерах.

Оказывается, у Гугла давно есть сервис, который:
— Визуально прекрасно и динамично отображает данные.
— Обладает большим количеством настроек.
— Позволяет сохранять полученную анимацию в виде GIF
— Да, GIF, добавленный на слайд, всегда и у всех отображается так, как и задумано.

http://clc.to/WoCx4g

Сделайте свой отчет незабываемым!

Что вы хотели узнать о презентациях, но боялись спросить?

Каждый день я рассказываю вам что-то новое о презентациях. Это то, что я нахожу для себя или в своем информационном потоке.

Это все полезно для вас и вашего развития. Но, возможно, есть вопросы, ответы на которые вы не знаете. И есть вопросы, ответы на которые вы может не увидеть в канале, потому что я давным-давно сделал посты об этом и забыл.

Поэтому предлагаю попробовать новый (он же хорошо забытый старый) формат.
Вы задаете вопросы, а я на них отвечаю. Чтобы всем было удобно, я создал специальную простую форму для ваших вопросов: https://ru.surveymonkey.com/r/PMXCDX5

Не бойтесь показаться банальными или задать глупый, по вашему мнению, вопрос. Не бывает глупых вопросов, бывают неэффективные презентации.
Мне интересна любая проблема. Жду ваших вопросов!

Привет!

Определенно, эксперимент удался. Я получил большое количество интересных вопросов и рекорд по отпискам. Спасибо за вопросы и предложения, благодаря вам я переосмыслил некоторые вещи на выходных. Продолжайте задавать вопросы с помощью специальной формы (https://ru.surveymonkey.com/r/PMXCDX5).  А я начну публиковать ответы. К сожалению, первый блин пошел комом и несколько первых вопросов не сохранилось дословно. Поэтому перескажу их как запомнил и как понял.

Как делать презентации в духе финансовых консультантов из большой четверки и McKinsey? Презентации, которые надо отправлять по почте и которые должны быть понятны после прочтения.

В той или иной степени я писал об этом. Но вопрос просто отличный. Перечислю все доступные навыки в одном посте. Итак, что необходимо учитывать:

1. Для начала ссылки на сборники презентаций консультантов.
Сборник на сайте Consultant’s mind (http://clc.to/DyKKCA). Наверное, самый интересный блог консультанта для консультантов.

Свежая презентация от Boston Consulting Group, на которую я буду ссылаться (https://yadi.sk/i/tC4mt25zsDH4hQ).

2. Структура. Именно благодаря четкой структуре презентации становятся понятными. При этом читателю постоянно напоминают о структуре с помощью отбивок и пояснений в духе “Мы сейчас выяснили вот это, а теперь переходим к вот этому, чтобы потом понять вот то”.

К сожалению, нет единой унифицированной структуры презентации для консалтинговых презентаций. Есть общие подходы (например, любимый мой принцип пирамиды Минто: http://clc.to/cRKhrA). Но я думаю, что у каждый большой презентации свой уникальный сторителлинг.

Но вы всегда можете найти презентацию схожего направления в открытых источниках и посмотреть на подход к структуре. Потому что структура — это самое важное!

3. Данные. Еще одна составляющая презентаций консультантов — это обилие графиков и их неплохая визуализация. Посмотрите на слайды BCG. Видно, что делал их человек, далекий от дизайна. Но тем не менее с точки передачи информации они очень даже ок.

О чем стоит помнить, когда вы делаете графики:

— Правильно выбирайте формат графика. Барчарты и пайчарты не идеальны и недостаточно функциональны. Вот очень классный каталог визуализации данных на русском языке, с помощью которого вы сможете выбрать подходящий формат и узнаете, как лучше всего его использовать: http://clc.to/WRNdUQ.

— Убирайте всю лишнюю информацию с графика. Читатели должны видеть только то, что им важно.

— Всегда пишите интерпретацию: что именно вы показываете на графике, зачем вы это делаете и какие выводы из графика должны сделать ваши читатели.

4. Фреймворки и канвасы. Там, где аналитика уступает место текстовому контенту, не стоит излагать свои мысли белым стихом по слайду. Фремворки позволяют все структурировать в рамках одного слайда и превратить пространное повествование в четкие мысли. Самый простой пример — это SWOT-анализ. Но есть множество других визуальных систем.
Я давно собрал коллекцию маркетинговых фреймворков (http://clc.to/QjZarA), которые помогут понять суть подхода. Но и там можно найти что-нибудь полезное для себя.

​Продолжаю вдумчиво и основательно отвечать на вопросы, которые вы задаете мне с помощью специальной формы (http://clc.to/1Dr0TQ).

Есть ли правила/стандарты как стоит располагать направляющие линии на слайде? Может есть линии, которые должны быть на одном месте в любой презентации, и те, которые можно двигать самому в зависимости от слайда. Если нет, как лучше настроить направляющие?:)

В начале немного теории. Гармоничные слайды (их еще называют “красивыми”) отличаются от любительских принципом расположения объектов. Любители накидывают разный контент на слайд и двигают его хаотично, пытаясь достичь красоты. Это неправильно.

Гармония на слайде достигается путем симметричного размещения объектов. Это просто. Представьте, что каждый блок — это керамическая плиточка в вашей ванной. Когда все платочки расположены в определенном порядке, получается красиво.

Как это сделать в жизни. Дизайнеры используют сетки. Самая распространенная и универсальная сетка для слайдов — 6х6. Она есть на приложенной картинке. Соответственно, вы выстраиваете объекты в соответствии с ячейками сетки. Потом убираете сетку и получается истинная гармония.

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

Не забывайте о том, что сетка — не панацея и строгое правило, а помощь ищущему. На некоторых примерах видно, что объекты не строго прибиты к краям (особенно справа). Но общий подход сохраняется.

Если вы думаете, что использование сетки отнимает кучу времени — вы заблуждаетесь. Достаточно создать несколько базовых вариантов композиции слайда и использовать их в дальнейшем, не вспоминая о направляющих.

Задавайте новые вопросы.

Продолжаю отвечать на вопросы, которые вы задаете здесь: http://clc.to/1Dr0TQ

Какие программы для создания презентаций (кроме powerpoint и googleslides) вы бы посоветовали?

В одном посте я попытаюсь перечислить все инструменты, которые я использую (или которые рекомендую использовать) и перечислю их плюсы и минусы.

1. Keynote
Это программа, в которой я делаю большую часть презентаций. Это такой PowerPoint, только созданный Apple. По функционалу Keynote не сильно превосходит свой популярный аналог, но он обладает таким продуманным и удобным интерфейсом. Благодаря этому делать слайды получается с большим комфортом и скоростью.

+ Очень комфортно создавать слайды.
+ Отличные возможности центрирования объектов.
- Работает только на OSX и при конвертации в PPTx иногда возникают проблемы

2. Canva.comCanva.com ( http://clc.to/KpytkQ )
Отличный сервис для всех непрофессионалов, которые хотят создать что-то красивое. Работает онлайн, есть приложение для смартфонов и планшетов. Один из создателей сервиса — Гай Кавасаки — профессиональный евангелист и инвестор, автор принципа создания презентаций 10-20-30.
+ Интересные и нестандартные шаблоны
+ Мультиплатформенность
- Мало кириллических шрифтов
- Шаблоны очень общие, отсутствуют сложные композиции, графики и схемы
- Ограниченные возможности экспорта

3. beautiful.aibeautiful.ai ( http://clc.to/6WHuSg )
Новый сервис с оригинальным подходом: огромное количество шаблонов с минимальными возможностями кастомизации. Но именно это позволяет не испортить отличные шаблоны. Удивительно, но это работает!
+ Большой набор шаблонов
+ Есть действительно классные и сложные темплейты, которые можно использовать в отчетах, стратегиях и т.д.
+ Платная версия отсутствует, все доступно бесплатно (то есть даром)

Какими программами я НЕ РЕКОММЕНДУЮ пользоваться:

1. Prezi
“Убийца PowerPoint” и новый формат сторителлинга себя не оправдал. Если взять что-то плохое и сделать все наоборот, то не факт, что получится хорошо. Может получиться тоже плохо, но по-другому.
- Хваленый “инновационный" формат перехода между слайдами на самом деле многих укачивает
- Сложно показать свою работу где-то еще, кроме своего компьютера и монитора
- Очень часто при запуске презентации что-то идет не так
- Нет никакой возможности вставить нормально картинки, графики, фреймворки и таблицы

2. Google Slides
Инновационный сервис от Гугла с большим потенциалом и нулевым выхлопом. Гуглу очень хорошо удаются технологичные решения, но все, что касается дизайна хоть в каком-то отношении — это не его.
- Ужасный интерфейс, в котором сложно найти нужную функцию. Но даже после успешного завершения поиска сложно ей воспользоваться
- Многие стандартные операции (особенно копирование и перетаскивание объектов из других программ) требуют гораздо большего количества усилий
- Большие проблемы с шрифтами, а с кириллическими шрифтами особенно

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

Снова отвечаю на вопросы читателей группы, которые вы задаете с помощью специальной ссылки ( http://clc.to/1Dr0TQ ).

Читатель, пожелавший остаться анонимным, пишет:
Я хочу ссылки на красивые, классные презентации.

Окей. Вот ссылка на классную презентацию Снежанны Черногорцевой из Мегафона, которую она рассказывала на Social Media Conference. Посмотреть ее можно по ссылке: http://clc.to/2LT0Sg

На что стоит обратить внимание:

Слайд 3 и 5: Как подается большое количество показателей на одном слайде. Весь секрет в выравнивании, контрасте и использовании condensed шрифта (ширина символа меньше, чем у стандартных шрифтов).

Слайд 6 и 7: Как отображены данные. Особенно прекрасен двухцветный пайчарт, который совпадает с цветом фона, но выделяется с помощью тени. Очень минималистично, контрастно и замечательно выглядит.

Слайд 12: Простая схема, которая отлично выглядит, несмотря на примитивные иконки. А все дело в том, что иконки размещены в круге.

Задавайте новые вопросы.