Веб-дизайнер либо разрабатывает идею и концепцию дизайна сайта полностью самостоятельно, учитывая требования заказчика (цвет, стиль и тому подобное). Либо может предложить дизайн-решение на основе шаблонов, включая, как лично разработанные дизайнером темы, так и использование тем Wordpress, Joomla, Drupal или конструкторов сайтов из разряда Wix или Gator. Современные технологии помогают грамотно разработать дизайн сайта, при этом экономя время, деньги и другие ресурсы.

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

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

Первые сайты и подход к их оформлению

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

• тегами можно было определять величину, цвет и местоположение заголовков;
• а также абзацев текста и ссылок;
• такого понятия как «дизайн страницы» еще не существовало;
• функции ранних сайтов сводились к представлению только текстовой информации.

Позже для оформления сайтов начали использоваться:

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

Начало 2000-х: CSS, Javascript и семантическая вёрстка

Ранние 2000-е принесли с собой распространение CSS — технологии каскадных таблиц стилей, которая позволила разделить контент и дизайн, как отдельные составляющие веб-страницы. К слову, Microsoft Internet Explorer 5 стал первым браузером, который на 99% поддерживал CSS1. Внедрение CSS характерно такими особенностями:

• Цвет фона и размер текста, указывались в таблице стилей, а не в HTML разметке. Это облегчило контроль над единым внешним видом сайтов, независимо от их содержания;
• зародились практики интуитивного понятного размещения контента (параграфы, списки, буллеты), визуального выделения ссылки:
• как можно более простая навигация;
• выросли требования к размещению и типографике текстового контента.

Также этот период характерен появлением Javascript, альтернативы таблицам для создания макетов. Используя Javascript, дизайнеры могли анимировать меню без Flash, вычислять данные. В 2002 году почти все сайты использовали Javascript. Характерные элементы дизайна:

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

В середине 2000-х появилась семантическая вёрстка — создание веб-страниц таким образом, чтобы сайт воспринимался поисковыми машинами так же, как человеком:

• способ научить машины понимать человеческие запросы;
• выполнять трудоемкие и времязатратные функции без усилий со стороны пользователя;

Несмотря на то, что разработчики не добились запланированных результатов, было разработано много технологий, чтобы усовершенствовать семантическую сеть. К примеру: RDF, XML, OWL, N-triples, Turtle, N3.

Интерактивный контент и веб-приложения

2004-2006 год характерны началом эпохи Web 2.0:

• стали отдавать предпочтение глянцевости иконок и кнопок, тени и мягким цветам интерфейсов;
• важный упор на читаемый и функциональный контент и интеграция в ресурсы анимационного контента;
• интерактивный контент, который меняется без обновления страницы;
• появились мощные приложения для обработки фото, видео и других типов контента;
• сфокусировались на публикации контента (статьи, графика и т.д.);
• HTML5 становится главной альтернативой Flash и другим средствам разработки.

2007- 2010 годы: мобильный веб, длинные макеты сайтов и зарождение скевоморфизма

В 2008 году появляется развитие мобильных веб-приложений и первые мобильные веб-сайты:

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

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

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

Считается, что компания Apple стала законодателем моды на скевоморфизм и элементы веб 2.0, которые впервые были замечены на их их сайтах и приложениях.

Что было еще характерно для этого периода:

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

2010-2014 годы: плоский дизайн, минимализм и появление Bootstrap

В 2010 году Microsoft представил свой новый дизайн, который радикально отличался от прошлого. Основной упор делался «плоские» элементы и типографику, в отличие от прежних, «иконочных» интерфейсов. Так же как и Apple тоже начали вводить элементы минимализма, что быстро подхватили все и это переросло в тренд.

Для 2011 года характерно проявление реализма, это отобразилось на таких трендах:

• использование натуралистичных текстур (дерево, кожа, трава, ткань);
• приглушенная цветовая гамма;
• трехмерность, тисненная типографика, ленточки, цветочки, графские печатки;
• прорисовка каждой иконки, каждого объекта, чтобы добиться максимального сходства с объектами действительности.

Вышедший в августе 2011 года Bootstrap, поначалу планировался для облегчения жизни программистам фронт-энда, а по сути стал одним из самых незаменимых наборов инструментов для веб-дизайнеров. Основные инструменты Bootstrap:

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

Другие особенности периода:

• борьба между скевоморфным и плоским дизайнами достигла своего апогея и стала самой обсуждаемой темой среди дизайнеров в 2013 году. Аргентинское агентство In tacto даже выпустило на эту тему игру;
• 2014 год — Google Material Design — слайдгайд от Гугл, который благодаря этому стал законодателем мод в дизайне приложений, для которых предназначался стайлгайд: все в интерфейсе выглядит и ведет себя, как бумага, отбрасвающая тень, когда один лист располагается над другим;
• большие видео на фоне сайтов;
• много иконок (в целом плоские, но с тенями, складками и «глубиной»);
• интересная типографика и ориентация на печатный дизайн.

2015-2020 год: новые возможности для веб-дизайнеров

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

Период с 2015 по 2019 года имел такие тенденции:

• текст поверх изображения;
• изображения, которые перекрываются;
• несимметричные модульные сетки в галереях
• вертикальный текст и минималистичные макеты;
• изображения с большими заголовками;
• абстрактные брендированные элементы;
• соответствие оформления существующей или создаваемой дизайн-системе (типографика, паттерны, иконки, цвета, графики, звуки, контент);
• полигональные формы и геометрические фигуры, толстые, контрастные линии для привлечения дополнительного внимания; отсутствие границ, многослойность, интерактивность (или тактильность);
• UX-контент, который сливается с созданным пользовательским сценарием в заглавиях, блоках, формах кнопках;
• картинки с большой детализацией, анимация и полный моушн;
• появление semi-flat, UX/UI и большой типографики.

Заключение

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