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

Posted on by riasevastopol

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

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

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

  • Первое чувство имеет значение, либо Из-за чего серьёзен качественный дизайн
  • Муха на писсуаре, либо 5 правил убеждающего веб-дизайна

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

Античность: как смотрелись сайты 90-х годов
Средневековье
Ренессанс
Эра Просвещения
Промышленная революция
Сейчас

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

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

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

  • Копирайтинг: 8 кейсов из настоящей практики
  • 40% вашего контента отправляется «впустую»

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

Вот так смотрелся фактически любой сайт в 90-е годы:

Взор из 21 века:

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

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

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

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

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

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

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

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

  • 5 обычных неточностей навигации сайта

Ренессанс

Ренессанс. Восстановление. Веб-дизайн пережил пара эпохальных преображений, и одно из самых первых и больших связано с внедрением разработки Flash, которая была создана во второй половине 90-ых годов XX века, но стала популярной несколько лет спустя.

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

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

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

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

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

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

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

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

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

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

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

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

  • Как навести порядок на целевой странице, либо О важности пробелов
  • Привлеките внимание за счет дизайна, либо Принцип 3W!

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

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

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

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

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

  • Реализовывающий контент — 7 уроков от Apple

Сейчас

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

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

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

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

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

По данным blog.hubspot.com

Случайные статьи:

С чего начать развитие начинающему в веб-дизайне?


Подборка похожих статей:

riasevastopol

More Posts