Краткая история жёлтой стрелки «Яндекса»
От первого концепта Артемия Лебедева до современного дизайна российского поисковика.
Красная буква «Я», поисковое поле в виде жёлтой стрелки и усы Аркадия Воложа — знаковые образы для «Яндекса». Буква была всегда. Усы Волож сбрил после проведения «Яндексом» IPO, а потом отрастил обратно. У жёлтой стрелки своя история — в преддверии 20-летия компании её рассказывает Константин Горский, который работал над дизайном сервисов «Яндекса» с 2010 по 2016 годы.
![Константин Горский, возглавлял департамент дизайна в «Яндексе», сейчас руководит дизайнерами в компании Intercom и ведёт Telegram-канал «<a href="https://api.vc.ru/v2.8/redirect?to=https%3A%2F%2Ft.me%2Fdesprod&postId=26633" rel="nofollow noopener" target="_blank">Дизайн и продуктивность</a>»](https://png.cmtt.space/paper-media/ca/80/ca/7b13122758441c.jpg)
23 сентября 1997 года на выставке Softool публике впервые показали поисковую систему «Яндекс». С этой даты берёт отсчёт история компании. Сегодня расскажу о том, как создавалось и менялось поисковое поле «Яндекса» — жёлтая стрелка. Эта стрелка — важнейший визуальный элемент бренда. Её можно встретить не только в интернете, но и в жизни. Даже визитки сотрудников выполнены в форме стрелки.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/ec/57/37/69d6946206a858.jpg)
А вот в самой первой версии «Яндекса», которую нарисовал Артемий Лебедев, не было ни жёлтого, ни стрелки.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/d7/d6/c5/cca343d6a63995.jpg)
Сигаретного окурка, на самом деле, тоже не было. Тёма поставил его, чтобы дополнительно подчеркнуть «горячую» новость, но главный редактор «Яндекса» Елена Колмановская настояла на том, что бычок с главной надо убрать.
Во второй версии на главную страницу добавилось много нового, поэтому поисковое поле Тёма выделил бледно-жёлтым — так заметнее. Это первый, едва наметившийся зародыш того, что со временем станет главным элементом дизайна компании.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/20/05/04/b1374a61c52794.jpg)
К 1999 году — тогда выкатили уже третью версию — элементов на главной стало так много, что жёлтый пришлось сделать поярче: должно быть сразу видно, что здесь самое важное. Цвет Тёма выбрал простой и яркий — жёлтый из безопасной таблицы цветов (#FFCC00). Он достаточно сочный и хорошо различим на белом фоне. В веб-стандартах этот оттенок называется tangerine yellow — «мандариновый жёлтый».
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/13/93/0e/58f75fc8751391.jpg)
В следующих версиях жёлтое поисковое поле стало больше и заняло центральное место на странице, но всё ещё оставалось прямоугольником.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/b1/38/e1/26a430e4886937.jpg)
И лишь в 2002 году Рома Воронежский по наводке Тёмы изобразил правую сторону прямоугольника в форме стрелки.
![](https://png.cmtt.space/paper-media/36/67/c2/0fb73c261beb1a.jpg)
Рома нарисовал стрелку попиксельно: два пикселя вниз, один пиксель в сторону.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/1f/17/85/1bc46d37b8a87b.png)
Получился угол примерно в 120 градусов. Потом он будет многократно воспроизводиться в рекламном дизайне «Яндекса». Кстати, Рома внёс ещё одно огромное улучшение (большинство могли его и не заметить). Надпись на главной кнопке поменялась с «Найти!» на «Найти» — потому что «нервные выкрики приличную компанию не красят».
Позже симметрия внутри стрелки нарушилась: поисковое поле и кнопка уехали к верхнему краю. Рома рассказывал, что так и должно быть: стрелка — она как поезд, а в поезде окна располагаются выше центральной линии.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/5b/43/72/be1d6ba0fc10a5.jpg)
Последующие несколько лет для стрелки прошли без больших изменений.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/84/25/4a/610e17085cea52.jpg)
Ещё один чудесный момент — пунктирная ссылка в нижней части жёлтой стрелки. Клик — и пример запроса подставляется в поисковую строку.
Добавив эту штуку на главную, Рома даже не подозревал, что вскоре ссылки с пунктирным подчёркиванием распространятся по всему рунету. Если бы вы в конце нулевых у русскоязычного дизайнера интерфейсов спросили, что такое «псевдоссылка», он наверняка бы ответил, что это подчёркнутая пунктиром ссылка, которая выполняет какое-то простое действие на текущей странице.
Со временем, правда, подчёркивания у ссылок почти повсеместно исчезли, и теперь эта наша забавная странность с пунктиром и псевдоссылками стала историей. Тем временем стрелка ненадолго стала оранжевой, но вскоре снова вернулась к жёлтому цвету.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/f5/f7/de/7cf0bbfc3febc0.png)
Следующий виток эволюции произошёл в 2013 году. «Яндекс» представил концепцию «Острова», и дизайнеры вновь попытались сделать стрелку симметричной.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/8a/27/8e/aa5482b10c5c3a.png)
На всех пользователей этот вариант дизайна, правда, так и не выкатили, но начало новому этапу было положено. Примерно тогда же стрелка проникла в брендинг сервисов «Яндекса». Названия сервисов словно превратились в готовые поисковые запросы.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/dd/1c/b6/3e603c817269e2.png)
Сейчас такой брендинг ушёл в прошлое. Визуально сложная конструкция, с трудом уживающаяся с иконками сервисов, уступила место более простой — шрифтовой.
Тем временем стрелка на главной странице продолжала развиваться. Пару версий спустя арт-директор «Яндекса» Даня Ковчий решил превратить окончание стрелки в кнопку. Действовали постепенно: сначала конец стрелки был выпуклый, с градиентом, чтобы люди всё-таки видели, что это кнопка.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/80/df/ae/7bfacd0cde0768.png)
И только потом кнопку сделали совсем плоской.
![Краткая история жёлтой стрелки «Яндекса»](https://png.cmtt.space/paper-media/e2/c5/94/149abd23d05422.png)
Красота. Можно ли сделать стрелку ещё проще? Скажем, убрать кнопку совсем? Такая стрелка уже есть в «Яндекс.Браузере». Но на главной странице кнопка всё равно нужна. Может быть, пользователь скопировал слово мышкой и вставил его (опять же мышкой) в поисковое поле — надо дать ему возможность найти ответ без помощи клавиатуры.
Меня всегда поражало, что в такой простой конструкции нет почти ничего случайного. Почему жёлтый? Чтобы было хорошо заметно на фоне всего остального, что есть на странице. Почему стрелка? Потому что смотрит в светлое будущее, в котором, как известно, найдётся всё.
Большинство скриншотов в этом материале — из портфолио «Студии Артемия Лебедева». Там же можно рассмотреть старые версии «Яндекса» вживую — достаточно нажать на любой скриншот.
Комментарий удалён модератором
зачем
Отдайте Лебедеву ВК. Ну пожалуйста.
Давали же уже
"Найти!" и "Найти" - вау, это "гениально!" ой, простите "гениально"