По мере приближения 2019 года, мы все полны ожидания о проектах веб-сайтов, которые мы увидим в следующем году.
В этой статье я исследую творческие тенденции, которые мы любили в прошлом году. Я также постараюсь сделать прогнозы о том, как эти тенденции эволюционируют или изменятся на 2019 год.
Чтобы проиллюстрировать свои очки, я имею в виду самые модные сайты от AWWWARDS последней коллекции. Кричите на этот удивительный ресурс! Я считаю, что веб-сайты, приведенные ниже, были созданы, чтобы качать Интернет в 2019 году!
Но прежде чем мы погрузимся, давайте поговорим о трех тенденциях, которые, я думаю, останутся неизменными в 2019 году.
1. ЧТО НЕ ИЗМЕНИТСЯ
1.1 мобильный-первый
Теперь это официально: есть больше людей, просматривающих веб-сайты с мобильных устройств, чем настольных компьютеров. В 2018 году мы стали свидетелями роста микро-взаимодействий, развертывания меню и пользовательских иконок. Эта тенденция не изменится, а только наберет обороты. В 2019 году вам больше не понадобится веб-сайт, который просто реагирует; вам понадобится тот, который является мобильным.
1.2 время загрузки
Это немного спорно. В 2018 году, многие эксперты полагали, что чистые минималистичные сайты будут принимать через интернет из-за их быстрой скорости загрузки. Но этого не произошло.
Вместо этого мы видим, как новые технологии адаптируют видео и фотоматериалы к потребностям мобильной эры. В 2019 году дизайнеры и разработчики продолжат искать компромисс между креативными проектами Java, полноформатным исходным контентом и уменьшенным временем загрузки.
1.3 чат-боты
Сайты электронной коммерции все равно нужно конвертировать в 2019 году, и чатботов зарекомендовали себя как эффективный способ сделать это. В 2019 году опыт онлайн-покупки будет продолжать стремиться к большей персонализации и более сложным технологиям AI. Таким образом, в 2019 году мы увидим более умные и интерактивные чат-боты на лучших веб-сайтах электронной коммерции.
2. ЧЕГО ОЖИДАТЬ В 2019 ГОДУ
Теперь перейдем к основным тенденциям веб-дизайна, которые мы ожидаем увидеть в 2019 году.
2,1 ПЛОСКО И НЕ-ТАК-ПЛОСКО
Плоский дизайн, как эстетика веб-сайта, был с нами с 2017 года и здесь, чтобы остаться. Веб-владельцы любят плоский дизайн для лучшего мобильного опыта и более высокого SEO ранга. Дизайнеры и пользователи пользуются гладкие макеты, яркие красивые изображения, и много пробелов.
Философия плоского веб-дизайна постулирует, что сайт с меньшим количеством изображений может быть столь же впечатляющим, как его изображение-тяжелый и медленный аналог загрузки с 2000-х годов.
Глядя на примеры ниже, кто бы не согласился?
Белоснежка.IO
Вот пример красиво сделанного плоского веб-сайта дизайна. Иллюстраций мало, но все они очень увлекательны. Когда вы путешествуете по веб-сайту, вы видите, что каждая новая страница имеет другую иллюстрацию. Традиционно для плоского дизайна есть достаточно пробелов и удобная навигация.
ДИЗАЙН В СИЛИКОНОВОЙ ДОЛИНЕ
Этот веб-сайт демонстрирует, какой плоский дизайн может обеспечить, если вы добавите к нему тяжелую анимацию и интерактивность. На страницах много текстур и красивых переходов. Зрители могут даже немного перегружены тем, что происходит на веб-сайте. Кажется, однако, что это именно то, что дизайнеры были после.
Полу-плоский подход позволяет добавить глубину и движение к вашим minimalistic дизайнам и иметь все преимущества квартиры с вами. В 2019 году мы увидим еще больше вариантов этого.
LO PESCE
Этот дизайн отличается удивительными композициями фотографий продукта с пользовательскими иллюстрациями, Параллаксом и приятными интерактивными элементами. Я также наслаждался анимацией, которая заставляет страницу чувствовать себя тяжелой и глубокой под вашим свитком. Здесь мы также можем увидеть, как далеко полу-плоский веб-дизайн достигнет в 2019 году.
2.2 ПЛАВАЮЩИЕ ЭЛЕМЕНТЫ
В 2019 году проекты веб-сайтов бросят вызов гравитации. Эта тенденция не совсем новая: мы все помним, что хаотические макеты уже были трендом в 2018 году. В следующем году мы увидим много интерактивных элементов, появляющихся здесь и там, меняя формы и ожидая, когда курсор наведет на них.
Открытые композиции также станут основным направлением веб-дизайна в 2019 году. Итак, приготовьтесь к тому, что дизайнеры бросают границы и оставляют на страницах интерактивные 3D-элементы.
ГРЕТА МАДЛИН
Здесь мы видим, как один интерактивный 3D-объект может установить тон для всего веб-сайта и добавить игривый край к нему. При переходе на другие страницы сайта вы увидите еще много креативных элементов дизайна. Он имеет симпатичную анимацию, эффекты прокрутки, иллюстрации ручной работы и смелые цветовые комбинации.
1948
Этот веб-сайт приглашает Вас использовать клавиатуру для создания звуковых эффектов и увидеть, как 3D-объекты танцуют в воздухе. Дизайн минималистичный и очень привлекательный. Он сочетает в себе различные виды общения с посетителями, поэтому вы просто не можете остановиться, пока не увидите все. В 2019 году сайты, которые предлагают такие уникальные впечатления, будут качаться в интернете.
2.3 геометрия
Так же, как цвета, формы могут быть использованы, чтобы сделать акценты и общаться идеи. Геометрия действует как компромисс между гармоничным минимализмом и сломанным асимметричным опытом. Оба будут популярны в 2019 году.
Формы могут добавить баланс в самых сумасшедших веб-дизайнов. Геометрия присутствует в различных элементах: кнопках, рамках или иллюстрациях. Каждая форма приносит около специфические ассоциации и имеет свою собственную смысль. При использовании мудро, формы могут стать ключевыми элементами дизайна сайта.
Давайте рассмотрим некоторые удивительные примеры.
TEDxBETHESDA
Полные текстуры и цвета, эти формы по центру приклеивают глаза зрителей к странице. Здесь геометрия используется для создания акцентов и намеков на большой Красный Крест на сцене TEDx. Оно совмещено с несимметричными решетками и славными предпосылками частицы.
CWORKS
В этом примере интерактивные фигуры используются для создания фонов и рамок изображений. В сочетании с яркими цветами и рассеянной типографикой эти элементы демонстрируют ключевые тенденции 2018-2019 годов. Обратите внимание, как красиво линии используются для выделения вкладок меню.
СМУЛТРОН
Здесь мы видим красивую анимированную фигуру, которая реагирует на движение курсора. Как ключевой элемент, эта взаимодействующая форма устанавливает тон для всего вебсайта. Я также люблю геометрию вдохновил иконы и четкость этого дизайна.
2.4 ВИДЕО ФОНЫ
Видео фоны сейчас несколько менее популярны, чем в 2016 году из-за возросшей важности скорости загрузки. Однако в 2019 году мы увидим эволюцию интеграции видео в веб-дизайн. Это происходит потому, что видео фоны доказано, чтобы увеличить конверсии веб-сайтов. Зрители будут придерживаться вокруг, чтобы посмотреть видео, если он захватил их внимание. Вы также можете рассказать всю историю бренда одним видео без использования каких-либо слов вообще.
Давайте посмотрим, как эти веб-сайты это делают.
ЖИВАЯ ПАМЯТЬ
Этот веб-сайт объединяет видео-интро, фоновую музыку и широкоформатные фотографии. У портретов захватывает дух и высокое разрешение. Кликабельные старые школьные фотографии, используемые в качестве значков вкладки меню дополняют дизайн. При всем этом, это видео, которое объединяет все элементы дизайна и рассказывает уникальную историю.
ДЕСКЕНТЕ FUSIONKNIT
Видео на главной странице этого сайта задает тон и вызывает эмоциональную реакцию со стороны аудитории. Вы просто не можете остановить наблюдать эти ткани будучи связыванными и части будучи зашитым совместно. Это то, как вы делаете визуальное повествование продукта. На сайте также представлены нерегулярные сетки и сложные слоистые макеты.
2.5 РАЗБИТЫЕ СЕТКИ
Любовь к асимметрии началась в 2018 году и останется с нами в 2019 году. Сетки, которые мы все использовали, чтобы помочь добавить контент на веб-сайт в согласованном и последовательном порядке. Макеты с сетками выглядят симметрично и структурировано. Есть способ, с помощью которого такая предсказуемость облегчает потребление информации.
Тем не менее, новая тенденция использования асимметричных сеток и создания «сломанного» опыта для зрителя находится на пике. Дизайнеры прослоили модули, цвета, и текстуры содержания для того чтобы достигнуть влияния глубины. Этот динамизм помогает привлечь зрителей и подчеркнуть наиболее конверсионные разделы сайта.
Кстати, наличие сломанной сетки не тождественно отсутствию структуры вообще. Небрежные веб-сайты все еще не в тренде.
MATHIEU LEVESQUE
Когда вы прокручиваете вниз этот веб-сайт, вы видите асимметричные модули, движущиеся с разной скоростью, и подписи, поднимающиеся и исчезающие из поля зрения. Когда фотография встречается с текстом, Тип меняется, как будто скрывается за фотографией.
Эти эффекты делают сайт как асимметричным, так и гармоничным. У зрителя складывается впечатление, что воспринимаемый хаос этого макета очень тщательно продуман.
FEMME И ОЖЕСТОЧЕННЫЕ
Этот дизайн сочетает в себе брутализм, асимметрию и анимированную прокрутку. В результате мы видим очень сбалансированный и минималистичный веб-сайт с юношеским краем.
Тип шрифта старой школы и розоватая палитра балансируют дизайн, делая его более шикарным. При наведении курсора на каждую фотографию продукта отображается анимация, включающая созданные пользователем значки. Сайт выглядит как классический модный журнал, который был переделан для молодой и жестокой аудитории.
2.6 ВЫРАЗИТЕЛЬНЫЕ ТИПЫ
Смелые шрифты уже довольно давно качают дизайн сайта. Кроме того, мы видим много разрушенных, грязных, 3D-заполненных или обрезанных типов. Более крупный, чем жизнь, текст и смелые шрифты задают атмосферу сайта и создают акценты там, где они вам нужны.
Геометрические типы придают дизайну ультрасовременный вид. Четкие и минималистичные, они могут компенсировать сложность макетов и анимации, используемых в одном дизайне.
Рукописные типы, в свою очередь, добавить уютную и очаровательную атмосферу на веб-сайте. Они используются в сочетании с элементами эскиза, мультяшными иллюстрациями или сами по себе. В 2019 году мы увидим их смелыми, выразительными и асимметричными.
LA ROULOTTE
Здесь мы видим удивительное сочетание нерегулярных анимированных макетов, геометрических фигур, брутализма и, конечно, типов выражений. Конструкция создает импрессивный сломленный опыт. Обратите внимание, как буквы обрезаются и разбросаны по макетам.
Красный цвет делает Тип еще более выразительным. Кроме того, обратите внимание, как красиво логотип сочетает в себе геометрическую форму с обрезанными буквами.
ГОРНЫЙ ЧЕЛОВЕК ГРУППА
Эта Домашняя страница имеет большие рукописные письма, сделанные нерегулярным, небрежным образом. При прокрутке вниз отображается анимированный текст, отрисованный в виде геометрических типов и отбеленных фоновых изображений. Цветовая палитра потрясающе приглушена. Дизайн выглядит теплым и уютным, приглашая посетителя остаться подольше и хорошо провести время.
2.7 ПОВРЕЖДЕННЫЕ, МНОГОСЛОЙНЫЕ ИЗОБРАЖЕНИЯ
Общая тенденция к уничтожению всего-от фона до типографики включает в себя ломать и экспериментировать с фотографиями. То, что было бы немыслимо несколько лет назад, как поврежденное фото персонажа на главной странице — будет видно на многих веб-сайтах в 2019 году.
Мало того, что веб-дизайнеры повреждают и сбивают изображения, они также пишут над ними и помещают все виды элементов над фотографиями, чтобы добавить сложность. Перекрывающиеся элементы, двухтоны и беспорядок все еще будут в тренде в 2019 году.
КИОТО-ОКАДЗАКИ МЭЙДЗИ САКАБА
Сложный дизайн этой домашней страницы имеет асимметричные изображения, разделяющие красную цветовую палитру и перекрывающиеся с ошибочными формами. Дизайнер использует яркие красные и приглушенные бежевые цвета и смелые простые типы.
Если вы прокрутите вниз, будет больше геометрии, глюк и выразительные рукописные шрифты. В целом, веб-сайт завораживает.
ADIDAS ЖЕНЩИНЫ
Большой раскол на изображении выглядит как разбитое зеркало и заставляет нас видеть изображения в два раза. Остальная часть дизайна выглядит очень минималистично — с большим количеством пробелов и более традиционной типографики. В результате все виды приклеиваются к видео так, как будто они отображаются на сломанном мониторе.
2.8 ХАОТИЧЕСКИЕ ИНТЕРАКТИВНЫЕ ТЕКСТУРЫ
Когда дело доходит до фонов и текстур, то же “brokenness” тенденция, без сомнения, применяются. В 2019 году мы все еще увидим много сепии и микро-поврежденных или отбеленных фонов.
Дизайнеры используют как изношенные текстуры, так и футуристические анимированные узоры. Там в основном нет правил. В последнее время, по мере того, как тренд интерактивности веб-сайта также набирает обороты, мы видим все больше и больше интерактивных анимированных текстур. Мы также увидим много встроенных видео, которые служат в качестве текстурированных фонов, а не традиционный элемент повествования.
ЧЕЛОВЕК ВСЕГДА
С приятной приглушенной цветовой палитрой и микропаттернами, которые выглядят как поврежденная текстура, этот дизайн выглядит глубоким и вдохновляющим. Также много геометрия в конструкции: edgy прямоугольники совмещены с жидкими округленными формами для того чтобы создать сложность.
Есть минималистичный вид бокового меню и ползунок вниз по странице. Благодаря такой комбинации элементов, сайт выглядит как экспериментальный и укоренены в традиции.
КАПЕЛЬНОЕ ПОП
Этот сайт выглядит вкусно и ярко. Дизайнеры использовали хаотические анимированные узоры в качестве текстуры фона на главной странице. Перед прокруткой вниз сайта, Вы пауза, чтобы увидеть больше из этих удивительных цветовых капель.
Внизу страницы есть анимированные реалистичные фотографии. На фоне плоского дизайна страницы, они выглядят огромными и вкусными. Сочетание материального дизайна, горизонтальных ползунков и сложной анимации захватывает внимание и не отпускает.
РАЗЛИЧЕНИЕ АГЕНТСТВО
Интерактивные проекты будут везде в 2019 году. На этом сайте мы видим удивительный пример анимированной текстуры, которая меняет цвет и раскрывает фотографии. Дополненная нейтральной типографикой и минималистичной панелью меню, эта масштабная текстура выглядит потрясающе.
Когда вы нажимаете на одно из выделенных слов в заголовке, раскрывается новый плоский и минималистский макет. Здесь мы видим традиционные анимированные формы на светлом фоне.
2.9 МЕЧТАТЕЛЬНЫЕ ЦВЕТА
В 2018 году мы увидели много цвета в веб-дизайне, и тенденция здесь, чтобы остаться. Яркие цветы использованы в более традиционных плоских конструкциях или более глубоких semi-плоских планах. Не менее популярными будут радужные палитры и глубокие, приглушенные пастели.
В следующем году цветовые комбинации будут напоминать радуги и градиенты, которые были так популярны в 2018 году. Когда они могут, дизайнеры двинут далеко от традиционных цветов к их более ярким или более глубоким эквивалентам.
В то же время мы ожидаем появления бежевых палитр, используемых в сочетании с более яркими цветами и анимированными элементами.
LE PETIT NANTAIS
Удивительный пример интерактивного плоского дизайна, который сочетает в себе многие тенденции, которые мы увидим в 2019 году. Изображение персонажа представлено в ярких контрастных цветах, есть яркие иконки и анимированный свиток.
Когда вы нажимаете на вкладку меню, красочный и анимированный переход переносит вас на другую страницу. Медленно плавающие элементы создают глубокое ощущение, которое уравновешивает плоские иллюстрации.
МЕДЛЕННЫЙ БАНАН
Здесь у нас есть еще одно сочетание ярких цветов и страстного образа персонажа на главной странице. Ниже, есть несколько плоских макетов дизайна, каждый с одноцветным ярким фоном и смелой типографикой. Простота этого сайта делает его еще более удивительным.
2.10 БРУТАЛИЗМ
В 2019 году мы будем все больше напоминать о заре интернета через брутализм в веб-дизайне. Те, кто устал от чистых плоских макетов, будут наслаждаться жестокими макетами прямо из девяностых.
На этих веб-сайтах будет слишком много эффектов наведения, анимации, микро-взаимодействий, больших типов, массивных изображений и веб-безопасных цветов. Они не предназначены для того, чтобы быть максимально функциональными; они предпочитают перегружать и впечатлять. Все будет просто немного сверху: цвета будут конфликтовать, слова будет трудно читать, а содержание будет организовано хаотично. И конечно, будет много черного и белого.
ЭРИК БЕРНАЧЧИ
Вы слышите звук интернет-коммутируемого? Я чувствовал себя очень ностальгическим (и старым), глядя на этот сайт. Дизайнер сочетает в себе старые-школа web безопасные цвета с наивной анимацией и удивительными значками.
Этот дизайн кажется жестоким и сентиментальным одновременно. Каждый элемент был тщательно разработан, чтобы соответствовать всей картине старого сайта с ироничным краем к нему.
РОМЕН ГРАНАИ
Это еще один вариант брутализма с особым уклоном. Мы видим много сбоев, так как это было модно в течение 2018 года. Они подкреплены массивной типографией и довольно порочными эффектами прокрутки. Этот дизайн переполняет и оставляет неизгладимое впечатление. Там также мобильная версия, убедитесь, что вы проверить его!
2.11 РИСОВАННЫЕ ИЛЛЮСТРАЦИИ
Акварельные иллюстрации, пастели и эскизы не являются чем-то новым в веб-дизайне. В 2019 году мы увидим их еще больше. Уникальные рисунки станут еще более сложными, динамичными и интерактивными. Если в 2017 году достаточно было создать оригинальный рисованный дизайн для вашего сайта, то теперь иллюстрации должны привлекать зрителей и реагировать на их действия.
Использование иллюстраций на сайте должно быть последовательным. Вы не можете поместить хороший рисунок здесь и там и назвать его днем — все типографика, микро-анимация и фоны должны вписываться в один опыт.
A + SMITH CREATIONS
Этот красивый черный веб-сайт имеет элегантную иллюстрацию на главной странице. Когда вы прокручиваете вниз, один из его элементов выходит на первый план и получает окруженный текстом.
Этот сайт выглядит как художественно, так и минималистично. Элементы CTA выделены с красным цветом и другие линии остают светлыми и тонкими. Логотип компании имеет похожие волнистые линии и выступает хорошим акцентом в этом дизайне.
ИСТОРИЯ АМЕРИКАНСКОЙ МУЗЫКИ
Вот совершенно другой веб-сайт, который использует рисованные иллюстрации как элементы дизайна, так и элементы повествования. Прокручивая вниз, вы раскрываете временную шкалу американской музыки, показанную в удивительных интерактивных иллюстрациях. Вы также можете запустить джазовый плейлист прямо на сайте, чтобы получить полное впечатление.
2.12 интерактивность
Как вы, вероятно, заметили из приведенных выше примеров, веб-проекты включают в себя создание более сложных и динамических впечатлений для пользователей. Мы увидим много интегрированных видео, микро-взаимодействия, анимированный свиток и т.д. Новые технологии анимации, такие как SVG, означают, что при просмотре на мобильном экране не будет потери качества анимации.
Мусор 31
Этот удивительный сайт украинской креативной команды выводит интерактивность на новый уровень. Вы погружаетесь в опыт с первых секунд. Чтобы войти на сайт, нужно опустошить мешок с мусором ножом. Затем, сайт приглашает вас найти место для переработки различных видов мусора.
Дизайн очень минималистичный, основной акцент сделан на интерактивной и функциональной части. Ничто не отвлекает Ваше внимание от главной задачи-найти правильное место утилизации.
КОКОН
Опыт на этом сайте начинается с простого, но прекрасного взаимодействия, где вы выбираете раздел, который вы хотите ввести. Этот дизайн также имеет красивые анимированные переходы. Они варьируются от страницы к странице и делают время, которое вы проводите на веб-сайте, еще более привлекательным.
Есть также динамические сетки, пользовательские иконки, и много хорошего фото Контента, чтобы усилить впечатление. Сайт выглядит гладким и технологичным.
2.13 ОЛДСКУЛ И ГЕЙМ
Тенденция brutalism идет рука об руку с тенденцией создания проектов, которые напоминают старые видеоигры. Даже не-геймеры будут чувствовать себя сентиментальными, когда они увидят Nintendo-подобные элементы на веб-сайте. Эти астетические пяди через поколения и дают шаловливый край к любой конструкции.
Когда анимированные и интерактивные, игровые элементы погружают зрителей в опыт Nintendo. Таким образом, можно легко увеличить время, которое посетители проводят на сайте.
ВСЕ
Этот сайт предоставляет все основные тенденции 2018-2019 годов в одном пакете. Это побуждает пользователя к взаимодействию и созданию творческого вызова. Затем пользователь получает приглашение на четкий одностраничный веб-сайт с бруталистом и Nintendo-Like feel to it.
В дизайне много микро-взаимодействий, смелых анимированных букв, мультяшных иконок и всплывающих окон, и приятная рукописная типографика здесь и там. Огромный логотип на главной странице взаимодействует с вами, когда вы парите над ним.
PRAZE OR HAZE TRUMP
Хотя довольно спорный, этот дизайн предлагает Вам возможность играть с персонажем, который напоминает известного политика. Этот забавный сайт, кажется, направлен на снижение идеологического и политического давления через имитацию видеоигр. Но тем не менее, этот дизайн очень соответствует тенденциям, которые мы увидим в 2019 году.
2.14 3D ОБЪЕКТЫ
За последние два года использование 3D-элементов в веб-дизайне стало обычной практикой. В 2019 году дизайнеры будут интегрировать 3D-объекты в сложные слоистые макеты и сделать их интерактивными.
Грань между реальными объектами и их 3D аналогами более размыта, чем когда-либо. Также, динамические элементы 3D будут двигать больше и больше естественно для того чтобы создать ровный органический опыт. Естественные материалы и круглые формы будут воодушевлять больше и больше дизайнеров 3Д в 2019.
БЕДНЫЕ НАРОДНЫЕ КАБАКОВЫ
Здесь у нас есть красиво слоистый дизайн домашней страницы с небольшими 3D-объектами, которые выступают в качестве текстуры. Под 3D-рисунком есть большой Заголовок, скользящий в виде и видео фон. Такой сложный опыт мы будем ожидать от веб-сайта в 2019 году.
Сайт имеет как-то хаотичное чувство к нему. Есть изображения появляются нерегулярно и текст наложения их в некоторых местах, но общее впечатление от современного шедевра веб-дизайна.
Подпись ESPN NBA движется
В этом примере мы видим историю баскетбола, рассказанную с использованием гладких 3D-фигур игроков НБА. Этот дизайн отличает все важные тенденции 2019 года-яркие цвета, большие типы, интерактивность и интеграция видео.
Ну, я думаю, что это все. Я надеюсь, вам понравилось это читать и видеть вас в 2019 году!