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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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