Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
  1. Главная >
  2. Блог >
  3. Эволюция веб-дизайна — 20 лет за 5 минут!

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

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

Источник изображения

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

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

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

Античность: как выглядели сайты 90-х годов
Средневековье

Ренессанс

Эпоха Просвещения

Промышленная революция

Сегодня

Античность: как выглядели сайты 90-х годов

До конца 90-х годов прошлого века понятия «высокоскоростной» в применении к интернету просто-напросто не существовало. Было либо модемное соединение, либо никакого соединения. Поэтому первые сайты строились из расчета на совсем не космическую скорость. Они состояли практически целиком из текстового контента, а того, что мы сегодня называем «дизайн-макетом», попросту не существовало. Более поздние версии HTML позволяли применять некоторые дизайнерские приемы, но они относились к самому начальному уровню: с помощью тегов можно было определять величину, цвет и местоположение заголовков, абзацев текста и ссылок, т. е. осуществлять самую примитивную верстку.

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

Вот так выглядел практически каждый сайт в 90-е годы:

античность

Взгляд из 21 века:

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

Да, сегодняшние интернет-технологии позволяют новейшим браузерам обрабатывать сложнейшие мультимедийные веб-ресурсы, но все равно еще существуют ограничения, с которыми необходимо считаться. Большие мультимедийные файлы и тяжелый графический дизайн могут способствовать высоким показателям отказов (Bounce Rate) только потому, что веб-страница загружается не так быстро, как хотелось бы пользователям. Помните, что скорость загрузки до сих пор является одним из важнейших критериев качества сайта/лендинга, и используйте старый-добрый принцип «Делай проще!» (Keep it simple, stupid!; K.I.S.S.).

Средневековье

Подлинной чумой «средневекового» веб-дизайна были онлайн-конструкторы сайтов и GIF-файлы, используемые как «прокладки»/спейсеры для организации структуры веб-страницы. Тем не менее, к середине 90-х годов веб-дизайн развился как с точки зрения архитектуры сайтостроения, так и с точки зрения визуального представления контента. Для его оформления дизайнеры стали использовать табличную верстку, что обеспечивало больше возможностей для верстки страниц хотя бы в минимальном соответствии с правилами классической типографики и позволяло применять творческий подход к созданию веб-страниц.

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

средневековье

Глядя из 21 века:

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

Сегодня структура, или «анатомия» сайта/лендинга критически важна, когда речь идет о навигации, текстовом контенте, CTA-элементах. От визуальной иерархии элементов зависит то, как пользователь будет (и будет ли вообще!) взаимодействовать с вашей целевой страницей/сайтом. Возможно, эти соображения не стояли во главе угла во времена «средневековья» веб-дизайна, но сегодня они безусловно верны и важны.

Ренессанс

Ренессанс. Возрождение. Веб-дизайн пережил несколько эпохальных преображений, и одно из самых первых и значительных связано с внедрением технологии Flash, которая была разработана в 1996 году, но стала популярной пару лет спустя. Именно Flash открыл для дизайнеров целый мир возможностей, недоступных при использовании «чистого HTML». Тогда-то и состоялось «бракосочетание» виртуальной графики и интерактивности.

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

ренессанс

Глядя из 21 века:

С высоты сегодняшних дней мы можем констатировать, что повальное увлечение Flash с точки зрения SEO было одним из самых «страшных грехов» за всю историю Интернета. Хотя широкое использование мультимедийного контента предназначалось для привлечения как можно большего количества посетителей, достигнутый результат оказался прямо противоположным. Ненужное и неупорядоченное применение Flash губительно для SEO и юзабилити, так что лучше избегать его применения вообще, тем более что для воплощения подобных визуальных эффектов сейчас существуют альтернативные инструменты, например HTML 5 и JavaScript.

Эпоха Просвещения

Начало 2000-х принесло с собой распространение CSS — технологии каскадных таблиц стилей (не путать с табличной разметкой!), позволившей разделить контент и дизайн как составляющие веб-страницы. Это дало большую свободу творчества как дизайнерам, так и копирайтерам: контент теперь мог быть разработан отдельно от дизайна и наоборот.

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

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

Эпоха Просвещения

Глядя из 21 века:

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

Промышленная революция

Промышленная революция в веб-дизайне совпадает с началом эпохи Web 2.0: именно в это время начинается стремительное движение всех элементов Глобальной сети к состоянию современного Интернета. Рост количества мультимедийных приложений, распространение интерактивного контента, появление и триумф социальных сетей — вот несколько основных особенностей этого периода. Многие изменения были продиктованы именно логикой эволюции веб-дизайна.

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

Промышленная революция

Глядя из 21 века:

Ориентация ресурсов эпохи Web 2.0 на SEO требовала повышенного внимания к тестовому контенту. Так контент оказался в центре всеобщего внимания, а оптимизация ключевых слов, входящий и исходящий маркетинг, внешние ссылки и технологии синдикации, такие как RSS, стали естественными составляющими любой маркетинговой стратегии.

Сегодня

Сегодня, более чем через два десятилетия после публикации первого сайта, веб-дизайн прочно зарекомендовал себя как незаменимый компонент всякой удачной маркетинговой стратегии. С эстетической точки зрения актуальный дизайн характеризуется как крайне минималистичный, подчеркнуто «плоский» (прощайте, 3D-кнопки!), использующий комбинированную типографику и большие фоновые изображения.

сегодня

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

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

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

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

По материалам blog.hubspot.com

blog comments powered by Disqus
Возвращайте до 18% с пополнений рекламы
  • Все популярные рекламные сети в одном окне
  • Рекламные инструменты — бесплатно
  • Доступ к конструктору лендингов и WebApp-приложений
  • Закрывающие документы точно в срок
ring svg
copyright © 2011–2024 Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "Феникс-Маркетинг". ИНН:7725812838, КПП:772501001, ОГРН: 513774619323915280, Москва, ул. Ленинская слобода, д. 19, стр. 1, этаж/пом 3/25

ООО «Феникс-Маркетинг» — IT-компания с многолетним опытом работы, разрабатывающая инновационные решения для управления процессом лидогенерации (пост-клик маркетинг). Разработанное нами технологическое программное решение LPGENERATOR позволяет создавать целевые страницы в визуальном редакторе и управлять заявками (лидами) в CRM-системе в целях проведения эффективных, высококонверсионных рекламных кампаний