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

Сегодня нашу жизнь уже проблематично вообразить вне ключевых веб-технологий: языка разметки HTML, каскадных таблиц стилей CSS, языка программирования JavaScript. В интернет-среде мы сталкиваемся с ними каждый день, наше мышление и взаимодействие с миром в значительной степени структурируется через эти инструменты, вне зависимости от того понимаем ли мы как они функционируют. В этом тексте Нона Аракелян кратко описывает историю становления веб-дизайна и перечисляет ключевые инструменты современного разработчика, которые студенты Школы дизайна, учащиеся на профиле «Дизайн и программирование» осваивают в первый год обучения.

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

Уже к началу 1990-го года, Тим Бернерс-Ли (на тот момент — сотрудник ЦЕРН, Европейского Центра ядерных исследований) создал все необходимые инструменты для рабочего Интернета: протокол передачи гипертекста (http), языка разметки гипертекста (HTML), первый веб-браузер (названный WorldWideWeb), первый http-сервер программного обеспечения. 6 августа 1991 года Бернерс-Ли опубликовал на нем свой первый сайт — описание новой технологии World Wide Web.

В сентябре 1995 года в Netscape Navigator 2.0 появился Javascript, задуманный Бренданом Эйхом как серверный язык. 7 декабря 1996 года была принята первая версия СSS, как рекомендация W3C. 18 мая 1998 года принята вторая версия CSS. Так благодаря CSS, сайты за 1995-2000 годов пестрили яркими красками, как павлины. Так собрался базовый набор, для создания сайта, актуальный и по сей день: Интернет + HTML + CSS + JS и магическая пыльца для кода, чтоб ничего не сломалось.

Веб-дизайн стал более интерактивным и динамичным с начала 2000-х годов. Это было также связано с появлением JavaScript, который позволил внедрять анимацию и интерактивность в архитектуру сайтов. К 2010 году HTML5 стал популярным, благодаря своей широкой поддержке и лучшим возможностям для SEO (поисковым запросам).

Начало эпохи Web 2.0 обыкновенно относят к 2000-2004 годам, времени когда интерфейсы стали более мягкими, появились скругления углов, по сей день используемые в вебе. Одной из первых, в 2006 году появилась техника адаптивной раскладки Марка ван ден Доббельстина. С развитием мобильных устройств и появлением планшетов, веб-дизайнеры стали использовать адаптивный дизайн, чтобы создавать сайты, которые автоматически подстраиваются под размер экрана устройства. Что улучшало пользовательский опыт и часто приводило к увеличению времени, проведенного пользователем на сайте. В то же время разрабатываются первые социальные сети и, как следствие, получает распространение размещение их иконок на сайтах. Активно внедряются длинные макеты сайтов.

С течением времени изменялся дизайн приложений. В июле 2008 года корпорация Apple анонсировала появление Apple App Store — каталога приложений для iOS. Несколько позже появился и Google Play. Изначально в каталогах было минимум программ, но спустя некоторое время количество приложений увеличилось до сотен тысяч. Сегодня в App Store около полутора миллионов программ, а в Google Play и того больше — около 1,6 млн.

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

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

К 2018 году стал стремительно набирать популярность стиль, основанный на использовании flat-картинок. За последние годы мы пережили эпоху Glass morphism и Neu morphism. К 2021 появился тренд на 3D который не стихает по сей день, даже несмотря на трудоемкость подобной разработки. И хотя подобные дизайнерские находки не прижились полностью, из-за сложности в реализации, но повлияли на индустрию. Огромный прорыв в начале 2020-х произошел благодаря Figma — анимированный прототипы стали более доступными, а компонентный подход стал нормой.

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

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

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

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

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

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

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