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

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

Мы, конечно, можем предположить, что смотрящий — это «наша аудитория»: группа людей, к которой мы больше всего хотим обратиться и превратить в платежеспособных клиентов. *

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

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

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

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

Конечно, вы, , могли бы утверждать, что , что инклюзивность создает собственный бизнес-риск, поскольку может оттолкнуть ваших более консервативных пользователей.Но если вы посмотрите на размер и известность компаний, которые сейчас более чем счастливы занять «прогрессивную» инклюзивную позицию по любому количеству вопросов — от гордости ЛГБТ + до токсичной мужественности, довольно легко увидеть надпись на стене: Предприятия посчитали и пришли к выводу, что вознаграждение за инклюзивность намного превышает риск.

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

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

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

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

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

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

* Потому что, конечно, 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 г. — медленный набор кадров) в 135 вакансиях упоминается Webflow. И мы всего лишь один визуальный инструмент для веб-разработки!

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

И, что наиболее конкретно, в современных рабочих процессах веб-дизайна они позволяют группам брендов, роста и маркетинга двигаться намного быстрее. В одном ярком примере они превратили цикл обновления веб-сайта из 8-летнего процесса в 8-минутный, как сказала нам Камилла Эспозито из стартапа по совместному использованию автомобилей Getaround в своем выступлении No Code Conf «Возвращение вашего веб-сайта».

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

7. Дизайн занимает свое место за столом. Что теперь?

‍

Иногда индустрия UX / дизайна настолько сосредоточена на борьбе за место за столом, что, получив его, они не знают, что делать. Сиденье мало что значит без видения и плана. Место — не победа. Выигрыш в том, чтобы сделать тяжелую работу, которая будет следующей.

— Эми Тибодо (@amythibodeau) 30 ноября 2019 г.

Вы когда-нибудь слышали фразу «осторожны в своих желаниях»?

Design уже много лет настаивает на так называемом «месте за столом», то есть голосе на высшем уровне принятия решений в компаниях.И мы все чаще видим, как это происходит. По крайней мере, согласно духу времени. Каждый день появляется все больше и больше статей, в которых говорится, что дизайн является ключевым отличием [вставьте здесь горячее название стартапа]. Контент, ориентированный на дизайн, кажется, становится все более заметным в популярной культуре, и документальные сериалы, такие как «Аннотация», появляются в разговорах о кулерах почти так же часто, как [вставьте сюда все, что дети смотрят в наши дни]. Каждый раз, когда я занимаю место в кафе, слово «UX» звучит в комнате не менее полдюжины раз в час — конечно, я живу в самом сердце страны UX, но все же.

И все же, какую популярность дизайн действительно набрал в высших эшелонах бизнеса? Этот вопрос возникает у меня каждый раз, когда я вижу очередной скандал в Facebook, попавший в заголовки газет, или слышу последние новости о судебном иске Domino о доступности. Я задаюсь вопросом об этом каждый раз, когда вопрос о влиянии Uber или Airbnb на сообщества снова появляется в Twittersphere.

Дело в том, что это ложный вопрос. Дизайн всегда был и уже был за каждым столом в «Бизнесе.”

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

— Джон Мур Уильямс (@JohnAMWill) 26 октября 2019 г.

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

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

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

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

Потому что, нравится нам это или нет, все действительно дизайнеры. (Ага!) Но об этом в следующем разделе.

Или конечно, как отмечает здесь Максим Лейзерович:

Только организации, у которых есть реальные и продуманные стратегии для решения следующих задач:

• удаленная / распределенная работа
• разнообразие и включение
• дизайн, ориентированный на продукт
• менеджер против ролей IC
• уровень опыта
• этическая практика

, будут лучшие компании для работы.

— Максим Лейзерович (@round) 20 февраля 2019 г.

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

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

Итак, если вы боролись за место за столом, самое время спросить себя: что вы собираетесь делать с этим местом?

Говорить здесь голосом опыта: создание организации — это невероятная и увлекательная задача. Работа в СМИ о личности и карьере гораздо более динамична, чем пиксели.

8. Роль не идентичность

Все ли дизайнеры? Да, все как писатели.

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

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

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

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

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

Но актер Сэм Нил говорит обо всем этом намного лучше, чем я. Итак, тебе, Сэм:

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

Вы не одиноки.Мы все в этом вместе. Поддерживайте. Будь добрым.

❤️pic.twitter.com / mwZ2M48Els

— The Actors Pad (@TheActorsPad) 6 октября 2019 г.

9. Хорошо, одна визуальная тенденция: шатер вернулся, детка!

‍

И я знаю, что мы все взволнованы, взволнованы, взволнованы этим.

Видение веб-дизайна, за которое мы все (надеюсь) сможем реализовать

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

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

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

20 трендов веб-дизайна на 2019 год

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

Ознакомьтесь с нашей последней публикацией: 9 тенденций веб-дизайна на 2020 год

С другой стороны, существует идея, что «творчество — это умение скрыть свои источники» — цитата, которую часто приписывают Альберту Эйнштейну, хотя, скорее, она была придумана юмористом C.E.M. Джоад. (Соответствует, нет?)

В любом случае узнать, что в моде, несложно. Просто оторвите глаза от смартфона и осмотритесь — или не делайте этого!

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

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

Таким образом, тенденции — это история в процессе становления.

Предпочитаете смотреть ваш модный контент?

У нас есть для вас краткое изложение этого сообщения от дизайнера, подкастера и видеоблогера Чарли Прейнджли:

Спасибо, Чарли!

А теперь посмотрим, о чем будут говорить будущие историки сегодня.С небольшой помощью нескольких современных законодателей моды, начиная с Зака ​​Ониско, генерального директора Dribbble, крутого папы и гитарного нудлера.

1. Трехмерное изображение

‍

Как раз тогда, когда вы думали, что будущее плоское, такие бренды, как Pitch и Stripe, вкладывают свой вес в новую, старомодную форму иллюстрации: 3D.

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

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

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

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

2. От игривого словаря до серьезного логотипа — иначе, гельветизация фирменного стиля.

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

Или, как я люблю выражаться: все идентичности брендов в конечном итоге приводят к версии Helvetica.

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

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

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

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

3. Обведенный тип

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

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

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

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

4. Продолжающийся рост брутализма

Мы говорили это в прошлом году и повторяем это снова в этом году:

Будущее будет жестоким.

(Слишком реально? Я знаю. Извините.)

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

Нужны примеры? У нас есть для вас:

И это выходит далеко за рамки внутренних плакатов для встреч и повторяющихся концепций. Недавний ребрендинг Squarespace включает в себя брутализм благодаря суровой визуальной эстетике и дерзкой индивидуальности Нью-Йорка:

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

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

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

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

Но для бруталистского дизайна эти вещи не нужны. Если вы хотите создать доступный подход к бруталистской эстетике, ознакомьтесь с Руководством Дэвида Коупленда по бруталистскому дизайну, которое напоминает нам:

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

5. Более разнообразные, иконоборческие стили иллюстраций

В своем удивительно подробном и очень увлекательном тематическом исследовании своей работы для Slack иллюстратор Алиса Ли напоминает нам:

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

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

Например, стиль фотоколлажа, изучаемый в Medium и Intercom.

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

Трехмерное воплощение в основном плоского стиля Алисы:

И в дико красочных физических / цифровых ландшафтах, таких как та, которую можно увидеть на текущей домашней странице CrowdRise:

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

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

Или «маркетинг жизненного цикла»:

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

6. Более авантюрный и винтажный тип

В то время как работа над дизайном логотипа может продолжать стремиться к однородности, мы и Zack видим, что также появляются некоторые более эксцентричные варианты, такие как принятие Mailchimp (не) известного шрифта Cooper Black (славы Tootsie Roll!) Для фирменный шрифт:

Abstract: восхитительно толстый Vesterbro Black (а также Regular и Heavy) в сочетании с America Mono от Grilli Type:

И восхитительно пухлая Реколета в недавней библиотеке иллюстраций Пабло Стэнли (которая составляет полных отголосков Алисы Ли!), Humaaans.

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

Спасибо за анализ тенденций, Зак!

Наш следующий участник — Саша Гриф, дизайнер, разработчик и предприниматель, живущий в Киото, Япония.Возможно, вы знаете его по его фантастическому (и минималистичному) сайту и новостной рассылке, боковой панели или Vulcan.js.

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

7. Инклюзивный дизайн

Уже написано много строк о важности доступности, но переименуйте его в «Инклюзивный дизайн», и у вас появится совершенно новое невостребованное модное слово, о котором можно писать книги и эссе!

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

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

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

В конце концов: мы все иногда инвалиды.

8. Дизайн + код

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

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

9. Жирный шрифт

По какой-то причине любой список тенденций дизайна всегда должен включать «жирную типографику».«Учитывая, что типографика существует с 1439 года, вы не можете ошибиться с этим. (Ну, за исключением того короткого периода в 2013 году, когда Apple решила, что теперь все должно быть установлено в Helvetica Neue Ultra Light).

Примечание редактора: Виновен по обвинению , Саша. Подробнее об этом ниже.

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

Тем более, что мы запустили…

10. CSS сетка

Святая родинка! Обожаю Грид, чувак !!!

–Пабло Стэнли

Для многих веб-дизайнеров и разработчиков flexbox стал своего рода святым Граалем. Он отвечает на извечный вопрос о том, как правильно центрировать объекты как по вертикали, так и по горизонтали. Это позволяет относительно легко реализовать ранее сложные макеты.Это даже (в буквальном смысле) позволяет использовать легендарный макет «Святой Грааль».

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

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

И еще: никто им не пользуется.

Ну, почти никто. Особенно если смотреть на это относительно flexbox.

Согласно статусу платформы Chrome, примерно 83% просмотров страниц включают flexbox. CSS-сетка? Примерно всего 1,5%.

Почему, спросите вы? Что ж, ответ, как это часто бывает с инструментами веб-верстки, — неравномерная поддержка.

Или, более конкретно, никогда не неожиданное отсутствие поддержки (ненадежной поддержки), предлагаемой Internet Explorer (IE), который, несмотря на то, что Microsoft устарел, по-прежнему непропорционально полагается на многие компании.

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

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

К счастью, вы, , вероятно, не сталкиваетесь с теми же проблемами в большинстве своей работы. А с Webflow вам даже не нужно часами осваивать синтаксис сетки. Вы можете просто использовать это. Cегодня. Визуально. ‍

Начните работу с сеткой в ​​Webflow.

В качестве следующего приглашенного дизайнера-мыслителя я обратился к Лос Монтойе, ведущему дизайнеру социального приложения Mappen и креативному директору Juxta Labs.Вот Лос, своими словами:

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

11. Противоположные подходы к цвету в зависимости от положения на рынке

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

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

12. Сетка разрывает сетку

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

13.Мобильная анимация

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

14. Год великой письменности

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

Вот почему, если вы хотите создать бренд, который любят люди, и ваша работа — дизайнер [Insert Desired Title], вам необходимо укрепить свои навыки повествования и повысить эффективность как писателя. Слишком легко развить отличный вкус с точки зрения визуального дизайна.У вас есть , так много примеров красивых дизайнов, на которых можно учиться. У вас есть проверенные потоки маркетинговых воронок и потоки UX цифровых продуктов, которые легко доступны для вас, поэтому вы можете создать опыт, который легко понять большинству клиентов.

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

Words — это то, как вы общаетесь со своей командой, чтобы эффективно выполнять работу.

Слова — это то, как вы помогаете покупателю влюбиться в ваш бренд.

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

2019 год — это год, когда можно построить что-то достойное любви.

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

15. Слишком много движения

В произведении Шекспира « Как вам это понравится», Розалинда спрашивает: «Можно ли желать слишком много хорошего?»

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

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

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

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

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

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

Что можно сделать из этой тенденции?

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

Далее: маленький оле я.

16. Массивный, доминирующий на экране текст

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

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

И подбрасывает невероятно большие и кнопок для загрузки.

Или возьмите этот снимок из (пока) суперсекретного внутреннего проекта:

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

‍

Даже Huffpost участвует в масштабных махинациях с текстом:

Для справки, это все, что я вижу на своем MacBook Pro:

Мы также видим, как эта массовая текстовая тенденция проявляется в креативном дизайне меню, как вы можете видеть на сайте архитектурной фирмы Dot to Dot:

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

17. Игривый дизайн курсора и анимация

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

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

От точки к точке, например, курсор выполняет много работы:

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

18. Приветствую нового однородного героя

До недавнего времени мы все разделяли видение повсеместного веб-сайта. Выглядело это примерно так:

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

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

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

Et voilà! Взгляните на нового однородного героя.

‍

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

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

Но это точно в моде.

19. Перекрытие всего

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

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

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

И этот настраиваемый коллаж из фото и копии:

А на сайте японского креативного агентства SONICJAM:

‍

20. Год «юзеры» дают отпор

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

И мы устали от всего этого. Нам надоела агрессивность. Заблуждение и нечестность. Пышная риторика о соединении мира перед лицом новостей об утечках, манипуляциях со СМИ и (возможно?) Фальсификациях на выборах.

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

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

А если это так: как исправить дисбаланс? Можем ли мы съесть свой торт и тоже его съесть?

Но вы, читая это, не можете просто ответить на эти вопросы как «пользователь», как часть аудитории.Вы тоже, наверное, производитель. Итак, в 2019 году пора (пора) спросить себя:

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

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

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

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

Здесь мы собрали 15 крупнейших тенденций и идей дизайна веб-сайтов в 2020 году:

1. VUI + GUI

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

VUI, безусловно, одна из основных тенденций дизайна веб-сайтов в 2020 году

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

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

Идеальное сочетание дизайна VUI и GUI создает лучший UX

Однако это не означает, что VUI-дизайн может быть выполнен независимо без хорошего дизайна GUI ( Graphic User Interface ).

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

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

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

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

2. Al + AR

AI и AR станут еще одним основным направлением дизайна веб-сайтов в 2020 году.

AI и чат-боты помогают создавать более «человечные» веб-сайты

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

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

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

AR помогает произвести впечатление на пользователей и легко улучшить UX

В эти годы технология AR （ Augmented Reality ） также разумно применяется в дизайне веб-сайтов и становится одной из самых популярных тенденций.

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

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

Короче говоря, технологии AI и AR будут по-прежнему использоваться для дизайна веб-сайтов и станут преобладающей тенденцией в 2020 году.

3. Минимализм

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

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

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

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

Короткие слова и текстовые рисунки

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

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

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

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

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

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

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

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

4. Жестокость

Брутализм становится еще одной важной тенденцией в дизайне веб-сайтов в 2020 году.

Крупный шрифт, жирный шрифт или рукописный шрифт

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

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

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

Асимметричная или сломанная решетка или необычная компоновка

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

Необычные макеты помогают дизайнерам легко создавать необычный интерфейс веб-сайта.

Дикие движения и анимация

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

5. Стиль ретро-дизайна

Стиль ретро-дизайна также будет популярен в наступающем 2020 году. Почему? Это помогает создать привлекательность старого стиля для посетителей сайта.

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

Веб-сайт в стиле ретро создает иную визуальную привлекательность и также станет одной из тенденций дизайна веб-сайтов в 2020 году.

6. Сайт-рассказчик

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

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

На веб-сайте Storytelling реализован более интересный процесс, позволяющий направлять и вовлекать посетителей.

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

7. Микровзаимодействия и анимация

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

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

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

8. Темный режим или тема

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

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

Темный веб-сайт имеет более высокий цветовой контраст и эффективно снижает нагрузку на глаза посетителей веб-сайта.

Статья по теме : Темный дизайн веб-сайтов: передовой опыт и примеры в 2019 году

9. 3D элементы

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

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

3D-технология оживляет ваш веб-сайт и предлагает посетителям отличный опыт.

10. Параллакс-дизайн

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

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

Статья по теме: 23 лучших примера сайтов с параллакс-скроллингом, которые вдохновят вас

11. Стильные иллюстрации

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

Персонализированные иллюстрации помогают быстро создать имидж бренда

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

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

Объединяйте изображения и иллюстрации для привлечения посетителей

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

12. Яркие и яркие цвета

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

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

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

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

Смелая и яркая цветовая гамма сделает ваш сайт ярким и эмоциональным.

13. Элементы перекрытия

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

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

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

14. Дизайн экрана скольжения

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

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

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

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

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

1). Corel painter — инструмент быстрой иллюстрации

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

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

2). Logaster — быстрый инструмент для создания логотипов для веб-сайтов

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

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

Более того, вы можете просто использовать его для вдохновения при создании логотипа.

3). Mockplus iDoc — мощный инструмент для совместной работы над дизайном

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

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

4). JotForm — конструктор онлайн-форм

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

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

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

Следите за другими отраслями дизайна

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

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

Кто знает? Возможно, они помогут вам создать совершенно другой и неповторимый сайт, не так ли?

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

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

Заключение

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

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

Вам также может понравиться:

Лучшее вдохновение для дизайна веб-сайтов № 4 в 2019 году

Минималистский дизайн: 30 лучших минималистских шаблонов и примеров веб-сайтов

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

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

Последнее обновление 23 октября 2019 г.

В течение ограниченного времени SONDORA MARKETING предлагает БЕСПЛАТНЫЙ SEO-аудит компаниям, заинтересованным в оценке своей текущей и потенциальной органической видимости для создания надежного контент-маркетинга и привлечения потенциальных клиентов. план на 2020 год.

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

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

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

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

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

Лучшие тенденции дизайна электронной коммерции

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

Тенденции адаптивного дизайна

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

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

Но что вы можете ожидать увидеть больше всего в ближайшие пару лет?

1. Смелые цвета + простота

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

Подумайте о перенасыщении.

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

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

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

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

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

Это, без сомнения, смело.

И снова сама суть простоты в дизайне. В целом простота — одна из главных тенденций дизайна электронной коммерции последних лет.

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

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

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

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

Анимация. Анимация. Анимация.

Есть несколько причин, по которым ошибка анимации может укусить:

• Переход между страницами и параллаксная прокрутка (оба имеют корни в 2017 году)
• С эффектами наведения курсора мыши
• Как мобильная анимация

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

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

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

Особо следует отметить 2020 год — мобильная анимация.

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

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

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

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

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

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

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

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

Подумайте об этом…

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

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

Но здесь нужно действовать осторожно.

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

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

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

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

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

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

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

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

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

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

Вот отличный пример из блога Typekit.

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

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

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

5. CSS Grids

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

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

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

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

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

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

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

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

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

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

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

И здесь на помощь приходит SVG.

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

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

7. Рисунки от руки

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

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

Короткий ответ — рисунки от руки очаровательны и человечны.

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

Источник: Enchanting Marketing by Henneke

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

Веб-дизайн 21 века зачастую слишком совершенен.

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

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

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

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

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

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

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

• Ожидается, что к 2022 году голосовой канал станет каналом стоимостью 40 миллиардов долларов (Источник: OC&C Strategy Consultants).
• Во всем мире поставки умных динамиков в третьем квартале 2018 года выросли почти на 200% по сравнению с аналогичным периодом прошлого года (Источник: Strategy Analytics).
• Ожидается, что к 2022 году 55% ​​домохозяйств будут владеть интеллектуальными колонками (Источник: OC&C Strategy Consultants).
• 65% людей в возрасте от 25 до 49 лет разговаривают на своих голосовых устройствах не реже одного раза в день.(Источник: PwC).
• 61% людей в возрасте от 25 до 64 лет говорят, что в будущем они будут чаще использовать свои голосовые устройства. (Источник: PwC).

Внедрение голосовых интерфейсов в основных компаниях остается относительно медленным. Тем не менее, данные свидетельствуют о том, что появление голоса в качестве основного или исключительного варианта ввода / управления для масс — лишь вопрос времени.

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

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

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

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

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

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

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

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

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

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

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

Дизайн Google с закругленными краями вспоминается как хороший пример.

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

(Источник: https://www.nngroup.com/articles/brutalism-antidesign/ )

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

Короче сайт брутально оригинальный (пример 1 и пример 2).