50 правил этикета для онлайн бизнес-встреч
Previous
выбрать за меня
10 бесплатных шаблонов для Instagram Stories
Next
вебсайт, дизайн, ретро девяностые
Юзабилити

Эволюция веб-дизайна. Инфографика

Автор: Мария Гольтяпина28.08.2017

26 лет. Более четверти века. Вот сколько времени прошло с момента публикации первого веб – сайта в 1991 году. С тех пор веб-мастера создали баннерную рекламу, всплывающие окна, CAPTCHA, социальные сети и бесчисленные строки кода, которые мы сегодня используем с HTML5, CSS и JavaScript.

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

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

Вместо того, чтобы посещать Spotify или Soundcloud, чтобы прослушать музыку, мы просто получим доступ к нашему плейлисту через виртуальную стереосистему, и, пока играет музыка, будем наслаждаться ритмичной вибрацией индивидуально подобранной к треку 3D-проекции…

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

эволюция, веб-дизайн, история

Эволюция веб-дизайна.

Ранние 90-е

Текстовые сайты

  • Ведущий стиль. Первые сайты ранних 90-хх были одноколоночными текстовыми страницами, созданными в HTML.
  • Характерные элементы дизайна. Сайты выглядели как набор текстовых документов связанных друг с другом внутристрочными ссылками. динамических элементов ещё не было даже в мыслях.
  • Значимые достижения. В 1991 году Тим Бернерс-Ли запустил первый вебсайт. В 1994 году был образован Консорциум всемирной паутины.

Середина 90-х

Сайты на основе таблиц и онлайн конструкторы страниц

  • Ведущий стиль. Таблицы позволили создавать сайты в несколько колонок, что расширило возможности текстовой модели, улучшило организацию контента и систему навигации.
  • Характерные элементы дизайна. Фоновые изображения часто нарезались на части и вставлялись в таблицу. Хороший дизайн часто уступал тому, что выглядел наиболее продвинуто. Фреймовый метод стал популярным для отделения тела сайта от боковой навигации. Внизу страниц стали появляться визуальные счётчики посещений. Анимированный текст и GIF-картинки стали повсеместно плясать на веб-страницах.
  • Значимые достижения. Flash была представлена Macromedia в 1996 году. Бесплатные конструкторы сайтов, такие как Angelfire, GeoCities и Expages позволили каждому, имеющему доступ в Интернет, создать свой собственный сайт.

Конец 90-х

Расцвет Flash

  • Ведущий стиль. В конце 90-хх популярность среди дизайнеров завоёвывает Flash. Сайты становятся комбинацией из табличного стиля и flash-элементов.
  • Характерные элементы дизайна. Водные страницы с flash-анимацией скачущих и светящихся логотипов компании, часто предшествовали её основному сайту. Flash-элементы навигации, которые меняли цвет и размер, когда пользователь на них нажимал.
  • Значимые достижения. Язык для динамичного веб-дизайна набирает популярность после выхода версии PHP3 в 1998 году.

2000-й год

CSS покоряет веб

  • Ведущий стиль. Каскадные таблицы стилей (CSS) позволяют дизайнерам отделить содержимое сайта от его дизайна. При использовании CSS элементы дизайна страницы, такие как цвет фона и размер текста, указывались в таблице стилей, а не в HTML разметке. Такая разработка облегчила контроль над единым внешним видом сайтов, независимо от их непосредственного содержания.
  • Характерные элементы дизайна. CSS существовали ещё с конца 90-хх, но 2000-й год стал моментом, когда Сеть увидела в них потенциал.
  • Значимые достижения. В 2000-ом году Microsoft Internet Explorer5 стал первым браузером, который на 99% поддерживал CSS1.

Ранние 2000-е

Расцвет Javascript

  • Ведущий стиль. Веб дизайнеры стали отказываться от таблиц и использовали Javascript для создания макетов. Javascript был одной из первых успешных попыток внести в веб интеллект. Используя его, дизайнеры могли анимировать меню без Flash, вычислять данные и т.п.
  • Характерные элементы дизайна. Элементы навигации начали сдвигаться на верх страницы. Выпадающее меню стало популярным вариантом для навигации. Начали появляться формы для заполнения. На первый план выходит контент от пользователей, который позволяет им создавать собственные профили, дневники и фото-коллекции.
  • Значимые достижения. В 2000 г. WC3 рекомендовала использовать второе издание Javascript, а в 2002-м почти все браузеры уже поддерживали его.

Середина 2000-х

Семантическая сеть

  • Ведущий стиль. Семантическая вёрстка – это подход к создание веб-страниц, нацеленный на то, чтобы сайт воспринимался поисковыми машинами так же, как человеком. WC3 видела семантическую сеть как способ научить машины понимать человеческие запросы, и выполнять трудоёмкие и времязатратные функции, чтобы удовлетворить их без усилий со стороны пользователя. Разработчики хотели добиться результата, вставляя считываемые машинами мета-данные о страницах и их взаимосвязях в гиперссылки, позволяющие компьютерам лучше понимать Сеть.
  • Характерные элементы дизайна. Несмотря на то, что семантическая сеть не существует пока в том виде, в каком задумывалась, многие технологии были разработаны, чтобы усовершенствовать её. Например: RDF, XML, OWL, N-triples, Turtle, N3.

Поздние 2000-е

WEB 2.0

  • Ведущий стиль. В поздние 2000-е дизайн повернулся в сторону интерактивного контента и веб-приложений. Оценившие WEB 2.0 дизайнеры часто используют асинхронный JavaScript и XML (AJAX) для плавного перехода контента и разработки приложений.
  • Характерные элементы дизайна. Интерактивный контент, который меняется без обновления страницы. Мощные приложения для обработки фото, видео и других типов контента заполнили интернет. Дизайн больше сфокусировался на публикации контента (статьи, графика и т.д.), чем на продаже. Соцсети привлекают пользователей и мотивируют их делиться контентом.
  • Значимые достижения. HTML5 становится главной альтернативой Flash и другим средствам разработки.

Мобильный веб

  • Ведущий стиль. В 2008 г. выход в Интернет с мобильных устройств впервые опередил выход с десктопных. С тех пор всё больше сайтов стало иметь альтернативную “мобильную” версию для пользователей со смартфонов. Мобильные версии содержат базовые элементы основного сайта и доносят до пользователей топовый контент и мобильные функции, доступные на их устройствах.
  • Характерные элементы дизайна. Веб-сайты имеют скорее вертикальный, чем горизонтальный формат. Навигация минималистична и представляет основные части сайта. Мобильные сайты часто обращаются к устройству, чтобы определить местоположение, движение и т.д. Эти данные нужны для того, чтобы предложить пользователю услуги на месте: например, отзывы о ресторанах или купоны на скидки.
  • Значимые достижения. Развитие смартфонов и планшетов стимулировало популярность мобильного интернета. Две трети пользователей мобильных телефонов говорят, что они заходят с них в Интернет и E-mail.

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

Реакция на статью
поделюсь
8%
интересно
38%
полезно
15%
не уверен
38%
скучно
0%
где автор?
0%
Мария Гольтяпина
Рисую и адаптирую инфографику. Читаю, размышляю, действую.
Комментарии
Оставить отзыв

You must log in to post a comment

ПОДПИСЫВАЙТЕСЬ НА НАС!
ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
  Мы ненавидим спам и никогда не разгласим ваши данные.