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

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

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

В закладки

Поделиться

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

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

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

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

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

HTML

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

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

Lynx с открытой Wikipedia

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

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

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

Aliweb

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

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

Mosaic

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

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

Первый сайт MTV

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

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

Hotwire

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

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

Сайт Geocities. Источник: TBHCreative

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

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

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

Источник: u networks

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

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

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

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

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

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

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

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

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

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

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

1996 год — Internet Explorer 3, Flash

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

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

Сайт CNN 1996 года

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

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

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

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

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

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

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

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

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

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

Сайт Google в 1999 году

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

CSS

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

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

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

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

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

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

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

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

Paypal

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

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

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

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

2003 год — блоги

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

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

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

WordPress

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

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

2004 — MySpace и Firefox

MySpace

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

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

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

2005 год — YouTube

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

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

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

Facebook в 2006 году

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

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

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

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

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

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

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

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

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

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

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

Сайт Apple в 2007 году

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

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

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

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

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

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

Flickr

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

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

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

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

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

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

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

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

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

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

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

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

Пастельные цвета, острые края, форма сетки и аккуратная типография преобладали в Metro.

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

Сайт Apple в 2012 году

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

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

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

Источник: Behance

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

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

Сайт Apple в 2015 году

Parallax

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

Источник: Stracatela

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

Microsoft Edge

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

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

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

Источник: FabricBrands

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

Сайт Adobe

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

Сайт Heystack

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

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

Источник: Fboxer

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

Сайт Apple в 2018 году

#какэтобыло #интернет


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Солнечный зонд «Паркер» передал данные из короны Солнца

Он набрал скорость порядка 715 000 километров в час. Солнечный зонд NASA «Паркер» установил рекорд, отправившись в начале этого года на Солнце, как самый быстрый космический аппарат в истории. «Паркер» уже совершил свой первый облет короны Солнца, и NASA говорит, ...

Не только Gmail: три сервиса, заново придумавших электронную почту

Не только Gmail: три сервиса, заново придумавших электронную почту — Сервисы на vc.ru Свежее Вакансии Написать Уведомлений пока нет Пишите хорошие статьи, комментируйте,и здесь станет не так пусто Войти Выжимка материала FastCompany о трёх сервисах, которые пытаются сделать почту эффективнее. ...