5 новых трендов, которые сделают ваши веб-дизайны еще лучше в 2020


Содержание материала:

Каким должен быть дизайн сайта в 2020

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

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

Британские ученые (нет) из Harvard Business Review недавно провели исследование насчет того, что именно заставляет людей совершать покупки на определенном сайте. Оказалось, что если покупатели чувствуют себя в безопасности, комфортно и непринужденно, находясь на сайте, то у вас становится гораздо больше шансов не просто «продать» им, но и сделать их постоянными клиентами.

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

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

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

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

1. Видео на лендинге

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

Мало вставить старые видосы с YouTube. Вместо этого шагните на новый уровень, создав видео-лендинг.

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

Согласно исследованию Vidyard и Demand Metric «State of Video Marketing 2020», в котором приняли участие 159 специалистов и предпринимателей в сферах B2B и B2C, 69% трафика веб-сайта приходится на видео, а 70% участников сообщили, что видео конвертирует лучше, чем другие формы контента.

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

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

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

Например, проект Make Your Money Matter использовал эффект с красочно проиллюстрированной временной шкалой, проходящей как по горизонтали, так и по вертикали. Она отлично захватывает внимание!

3. Анимированные призывы к действию

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

Однако просто поставить кнопку уже недостаточно. Люди видят кучу стимулов и call-to-action постоянно, поэтому чтобы выделить ваш CTA, нужно что-то другое.

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

Нужны примеры? Хорошо. Скажем, Airbnb использует приложение Lottie для создания графических анимаций поверх своих CTA на всех сайтах и в приложениях.

4. Индивидуальная типографика

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

Пример нестардартной типографики в дизайне сайта. Актуально в 2020

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

5. Искусственный интеллект

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

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

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

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

Пример использования чат-бота

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

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

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

65 Трендов Веб-дизайна в 2020 году. Топовые советы от профи

Привет. На связи Чигарев Илья. Данная подборка трендов веб-дизайна 2020 собрана из 4-х материалов с сайта Behance. Это посты, которые набирают наибольшую популярность и положительные отзывы среди комьюнити дизайнеров. Итак, давайте посмотрим какие тренды выделяют топовые дизайнеры со всего мира.

Безлимитная графика для ваших проектов

Для создания крутого дизайна для сайта, полиграфии, фотографии и прочего, как не крути, вам нужны будут качественные материалы. Это и фотографии, шаблоны, мокапы, иконки, пресеты, кисти и т.д. Все это есть в одном месте и качать можно неограниченно. Сервис ENVATO ELEMENTS с тонной материалов, готовых к скачиванию. Цена подписки от 16,50 $/мес. Переходите по ссылке и посмотрите что вы можете использовать для своего бизнеса и проектов. Подробности вы можете узнать в статье-обзоре.

Главные тренды веб-дизайна в 2020 году

1. Смелые, яркие цвета

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

Проект: Show Go Poster Collection 2020 / Автор: ∆ Studio—JQ ∆

Проект: Daily Posters / Автор: Magdiel Lopez

2. Яркие и насыщенные градиенты

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

Проект: Magic.co / Автор: Ludmila Schevenko

Проект: Electric Objects / Автор: Rose Pilkington

Проект: Gradient Studies / Автор: Evgeniya Righini-Brand

3. Цвет года (Пантон)

PANTONE® 16-1546 Живой коралл (Living Coral)

Проект: Pantone Color of the Year 2020 | Living Coral / Автор: ∆ Studio—JQ ∆

4. Простота и удобство

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

Проект: Creative case / Автор: Nikita Mahaev

Проект: A propos du cancer / Автор: Extra

5. Больше дизайна с дополненной реальностью

Быстрый рост популярности дополненной реальности, или AR, будет заметен не только в индустрии игр, видео и приложений. У AR хорошие шансы охватить область дизайна, особенно за счет популярности мобильных устройств. Вероятным идейным вдохновителем могут стать DIA Studio, применяющие 3D типографику к повседневным объектам.

Проект: DIA / Автор: DIA

6. Экстра глубина (и полуплоский дизайн)

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

Проект: Nike Promotion Ads — Parallax Effect / Автор: Jardson Almeida

Проект: Flyknit Lunar 3 / Автор: Callum Notman

Проект: Made You Look�� 255 | Live a little more / Автор: STUDIOJQ

7. Геометрические элементы

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

Проект: Nike Le Quartier / Автор: Atelier Irradié

Проект: France Colombia cultural season Brand design / Автор: Graphéine

8. Больше творческой фотографии

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

Проект: Aizone / Автор: Sagmeister&Walsh

Проект: Monkifesto / Автор: Snask

Проект: Nike AMD Revolution / Автор: Happy Finish

9. Дуплекс

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

Проект: Stranger Things Concept UI UX Design Web / Автор: Manuel Rovira

10. Брутализм

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

Проект: DoD Cyber Guide / Автор: Marçal Prats

Проект: Power A political party / Автор: Bruce Vansteenwinkel

11. Анимация, Gift-картинки и синемаграфика

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

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

Проект: RED / Автор: Kevin Hou

Проект: cinemagraphs.com / Автор: Kevin Burg, Jamie Beck

Проект: Strong Women / Автор: Andreea Robescu

12. Генеративный дизайн

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

Проект: Debrecen 2023 European Capital of Culture / Автор: Classmate Studio

Проект: Sydney School of Entrepreneurship / Автор: For The People

Проект: Archdiploma Dynamic Identity / Автор: Process

13. Набор цветов и узоров из 80-90-х

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

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

Проект: Yes To All / Автор: Nick Liefhebber

Проект: LOGOFOLIO 2020 / Автор: 268 Estúdio Design

Проект: 80’s inspired Pattern / Автор: Rahul Das

14. Кастомные иллюстрации

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

Проект: Bitcoin Illustrations Freebies / Автор: Milo Themes

Проект: Illustrations for Koypo Industries / Автор: Milo Themes

Проект: Lifecycle / Автор: Paperpillar Studio

15. Иллюстрации в миксе с фотографией

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

Проект: Magazine covers / Автор: Andreea Robescu

Проект: Insects Love / Автор: Andreea Robescu

16. Реальные фото

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

17. Изометрический дизайн и фотография

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

Проект: Ultraviolet Break of Day / Автор: Field.io

Проект: Abstractions Vol.1 / Автор: Mohamed Samir

Проект: Isometric House / Автор: Angela Chan

18. Сочетание 2D и 3D

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

Проект: Daily Posters / Автор: Baugasm

19. Монохром

За последние несколько месяцев появилось множество композиций в одной цветовой гамме, на которых фон и объект на переднем плане или шрифт и тени/3D эффекты одинакового цвета.

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

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

Проект: Magrela Popcorn / Автор: Hugo Aranha

Проект: Amazonia Beverages / Автор: Hugo Aranha

Проект: Nespresso Expertise / Автор: JVG ™

20. Дудлы (иллюстрации, нарисованные вручную)

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

Проект: Toasted Pets! / Автор: Brosmind ®

Проект: Awake Festival Proposal / Автор: Milo Themes

Проект: Art Hub Bahrain | Packaging / Автор: Elias Madan

21. Смешение и пересечение стилей

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

Проект: Styled Social Media kit / Автор: Maksat Amirzhanuly

Дизайн логотипа

22. Адаптивные лого

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

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

Проект: Responsive Logos / Автор: Joe Harrison

Автор: Design Studio

23. Логотипы с анимацией

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

Проект: Type With Pride Gilbert font / Автор: Fontself Team

Проект: Logo Visual identity / Автор: Mariusz Mitkow

24. Яркие и забавные лого

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

Проекты: Axel Flores , Vladimir Lifanov , Silvestri Thierry , Vadim Carazan , Onrepeat Studio , Serafim Mendes

25. Негативное пространство

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

Проекты: SeisTrece Studio , Vadim Carazan , Quim Marin , Bureau Rabensteiner , Andrei Traista

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

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

Проекты: islam biko , Quim Marin , Silvestri Thierry , Vadim Carazan

27. Монограммы

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

Проекты: Milo Themes , Romain Billaud

28. Градиенты

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

Проекты: MICHAEL SPITZ , Nicholas Slater , Jeroen van Eerden , Vadim Carazan

29. Наложения

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

Проекты: CaveLantern , Fontself Team , Rosie Manning

Веб-дизайн (Ui/Ux)

30. Концепция Mobile First

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

Проект: Food Drinks app Interaction Collection / Автор: Johny vino™ .

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

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

Элементы становятся текучими: кнопки могут менять форму, и все поверхности скрывают анимированные сценарии, ожидающие прикосновения и активации. Готовы спорить, что они не покинут пьедестал и в 2020 году.

Проект: Brewskies v2 / Автор: Kevin Yang

Проект: Gesichtspunkt / Автор: Alim Maasoglu

32. Встроенная анимация

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

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

Проект: inturn website / Автор: INTURN

33. Креативные экраны загрузки

Сайты, использующих скучные экраны загрузки, устарели. Почему бы не компенсировать пользователю время вынужденного ожидания креативным подходом? Ниже приведены 2 выдающихся примера применения креативных вариантов загрузки сайтами Contemple и Awwwards.

Проект: Awwwards Conference / Автор: Adoratorio

34. Раскладка с ломаной «сеткой»

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

Проект: The Refugee Nation Web Design Branding / Автор: Justin Au

Проект: Ueno Concepts / Автор: Ben Mingo

35. Разбивка страницы

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

Проект: Product Landing Page UI / Автор: Dinesh Shrestha

Проект: Design Thinking / Автор: Radowan Nakif Rehan

36. Больше (интерактивного) 3D в оформлении

Главный тренд, который признает современный веб дизайн 2020 — восхождение (интерактивных) 3D элементов, экспериментирующих с глубиной, движением, текстурой и перспективой. Использование 3D элементов и 3D среды делает каждый веб-сайт выcокоуникальным, улучшая его внешний вид и/или пользовательский опыт. В качестве примера можно привести Atacac, который создал интерактивный футуристичный шоу-рум виртуальной реальности, позволяющий посетителям сайта рассмотреть каждый предмет одежды со всех сторон. Другой яркий пример — вращающаяся 3D скульптура сайта The Artery.

Проект: Atacac 2020 Yearbook

Проект: The Artery

37. Закругленные углы и плавные формы

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

Проект: LuxuryClean UIUX iOS App / Автор: Mariusz Mitkow

Проект: Landing page project design / Автор: Mariusz Mitkow

38. Фоны с движущимися элементами

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

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

Проект: Wibicom / Автор: Wibicom Agency

39. Футуристические узоры

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

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

Проект: Crown Tech / Автор: Jan Wolinger

Проект: SpaceShip / Автор: Arif Rachman Hakim

Проект: Data Visualization Concept / Автор: Mario Šimić

40. Монохромные иконки

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

Проект: Icon Design / Автор: Eaton

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

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

Проект: Alfred icons / Автор: Andrea O

Проект: Icons / Автор: Alisa_

42. Скроллинг с Parallax

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

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

Проект: Dex Multi-Layer Parallax / Автор: Milo Themes

43. Мондрианизм

Желание свободы и эквилибриума (гармонии) — врожденное стремление человека (по причине присутствия в нем вселенной)», сказал Пит Мондриан. Мондрианизм станет трендом 2020 года: стиль, в котором соединяются базовые цвета — красный, желтый и синий, создавая впечатление чистоты, гармонии и уравновешенности.

Топ-пост этого месяца:  Россияне создали новый метод шифрования данных в облаке

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

Проект: Mondrian / Автор: Stugbear

Проект: Guernica / Автор: Shota

Типографика

44. 3D — моделирование

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

Проект: Atypical / Автор: Pawel Nolbert

Проект: Alphabet Project / Автор: Serafim Mendes

Проект: RE NEON vI / Автор: Omar. Aqil

45. Жирная типографика

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

Проект: Club AVi’s XII-year Anniversary Posters Series / Автор: Milo Themes

Проект: TEDxGroningen / Автор: Rudmer van Hulzen

46. Serif шрифты

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

Проект: Custom Type Design / Автор: Moshik Nadav Typography

Проект: Lux Naturalis Gala Invitation

47. Геометрический шрифт

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

Проект: VitrineMedia / Автор: Graphéine

Проект: Sydney School of Entrepreneurship / Автор: For The People

48. Кастомные шрифты

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

Проект: Lingerie XO The Sexiest Most Powerful Typeface Yet / Автор: Moshik Nadav Typography

Автор: Jeanne Bataille

49. Эксперименты с выравниванием и кернинг

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

Проект: Studio Studio / Автор: Rudmer van Hulzen

Проект: nyMusikk annual report 2020 / Автор: Non-Format

50. Экспериментальная типографика

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

Проект: Experimental Chinese Typography / Автор: Letitia Lin

51. Типографика в миксе реальными фото

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

52. Креативная типографика

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

Проект: ILOVEDUST — 3D TYPE COLLECTION 1 / Автор: ILOVEDUST

Проект: Typography 3D — 9 / Автор: Alexis Persani

Дизайн упаковки

53. Плоский дизайн

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

Проект: Cheddar-Cheese-Melt-Mcdonalds-Packaging / Автор: Mostafa Abdelmawla

Проект: The-Gang / Автор: MARKA NETWORK

Проект: Melio / Автор: Rachael Batley

54. Минималистский дизайн

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

Проект: Sarta-Milano / Автор: MARKA NETWORK

Проект: Gyalmo / Автор: Łobzowska Studio

55. Узоры и фигуры

Геометрические

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

Проект: NICHE-Tea / Автор: IWANT design

Кастомные фигуры и элементы

Персонализированный дизайн — обязательная составляющая в построении идентичности бренда.

Проект: aleFanty / Автор: less

Проект: Nature Organic Chocolates / Автор: Mike Karolos

Дудлы

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

Проект: Zoe-Juices / Автор: Beetroot Design

Винтаж

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

Проект: Mutti Special Edition for FICO Eataly World / Автор: Auge Design

56. Смелая типографика

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

Проект: Amilk & Adidas / Автор: Duy Dao

57. Цвета

Дерзкие цвета

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

Проект: Deker-rebranding / Автор: less

Проект: Mochila / Автор: Sweety & Co.

Пастельные цвета

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

Проект: Freshly Baked / Автор: Design Happy

Проект: Ela cosmetics / Автор: ChocoToy cute

58. Необычные текстуры и формы

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

Проект: Sprout Green Paulownia Wooden Box / Автор: Yinjue

Проект: Eco bamboo tooth brush / Автор: Margas Family

59. Голографический эффект

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

Проект: EAT ME / Автор: PACKVISION AGENCY

Проект: Sphynx / Автор: Anagrama Studio

60. Градиенты на упаковке

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

Проект: YOU & OIL natural cosmetics / Автор: Irmantas Savulionis

61. 3D натюрморты

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

Проект: Squarespace stillife / Автор: MVSM

Проект: Adobe Government / Автор: Peter Tarka

Проект: Audi Q-Riosity / Автор: Peter Tarka

62. Абстрактные фигуры

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

Проект: Logitech CRAFT / Автор: Pawel Nolbert

Проект: SWEET SPIRALS / Автор: Kirill Maksimchuk

63. 3D отрисовка в стиле металлик

3D отрисовка в стиле металлик смотрится эффектно и несомненно относится к трендам, которые интересно отслеживать в 2020.

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

Проект: Grand Spectacular 2020 / Автор: Mustaali Raj

Проект: Various Concepts / Автор: Oleg Morozov

Проект: NIKE FC 3D Golden balls in the real world / Автор: T A V O .

64. 3D графика с анимацией

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

Проект: NIKOPICTO SHOWREEL 2020 / Автор: Nikopicto

65. Очень реалистичное 3D

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

Проект: YOOX: Make a Wish / Автор: JVG ™

Проект: Air Max ’17 / Автор: Berd .

Статья собрана из источников:

Спасибо, дорогой друг, что дочитал данный лонгрид с трендами веб дизайна 2020 до конца. На его сбор, перевод и публикацию ушло 8 дней и если вам не сложно уделите 30 секунд, чтобы поделиться им в соц.сетях или на своем ресурсе, тем самым вы очень поможете распространить данный материал. Спасибо большое =)

5 новых трендов, которые сделают ваши веб-дизайны еще лучше в 2020

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

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

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

1. Нарисованные от руки и 3D иллюстрации

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

Если говорить о трендах, то в 2020-2020 годах на пике популярности будут изображения, нарисованные от руки (этой «фишкой» дизайна уже активно пользуются такие мировые гиганты как Dropbox, Slack и Intercom) и 3D картинки.

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

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

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

2. Видео

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

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

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

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

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

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

4. Яркий фон

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

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

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

5. Орнаменты из геометрических фигур и шаблонов

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

6. Разделенный экран

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

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

7. Градиенты


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

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

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

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

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

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

Вас также могут заинтересовать следующие материалы:

Веб-дизайн 2020. Основные тренды

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

Веб-дизайн 2020 — что новенького

Вот основные тренды веб-дизайна 2020, на которые стоит обратить внимание:

  • Большой, очень большой шрифт
  • Асимметричный макет
  • Фоновое видео
  • 3D дизайн
  • Пользовательские изображения
  • Скрытая навигация
  • Параллакс эффект
  • Голосовой интерфейс

Большой шрифт

Большой жирный шрифт в тренде уже 3-ий год. Но не стоит увлекаться и выделять весь текст жирным. Хотя…

Это Language Media, компания, которая занимается развитием бренда. Использование bold шрифта действительно привлекает внимание посетителей.

Делать так же или нет — решать вам.

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

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

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

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

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

Видео в качестве фонового изображения — тренд, который появился в 2020.

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

В общем, если размещение видео на вашем сайте уместно — смело размещайте.

Вот пример сайта с видео в качестве фона. Осторожно! Можно залипнуть:)

3D дизайн

Еще один тренд веб-дизайна 2020 — использование 3D элементов. Посмотрите, как это делают на сайте Campo Alle Comete.

Похоже на сказку. Более того, с помощью 3D графики они смогли рассказать историю бренда.

И еще — проект BBC Earth. Это вообще крутяк!

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

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

Это еще одна возможность завоевать популярность в интернете и повысить конверсию.

Скрытое меню

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

Если, например, меню сайта состоит из пунктов, которые просто не влезают в одну строку — используйте скрытое меню.

Это удобно. И в тренде:)

Параллакс эффект

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

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

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

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

Заключение

Вот такой он, веб-дизайн 2020. Что применять, а что оставлять — решать вам.

Надеюсь, статья была для вас полезной.

Читайте также:

Какие тренды веб-дизайна были в 2020 и 2020.

Пошаговое руководство о том, как сделать сайт на WordPress.

Понравилась статья? Пожалуйста, сделайте репост:)

И подписывайтесь на нас в Facebook, Instagram и YouTube.

5 новых трендов, которые сделают ваши веб-дизайны еще лучше в 2020

Дата публикации: 2020-04-18

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

1. Шрифты с засечками

Какое-то время в мире веб-типографики доминировали шрифты без засечек. На наших экранах красовались такие красивые шрифты, как Maven Pro, Futura и Helvetica Neue, они стали «must have» для обычного дизайнера. Однако сейчас в моду снова входят шрифты с засечками (не только в своей стандартной форме, но и в более забавных, модернизированных версиях).

На наших глазах в 2020 шрифты с засечками набрали популярность, все больше и больше дизайнеров шрифтов стали разрабатывать модернизированные версии шрифтов с засечками. Шрифты Slab Tall X, Justus и Novello изменили сам подход применения шрифтов с засечками в веб-дизайне.

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

2020 подарил нам мега хит, сериал очень странные дела: короткое открытие сериала Netflix – это визуальное наслаждение, а шрифт с засечками, анимированный красно-неоновыми огнями, чертовски привлекателен. Интересный факт: шрифт в названии сериала был позаимствован из нескольких романов Стивена Кинга. В сериале используется модифицированная версия ITC Benguiat, созданная Ed Benguiat. Как и множество других трендов в дизайне, шрифты с засечками могут входить в моду спустя годы или даже десятилетия.

Не слышали про очень странные дела? Шрифты с засечками применялись в паре оскароносных фильмов, таких как медвежья история, комната и омерзительная восьмерка!

2. Естественные цветовые палитры

Недавно сайт Pantone объявил «greenery» цветом 2020 года. Цвет символизирует новое начало, что уместно, учитывая текущие события в мире. Leatrice Eisemen, исполнительный директор Pantone Color Institute заявила: «Зелень врывается в 2020 и дарит нам надежду, которой так не хватает обществу на фоне сложной социальной и политической обстановки».

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

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

Естественный не значит «коричневый» или «Greenery» с сайта Pantone, цвета можно смешивать и подбирать. Тренды домашнего декора в 2020 были в значительной степени прикованы к естественным цветовым схемам и отлично продемонстрировали, как можно создавать привлекательные макеты без ярких цветов.

3. Мега меню

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

На сайте Huffington Post уже довольно давно реализована своя версия мега меню.

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

4. Перекрывающий контент

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

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

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

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

5. Градиенты (опять?)

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

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

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

Заключение

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

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

Топ-пост этого месяца:  Brand Lift в Яндекс.Директ что это, как работает, как настроить

Автор: Gabrielle Gosha

Редакция: Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

2020 Web Design Trends: 10 Stunning Web Design Trends to Totally Hit

For a limited time, SONDORA MARKETING is offering a FREE SEO Audit to companies interested in assessing their current & potential organic visibility in order to build a robust content marketing & lead generation plan for 2020. Let’s get started?

If the last couple of months were setting a grade, then 2020 is all set to be a breathtaking experience in web design. Couple that with the advancement in display technology for devices most people use to consume web content and web designers will not go wrong to splash a dash of vibrant colors and creative mixes not tried before.

Table of Contents

10 Stunning Trends of Web Design to Totally Hit in 2020-2021

Some trends, such as gradients, are making a comeback although this time as dynamic gradients. That means if flat design decides to take a nap, it could die a sure death starting in 2020 (which is where hard-to-spot ghost buttons are headed). And dynamic gradients could take over the entire darn space – at least for a while.

But then again, with pioneers such as Google and Apple backing flat design, this year might see an injection of depth and color into the minimalist concept. Over the past couple of months, it has been evident flat design can accommodate splashes of deeper and more energetic colors when afforded the attention and experimental dash it deserves.

In any case, the vast majority of designers and developers are focusing their attention on two distinct areas of web design trends for 2020 and beyond:

Top Ecommerce Design Trends

With ecommerce having already taken over as the new norm for tens of millions of consumers, it’s all about giving the online shopper exactly what they want in terms of user experience/interface (UX/UI) and visual appeal. For the most part, the top ecommerce design trends for the immediate future at least focus on usability, speed, and simplicity. The quicker and easier it is to get their hands on whatever it is they want, the better.

Responsive Design Trends

Likewise, we’ve already entered an era where mobile web traffic has comfortably overtaken more traditional desktop traffic in many key regions. Globally, mobile traffic is responsible for approximately 52% of all web traffic. By the end of 2020, 63% of all mobile phone users will access the Internet primarily via their device. Hence, there’s never been a more important time to focus on the leading responsive design trends, approached entirely from the perspective of the end-user.

Taking a look at things at a more general level, there are several key web design trends that are already proving popular among developers worldwide. Some are continuations of existing trends, and others bring bold new features and functionalities into the mix.

But which can you expect to see the most of over the next couple of years?

Want to see the Websites we designed?

Bold Colors + Simplicity

As more brands seek to stand out among a sea of competitors online, more website owners will continue to adopt bold and bright colors.

Think of supersaturation.

Not only are brilliant and deep colors immersive, but they are also attention-grabbers, which are something many online brands can use.

Not only that. Going against the grain, where most web designs have defaulted towards safe shades and shadows, demonstrates a brand’s forward-thinking, daring, and even eccentric personality. And, depending on that particular brand’s target market, that can be a great thing that induces loyalty and association.

It helps that more device screens are adopting In-Plane Switching (IPS) technology, which will make bold colors stand out beautifully for the world to enjoy.

Here’s an excellent example by Egwineco.com; see how they use bold colors to exemplify each can.

Looks crispy to me! Simple, effective, and the kind of stunning website design that makes you want to reach into the screen and grab the product. The inclusion of a simple serving suggestion adds further weight to the message.

That’s bold, no doubt.

And again, the very essence of simplicity in design. Simplicity, in general, is one of the top e-commerce design trends of recent years.

The use of bold colors also reflects the growing sophistication of consumer technology in general. These days, most everyday consumers carry ultra-powerful smartphones that are capable of displaying incredible eye-catching imagery. Bold and beautiful imagery has become the norm today’s consumer expects.

Animations, Integrated GIFs, and Dynamic Illustrations

The video almost went big in 2020. But slow page load times are making it a tough-sell this far, seeing that slow web pages will make you lose readers (potential customers).

Yet motion graphics are pretty popular with readers across the board. So what is taking video’s place?

Animation. Animation. Animation.

There are a couple of ways the animation bug could bite:

  • A transition between pages and parallax scrolling (both of which have roots in 2020)
  • With mouseover effects
  • As mobile animation

These motion graphics tend to take up less time to load compared to outright motion pictures such as good-quality video (despite having a range of possible use cases).

Not only do these motion graphics add spunk and persona to your overall brand, when well executed, but also the integrated animations, GIFs, and custom illustrations can help illustrate what you stand for and tell your story—in a cool, clear and confident manner too.

Shopify illustrates how Polaris is meant to be a guiding light. Works better than photography here!

Of particular note for 2020 is mobile animation.

Mobile-first has been a web design trend for a while now, and mobile’s colossal uptake (over the desktop, no doubt) will continue to drive accelerated enthusiasm for the mobile animation to new heights from 2020.

Illustration, on the other hand, can make it easy for product brands to demonstrate to potential users how to use the product—or help the reader to preview a site’s pages.

Even e-commerce sites could use custom illustrations to help online shoppers navigate through product pages and see how a product works beforehand, how to configure filters and shopping carts and guide them to the checkout page.

Still, “serious” brands can utilize custom animation and illustration to inject fun and pizzazz into a buyers journey or sales funnel. Or to simply keep the reader’s attention while the page loads (such as dadadata.com does).

With advancements in web-based, AI and big data technologies, animation and 3D effects can swoop in to offer less stringent and bland data visualization. Then maybe more people would care to look up the numbers twice.

One of the only provisos with animations being the careful consideration of mobile site visitors. Depending on the size and nature of the device used, it may be difficult or even impossible to provide the same experience for mobile audiences.

Nevertheless, there are many ways to use animation to connect and cement stronger relationships with customers.

Asymmetric Layouts

Most websites are grid-based, obsessively orderly bland fields were playing it safe is the order of the day. Not that well-arranged homepages are a sin, but in 2020, asymmetrical structures are receiving adoptions in a bold bid towards flourishing individuality, brutalism, and unbalanced fun and enthusiasm.

Personal websites, in particular, are increasingly taking this idea to titan levels. Broken-grid structures are especially appealing due to their perceived uniqueness and dogged assertiveness.

But there’s a need to tread carefully here.

Brands with significantly large amounts of live content might find deploying asymmetric design onsets a chaotic web experience for their readers. So, such a brand would do well to reconsider the idea and switch on to a more fitting yet personable design – if they are to keep users happy.

We might as well use dadadata.com again. They use a combination of asymmetric structure and dynamic background, which flows into action as you move your mouse’s pointer to browse:

How audacious is that (or how quickly things can get out of order, in a nice way)?

Of course, there is such a thing as taking even the most prevalent web design trends too far. The key to stunning website design when working with asymmetry lying (ironically) in balance. To create a sense of balance in an asymmetric design, it’s important to ensure that no part of the page is significantly ‘heavier’ than the rest. Using larger images is fine, under the condition that they are perfectly balanced with text, space, and other elements.

Irrespective of how complex or otherwise the design may be, the eye of the viewer always hits the larger on-page elements first, before traveling to its smaller accompanying elements.

Loud and Proud Typography

Typography as visual is not entirely a new web design trend in 2020, now is it?

But while previous to 2020 typeface design made use of traditional san serif fonts to say it loud, the emerging crop of typefaces are set to be bolder, dogged and entirely hard to miss.

Sometimes words speak louder than the thousand words a photo might yell out. For those times, deploying big, bold and custom fonts to usher in more elaborate typefaces makes a ton of sense. With more tools and devices available to support custom fonts, 2020 is a big year to make bold statements that set you apart from the crowd.

Variable fonts are coming on strong as well. A variable font is fundamentally a single, dynamic font that changes to appear like multiple fonts.

Here is an excellent example by Typekit Blog.

OpenFormat is officially supporting the new trend. In fact, type designers can easily interpolate individual glyphs alongside up to 64,000 axes of variation—from width to weight and so on. So adventurous typeface designers will have a wide variety of options to play around with and flourish.

And, of course, typography counts for something for any online business that appreciates (wants, actually) to tap and leverage the power of search engine optimization by using targeted, yet well-designed keywords.

Nevertheless, there’s much to be said for simplicity and basic readability. Taking things to extremes with illegible fonts in a vain attempt to be creative can be off-putting and counterproductive. Then there’s the importance of balancing loud and proud typography with mobile responsiveness. The issue is that typography that does the business on a large desktop screen might not be quite as suitable for a tiny smartphone. Don’t shortchange your mobile visitors for the benefit of your desktop traffic.

CSS Grids

Here is a web design trend born to solve the evergreen responsive design question.

In recent times, online brands have had to decide between creating a mobile-only or desktop-only site. And designers have had to configure those sites to detect what device a visitor is using, so the latter can be re-directed to a version of one website that suits their device size.

And while it has been official since 2020 that more people now browse the web through their mobile devices than on desktops, a smart CSS grid offers a brilliant option to flex one site into multiple versions to fit a user’s screen size (instead of opting for mobile-only web design). From the perspective of the end-user, this is by far one of the most important responsive design trends of recent years.

As touched upon previously, mobile web traffic volumes have already overtaken traditional desktop traffic in the majority of key markets worldwide. The fact that Google itself continues to demonstrate a strong commitment to mobile-friendly websites really says all that needs to be said.

The latest advance in responsive web design, CSS grids ensure every visitor is presented with the same high-quality experience irrespective of the size, type, and nature of the device used to access the website. The layout system allows the web owner to organize content into rows and columns that respond to the user’s screen size. What better way to demonstrate this than bring up a visual?

If you are wondering how to capitalize on this most important of 2020 Responsive Design Trends, Robin Rendle breaks the process down in this actionable post.

Scalable Vector Graphics to Boost Mobile Prioritization

People love multimedia, and sites that host engaging multimedia content score higher than text-only webpages when it comes to engaging and retaining visitors.

But in the past, websites with rich content have had to suffer slower page-load times thanks to traditional file formats such as GIF, PNG, GIF, and other video formats. These formats have been notoriously anti-mobile.

Now Google recently made everyone aware they’ll soon be using mobile-first indexing results to rank websites. This statement doesn’t come as big news seeing the number of people using mobile devices quelled desktop traffic since two years ago.

What this means for website owners is it is time to make the early bird switch to responsive, mobile-first designs that put mobile prioritization at the heart of the design process – without sacrificing rich visual content that enchants visitors.

And that’s where SVG comes in.

These are vector images that scale with the size of a screen while upholding the quality of the original graphics. SVGs are not pixels, which is a significant contributor to their scalability aspect. Another critically important responsive design trend for today and for years to come, SVGs ensure the consistent quality of the user experience for all mobile visitors.

Rather than some getting the full website experience and others being shortchanged, SVGs are all about consistent mobile performance – essential in a mobile-first web society.

Hand Drawings

As more webmasters realize a website represents more than an online address, hand-drawn elements that add a unique sense of character to website pages will pop up more often.

This web design trend took off on the back of two other growing web design trends in recent times – bold typography and custom illustrations. But given the sophistication and technological advancement of most web design trends for 2020, what’s the appeal of hand drawings? Why not stick with the high-resolution imagery and photography more typically associated with stunning website design?

The short answer – hand drawings are both charming and human.

You can utilize hand drawings to enlighten, engage, and enchant while oozing personality and standing out from the crowd – a massive differentiator among the billions of quality websites choking for attention around the web.

Following the usual web design trends with 4k imagery and inspiring photography is always an option. Nevertheless, it’s important to consider one key fact:

21st-century web design is often too perfect.

Everything is far too immaculate and flawless to have been produced by anything but a machine. By contrast, throw a hand drawing into the mix, and you immediately add the human element to your pages. Particularly if the drawing is a little on the rough side – something most non-artists will relate to much better.

Anyone can shoot a bunch of beautiful photographs and then arrange them on a website. Nevertheless, it says something about your character (and that if your business) if you draw something by hand and display it with pride. Hire help to produce your pictures if you wish, but nothing says more about an online business than a hand-drawn picture or two from the team behind the scenes.

Voice-capable Interfaces

Attention spans are fleeting. And smart webmasters know they need to team up with progressive web designers to capture and lead an increasingly distracted readership.

With millions of devices hosting smart virtual assistants like Siri, Google Now and Cortana, more people are embracing voice over text. Primarily due to the convenience of speaking directly into a device, rather than taking the time to enter your queries or requests manually. Web developers can take advantage and treat busy audiences to less effort browsing by levering the more engaging voice-powered model.

Device screens are also becoming smaller and more crowded, and voice-powered models take up little (if any) space and personalize content delivery in a way text might not.

Things may have gotten off to a slow start, but the popularity of voice control/input is finally hitting its stride. The following statistics illustrate how and why voice is one of the most important web design trends for 2020 and beyond:

  • Voice is expected to be a $40 billion channel by 2022. (Source: OC&C Strategy Consultants).
  • Globally, smart speaker shipments grew nearly 200% YOY in Q3 2020. (Source: Strategy Analytics).
  • 55% of households are expected to own smart speaker devices by 2022. (Source: OC&C Strategy Consultants).
  • 65% of 25-49-year-olds speak to their voice-enabled devices at least once per day. (Source: PwC).
  • 61% of 25-64-year-olds say they’ll use their voice devices more in the future. (Source: PwC).

The introduction of voice-capable interfaces by mainstream businesses remains relatively slow. Nonetheless, evidence suggests it’s only a matter of time before voice takes over as the primary or exclusive input/control option for the masses.

Artificial Intelligence and Advanced Machine Learning Infusion

The social media giant, Facebook, welcomed 2020 by releasing their predictions for social media trends to take off in the year ahead. Three among those were (Social) Augmented Reality, Artificial Intelligence, and Machine Learning.

For UX designers looking beyond 2020, you’ll be enlightened to know the UI of tomorrow is headed towards doing away with the traditional homepage.

A bubbling trend is to swap it for more targeted and personalized landing pages geared along with use cases and context.

Advanced machine learning will help webmasters, web developers, and UX/UI designers to capture readers’ details based on their browser history and location, for example.

In turn, this information will help website owners, developers and designers to come up with relevant web pages that land individuals based on the kind of information, product or service they’d be looking for on say, an e-commerce website.

Artificial intelligence is no newcomer to the web design and development landscape. Any automated system whatsoever that provides a personalized experience based on the user’s preferences and perceived behaviors qualify as AI. Likewise, Adobe Sensei and TheGrid are offering a stack of tools to help designers move with speed to conquer this growing trend.

It’s just that further down the line, the average web user will begin to expect (and demand) far more multi-dimensional personalization of their online experiences. Online experiences where the websites they visit and interact with know what they want before they even realize it themselves.

Brutalism in Web Design

Before material and flat design popped into the scene, stringent grid layouts with sharp edges ruled over the web design block.

We have seen in the past year big brands embrace organic designs with their soft, curved lines, shapes and patterns – true works of art meant to add a dash of authentic fun and help uncover the brand behind the design by humanizing them to the target audience.

Google’s rounded-edge designs flash to mind as a good example.

Towards the end of 2020, a new tide blew in that sought to redefine the traditional web design layout. The incoming results highlight a branch from good old static-print-design-like websites with organized, conformist layouts. The aim is to inspire originality and blatant individuality to foster a sense of belonging among target audiences.

From a mix of horizontal and vertical text to color clashing, you’ll recognize it when you see it because a website sporting the new look will have distinct asymmetrical visuals that are in open defiance to conservative website layouts.

In short, the site is brutally original (example 1 and example 2).

What’s more, Brutalism has always been associated with a certain sense of functionality and purpose, over and above unnecessary aesthetic extras. A theme reflected in one of the most popular web design trends for 2020 among everyday users – simplicity and accessibility. Brutalism has the potential to be eye-catching and engaging, but can also be used to create seamlessly functional websites that are all business.

Need more information about our Web Development?

Conclusion

As web consumption devices and technology advances, more web designers are coming up with unique and creative works that will continue to dominate the top web design trends in 2020 and beyond.

Some of our top picks are already growing concepts such as web animation while others such as CSS grids will become some of the hottest web design developments over the next couple of months. However, what the long-term future holds for popular web design trends will continue to be determined by one thing and one thing alone:

“The preferences of the end-user.”

Theoretically, it’s possible that the tastes, preferences, and expectations of the typical web user could shift radically at any time. In doing so, laying to waste any number of web design trends previously considered superb. If consumers suddenly begin responding negatively to asymmetric layouts, for example, they’re out of the picture.

Then comes the inevitability of technology mapping-out the future web design as we know it. Right now, it’s all about mobile. Rapid advances in the sophistication of mobile technology have transformed the way the world accesses and interacts with websites. Voice-capable interfaces are also making their mark. A few years down the line, virtual reality could usher in an entirely new era of web design and development.

Still, it’s unlikely we’ll be seeing sweeping VR-influenced changes in web design trends over the next couple of years at least. For the time being, it’s a case of the ten trends detailed above, forming the cornerstones of truly stunning website design for today’s web user.

Author: Dennis Dubner, CEO of SONDORA

Готовимся к 2020 году: 8 трендов клиентской JavaScript-разработки, о которых нужно знать

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

Всё, что связано с JavaScript, очень быстро развивается. Это касается и того, что можно отнести к сфере веб-разработки. В наши дни те, в основе чьих проектов не лежат самые современные технологии, начинают особенно сильно ощущать разрыв между тем, чем они пользуются, и тем новым, что появляется едва ли не ежедневно. К таким технологиям можно отнести Webpack, React, Jest, Vue, Angular в их современном состоянии. В то время как «население» мира фронтенд-разработки, включающее в себя технических специалистов и программистов, постоянно растёт, этот мир стремится к стандартизации. Появление новых технологий и инструментов уже меняет ситуацию.

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

1. Системы для работы с веб-компонентами, независимые от фреймворков и библиотек

В целом, можно сказать, что это и есть будущее. Почему? Всё дело в том, что те системы, о которых идёт речь, независимы от фреймворков. Это означает, что они могут работать как совершенно самостоятельно, так и совместно с любым фреймворком, учитывая его особенности, касающиеся представления кода. Этим системам не свойственно то, что называют «JavaScript fatigue», «усталость от JavaScript». Их поддерживают современные браузеры. В проекты, созданные с их использованием, включается оптимальное количество вспомогательного кода. Они эффективно используют возможности VDOM.

Топ-пост этого месяца:  Спам в комментариях WordPress как избавиться

Компоненты, о которых идёт речь, построены с использованием стандарта Custom Elements. Он позволяет создавать новые HTML-теги, тонко настраивать их свойства — от внешнего вида, до внутренних механизмов и особенностей работы с Shadow DOM.

Заметные проекты в рассматриваемой области — это Lit-html (и Lit-element), StencilJS, SvelteJS, Bit.

Как принципы модульности, многократного использования, инкапсуляции и стандартизации должны выглядеть в эру компонентов? Если об этом поразмышлять, подумать о будущем UI-разработки, то оказывается, что это будущее представляют именно веб-компоненты. Мы ещё вернёмся к этой идее. А пока — вот несколько полезных материалов о веб-компонентах. Тут можно почитать об инструментах для разработки веб-компонентов. Вот материал о библиотеках веб-компонентов. Здесь можно найти пример прототипирования RSS-ридера с использованием веб-компонентов.

2. О будущем войн фреймворков и библиотек

В плане количества загрузок из NPM React всё ещё уверенно обходит Angular и Vue. По крайней мере — на данный момент.

Тут мы не собираемся рассуждать о том, какие фреймворки и библиотеки лучше других и почему этот так. Если вам интересно об этом почитать — вот и вот — материалы, в которых, на реальных данных, сравнивают Angular, React и Vue. Мы же собираемся изучить общую картину. А она выглядит следующим образом: во фронтенд-разработке доля технологий, основанных на компонентах, растёт. Постоянно растёт. Число разработчиков, которые пользуются подобными технологиями, также растёт, причём — быстро. Кроме того, в этой сфере достаточно свободного пространства для внедрения новых инструментов.

Итак, какой фреймворк будет на первом месте через 5 лет? Никто этого не знает. Но можно с уверенностью говорить о том, что тому, кто хочет быть готовым к будущему, стоит изучать базовые технологии экосистемы JavaScript, и привыкать к среде, в которой DOM находится под контролем веб-компонентов. Может быть через 5 лет ведущим инструментом для разработки интерфейсов будет React? Об этом можно подумать, взглянув на приведённый выше график, построенный по данным NPM. Но не всё так просто. Взгляните, например, на эти показатели. Они позволяют говорить о том, что, в плане реального использования, разрыв между React и Vue очень мал.

Vue и React, в плане их реального использования, очень близки

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

3. Изоляция, многократное использование и композиция компонентов

Bit — пример платформы, ориентированной на разработку компонентов, на совместную работу с ними и на их многократное использование

Говоря о фронтенд-разработке и о компонентах, из которых строятся пользовательские интерфейсы, нельзя не вспомнить о Bit.

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

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

Хаб Bit даёт в распоряжение разработчика всё что нужно для совместного создания и использования компонентов. Например — удобные инструменты поиска, интерактивную среду, в которой можно экспериментировать с компонентами, полную поддержку CI/CD.

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

4. ES-модули и CDN

ES-модули — это часть стандарта ES6, описывающая работу с модулями в браузере. Использование этой технологии позволяет выносить некий функционал в модули, которые можно загружать, например, через CDN. После выхода Firefox 60 можно говорить о том, что ES-модули поддерживаю все основные браузеры. Работа над поддержкой ES-модулей идёт и в среде Node.js. Кроме того, ожидается добавление поддержки ES-модулей в WebAssembly.

5. Управление состоянием на уровне компонента

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

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

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

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

6. Стилизация компонентов — это композиции

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

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

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

7. GraphQL-API и клиентские приложения, управляемые данными

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

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

8. Инструменты для дизайнеров, основанные на компонентах

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

Например, в Sketch уже предусмотрены средства модульной разработки дизайна компонентов, предусматривающие наличие зависимостей между компонентами. Уже появляются и средства для работы в Sketch с компонентами, формирующими своё визуальное представление программно. Широкое распространение подобных средств — это лишь вопрос времени. Инструменты наподобие Figma изначально ориентированы на компоненты пользовательского интерфейса, подходящие для многократного использования. В рамках проекта Framer идёт разработка инструмента для программирующих дизайнеров. Этот инструмент позволяет дизайнерам контролировать то, как элементы пользовательского интерфейса превращаются в React-компоненты.

Итоги

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

Уважаемые читатели! Каким вы видите будущее веб-разработки?

5 главных трендов в дизайне интерьера на 2020 год, которые захочется воплотить в своей квартире

Получайте на почту один раз в сутки одну самую читаемую статью. Присоединяйтесь к нам в Facebook и ВКонтакте.

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

1. Абстракция в интерьере

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

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

2. «Потепление» интерьера

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

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

3. Фактурный текстиль

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

Если у вас раньше не было ковра – самое время о нем задуматься. Обратите внимание на градиентные узоры, сложные текстуры, замысловатые принты, а также теплые обволакивающие оттенки.

4. Немного благородного блеска

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

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

5. Japandi

Под воздействием процессов глобализации усиливаются и интеграционные процессы в сфере дизайна. Стиль Japandi родился в результате смешения двух направлений, которые ранее развивались параллельно – скандинавского стиля и японских интерьерных традиций. В итоге получился гармоничный и осовремененный гибрид. Предпосылки к его возникновению появились давно, однако как стиль Japandi оформился недавно. В следующем году он проявит себя во всей красе. Несколько крупных ритейлеров (в их числе Maison du Monde) уже выпустили коллекции, изобилующие богатыми шелковыми текстурами, изящными птичьими мотивами, стилизованными восточными принтами и структурированными формами мебели.

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

Понравилась статья? Тогда поддержи нас, жми:

Rusability

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

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

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

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

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

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

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

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

1. Крошечный текст

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

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

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

2. Геометрическое наслаивание

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

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

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

3. Улучшенный 3D

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

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

4.Инновационная прокрутка и параллакс

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

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

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

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

5. Микроинтерактивы

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

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

Заключение

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

Каким будет графический дизайн в 2020

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

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

Тотальный брендинг

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

Фирменный стиль для итальянского кафе «Via Monte»

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

Что еще почитать на эту тему:

Как использование брендированной полиграфии помогает бизнесу?

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

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

Яркие цвета

Яркие резонирующие цвета всё еще в тренде (неожиданные сочетания, контрасты). Цвет помогает привлечь внимание потребителя к продукту/выразить философию бренда.

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

Смелая типографика

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

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

Типографика взаимодействует с другими элементами дизайна.

Уникальность изображений

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

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

Графика, изображающая предметы и их философию привлекает внимание потребителя.

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

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

Пересечение стилей

В 2020 «во главе стола» находится творческий подход. Один стиль проникает в другой. А на «выходе» рождается яркий, интересный продукт.

Делаем акцент на креативном подходе:

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

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

Пример: для отражения специфики проекта можно скорректировать конструктивистский логотип род нео-мемфис.

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

«Быстрый дизайн»

Общее настроение в сфере полиграфического дизайна:

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

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

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

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

Одним из таких сервисов является Canva.

На сайте представлены различные рубрики:

  • Записи в социальных сетях;
  • Документы (фирменные бланки, сертификаты, презентации, листовки А4 и др.);
  • Блоги и электронные книги (баннеры для блога, обложки для книг и др.);
  • Маркетинговые материалы (плакаты, меню, флаеры, буклеты, подарочные сертификаты, визитки и др.);
  • Социальные сети и заголовки писем;
  • События (открытки, приглашения, программы и др);
  • Реклама (баннеры разных форматов).

Время редактирования: 10 — 15 минут.

Навыки дизайнера: не нужны.

Возможность сохранения: есть (можно выбрать вариант jpg, png, pdf — стандартный, pdf — для печати).

Русский язык: да.

Цена: огромное количество бесплатных шаблонов, также есть и платные версии (стоимость 1 $).

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

Добавить комментарий