Эволюция дизайна браузеров

Как они меняются, почему не меняются и что нужно, чтобы они изменились.

Эволюция дизайна браузеров

Немного истории

В конце 20 века, а если быть точнее, в 1991 году, изобретатель Всемирной паутины сэр Тим Бернерс-Ли создал первый в мире веб-сайт и первый в мире гипертекстовый браузер — WorldWideWeb, позже (в 1994 году) получивший новое название — Nexus.

<p>Тим Бернерс-Ли, 1990 год</p>

Тим Бернерс-Ли, 1990 год

У браузера был текстовый интерфейс, который включал в себя ещё и функции редактора. Он вышел только на системе NeXT (детище Стива Джобса, между прочим!), поэтому очень мало людей смогло оценить самый-самый первый сайт на самом-самом первом браузере.

Эволюция дизайна браузеров

Поэтому первым по популярности браузером с графическим интерфейсом принято считать NCSA Mosaic.

Эволюция дизайна браузеров

Исходный код его был открытым, поэтому был позже взят за основу многими другими командами для своих продуктов. Например, для популярного в конце 20 века Internet Explorer.

Internet Explorer: корпоративное чадо

Эволюция дизайна браузеров

Браузер Internet Explorer — настоящая легенда от корпорации Microsoft, во всех смыслах. Первая его версия увидела свет в 1994 году. К концу 20 века IE смог быстро завоевать любовь пользователей и стать широко используемым. Победа была настолько внушительной, что позволила совсем вытеснить наиболее используемый в то время браузер — Netscape Navigator.

Cейчас продукт от Microsoft совсем потерял былую мощь и окончательно сдулся. Про него шутят: Internet Explorer — это лучшая программа для скачивания веб-браузеров. Что недалеко от истины. Неповоротливая корпорация не смогла удержать своё популярное чадо на вершине горы.

Как менялась иконка IE

В самом начале разработки в Microsoft выбрали символ планеты как основной образ для браузера, при этом добавив метафоры подключения, связи и открытых возможностей. Первая иконка состояла из логотипа операционной системы Windows и круга, которые формировали собой сферу. Спустя несколько версий в иконке появляется «космическая орбита», призванная создавать ассоциации со скоростью и исследованием.

Эволюция дизайна браузеров

После того, как в 1995 году вышли версии Explorer 1.0 и 2.0, иконка изменилась на синюю букву «e», известную в народе как «дорога в интернет». Новый дизайн использует образы Земли и орбиты, выражает метафору исследования.

Знак передаёт ощущение стабильности и целостности, в этом ему помогает сама буква «е», хорошо сбалансированная, основательная и пропорциональная, позаимствованная из не менее легендарного шрифта Helvetica. Окончательный вариант состоит из устойчивого и надежного сочетания цвета и формы — синей окружности.

Следующие изменения логотипа уже связаны с появлением новой операционной системы Windows Vista. Уже знакомая буква «e» получает развитие: появляется глянцевая фактура и объём. Логотип был обновлён в соответствии с новым дизайном и стилистикой Vista.

В Internet Explorer 8 и в период актуальности Windows Vista используется та же иконка браузера, что и для IE 7, а вот к запуску Internet Explorer 9 пришлось освежить образ, потому что вышла Windows 7.

Как менялся интерфейс IE

Многие считают, что расширения в браузерах — придумка Chrome. На самом же деле, расширения были представлены еще в 1999 году в Internet Explorer 5. Другое дело, что они были не так удобны, как потом в Chrome. В остальном же ничего хорошего про функциональность Internet Explorer сказать нельзя.

Практически с самого начала его популярность основывалась на предустановке на Windows, но с ростом недовольства пользователей даже этот фактор перестал работать. Все новшества, появлявшиеся в Internet Explorer, как правило, уже давно работали в тех или иных популярных браузерах.

С визуальной точки зрения интерфейс IE развивался в том же ключе, что и дизайн Windows. Все мы помним квадратную серость Windows 98 и стеклянные кнопки Vista.

Internet Explorer 5 на Windows 98. Пыль прохладной канцелярии.
Internet Explorer 5 на Windows 98. Пыль прохладной канцелярии.

Последняя версия Internet Explorer выпущена в 2015 году, хотя её до сих пор можно найти в Windows 10. Даже не углубляясь в интерфейс этого динозавра, можно сразу обратить внимание, например, на слишком мелкие элементы управления и нелогично продублированную строку поиска.

Internet Explorer 10 на Windows 10
Internet Explorer 10 на Windows 10

Стоит упомянуть, что преемник IE, браузер Microsoft Edge, созданный на базе Chromium, выглядит гораздо приятнее.

<p>Microsoft Edge на Windows 10</p>

Microsoft Edge на Windows 10

Закат Internet Explorer

Не лучшие времена настали в истории браузера в 2001-м, когда вышел всем известный Internet Explorer шестой версии, сначала завоевавший популярность среди многих пользователей, а затем уничтоживший всю накопленную годами репутацию.

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

Со временем корпорация Microsoft пыталась поправить сложившуюся ситуацию, но было слишком поздно, все попытки оказались тщетными. Разочарованные пользователи начали уходить и продолжали до тех пор, пока корпорация не убила Internet Explorer в 2015 году.

На смену ему пришел, как уже было сказано чуть выше, Microsoft Edge. Но время было упущено; за эти годы выросли и заняли свою нишу новые программы: Chrome, Firefox и Opera, которые с удовольствием приняли разочарованных пользователей, выпавших из слабеющих рук Internet Explorer.

Google Chrome: сын маминой подруги

Эволюция дизайна браузеров

В 2008 году Эрик Шмидт, исполнительный директор Google, даже и не думал инвестировать в разработку браузера. Это было вполне логично — рынок программного обеспечения для сёрфинга был давно распределён.

Пользователи уже знали своих любимчиков в лицо, ведь с их помощью они каждый день выходили в интернет. Поэтому даже такому грозному поисковому гиганту как Google пробиваться со своей новой разработкой было бы крайне рискованно. Ведь если бы новый продукт потерпел фиаско на этапе запуска, это стало бы огромным ударом по репутации.

<p>С конца 2001 года Эрик Эмерсон Шмидт работал председателем совета директоров и главным исполнительным директором Google</p>

С конца 2001 года Эрик Эмерсон Шмидт работал председателем совета директоров и главным исполнительным директором Google

Однако в Google всё же были люди, верящие в успешность идеи. Это были основатели Ларри Пейдж и Сергей Брин. Компания обладала почти безграничными ресурсами и финансовыми возможностями и могла позволить себе эксперимент по созданию браузера.

Проще говоря, первые шаги по созданию Google Chrome делались без каких-либо гарантий на успех, а Пейдж и Брин понимали, что их главная задача — убедить исполнительного директора.

Учредители Google: Ларри Пейдж и Сергей Брин
Учредители Google: Ларри Пейдж и Сергей Брин

Официальный релиз Google Chrome состоялся в сентябре 2008 года. Первой вышла версия под Windows.

С каждым обновлением программа нравилась пользователям все больше. В целом такой результат был ожидаем, ведь Google не скупилась на разработку и располагала поистине гигантскими возможностями в финансах, PR и рекламе, и могла молниеносно реализовывать свои задумки и пожелания пользователей.

Как менялась иконка Chrome

Трехмерно-гланцевая пластиковая иконка самой первой версии была разработана в недрах Google, а в 2011 дизайнер Стив Рура в 2011 году приступил к работе над обновлением. Одной из главных задач Google было сделать работу в сети легкой и удобной настолько, насколько это только возможно. Поэтому изменения в иконке были незначительны, коснулись немного цвета и конструкции. Самым важным было решение уйти в простоту и двумерность.

Стив Рура, дизайнер, разработавший логотип Google Chrome в 2011 году
Эволюция дизайна браузеров

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

Как менялся интерфейс Chrome

Несмотря на то, что Chrome — один из самых молодых браузеров, именно на его интерфейсные наработки чаще всего смотрели и смотрят конкуренты. Например, Chrome был первым браузером, разместившим вкладки на самом верху окна, над кнопками управления (что сейчас кажется очень логичным).

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

Главной особенностью Chrome, проходящей через года, можно назвать минимализм и функциональность. Очевидно, этот подход вдохновлен дизайном самого Google. Вообще, Chrome по полной использует своё преимущество в виде того, что это продукт Google. Например, перевод страниц с помощью Google Translate. А с последними обновлениями ответ на какой-нибудь распространённый вопрос можно получить, не уходя из адресной строки.

Эволюция дизайна браузеров

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

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

Эволюция дизайна браузеров

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

Эволюция дизайна браузеров

Перспективы Chrome

История браузера Google Chrome, по правде сказать, не очень-то интересна. Каждый новый релиз и обновление были спланированы и продуманы до мелочей, так что кажется, что вообще не было никаких сложностей и яростной борьбы за выживание. Только стабильность в росте, победы над конкурентами и завоевание новых территорий на рынке.

Корпорация Google смогла обеспечить слаженную работу команд, что позволило в небольшие сроки вывести браузер на лидирующие позиции в мире и позже стать абсолютным лидером, «поселившись» в компьютерах 60% пользователей интернета.

Opera: норвежский пассажир

Начало истории браузера Opera начинается в 1994 году. В основу первых прототипов легли разработки компании Televerket, которая была одной из крупнейших телекоммуникационных компаний Норвегии (ныне она называется Telenor). Проект отделился в 1995 году в специально созданную компанию — Opera Software.

Спустя какое-то время браузер стал самодостаточным проектом и превратился в многофункциональный программный пакет для серфинга в сети. К настоящему времени браузеру не удалось захватить значительную долю мирового рынка (охват примерно 1,5%).

К слову, Opera сначала была платной программой, большой популярности добилась лишь на постсоветском пространстве, где процветало пиратство. Охват в остальном мире у неё был существенно ниже.

Йон Стефенсон фон Течнер (слева) и Гейр Иварсёй (справа), 30 августа 1995 года
Йон Стефенсон фон Течнер (слева) и Гейр Иварсёй (справа), 30 августа 1995 года

Эволюция логотипа Opera

Первый раз компания Opera Software использовала букву «O» в 1995 году, в год своего основания. Для создания нового фирменного стиля компания обратилась за услугами сразу в два дизайн-бюро — в норвежское Anti и британское DixonBaxi.

Эволюция дизайна браузеров

В 2003–2004 годах война браузеров достигла своего пика, усиливалось противостояние с компанией Microsoft. Opera не теряла времени и выпустила обновлённую седьмую версию браузера, с полностью «прокачанным« новым движком и возможностью подключать пользовательские скрипты и стили.

Изменения появились и в логотипе. Он стал максимально объёмным, выразительным и насыщенным различными графическими приемами: бликами, тенями и собственной толщиной.

В 2009 году с подачи Apple в индустрию приходит тренд на всё глянцевое и металлическое, ему при ребрендингах следуют почти все западные компании. В свою очередь, руководство бренда Opera, напротив, избавляется от всевозможного графического мусора в логотипе.

И это логично: логотип противоречил законам оптики и здравого смысла. Было непонятно, откуда в знаке появлялись абсурдные блики в тени и откуда вообще падает свет. Все стало куда приятней выглядеть благодаря работе над логотипом дизайнера Олега Мельничука. Буква «О» сразу преобразилась.

Начало новой эпохи. Редизайн 2015 года

Эволюция дизайна браузеров

В 2015 году компания Opera Software пошла на кардинальные изменения и убрала из названия слово Software, при этом обновив логотип. Объяснили это тем, что компания к тому моменту занималась не только разработкой программного обеспечения, да и ассортимент продукции значительно расширился со времен основания.

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

Над изменениями в бренд-стратегии и миссии работало британское агентство DixonBaxi вместе с командой Opera, а над дизайном обновленной айдентики снова работали в Anti.

Эволюция дизайна браузеров

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

Как менялся интерфейс Opera

Opera с самого начала использовала многодокументный интерфейс, что наверняка было удобно до возникновения современного стандарта вкладок. Такой интерфейс можно представить, если вы знаете, как работают сразу несколько открытых документов в Adobe Photoshop.

С 2003 года Opera перешла на стандартные вкладки. Многие считают именно этот браузер основным популяризатором интерфейса с вкладками, несмотря на то, что Opera не была ни его изобретателем, ни пионером внедрения.

<p>Первая версия браузера под названием MultiTorg Opera с многодокументным интерфейсом</p>

Первая версия браузера под названием MultiTorg Opera с многодокументным интерфейсом

Opera 7.02, 2003 год
Opera 7.02, 2003 год

В 2017 Opera представила боковую панель с быстрым доступом к соцсетям и мессенджерам. Для тех, кто работает на десктопе и много общается, это должно быть удобнее, чем каждый раз выискивать нужную вкладку.

Эволюция дизайна браузеров

От остальных браузеров Opera также отличается встроенным блокировщиком рекламы. И это неслучайно, ведь именно этот браузер первым внедрил функцию блокировки всплывающих окон.

Mozilla Firefox: дух свободного интернета

Mozilla Firefox — потомок когда-то популярного Netscape Navigator, канувшего в забвение и не выдержавшего конкуренции с Internet Explorer. В далеком 1998 году компания Netscape Communications Corporation (помните? Это же они когда-то сделали NSC Mosaic) смирилась с поражением и начала работу над совершенно новым продуктом — браузером с открытым кодом.

Так появился на свет проект Mozilla Organization, получившим такое название в честь ящера Мозиллы — талисмана Netscape. Создателями были Блейк Аарон Росс и Джо Хьюит.

Блейк Аарон Росс и Джо Хьюит
Блейк Аарон Росс и Джо Хьюит

Поиск образа и названия

История логотипа начинается летом 2002 года с первых попыток поиска образа для нового браузера — Phoenix. Ему и было суждено стать в дальнейшем Firefox.

Логотип Phoenix, 2002 год
Логотип Phoenix, 2002 год

Нелегка судьба сложилась у названия браузера, с этим связана целая история. Так получилось, что Phoenix («Феникс»), образ хороший и говорящий о возрождении, оказался уже занят другой компанией — Phoenix Technologies Ltd, разработчиком одноимённого BIOS.

Эволюция дизайна браузеров

Разработчики из Mozilla решили попробовать заменить название продукта на Firebird («Огненная птица»). Но это слово было тоже занято, но на этот раз уже в среде баз данных.

Название Firefox («Огненная лиса») появилось с третьей попытки. В этот раз все прошло гладко, браузер наконец приобрёл имя. Пользователи сразу оценили красивое и довольно запоминающееся название с эмоциональным образом в логотипе.

Красочный «огнелис» сразу завоевал свою аудиторию пользователей, которая быстрыми темпами увеличивалась. В целом это и не мудрено, ведь в это время в мире браузеров явно не хватало игроков. Internet Explorer никогда не являлся образцом совершенства, а Opera многим просто не нравилась.

Стоит сказать, что немалую роль играет психология — есть у «огнелиса» жизнь и харизма, он дарит эмоции и этим завоевывает сердца многих пользователей. Особенно среди тех, кто пользовался когда-то Netscape Navigator.

Как менялся логотип Firefox

Эволюция дизайна браузеров

За всю свою историю логотип браузера Firefox значительно не менялся. Немного менялись цвета, пропорции и пластика хвоста лиса, но сама концепция оставалась неизменной: рыжий лис с длинным огненным хвостом, огибающим планету.

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

А новый образ должен был получиться современным, простым и понятным. Компания пошла на эксперимент и создала два возможных графических решений будущего логотипа. От пользователей требовалось проголосовать за понравившийся вариант.

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

Эволюция дизайна браузеров
Эволюция дизайна браузеров
Эволюция дизайна браузеров

Судя по всему, компания ещё раздумывает над вариантом. На данный момент выбор ещё не сделан.

Как менялся интерфейс Firefox

Судя по всему, именно Firefox (тогда еще известный, как Phoenix), был первым из популярных сегодня браузеров, кто использовал вкладки в 2002 году. Важное изобретение этого принципа, лежащего в основе интерфейса всех сегодняшних браузеров, принадлежит NetCaptor. Это случилось ещё в 1997 году.

Firefox 1.0, первая версия для широкого круга пользователей
Firefox 1.0, первая версия для широкого круга пользователей

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

На данный момент в ИТ-сфере задействованы большие средства, каждый успешный шаг в сторону открытий и экспериментов сродни золотой жиле. Вот и браузер Mozilla Firefox не является исключением. Уже не один год компания работает в направлении популяризации бренда, чего стоит только упомянутый выше дизайн-эксперимент 2018 года.

Послесловие

Браузеры — довольно утилитарная вещь. На самом деле не так уж важно, как выглядят их логотипы. С точки зрения интерфейса браузер должен быть настолько незаметен, насколько это возможно. Главное его достоинство — это быстрота и удобство использования.

Возможно, раньше различия браузеров были более заметны, но сейчас, с обилием UX-исследований, выбираемые решения всё более схожи. С визуальной точки зрения браузеры всегда чутко откликались на тренды digital. Именно поэтому они развивались достаточно схоже и прошли все этапы от скевоморфизма до минимализма, от навороченности интерфейсов до интуитивной понятности.

Эволюция дизайна браузеров
1313
9 комментариев

Очень много воды. А ещё Edge не был создан на основе Chromium, насколько мне известно.

3
Ответить

Изначально нет, сейчас dev версия уже chromium based. Скорее всего весной следующего года в релизе будет.

Ответить

А почему Safari не включили в обзор?

1
Ответить

Статья неполная без браузеров Я.браузера, Спутник и прости господи Амиго.

1
Ответить

Устал это повторять под каждой подобной статьей. Первый браузер был очень продвинутый и мог показывать изображения и продвинутый html, но большинство компьютеров это не тянули, поэтому в лаборатории Бернерса Ли сделали чисто текстовую версию. Это и можно считать первый популярным браузером. Реинкарнацию этого проекта можно и щас найти на сайте CERN

Ответить

Помню IE, начиная с 3 версии) Можно было долго разглядывать орнамент на тулбаре и крутящийся логотип IE, пока грузились страницы на модеме. А в 4 появились красивые псевдо-объемные монохромные иконки.

Ответить