Тренды веб дизайна 2020: 10 трендов веб-дизайна на 2020 год

Содержание

10 трендов веб-дизайна на 2020 год

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

Содержание статьи

Два основных направления

1. Тренды дизайна в сфере eCommerce
2. Тренды отзывчивого дизайна

1. Яркие цвета + простота
2. Анимации, интегрированные gif и динамические иллюстрации
3. Асимметричные макеты
4. Громкая типографика
5. CSS Grids
6. Масштабируемая векторная графика
7. Нарисованные от руки изображения
8. Голосовые интерфейсы
9. Искусственный интеллект и передовые технологии машинного обучения
10. Брутализм в веб-дизайне
Заключение

Два основных направления

Можно заметить, что некоторые из трендов недавнего прошлого, такие как градиенты, к примеру, вновь становятся актуальными (хотя на этот раз эти самые градиенты приняли вид динамических градиентов). Это означает, что если плоский дизайн слегка ослабит свою хватку, вместе с трудно различимыми контурными кнопками (ghost buttons), которые уже всем надоели. Динамические градиенты, в свою очередь, могут заполонить собой все веб-пространство — по крайней мере, на некоторое время.

Но опять же, благодаря таким пионерам индустрии, как Google и Apple, поддерживающими flat-дизайн, в этом году в концепцию минимализма, наконец, может проникнуть глубина и цвет. За последние пару месяцев стало очевидно, что плоский дизайн может пополниться всплесками более глубоких и заряженных энергией оттенков.

В любом случае, в 2020 году подавляющее большинство дизайнеров и разработчиков будут фокусировать свое внимание на двух группах трендов веб-дизайна:

1. Тренды дизайна в сфере eCommerce

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

2. Тренды отзывчивого дизайна

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

Во всем мире на мобильный сектор приходится около 52% всего веб-трафика. К концу 2019 года 63% всех пользователей мобильных телефонов будут осуществлять выход в интернет, главным образом, через свое мобильное устройство. Следовательно, более подходящего времени, чтобы сосредоточить свое внимание на главных адаптивных тенденциях дизайна, наверное, и не будет.

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

Но что всех нас ожидает в ближайшие пару лет?

1. Яркие цвета + простота

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

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

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

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

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

Вечеринка на крыше + жареная курочка

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

Вечер у костра + сыр на гриле

Сам дизайн при этом остается предельно простым. Подобная простота сама по себе является одним из популярных трендов в среде eCommerce последних лет.

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

Читайте также: 8 ярких цветовых трендов 2019 года

2. Анимации, интегрированные gif и динамические иллюстрации

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

Очевидно, что людей раздражают не сами ролики: разного рода динамические изображения пользуются популярностью у пользователей всех возрастов — а именно долгая загрузка страниц. Что же следует предпринять в данной ситуации?

Использовать анимации, конечно же.

Есть несколько способов, где и как вы можете задействовать этот формат:

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

В будущем году особое внимание будет уделено мобильной анимации.

Ориентация на мобильные экраны (так называемый mobile first) уже некоторое время является трендом веб-дизайна, и это доминирование мобильных устройств (их превалирование над десктопом) будет только усиливаться, мотивируя дизайнеров как можно плотнее заниматься разработками мобильных анимаций и их всесторонним развитием.

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

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

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

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

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

Тем не менее, есть много способов использовать анимацию для установления и укрепления отношений с клиентами.

Читайте также: 75 инструментов веб-анимации, которые вам нужно испробовать

3. Асимметричные макеты

Просто задумайтесь.

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

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

Но забывать об осторожности все же не стоит.

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

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

Насколько это смелое решение (и как быстро, в хорошем смысле, все на сайте образует беспорядок?).

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

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

Читайте также: Как использовать симметрию и асимметрию в дизайне лендингов

4. Громкая типографика

Типографика как искусство оформления текста не станет в 2020 году чем-то принципиально новым. Между тем нужно отметить, что в настоящее время наибольшее предпочтение отдается шрифтам без засечек (san-serif), поэтому если вы хотите выделиться на фоне конкурентов, в будущем году стоит разменять традиционные шрифты на что-то более смелое и дерзкое, то, что трудно будет не заметить.

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

Стоит отметить, что набирают популярность так же и вариативные шрифты.

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

Взгляните на пример вариативного шрифта от блога Typekit:

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

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

Также очень важно сохранить баланс между «громкой» типографикой и мобильной отзывчивостью. Проблема в том, что типографику, которая удачно смотрится на десктопных экранах, как правило, трудно вписать в крошечный экран мобильных устройств. А размениваться мобильными посетителями в 2020 году все же не стоит. Как уже было отмечено выше, их просто больше.

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

Читайте также: Анатомия шрифта: визуальный гайд по типографике

5. CSS Grids

Этот тренд веб-дизайна предназначен для решения проблем с адаптивным дизайном:

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

И хотя с 2017 года всем известно, что в интернет люди чаще выходят со своих смартфонов и планшетов, чем с ноутбуков и ПК, отмахиваться от того, что способен предложить умный CSS grid все же не стоит, ведь это, бесспорно, прекрасный вариант, который позволит на базе одного сайта создавать множество его версий, соответствующих размеру экрана пользователя (вместо того, чтобы делать только мобильный или только десктопный сайт). С точки зрения конечного пользователя это, безусловно, одна из самых важных тенденций адаптивного дизайна последних лет.

Как уже упоминалось ранее, объемы мобильного веб-трафика уже превзошли традиционный настольный трафик на большинстве ключевых мировых рынков. Достаточен тот факт, что сам Google продолжает демонстрировать сильную приверженность мобильным веб-сайтам.

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

Читайте также: Почему LPgenerator не использует адаптивный дизайн для шаблонов лендингов

6. Масштабируемая векторная графика

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

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

Недавно стало известно, что в скором времени для ранжирования веб-сайтов Google будет использовать результаты мобильной индексации.

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

И тут пора вспомнить про такой формат, как SVG.

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

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

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

Читайте также: Как и когда использовать самые распространенные форматы графических файлов

7. Нарисованные от руки изображения

По мере того, как все большее число веб-мастеров начинает воспринимать сайты как нечто большее, чем просто адрес в интернете, рисованные элементы, которые делают эти самые сайты уникальными и необычными, будут встречаться все чаще.

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

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

Все просто — нарисованные от руки картинки обладают человеческим обаянием и теплотой.

Вы можете использовать такие рисунки, чтобы просвещать, привлекать и очаровывать, источая индивидуальность и обаяние:

Разумеется, вы всегда можете использовать в своем дизайне 4K-изображения и мотивирующие фото, но, тем не менее, важно не упускать один ключевой факт: веб-дизайн 21-го века часто оказывается слишком совершенным.

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

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

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

Читайте также: 7 советов по созданию рисованной анимации

8. Голосовые интерфейсы

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

Пользователи устройств, на борту которых располагаются такие виртуальные смарт-помощники, как Алиса, Siri, Google Now и Cortana, уже давно предпочитают взаимодействовать с ними и искать что-либо в интернете при помощи голоса. А все потому, что говорить непосредственно в устройство гораздо удобнее, нежели набирать запросы вручную. И если веб-разработчики адаптируют свои интерфейсы под голосовое взаимодействие, то смогут привлечь внимание более занятой аудитории.

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

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

ожидается, что к 2022 году голосовой шопинг перешагнет отметку в 40 миллиардов долларов;
по всему миру объемы поставок смарт-колонок выросли почти на 200% в 3 квартале 2018 года;
ожидается, что к 2022 году 55% всех домохозяйств обзаведутся смарт-колонками;
65% пользователей от 25 до 49 лет говорят со своими голосовыми устройствами по крайней мере один раз в день;
61% пользователей от 25 до 64 лет отмечают, что в будущем планируют использовать свои голосовые устройства чаще.

Однако крупный бизнес не спешит внедрять голосовые интерфейсы. Но, судя по данным исследований, это лишь вопрос времени. Не за горами эра, когда именно голос будет основным вариантом ввода/управления для рядового пользователя.

Читайте также: 4 тренда digital-маркетинга, которые встряхнут 2019

9. Искусственный интеллект и передовые технологии машинного обучения

Гигант от мира социальных сетей Facebook встретил 2018 год заявлением о том, какие тенденции развития социальных медиа будут актуальны в будущем году. Среди прочих были названы дополненная реальность, искусственный интеллект и машинное обучение.

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

Продвинутое машинное обучение поможет веб-мастерам, веб-разработчикам и дизайнерам UX / UI получать информацию о пользователе на основе их истории браузера и местоположения, к примеру.

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

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

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

10. Брутализм в веб-дизайне

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

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

В качестве хорошего примера можно вспомнить округлые дизайны Google.

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

Сайт дизайнера Atelier Florian Markl в стиле брутализм

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

Короче говоря, такие сайты по-брутальному оригинальны.

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

Читайте также: Брутализм и антидизайн

Заключение

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

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

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

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

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

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

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

По материалам: sondoramarketing.com Изображение: pixabay.com

28-11-2019

10 трендов веб-дизайна на 2020 год

Содержание статьи

Два основных направления

1. Тренды дизайна в сфере eCommerce
2. Тренды отзывчивого дизайна

Два основных направления

1. Тренды дизайна в сфере eCommerce

2. Тренды отзывчивого дизайна

Но что всех нас ожидает в ближайшие пару лет?

1. Яркие цвета + простота

Вечеринка на крыше + жареная курочка

Вечер у костра + сыр на гриле

Читайте также: 8 ярких цветовых трендов 2019 года

2. Анимации, интегрированные gif и динамические иллюстрации

Использовать анимации, конечно же.

Есть несколько способов, где и как вы можете задействовать этот формат:

В будущем году особое внимание будет уделено мобильной анимации.

Читайте также: 75 инструментов веб-анимации, которые вам нужно испробовать

3. Асимметричные макеты

Просто задумайтесь.

Но забывать об осторожности все же не стоит.

Насколько это смелое решение (и как быстро, в хорошем смысле, все на сайте образует беспорядок?).

Читайте также: Как использовать симметрию и асимметрию в дизайне лендингов

4. Громкая типографика

Стоит отметить, что набирают популярность так же и вариативные шрифты.

Взгляните на пример вариативного шрифта от блога Typekit:

Читайте также: Анатомия шрифта: визуальный гайд по типографике

5. CSS Grids

Этот тренд веб-дизайна предназначен для решения проблем с адаптивным дизайном:

Читайте также: Почему LPgenerator не использует адаптивный дизайн для шаблонов лендингов

6. Масштабируемая векторная графика

И тут пора вспомнить про такой формат, как SVG.

Читайте также: Как и когда использовать самые распространенные форматы графических файлов

7. Нарисованные от руки изображения

Все просто — нарисованные от руки картинки обладают человеческим обаянием и теплотой.

Читайте также: 7 советов по созданию рисованной анимации

8. Голосовые интерфейсы

ожидается, что к 2022 году голосовой шопинг перешагнет отметку в 40 миллиардов долларов;
по всему миру объемы поставок смарт-колонок выросли почти на 200% в 3 квартале 2018 года;
ожидается, что к 2022 году 55% всех домохозяйств обзаведутся смарт-колонками;
65% пользователей от 25 до 49 лет говорят со своими голосовыми устройствами по крайней мере один раз в день;
61% пользователей от 25 до 64 лет отмечают, что в будущем планируют использовать свои голосовые устройства чаще.

Читайте также: 4 тренда digital-маркетинга, которые встряхнут 2019

9. Искусственный интеллект и передовые технологии машинного обучения

10. Брутализм в веб-дизайне

В качестве хорошего примера можно вспомнить округлые дизайны Google.

Сайт дизайнера Atelier Florian Markl в стиле брутализм

Короче говоря, такие сайты по-брутальному оригинальны.

Читайте также: Брутализм и антидизайн

Заключение

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

По материалам: sondoramarketing.com Изображение: pixabay.com

28-11-2019

Тренды веб-дизайна 2020: модное и значимое

Что объединяет два высказывания: «62% людей поколения Z чувствуют себя постоянно одинокими» и «PANTONE 19-4052 Classic Blue приносит ощущение мира и спокойствия человеческому духу»? Их объединяет 2020 год и понятие трендов. Что сейчас понимают под термином «тренд»? Как он изменился после пандемии и о чем стоит думать при работе над сайтом проекта, чтобы сделать его удобнее, понятнее и глубже?

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

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

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

Модные тренды веб-дизайна

Визуальные тренды веб-дизайна, как и все модное, меняются достаточно часто и с виду – без всякой системы. В начале каждого года сайты и группы дизайн-сообществ начинают пестрить заголовками «10 трендов веб-дизайна этого года». Примеры таких трендов.

Темный фон.
Сложные градиенты и свечения.
Мягкие тени и парящие элементы.
Большие размеры и крупные (bold) шрифтовые начертания.
Использование 3D-графики.
Появления контента и анимации по скроллу или другим действиям пользователя.
Графика, нарисованная от руки.
Подчеркнутое наложение слоев.
Много белого пространства.
Минималистичная навигация.

Можно подумать, что тренды создают громкие имена, а остальные в большей или меньшей степени им следуют. В реальности, если посмотреть на видео и статьи с модными веяниями веб-дизайна, скорее возникает вопрос: «А кто все эти люди?». Дело не в том, что модных трендов в веб-дизайне нет, а скорее в том, что вы вряд ли сможете о них узнать из подобных материалов в сети.

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

«Быть не в тренде» – главный модный тренд.
Алексей Полеухин, сооснователь студии и школы «Гонзо-дизайн».

Значимые тренды веб-дизайна

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

Инклюзивная доступность

Скриншот сайта с адаптивным дизайном организации heart n soul, работающей в основном с людьми с особенностями развития.

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

Например, с позиций визуального мы можем иметь дело с частичной или полной слепотой (постоянное ограничение), конъюнктивитом (временное) и с водителем транспорта, у которого внимание сконцентрировано на дороге (ситуационное). В помощь всем участникам процесса (дизайнерам, программистам, проджект-менеджерам) по созданию доступных сайтов приходит чеклист от Vox Media.

Использование визуальных конструкторов и редакторов

Скриншот проекта «Бужение земли» про природу женщины, выполненного на сайте-конструкторе Readymag.

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

Сложно рекомендовать сайт на конструкторе для сверхответственных и масштабных проектов, но если вы хотите быстро, экономично и эффектно запустить лендинг, то, возможно, стоит теперь посмотреть в сторону визуальных конструкторов Tilda, Readymag, Wix, Webflow, нежели классических WordPress, Drupal, Joomla и Bootstrap?

Содержание, созданное пользователями (User-generated content – UGC)

Скриншот сайта UGC-проекта «Generations stories», разработанного на основе фотографий, присланных участниками проекта.

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

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

Защита персональных данных

Мультимедийный проект «История кражи личных данных».

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

Социальная ответственность

Скриншот сайта проекта «CONVERTER», созданный «Гонзо-дизайн» для пивоваренной компании HEINEKEN, которые совместно с институтом «Гармония» уже десять лет ведут социальную программу «Я за себя отвечаю».

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

Психологическое здоровье пользователей

Скриншот инструкции по созданию разных типов домика от ИКЕА, запущенной в период карантина #явдомикеИКЕА.

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

Да, возможно, вашей организации и вашим подопечным сейчас тяжело даже больше других, но, если нужно получить поддержку аудитории, то коммуникацию необходимо уводить в другую плоскость. Помните, что сделала компания Coca-Cola в годы Великой депрессии? Вместо того чтобы во внешних коммуникациях продвигать идею экономии (как делали все остальные), они переизобрели Санта-Клауса и стали продвигать идею праздника.

Дистанционная устойчивость

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

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

Качественное содержание

Скриншот сайта проекта «Being», реализованного большой командой, включая авторов из Центра документальной фотографии «4Plus».

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

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

Ссылки и материалы по теме

от тёмной цветовой схемы к моушн-дизайну — CMS Magazine

Какие тренды в веб-дизайне будут на пике популярности в следующем году? Мы в дизайн-студии Магвай неустанно следим за всеми новшествами и с радостью подготовили перевод статьи от экспертов Envato (Envato — австралийская it-компания, которая управляет 8-ю интернет-сервисами, ориентированными на продажу графического контента, такого как: шаблоны для веб-дизайна, графические элементы, 3D-модели и т.д).

Профессионалы из Envato рассказывают о главных тенденциях, на которые следует обратить внимание в 2021 году.

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

Тёмная цветовая схема

Коллаж

Антидизайн

Минимализм

Органический дизайн

Иллюстрации

Функциональность, инклюзивность и доступность

Моушн-дизайн и интерактивность

3D и геометрический дизайн

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

И всё же — от тёмной цветовой схемы до интерактивности: какие популярные тренды в веб-дизайне покорят интернет в следующем году? Мы спросили экспертов из Envato, что отличало классный сайт в 2020, а также их мнение о последних и наиболее удачных тенденциях в веб-дизайне, на которые следует обратить внимание в 2021 году.

Больше не нужно искать и обзванивать каждое диджитал-агентство

Создайте конкурс на workspace.ru – получите предложения от участников CMS Magazine по цене и срокам. Это бесплатно и займет 5 минут. В каталоге 15 617 диджитал-агентств, готовых вам помочь – выберите и сэкономьте до 30%.
Создать конкурс →

Тёмная цветовая схема

Тёмная цветовая схема — главная страница Apple

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

Что такое тёмная цветовая схема?

Тёмная цветовая схема — главная страница Clock Strikes Twelve

Крупные бренды, такие как Apple, Hublot, и отдельные дизайнеры, например, Clock Strikes Twelve, для своих продуктов и портфолио используют тёмный фон, так как это отличный способ сделать сайт современным и элегантным. Помимо того, что дизайнеры могут в этом случае поиграть с разными элементами, такими как пастель или неон (два главных тренда 2020 года), исследования также показали, что тёмный режим меньше расходует заряд устройства, кроме того, он лучше подходит для восприятия, поскольку уменьшает негативное воздействие синего цвета на глаза.

«Похоже, сегодня появляется больше продуктов, которые имеют в настройках тёмный режим или ориентированы только на тёмную цветовую схему, это продиктовано исследованиями, в которых изучили воздействие яркого синего света на человека, а также на время автономной работы батареи», — говорит UI-дизайнер из Envato Шон Фихан.

Тёмный режим не только лощёный, элегантный и приятный для глаз, он также увеличивает контраст и делает элементы дизайна более заметными. Вы даже можете добавить на свой сайт переключатель тёмного режима, как показано в этих примерах от Johny Vino, Koos Looijesteijn и Adrian Verde Studio, чтобы посетители могли настраивать сайт под себя.

Переключатель режима — главная страница Johny Vino

«По моему мнению, тёмный фоновый режим — определённо тенденция, которая оказала наибольшее влияние на веб-дизайн в 2020 году, — говорит UX-дизайнер из Envato, Талия Джаннополас. — Благодаря тому, что тёмный режим стал популярным, я уже видела несколько сайтов, где был добавлен переключатель (от светлого к тёмному). Это великолепно и в тоже время так просто, когда пользователь может выбрать настройки, основываясь на своих предпочтениях».

Всё больше и больше неоморфных вариантов с противоречивым UX-дизайном, основанным на скевоморфизме и flat дизайне (такие примеры часто встречаются в интерфейсе iOS или Android), включают опцию тёмного фона, несмотря на то что изначально создавались с использованием исключительно белых и светлых цветовых схем.

Коллаж и смешанные техники

Коллаж — главная страница City Circus

Коллаж — одна из самых популярных тенденций этого года в графическом дизайне и в социальных сетях, этот тренд быстро завоевал популярность и в мире веб-дизайна. Смешанная техника снова в центре внимания благодаря художникам из мира digital и инфлюенсерам, его также приняли многие бренды и веб-дизайнеры, включая Chobani, City Circus и Urban Outfitters.

Что же такое коллаж?

Коллаж — страница бронирования City Circus

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

Теперь, когда коллаж перешёл в цифровую сферу, он эволюционировал, появились новые элементы: анимированные коллажи, огромные декоративные шрифты, художественные текстуры (такие как мазки кистью) и даже анимированный искажённый текст, всё это даёт невероятные результаты.

«Я думаю, что концепция смешения разных средств будет только набирать обороты в 2021, — говорит Талия. — Многие уже сейчас используют приложения для рисования на iPad и цифровые кисти, имитирующие традиционные краски (например, акварель, масло, гуашь), границы цифрового искусства меняются. Кроме того, удобно, что такие произведения уже на цифровом устройстве, их не надо сканировать или фотографировать, а значит, ими проще делиться в интернете».

Коллаж — главная страница Urban Outfitters

Коллаж — это тренд, который хорошо сочетается с минималистичным UX-дизайном или даже антидизайном, если вы готовы выйти за рамки привычного. Интеграция смешанной техники и коллажей в дизайн вашего сайта — хороший способ добавить яркости и креативности и таким образом выделить свой бренд.

Антидизайн

Антидизайн — главная страница Roze Bunker

Предупреждение: мы знаем, что этот тренд не для каждого!

Если 2020 год нас чему-то и научил, так это отбросить все правила и ожидания. Антидизайн — это тенденция, которая возникла в результате возрождения брутализма в 2019 году, а в последнее время противоречивый стиль просочился в области социальных сетей и поп-культуры, а также в веб-дизайн и графический дизайн.

Антидизайн — главная страница Play Type

Что такое антидизайн?

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

Антидизайн — главная страница XXIX

Многие профессионалы сейчас увлечены странным миром антидизайна, один из примеров — хаотичный, но причудливый сайт голландского бренда Roze Bunker и дизайн-студий Play Type и XXIX. Даже австралийский музыкант Flume решился на такой яркий, смелый и брутальный подход для своего сайта. Несмотря на то, что подобный тренд всегда выделяется среди множества конкурентов (надеемся, что в положительном смысле), эффективный веб-дизайн всё-таки про баланс. Если вы действительно хотите попробовать антидизайн, важно позаботиться, чтобы интерфейс вашего сайта оставался простым, функциональным и удобным для пользователя.

Антидизайн — главная страница Dynamic MTL

«Я думала, что популярность антидизайна постепенно упадёт, но сейчас считаю, что он эволюционирует вместе с трендом на использование смешанных техник, — говорит Талия. — Я встречала много разных сайтов, где изображения накладываются друг на друга, смешиваются шрифты с засечками и шрифт san serif, а также нетрадиционным способом используется анимация. Тем не менее, благодаря отличному UX они прекрасно работают».

Минимализм

Минимализм — Главная страница ETQ

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

Минимализм — главная страница Huge Inc.

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

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

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

Органический дизайн

Органический дизайн — главная страница Ora

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

На органический дизайн влияет повышенное внимание к экологии и защите окружающей среды, отсюда тёплые землистые цвета, естественные формы и необработанные органические текстуры — как это видно на сайтах от Ora Floral Agency, A Better Source и Abbotsford Convent в Мельбурне.

Органический дизайн — страница сайта Abbotsford Convent

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

Органический дизайн — веб-страница A Better Source

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

Иллюстрация

Иллюстрация — Главная страница AHM

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

Как и органический дизайн, иллюстрации отлично подходят для того, чтобы добавить оригинальности сайту, они создают ощущение уюта и располагают пользователя. Так как в 2020 фокус был на разнообразии, то многие иллюстраторы теперь изображают необычных людей, этот стиль ещё называют odd bodies (странные тела).

Иллюстрация — страница результатов поиска Huge Inc

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

3D иллюстрация — дизайн сайта, отрисованный Амритом Пэлом

«Иллюстрации и дизайн персонажей с годами установили неверные стандарты красоты и того, что на самом деле важно. Миндалевидные глаза, светлая кожа, определённые типы телосложения — мы выросли на мультфильмах, которые лишь подтверждают эти предубеждения, — говорит Амрит. — Исправить это — наш долг как создателей и художников. Мы должны осознанно подходить к тому, как представлять подобные стандарты. Я всегда стараюсь делать свои иллюстрации разнообразными, чтобы каждый мог себя в них узнать».

Функциональность, а также инклюзивный и доступный дизайн

Функциональность — главная страница Blue Receipt

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

Доступность — страница сайта Blue Receipt

К счастью, такой веб-дизайн уже используют многие бренды и компании, такие как электронная платформа для торговли Blue Receipt и бренд кошачьего корма Cat Person. Функциональный, доступный и удобный сайт, где любой посетитель может легко разобраться, теперь необходим, чтобы обеспечить эффективное онлайн-взаимодействие.

Доступность — страница сайта Cat Person

Более понятный, инклюзивный дизайн важен не только для хорошего клиентского сервиса, это также увеличивает конверсию, продвигает ваш сайт и даёт больший охват аудитории.

Вот несколько способов сделать ваш сайт более доступным:

сделайте сильный цветовой контраст между текстом и фоном;

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

применяйте лейблы и подсказки в полях формы, а не плейсхолдеры с малопонятными комментариями;

задействуйте функциональные ALT-теги (альтернативные тексты) для изображений;

используйте лёгкий для понимания контент без сленга.

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

Моушн-дизайн и интерактивность

Моушн-дизайн — главная страница Gridspace

Видео-контент сегодня привлекает интернет-пользователей больше, чем другие формы, неудивительно, что это стало одним из популярных трендов в веб-дизайне. Моушн-дизайн и анимацию используют все: от бутиковых сайтов, таких как Alter Mind и Gridspace, до крупных сервисов по поиску работы, таких как SEEK. Это простой способ сделать обычную веб-страницу более интересной.

Аналогичным образом многие бренды и компании, такие как YouTube Rewind, начали добавлять на сайты больше интерактивных элементов (викторины, игры, квизы и опросы). Отличный пример такого подхода — бренд Estee Lauder. На сайте компании есть интерактивная аркадная игра под названием «THE ANRCADE», это футуристический квест, где пользователи зарабатывают «очки молодости», а бренд таким образом продвигает свой крем Advanced Night Repair.

Интерактивность — игра ANRCADE бренда Estee Lauder

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

Интерактивность — страница поиска YouTube Rewind

«По мере того, как технологии развиваются, становится всё проще применять моушн-дизайн, и это помогает создавать потрясающие впечатления (при правильном использовании), — говорит Шон. — Я вижу, что это хорошо получается, когда есть переход между контентом и взаимодействием с элементами».

3D и геометрический дизайн

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

Геометрический дизайн — главная страница The Imagineers

Трёхмерные формы и плавающие объекты в геометрическом дизайне появляются, благодаря смешению сюрреалистичных анимаций с реальными объектами, таким образом создаётся завораживающий футуристический эффект. Этот стиль часто используется в рекламных роликах для демонстрации новых продуктов, которые в этом случае вращаются, словно подвешенные в воздухе. Чтобы ваш сайт привлекал посетителей, можно добавить ещё один слой или измерение. Один из таких примеров — сайт The Artery, который сочетает геометрические элементы с минималистичными простыми линиями модульной сетки.

Трехмерные плавающие объекты — дизайн страницы The Artery

Использование простых линий сетки, границ и других структурных элементов также стало трендом в области веб-дизайна. Например, эту тенденцию можно оценить на сайтах Rail Road Ladies, Monograph Comms и The Imagineers.

Геометрический дизайн у The Railroad Ladies

«Я заметил, что в веб-дизайне снова начинают использовать геометрические элементы и сетку. И мне, как человеку, который любит структуру и порядок, это по-настоящему нравится», — говорит Шон.

Как видно из данного материала — в 2021 году нас ждет много интересных трендов в дизайне, некоторые из них активно используются и набирают популярность уже сейчас. Плодотворного 2021 года и хорошего дизайна!

По материалам статьи.

Главные тренды веб-дизайна 2020 | DENISOV

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

По последним данным американского эксперта Лары Ли, 42% пользователей сразу покидают сайт, если время загрузки превышает 10 секунд, а 37% называют плохой дизайн и навигацию основной причиной закрытия страницы.

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

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

9 тенденций веб-дизайна и разработки сайтов

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

Предлагаем вам ознакомиться с новинками, которые набирают обороты в мире веб-разработки, и использовать популярные технологии в интересах вашего бизнеса.

Минимализм над визуальным великолепием

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

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

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

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

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

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

Персонализированный дизайн UX

Дизайн пользовательского опыта (UX) стал доминирующим фактором веб-дизайна в целом. Сайтам без так называемого курируемого UX будет непросто охватить новую аудиторию в 2020 году и в последующие годы из-за изменения ожиданий пользователей.

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

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

Создайте профили клиентов, чтобы точно определить свою аудиторию. Только после исследования есть смысл вносить радикальные изменения в UX или UI.

Курирование контента с помощью AI

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

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

Алгоритм искусственного интеллекта устраняет нежелательный, неинтересный или непривлекательный контент из опыта просмотра конкретным пользователем.

Например, специалист по SEO не обязательно будет интересоваться постами по дизайну, что заставит AI поставить связанный с SEO контент на первый план в вашем блоге.

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

Чат-боты на сайте

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

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

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

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

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

Голосовая навигация

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

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

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

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

Голосовая навигация действительно улучшает жизнь пользователей: эта тенденция веб-дизайна обязательно должна учитываться в 2020 году.

SEO-ориентированный контент

Создание веб-контента уже обусловлено конкурентной необходимостью занимать более высокие места в отрасли. Эта тенденция будет набирать обороты в ближайшем будущем.

Такие инструменты, как Google Keyword Planner или SEMRush, можно использовать для определения ключевых слов и фраз, которые находятся в тренде. Использование этих слов позволит создавать SEO-дружественный контент гораздо быстрее, чем раньше.

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

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

Функционал с поддержкой AR

За последние несколько лет в технологиях дополненной реальности (AR) произошел всплеск интеграции при разработке приложений. Pokemon GO — это только самый известный пример AR, который захватил мир штурмом и продемонстрировал потенциал технологии.

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

Вы можете связать приложения для бизнеса, клиентские приложения для смартфонов и платформы обмена сообщениями с основным сайтом через AR.

Появляется возможность размещать реальные и экспериментальные элементы в вашем проекте через внешние платформы, такие как Google Maps.

AR позволят сайтам выделиться из конкурентной борьбы с революционными функциями, преодолеть разрыв между виртуальной реальностью и настоящим миром в 2020 году.

Отзывчивость как норма

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

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

Мобильный контент требует более прямого и информативного мышления, где нет места для длинных статей или фрагментов, требующих постоянной прокрутки.

Подумайте о том, чтобы объединить минималистичный подход к веб-дизайну с адаптивными визуальными элементами, которые подстраиваются под экран пользователя и периферию.

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

Безопасность данных пользователя

Кибербезопасность становится все более серьезной проблемой для пользователей Интернета по всему миру. Недавний скандал с Cambridge Analytica — всего лишь один частный случай злонамеренного нарушения безопасности данных, произошедшего в результате человеческого суждения.

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

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

Рекомендуется выделять на целевой странице сайта меры безопасности, которые вы предоставляете посетителям и клиентам — это сказывается на доверии.

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

Тренды веб-дизайна 2020 // Дизайн в цифровой среде

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

01. Адаптивность

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

Такой способ проектирования веб-страницы позволяет сделать ее читабельной и удобной при любом размере экрана.

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

Мобильная версия требует более продуманного дизайна. Это касается расположения и вида текста, медиаконтента, иконок и кнопки «Меню». Все элементы могут меняться, уменьшаться или исчезать в зависимости от размера экрана, при этом пользователю должно быть понятно, как использовать сайт.

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

02. Ассиметричный макет

Оставьте привычные и комфортные отступы в 2019. Да, их удобно читать, они понятны, просты и предсказуемы, но вряд ли оставят след в памяти пользователя и истории веб-дизайна.

В 2020 попробуйте пойти дальше и применить ломаную сетку, разместив блоки в хаотичном порядке. Ассиметричный макет — это площадка для ваших экспериментов. Покажите свою индивидуальность и подчеркните уникальность вашего продукта. Таким образом вы сделайте опыт взаимодействия с сайтом запоминающимся и приятным. Пусть первое, что ваш пользователь сделает после просмотра сайта — отправит его своим друзьям со словами: «Смотри, как круто!».

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

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

03. Использование микровзаимодействий

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

У микровозаимодействий много предназначений — от обучения пользователя до привлечения и удержания аудитории и создания эмоциональной связи с ней.

04. Пустое пространство

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

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

05. Типографика

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

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

Еще одна новая тенденция 2020 года — массовое возвращение к винтажной типографики. Мода циклична, этот принцип работает и в веб-дизайне. Несмотря на засечки, смелые линии и изгибы такие шрифты отлично смотрятся в вебе наряду с привычным Sans Serif. Не бойтесь экспериментировать!

05. Цвет

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

Совет: чтобы не ошибиться с сочетанием цветов, воспользуйтесь вспомогательными инструментами: спектром, готовыми цветовыми схемами или подберите палитру с помощью инструментов Google Material Design.

06. Полноэкранное видео

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

Разместите видео рядом с фотографией, чтобы усилить контраст статики и динамики и сделать контент запоминающимся.

08. Анимация

Анимация не является новым трендом, но остается востребованной в современном веб-дизайне. Она помогает направить пользователя и объяснить работу интерфейса, привлечь его внимание и просто развлечь.

Используйте анимацию для создания пояснительных видеороликов и сохраните время ваших пользователей на чтение инструкций.

Анимируйте логотип, чтобы привлечь к нему внимание. Это также основной тренд в дизайне логотипов.

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

09. Иллюстрация

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

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

10. 3D

3D изображения — это сложный элемент дизайна, который эффектно смотрится практически на любом сайте. Реалистичные изображения привлекают внимание, цепляют и удерживают целевую аудиторию.

При использовании 3D остальной дизайн сайта упрощается, чтобы избежать тяжеловесности и достичь сбалансированной структуры сайта.

Команда Wix ❤️

🎨 22 тенденции веб-дизайна в 2020 году, о которых нужно знать

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

В конце концов, быть в курсе возникающих или развивающихся тенденций жизненно важно, если хочешь оставаться на вершине горы. Так какие же эти новые тренды? Что сработает лучше всего в 2020?

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

1. Hero Images и Headers

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

Ниже приведен пример с официального сайта Samsung с одним из последних трендов веб-дизайна 2020 года:

Hero Images – это отличный способ привлечь потенциальных покупателей, фон в таком случае становится объектом внимания и перестает быть серым.

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

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

2. Пустое пространство и минималистичный дизайн

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

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

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

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

Если хотите применить этот подход в веб-дизайне на практике, взгляните на пример от Squarespace:

Несмотря на наличие на главной странице пустого пространства, она по-прежнему смотрится элегантно и привлекательно.

3. Эмоциональный дизайн

Веб-дизайн направлен на налаживание взаимодействия с пользователем. Если вы в этом преуспеете, то заставите посетителя возвращаться на сайт снова и снова.

Новым трендом стало построение эмоциональной связи с пользователем через веб-дизайн. Для этого примеряются вызывающие яркие эмоции изображения (прямо как эмодзи).

Люди часто называют их “связующими”, и в результате даже не замечают, как втянулись:

Преимущество эмоциональной привязанности состоит в том, что веб-сайт запоминается пользователям, и велика вероятность, что они порекомендуют его своим друзьям.

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

4. Динамический скроллинг

Динамическая прокрутка набирает обороты, и все крупные компании движутся в этом направлении. Причина проста: чем привлекательнее смотрится веб-сайт, тем красивее продукт. С запуском Note 20 в августе этого года, я решил зайти на сайт Samsung, чтобы посмотреть спецификации смартфонов и Galaxy Watch 3.

Я был удивлен тем, как они презентовали свой продукт с использованием динамического скроллинга. То же самое наблюдалось на презентации Apple в сентябре. Взгляните:

5. Градиент 2.0

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

Пользователи от этого устали, и появилась необходимость перемен, что направило тренды в сторону градиента 2.0, где на странице преобладают оттенки нескольких светлых цветов.

Пользователи по всему миру тепло приняли нововведение. Оно позволяет сделать веб-сайт менее скучным и более привлекательным:

6. Темный интерфейс

Темная тема стала трендом практически в каждом приложении. Она есть в WhatsApp и Skype, Gmail, Facebook, YouTube и во многих других приложениях.

Это стало настолько обыденным, что некоторые компании начали добавлять dark mode в свои последние обновления. Темная тема даже глазам дает отдохнуть! Так почему не применить ее в веб-дизайне?

Веб-дизайнеры также стали работать с темной темой через использование Hero Images, благодаря чему сайт кажется полностью черным.

Для максимального эффекта нужны контрастирующие цвета с оттенком: к примеру, #000000 идеально сочетается с #FFFFFF или желтым и так далее.

Представленный на скриншоте веб-сайт пояснит, что я имею в виду:

7. Scroll-generated веб-сайты

Scroll-generated веб-сайты (прим. переводчика – “основанные на скроллинге”) – один из последних трендов, подхваченных веб-дизайнерами.

Название может показаться схожим с динамическим скроллингом (англ. Dynamic scrolling) и сбить вас с толку, но на деле это разные понятия. Scroll-generated веб-сайт работает следующим образом: элементы сайта зависят от прокрутки и появляются во время скроллинга.

Когда же мы говорим о динамическом скроллинге, то в данном случае весь контент изначально присутствует на странице, и все, что нам нужно, это прокрутить до него.

Чтобы стало более понятно, взгляните на представленный ниже скриншот веб-сайта:

8. Интерактивные курсоры

Анимированные курсоры меняют внешний вид указателя на что-то привлекательное.

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

Для лучшего понимания взгляните на веб-сайт ниже:

9. 3D-дизайн

Трехмерный дизайн привлекает человеческий глаз. Пришлось сильно постараться, что перенести 3D на веб-сайты. Элементы трехмерного дизайна требуют большей пропускной способности, нежели 2D, и являются довольно массивными.

Так как в последнее время люди стали использовать более высокоскоростное интернет-соединение, веб-разработчики начали запускать трехмерные веб-сайты. При правильном использовании 3D-дизайн будет смотреться привлекательно и реалистично.

Прекрасный пример веб-сайта на скриншоте ниже:

10. Оптимизированная навигация

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

Для вдохновения взгляните на скриншот сайта Bikebear:

11. Фокус на улучшении UI и UX

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

В 2018 году интернет охватила волна модернизации UI и UX. Люди сфокусировались на дизайне настолько, что кто-то построил на этом карьеру. Причина проста: UI отвечает за привлекательность сайта, UX – за удобство для пользователя.

Посетители получают наслаждение от пользования сайтом, а именно этого хочет каждый разработчик. Если вы думаете заняться созданием сайта, стоит позаботиться о хороших UI и UX.

Ниже представлен скриншот с LambdaTest:

12. Большие жирные шрифты

Крупные и жирные шрифты на Hero Image ворвались в тренды с прошлого года. Они привлекают внимание и передают вложенный вами посыл. Такие шрифты легко разместить, а чтобы они лучше смотрелись, поработайте над цветовым контрастом и тенью.

Пример того, как применить это на практике, представлен ниже:

13. Художественные иллюстрации

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

Это один из наиболее популярных трендов 2020 года в веб-дизайне. Такие иллюстрации можно часто наблюдать в различных видео типа TED, музыкальных клипах и т.д. Можно сказать, что они твердо и уверенно идут вперед.

Ниже представлена демонстрация от Lisa Glanz:

14. Сеточный дизайн

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

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

Лучший пример – Pinterest:

15. Слияние фотографии с графикой

Слияние фотографий с графикой – правильное сочетание абстрактного и красочной графики. Фотография – это прекрасный способ передать какой-либо посыл (обычно это такая насущная тема, как феминизм) практически без слов.

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

В качестве примера для демонстрации я выбрал Wix:

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

16. Анимация, запускаемая пользователем

Часто анимация отображается на сайте через @keyframes и другие фреймворки, вроде anime.js. Суть тренда заключается в использовании анимации через взаимодействие с пользователем.

Такой подход завлекает посетителя и в целом улучшает user experience.

Этот сайт показывает удачный пример запускаемой пользователем анимации:

17. Плавающие элементы

Плавающие элементы можно рассматривать как дополнение трехмерных компонентов, о которых мы говорили ранее. Элемент “парит в воздухе” – таким образом создаются увлекательные изображения и шаблоны в веб-дизайне.

99designs используем в качестве демонстрации:

18. Истории с графикой

Отзывы всегда были неотъемлемой частью покупок, и все мы зачастую прочитаем пару-тройку, выбирая товар. А вы знали, что отзыв клиента о товаре может рассказать целую историю?

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

Истории с графикой могут вывести завлечение читателей на новый уровень.

Сайт, используемый в качестве демонстрации, – Apple:

19. Графики данных на веб-сайтах

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

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

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

Для демонстрации использован сайт Uber:

20. Черное и белое

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

В качестве примера сайта я использовал Dribbble:

21. Геометрические фигуры и узоры

Геометрические формы помогают веб-дизайнерам создавать что-то захватывающее и мощное из обычного изображения.

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

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

22. Эксперименты с иллюстрациями

Вы скорее всего понимали, что иллюстрации становятся горячей темой в тенденциях веб-дизайна 2020 года и экспериментировании.

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

Прекрасным примером служит приведенный ниже веб-сайт:

Заключение

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

Статья публикуется в переводе. Автор оригинального текста Harish Rajora.

***

Дизайн и веб-разработка – близнецы-братья. Многие талантливые frontend-программисты начинали свой путь в профессии как дизайнеры. Если вы планируете сменить специализацию или задумываетесь о дополнительных навыках, обратите внимание на курс онлайн-академии GeekBrains. Начав с основ, вы пройдете стажировку в реальной команде и удачно обновите резюме.

9 крупнейших тенденций веб-дизайна в 2021 году

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

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

9 тенденций веб-дизайна, которые будут огромными в 2021 году

—

1. Параллакс анимация
2. Неоморфизм
3. Абстракционистские композиции
4. Комфортные цвета
5. Веб-дизайн для причин
6. Прокрутка преобразований
7. Цифровая интерпретация физических продуктов
8. Увлекательные анкеты
9. Трехмерные цвета

1.Параллакс анимация

—

Автор Pinch Studio

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

Мин Фам через Dribbble

Автор Уэсли ван’т Харт через Dribbble

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

Автор Iconic Graphics

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

По UI8 через Dribbble

Слава Корнилов через Dribbble

Автор Permadi Satria Dewanto через Dribbble

2.Неоморфизм

—

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

Мы увидим Neumorphism — новый Skeumorphism, превращающий плоские значки в реалистичные трехмерные объекты.
— Клэр Тейлор, старший дизайнер продукта 99designs

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

Автор ODarka

3. Абстракционистские композиции

—

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

Автор andrei2709

В 2021 году элементы абстрактного искусства будут использоваться в качестве альтернативы фотографии в веб-дизайне для стартапов, технологических продуктов и приложений.
— Тристан Ле Бретон, креативный директор 99designs

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

через indicius.com

4. Комфортные цвета

—

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

Автор: Creative_David

Наши миры шумные, усталость от Zoom — это вещь.В 2021 году веб-дизайн сократится до «одной работы за раз», чтобы не отвлекаться и сделать взаимодействие более комфортным.
— Клэр Тейлор, старший дизайнер продукта 99designs

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

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

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

Автор Виола через Dribbble

Будет проводиться конкурс на создание максимально простого дизайна с использованием нежных и прохладных цветов, чтобы пользователи могли проводить больше времени, рассматривая дизайн веб-сайта.- RV ™, дизайнер 99designs

5. Веб-дизайн для причин

—

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

По дизайнуExcellence

Артур Минеев через Dribbble

В 2021 году мы увидим больше дизайнов и изображений, резонирующих с движением, социальными и экологическими проблемами. Я видел, как все больше и больше брендов объединяются вокруг проблем и общаются со своими пользователями на более глубоком уровне.
— Тристан Ле Бретон, креативный директор 99designs

В 2021 году мы увидим, что веб-дизайнеры по-прежнему будут ценить свою роль в помощи миру в трудные времена.

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

Автор: Лэнс Баррера, Dribbble, By SixtyTwo, Dribbble

. Веб-дизайн уже давно ориентирован на обеспечение максимального удобства пользователей.А в 2021 году лучший пользовательский опыт будет зависеть от общих ценностей и общих причин.

через Nike

6. Прокрутка преобразований

—

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

Автор: Хироши

По JP через Dribbble

Слава Корнилов через Dribbble

Автор Vilius Vaicius через Dribbble

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

Внешним через Dribbble

Автор Manon Jouet через Dribbble

7. Цифровая интерпретация физических продуктов

—

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

Автор: JPSDesign

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

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

По Абая (бухта)

8. Увлекательные анкеты

—

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

Кристиан Вертер через Dribbble

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

Флориан Поллет через Dribbble

Автор Алена Соколова через Dribbble

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

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

9. Трехмерные цвета

—

Цветовые схемы в веб-дизайне уже какое-то время имеют тенденцию к градиентам, и тенденция этого года выглядит как следующая эволюция, когда цветовые переходы становятся более реалистичными, чем когда-либо. Следуя примеру Apple Big Sur OS, мы ожидаем, что цвета будут насыщенными и трехмерными, почти как фрукты, которые вы можете сорвать прямо с экрана.

ОС Big Sur через Apple

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

В 2021 году мы увидим множество дизайнов, таких как Big Sur от Apple: сочная графика, градиенты, множество теней.

Готовы к крупнейшим тенденциям веб-дизайна 2021 года?

–

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

11 главных тенденций веб-дизайна, которые будут править в 2020 году | от студии PopArt | NYC Design

Можете ли вы вспомнить, как выглядел дизайн Facebook в момент своего появления, полтора десятилетия назад? По современным меркам — не очень лестно. Так что, если вам случится сегодня встретить такой дизайн веб-сайтов, признайте это, вы, вероятно, сразу же потерялись бы.

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

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

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

Как может такая простая вещь, как размещение светлого текста, значков и элементов пользовательского интерфейса на темном фоне, быть настолько мощной? Темный режим — это тенденция веб-дизайна, которая, несомненно, доминировала в 2019 году, и маловероятно, что ее господство закончится в 2020 году.

Темный режим покоряет онлайн-мир с появлением лучших приложений и веб-сайтов, таких как Facebook Messenger, YouTube, Instagram, Viber, WhatsApp и Chrome, а также последних выпусков операционных систем Android и Apple. свет гаснет один за другим.

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

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

Источник: https://dribbble.com/shots/

66-Furniture-e-commerce-app Источник: https://dribbble.com/shots/4992178-Reuters-News-Night-Mode Источник: https://dribbble.com / shots / 8565906-The-Energetic-Tumbler-Landing-Page

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

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

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

Хороший способ достичь минимализма в веб-дизайне — отказаться от тяжелого абзаца для высококачественного изображения или видео, которое передало бы смысл текста более привлекательным и прямым образом.

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

Источник: https: // dribbble.com / shots / 3583923-Mono-WeatherSource: https://dribbble.com/shots/8622369-Mobile-app-Vegan-mealSource: https://dribbble.com/shots/8631208-Unix-Banking-App

2020 будет быть годом минимализма даже в цветовой гамме веб-сайта. Черное и белое в сочетании с очень узким спектром оттенков серого неизменно элегантны, эстетичны и современны.

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

Совет: 50 оттенков серого могут быть литературным бестселлером, но в дизайне веб-сайтов это провал.Если вы выбираете черно-белый веб-сайт с элементами в оттенках серого, придерживайтесь двух-трех оттенков серого.

Источник: https://dribbble.com/shots/5179726-Lookbook-Black-White Источник: https://dribbble.com/shots/7117245-HI-RISE-BUILDERS-DEVELOPERSS Источник: https://dribbble.com/shots /

14-Week-31-Photo-Discovery-App-Concept

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

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

Источник: https://dribbble.com/shots/5577531-Atomic-DNA-Manifesto-Introduction Источник: https://dribbble.com/shots/47

-Landing-Page-ICO Источник: https: // dribbble.com / shots / 4827534-Saving-Animals-Illustration

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

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

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

Источник: https://dribbble.com/shots/7160309-Snapsound-Homepage-In-progress Источник: https://dribbble.com/shots/6685757-Vacation-House-Cooking-Landing-Page Источник: https: // dribbble .com / shots / 9220552-Landing-page-Nature

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

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

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

Источник: https://dribbble.com/shots/6103123-Thrive-Conference-Promo-March-15-16 Источник: https://dribbble.com/shots/7725993-Funky-Fresh Источник: https://dribbble.com / shots / 7088514-Ten

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

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

Совет. 3D-элементы могут быть довольно тяжелыми для загрузки, поэтому не волнуйтесь, добавляя их на свой веб-сайт. Умеренно занятые, они могут творить чудеса; чрезмерно они могут снизить эффективность SEO вашего сайта.

Источник: https://dribbble.com/shots/6759955-Pastel-Pink-Lighting-Material-StudySource: https://dribbble.com/shots/6247971-Push-WeightSource: https://dribbble.com/shots / 8811213-3D-Design-Shoes-for-Commercial-Characters Источник: https://dribbble.com/shots/7779269-Otto

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

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

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

Источник: https://dribbble.com/shots/6762159-Reimagining-99pi Источник: https://dribbble.com/shots/4677040-Porcelanosa-web-designhttps://dribbble.com/shots/6768450-99pi-Miss -Manhattan

До недавнего времени анимация веб-сайтов в основном происходила сама по себе, независимо от действий посетителей на самом сайте. 2020 год изменит это с появлением анимации, запускаемой пользователем.

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

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

Источник: https: // dribbble.com / shots / 7885798-Pet-food-website-design Источник: https://dribbble.com/shots/8493535-Book-Festival-Website-Interactions

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

Совет. Избегайте монотонных градиентов, поскольку они выглядят неряшливо, скучно и не стильно.

Источник: https://dribbble.com/shots/8660936-Birds-Guide-APPS Источник: https://dribbble.com/shots/5635469-Hero-image-illustration-for-music Источник: https://dribbble.com / shots / 7013067-App-concept

«Картинка стоит тысячи слов». Верно для 2019 года, но благодаря высокоскоростному подключению к Интернету статические изображения героев исчезли. Вместо этого высококачественные видеоролики, которые создают впечатление фильма, являются отличным способом приветствовать, вовлекать и развлекать посетителей в 2020 году. Изображения имеют решающее значение в визуальном дизайне, потому что они позволяют доставлять сообщение быстро и прямо, и нет лучшего способа показать это чем использование видео.

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

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

Источник: https://dribbble.com/shots/3169448-Type-color

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

Дизайнерам, которые стремятся к лучшему UX и привлекательному внешнему виду веб-сайтов, следует помнить о некоторых из тенденций веб-дизайна, которые будут доминировать в 2020 году:

Темный режим
Минимализм
Черно-белый
Светящиеся цветовые схемы
Рисованные от руки элементы
Жирная типография
3D-элементы
Тени, слои и плавающие элементы
Анимация, запускаемая пользователем
Разноцветные градиенты
Видео или текстовые герои

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

9 главных тенденций веб-дизайна, на которые стоит обратить внимание в 2021 году

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

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

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

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

Асимметричные макеты
Минималистские или максималистские крайности
Видео как элементы дизайна
Векторное искусство
Формы и абстрактный дизайн
Анимация
Черные и пастельные тона
Доступность
Эффекты прокрутки

01.Асимметричные макеты

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

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

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

02. Минималистские или максималистские крайности

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

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

Максималистский дизайн веб-сайтов — это совсем другая история.

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

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

— Ади Хури, руководитель отдела маркетинга продуктов, редактор Wix

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

03. Видео как элементы дизайна

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

В последние годы видео стали играть новую роль в веб-дизайне — они перестали быть чисто информационными и превратились в самостоятельные элементы дизайна.Как? Мы рады, что вы спросили.

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

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

04.Векторная графика

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

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

05. Фигуры и абстрактный дизайн

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

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

06. Анимация

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

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

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

07. Черный и пастельные тона

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

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

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

08. Доступность

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

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

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

09. Эффекты прокрутки

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

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

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

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

— Ади Хури, руководитель отдела маркетинга продуктов, редактор Wix

Дженна Романо

Автор блога

Ади Хури

Руководитель отдела маркетинга продуктов, редактор Wix

Горячие тенденции веб-дизайна, на которые стоит обратить внимание в 2021 году!

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

В этом сообщении в блоге команда веб-разработчиков WishDesk исследует самые потрясающие тенденции веб-дизайна, на которые стоит обратить внимание в 2021 году.Следите за обновлениями!

Основные тенденции веб-дизайна на 2021 год

Вот список тенденций веб-дизайна, на которые стоит обратить внимание в 2021 году:

Крупные буквы
Асимметричные схемы
Анимация
3D Дизайн
Пользовательские изображения
Разделить содержимое
Скрытая навигация
Полноэкранные формы
Параллакс веб-дизайн
Голосовой интерфейс пользователя

Узнайте больше о каждом из них и обновите свой веб-дизайн, чтобы идти в ногу с грядущими тенденциями!

Полужирный шрифт

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

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

Language Media — компания, специализирующаяся на развитии бренда. Использование негабаритных букв на их веб-сайтах действительно привлекает внимание посетителей.

Асимметричные макеты

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

Разбитая сетка, используемая на сайте Dada-Data, действительно нравится посетителям.

Фоновое видео

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

Фоновое видео на сайте The Hidden Worlds of the National Parks действительно впечатляет.

3D-дизайн

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

Сайт Campo Alle Comete выглядит как сказка из-за использования трехмерной графики. Этот метод также позволяет компании продемонстрировать историю своего бренда.

Пользовательские изображения

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

Разделить содержимое

С помощью техники веб-дизайна с разделением содержимого вы можете продемонстрировать более одного важного сообщения одновременно на одной странице. Это также делает ваш сайт более привлекательным и хорошо организованным.

Веб-сайт Hello Monday — хороший пример успешно реализованной компоновки разделенного экрана.

Скрытая навигация

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

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

Полноэкранные формы

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

Этот полноэкранный интерфейс от дизайнера Мэри Лу идеально подходит для тех, кто хочет придерживаться минимализма в веб-дизайне.

Параллакс веб-дизайн

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

Сайт Cyclemon — яркий пример реализации техники параллакс-скроллинга.

Голосовой интерфейс пользователя

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

Сделайте свой сайт модным с помощью услуг веб-дизайна WishDesk!

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

22 тенденции веб-дизайна на 2020 год, о которых нужно знать

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

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

1. Изображения и заголовки героев

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

Ниже я привел пример с официального сайта Samsung с одной из последних тенденций веб-дизайна на 2020 год:

Изображения

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

2. Белые пространства и минималистичный дизайн

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

Если вы хотите использовать эту тенденцию веб-дизайна в 2020 году, приведенный ниже пример от Squarespace.

Несмотря на пространство на главной странице, она по-прежнему выглядит элегантно, красиво и привлекательно.

3. Эмоциональный дизайн

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

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

Вы хотите создать адаптивный веб-сайт? Ознакомьтесь с 10 проблемами адаптивного веб-дизайна и их решением

4. Динамическая прокрутка

Динамическая прокрутка набирает обороты, и все крупные компании движутся к ней. Причина проста; чем привлекательнее выглядит их веб-сайт, тем красивее будет продукт. С запуском Note 20 в августе этого года я зашел на веб-сайт Samsung, чтобы проверить характеристики мобильного телефона и Galaxy Watch 3. Я был удивлен тем, как они представили свой продукт с помощью динамической прокрутки.То же самое произошло во время сентябрьского мероприятия Apple. Взгляните:

5. Градиенты 2.0

Благодаря минималистичному дизайну и максимальному количеству пустых пространств на домашней странице разработчики часто использовали один цвет в качестве фона, чтобы сделать все максимально простым. Но у пользователей было достаточно, и возникла необходимость в изменениях, двигая тенденцию к градиенту 2.0, где на странице преобладает оттенок нескольких светлых цветов. Пользователи приветствовали новое изменение по всему миру.Это помогло сделать сайт менее скучным и немного более привлекательным.

6. Темный UI

Темный режим сейчас в тренде почти во всех приложениях. У WhatsApp и Skype есть темная тема, у Gmail она есть, у Facebook она есть, у Youtube есть и еще масса приложений. В наши дни это настолько распространено, что даже производители мобильных телефонов начали включать темный режим в свои последние обновления, и черт возьми! Успокаивает глаза. Так почему бы не веб-дизайн? Они ничем не отличаются.Веб-дизайнеры также начали использовать эти темные режимы, предоставляя темные изображения героев, которые делают веб-сайт полностью черным. Но лучше всего использовать контрастные цвета с оттенком, если вы выбираете черный. Например, # 000000 идеально сочетается с #FFFFFF, желтым и т. Д.

Веб-сайт на скриншоте поможет вам лучше понять это:

7. Сайты, созданные с помощью прокрутки

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

Следующее изображение с веб-сайта говорит само за себя:

8. Игривые курсоры

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

Веб-сайт ниже объясняет это лучше:

9. 3D дизайн

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

Веб-сайт, представленный ниже, является прекрасным примером 3D-дизайна.

10. Оптимизированная навигация

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

Для вдохновения взгляните на этот снимок экрана с сайта Bikebear:

11. Повышение UI и UX Focus

Усиление работы по разработке различных фреймворков и усовершенствований существующих привело к созданию красивых веб-сайтов, оснащенных UI / UX. Поскольку у некоторых из них появились такие сайты, у тех, кто не стал отставать. В 2018 году Интернет захлестнула волна обогащенного пользовательского интерфейса и пользовательского опыта. Люди начали так сильно сосредотачиваться на UI / UX, что сделали свою карьеру в этом направлении.Причина проста. Пользовательский интерфейс слишком привлекателен для глаз, а UX помогает пользователю очень плавно выполнять некоторые задачи. Таким образом, пользователи могут получить незабываемые впечатления от посещения веб-сайта, чего хочет каждый разработчик. Следовательно, если вы думаете о разработке веб-сайта, будет лучше иметь хороший пользовательский интерфейс и удобство.

Следующий снимок экрана взят из LambdaTest:

12. Крупные и жирные шрифты

Шрифты Big и Bold на главном изображении были в тренде с прошлого года.Крупные и жирные шрифты привлекают внимание и передают то значение, которое вы хотите передать. Их легко установить, и вы должны нанести на них несколько контрастных цветов и оттенков, чтобы они выглядели лучше и удобнее.

На сайте показано, как использовать большие и полужирные шрифты:

13. Художественные иллюстрации

Художественные иллюстрации — это схематичные изображения на главной странице. Эти художественные иллюстрации больше похожи на карандашную работу и в последнее время набирают популярность.Это одна из самых популярных тенденций веб-дизайна на 2020 год. Эти художественные иллюстрации также известны в различных видео, таких как TED, музыкальные клипы и т. Д. Благодаря тому, как они завоевали рынок, нет сомнений в том, что они устойчивы и ускоряются. предстоящий.

Ниже приведена демонстрация Лизы Гланц:

14. Сеточное проектирование

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

Лучший пример — Pinterest.

15. Слияние фотографии с графикой

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

Веб-сайт, используемый для демонстрации, — Wix.

Фотография, использованная здесь, отражает тему сайта, то есть контакт для свадебной фотосессии. Что бы вы хотели видеть в сообщении в виде фотографии или двух абзацев о свадебных фотосессиях?

16.Анимация, запускаемая пользователем

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

На этом веб-сайте показан удачный пример анимации, запускаемой пользователем.

17. Плавающие элементы

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

99Designs используется для демонстрации здесь:

18. Рассказы с графикой

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

Для демонстрации использовался веб-сайт Apple:

19. Предоставление графиков данных на веб-сайтах

Мы все используем статистику на нашем веб-сайте много раз, так как это отличный способ привлечь пользователей, но, к сожалению, не каждый пользователь является читателем.Пользователи часто пропускают текстовую часть и больше сосредоточены на достижении своей цели, ради которой они попали на сайт. Но мы можем это изменить. Все, что нам нужно, — это та же стратегия, которую мы используем в презентациях: предоставление графиков и визуализаций. Техники визуализации, такие как графики, 3D-визуализации и т. Д., Можно найти в Интернете. Визуализации — отличный вариант, если вы хотите передать большой объем информации точным и привлекательным способом, ничего не записывая.

Веб-сайт, используемый для демонстраций: Uber:

20.Черно-белый

Черное и белое — вечнозеленое сочетание. Не только на сайте, но и во многих других вещах, таких как фотография, эскиз, настенная живопись, наручные часы и т. Д. Комбинации черного и белого очень привлекательны для глаз. Может быть, из-за контрастирующих элементов, о которых мы говорили в предыдущем разделе. Использование черно-белой цветовой схемы на веб-сайте (с оттенками черного) — это новая тенденция веб-дизайна на 2020 год, и похоже, что она будет в тренде и в будущем.

Для демонстрации использовался веб-сайт Dribble.

21. Геометрические формы и узоры

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

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

22.Эксперименты с иллюстрациями

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

Сайт — отличный тому пример:

Вам также могут понравиться 14 лучших инструментов веб-дизайна для дизайнеров при удаленной работе.

Заключение

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

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

Хариш Раджора

Я инженер по информатике. Мне нравится расти вместе с развитием технологического мира. Я считаю, что нет более мощного инструмента, чем компьютер, чтобы хоть как-то изменить мир.Помимо моей специальности, я очень люблю читать книги и иногда пишу на https://www.themeaninglesslife.com.

9 значимых тенденций веб-дизайна на 2020 год

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

Ознакомьтесь с нашим последним постом: 21 тенденция веб-дизайна на 2021 год

Основные тенденции веб-дизайна на 2020 год

Проектирование истины‍
Доступность (наконец-то) ключ дизайн
Инклюзивность — ключ к успеху
Революция без кода не наступила rise
Взлет визуального разработчика
Дизайн занимает свое место за столом.Что теперь? ‍
Роль — это не идентичность ‍
Хорошо, одна визуальная тенденция: Marquee возвращается, детка!

Каждый год я делюсь своим мнением о последних тенденциях веб-дизайна, которые будут определять наступающий год, часто с учетом мнений моих коллег-дизайнеров из Webflow, а также мнений известных имен в более широком сообществе дизайнеров. Я всегда включал сочетание конкретных деталей дизайна и моделей взаимодействия, а также концепций более высокого уровня, которые помогли заполнить мое добровольное ограничение добавления на одну тенденцию больше, чем число года (20 тенденций веб-дизайна на 2019 год, Например).

В этом году я ломаю стереотипы.

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

Итак, я отбрасываю те же самые особенности дизайна, которые мы видим год за годом (сломанные сетки, кто-нибудь ?!), чтобы сосредоточиться на более широкой картине.Чтобы задать гораздо более важные вопросы, например:

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

Но об этом позже.

Предпочитаете смотреть ваш модный контент? У нас есть краткое изложение этого сообщения от Чарли Прейнджли:

Спасибо, Чарли!

9 тенденций веб-дизайна на 2020 год

Теперь давайте погрузимся в 9 тенденций веб-дизайна, которые мы увидим в 2020 году:

1. Истина в дизайне

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

Каждая из основных социальных сетей разработала политику — а в некоторых случаях и дизайн — чтобы учесть этот новый расцвет неправды.

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

Facebook (по всей видимости) пытается бороться с фейковыми новостями на своей платформе с 2015 года, используя классический стиль итеративного дизайна Кремниевой долины. Сначала он попытался побудить отдельных пользователей отмечать контент как «ложные новости» — странное наполовину заимствование у президента Трампа — а затем пометить некоторые истории как «оспариваемые», что, согласно так называемому «академическому» исследованию, имело обратный эффект, поскольку вера некоторых пользователей в контент — затем, совсем недавно наложенный на контент простой текст уведомления:

Ложная информация

Проверено независимыми специалистами по проверке фактов.

Источник: The Verge

Наложение также содержит заметный призыв к действию для просмотра результатов проверки фактов, а также дополнительную кнопку для просмотра ложного содержания.

В настоящее время все еще нет плана отмечать оплачиваемые политические посты как ложные.

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

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

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

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

Вот несколько мыслей по этому поводу:

Обозначение более заметным и четким

В отчете Стэнфордского исследования способности студентов определять достоверность информации, найденной в Интернете в 2016 году, Wall Street Journal заявил:

Согласно исследованию Стэнфордского университета, в котором участвовали 7 804 ученика от средней школы до колледжа, около 82% школьников не могли отличить рекламу с пометкой «спонсируемый контент» от реальной новости на веб-сайте.

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

Реальность, конечно же, такова, что это объявлений , даже если они не такие прямые, как баннеры. И мы должны обозначить их как таковые.

И не только наш язык может быть яснее.В наши проектные работы тоже можно внести некоторые улучшения. Посмотрите на скриншот выше (сделанный 3 декабря 2019 г.). Каждая история в этом кадре — это часть спонсируемого контента, размещенная на другом веб-сайте, но полностью интегрированная в домашнюю страницу Slate.

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

Рекламные посты, с другой стороны? «Автор» — или, собственно говоря, бренд — установлен на намного меньше, чем на . Тот факт, что «автор» указан в качестве бренда, а не как отдельное лицо, пишущее для бренда, также говорит о том, что, хотя у нас есть кто-то, с кем следует следить (или обвинять или хвалить) в реальных репортажах, спонсируемые истории относят к безликим брендам.

Возможно, даже более важно: обратите внимание, что настоящие статьи практически украшены заголовком категории (например, Новости и политика). Рекламные истории? Как ни странно не хватает этого заметного заголовка.

Сделайте источники более очевидными

В мире журналистики вы часто слышите мантру:

Рассмотрите источник.

Согласно исследованию, большинство студентов в наши дни не так поступают:

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

И хотя эта максима подчеркивается молодыми и амбициозными журналистами как основная практика, она также может помочь нам, дизайнерам, помочь остальному миру. Что, если, например, в профиле каждой организации в Твиттере будет ссылка на их страницу в Википедии или поиск в Google по их имени? Что, если бы в публикациях была страница с информацией об их политической позиции, истории, управлении и источниках финансирования? Еще лучше: что, если бы они ссылались на независимых комментаторов публикации?

Это, конечно, всего лишь идеи — как минимум побуждает к более глубокому размышлению о том, как мы могли бы побудить читателей действовать как журналисты и более объективно рассматривать свои источники.

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

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

Используйте «связанный контент» для предоставления контекста и контраста.

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

Как? Обеспечивая две вещи:

То, что статьи мнения контекстуализируются историями, которые они комментируют, или противоположными мнениями
Эти новости получают дополнительную окраску через статьи мнения через статьи, которые их комментируют контент, обеспечивающий дополнительный контекст на основе фактов — и статей, основанных на мнениях, помогают работать против все более очевидного предпочтения в нашем возрасте информации «небольшого размера».Данные небольшого размера помогают нам быстро получить общее представление о проблемах в мире, полном проблем, — но это также означает, что нам часто не хватает детального понимания указанных проблем.
Когда мы полагаемся исключительно на горячие отзывы наших любимых «влиятельных лиц» в Твиттере, мы начинаем сильно походить на толпу с вилами и факелом, готовую принять один харизматический голос за источник истины. Но чем больше создатели контента и дизайнеры могут указывать читателям на дополнительную информацию и противоположные мнения, тем больше мы можем поощрять тонкое понимание, которое больше полагается на информацию и разум, чем на эмоции.
Подводя итог:
Четко обозначьте типы вашего контента , чтобы помочь читателям создать мысленную модель вашего контента и лучше различать органические и рекламные материалы
Контекстуализируйте и продвигайте ваши источники , чтобы читатели знали, где вы контент исходит из и может лучше оценивать его достоверность
Используйте связанный контент для добавления контекста и содействия тонкому пониманию тем
Все вышесказанное, стоит помнить, что дезинформация — это не фиксированная цель, а факт, прекрасно зафиксированный Том Розенстил, директор Американского института прессы и старший научный сотрудник Брукингского института:
Какие бы изменения ни вносили компании-платформы, и какие бы инновации ни внедряли проверяющие факты и другие журналисты, те, кто хочет обмануть, адаптируются к ним.Дезинформация — это не проблема с водопроводом, которую вы решаете. Это социальное состояние, такое как преступность, за которым нужно постоянно следить и к которому нужно приспосабливаться. Еще в эпоху радио и раньше, как сказал Уинстон Черчилль: «Ложь может распространиться по миру, прежде чем правда наденет штаны».
То есть: если вы хотите сыграть роль в боретесь с дезинформацией в 2020 году, будьте готовы к долгой перспективе и будьте готовы обновлять свои стратегии и тактики, поскольку информационный ландшафт продолжает меняться.
2. Доступность (наконец) ключ
‍
Прежде чем я углублюсь в это, я должен сделать признание от имени Webflow: мы не создавали Webflow с учетом доступности. Но недавно мы наняли двух специалистов по специальным возможностям и сформировали команду для того, чтобы сделать доступность первоклассным гражданином в Webflow. Следите за новостями об этом.
Веб-доступность — практика обеспечения того, чтобы веб-сайты и веб-приложения могли использовать все, независимо от их способностей, — долгое время была жизненно важной частью процесса веб-дизайна и разработки в зрелых организациях.Особенно в государственных и финансируемых государством учреждениях, где соблюдение Закона об американцах с ограниченными возможностями (ADA) уже давно является юридическим требованием.
Но с громкими делами, такими как иск Domino и другие, получившие широкое внимание, письмо уже висит на стене: скоро все веб-сайты должны будут соответствовать требованиям ADA, что сделает доступность проблемой соответствия, а не просто « хорошо бы иметь.»
И хотя я не хочу переоценивать влияние, которое это окажет на нашу профессию — поскольку многочисленные относительно незначительные вмешательства в наши процессы и наборы навыков окажут значительное влияние на доступность наших продуктов — я не думаю, что мы можем себе позволить чтобы недооценить и этот факт.Потому что, хотя относительно небольшие усилия будут иметь значительное влияние, изменения, необходимые от нас, чтобы сделать сайты более доступными, повлияют буквально на каждый шаг процесса проектирования и рабочие процессы каждого участника этого процесса.
Не верите? Ознакомьтесь с контрольным списком доступности Vox, в котором описаны способы, которыми каждый веб-профессионал, от дизайнеров до тестировщиков и редакторов, может внести свой вклад в создание более доступных веб-сайтов и приложений.
Но работа над доступностью требует гораздо большего, чем контрольные списки и автоматические проверки через плагины браузера.Потому что большую часть работы по созданию доступного веб-сайта невозможно проверить с помощью программного обеспечения. А поскольку веб-дизайн, помимо разработки веб-приложений, по сути, сводится к публикации, доступный веб-дизайн означает пересмотр способов публикации. Если мы создаем видео для Интернета, нам необходимо учитывать субтитры, транскрипты и другие невизуальные эквиваленты, которые мы можем предложить. Если мы размещаем подкасты, нам нужно будет подумать о том, как сделать наш контент доступным для людей с низким или отсутствующим слухом. Если мы публикуем инфографику и диаграммы, нам нужно будет подумать о том, как сделать контент этих средств доступным для тех, кто их не видит.
И дизайнерам, которые давно привыкли полагаться на визуальные форматы и низкоконтрастную эстетику в своей работе, придется приложить усилия, чтобы учесть эту более инклюзивную парадигму. Нам придется долго и серьезно подумать об ограничениях визуальных форматов не только для людей с ограниченными возможностями, но и для тех, для кого визуальные эффекты не так понятны, как для дизайнеров (в том числе и для меня!).
Слепые зоны изобилуют в процессе проектирования, и эти дыры часто основываются на наших правилах.Как писатель, мне часто трудно учитывать людей с менее широким словарным запасом, а также тех, кто предпочитает визуальные форматы. (Даже оборот фразы, которым я начал этот абзац, можно рассматривать как эйблист.) Дизайнеры также склонны упускать из виду ценность и силу отдельного предложения, особенно когда оно сочетается с столь же мощным визуальным эффектом.
Реальность такова: мы изучили свои навыки в контексте, предполагавшем, что существует такая вещь, как «нормальный». Что вы можете применить свои навыки, чтобы общаться со «всеми» в предпочитаемом вами формате, потому что «большинство людей» прекрасно справятся с вашим предпочтительным форматом.
Инвалидность может быть постоянной, временной или ситуативной.
Но факт в том, что, по данным Центров по контролю и профилактике заболеваний (CDC), почти 26% населения США имеют ту или иную форму инвалидности. И, как Microsoft столь красноречиво сообщила с помощью своего инклюзивного дизайна, 100% населения могут испытывать временные или ситуативные нарушения. И дело в том, что никто из нас не становится моложе, и чем старше мы становимся, тем выше вероятность того, что мы испытаем более или менее постоянную инвалидность.
Нет здоровья; врачи говорят, что
нам в лучшем случае нравится, но нейтралитет.
–Джон Донн, «Анатомия мира», 1611
Мир (и его реклама) может изменить здоровых и молодых, но мы больше не можем позволить себе проектировать только для них.
3. Контент получает должное в веб-дизайне и UX-дизайне
Я работаю в сфере контента с 2006 года, и за эти (почти) 14 лет один спор определил мой опыт в этой профессии:
На первом месте стоит дизайн или контент?
Эти так называемые дебаты всегда сбивали меня с толку по нескольким причинам.И мне невероятно приятно видеть, что дизайнеры все больше приходят к пониманию того, что всегда казалось мне очевидным: что «содержание» или, скорее, «послание» должно предшествовать дизайну. Потому что иначе было бы буквально не на что спроектировать .
С другой стороны, эти дебаты сбивают с толку и разочаровывают, потому что на самом деле это даже не настоящий вопрос. Ни контент, ни дизайн не стоят на первом месте. Потому что вы действительно не можете создавать контент или дизайн, пока у вас не будет стратегии .И у вас не может быть стратегии, пока у вас не будет цели : цель, которую должно выполнять то, что вы хотите опубликовать.
Чтобы прояснить это, я хотел бы вернуться к предшественнику веб-дизайна и издательского дела: издательскому делу. Прежде чем вы сможете создать книгу, вам нужно ее спроектировать. И прежде чем вы сможете написать книгу, вам понадобится баллов и : идея или истина, которую вы хотите донести до своей аудитории.
Здесь важно отметить, что веб-сайт на самом деле не является книгой.Его материальное выражение, функциональность и распространение сильно отличаются от книги. Но с точки зрения цели книга и веб-сайт во многом похожи: они оба существуют для передачи информации аудитории. (Нет, я , а не , говорю здесь о веб-приложениях. *)
Основное различие состоит в том, что веб-сайт надеется собрать некоторую информацию от своей аудитории в обмен на информацию (или функции), которые он предлагает: обычно , электронное письмо, уникальный современный ключ к личности человека и к общению с ним.
Но чтобы получить, нужно отдать. Вы должны предложить некоторую ценность, и даже команды, разрабатывающие самые популярные в мире цифровые продукты, понимают, что качественный контент является невероятным источником ценности, позволяя вам привлечь внимание даже тех, для кого ваш продукт (пока еще не создан).
Конечно, контент — это не просто сообщения в блогах. (И это не просто слова, это совсем другой пост.) Контент также играет ключевую роль в общем пользовательском опыте вашего продукта, и все чаще платформы испытывают боль из-за неправильного использования контента.
Вот пример, с которым я столкнулся на днях в LinkedIn (где я когда-то работал, для прозрачности):
Заметили что-нибудь? Я уверен! И я мог бы продолжать и говорить о недостатках этого интерфейса, но ограничусь одним наиболее важным:
Что, черт возьми, мне делать, если это не мой «правильный» или «активный» адрес электронной почты?
Меня просят при необходимости принять меры в отношении этой информации, но у меня нет очевидного способа сделать что-либо, кроме как «удалить» свой номер телефона! Контент и интерфейс полностью не согласованы, поэтому в лучшем случае LinkedIn может получить от меня точный текущий номер телефона .
Но, по иронии судьбы, то, что этот интерфейс лучше всего подходит для меня, пользователя, — это напоминание мне, что у LinkedIn есть мой номер телефона (почему ?!), и, что еще лучше, дает мне возможность отделить его от моего профиля. (Первоначально я написал «удалить его из их базы данных», но мой коллега правильно указал… он почти наверняка этого не делает.)
Я просто предполагаю, что не было их целью.
Но я здесь не для того, чтобы жаловаться на контент LinkedIn. Я здесь, чтобы подчеркнуть центральную роль контента в общем пользовательском опыте любой цифровой среды.Надеюсь, что вышеперечисленное помогает, но чтобы подкрепить мою точку зрения, вот несколько связанных с контентом максимумов и минимумов за 2019 год:
Лично я не разделяю здесь похвалы Алисии.
Наиболее показательным, пожалуй, является растущая значимость контент-стратегии и UX-письма в брендах некоторых из самых узнаваемых на сегодняшний день брендов. Достаточно взглянуть на публикации по дизайну и общедоступные дизайн-системы таких брендов, как Facebook, Dropbox, Google и Shopify, и вы увидите, что слово content — и его преданные создатели — получают свою долю имен.
4. Инклюзивность — это ключ
* Но точка зрения, ориентированная на контент, по-прежнему оказывает драматическое влияние на веб-приложения: достаточно взглянуть на Twitter, где единственное решение по контенту — ограничение количества символов — сделало все, что , чтобы определить как славу, так и ужас этой платформы.
Мы, дизайнеры, несмотря на всю нашу направленность на сочувствие, остаемся людьми. Мы неустанно стремимся учитывать мнения и опыт других с помощью пользовательских исследований, критических сессий, A / B-тестирования и множества других методов.Но, в конце концов, все мы подвержены очень человеческой склонности: бессознательному предположению, что то, что работает для нас, будет работать и для всех остальных.
Достаточно взглянуть на язык, который мы используем каждый день: Обратитесь к . Я вижу, что . Мы слышим вас .
Мы предполагаем, что эти фразы универсальны и одинаково значимы для всех, кто их слышит или читает. Мы беспечно объединяем конкретную сенсорную основу этих фраз с их эмоциональным регистром и намерением.
Но это ошибочное предположение. Слепой не может этого видеть . Глухие вас не слышат. Люди с церебральным параличом могут изо всех сил пытаться протянуть руку помощи.
Конечно, инклюзивность — это гораздо больше, чем учет инвалидности. Речь идет об учете различий. Это означает, что мы не можем ограничиваться «мужским» и «женским», когда спрашиваем чей-то пол в форме. Это означает осознание того, что «счастливого дня отца!» электронная почта не будет означать то же самое для ребенка бездушного отца, как для того, кто вырос в «нормальной» нуклеарной семье.Черт возьми, это означает осознание того, что даже у человека из «нормальной» семьи могут быть плохие отношения со своим отцом — или иметь не отца и мать, а двух матерей.
Чтобы наслаждаться продуктом и находить в нем ценность, человеку необходимо видеть свое отражение в нем. Без такого взгляда на себя человек вместо этого видит отказ. Послание таково: тебе здесь не место.
Проектирование с учетом инклюзивности — и, в конечном итоге, для UX — означает освобождение места для нашей аудитории в продуктах, которые мы создаем.
Я хочу расширить эту связь между инклюзивным дизайном и дизайном взаимодействия с пользователем. Потому что я думаю, что инклюзивность — которая, в конечном счете, заключается в том, что мы должны относиться к «другим» не как к другим, а как к нашей части — встроена прямо в само понятие дизайна пользовательского опыта, и я хочу уделить время, чтобы объяснить, почему .
Давайте начнем с рассмотрения «соты взаимодействия с пользователем» Питера Морвилла:
Сота взаимодействия с пользователем.
Соты призваны отобразить взаимосвязанные характеристики, которые формируют пользовательский опыт — хороший или плохой.Общий пользовательский опыт — это гештальт — сумма — всех этих аспектов, полученный с помощью своего рода мысленной математики, которую мы выполняем автоматически и без глубокого рассмотрения отдельных ценностей, которые мы можем присвоить тому или другому.
Обратите внимание, что каждая из них является характеристикой в глазах смотрящего . И кто видит , будь то «мы» или «другие», не является частью графика. То есть: соты не говорят , кто продукт заслуживает доверия, ценный, доступный и т. Д. для .
Мы, конечно, можем предположить, что смотрящий — это «наша аудитория»: группа людей, к которой мы больше всего хотим обратиться и превратить в платящих клиентов. Скажем, платформа веб-дизайна, все члены аудитории заинтересованы в разработке веб-сайтов. Но это одна, относительно незначительная характеристика, когда мы смотрим на все, что составляет человека.
Внутри этой, казалось бы, однородной толпы существует множество идентичностей.Различные расы, вероисповедания, религии, гендерная идентичность, гендерные выражения, социально-экономические классы, семейное происхождение, культуры и десятки других аспектов самости — все они хотят создавать, управлять и развивать веб-сайты.
Следовательно, исключение людей, демонстрирующих какой-либо конкретный оттенок любого из этих фонов, представляет угрозу для общего пользовательского опыта. Что напрямую связано с бизнес-риском, особенно в наши дни, когда один твит может мобилизовать огромное количество людей, чтобы либо превозносить компанию, либо опорочить ее.(Или, давайте посмотрим правде в глаза: и то, и другое.)
Исключительный дизайн, таким образом, оказывает прямое влияние не только на пользовательский опыт, но и на чистую прибыль.
Конечно, вы, , могли бы, , возразить, что инклюзивность создает собственный бизнес-риск, поскольку может оттолкнуть ваших более консервативных пользователей. Но если вы посмотрите на размер и известность компаний, которые сейчас более чем счастливы занять «прогрессивную» инклюзивную позицию по любому количеству вопросов — от гордости ЛГБТК + до токсичной мужественности, довольно легко увидеть надпись на стене: компании посчитали и пришли к выводу, что вознаграждение за инклюзивность намного превышает риск.
Тогда я бы сказал, что определение дизайна пользовательского опыта должно быть таким:
Практика проектирования опыта, который должен быть как можно более полезным, пригодным для использования, найденным, заслуживающим доверия, доступным, желательным и ценным, насколько это возможно для любого пользователь, независимо от его личности.
Когда мы начинаем проектировать для других, мы часто кончаем тем, что проектируем для себя. (Особенно когда мы делаем это без ограничений фреймворка или системы проектирования.) Мы, конечно, можем делать предположения о том, для кого мы проектируем, и, более конкретно, о том, для кого мы хотим разрабатывать, но наши предубеждения по-прежнему определяют способ.
Важно отметить, что этот не является обвинением . Мы не можем избежать предвзятого мышления, потому что оно заложено в нас с первого дня и в значительной степени становится бессознательным. То, что мы, , можем сделать и , — это работать с сознательно, ограничивая или преодолевать наши предубеждения. Вот что делает исследования пользователей такими фундаментальными. Не исследуя различные точки зрения, когнитивные привычки и идентичность нашей аудитории, мы заканчиваем тем, что проектируем так, чтобы соответствовать нашим ожиданиям — и для каждого веб-профессионала это слабость.
Писатели склонны предполагать, что письменный контент будет наиболее эффективным. Дизайнеры будут сильно полагаться на визуальное и / или интерактивное. А разработчики и инженеры… ну, мои предубеждения мешают мне легко заполнить этот пробел.
Дело в том, что когда мы выходим за наши границы и по умолчанию учитываем точку зрения других, мы усиливаем нашу работу, делая ее более доступной и понятной для других. Что делает его более подходящим для всех.
* Потому что, конечно, UX-дизайн, как это обычно практикуется, является капиталистической дисциплиной . Капитализм — это, конечно, политическая философия.
5. Революция без кода наступила
Ничего страшного. Чуть более 10 миллиардов результатов.
Когда дело доходит до демократизации возможностей программного обеспечения, трудно представить себе отрасль, оказывающую большее влияние.
— Калеб Кайзер, рост в AngelList
Если вы хоть немного знакомы с Webflow, вы знаете, что мы не используем код, новый способ мышления о веб-разработке и разработке программного обеспечения, который отказывается от традиционного кодирования. парадигма, в которой код может быть «правильно» произведен только в текстовом редакторе, написанном от руки, в пользу новой визуальной модальности.
Причин нашего энтузиазма по поводу отсутствия кода много, но в конечном итоге они движимы желанием сделать кодирование доступным. Разумеется, не просто для того, чтобы «каждый мог программировать», а для того, чтобы каждый мог наслаждаться возможностью воплощать свои идеи в жизнь.
Вместо того, чтобы брать курс для начинающих по программированию или курс обучения программированию для детей младшего возраста, мы меняем сам способ создания кода.
Другими словами, мы считаем, что пора провести рефакторинг самого кодирования.
Вам не нужно заглядывать в далекую историю, чтобы найти аналогичные преобразования.Просто вернитесь к самому первому графическому интерфейсу пользователя (GUI).
До появления первого графического интерфейса пользователя вычисления осуществлялись с клавиатуры. Основным пользовательским интерфейсом (UI) был терминал — примитивный текстовый редактор, в котором пользователи компьютеров буквально «говорили» компьютеру, что им делать, на загадочном языке команд и ответов. Эта модель интерфейса требовала больших знаний от пользователей, а это означало, что действительно опытных пользователей компьютеров было немного. (И да, те из вас, кто только что вернулся после натиска запросов на ИТ-поддержку от неграмотных членов семьи в День Благодарения: тогда было на хуже.)
Это также ограничивало применимость компьютеров к реальным проблемам. Конечно, они возникли в самых разных средах с высокими знаниями, но они были чем угодно, но только не вездесущими двигателями интеллектуальной работы, которыми они стали сегодня.
Затем появилась мышь (вместе с почти дюжиной других технологий, меняющих правила игры), представленная в так называемой «Матери всех демонстраций».

Как говорится на веб-странице демонстрации в Википедии, эта демонстрация вызвала революцию, которая превратит компьютеры из простых инструментов «обработки чисел» в центры «коммуникации и поиска информации».И хотя на то, чтобы эта демонстрация превратилась в функциональную реальность, потребуются годы, именно эта реальность сделала компьютеры достаточно доступными для достаточно большого населения, чтобы сделать их окончательной технологией 20-го (а теперь и 21-го) века.
Ни один код сейчас не нацелен на то, чтобы сделать еще один шаг вперед в этом море, давая возможность еще более широкому кругу людей не только использовать компьютеры, но и создавать программное обеспечение, которое делает компьютеры такими мощными, без программирования.
Сегодня Webflow занимает особую нишу отказа от кода, которую мы называем «визуальной веб-разработкой».«С 2013 года мы постоянно стремимся сделать основные инструменты интерфейсной веб-разработки — HTML, CSS и JavaScript — значительно более доступными для значительно большего числа людей. И мы с гордостью можем сказать, что здесь, в конце 2019 года, мы позволили тысячам и тысячам людей, которые никогда не считали бы себя веб-разработчиками, создавать красивые и мощные веб-сайты с использованием таких технологий, как сетка CSS, файлы Lottie, контролируемые JavaScript. , и семантический HTML5.
В 2015 году мы начали продвигать эту миссию еще дальше, запустив Webflow CMS, базу данных на базе GraphQL и инструмент публикации, который дает дизайнерам и разработчикам возможность создавать собственные схемы, а затем проектировать вокруг этих полей данных — визуально. .
Здесь, в 2019 году, инструменты управления базами данных и публикации, такие как Webflow CMS, стали ядром всех видов мощных веб-приложений, и мы очень рады внести свой голос в продолжающуюся революцию, которая заключается в отсутствии кода.
Конечно, мы далеко не единственный инструмент без кода.
6. Рост разработчиков визуальных элементов
Конечно, технологии мало что значат без людей, которые их используют.
Итак, параллельно с волной отсутствия инструментария кода возникает рост пользователей инструмента без кода, или «визуального разработчика».»
Так же, как издатели настольных компьютеров, которые использовали такие инструменты, как Microsoft Word / Publisher, Adobe InDesign и другие инструменты, возможно, мало что знали о picas и PostScript, разработчики визуальных элементов могут быть кем угодно, от экспертов по программированию до чистых новичков — но они ‘ я научился владеть машинами перевода, которые превращают проектные решения в функциональный код.
На момент написания (16 декабря 2019 г. — медленный набор кадров) Webflow упоминается в 135 вакансиях. И мы всего лишь одна визуальная сеть
При этом они действуют как множители силы для традиционно обученных программистов, которые десятилетиями создавали веб-сайты и приложения и продолжают это делать.Они автоматизируют задачи, которые раньше требовали утомительного ручного труда. Они преобразуют статические каркасы и макеты в полнофункциональные веб-приложения, которые не только представляют контент для посетителей, но затем принимают данные посетителей, передают их поставщикам услуг электронной почты и базам данных клиентов и превращают их в потенциальных клиентов и, в конечном итоге, на платящих клиентов.
И, что наиболее конкретно, в современных рабочих процессах веб-дизайна они позволяют группам брендов, роста и маркетинга двигаться намного быстрее. В одном ярком примере они превратили цикл обновления веб-сайта из 8-летнего процесса в 8-минутный, как сказала нам Камилла Эспозито из стартапа по совместному использованию автомобилей Getaround в своем выступлении No Code Conf: «Возвращение вашего веб-сайта.»

По мере того, как среда без кода становится все более зрелой и мощной, мы ожидаем, что« визуальный разработчик »станет таким же обычным явлением в объявлениях о вакансиях, как« веб-разработчик »и« веб-дизайнер »сейчас — и в последнем случае мы можем честно увидеть, как «визуальный разработчик» полностью занимает их место.
7. Дизайн занимает свое место за столом. Что теперь?
‍
Когда-нибудь слышали фразу «осторожно, чего хочешь»?

Дизайн уже много лет настаивает на так называемом «месте за столом», то есть голосе на высшем уровне принятия решений в компаниях.И мы все чаще видим, как это происходит. По крайней мере, согласно духу времени. Каждый день появляется все больше и больше статей, в которых говорится, что дизайн является ключевым отличием [вставьте здесь горячее название стартапа]. Контент, ориентированный на дизайн, кажется, становится все более заметным в популярной культуре, и документальные сериалы, такие как «Аннотация», появляются в разговорах о кулерах почти так же часто, как [вставьте сюда все, что дети смотрят в наши дни]. Каждый раз, когда я занимаю место в кафе, слово «UX» звучит в комнате не менее полдюжины раз каждый час — конечно, я живу в самом сердце страны UX, но все же.
И все же, насколько действительно популярна конструкция в высших эшелонах бизнеса? Этот вопрос возникает у меня каждый раз, когда я вижу очередной скандал в Facebook, попавший в заголовки газет, или слышу последние новости по иску о доступности Domino. Я задаюсь вопросом об этом каждый раз, когда вопрос о влиянии Uber или Airbnb на сообщества снова появляется в Twittersphere.
Дело в том, что это ложный вопрос. Дизайн всегда был и был за каждым столом в «Бизнесе.
Они просто не называют себя дизайнерами. Или, в некоторых случаях, цените то, к чему мы пришли, ожидаем, что дизайнеров оценят. Они не обязательно борются за пользователей или даже пытаются сбалансировать пользовательские цели и опыт с бизнес-ценностью. Во многих случаях ценность бизнеса, т. Е. Прибыль для акционеров, является для них действительно главным.
Это не означает, что это ругательство над этими людьми. Не углубляясь в этические трясины, я понимаю, почему они сосредоточены на акционерной стоимости и почему упоминания о «свободе слова», как правило, возникают в их аргументах (хотя они и неуместны).
Это просто исправление. «Дизайн» как таковой не требует ранее не назначенного места за столом. Вместо этого мы часто выступаем за иной взгляд на дизайн. Принципиальный и осознанный подход к проектированию систем (т. Е. Предприятий), который учитывает множество других систем, на которые влияет каждый бизнес, от политического ландшафта до местного рынка жилья.
Итак, вернемся к вышесказанному Эми: когда вы боретесь за место за столом , нужно сосредоточиться на разработке вашей стратегии использования этого места .И, на мой взгляд, ключевой отправной точкой для разработки этой стратегии является признание того, что дизайн очень часто происходит на этом месте. По словам Дона Дрейпера из сериала «Безумцы», вам решать, изменить разговор о дизайне, который там уже происходит.
Потому что, нравится нам это или нет, все на самом деле дизайнеры. (Ага!) Но об этом в следующем разделе.
Конечно, как отмечает здесь Максим Лейзерович:
Получение места за столом дизайнерами не является чисто односторонним делом.Оба бренда, которые хотят дать дизайну место за столом и , дизайнеры, которые хотят его предоставить, должны думать о , как дизайн будет процветать в организации, если она хочет привлекать и удерживать таланты.
И, в подтверждение способности дизайна оказывать положительное влияние «из-за стола», каждая из этих вещей не связана с дизайном — они необходимы для любой современной организации, что будет формировать восприятие бренда любым профессионалом. но и для более широкой публики.
Итак, если вы боролись за место за столом, самое время спросить себя: что вы собираетесь делать с этим местом?
Говорить здесь голосом опыта: создание организации — это невероятная и увлекательная задача. Работа в СМИ о личности и карьере гораздо более динамична, чем пиксели.
8. Роль — это не идентичность
Все ли дизайнеры? Да, как и все писатели.
(Поверьте мне: я профессиональный писатель.И чем больше я пытаюсь отказывать другим в этой роли, тем выше уровень моего стресса и тем тяжелее становится моя работа. Чем больше я включаю точки зрения других писателей, независимо от их индивидуальных навыков, тем лучше становятся мои работы. Хотя это действительно усложняет редактирование строк.)
Разница между вами, титулованным дизайнером, и любым другим человеком, который занимается дизайном без заголовка, не единственная, а градусов . Написание и дизайн — это навыки, а не идентичность, поэтому «быть» писателем или дизайнером больше похоже на то, чтобы занять место в спектре.(Во многом похоже на пол, понимаешь?).
Разница заключается, прежде всего, в уровне навыков, но также в образовании и контексте. Тот факт, что мы все проектируем, не означает, что мы все делаем хорошо .
Однако важно понимать, что ваша роль — это не ваша личность . Не , а вы . Утверждение о том, что писатель, юрист или менеджер по продукту не представляет угрозы для вашей личности не только потому, что это просто навык, но и потому, что это не ваша личность.
Проблема с чрезмерной идентификацией навыка — с учетом того, что это часть вашей личности — состоит в том, что ваша личность может подвергнуться угрозе всевозможных небольших атак. Всякий раз, когда ваша работа подвергается критике, вы становитесь объектом этой критики. Всякий раз, когда «не дизайнер» (или кто-то еще) применяет свои навыки лучше, чем вы, вас превзошли не в навыках, а в идентичности .
9. Хорошо, одна визуальная тенденция: Marquee возвращается, детка!
И я знаю, что мы все взволнованы, взволнованы, взволнованы этим.
Видение веб-дизайна, за которое мы все можем (надеюсь) реализовать
Когда я перечитываю этот пост, я, со своей стороны, не могу не почувствовать пробуждающую надежду. Потому что эти 9 новых тенденций в веб-дизайне предлагают будущее веб-дизайна, которое я не могу не любить.
Веб-дизайн, призванный помочь людям понять, что правда, а что нет. Веб-дизайн для всех, независимо от способностей и личности. Веб-дизайн, включающий авторов, которые делают вещи немного по-другому, то есть кодируют визуально.
Ничего из этого не будет легко. Будет отказ. Найдутся те, кто не хочет жертвовать цифрами ради принципиальной позиции.
Высокие технологии и визуально умопомрачительный [+ Примеры]
Обновление
, октябрь 2020 г .: Тенденции веб-дизайна 2021 уже вышли! Проверь их.
Хотите знать, какими будут тенденции веб-дизайна в 2020 году? В этой статье мы проливаем свет на эту тему.
Тенденции веб-дизайна 2020 года — это абсолютное сочетание визуальной стороны графического дизайна и высокотехнологичной стороны развивающихся технологий.Мы не можем скрыть, что, начав исследование, мы были абсолютно впечатлены современным веб-дизайном. Веб-дизайнеры становятся невероятно креативными, сохраняя при этом функциональность сайтов и чистые от беспорядка. Тем не менее, им удается создавать вещи, которые абсолютно выделяются. Мы видели несколько удивительных примеров CSS-параллакса и красивых микро-анимаций, и мы обязательно увидим все больше и больше интерактивных и анимированных веб-дизайнов в будущем. Давайте больше не будем задерживаться и углубимся в тенденции веб-дизайна 2020 года.
Лучшие тенденции веб-дизайна на 2020 год:
1. Совместная работа фотографий и иллюстраций в веб-дизайне
2. Паттерны в веб-дизайне
3. Черно-белый вечнозеленый веб-дизайн
4. Минималистские веб-сайты с макси-типографикой
5. Ретро-стиль в современном веб-дизайне
6. Штриховой рисунок для чистых и креативных веб-сайтов
7. Иллюстрации для сочетания искусства и дизайна
8. Трехмерные элементы и эффекты движения, которые впечатляют
9. Инновации, которые будут на вершине дизайна веб-сайтов в 2020 году
Реклама
1.Коллаборация фотографий и иллюстраций
Огромная тенденция в веб-дизайне сейчас — комбинировать фотографии с очень простыми рисованными 2D-иллюстрациями. Следуя этой тенденции, иллюстрации будут либо заменять части фотографий, либо взаимодействовать с ними, создавая забавную смесь двух реальностей.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Вас также могут заинтересовать 30 идей дизайна веб-сайтов электронной коммерции для интернет-магазина в 2020 году
2.Паттерны в веб-дизайне
Выкройки
снова вернутся в 2020 году, они очень разнообразны и освежают! Помимо полного покрытия фона, в тенденциях веб-дизайна 2020 года будут очень популярны узоры, которые распространяются только на отдельные части фона. Они создадут модные и современные образы веб-дизайна.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Хотите вдохновиться 40 классными веб-дизайнами с узорчатым фоном?
Реклама
Набор Ultimate Seamless Pattern Designs
Мега-комплект с более чем 1000 рисунков, созданных исключительно GraphicMama
А если вы увлекаетесь узорами, вам обязательно стоит заглянуть в наш премиальный мегапакет с более чем 1000 прекрасных бесшовных узоров в разных стилях и темах.
1114 Бесшовные модели
Полностью редактируемые векторы / Svg, Ai /
Бесшовные файлы Png с высоким разрешением.
Хорошо структурированные и организованные файлы
Посмотрите их
3. Черно-белый вечнозеленый веб-дизайн
Черно-белый веб-дизайн — это стильный, вечнозеленый и всегда модный. Обычно они присутствуют в тенденциях веб-дизайна каждого года, поэтому в 2020 году мы обязательно увидим элегантные черно-белые веб-сайты.Часто они будут минималистичными, содержать макси-типографику и элементы линейного искусства.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
4. Минималистичные сайты с макси-типографикой
Минималистский тренд в веб-дизайне стал популярным несколько лет назад, и сегодня он по-прежнему выглядит современно и стильно. Дизайнеры по-прежнему удаляют ненужные детали и украшения, но, в отличие от пары лет назад, в настоящее время они используют макси-типографику, чтобы выразить свое мнение.Возможно, вы захотите вдохновиться некоторыми креативными идеями дизайна типографики.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Хотели бы вы черпать еще больше вдохновения из этой тенденции? Ознакомьтесь с 20 красивыми минималистскими дизайнами веб-сайтов.
5. Ретро-стиль в современном веб-дизайне
Скоро нас ждет настоящий взрыв из прошлого.Стиль дизайна 50-х и 60-х годов является огромным источником вдохновения для многих веб-дизайнеров. Эффекты, напоминающие нам о ретро, такие как пыль, шум, черно-белые фотографии, более тусклые цвета, будут присутствовать в тенденциях веб-дизайна 2020 года. Возможно, вам также будет интересно ознакомиться с другими примерами ретро-дизайна в наше время.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
6.Штриховой рисунок для чистых и креативных веб-сайтов
Line art — настоящий хит во всех областях графического дизайна. По логике вещей, это тоже нашло свое отражение в веб-дизайне! Веб-сайты с штриховыми иллюстрациями выглядят профессионально, чисто и при этом очень креативно. В 2020 году мы будем часто наблюдать эту тенденцию.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
7. Иллюстрации, сочетающие искусство и дизайн
Иллюстрации в разных стилях веб-дизайна будут одними из самых горячих трендов 2020 года.Мы увидим удивительные произведения искусства — от акварели и пастели до современного и причудливого искусства, такого как персонажи с непропорциональными телами, персонажи без черт лица и многое другое.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
8. 3D-элементы и эффекты движения, которые впечатляют
В наши дни 3D стало неотъемлемой частью графического и веб-дизайна. Уровень глубины и реализма, который он позволяет создавать дизайнерам, пока недостижим для других цифровых технологий.В 2020 году мы увидим множество трехмерных веб-дизайнов — статических, анимированных или интерактивных.
# Интерактивные 3D-эффекты
В 2020 году движение будет более увлекательным, чем когда-либо. Веб-дизайнеры удивят нас интерактивными 3D-эффектами, которые заставят пользователей дольше оставаться на сайте.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
# Статическая 3D-графика
Статические 3D-модели также поразят плавными формами, реалистичным внешним видом и завораживающими цветами.Дизайнеры обычно сохраняют все остальные элементы в минималистском стиле, чтобы общий дизайн выглядел хорошо сбалансированным, чистым и современным.
Посетить веб-сайт
Посетить веб-сайт
Посетить веб-сайт
9. Инновации, которые будут на вершине дизайна веб-сайтов в 2020 году
Современные технологии неизбежно влияют на веб-дизайн. Но какие веб-инновации будут самыми модными в 2020 году?
веб-сайтов в 2020 году станут более интерактивными, чем когда-либо, благодаря растущему использованию чат-ботов.Чат-боты находятся в распоряжении пользователя 24/7, чтобы ответить на наиболее часто задаваемые вопросы и направлять пользователей по сайту. Более того, передовые технологии искусственного интеллекта будут и дальше делать чат-ботов более адекватными, чем когда-либо.
Голосовой интерфейс пользователя и автоматические помощники
Или, другими словами, способность вести реальный разговор с устройствами. Теперь это возможно благодаря технологии искусственного интеллекта и голосового пользовательского интерфейса. В ближайшем будущем мы увидим быстрый рост использования автоматических помощников на веб-сайтах, которые используют технологию голосового пользовательского интерфейса.Беседа с сайтом, который вы посещаете, безусловно, звучит увлекательно, но, что наиболее важно, это поможет людям с ограниченными возможностями лучше взаимодействовать с веб-сайтами.
Взгляните на эти 15 идей дизайна веб-сайтов, которые можно попробовать прямо сейчас + бесплатные материалы для дизайна
Итак,
Дизайн веб-сайтов сильно развился на протяжении многих лет.