Создание анимационных прототипов в Keynote

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

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

 

Правильный инструмент для работы

Как правило, для создания элементарной движущейся картинки дизайнеру приходится с нуля изучать сложные инструменты для анимации. В последние годы, такие программы соперничают за внимание пользователей. К ним можно отнести Framer, Origami, Pixate и не стоит забывать про классический Adobe After Effects.

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

В поисках инструмента, который бы соответствовал моим требованиям, я наткнулся на программу,давно пылящуюся у меня на компьютере — Apple Keynote.

 

Keynote?

Большинство пользователей знают Apple Keynote, как аналог PowerPoint для операционной системы Mac OS X — программы для создания презентаций. Это правда, но мало кто знает, что с помощью Keynote можно создавать качественную анимацию. Кстати, многие сотрудники компаний Google и Apple в ежедневной работе используют Keynote для создания интерфейсов, анимаций и различных прототипов.

В прошлом году Эндрю Хаскин, проектировщик взаимодействий в компании Frog, показал всем насколько мощным может быть Keynote, полностью воссоздав в нем материальный дизайн от Google.

 

Изучение Keynote

Keynote очень легок в освоении, потому что многие люди часто используют то или иное приложение для создания презентаций. Если вы работали в PowerPoint, то Keynote покажется вам знакомым и вы немедленно сможете приступить к созданию слайдов. В Keynote нет кода, сложной временной шкалы с ключевыми кадрами и ненужных для дизайнера функций. Львиная доля всей работы с анимацией выполняется с помощью эффекта перехода Magic Move. Для его применения вам всего лишь нужны первый и последний слайды, а все, что находится между ними, настраивается с помощью дополнительных опций (масштаб, положение, поворот и т.д.). О всех просветах Keynote позаботится сам, создав бесшовные переходы от одного слайда к другому.

Magic Move сохранит вам тонну времени, а создание сложных анимаций в Keynote занимает считанные секунды.


Рабочий процесс

Чтобы продемонстрировать вам, как можно использовать Keynote, я создал простой прототип модели взаимодействия, популяризированной благодаря Tinder: анимацию свайпа влево и вправо. Загрузить исходники проекта (ссылка).

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


Настройка документа

Создаем пустую презентацию. По умолчанию, Keynote создает слайд размером 1024х768 пикселей. Давайте изменим размер под iPhone.

Переходим на вкладку Document в верхней правой части программы. В разделе Slide Size переходим в Custom Slide Size и вводим размер 350 (ширина) х 667 (высота) пикселей.

The “Custom Slide Size” in the “Document” menu

 

Теперь импортируем изображения. Просто перетаскиваем файлы из папки в окно программы Keynote.


Первый слайд

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

В соответствии с тем, в каком порядке был импортирован каждый элемент, к привязывается определенный z-индекс. В программе нет панели слоев. В случае, если вам нужно изменить порядок стеков, вам нужно всего лишь выделить элемент, кликнуть по нему правой кнопкой мыши (Cmd + клик), чтобы открыть меню, и выбрать Bring to Front.

Menu when selecting an asset

Если вам необходимо разместить элементы точно пиксель к пикселю, переходим Format — Align и вводим нужное цифровое значение.

Arrange menu

 

Последний слайд

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

Для начала вы должны дублировать первый слайд, с которым мы работаем. На правой панели кликаем по изображению и выбираем Duplicate.

Right-click or use Control + click to bring up the menu to duplicate.

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

Размещаем изображение за пределами экрана.

Move the asset to its final position

 

Magic Move

Закончив настраивать первый и последний кадры анимации, начнем анимировать их.

Выделяем первый слайд и переходим на вкладку Animate в левой части экрана. В разделе Transitions находим Add an Effect и в выпадающем списке выбираем Magic Move.

The Magic Move transition effect in the “Animate” menu

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


Время и ускорение 

Magic Move имеет только две настройки — продолжительность и ускорение, которые действительно помогают сделать анимацию качественной насколько это возможно.

Настройка продолжительности говорит сама за себя — она отвечает за время, а подходящее значение меняется от случая к случаю. Золотая середина для анимации интерфейса, как правило, между 0.7 и 1.5 секундами.

Настройка ускорения имеет четыре параметра:

“none”: Стабильная скорость на протяжении всей анимации

“ease out”: Начало медленное, к концу ускоряется

“ease out”: Начало быстрое, к концу замедляется

“ease out and ease in”: Начинается медленно, затем ускоряется и далее снова замедляется

В данном примере я использую 0.90 секунд для продолжительности и “ease out and ease in” для ускорения.

Magic Move settings

 

Наша анимация

Ниже находится готовая анимация с несколькими дополнительными эффектами. По ссылке вы можете скачать Keynote-файл (ссылка).

 

Другие возможности

Конечно, это очень простой пример. Я всего лишь показал каплю из того, что можно сделать с помощью Keynote. Magic Move — это самая простая техника. Для более детальной проработки вы можете использовать Сборку (Build In) и Разборку (Build Out).

 

Сборка и разборка

Сборка отвечает за то, как объект выглядит в первый раз, а Разборка отвечает за этап, когда анимация исчезает с экрана. Эти два типа анимации работают на основе объекта, в отличии от Magic Move, который работает на основе слайдов. Другими словами, каждый элемент может иметь свою собственную анимацию.

Например, если вы хотите анимировать масштабирование и легкий отскок, то воспользуйтесь встроенным эффектом “Pop”. Если вы хотите, чтобы объект плавно исчезал, то воспользуйтесь встроенным эффектом “Dissolve”.

Чтобы применить эффекты сборки или разборки, выделите на экране любой объект и перейдите на вкладку Animate. Там должны появиться три раздела: Build In, Actions и Build Out.

Accessing the build-in section.

Анимация сборки имеет несколько опций. Большую часть времени я использую один и тот же набор эффектов:

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


Build order menu

 

Интеграция Sketch и Photoshop

Keynote хорошо интегрируется во множество дизайнерских сред работы. Импортировать из Photoshop, Sketch или Illustrator так же легко, как и копировать/вставить что-то в Keynote. Я часто создаю объекты в Sketch, а затем добавляю их в Keynote, чтобы быстро анимировать.

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

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

 

Прототипы на устройстве

Также вы можете создать прототип и добавить его в свое устройство, используя приложение Keynote для iOS. Ниже я разместил ролик с примером дизайна приложения, анимированного в Kenyote.

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

Exporting to HTML from Keynote

Заключение

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

Суммируем полученные знания. Magic Move — самый простой и быстрый  способ анимации в Keynote; он используется между начальным и конечным слайдами. Build In, Actions и Build Out используются для отдельных объектов слайда; они отвечают за то, как объект появляется впервые и как исчезает за пределами экрана.

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

Keynote поставляется бесплатно вместе с Mac OS X Yosemite и выше. Попробуйте его и удачного анимирования!

 

Оригинал: http://www.smashingmagazine.com/2015/08/animating-in-keynote/

Дизайн сайта в фотошопе

Если вы хотите освоить Adobe Photoshop, то я рекомендую вам не тратить время на самостоятельно изучение, а найти хорошие курсы Фотошопа.

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

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

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.1 Быстрый старт в Фотошоп

Поехали!

Дизайн сайта в фотошопе: с нуля за 60 минут!

Для начала, это настройка рабочей области. Прежде всего, стоит зайти во вкладку “Window” в верхней панели и отключить все лишнее и включить все нужное. Во-первых — это “Character” — символы, цвета, слои, “Options”  — опции и “Tools”- инструменты. Просто поставьте эти галочки, дальше мы чуть подробнее про каждый инструмент поговорим. Просто бывает частая ошибка — очень много всего включено, на рабочей области бардак и совет такой — отключите все лишнее, включите вот только это, действительно необходимые инструменты (рис.2).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.2 Настройка рабочей области

В фотошопе при создании дизайна сайта мы создаем макет (рис.3), где горячая клавиша ⌘N (Command N), вот таким образом я буду обозначать горячую клавишу в презентации — ⌘N на Mac-е, если вы пользуетесь Windows — то это CTRL+N (Control N). То есть вот этот вот “цветочек”- это CTRL на Windows. Стоит установить единицу измерения пиксели, разрешение — 72 пикселя на дюйм, режим цвета (цветовая палитра) — RGB 8 bit.

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.3 Настройка макета

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

Как создать дизайн сайта в фотошопе: фигуры и трансформация

Фигуры. Горячая клавиша “U”. Фигуры — это прямоугольник, прямоугольник с округленными углами, эллипс, многоугольник, прямая и фигура произвольной формы (рис.4).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.4 Фигуры

Этот инструмент часто применяется в photoshop при создании дизайна сайта,  и находится  он на панели инструментов, да, вот он выделен, горячая клавиша “U”. С формами, с фигурами можно производить трансформации, мы сейчас это рассмотрим на примере фигур, то же самое можно делать и с картинками. Горячая клавиша ⌘Т — свободная трансформация (рис.5), т.е. мы двигаем объект, он у нас свободно изменяет свои размеры. Если мы нажимаем тоже ⌘Т и  берем за краешек и двигаем с SHIFT-ом (вот такой вот стрелочкой я буду обозначать нажатую клавишу SHIFT), мы видим, что размер, точнее пропорция объекта сохраняется.

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.5 Трансформация

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

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.6 Прямоугольник с округленными углами (неправильно)

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.7 Прямоугольник с округленными углами (правильно)

При дизайне сайта в фотошопе прямоугольник с округленными углами правильно трансформировать по точкам. Это горячая клавиша “А”. Мы выделяем точки и дальше уже начинаем их двигать стрелочками SHIFT-ом. В общем, стоит запомнить, что прямоугольник с округленными углами нельзя просто так взять и трансформировать, его нужно трансформировать по точкам.

Выделение, перемещение. Вообще, для выделения объекта — горячая клавиша “V” для выделения и перемещения она называется move to и есть клавиша “А” для точечного перемещения (рис.8). В предыдущем примере мы видели, когда я выделял точки в прямоугольнике с округленными углами, вот я как раз нажимал эту горячую клавишу “А”, выделял точки и с ним уже дальше работал.

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.8 Выделение, перемещение

Копирование. Вот этот значок “⌥” — это на Mac-е “option” , если вы работаете на Windows, то это клавиша Alt (рис.9).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.9 Копирование

Там нажимаете Alt и начинаете перетаскивать объект. Видим, как курсор изменяется, становится два курсорчика, сейчас будет видно, анимация пройдет…вот, я наживаю Alt, начинаю двигать и мы видим, что курсор меняется, если курсор поменялся, значит объект будет копироваться. Для того, чтобы понять как создать дизайн сайта в фотошопе, нужно понять все эти фигуры.

Прозрачность. Клавишами от 1 до 0 мы можем изменять прозрачность объекта, “opacity” , так называемая. Вот я сейчас просто нажимаю сейчас будет 1 — это 10, 2 — 20, 30 и так далее и так до 100, т.е. 0 — это 100% прозрачности (рис.10).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.10 Прозрачность

Дизайн сайта в photoshop: текст, выравнивание и цвет

Текст. Работа с текстом — горячая клавиша “Т”. Вот так в панели инструментов выглядит сам инструмент работы с текстом — шрифт, размер там и так далее. Вообще есть два варианта работы с текстом в фотошопе при создании дизайна сайта — текстовой блок и текстовая строка. Текстовой блок — это когда мы задаем размер этого блока и текст автоматически в этом блоке переносится, перемещается, заполняет все это пространство. В строку, в бесконечно длинную строку придется вот эти переносы на следующую строку делать вручную, т.е. ставить курсор, нажимать Enter и переносить. В тексте можем просто потянуть и изменить размер и текст сам подстроится под размер блока. Вообще удобнее для параграфов, т.е. для набора использовать текстовой блок. Текстовую строку удобно использовать для (давайте еще раз ее включу) каких-то очень коротких слов — либо одно слово, либо два слова, либо три слова и так далее, т.е. для каких-то коротких вещей. Та же самая горячая клавиша “Т” (рис.11,12).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.11 Текст

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.12 Текст

При создании дизайна сайта в photoshop большую роль имеет выравнивание. Если у вас есть несколько объектов хаотичных, мы можем их выделить и выровнять. Сейчас я еще раз покажу, как это делается. Т.е. я выделяю все объекты, нажимаю “выровнять по верхнему краю” и равномерно распределить, беря за размер, за точку отсчета центр изображения. Т.е. по верхнему краю, посередине, по нижнему, то же самое по вертикали и так далее — это чтобы равномерно распределить объекты по, ну то есть равномерно распределить от первого к последнему (рис.13).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.13 Выравнивание

Дальше группы слоев еще есть (рис.14). “ ⌘G” — сгруппировать, “ ⌘ SHIFT G” — разгруппировать.

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.14 Группа слоев

Давайте посмотрим дальше как сделать дизайн сайта самому. Есть несколько эллипсов, несколько объектов, я их выделяю и группирую, они у меня находятся в папочке все. Можно группы в группы заносить, можно создавать папку из нескольких папок и так далее. Горячая клавиша “⌘ G”.

Цвет. Палитра с цветами, стоит установить цветовые координаты Hue, Saturation, Brightness , т.е. тон, насыщенность и яркость в палитре, в инструменте вот эта маленькая кнопочка, маленькая иконочка, нажмите на нее и установите HSB Sliders (рис.15).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.15 Цвет

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

Как сделать дизайн сайта в фотошопе: картинки, смарт-объекты и маски

Картинки и смарт-объекты. Что важно сказать про это — смарт-объект не теряет в качестве при изменении размера, растровая картинка превращается в пятно (рис.16,17).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.16 Картинки и смарт-объекты

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.17 Картинки и смарт-объекты

О том как сделать дизайн сайта в фотошопе, я расскажу далее. Давайте еще раз. Я просто изменяю размер, смарт-объект, растровая картинка, увеличиваю, видим цветовое пятно. Смарт-объекты не теряют в качестве после уменьшения размера и последующего увеличения, т.е. можно спокойно их трансформировать и ресайдить. Картинки в дизайне сайта автоматически импортируются в Фотошоп как смарт-объекты, т.е. если вы добавляете картинку в Фотошоп, она превращается в смарт-объект. Особенность в том, что смарт-объекты нельзя редактировать. Имею ввиду, кисточкой что-то подтереть, подретушировать смарт-объекты не получится. Нужно либо заходить внутрь смарт-объекта, т.е. двойным кликом, либо просто, самый простой варинт — это кликнуть “растризовать”, кликнуть по изображению правой кнопкой мыши в слоях “Rastrize” и “Convert to smart oject”. Видим, когда “Растр” — это у нас просто изображение, когда “Smart object”, здесь появляется такая маленькая икононочка, надеюсь, вам видно. Нет иконочки, смарт-объект — есть иконочка.

Маски. Alt click между слоями, т.е. мы наживаем Alt и кликаем между слоями(рис.18).Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.18 Маски

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.19 Маски

И просто поймите сейчас, как это работает, на следующем слайде я покажу в чем суть. Т.е. у нас есть два слоя, есть эллипс, есть картинка. Мы наводим курсор, нажимаем Alt, появляется вот такая вот стрелочка и просто кликаем. Вот как это работает.

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

Настройка фотошопа для веб-дизайна: направляющие

Направляющие. Горячая клавиша “⌘R”, чтобы скрыть и показать линейки (рис.20).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.20 Направляющие

При создании сайта в фотошопе используйте линейку — это черные штучки с цифрами, это они и есть. И горячая клавиша “ ⌘;” , чтобы скрыть и показать направляющие. Т.е. давайте на скриншоте на примере, я открываю линейки и просто перетаскиваю из углов направляющие, опять же направляющие нужны, чтобы ваш макет выглядел ровно, чтобы вы могли по этим направляющим ваши текстовые блоки, картинки и фигуры уметь выровнять. И стоит еще здесь проверить, чтобы единица измерения была “пиксели”. Нужно просто нажать правой кнопкой мыши на линейке и установить пиксели(рис.21). У нас везде все в пикселях должно быть.

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.21 Направляющие

Для экспорта мы заходим — “Файл”, “save for web”(сохранить для веб) и сохраняйте ваш макет, если вы делаете сайты, проще всего, самый простой формат, который  не требует настроек дополнительных — это “PNG 24” (рис.22).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Рис.22 Экспорт файла

В чем его прелесть?  Т.е. в чем минус GPEG-а , все знаем, что картинки принято хранить в GPEG-е. GPEG — ломает шрифты, т.е. если у вас макет сайта, где много шрифтов, много текста,   в GPEG-е шрифты будут размываться, шрифты будут, так называемыми артефактами. Если мы сохраняем в PNG 24, то картинка выглядит гораздо чище. Она может занимать чуть больше места, но на первых порах, на первых этапах , чтобы не перегрузить себя какими-то настройками , ставьте PNG 24 и смело сохраняйте ваши макеты в этом формате.

И я напомню про горячие клавиши (рис.23).

Дизайн сайта в Photoshop с нуля за 60 минут самому

Горячие клавиши в photoshop значительно ускорят работу при создании дизайна сайта.

“U” — прямоугольник, эллипс, фигуры.

“Т” — это текст.

“В” — выделение, перемещение объекта.

Клавиша “А” — для точечного выделения, помним про прямоугольник с округленными углами.

Alt с  перемещением, т.е. мы  копируем объект, зажимаем Alt  и начинаем его двигать, он начинает копироваться.

Alt clic между слоями — мы превращаем слои в маску, нижний слой становится маской, верхний слой на него накладывается.

“⌘Т” — трансформация, изменение размера.

“ ⌘G”, “ ⌘ SHIFT G” — группировка, разгруппировка в папки.

“ ⌘R” — скрыть и показать линейки.

“ ⌘;” — скрыть и показать направляющие.

И, думаю, всем известная клавиша “ ⌘Z” — отменить предыдущее действие и если мы зажимаем “Option” или “Alt” на Windows , ALT+Z — мы можем шагать назад по нашей истории изменений, а если мы зажимаем  ⌘SHIFT и нажимаем Z, то мы делаем шаг вперед. Т.е. с ALT-ом мы двигаемся назад, с SHIFT-ом мы можем сделать вперед, потом снова назад, вперед. Нажимаем  ⌘Z, откатываемся на предыдущее изменение.

Итак, мы рассмотрели дизайн сайта в фотошопе пошагово. И давайте на примере реального макета посмотрим вместе, как это работает.

Идеальная типографика и микротипографика


Идеальная типографика и микротипографика в цифрах.

Существует вопрос о : ”Как понимать достаточно ли широка полоса текста в макете и хватит ли этой величины текста чтобы он был читаем? Как вообще обращаться с междустрочным расстоянием, шрифтами, какие размеры брать и т.д.?”. Тут важна типографика и микротипографика.

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

Идеальный текстовой блок – это:

Идеальная типографика

 

 

 

 

Существует соотношение:

Идеальная типографика

 

 

 

Вообще 1.6 и 0.6 — это цифры, которые идут из пропорции золотого сечения. Это относится не только к шрифтам, но и к различным размерам блоков и т.д.В данном случае мы говорим про шрифты. Как подобрать размер шрифта. Выберите размер для заголовка, допустим он будет 20, поделите на 1.6 (или умножьте на 0.6), получите размер шрифта для основного текста, также и наоборот.

Идеальная типографика

Рис.1. Пример

Идеальный интерлиньяж для основного текста.

Опять же существует несколько цифр, которые можно запомнить и использовать в работе (рис.2).

Идеальная типографика

Рис.2 Идеальный интерлиньяж для основного текста

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

Общий принцип такой: «Цифры – не закон, а рекомендация. В итоге, оптика побеждает математику.»

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

Размеры экранов для адаптивной верстки

Основные размеры экранов для адаптивной верстки

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

Существует огромное количество размеров экранов мобильных телефонов и планшетов (рис.1). У них разные диагонали, разное PPI (плотность пикселей), это все несет ряд проблем дизайнерам и разработчикам.

Дизайн для разных размеров экранов

Рис.1 Размеры экранов и PPI

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

Дизайн для разных размеров экранов

Рис.2 Пропорции экрана

Как определить размеры экранов для адаптивного дизайна?

Строго говоря, вам нужно взять размеры для адаптивного дизайна по следующем списку:

  1. Размеры своего устройства и устройства клиента, чтобы вы могли сразу закачать картинки себе на телефон и сразу протестировать свой дизайн непосредственно в руках.
  2. Размеры флагмана. Нужно сделать адаптивный дизайн под топовый телефон, под самый популярный телефон, который сейчас продается. Если говорить про сегодняшний день, то флагманом среди iPhone будет iPhone 8/8  Plus  и iPhone X. Под эти размеры экрана нужен адаптивный дизайн.
  3. Адаптация под самое большое разрешение, чтобы все хорошо работало
  4. Адаптация под самое маленькое разрешение. Под самое маленькое, адекватно нужное разрешение.

Если мы говорим про iOS, то самое большое разрешение сейчас у iPhone 8 plus — 1920х1080, самое маленькое iPhone 4. И вы обязательно должны это в дизайне учитывать. Обязательно нарисовать четвертый iPhone посмотреть, какой у него размер, и прикинуть, как будет выглядеть дизайн на уменьшенном размере экрана (рис.3).

Дизайн для разных размеров экранов

Рис.3 Размеры экрана iPhone

Если мы говорим про Андроид, в том числе про Samsung, то сейчас в топе серия Galaxy, у Ace размер экрана 480х320 и тоже будет интересно посмотреть, как будет смотреться дизайн в маленьком разрешении.

Дизайн для разных размеров экранов

Рис.4  Размеры экрана  Samsung

Тестировать картинки удобно через Дропбокс (рис.5)

  1. Рисуем макет под разрешение вашего телефона
  2. Храним картинки на компьютере в папке Дропбокса
  3. Открываем эти картинки на телефоне через мобильное приложение Дропбокс.

image-0026

Рис.5 Дропбокс

То есть у нас есть рабочая панель, папка с проектами (картинками) и она очень просто переносится вам в телефон по облаку (рис.6). Дальше мы кликаем в картинку и если она нарисована для нашего разрешения, то мы можем видеть в реальном времени как это все выглядит. Есть разумеется хитрые программы, которые позволяют это делать. На мой взгляд это самый простой и быстрый способ посмотреть как ваш дизайн выглядит на мобильных устройствах. Их можно перекинуть, можно очень быстро с ними работать. Вы только сохранили файл и он уже доступен в вашем айфоне. И это бесплатно. Разумеется это может быть не только Дропбокс, но и любой другой облачный сервис ( mail,yandex и т.д.).

Дизайн для разных размеров экранов

Рис.6 Работа с Дропбокс ( dropbox.com)

И какое здесь правило, принцип?

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

Сценарии для сайтов и приложений


Как написать пользовательский сценарий?

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

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

Из чего состоит сценарий:

  1. Цель, которую мы преследуем.
  2. Основной сценарий.
  3. Альтернативные сценарии, дополнительные.
  4. Конечный результат.

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

Во-первых, на примере приложения для РЖД(рис.1)

Цель этого приложения — попасть на поезд без бумажного билета.

 

Сценарии для сайтов и приложений

Рис.1 Приложение РЖД

Сценарии для сайтов и приложений

 

Рис.2. Шаг первый

Все начинается с того, что человек просто покупает билет на сайте РЖД (рис.2).

 

Сценарии для сайтов и приложений

Рис.3 Шаг второй

Следующим шагом пользователь должен увидеть эту поездку в приложении (рис.3). Он видит активные элементы, с датами, городом и временем.

 

Сценарии для сайтов и приложений

Рис.4. Шаг третий

Дальше на  человек на вокзале должен найти свой поезд, путь и вагон (рис.4). Видно поезд, время, путь (определяется непосредственно на вокзале), вагон, место. То есть человеку не нужно распечатывать и доставать бумажные билеты и вся информация, которая ему нужна в данной ситуации видна на экране.

Сценарии для сайтов и приложений

 

 

Рис. 5 Альтернативный сценарий

Во-вторых, может быть альтернативный сценарий (рис.5). Человек может захотеть вызвать такси до вокзала и здесь есть ссылка на такси. И может получить push-уведомление, чтобы не пропустить поезд за какое-то время.

Сценарии для сайтов и приложений

 

Рис.6 Шаг четвертый

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

Сценарии для сайтов и приложений

 

Рис.7  Шаг пятый

Дальше мы уже в поезде. Человек может найти свое место в поезде.На последнем экране, что важно (рис.7).

 

Сценарии для сайтов и приложений

Рис.8 Шаг шестой

Есть альтернативный сценарий (рис.8). То есть мы заботимся о человеке больше и думаем не только о том, как ему добраться до дома, т.к. это его конечная цель, в свою квартиру, отель и т.д. И мы даем альтернативный сценарий: сообщить по смс друзьям,родственникам, что все ок и где, во сколько будет встреча. Можно вызвать такси с вокзала. И подключить вайфай. То есть заботимся о человеке чуть больше, делая следующий шаг. И даем ему с комфортном добраться домой (рис.9).

Сценарии для сайтов и приложений

 

Рис. 9 Шаг седьмой

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

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

Сценарий –стратегия. Описывайте ключевые точки процесса глобально, от начала до конца.

Инсайт: что это?

Инсайт – это наблюдение за поведением человека.
Возможно, это наблюдение за поведением, возможно наблюдение за какими-то мыслями.

Понятие инсайт. Как найти инсайт?

Рис.1 Инсайт

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

Инсайт: что это и как его найти?

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

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

Различают следующие из них:
● Детальное изучение пользователя, его интересы и потребности, при этом следует уделить внимание чувствам и ощущениям;
● Глубокое погружение в проблему и анализ полученных сведений. Это поможет обозначить возможные пути решения проблемы;
● Обдумывание намеченных вариантов, это помогает отбросить несостоятельные идеи;
● На завершающем этапе проводится тестирование.

Что такое Инсайт и как его использовать?

— Инсайт у кошатников такой: «я купил кошке штуку для царапанья, а она все равно дерет ковер». Это определенный инсайт. Но инсайт не может быть про всех. Он может быть на какую-то категорию: для парней, для кошатников, для пилотов. Это какое-то наблюдение.
В твоем случае, не знаю найдем мы ли какой-то инсайт сходу про музыку. Допустим, я перед тем, как куда-то пойти, жду пока моя песня загрузится в телефон и тогда я выхожу, чтобы идти по улице и слушать трэк. То есть, жду пока они загрузятся с домашнего вай-фая, чтобы пока иду до метро, успеть их прослушать. Вот это мое наблюдение, и оно есть инсайт.
— И как его использовать?
— А дальше креативщики на этом инсайте используют какой-то креатив. То есть, если я увижу в принте, что «чувак, тебе больше не надо ждать пока твои песни загрузятся от вай фая и вот тебе 4g и симкарта, держи.». К примеру, я сегодня опоздал на работу, потому что песни скачивал.
— А мы потом на last.fm решаем эту проблему?
— Типа того. Вот это наблюдение – это инсайт.
— А дальше ты уже в принте или как-то креативным слоганом эту ситуацию обыгрываешь.
— И если действительно я так делаю, опаздываю на работу, потому что песни скачивал, то это только для меня. Остальные не поймут вообще.
— И тогда можно наделать разных инсайтов? Те, кто опаздывал, кто еще что-то?
— Да, да.
— И потом разом это запускается?
— Последовательно. Потому что если раньше было, то сейчас все делятся по маленьким сегментам, кусочкам по нишам. Вот почему инсайт, это какая-то небольшая категория людей, но которую ты очень хорошо понимаешь. И ту уже не можешь взять рупор и сказать кому эти хот доги, тебе нужно подойти и каждому сказать, что они для программистов. В рупор все, потому что орут. А задача инсайта подойти и лично каждому сказать, что ему нужно.

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

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

Онлайн-курсы по дизайн-мышлению

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

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

Frontend и backend: что это такое?

Все слышали в программировании про эти понятия. Простыми словами я расскажу о Frontend и Backend:  что это такое? Давайте быстро пробежимся.

Frontend и backend, чем они отличаются?

Есть допустим стартовая страница Яндекса (рис.1). Мы видим на ней дизайн, видим страницу.

Что такое backend и frontand

Рис.1 Страница Яндекса ( дизайн)

Если нажать код этой страницы, мы увидим код этой страницы в браузере (рис.2).

Что такое backend и frontand

Рис.2 Frontend

Это и есть frontend – это код, который скачивается в браузере, и который я вижу.В этом коде описаны все элементы, цвет стрелочки, цвет текста, верстка, что здесь такой отступ. То есть все взаимодействия внутри браузера – это frontend.

Backend – это огромные сервера, которые располагаются в самом Яндексе (рис.3).

Что такое backend и frontand

Рис.3 Backend

Frontend или Backend, что выбрать?

Для ответа на этот вопрос важно понять, чем отличается frontend от backend. Давайте на примере разберем.

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

 Поэтому frontend —  это:

  • html
  • css
  •  java script
  • frameworks
  • Jquery, Angular, Backbone, Closure, Extj

Backend – это уже для конкретных программистов, backend дизайнеру знать необязательно. Вот чем frontend отличается от backend.

Backend:

1. Php
2. Rails
3. Ruby
4. Python
5. C#
6. Java
7. .NET
8. SQL
9. Node.js
10. Django
11. Xamarin
12. Swift

Frontend и Backend в работе веб-дизайнера

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

Инсайт в рекламе


Инсайт – «озарение», невысказанная в явном виде мысль про товар или его свойства, с которой можно легко согласиться, но о которой раньше потребитель не думал в явном виде. Как применяется инсайт в рекламе?

3 признака того, что перед вами рекламный инсайт

  1. «Да, это про меня!» — всегда скажет человек на правильный инсайт. Инсайт в рекламе должен быть близок человеку. Он является его неотъемлемой частью жизни. То есть в инсайте человек узнает себя.
  2. Правда. Правильный рекламный инсайт передает настоящие и иногда скрытые переживания человека, истинные мотивы покупки товара.
  3. Открытие. Инсайт в рекламе раскрывает что -то новое из жизни человека, позволяет взглянуть на вещи под новым углом, стимулирует переоценку существующих знаний и опыта.

Один из примеров хороших рекламных инсайтов рассмотрим ниже.

Инсайт в рекламе P&G

P&G: Почему вы покупаете стиральный порошок?

Мама: Потому что я хочу, чтобы одежда была чистая.

P&G:Почему вы хотите, чтобы одежда была чистая.

Мама: Потому что я хочу, чтобы мой ребенок опрятно выглядел в школе

P&G: Почему вы хотите ,чтобы ваш ребенок опрятно выглядел в школе?

Мама: Потому что я хочу ,чтобы о нем хорошо думали.

P&G:Почему вы хотите, чтобы о нем хорошо думали?

Мама: Потому что если о моем ребенке хорошо думают, значит я хорошая мама!

Что такое рекламный инсайт?

Рис.1 Инсайт в рекламе от P&G

В этом ролике (рис.1), суть в том , что P&G не продает просто порошок, а продает мамам гордость их детей, ощущение “хорошей мамы”. Именно на этом построены их рекламы.

Инсайт в рекламе отвечает на вопросы:

  1. Как думает человек?
  2. Что думает человек?
  3. Почему он себя ведет именно так?
  4. Что он по-настоящему чувствует?

Еще один пример инсайта в рекламе Axe.

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

Что такое рекламный инсайт?

Рис.2 Инсайт Axe

Что такое рекламный инсайт?

Рис.3 Ролик Axe

Что такое рекламный инсайт?

Рис.4 Ролик Axe

Axe продает мужчинам не только дезодорант, а привлекательность для женщин. (рис.2,3,4).

Где искать рекламный инсайт

  1. Заблуждения
  2. Противоречия
  3. Неудовлетворенные потребности
  4. Тайные удовольствия
  5. Использование не по назначению
  6. Раздражение

5 способов найти инсайт для рекламы

1. Хорошие рекламные инсайты описывают цели и аудиторию, а не товар или услугу

Многие не хотят ввязываться в ремонт, даже когда он необходим и даже запланирован. То есть строительная компания не говорит нам про материалы, не продает нам валики, ролики и прочее. Они показывают жизненную ситуацию, в которой человек сам себя найдет. В ремонте главное — начать, немножко похоже на пословицу и опять же на ситуацию, в которой можно чуть-чуть улыбнуться и узнать себя рис.5,6).

Что такое рекламный инсайт?

Рис.5 Инсайт в рекламе от компании Большая Медведица

Что такое рекламный инсайт?

Рис. 6 Инсайт в рекламе от компании Большая Медведица

2. Хорошие инсайты в рекламе основаны на преимуществах категории, а не бренда.

Люди покупают стальные входные двери ради спокойствия. Это инсайт, который использовался компанией дверей в своей рекламе. (рис.7). И дальше (рис.8) Мы продаем спокойствие, то есть обыгрывается преимущество их категории, их дверей .

Что такое рекламный инсайт?

Рис.7 Инсайт в рекламе компании дверей

Что такое рекламный инсайт?

Рис.8 Преимущество компании дверей как рекламный инсайт

3. Хороший инсайт в рекламе объясняет то , как люди хотят себя чувствовать, а не то, как они думают.

У многих россиян существует такое обсуждение – «для своих всегда делают лучше».

Что такое рекламный инсайт?

Рис.9 Ролик «для своих всегда делают лучше»

Есть стереотип, который тоже в этой компании обыгрывается. Есть человеческое убеждение, что для своих всегда лучше и человек в этом себя узнает (рис.9).

4. Хорошие рекламные инсайты фокусируются на постоянных, а не на сиюминутных ценностях.

Carhartt — бренд, который гордится тем, что он не подвержен влиянию моды. 100 лет эта компания делала спецодежду. Рабочие знали этот бренд именно таким (рис.10).

Что такое рекламный инсайт?

Рис. 10 Бренд Carhartt

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

Что такое рекламный инсайт?

Рис.11 Распространение моды на бренд

Оставаясь верным своим ценностям, бренд становится сильнее, не подвергаясь влиянию модных течений (рис.11)

5. Хорошие инсайты в рекламе стимулируют создание новых идей , а не культивируют старые.

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

Что такое рекламный инсайт?

Рис.12 Рекламный инсайт о боязни потерять прав

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

Как найти инсайт для рекламы

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

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

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

Сущности в веб-дизайне и интерфейсах

Что такое сущности в интерфейсе?

Сущность — это атом интерфейса (рис.1).

Сущности в веб-дизайне и интерфейсах

Рис.1 Сущность — атом интерфейса

В этом примере с яндексом, сущность – это кнопка, краеугольная плоскость.

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

Есть сущность, которую мы максимально используем и в нашем интерфейсе адаптируем. На примере логотипов можно увидеть эту сущность (рис.2). Логотип фольксваген менялся со временем, но у него есть определенная узнаваемость.

Сущности в веб-дизайне и интерфейсах

Рис.2 Сущность на примере логотипов автомобилей

Даже у apple, все время сохранялся этот логотип яблока (рис.3).

Сущность на примере логотипов автомобилей

Рис.3 Сущность на примере логотипов 

И у RENAULT всегда был ромб, он менялся, исчезли полоски, но сущность ромба всегда сохранялась (рис.4).

Рис.3 Сущность на примере логотипов

Рис.4 Сущность на примере логотипов 

В природе, есть лапка птицы (рис.5). И она по сути везде одинаковая. Единственное, что она изменяется в зависимости от породы птиц. В зависимости от того, где эта птица обитает. Сущность одинаковая, но она адаптирована под разные условия.

Рис.4 Сущность на примере логотипов

Рис.5 Сущность на примере лапок птиц

Про рыб, ровно тоже самое (рис.6). Набор плавников, дальше есть разная форма, разное количество плавников. Но сущность рыбы, она есть, она ясна и понятна.

Рис.5 Сущность на примере лапок птиц

Рис.6 Сущность на примере плавников рыб

Поэтому не создавай разных сущностей без необходимости, а по-разному создавай то, что есть.

Ну а если тебе интересен веб дизайн, то посмотри мой бесплатный мастер-класс об этой профессии:

А / Б тестирование

А/Б тестирование – это маркетинговый инструмент для повышения эффективности работы интернет-ресурса.

C помощью АБ тестов повышают конверсию посадочных страниц, подбирают оптимальные заголовки объявлений в рекламных сетях, улучшают качество поиска (рис.1).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.1 Как работает А/Б тест

А/Б тестирование и A/B тесты

А/Б тест – это просто две страницы. Очень похожие, у них есть одно какое-то изменение. У одной серенькая кнопочка, у другой красненькая. На нее заливаются люди, трафик так называемый. И дальше мы уже смотрим результаты. В оригинальной версии – это 1 %. То есть, то количество людей, которые нажали эту кнопочку. На другую нажали 4,5% из 100. То есть этот вариант выиграл.

Сейчас по шагам. Этапы А/Б тестирования:.

  1. Определить цель.
  2. Выдвинуть гипотезы
  3. Создать два варианта страницы.
  4. Настроить эксперимент в сервисе.
  5. Запустить трафик.
  6. Определить победителя.

У нас может быть идея, давайте покрасим иконку в красный цвет, потому что красный яркий цвет, привлечет внимание и будут чаще кликать (рис.2).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.2 Журнал А/Б тестирования

Цель АБ тестирования

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

Есть сервис Google Analytics (рис.3).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.3 Google Analytics Experiments

При А/Б тестировании эксперименты располагаются во вкладке поведение. Нажимаем создать «Эксперимент». Выбираем цель, то есть ту метрику, о которой мы говорили. Дальше нажимаем «далее» и мне предлагают выбрать две страницы. Здесь у вас должны быть сверстаны заранее страницы, на которые вы будете направлять людей. Он находит эти две страницы, у меня они две одинаковые.

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

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

Дальше проходит какое-то время, вы запускаете трафик, людей, и видите результаты (рис.4).

 

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.4 Анализ результатов

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

Сервисы для А/Б тестирования (рис.5).

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.5 Сервисы для А/Б тестирования

Google Analytics – он бесплатный, есть Optimizely  — это западный сервис, VWO, Unbounce (рис.6)

А/Б тестирование. Что веб-дизайнер должен знать про A/B тесты.

Рис.6 Сервисы для А/Б тестирования

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

Некоторые дизайн-задачи невозможно решить интеллектуально —  нужны эксперименты. И это нормально. Предлагайте это заказчикам и клиентам.

Ну а если тема веб дизайна вам интересна, но вы пока еще новичок, то рекомендую посмотреть мой бесплатный мастер-класс о профессии веб дизайнера.