Краткая история жёлтой стрелки «Яндекса»

От первого концепта Артемия Лебедева до современного дизайна российского поисковика.

Красная буква «Я», поисковое поле в виде жёлтой стрелки и усы Аркадия Воложа — знаковые образы для «Яндекса». Буква была всегда. Усы Волож сбрил после проведения «Яндексом» IPO, а потом отрастил обратно. У жёлтой стрелки своя история — в преддверии 20-летия компании её рассказывает Константин Горский, который работал над дизайном сервисов «Яндекса» с 2010 по 2016 годы.

23 сентября 1997 года на выставке Softool публике впервые показали поисковую систему «Яндекс». С этой даты берёт отсчёт история компании. Сегодня расскажу о том, как создавалось и менялось поисковое поле «Яндекса» — жёлтая стрелка. Эта стрелка — важнейший визуальный элемент бренда. Её можно встретить не только в интернете, но и в жизни. Даже визитки сотрудников  выполнены  в форме стрелки.

А вот в самой первой версии «Яндекса», которую нарисовал Артемий Лебедев, не было ни жёлтого, ни стрелки.

Сигаретного окурка, на самом деле, тоже не было. Тёма поставил его, чтобы дополнительно подчеркнуть «горячую» новость, но главный редактор «Яндекса» Елена Колмановская настояла на том, что бычок с главной надо убрать.

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

К 1999 году — тогда выкатили уже третью версию — элементов на главной стало так много, что жёлтый пришлось сделать поярче: должно быть сразу видно, что здесь самое важное. Цвет Тёма выбрал простой и яркий — жёлтый из безопасной таблицы цветов (#FFCC00). Он достаточно сочный и хорошо различим на белом фоне. В веб-стандартах этот оттенок называется tangerine yellow — «мандариновый жёлтый».

В следующих версиях жёлтое поисковое поле стало больше и заняло центральное место на странице, но всё ещё оставалось прямоугольником.

И лишь в 2002 году Рома Воронежский по наводке Тёмы изобразил правую сторону прямоугольника в форме стрелки.

Рома нарисовал стрелку попиксельно: два пикселя вниз, один пиксель в сторону.

Получился угол примерно в 120 градусов. Потом он будет многократно воспроизводиться в рекламном дизайне «Яндекса». Кстати, Рома внёс ещё одно огромное улучшение (большинство могли его и не заметить). Надпись на главной кнопке поменялась с «Найти!» на «Найти» — потому что «нервные выкрики приличную компанию не красят».

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

Последующие несколько лет для стрелки прошли без больших изменений.

Ещё один чудесный момент  —  пунктирная ссылка в нижней части жёлтой стрелки. Клик — и пример запроса подставляется в поисковую строку.

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

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

Следующий виток эволюции произошёл в 2013 году. «Яндекс» представил концепцию «Острова», и дизайнеры вновь попытались сделать стрелку симметричной.

На всех пользователей этот вариант дизайна, правда, так и не выкатили, но начало новому этапу было положено. Примерно тогда же стрелка проникла в брендинг сервисов «Яндекса». Названия сервисов словно превратились в готовые поисковые запросы.

Сейчас такой брендинг ушёл в прошлое. Визуально сложная конструкция, с трудом уживающаяся с иконками сервисов, уступила место более простой  —  шрифтовой.

Тем временем стрелка на главной странице продолжала развиваться. Пару версий спустя арт-директор «Яндекса» Даня Ковчий решил превратить окончание стрелки в кнопку. Действовали постепенно: сначала конец стрелки был выпуклый, с градиентом, чтобы люди всё-таки видели, что это кнопка.

И только потом кнопку сделали совсем плоской.

Красота. Можно ли сделать стрелку ещё проще? Скажем, убрать кнопку совсем? Такая стрелка уже есть в «Яндекс.Браузере». Но на главной странице кнопка всё равно нужна. Может быть, пользователь скопировал слово мышкой и вставил его (опять же мышкой) в поисковое поле — надо дать ему возможность найти ответ без помощи клавиатуры.

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

Большинство скриншотов в этом материале — из портфолио «Студии Артемия Лебедева». Там же можно рассмотреть старые версии «Яндекса» вживую — достаточно нажать на любой скриншот.

#Интерфейсы