Эволюция дизайна сайтов! 20 лет

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

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

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

Античность

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

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



Взгляд из 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 с лишним лет — каждый элемент дизайна создается для того, чтобы донести контент до пользователя наиболее эффективным и эффектным способом. Именно в нашу эпоху графика сталa по-настоящему доступным, удобным, максимально адаптированным под запросы целевой аудитории способом внедрения оффера в рамках выбранной маркетинговой стратегии.

В свою очередь, мы готовы предложить вам современные готовые решения в IDEA-MARKET

Источник: Myia Kelly