Красная буква «Я», поисковое поле в виде жёлтой стрелки и усы Аркадия Воложа — знаковые образы для Яндекса. Буква была всегда. Усы Волож сбрил после выхода Яндекса на IPO, а потом отрастил обратно. У жёлтой стрелки своя история — в преддверии 20-летия компании её рассказывает Константин Горский, который работал над дизайном сервисов Яндекса с 2010 по 2016 год.
Константин Горский,
возглавлял департамент дизайна в Яндексе, сейчас руководит дизайнерами в компании Intercom и ведёт телеграм-канал «Дизайн и продуктивность»
20 лет Яндексу
За два последних десятилетия технологии изменили мир сильнее, чем когда-либо, — и Яндекс принял в этом непосредственное участие.
23 сентября 1997 года на выставке Softool публике впервые показали поисковую систему Яндекс. С этой даты отсчитывается история компании. Сегодня расскажу о том, как создавалось и менялось поисковое поле Яндекса — жёлтая стрелка.
Эта стрелка — важнейший визуальный элемент Яндекса. Её можно встретить не только в интернете, но и в жизни. Даже визитки сотрудников — в форме стрелки.
А вот в самой первой версии Яндекса, которую собственноручно нарисовал Артемий Лебедев, не было ни жёлтого, ни стрелки.
Сигаретного окурка, на самом деле, тоже не было. Тёма поставил его, чтобы дополнительно подчеркнуть «горячую» новость, но главный редактор Яндекса Елена Колмановская настояла на том, что бычок с главной надо убрать.
Во второй версии на главную страницу добавилось много нового, поэтому поисковое поле Тёма выделил бледно-жёлтым — так заметнее. Это первый, едва наметившийся зародыш того, что станет со временем главным элементом дизайна Яндекса.
К 1999 году — тогда выкатили третью версию главной — элементов на «морде» стало так много, что жёлтый пришлось сделать поярче: должно быть сразу видно, что здесь самое важное. Цвет Тёма выбрал простой и яркий — жёлтый из безопасной таблицы цветов (#FFCC00). Он достаточно сочный и хорошо различим на белом. В веб-стандартах этот оттенок называется tangerine yellow — «мандариновый жёлтый».
В следующих версиях жёлтое поисковое поле становится больше и занимает центральное место на странице — но всё ещё остаётся прямоугольником.
И лишь в 2002 году Рома Воронежский по наводке Тёмы рисует правую сторону прямоугольника в форме стрелки:
Рома рисует стрелку попиксельно: два пикселя вниз, один пиксель в сторону:
Получается угол примерно в 120 градусов — потом он будет многократно воспроизводиться в рекламном дизайне Яндекса.
Кстати, Рома внёс ещё одно огромное улучшение (большинство могли его и не заметить). Надпись на главной кнопке поменялась с «Найти!» на «Найти» — потому что «нервные выкрики приличную компанию не красят».
Позже симметрия внутри стрелки нарушилась — поисковое поле и кнопка уехали к верхнему краю. Рома рассказывал, что так и должно быть: стрелка — она как поезд, а в поезде окна располагаются выше центральной линии.
Последующие несколько лет для стрелки прошли без больших изменений.
Ещё один чудесный момент — пунктирная ссылка в нижней части жёлтой стрелки. Клик — и пример запроса подставляется в поисковую строку.
Добавив эту штуку на главную, Рома даже не подозревал, что вскоре ссылки с пунктирным подчёркиванием распространятся по всему рунету. Если бы вы в конце нулевых спросили у русскоязычного дизайнера интерфейсов, что такое «псевдоссылка», он наверняка бы ответил, что это подчёркнутая пунктиром ссылка, которая выполняет какое-то простое действие на текущей странице. Со временем, правда, подчёркивания у ссылок почти повсеместно исчезли, и теперь эта забавная наша странность с пунктиром и псевдоссылками стала историей.
Тем временем стрелка ненадолго оранжевеет, но скоро снова становится жёлтой.
Следующий виток эволюции произошёл в 2013 году. Яндекс представил концепцию «Острова», и дизайнеры вновь попытались сделать стрелку симметричной:
На всех пользователей этот вариант дизайна, правда, так и не выкатили, но начало новому этапу было положено.
Примерно тогда же стрелка проникает в брендинг сервисов Яндекса. Названия сервисов словно превращаются в поисковые запросы:
Сейчас такой брендинг ушёл в прошлое. Визуально сложная конструкция, с трудом уживающаяся с иконками сервисов, уступила место более простой — шрифтовой.
Тем временем стрелка на главной странице продолжала развиваться. Пару версий спустя арт-директор Яндекса Даня Ковчий решил превратить окончание стрелки в кнопку. Действовали постепенно — сначала конец стрелки был выпуклый, с градиентом, чтобы люди всё-таки видели, что это кнопка:
И только потом кнопку сделали совсем плоской:
Красота!
Можно ли сделать стрелку ещё проще? Скажем, убрать кнопку совсем? Такая стрелка уже есть в Яндекс.Браузере. Но на главной странице кнопка всё равно нужна. Может быть, человек скопировал слово мышкой и вставил, опять же мышкой, в поисковое поле — надо дать ему возможность найти ответ без помощи клавиатуры.
Меня всегда поражало, что в такой простой конструкции нет почти ничего случайного. Почему жёлтый? Чтобы было хорошо заметно на фоне всего остального, что есть на странице. Почему стрелка? Потому что смотрит в светлое будущее, в котором, как известно, найдётся всё.
С днём рождения, Яндекс.
P. S. Большинство скриншотов в этом посте — из портфолио Студии Артемия Лебедева. Там же можно рассмотреть старые версии Яндекса вживую — достаточно нажать на любой скриншот.