История веб дизайна: Краткая история веб-дизайна / Хабр

Краткая история веб-дизайна / Хабр

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

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

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

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

Тёмный век веб-дизайна (1989)

Cамо начало веб-дизайна можно назвать тёмными временами, ведь экраны были в прямом смысле черными, вмещая в себя всего лишь небольшое количество одноцветных пикселей. Дизайн тогда создавался при помощи символов и табуляции, поэтому мы переместимся вперед, в то время, когда графические пользовательские интерфейсы были главным инструментом веб-серфинга. Те времена табличной верстки можно назвать Диким Западом веба.

Таблицы — начало (1995)

Появление на свет браузеров, способных показывать изображения, было первым шагом в веб-дизайн — такой, каким мы его знаем сегодня. Самым доступным способом структурирования информации была концепция использования таблиц, которые на тот момент стали доступны в HTML. Поэтому помещение таблиц внутрь других таблиц и смешивание статических ячеек с ячейками относительных размеров началось с книги Дэвида Сигела «Creating Killer Sites». Применение таблиц в таких целях казалось не совсем правильным, поскольку их основным предназначением является структурирование информации. И тем не менее, этот метод создания веб-дизайна был самым распространенным в течение длительного времени. Была тогда и другая проблема — сохранение работоспособности этих хрупких структур. В то же время популярность приобрело «разрезание макетов» на отдельные элементы. Дизайнеры рисовали красивые макеты, а разделением их на части поменьше и склеиванием их так, чтобы дизайн работал как надо, занимались разработчики. С другой стороны, таблицы обладали такими шикарными особенностями, как возможность выравнивать содержимое по вертикали, определять его размеры в пикселях и в процентах. Главным преимуществом таблиц было то, что они позволяли максимально близко воссоздать структуру сетки. Тогда же разработчики поняли, что перестали любить внешние интерфейсы и их разработку.

Javascript приходит на помощь (1995)

Ответом на ограничения HTML был Javascript. Хотите вывести всплывающее окно? Или вам нужно настроить динамическое изменение расположения элементов? Ответ один — Javascript. Однако главная проблема заключалась в том, что Javascript ложился поверх материала, из которого состоит веб и, соответственно, должен был загружаться отдельно. Нередко ленивые разработчики использовали его для создания быстрой заплатки для кода, однако в умелых руках он способен превратиться в очень мощный инструмент. В наши дни мы предпочитаем избегать использования Javascript, если тот же самый элемент может быть реализован с помощью CCS, но даже несмотря на это, JavaScript сегодня не теряет своей актуальности как в разработке интерфейсов (jQuery), так и в программировании серверной части (Node.js).

Золотая эпоха свободы – Flash (1996)

Появившаяся в 1996 году технология обещала невиданную ранее свободу и ставила своей целью разрушить барьеры, которые сдерживали развитие веб-дизайна в то время. Дизайнер мог работать с любыми формами, размерами макетов, анимациями, взаимодействиями и использовать любой шрифт и все это при помощи одного инструмента — технологии Flash. Конечный результат работы упаковывался в один файл, а после этого отправлялся в браузер для отображения. Все это работало при условии, что у пользователя стояла последняя версия flash plugin и было немного свободного времени для того, чтобы подождать, пока содержимое загрузиться. Выглядело это волшебно. То время было золотой эпохой ярких страниц приветствия, вводных анимаций и всякого рода интерактивных эффектов. К сожалению, технологии явно не хватало открытости, дружественности к поиску, а потребление ресурсов Flash было по-настоящему большим. Когда Apple решили избавиться от него в своем первом iPhone (2007), технология начала угасать, во всяком случае с точки зрения перспектив в веб-дизайне.

CSS (1998)

Примерно в то же время, что и Flash, появился другой, лучший с технической точки зрения способ структурирования дизайна — Cascading Style Sheets (CSS). Его базовая концепция заключалась в разделении функций контейнера содержимого и функций его представления, таким образом, что сам контент помещался в HTML, а его визуальное форматирование происходило при помощи CSS. Первые версии технологии были далеки от гибкости, однако самой большой проблемой была медленная скорость адаптации браузеров к ней. Для введения полной браузерной поддержки CSS потребовалось несколько лет и нередко его использование сопровождалось немалым количеством багов. Одновременно с этим нередко получалось так, что самые новые CSS-свойства поддерживались только в одном браузере, в то время, как в других этой поддержки не было. Для разработчиков это стало настоящим кошмаром. Здесь также важно пояснить, что CSS не является языком написания кода, скорее — языком объявления свойств объектов и, если вопрос о том, надо ли дизайнерам учиться писать код остается открытым, то ответ на вопрос «Следует ли им понимать, как работает CSS?» совершенно точно будет положительным.

Подъем мобильного контента — сетки и фреймворки (2007)

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

После нескольких итераций победу одержала сетка в 960 px, а разделение на 12 столбцов стало использоваться дизайнерами преимущественно. Следующим шагом была стандартизация широко распространенных элементов, таких как формы, меню навигации, кнопки, а также создание возможности их быстрого и простого использования или, попросту говоря — создание библиотеки визуальных элементов, которая содержит в себе весь необходимый код. Победителями здесь стали Bootstrap и Foundation, что также говорит о том факте, что грань между веб-сайтом и приложением стала стираться. Недостатком подхода стало то, что новые дизайны стали чаще выглядеть одинаково. Сами же дизайнеры при этом по-прежнему не могли получить доступ к их изменению без понимания того, как работает код.

Адаптивный веб-дизайн (2010)

Умный парень по имени Итан Мэркот решил бросить вызов существующему подходу, предложив отображать одинаковое содержимое, используя при этом разные формы макетов для его представления, назвав это термином «Responsive web design» (адаптивный веб-дизайн). Формально, мы все еще продолжаем использовать HTML и CSS, поэтому речь здесь идет больше о концептуальном улучшении.

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

Упрощение (2010)

Отрисовка большего количества макетов требует больше времени. Исходя из этого, к нашему общему счастью, дизайнеры решили рационализировать процесс, избавившись от замысловатых эффектов теней и вернувшись обратно к истокам дизайна, отдав приоритет содержимому. Качественные фотоматериалы, подбор шрифтового оформления, красочные иллюстрации и продуманные макеты — таков дизайн, каким мы создаем его сегодня.
Упрощение визуальных элементов, или так называемый «плоский дизайн» также является частью этого процесса. Главное его преимущество в том, что материалам, приоритетности отображаемой информации и содержимому в целом уделяется гораздо больше внимания. Глянцевые кнопки заменяются иконками, это позволяет нам использовать векторные изображения и шрифты-иконки. Веб-шрифты позволяют получить прекрасную типографику. Самое забавное здесь в том, что веб был близок к этой идее с самого начала, но ведь на то она и молодость…

Светлое будущее (2014)

Все эти годы визуализация дизайна и разные попытки его представления в браузере были Святым Граалем веб-дизайна. Представьте себе, как дизайнеры с легкостью перемещают элементы на экране, а готовый код при этом появляется сам! Речь идет не про изменение порядка элементов как таковое, а про полную гибкость и контроль! Представьте себе, что разработчикам не нужно беспокоится о совместимости с браузерами и они, вместо этого могут полностью сосредоточиться на решении реальной проблемы!

Формально, сегодня существует несколько новых идей, которые поддерживают движение в этом направлении.

Новые юниты CSS, такие как vh, vw (высота и ширина области просмотра) позволяют получить гораздо большую гибкость при позиционировании элементов. Они также решают проблему, которая удивляла многих дизайнеров: почему центральное выравнивание по вертикали в CSS делается с таким трудом? Еще одна крутая идея, ставшая частью CSS — Flexbox, который позволяет создавать макеты и изменять их при помощи одного свойства, вместо написания кучи кода. Ну и наконец, web components — еще более основательная попытка, которая представляет собой связанный вместе набор элементов, таких, например, как галерея или форма регистрации. Это создает возможность упростить рабочий процесс, так как элементы становятся строительными блоками, которые могут быть использованы много раз, в том числе и самостоятельно.

Ну а каковы ваши мысли по поводу будущего веб-дизайна?

Примечание: Годы в скобках указывают на начало того или иного этапа. Данные технологии развивались с разными скоростями, на протяжении длительного времени, поэтому ни в коем случае не считайте период с 1998 по 2007 пустым. Именно тогда и происходила основная эволюция.

Краткая история веб-дизайна

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

• 16 «смертельных» ошибок веб-дизайна посадочных страниц

1990-1994

Итак, главными дизайн-трендами периода 1990-1994 годов стали следующие нововведения:

• Появление первых мониторов с разрешением: 640×480 с поддержкой 16 цветов. Да, мы не ошиблись — всего 16 цветов!
• Переполненные текстом сайты: первые браузеры поддерживали только текст. Так было до 1993, когда появилась поддержка просмотра изображений.

Основные события:

1990: WorldWideWebe (Nexus) — первый веб-браузер.

1990: Рождение HTML! Это кодовый язык для чтения браузерами и верстки веб-страниц.

1991: Запущен первый сайт.

1993: Mosaic — первый браузер, поддерживавший просмотр изображений совместно с текстом, а также первый инструмент загрузки веб-страниц привычного для нас формата.

1993 — появление портала Yahoo.

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

1994: World Wide Web Consortium (W3C) утвердился. Сформулирован ряд основных принципов и компонентов, которые делают Web доступным всем и всегда.

• Информационный пробел и интуитивный веб-дизайн

1994-1998

Следующая эра (1994-1998) была связана с технологическим взрывом, принесшим веб-дизайну новые, захватывающие возможности. Однако, эпоха нового либерализма в сайтостроительстве заключалась не только в положительных аспектах — на многие дизайнерские решения того времени современному пользователю смотреть откровенно больно.

Дизайн-тренды периода

• Общее разрешение экрана: 800х600х256 цветов;
• Поддержка цветов возросла до 256;
• Яркие, жуткие цвета — людям со слабой психикой не рекомендуется смотреть на это:)
• Кричащие объявления — как только интернет начал набирать популярность, бизнес обратился к нему как к маркетинговому инструменту. Привлечь читателя сайты пытались в основном яркими и безвкусными рекламными объявлениями, напоминающими современные баннеры.
• Поддержка шрифтов — получают распространение простые шрифты с засечками, такие как Times New Roman и Courier New
• Цветные кнопки с симуляцией 3D-эффекта

Браузеры

1994: Opera Browser 1.0 — запущен в качестве исследовательского проекта.

1995: Internet Explorer 1 и 2.

1996: Netscape Navigator 3. В 1996 году почти 90% интернет-пользователей использовало в качестве браузера Netscape Navigator.

1996: Internet Explorer 3. IE3 поддерживает мультимедиа, Java-апплеты, управляющие элементы ActiveX и такие дополнения, как интернет-почта. Все это нивелировало превосходство Netscape на рынке, позволив IE3 стать самым популярным браузером на долгие годы.

События

1995:

PHP (Personal Home Page) выпущен. Создаются новые, простые и динамические приложения, такие как гостевые книги и разнообразные веб-формы.

Появляется новый программный язык «Ruby».

Macromedia Shockwave создает анимацию и интерактивные приложения для веб-разработок. Позже всю компанию покупает Adobe.

Javascript появляется как часть Natscape Navigator 2.0B3

1996:

Запуск сайта BBC (1996)

Выпуск CSS (Cascading Style Sheets) привносит новые возможности для веб-разработчиков. Уже 1% населения Земли имеет доступ в интернет.

Active Server Pages (ASP) реализована на платформе Windows NT 4. 0 Option Pack

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

1997:

Введение HTML 4.0 сделало интернет действительно интернациональным, установив универсальный набор символов для поддержки пользователей по всему миру. 100 миллионов пользователей теперь онлайн.

• 4 столпа устойчивого веб-дизайна

1998-2002

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

Разрешение монитора 800×600 по-прежнему доминирует, его предпочитает 56% пользователей. Однако 25% перешло на 1024×768, особенно к 2000 году.

Дизайн-тренды периода:

• Растущий акцент на меню и навигацию;
• Более лаконичное и рациональное расположение контента — меньше текста на одном экране, больше мини-страниц;
• Темный или однотонный фон страниц очень популярен;
• Использование градиентов.

События

1998 — запуск Google. В последующие годы эта корпорация переосмыслит онлайн-поиск и запустит успешные сервисы во множестве отраслей интернет-индустрии.

Релиз CSS2 также прошел в 1998 году.

1999 — People.com
1999 — Internet Explorer 5.0
2001 — Internet Explorer 6

• 12 правил веб-дизайна от Дона Нормана

2002-2006

Дальнейшие нововведения дали дизайнерам беспрецедентные возможности по интеграции анимированного контента в веб-сайты. Экраны-заставки и флеш-страницы уже в моде, но все больше внимания уделяется надежности и функциональности. Повышение средней скорости соединения открывает возможности для улучшения дизайна. Также это приводит к выходу видео-контента на первый план — как итог, в 2005 году появляется YouTube.

За год до этого на рынок выходит будущий гигант социальных медиа — Facebook (2004).

В период между 2002 и 2006 годами миллионы пользователей перешли от формата 800×600 к разрешению 1024×768 или выше. Формат 640×480 окончательно сдал позиции и исчез в 2005 году.

В 2003 году более половины пользователей интернета использовали 4-х или 32-х разрядные аппаратные средства, отображающие 16 777 216 различных цветов.

Дизайн-тренды периода

• Флеш-анимация на страницах.
• Особый упор на читаемость и функциональность.
• Анимированный контент тонко интегрирован в ресурсы.

Браузеры

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

2003: была запущена WordPress, система для блоггинга и контент-менеджмента с открытым исходным кодом.
Запуск социальных платформ MySpace и Facebook.

2005: Видео-стриминговый сервис YouTube запущен. Впоследствии он был куплен Google в 2006.

• Как улучшить UX за счет упрощения веб-дизайна: кейс от ENO

2006-2010

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

К январю 2010 более 75% пользователей перешли на форматы выше, чем 1024×768.

Дизайн-тренды периода

• Длинные макеты.
• Стоковые фото.
• Сквеморфизм.

Браузеры

2008: Google Chrome появляется и мгновенно добивается успеха. Он быстро завоевывает звание самого популярного браузера на планете за счет минимализма, скорости и модного дизайна.

2007: Появляется первый iPhone, запуская революцию в нашем восприятии смартфонов. Адаптивный дизайн становится все более актуальным.
2008: Первая рабочая версия HTML5.

• 5 причин, по которым не следует менять плохой дизайн сайта

2010-2014

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

Появление Flapp.ca (2014)

1152×854 становится наиболее используемым разрешением.

Дизайн-тренды периода

• Плоский дизайн.
• Адаптивный дизайн.
• Javascript-анимация.
• Анимированные GIF.
• Параллакс.

Браузеры

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

2010: релиз CSS3.
2011: в сети зарегистрировано более 1 миллиарда веб-сайтов. Свобода дизайна беспрецендентна.
2013: 51% взрослого населения США пользуются онлайн-банкингом.
2014: интернету исполняется 25 лет.

• Эволюция веб-дизайна — 20 лет за 5 минут!

Вместо заключения

За последнюю четверть века и практически на глазах у многих из нас произошли поразительные изменения в веб-дизайне. Конечно, были как удачи, так и промахи, но трудно спорить — большинство трендов и нововведений привели дизайн в лучшую форму. Современный интернет сильно отличается от того, каким он был в 1990 году, не правда ли?

С тех пор, как сети исполнилось 25 лет, и до настоящего времени, сменилось еще несколько трендов. Эксперты говорят о возвращении плоского дизайна в формате Flat 2.0, в моде успели побывать контурные кнопки, а сейчас широко используются hero-images, фоновые видео, контрастные цвета. Не сдают своих позиций принципы минимализма, все важнее становится UI-дизайн (и 2016 год, вероятно, пройдет под его флагом). Также стоит отметить отказ многих дизайнеров от гамбургер-меню и довольно широкое использование приема scrolljacking — когда контент слегка меняется по мере скроллинга, создавая тем самым динамику и даже рассказывая некую историю.

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

Высоких вам конверсий!

По материалам: sparkpay.com 

12-04-2016

Хронология истории веб-дизайна 1990-1994

Просмотр по годам: 1990 – 1994 гг. 1995 – 1997 гг. 1998 – 2002 гг. 2003 – 2008 гг. 2009 – 2017 гг. Все годы

1. 1990 19 февраля ^-й

   Adobe Photoshop 1.0

   Adobe Systems выпустила редактор растровой графики под названием Photoshop 1.0 . Программа была доступна только для Платформа Macintosh (Mac System 6.0.3) и для ее работы требовалось не менее 2 МБ ОЗУ и процессор с частотой 8 МГц.

2. 1990 10 сентября ^-й

   Archie – первая поисковая система

   Трое студентов университета Алан Эмтадж, Питер Дойч и Билл Хилен запустили поисковую систему под названием Archie . Поисковая система позволяла своим пользователям находить и загружать определенные файлы в Интернете, индексируя файлы, хранящиеся в общедоступных FTP-серверы . Его название происходит от слова «архив», в котором отсутствует буква v. Archie часто считается первой в мире поисковой системой в Интернете . В конце 1990-х поисковик постепенно прекратил свое существование.

3. 1990 25 декабря ^-й

   WorldWideWeb – первый браузер

   В ЦЕРНе, швейцарском исследовательском центре, британский физик и пионер Интернета Тим Бернерс-Ли создал первый в мире веб-браузер, названный WorldWideWeb . Браузер также был простым редактором WYSIWYG (что видишь, то и получишь) для редактирования веб-страниц. WorldWideWeb работал только с операционной системой NeXTStep. Позже браузер был переименован в Nexus, чтобы не путать его со Всемирной паутиной (WWW).

4. 1991 апрель

   Gopher

   Система Gopher была создана в Университете Миннесоты как текстовая система, в которой для навигации использовалась иерархическая структура меню. Это была система, работающая по принципу клиент-сервер. Gopher интегрировал службы FTP, Usenet, Veronica, Archie и WAIS . С 1996 года Gopher находится в упадке и в настоящее время используется очень редко.

5. 1991 14 мая ^-й

   Браузер линейного режима

   Команда, состоящая из Тима Бернерса-Ли, Хенрика Фристика Нильсена и Николы Пеллоу, разработала простой браузер под названием Браузер линейного режима (Браузер линейного режима Libwww). Это был второй браузер, когда-либо созданный для World Wide Web.

6. 1991 август

   Виртуальная библиотека World Wide Web

   Создатель HTML и WWW Тим Бернерс-Ли составил первый индекс веб-сайтов под названием WWW Virtual Library . Гиперссылки были организованы в виде дерева категорий и подкатегорий в зависимости от отдельных областей человеческой деятельности или интересов.

7. 1991 6 августа ^-й

   Тим Бернерс-Ли создал первый веб-сайт

   Создатель Всемирной паутины (WWW), Тим Бернерс-Ли запустил первый в мире веб-сайт по адресу http://info.cern.ch/hypertext/WWW/TheProject .html . К сожалению, оригинальный сайт не сохранился до наших дней и по ссылке указана только его копия 1992 года.

8. 1991 29 октября ^-й

   Тим Бернерс-Ли опубликовал документ под названием HTML-теги

   Пионер Интернета Тим Бернерс-Ли опубликовал документ под названием HTML-теги . Документ содержал описание первых 18 тегов HTML: