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

Отказываемся от провода в пользу складного штекера и размышляем над поддерживаемыми формфакторами.




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

Первый макет главной

Демонстрация дропменю

Концепция внутренней страницы

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

Пробуем «белоснежный» вариант.

Останавливаемся на первом варианте, добавляя матрешку для яркости интерактива и делая инверсию цветов.

Создаем всевозможные иконочки, пиктограммочки и кнопочки.

Готовим наполнение и запускаем.

Если говорить о телефонных аппаратах, то в США и Европе (к слову, мода постепенно переходит и к нам) тщеславный брендинг дошел до шизофренических значений.
Как известно, там телефоны между собой делят сотовые операторы. Таким образом, каждый аппарат обречен на два ужасных логотипа на лицевой стороне. По мимо дизайна телефонов от этого страдают пользователи, т.к. ни один здравомыслящий человек не заинтересован в том, что бы платить деньги за то, что бы потом рекламировать своего сотового оператора и фирму-производителя.
В этом прекрасно отдает себе отчет Стив Джобс, поэтому в контракте операторов с «Эппл» присутствует пункт, не допускающий такой ерунды.
Для наглядности сравним «Айфон» и смартфон «Моторолла Дройд Икс», изуродованный тщеславным брендингом.

На случай, если это недостаточно очевидный пример, посмотрим насколько солидней и красивее смотрятся 2 варианта смартфона «Самсунг Гэлакси Эс» для операторов «Ти-мобайл» и AT&T без безвкусного нагромождения логотипов.

Расстановка логотипов на самых видных местах — самый банальный и дешевый способ придания продукту индивидуальности и увеличения узнаваемости бренда. Но далеко не самый эффективный.
Концептуальный продукт всегда будет легко узнаваем без подобных «подсказок».

Не бренд привлекает внимание к продукту, а продукт к бренду.

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




Перед вами всем известная внутренняя страница портала «Мэйл.ру». Возьмем за пример два логических блока.
Блок 1 (меню) содержит логическую ошибку — в конце этого блока стоит рекламный баннер, замаскированный под меню, но выделенный цветом для привлечения внимания. Хуже было бы только если его не выделяли цветом, т.к. у пользователя не оставалось бы шансов с ходу понять, что эта вкладка к меню не имеет никакого отношения.
Блок 2 (новостная лента) — корректный. Ссылки на новости одного цвета, ссылки на рекламу/сервисы — другого; все просто и понятно. Таким образом навигация внутри этого блока очевидна и удобна пользователю, он в ней не запутается, не смотря на то, что этот принцип навигации не распространяется на остальной сайт.

Взглянем на пару логических блоков новостного портала «Актуальные комментарии».
Блок 1 (меню) — максимально прост, удобен и корректен.
Блок 2 (темы) — неудобен, т.к. ссылки внутри него хаотичным образом разделяются на два типа, отличия между которыми, без углубленного знакомства с сайтом, понять не представляется возможным.

Перед вами сайт консалтинговой компании «Кор групп».
Блок 1 (меню) — прост и понятен, не смотря на то, что общим цветом для ссылок на сайте является красный.
Блок 2 (колонка новостей) отличается от прочих частей сайта тем, что ссылки в ней не подчеркнуты. Даже если пользователю не вполне очевидно зачем это нужно, это не делает такое решение неверным для этого логического блока, так как внутри него все абсолютно согласовано. Вряд ли кто-то не догадается, что текст, выделенный красным цветом в этом блоке — это гипертекст.

Вы смотрите на главную страницу русской версии мебельного магазина «Икея».
Блок 1, который трудно хоть как-то охарактеризовать, представляет из себя невнятную кашу разных ссылок, которые серьезно отличаются друг от друга как внешне, так и тематически. Чем это обосновано и почему они вообще поставлены рядом — совершенно непонятно. Вероятно, в этот угол сваливают все то, что не знают куда еще сунуть, но при том эти элементы являются важными ссылками и должны быть на видном и досягаемом месте. Кошмарное, катастрофичное решение во всех возможных смыслах.
Блок 2 (меню) обладает хромающей логикой, потому что кому-то взбрело в голову, что пункты «все товары» и «новинки» должны кардинально разниться с остальными пунктами меню. Возможно, хозяевам портала нужно, что бы по этим разделам чаще кликали, а может быть, они проанализировали трафик сайта и решили упростить навигацию, выделив наиболее востребованные пункты меню. Так или иначе, на деле это лишь осложняет навигацию и добавляет путаницы на сайте.
Блок 3 (вероятно, вспомогательные сервисы) корректен с точки зрения навигации, но с точки зрения наполнения это вновь сборная солянка, которую они не могли придумать куда поставить.

Все та же главная страница «Икеи», но промотанная до конца вниз.
Блок 1 представляет из себя набор из активно продвигаемых компанией предложений, объявлений, сервисов и пр. Тут все просто, удобно и понятно.
Блок 2 (похожий на дублированную навигацию, что бы не проматывать обратно вверх) логически верен внутри себя. Однако, ссылки внутри него выполнены неотличимо от обычного текста на сайте, что является критической ошибкой, т.к. пользователь не может знать гипертекст это или нет, пока не наведет на него курсор.



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

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

Что бы понять суть проблемы, взглянем на ее корни, сделав небольшой экскурс в историю.
Когда пишущие машинки, а тем более компьютеры, еще и не мерцали на горизонте, основная часть записей делалась при помощи пера и чернил. Что бы не создавать клякс и писать быстрее, текст набирался без отрыва пера от бумаги, а по окончании написания уже расставлялись точечки, черточки и всяческая пунктуация (т.е. это являлось завершающим этапом работы, что и послужило основой для всем известного выражения). Точки над буквой «i» ставились не для издевки над писарями и не ради красоты, у этого явления была вполне практическая цель — сделать текст более читаемым, что бы визуально буква «i» более явно выделялась среди прочих закорючек (хотя латиница и не так богата крючками, как кириллица).

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

Разумным ходом было бы оставить точку над «i» только в письменном варианте написания.

Было «прощупано» все, от сухого и строгого, до резкого и агрессивного.

Некоторые зарисовки баннеров и других страничек:

Когда, наконец, был найден верный вектор развития образа, начался долгий процесс полировки.

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

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

Последние штрихи. Стол накрыт, присаживайтесь!

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

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


Фокус-группa, близорукость, и то, каким продукт быть не должен.

Но, зачастую, люди концентрируются лишь на нескольких из них, выпуская довольно неполноценный продукт. Например, сосредотачиваются на дизайне этикетки,  думая, что она решит все задачи. Зовут фокус-стадо домохозяек и показывают им несколько разных этикеток, вместо того, что бы поставить их перед полкой супермаркета, набитой всевозможными средствами.
Домохозяйки выбирают этикетку, затем — провал, отдел маркетинга получает пня под сраку, дизайнеры окончательно разочаровываются в и без того ненавистных фокус-группах и гордо кричат «а я же предупреждал!», заказчик рвет волосы на жопе, подсчитывает убытки и гадает «как же так?».
Фокус-группа в неверных условиях даст неверный ответ. Если вы пошлете коров в пустыню жрать кактусы вместо травы, то не удивляйтесь, если не получите молока, а получите мертвое стадо.

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

Хуже таких фокус-групп только суд присяжных. Американцы с чего-то вдруг решили, что совершенно разные люди, которых объединяет лишь отсутствие уголовного прошлого, представляют из себя квинтэссенцию адекватности и рациональности, и что им можно позволить решать чью-то судьбу за 40$ в день. 

Читать часть 1 ←