Перевод кейса 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 + акценты
Обычно мы не занимаемся дизайном пользовательских интерфейсов, но этот проект заставил нас погрузиться с головой в обсуждения вроде «А что делать, если контента слишком много? Как тогда поступить с боковой навигацией?» Это подтолкнуло нас к размышлениям, и в итоге мы придумали очень простую, но эффективную идею складывающейся навигации (бокового меню). Понимаю, мы тут не изобретаем велосипед, но ощущение было, будто нашли недостающий фрагмент пазла — и вдруг всё встало на свои места.
После того как мы представили этот подход команде 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
Подписывайтесь на мой канал в Телеграм, чтобы узнавать о новых заметках и вакансиях.
