web 2.0

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

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

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

HTML

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

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

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

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

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

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

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

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

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

Онлайн-маркетинг появился в первые годы создания интернета: многие сайты были переполнены рекламой в девяностых годах. Отличился 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 год — PHP, язык Ruby, Shockwave, Internet Explorer 1

В 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 год — Internet Explorer 3, Flash

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

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

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

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

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

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

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

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

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

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

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

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 году и зародила новый способ ведения бизнеса.

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

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

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

2003 год — блоги

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

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

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

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

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

2004 — MySpace и Firefox

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

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

2005 год — YouTube

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Parallax

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

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

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

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

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

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

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

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

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

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

Добавить комментарий