Когда появился веб дизайн

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

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

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

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

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

Тёмный век веб-дизайна (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 пустым. Именно тогда и происходила основная эволюция.

Эволюция веб-дизайнера: история профессии и современные тренды

Инструменты веб-дизайнера непрерывно меняются. Если дизайнер не хочет остаться без куска хлеба — важно держать руку на пульсе и следить за трендами.

Поделиться
Поделиться

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

A/B-тестирование от Flocktory: быстрый запуск тестов и оптимизация вашего сайта для роста конверсий

A/B-тесты — инструмент продуктового и маркетингового тестирования контента и функциональности сайта с комплексной аналитикой результатов. С помощью этого инструмента вы сможете менять содержимое сайта на основе лучших практик Flocktory и кастомных гипотез, которые мы поможем сформулировать. А также повысить конверсию сайта и сэкономить время продуктовых и технических команд. Тестирование и оптимизация сайта проходят без вовлечения вашей IT-команды, а результаты тестов доступны в личном кабинете в реальном времени. Узнать больше про A/B-тесты →

Реклама. ООО «Флоктори». ИНН 9709082176. ОГРН 1227700349271

World Wide Web

В 1990 году мир увидел первую веб-страницу — info.cern.ch. На сайте был лишь текст и ссылки. Первая версия HTML не позволяла визуализировать веб-страницы и придавать им индивидуальный лоск. Сплошь «текстовые» сайты просуществовали до 1994 года. Первые веб-дизайнеры — это люди без художественного образования, но умеющие писать на HTML. Первый сайт В 1993 году появляется первый браузер с поддержкой графики — NCSA Mosaic, а спустя ещё 3 года — каскадные таблицы стилей (CSS), позволившие форматировать сплошной текст. Браузер NCSA Mosaic Стало интересней, но у руля веб-дизайна по прежнему стояли люди с не лучшим вкусом. Этот период в разных источниках описывают как «волну либерализма» и «буйство цветов». У кого ярче, тот и лучший дизайнер! Веб-дизайн проходил долгий и тернистый путь эволюции, которая сформировала стиль «скевоморфизм». Требования к дизайнеру можно было сформулировать так: «Веб-дизайнер должен уметь пользоваться специальным программным обеспечением, знать принципы вёрстки и уметь их применять самостоятельно».

Photoshop и UI/UX

Adobe Photoshop стал популярен среди дизайнеров с самого его появления. Созданный изначально для полиграфии и фотообработки, он стал незаменимым инструментом для дизайна. Несмотря на множество функций в растровой графике, дизайнеры 90-х использовали Photoshop чаще, чем Illustrator, созданный для векторной. Более 20 лет Adobe занимал роль монополиста в своей сфере. Photoshop v.1.0.7 С появлением Photoshop и развитием скоростного интернета появился «скевоморфизм». Дизайнеры наделяли интерфейсы внешними свойствами объектов материального мира. В это время набирают популярность flash-технологии. Многие сайты напоминали арт-объекты. Надо сказать, в этом был свой шарм. Уметь верстать было необязательно, так как дизайнерам приходилось решать всё больше визуальных задач. Оказалось, выгоднее оптимизировать работу и разделить задачи на двух разных людей — верстальщика и дизайнера. Важно было уметь пользоваться всеми возможностями Photoshop и Illustrator. Чтобы верстальщик смог работать в паре с дизайнером, последний должен был понимать вёрстку. А уже после к этому добавилось требование понимания пользовательских сценариев и поведения человека на сайте.

И понеслась

Скорость интернета продолжала расти, сайты — усложняться, и начали появляться веб-сервисы. Теперь мы используем предварительный этап создания прототипа — прототипирование и продумывание взаимодействия. С развитием мобильного интернета появляются адаптивные сайты. В США процент посещений со смартфона превалирует над десктопным. Требование к дизайну сайта — сначала должна быть создана хорошая мобильная версия, затем десктопная. Как следствие, нужно уметь создавать адаптивные сайты. App Store захлестнуло лавиной приложений, и вместе с тем он стал катализатором появления всё новых. Мы увидели вакансии «дизайнеров мобильных приложений». На смену скевоморфизму приходит flat-дизайн, а вслед за ним материал-дизайн. Появившийся в 2008 году Sketch как простая и понятная программа для дизайнеров на Mac набирает популярность. Sketch Материал-дизайн в Windows Появление микро-анимации добавило пункт — дизайнеру нужно продумывать всё: как и что будет двигаться, работать, сосуществовать. Появляются инструменты создания сайтов без участия разработчиков. Такие инструменты ещё несовершенны, но позволяют создавать рабочие прототипы и проверять многие идеи без задействования лишних рук..

Чего ждать в ближайшем будущем

Требования к дизайнеру зависят от целей компании. Но редко встречаются дизайнеры, которые обладают всеми перечисленными навыками одинаково хорошо. Чаще они хороши в чём-то одном, и именно этим они ценны. Думаю, что в будущем, с ростом технологий виртуальной реальности, интерфейсы перейдут в 3D. Уже сейчас создаются сайты под VR. Пока что это арт-пространства, но кто знает, как это будет развиваться? А дальше, возможно, частично исчезнут визуальные интерфейсы. Сегодня мы слышим, как на конференциях говорят о нейроинтерфейсах. Но наиболее развиты сейчас голосовые помощники. Возможно, в ближайшем будущем пользователю не нужно будет уже ничего вводить и искать на сайте. Надев очки, достаточно будет сказать виртуальному помощнику, что вам нужно. Читайте также: Ликбез для веб-дизайнера: 24+ ресурса для просвещения и вдохновения Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на 42@cossa.ru. А наши требования к ним — вот тут.

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

В 2023 году почти 6 миллиардов человек в мире пользуются интернетом. Для нас стало привычно видеть красивые и функциональные сайты, которыми мы пользуемся каждый день. Некоторые уже забыли, а многие и не застали момента, когда всё только начиналось и когда интернет выглядел совсем не так, как сейчас. Давайте разберемся: погрузимся в историю веб-дизайна, изучим его корни и важные этапы развития.

7.3K показов
1.4K открытий
С чего всё началось

Когда мы говорим об истории веб-дизайна, невозможно не упомянуть историю появления самого интернета. Истоки всемирной паутины уходят в 1960-е годы, когда исследовательские организации и университеты стали искать способы связи компьютеров для передачи данных и совместной работы. В 1969 году Министерство обороны США представило первый прототип интернета – ARPANET. На его запуск потребовалось более 10 лет.

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

Интерфейс одного из первых почтовых клиентов – Laurel, выпущенного в 1979 году

В 1989 году британский ученый Тим Бернерс-Ли создал язык гипертекстовой разметки – HTML (HyperText Markup Language). Он был предназначен для того, чтобы облегчить создание, оформление и связывание документов в Интернете. Ключевая идея была в том, что документы содержат ссылки (гиперссылки), которые позволяют пользователям легко переходить между страницами.

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

Вместе с HTML Бернерс-Ли также разработал другие ключевые технологии, такие как URL (Uniform Resource Locator) для идентификации ресурсов в Интернете, а также HTTP (Hypertext Transfer Protocol) для передачи данных. Все эти стандарты существуют по сей день и являются основой современного веба.

1991 – Самый первый веб-сайт

В 1991 году тот самый Тим Бернерс-Ли создал первый веб сайт. Сайт был доступен по адресу info.cern.ch, а самая первая страница состояла из простого текста и ссылок. Бернерс-Ли разместил на этой странице информацию о том, как использовать интернет, как создавать веб-страницы, а также представил ссылки на другие исследования, связанные с World Wide Web. Этот сайт был внутренним ресурсом для сотрудников CERN (Европейская организация по ядерным исследованиям), где Тим работал, однако он быстро стал доступен и для публичного использования. Кстати, этот сайт всё ещё можно посетить.

После этого стало появляться всё больше подобных веб-страниц. Что касается дизайна этих сайтов – он был далеко не главным фактором. В дизайне использовался простой белый фон и синие ссылки для выделения текста, по которым можно было производить клики. В качестве шрифтов использовались шрифты без засечек (sans-serif), такие как Arial или Helvetica, поскольку они считались более читабельными на экране компьютера, особенно при отображении небольшого текста. На выбор влияли два фактора – ограниченные технологии и стремление сделать текст максимально понятным для пользователя.

1992-1994 – Первое фото и цветной интернет

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

«Les Horribles Cernettes» было одним из первых цветных фото, загруженных в интернет. Оно стало известным после того, как Тим Бернерс-Ли опубликовал на сайте CERN фото, на котором были изображены четыре вокалистки из группы Les Horribles Cernettes. Все девушки работали в ЦЕРН и участвовали в различных мероприятиях центра.

Одно из первых фото в интернете, 1992

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

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

Чуть позже на сайтах начали появляться GIF-изображения. Это дало возможность добавлять движение и динамику на веб-страницы, что сделало сайты еще более интересными для пользователей.

Пример сайта из начала 90-х

1995 – появление JavaScript и HTML 2.0

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

JavaScript (переводится как «язык сценариев») был создан Бренданом Эйхом в 1995 году. Компания Netscape, популярная в то время, хотела добавить интерактивность в свой браузер Navigator. Эйху было поручено создать такой язык программирования, который смог бы работать внутри браузера и обеспечивать взаимодействие пользователя с веб-страницами.

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

Домашняя страница браузера Netscape Navigator, август 1995

Вслед за JavaScript в конце 1995 года появился HTML 2 – это вторая версия языка гипертекстовой разметки HTML.

Также в HTML 2 были введены некоторые атрибуты, которые позволяют контролировать отображение элементов и взаимодействие с ними. Например, были добавлены атрибуты align для выравнивания содержимого элемента, border для задания границ таблицы, и type для указания типа вводимых данных в форме. Эти атрибуты помогают более гибко настраивать внешний вид и поведение элементов.

Изначально для обмена данными между серверами существовал протокол HTTP – по нему данные отправлялись в незашифрованном виде. Это было не безопасно, потому что данные можно перехватить. Поэтому в 1994 году был разработан новый протокол – HTTPS, в него добавили криптографическую технологию SSL, в которой все данные шифруются. Это важно для таких вещей, как онлайн-банкинг, покупки и другие действия, когда вы не хотите, чтобы ваша личная информация была видна другим.

Первое упоминание UX

В 1995 году Дон Норман, известный специалист в области человеко-компьютерного взаимодействия, опубликовал книгу «Дизайн эрудиции» (The Design of Everyday Things), где он вводит термин «user experience». Норман подчеркивал, что UX должен быть сфокусирован на потребностях пользователей и должен включать в себя удовлетворение их ожиданий. Можно сказать, с этого началась история UX/UI дизайна.

1996 – появление CSS

CSS (Cascading Style Sheets) был представлен в декабре 1996 года и стал новой вехой в развитии веб-дизайна. Он предоставил базовые возможности для стилизации и декорирования элементов на странице.

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

1996 – Flash

Adobe Flash – мультимедийная платформа для создания веб-приложений или мультимедийных презентаций. Flash был создан компанией Macromedia (позднее приобретенной Adobe) в 1996 году и сразу же стал революционным инструментом веб-дизайна. Он позволял создавать интерактивные и мультимедийные элементы на веб-страницах, такие как анимации, игры, видео и звуковые эффекты.

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

Flash-анимационное видео “Badger song”, ставшее мемом в 2003 году

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

Кто помнит неприятное уведомление в браузере о том, что для воспроизведения видео или игры необходимо установить Флеш плеер? �� Как хорошо, что технологии развиваются, и это в прошлом. Но о причине окончательного прекращения поддержки Flash расскажем чуть позже.

1997 – Сайты приобретают свою структуру

В период с 1997 сайты стали приобретать более организованный и удобный для пользователя вид. Они начали строиться на основе макетов, что позволяло создавать более структурированные и логичные веб-страницы. Навигация стала более явной и удобной, появились иконки, которые помогали пользователям быстрее ориентироваться на сайте.

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

1998 – Google и SEO

В 1998 году произошло знаменательное событие – Ларри Пейдж и Сергей Брин зарегистрировали домен google.com и запустили свою поисковую систему. Она обеспечивала более точные и релевантные результаты по сравнению с уже существующими на тот момент поисковыми системами. Google получил огромный успех и быстро стал самой популярной и используемой поисковой системой в мире.

Запуск Google привел к появлению SEO, процесса оптимизации веб-сайтов для улучшения их ранжирования в поисковых системах. В начале 2000-х годов веб-мастера и оптимизаторы начали изучать алгоритмы поисковых систем, чтобы понять, как страницы оцениваются и ранжируются. С тех пор началась гонка за первые места в поисковой выдаче, и продолжается она и сейчас.

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

2000-е – Зарождение адаптивного дизайна

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

2003 – WordPress

Со временем всё больше компаний стали создавать свои сайты для бизнес-целей. Появилась потребность в системах управления контентом (CMS).

WordPress – это система управления контентом на сайтах (CMS), разработанная в 2003 году. Его создателем является Мэтт Малленвег, который впоследствии основал компанию Automattic для развития и поддержки WordPress.

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

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

2004 – Соцсети. Web 2.0

В 2004 году веб-сайты стали набирать еще большую популярность, и именно в это время появились первые социальные сети – Myspace и Facebook. Наступила эпоха самовыражения и онлайн-общения. Тренд на переписку в соц. сетях повлиял на веб-дизайн, поскольку появился огромный рынок для продвижения рекламы, виджетов для веб-сайтов, а также графики и изображений для социальных профилей.

Источник: www.telegraph.co.uk

Этот период также принято считать периодом зарождения Web 2.0. Web 2.0 – это термин, который обозначает более интерактивную и социально-ориентированную версию Веба, появившуюся в начале 2000-х годов.

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

Еще одной характеристикой Web 2.0 является более динамический и интерактивный контент. Технологии Ajax (Asynchronous JavaScript and XML) и Flash позволили создавать более динамичные и богатые визуально веб-приложения, которые предоставляют более пользовательские интерфейсы и больший уровень взаимодействия.

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

2006-2010

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

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

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

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

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

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 лет.

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

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

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

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