Перевод кейса perplexity.ai от студии Smith & Diction. Советую конечно читать оригинал.

Бренд, который изменил студию навсегда.

Давно нравится визуал Perplexity и вот наткнулся в твиттере на Mike Smith, который делал их бренд в студии Smith & Diction.

Бренд нравится как раз тем, что он не неброский и достаточно стильный. Было интересно почитать историю, как его делали. Еще и написано до массового хайпа AI, с примерами старого интерфейса Perplexity.

Введение

Когда нам написали Henry и Phi из Perplexity, они сказали: «Мы хотим, чтобы бренд ощущался как скандинавское метро — чисто и продуманно, но как бы незаметно». Они совсем не хотели казаться броскими, модными или молодёжными. Просто как сосуд для фактов.
Так, эээ… обычно это не совсем наш профиль в S&D. Мы чаще придумываем шаловливые логотипы с необычными маскотами и прочими штуками. Но честно говоря, я бы всё отдал за Генри и Фи. У нас был такой звонок, после которого вспоминается реплика из «Сводных братьев»: «Мы что, только что стали лучшими друзьями? Ага». Вот так мы и отправились создавать максимально незаметный бренд.

Символ

Очень похоже на наш опыт работы с Exposure: нам нужно было изменить буквально всё, при этом создать ощущение, что не изменилось ничего.
Мы начали с символа. Хотелось создать нечто обладающее той же простотой, что и предыдущий логотип, но добавить несколько дополнительных уровней глубины. По своей сути Perplexity — это поисковая система. Она стремительно «прорывается» сквозь интернет с невероятной скоростью и суммирует найденное в лаконичном и легко воспринимаемом виде.
Здесь нет череды из 300 «рекламных» объявлений перед тем, как дойти до релевантной информации — привет, Google. И главное, что отличает Perplexity от других, — это обязательное цитирование всех источников. Можно пройти по ссылке и вернуться на ту страницу, откуда взята информация, чтобы самому проверить её достоверность.

Что нас действительно заинтересовало, так это идея иконки, которую можно было бы как-то интегрировать в строку поиска. Амбициозно, понимаю. Поэтому мы начали с концепции звёздочки — ведь уникальность Perplexity состоит в обязательном цитировании источников, так почему бы не заложить это прямо в логотип?
Затем мы добавили знаку немного глубины — и у него появилось нечто вроде ассоциаций с вращающейся дверью или ролодексом. Нам сразу представилось, как эта иконка вращается у нас в голове, поэтому мы обратились к Justin Lawes с просьбой посмотреть, как этот знак может выглядеть непосредственно в поисковой строке. Когда мы впервые увидели анимацию этого символа — решение было принято: это то что нужно.от самый“The One”.

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

Пока мы работали над брендом, мы начали замечать всё больше и больше новых смыслов. Например, у символа есть «страницы», как у раскрытой книги. Книги… помните, раньше мы пользовались ими, чтобы получать информацию до появления интернета? Хотя теперь их просто запрещают, будто бы информация в книгах опаснее, чем в интернете, которого якобы не существует. НУ ЛАДНО.
Нам также понравилось, что если разобрать знак на части, появляются пересекающиеся «окна» — своего рода метафора того, как Perplexity становится вашим окном в интернет. Пусть существует миллион и одна веб-страница, но вы всегда можете довериться Perplexity — здесь всё, наконец, становится понятным.

The Wordmark

Далее мы перешли к фирменному написанию названия. Мы сразу знали, что хотим использовать гротеск, в котором есть хотя бы немного характера. Не хотелось уходить в чисто массимовский минимализм. В конце концов, мы же Smith & Diction — значит, всё должно быть чуть-чуть странным и необычным.
В итоге мы выбрали шрифт FK Display — в нём идеально сбалансирована индивидуальность. Маленькие срезы на концах буквы «X» перекликаются с острыми точками символа. Но есть ещё и совсем мелкие нюансы мягкости на пересечениях в буквах «p», «t» и «y». Эти детали напоминают миниатюрные чернильные ловушки в печатных телефонных справочниках и энциклопедиях прошлого.
Заметит ли кто-нибудь такие мелочи? Скорее всего, нет. Но в целом у логотипа складывается очень приятное ощущение — и, надеемся, люди обратят на это внимание.

Мы также решили использовать строчную «p» — и надо признать, обсуждали этот вопрос куда дольше, чем мне хотелось бы. Но люди обычно не используют заглавные буквы, правила грамматики или вообще английский язык, когда что-то вводят в поисковую строку. Поэтому нам захотелось подчеркнуть это и в фирменном написании. К тому же с прописной «P» всегда проблемы с кернингом: получается неприятный пробел снизу, который портит общий баланс слова.

Типографика

Далее мы занялись выбором шрифта — это было действительно важно, ведь в этом продукте 99% всего контента — это именно текст. Всё-таки речь идёт о поисковом сервисе. Нам нужен был шрифт, который не только легко читается, но и подходит для глобального использования. У Perplexity большая международная аудитория, поэтому было важно, чтобы типографика работала на максимальном количестве языков.
Для бренда мы выбрали FK Grotesk, поскольку он идеально соответствует скандинавской атмосфере метро. У этого семейства много отличных альтернативных вариантов, а главное — оно поддерживает множество языков. Есть также версия FK Grotesk Neue, которая особенно хороша для основного текста: в ней меньше декоративных деталей, зато высокая разборчивость, что важно при чтении больших текстовых блоков — ведь в таком случае украшения уже ни к чему.

Цвет и продукт

С этим пунктом было сложнее всего, потому что цвета должны были быть почти полностью незаметными. Люди не хотят, чтобы их поисковые запросы выглядели перегруженными брендингом. По сути, всё свелось к тёмному и светлому режиму с акцентом для кнопок. НО ВЫ ЖЕ ЗНАЕТЕ, Я НЕ МОГ ОСТАНОВИТЬСЯ НА ЭТОМ. ЦВЕТ — ЭТО МОЁ ВСЁ.
Сначала мы сделали несколько мокапов продукта, чтобы понять, как часто вообще будет использоваться цвет. В итоге оказалось, что почти только для ссылок, лол. Команда упомянула, что хочет уйти от традиционного ощущения «рефлекс-блю», но при этом просто чуть-чуть его апгрейдить. Им действительно важно было не выглядеть как модный DTC-бренд-однодневка. Никаких кислотных и резко контрастных цветов. Этот бренд должен восприниматься всерьёз.

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

Обычно мы не занимаемся дизайном пользовательских интерфейсов, но этот проект заставил нас погрузиться с головой в обсуждения вроде «А что делать, если контента слишком много? Как тогда поступить с боковой навигацией?» Это подтолкнуло нас к размышлениям, и в итоге мы придумали очень простую, но эффективную идею складывающейся навигации (бокового меню). Понимаю, мы тут не изобретаем велосипед, но ощущение было, будто нашли недостающий фрагмент пазла — и вдруг всё встало на свои места.
После того как мы представили этот подход команде Perplexity, они внедрили его на актуальном сайте меньше чем за неделю. Я не шучу — ребята реально работают очень быстро.

Элементы бренда

Создавать фирменные элементы для бренда, который изначально не должен выделяться, было непросто. Но нам всё равно хотелось добавить небольшие «сюрпризы» и приятные детали, с которыми люди могут столкнуться, взаимодействуя с брендом вне самого продукта.
Первое, что мы сделали, — это разработали систему сеток, которую команда могла использовать для маркетинговых материалов и презентаций. Каждый, кто давно работает в этой сфере, знает: именно питч-деки на самом деле управляют всем миром, так что важно выглядеть свежо на презентациях в Keynote или Google Slides. В конце концов, единственное, что было у Fyre Festival и Анны Делви, — это крутые питч-доки.

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

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

Пока мы работали над брендом, мы постоянно пытались найти какой-то «стиль» для иконок и подобных элементов, но всё это казалось искусственным и натянутым. Это как пытаться уместить интернет в рамки — невозможно. В итоге у нас появилась идея сознательно выбрать антистиль. Почему бы не сделать немного всего и сразу? Прямо как интернет.
Мы собрали постер-коллаж, который команда Perplexity могла бы повесить у себя в офисе — чтобы показать: «У нас есть понемногу всего, мы — компания, которая и есть интернет».

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

Мы сделали много забавных дополнительных материалов, которые, возможно, так никогда и не появятся на публике — так что, вероятно, они останутся только здесь. Но в процессе создания иконок для постера у нас получился очень прикольный «микросхемный» человечек, который отсылает к эпохе Apple и Сьюзан Каре. Мы назвали его «AI Guy», и как-то Генри предложил сделать фон, напоминающий все те странные десктопные обои из 90-х с необычно скошенными надписями и прочими деталями. В итоге вот вам «AI Guy» в виде фонового изображения рабочего стола — просто для веселья.

Переведено и адаптировано с помощью Perplexity. Текст от первого лица ребят из студии Smith & Diction.

Symbol & Brand — Summer McClure
Wordmark — Hanna Karraby
Animation — Justin Lawes
Brand — Dayan D’Aniello
Art Direction — Mike Smith

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