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