От таблиц и «кислотных» расцветок до адаптивного и плоского дизайна: как изменялся внешний вид интернета

Хронология развития веб-дизайна и браузеров.

1991 год — создание World Wide Web

6 августа 1991 года в новостной группе Usenet alt.hypertext публично объявили о запуске сети. Первый веб-сайт CERN запустился в ноябре 1992 года, он был полностью текстовым, синим цветом выделялись гиперссылки. У первых цветных мониторов было разрешение 640x480, они поддерживали 16 цветов.

Первый опубликованный сайт. Источник: W3
Первый опубликованный сайт. Источник: W3

Для просмотра веб-страниц использовался WorldWideWeb, позже переименованный в Nexus — первый интернет-браузер.

Браузер WorldWideWeb. Источник: Cern
Браузер WorldWideWeb. Источник: Cern

HTML

Пример HTML-кода. Источник: Researchgate
Пример HTML-кода. Источник: Researchgate

В начале развития интернета язык гипертекстовой разметки HTML был единственным средством разработки сайтов. Его возможности были ограничены. Сайты получались простыми: они выглядели как текстовые документы, связанные друг с другом гиперссылками.

Lynx с открытой Wikipedia
Lynx с открытой Wikipedia

В 1992 году появился текстовый браузер Lynx.

1993 год — новые браузеры, первый поисковик и поддержка изображений

Через два года после запуска WWW появилась первая поисковая система Aliweb (Archie Like Indexing for Web). Она представляла собой каталог сайтов, разделенный по тематикам. Aliweb экспериментировала с дизайном: чтобы привлечь внимание пользователей, важные элементы страницы выделялись разными цветами.

Aliweb
Aliweb

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

В 1993 году появилась поддержка изображений, которые можно было поделить на части и вставить в таблицу. «Тело» сайта начали отделять от боковой навигации (первой колонки таблицы), появились первые изображения, а веб-дизайн начал идти в сторону более широких макетов.

Mosaic
Mosaic

Появился современный браузер Mosaic, который отображал изображения на веб-странице вместе с текстом, а также загружал страницу в HTML-формате.

По данным исследователя MIT Research Мэттью Грея, к концу 1993 года в интернете было 623 сайта. Появились первые лендинги — их прообразом стал запущенный сайт MTV.

Первый сайт MTV
Первый сайт MTV

1994 год — использование баннеров на сайтах

Онлайн-маркетинг появился в первые годы создания интернета: многие сайты были переполнены рекламой в девяностых годах. Отличился Hotwire, который сейчас переименован в Wired — дизайнеры добавили небольшое баннерное объявление в шапку сайта в 1994 году.

Hotwire
Hotwire

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

Разработчики сайтов старались привлечь читателей яркими рекламными объявлениями, похожими на современные баннеры, и кричащими цветами. Появились цветные 3D-кнопки.

Сайт Microsoft в 1994 году. Источник: Redmond Pie
Сайт Microsoft в 1994 году. Источник: Redmond Pie

В 1993 году создали консорциум World Wide Web (W3C), который разработал основные стандарты веб-страниц. Оптимизированные сайты начали загружаться быстрее и на более высоком разрешении экрана.

Netscape Navigator 1. Источник: PCWorld
Netscape Navigator 1. Источник: PCWorld

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

Источник: u networks
Источник: u networks

В середине 1994 года было 2738 сайтов, согласно статистике Мэттью Грея. В конце 1994 года — более 10 тысяч сайтов.

Opera 1. Источник: Wikipedia
Opera 1. Источник: Wikipedia

В 1994 году запустился исследовательский проект Opera Browser 1.0.

Появился JavaScript, дизайнеры стали использовать скрипты, анимации и передвижение элементов. Технология была частью браузера Netscape 2.0B3.

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

1995 год — PHP, язык Ruby, Shockwave, Internet Explorer 1

В 1995 году появились мониторы с разрешением 800x600 и поддержкой 256 цветов. В интернете появились шрифты Times New Roman и Courier, простая анимация и интерактивные веб-приложения Macromedia Shockwave. Позже компанию Macromedia купит Adobe.

Был разработан язык программирования PHP. Изначально PHP был инструментом создания персональных веб-страниц (Personal Home Page), сегодня — это язык программирования для создания динамических сайтов.

В 1995 году на PHP создавались простые динамические приложения — веб-формы и гостевые книги.

Internet Explorer 1. Источник: PCWorld
Internet Explorer 1. Источник: PCWorld

Microsoft выпустила Internet Explorer 1 и Internet Explorer 2, которые не могли конкурировать с Netscape 3. К 1996 году около 90% интернет-пользователей использовали Netscape Navigator в качестве браузера.

1996 год — Internet Explorer 3, Flash

В 1996 году число пользователей интернета увеличилось до 36 млн человек.

Образцом качественного сайта 1996 года считается сайт CNN.

Сайт CNN 1996 года
Сайт CNN 1996 года

Microsoft выпустила Internet Explorer 3.0, который поддерживал мультимедиа, Java-вставки, интернет-почту и управляющие элементы ActiveX.

Internet Explorer 3 обогнал по популярности Netscape и стал лидером рынка браузеров до выхода Google Chrome.

Flash — эпоха веб-анимации

Flash полностью изменил представление о дизайне веб-страниц. Впервые дизайнеры получили возможность создавать любые объекты, добавлять анимации и создавать более привлекательные сайты. При этом использовался только один инструмент — конечная страница сжимала всю информацию в один исполняемый файл. Сайты превратились в комбинацию табличного стиля и flash-элементов, которые меняли цвет и размер.

Сайт фильма Space Jam
Сайт фильма Space Jam

Основная проблема заключалась в том, что не у каждого пользователя был установлен flash-плагин, помимо этого, flash-сайты загружались дольше обычного и работали медленнее.

Flash принес в веб-дизайн анимационные вставки и наложение страниц. Несмотря на то, что Flash всё ещё используют, он потерял свои позиции на рынке из-за больших требований к вычислительной мощности устройств. К примеру, Apple отказалась от Flash во время выхода iPhone, что повлияло на популярность технологии.

В дизайне все больше внимания уделялось навигационным меню: дизайнеры использовали темные фоны и 3D-кнопки для страниц.

1998 год — рождение Google

В 1998 году интернет стал напоминать то, что пользователи видят сегодня.

Сайт Google в 1999 году
Сайт Google в 1999 году

Google Beta появилась 4 сентября 1998 года. Google изменила представление о каталоге ссылок — вместо выбора из списка-справочника, компания решила сделать минималистичный поиск. Простота и быстрая скорость работы привели Google к успеху.

CSS

После создания Flash появились CSS — каскадные таблицы стилей.

Чем больше пользователей появлялось в интернете, тем медленнее он становился. Скорость открытия страниц сайтов стала большой проблемой. Идея CSS проста — разделить контент и внешний вид. Содержание страницы сайта было в HTML, а её стиль — цвет фона или размер текста — указывался в CSS-таблице стилей.

Такая разработка упростила контроль над единым внешним видом сайтов вне зависимости от их содержания.

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

В 2000 году Microsoft Internet Explorer 5 стал первым браузером, который начал поддерживать CSS 1 на 99%.

Каскадные таблицы стилей используются до сих пор и являются одним из важных аспектов веб-дизайна. В период с 1998 по 2000 год в дизайне рос акцент на меню и навигацию, а контент стал располагаться рациональнее. На экране было меньше текста, но больше мини-страниц. Применялись градиенты.

2000 год — интернет-экономика

В 1999 году появилась платежная онлайн-система PayPal. Но широкое распространение она получила в 2000 году и зародила новый способ ведения бизнеса.

Paypal
Paypal

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

Появилась понятие «сетка» сайта, которая упростила дизайнерам организацию элементов для удобства пользователей. Разрешение экрана увеличилось до 1024x768, но 56% пользователей интернета по всему миру ещё использовали экраны 800х600.

Internet Explorer 6. Источник: PCWorld
Internet Explorer 6. Источник: PCWorld

В 2001 году появился Internet Explorer 6.

2003 год — блоги

Дизайнеры использовали flash и экраны-заставки и интегрировали анимированный контент. Увеличилась скорость соединения, что открыло возможности для улучшения дизайна.

До 2000 года разработкой и дизайном сайтов практически полностью занимались ИТ-специалисты с техническим образованием. В 2003 году вышла WordPress — система управления контентом основанная на PHP и MySQL, которая упростила заведение личных страничек пользователям интернета.

WordPress использовала систему шаблонов и архитектуру на плагинах, что позволило самому настраивать дизайн и функциональность сайта.

WordPress
WordPress

WordPress изменил подход к разработке сайтов. В мае 2003 года WordPress установили на 2000 блогах, а в январе 2015 года более 23,3% из 10 млн сайтов использовали эту CMS.

Дизайнеры начали использовать 16 млн цветов вместо 256 оттенков. Появилось выпадающее навигационное меню, а 3D-кнопки стали пропадать с сайтов. Пользователи начали переходить на разрешение 1024x768.

2004 — MySpace и Firefox

MySpace
MySpace

Социальная сеть MySpace стала местом, где пользователи могли создать собственные профили и общаться с другими людьми через интернет. Для редактирования профилей социальная сеть предложила использовать HTML. Первые веб-дизайнеры могли учиться верстке HTML-макетов с помощью платформы MySpace.

Firefox 1.0. Источник: PCWorld
Firefox 1.0. Источник: PCWorld

В 2004 году появился браузер Firefox 1.0 с открытым исходным кодом. Он составил конкуренцию Internet Explorer.

2005 год — YouTube

Видеоконтент вышел на первый план и появился первый видеохостинг — YouTube. На сайтах начали интегрировать видео как часть общего контента сайта. В 2006 году сервис купит Google.

2006 год — публичная версия Facebook

Изначально Facebook появилась в 2004 году, но была доступна только студентам колледжей — регистрация подтверждалась по электронной почте .edu.

Facebook в 2006 году
Facebook в 2006 году

В 2006 году Facebook открыла регистрацию для всех. В отличие от MySpace, разработка Цукерберга не позволяла редактировать код страниц. Facebook сконцентрировалась на простом и лаконичном дизайне сайта и разработала фирменный цветовой стиль, который легко узнавали в интернете.

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

От таблиц и «кислотных» расцветок до адаптивного и плоского дизайна: как изменялся внешний вид интернета

В 2000-х годах появилось понятие Web 2.0. Сайты стали использовать интерактивный контент, который меняется без обновления страницы, и веб-приложения.

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

2007 год — мобильная революция

В 2007 году у большинства сайтов не было мобильной версии. Чтобы улучшить взаимодействие пользователей с сайтами, нужно было разработать новый подход к мобильному дизайну. Разработчики стали задаваться вопросами: нужно ли уменьшать размеры сайта, должны ли быть стандарты для мобильных устройств, как не теряя данные ускорить загрузку сайта?

Ответ пришел в виде 960 Grid System: Bootstrap и Foundation стали основой нового мобильного веба.

29 июня 2007 года вышел первый iPhone. Большинство пользователей в то время занимались серфингом в интернете с помощью простых браузеров и считали сайты на телефонах ненужными и бесполезными.

Safari в iOS. Так выглядел сайт The New York Times без мобильной версии.
Safari в iOS. Так выглядел сайт The New York Times без мобильной версии.

В iPhone появился первый полноценный мобильный браузер Safari.

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

Сайт Apple в 2007 году
Сайт Apple в 2007 году

2008 год — Google Chrome, мобильный интернет и HTML5

В 2008 году выход в интернет с мобильных устройств опередил выход с компьютеров — сайты нуждались в мобильной версии для смартфонов. Веб-сайты начали конвертироваться под вертикальный формат, а навигация стала минималистичной и представляла только основные части сайта.

Google Chrome. Источник: Telegraph
Google Chrome. Источник: Telegraph

Появился Google Chrome, который стал самым популярным браузером из-за скорости, дизайна и минимализма.

Появилась первая версия технологии HTML5, который придет на смену Flash.

2009 год — социализация изображений

Flickr
Flickr

Компания Yahoo запустила сервис Flickr, который позволяет загружать и обмениваться фотографиями в интернете. Flickr стал первым сайтом, использующим совместные теги.

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

2010 год — рождение адаптивного дизайна

По мере увеличения использования мобильного интернета, важной задачей для дизайнера стала разработка мобильной версии сайта. В 2010 году веб-дизайнер Итан Маркотт поставил перед собой задачу приблизить дизайн мобильного веба к настольному.

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

Адаптивный дизайн на примере Mashable
Адаптивный дизайн на примере Mashable

С технической точки зрения разработчики по-прежнему использовали HTML и CSS. Основным преимуществом адаптивности был паритет контента — на всех устройствах пользователи получали один и тот же сайт. Дизайнеры отказались от скевоморфизма и градиентов в пользу плоских макетов с простыми элементами и типографикой.

Рынок браузеров поделили между собой Chrome, Internet Explorer, Safari, Firefox и Opera. Google обновлял браузер чаще остальных: в период между 2010 и 2014 годами появилось более 30 обновлений Chrome.

2012 год — плоский дизайн, Metro UI

В 2012 году Microsoft представила язык Metro Design (позже переименованный в Modern Design), основой которого стал плоский дизайн. Он применялся в Windows Phone, Windows 8 и Zune и стал источником вдохновения, образцом для многих компаний.

К примеру, дизайн проигрывателя Zune акцентировался на крупную строчную типографику, логотипы-силуэты и монохромные шрифты.

Zune. Источник: Csmonitor
Zune. Источник: Csmonitor

Пастельные цвета, острые края, форма сетки и аккуратная типографика преобладали в Modern Design, который в 2017 году обновился и стал называться Fluent Design.

Дизайнеры выбирали минималистичный вид сайтов, более информативный и эстетичный.

Аккаунт Microsoft в Fluent-дизайне. Источник: On MSFT
Аккаунт Microsoft в Fluent-дизайне. Источник: On MSFT
Сайт Apple в 2012 году
Сайт Apple в 2012 году

2014-2018 года — Material Design, Parallax, типографика

В 2014 году Google опубликовала своё видение дизайна — Material Design. Google предлагает использовать тени и концепции движения и глубины, чтобы создавать проекты, ориентированные на UX. Компания развила идеи плоского дизайна, адаптировав мобильные приложения и мобильные версии сайтов в новом фирменном стиле.

Material Design вдохновлен физическим миром и его текстурами, в том числе тем, как отражаются свет и тени.

Источник: Behance
Источник: Behance

Еще один элемент Metro и Material Design — анимации. Они обрели популярность в 2016 году и используются для привлечения внимания пользователей и помощи в навигации по сайту.

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

Сайт Apple в 2015 году
Сайт Apple в 2015 году

Parallax

В 2015 году становится популярным Parallax-эффект: при прокрутке переднего плана движется передний объект, а не фон. Это превращает веб-дизайн в одну большую анимированную картинку.

Источник: Stracatela

Microsoft закрывает Internet Explorer. Ему на смену приходит Microsoft Edge. Также в 2015 году «Яндекс» представил «Яндекс.Браузер».

Microsoft Edge
Microsoft Edge

В 2018 году тенденции не изменились: дизайнеры продолжают развивать идеи плоского дизайна, типографики и анимации. Одно из значительных изменений в дизайне, которое пришло из 2017 года — асимметрия и «сломанные» макеты.

Источник: Dada-data
Источник: Dada-data

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

Источник: FabricBrands

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

Сайт Adobe
Сайт Adobe

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

Сайт Heystack

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

Типографика создает контрастные заголовки и улучшает навигацию по сайту.

Источник: Fboxer

Общая тенденция сайтов 2018 года: яркие цвета, жирный градиент и интегрированная анимация. Предложенная в 2012 году строгость плоского стиля постепенно эволюционирует в яркий, живой и адаптивный интерфейс, одинаково подходящий для мобильных устройств и компьютеров.

Сайт Apple в 2018 году
Сайт Apple в 2018 году
130130
57 комментариев

Тенденция последних лет - портить юзабилити в угоду свистоперделкам.

49
Ответить

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

7
Ответить

Комментарий недоступен

2
Ответить

Понастальгировал, спасибо! 👍🏻

32
Ответить

Современному Интернету чуть больше десяти лет. ЧУТЬ БОЛЬШЕ ДЕСЯТИ, Карл. Мне кажется мы ещё даже не начали осознавать, какое гигантское влияние на развитие человеческой цивилизации окажет эта технология.

9
Ответить

а всего то хотели просто обмениваться ссылками на научные работы

32
Ответить

Смотря что считать современным. Гугл, Яндекс, Амазон, Ебэй появились примерно 20 лет назад. Причём Мейл.ру даже постарше будет (но его купили в своё время).

Ответить