Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки - Элиот Стокс

1. Название бренда

Название вашей компании или продукта.

2. Обзор

Краткий обзор образа вашего бренда. В чем его уникальность?

3. Образ индивидуальности/личности

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

4. Качества бренда

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

5. Схема образа

Мы можем изобразить образ графически. Ось Х изменяется от враждебной к дружелюбной, а ось У – от покорной до господствующей[94].

6. Речь

Если бы ваш бренд мог говорить, как бы он это делал? Что бы он сказал? Разговаривал бы он компанейским простым языком, или утонченным?

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

7. Примеры текста

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

8. Визуальный словарь

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

9. Методы привлечения

Опишите методы, которыми вы могли бы эмоционально привлечь ваших пользователей, чтобы создать незабываемые впечатления. Пачка карточек с ментальными заметками Стивена Андерсена очень удобное собрание таких методов[95].

Разработка дизайн-персонажа

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

Чтобы начать работать над вашим дизайн-персонажем, сначала скачайте образцы и шаблоны[96]. Если вы работаете в команде, соберитесь все вместе с легкой закуской и маркерной доской, чтобы проработать первоначальные идеи по поводу образа. Будет весело, и никому не повредит холодильник со взрослыми напитками.

Начните дискуссию с вопроса: «Какие семь слов могут описать нас лучше всего?» Будьте честными. Вы можете услышать такие характеристики, от которых не загордитесь. А теперь уточните: «Какие семь слов могут описать того, кем мы надеемся стать после редизайна?» Переделка сайтов по своей сути желательна и полезна, так как основывается на наших стремлениях.

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

В окончательном списке, «нацарапанном» на доске, отразите границы каждой характеристики. Каким бы вы не хотели видеть свой образ? Например, если в списке стоит характеристика «веселый», это может означать много чего. Веселый, как Элмо[97], или веселый от того, что с ветерком едешь за рулем Ferrari California вдоль Блуриджской парковой автострады? Рамки привнесут ясность в досье дизайн-персонажа и помогут вам увидеть во время проекта, когда пересекается граница.

Чтобы лучше понимать, как работают характеристики и рамки, посмотрим, как мы определили их для образа MailChimp:

1. Веселый, но не по-детски.

2. Забавный, но не тупой.

3. Функциональный, но не сложный.

4. Неформальный, но не разгильдяйский.

5. Простой, но не простецкий.

6. Надежный, но не нудный.

7. Неформальный, но не чуждый.

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

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

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

При создании образа для вашего сайта помните одно важное правило.

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

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

Когда мы делали нашего дизайн-персонажа в MailChimp, мы просто документировали коллективный образ людей нашей команды. В действительности, мы обнаружили, что задача не была сложной, потому что наняли людей с одинаковыми взглядами, одинаковым чувством юмора и другими качествами. Хотя наша приоритетная цель была найти людей, которые сработаются, процесс также оказался полезным для определения образа бренда. Представляем вам дизайн-персонаж[98].

Название бренда

MailChimp.

Обзор

Фредди фон Чимпенхаймер IV – лицо MailChimp и воплощение образа бренда. Крепкая фигура Фредди символизирует мощь приложения, а его поза демонстрирует, что он находится в движении. У Фредди всегда милая улыбка, которая привлекает пользователей, и они чувствуют себя уютно на сайте.

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

MailChimp часто подбрасывает пользователям забавные «пасхальные яйца»[99] или ссылки на смешные видеоролики на You-Tube. Веселье и забавы живут в каждом уголке сайта, но никогда не станут мешать вашей работе.

Характеристики бренда

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

Голос

Голос MailChimp знакомый, дружелюбный, а главное – человеческий. Понятно, что за брендом на самом деле стоят образы людей. MailChimp отпускает шуточки (вы сможете рассказать их маме), рассказывает истории и говорит в непринужденной манере, в какой вы могли бы разговаривать со старым приятелем. MailChimp употребляет конструкцию don’t вместо do not, потому что так говорят нормальные люди. MailChimp вставляет неформальные междометия типа «хм-м-м», когда думает, и «Блин! Это ужасно!» – чтобы выразить сочувствие.

Примеры текста

• Сообщение об успехе: «Дай пять! Твой список импортирован».

• Сообщение об ошибке: «Упс! Кажется, ты забыл ввести адрес электронки».

• Критический отказ: «Один из наших серверов временно не работает. Наши инженеры уже работают и скоро все исправят. Спасибо за понимание».

Рисунок 8.6. Досье дизайн-персонажа, созданное для образа сайта MailChimp

Визуальный словарь

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