Современный веб дизайн: 65 Трендов Веб-дизайна в 2020 году. Топовые советы от профи
65 Трендов Веб-дизайна в 2020 году. Топовые советы от профи
Автор Илья Чигарев На чтение 24 мин. Просмотров 50.3k. Обновлено
Привет. На связи Чигарев Илья. Данная подборка трендов веб-дизайна 2020 собрана из 4-х материалов с сайта Behance. Это посты, которые набирают наибольшую популярность и положительные отзывы среди комьюнити дизайнеров. Итак, давайте посмотрим какие тренды выделяют топовые дизайнеры со всего мира.
Безлимитная графика для ваших проектов
Для создания крутого дизайна для сайта, полиграфии, фотографии и прочего, как не крути, вам нужны будут качественные материалы. Это и фотографии, шаблоны, мокапы, иконки, пресеты, кисти и т.д. Все это есть в одном месте и качать можно неограниченно. Сервис ENVATO ELEMENTS с тонной материалов, готовых к скачиванию. Цена подписки от 16,50 $/мес. Переходите по ссылке и посмотрите что вы можете использовать для своего бизнеса и проектов. Подробности вы можете узнать в статье-обзоре.
ПОСМОТРЕТЬ СЕРВИС ENVATO ELEMENTS
Главные тренды веб-дизайна в 2020 году
1. Смелые, яркие цвета
В 2018 мы наблюдали восхождение смелых и ярких цветов, и они не собираются сдавать свои позиции, превращаясь в один из самых значимых трендов 2020.
Проект: Show Go Poster Collection 2018 / Автор: ∆ Studio—JQ ∆
Хотите научиться делать сайты?
Чтобы сэкономить на разработке или зарабатывать деньги создавая сайты для других? Недавно я записал новый курс «Идеальный сайт на WordPress» и «Лендинг в Elementor», где рассказал пошаговый план как создавать крутые сайты. Разработкой занимаюсь более 7-ми лет, на сайтах зарабатываю более 50 тысяч в месяц и в курсе я выложил всю технологию как делать такие сайты. Курс новый — 2020 года. Берите пока свежий. Подробнее читайте по ссылке.
Проект: 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 2019 | Living Coral / Автор: ∆ Studio—JQ ∆
4. Простота и удобство
Меньше значит больше» — бессменный тренд. Простота подразумевает аккуратную страницу со светлым фоном в лучших традициях минимализма. Пространство — бог: при его правильном использовании можно получить многофункциональный дизайн.
Проект: Creative case / Автор: Nikita Mahaev
Проект: A propos du cancer / Автор: Extra
Проект: Nona Home E-commerce Website / Автор: Daniel Tan
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
Источник: Spotify
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 2017 / Автор: 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. Реальные фото
Фотостоки тоже подвержены влиянию трендов. В этом году будут цениться реальные, честные фотоснимки. Многие бренды используют уникальные фото, снятые в движении и без постановки. Фотография становится более искренней и напоминает моментальные снимки, сделанные в расслабленной и естественной обстановке.
Источник: unsplash
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. Градиенты
Градиенты — один из главных трендов, унаследованных от 2017-2018 годов, и конечно же, он коснется дизайна логотипов. Легкий градиент или смелые переходы, что выберете вы?
Проекты: 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 году.
Проект: My idea | An incident in front of you! | Playlist — Radial Interaction / Автор: Johny vino™ .
Проект: Brewskies v2 / Автор: Kevin Yang
Проект: Gesichtspunkt / Автор: Alim Maasoglu
32. Встроенная анимация
Элементы со встроенной анимацией ненавязчиво помогают пользователю в процессе просмотра сайта. Они скрашивают ожидание полной загрузки контента и проявляются при взаимодействии с элементами и процессами на странице, к примеру, при скроллинге или наведении фокуса на определенный блок.
Присутствие анимированных персонажей на странице помогает установить контакт с пользователем, расширяя привычное взаимодействие с сайтом.
Проект: inturn website / Автор: INTURN
33. Креативные экраны загрузки
Сайты, использующих скучные экраны загрузки, устарели. Почему бы не компенсировать пользователю время вынужденного ожидания креативным подходом? Ниже приведены 2 выдающихся примера применения креативных вариантов загрузки сайтами Contemple и Awwwards.
Проект: Contemple
Проект: 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 2017 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. Эксперименты с выравниванием и кернинг
Хаотичность в типографике была одним из главных трендов 2018 и остается на вершине в 2020 году. Забудьте о правилах и дайте простор фантазии!
Проект: Studio Studio / Автор: Rudmer van Hulzen
Проект: nyMusikk annual report 2016 / Автор: 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. Смелая типографика
Смелая типографика создает сильный и однозначный посыл. Если нужно, чтобы продукт выделялся, используйте большой шрифт в связке с яркими цветами.
Проект: Refresh
Проект: 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
3D
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 2016 / Автор: 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 2018 / Автор: Nikopicto
65. Очень реалистичное 3D
3D всегда вызывает восторг и будет возглавлять современные тенденции веб дизайна 2020. Этот эффект способен обыграть реальность и вымысел так тонко, что их практически невозможно отличить. Картинка это или отрисовка? Грани продолжают стираться…
Проект: YOOX: Make a Wish / Автор: JVG ™
Проект: Air Max ’17 / Автор: Berd .
Статья собрана из источников:
- Design Trends Guide by Milo Themes
- Design Trends by Duminda Perera, Massimiliano Albizzati, Secil Kaya, Camilla Maccaferri
- Design Trends by Filip Triner
- Design Trends by Epicco Digital, Mark Banaynal
- Design Trends by Rylan Ziesing, Rhino Design
СПАСИБО!
Спасибо, дорогой друг, что дочитал данный лонгрид с трендами веб дизайна 2020 до конца. На его сбор, перевод и публикацию ушло 8 дней и если вам не сложно уделите 30 секунд, чтобы поделиться им в соц.сетях или на своем ресурсе, тем самым вы очень поможете распространить данный материал. Спасибо большое =)
10 трендов веб-дизайна 2020 года — Дизайн на vc.ru
Современному специалисту необходимо знать все тенденции рынка и самому быть в тренде, чтобы не оставаться позади, поэтому я собрал 10 инновационных трендов веб-дизайна, которые будут актуальны в ближайшем будущем и в 2020 году.
Основные тренды:
- Темный режим
- Недостатки, которые добавляют личнос
- Мягкие тени, слои и плавающие элементы
- Смешивание фотографии с графикой
- Массивные размеры шрифта
- Яркие цветовые решения
- Ультра минималистская навигация Мягкие градиенты
1. Темный режим
Я считаю, что одной из основных тенденций 2020 года будет тёмный дизайн, в основном фокусирующийся на дизайне пользовательского интерфейса, который дает пользователям возможность включить темную тему. Темный фон делает элементы дизайна более заметными, создавая более высокий коэффициент контрастности с использованием других цветов, но при этом улучшая визуальную эргономику за счет снижения утомляемости глаз.
2. Недостатки, которые добавляют личности
Все больше популярности набирают элементы нарисованные от руки иконки. Они более эмоциональные и яркие. Эта тенденция связана с тем, что нам нужно больше позитива, что может скрасить день. Так же, это неплохой способ выделиться и показать индивидуальность.
🎨 22 тенденции веб-дизайна в 2020 году, о которых нужно знать
В конце концов, быть в курсе возникающих или развивающихся тенденций жизненно важно, если хочешь оставаться на вершине горы. Так какие же эти новые тренды? Что сработает лучше всего в 2020?
1. Hero Images и Headers
Давайте начнем с самого простого. Использование Hero Images является популярным направлением в веб-разработке. Hero Images – это большие баннеры, расположенные в верхней части главной страницы сайта (или любой другой, но обычно размещают именно на главной), которые могут быть как динамическими, так и статичными.
Ниже приведен пример с официального сайта Samsung с одним из последних трендов веб-дизайна 2020 года:
Hero Images – это отличный способ привлечь потенциальных покупателей, фон в таком случае становится объектом внимания и перестает быть серым.
Они полезны и с точки зрения бизнеса, ведь теперь вы можете показать свой продукт во всей красе, пользователю даже не нужно переходить на страницу товара.
Hero Images в последнее время обрели большую популярность и стали применяться на многих веб-сайтах. Но даже если все сайты будут их использовать, это все еще хороший способ привлечь внимание.
2. Пустое пространство и минималистичный дизайн
Минимализм сейчас в моде, и это касается не только веб-сайтов, но и остального мира в целом. Чем меньше контента, тем лучше, и чем его больше, тем более беспорядочным он становится.
Когда на веб-сайте много близко расположенных друг к другу настроек и все они собраны в одном месте, невольно начинаешь теряться и закрываешь сайт.
С минималистичным подходом, мы оставляем как можно меньше контента и как можно больше свободного пространства, получая таким образом удовлетворяющую нас веб-страницу без поводов для беспокойства.
Не забывайте, что к Hero Images это не относится, так как свободные пространства комбинируют с изображениями для получения более выразительного эффекта.
Если хотите применить этот подход в веб-дизайне на практике, взгляните на пример от Squarespace:
Несмотря на наличие на главной странице пустого пространства, она по-прежнему смотрится элегантно и привлекательно.
3. Эмоциональный дизайн
Новым трендом стало построение эмоциональной связи с пользователем через веб-дизайн. Для этого примеряются вызывающие яркие эмоции изображения (прямо как эмодзи).
Люди часто называют их “связующими”, и в результате даже не замечают, как втянулись:
Преимущество эмоциональной привязанности состоит в том, что веб-сайт запоминается пользователям, и велика вероятность, что они порекомендуют его своим друзьям.
Интересные идеи дизайна главной страницы и веб-интерфейса в целом применяются везде, где только можно, это касается обратной связи, отзывов, параметров страницы и т.д.
4. Динамический скроллинг
Я был удивлен тем, как они презентовали свой продукт с использованием динамического скроллинга. То же самое наблюдалось на презентации Apple в сентябре. Взгляните:
5. Градиент 2.0
Пользователи от этого устали, и появилась необходимость перемен, что направило тренды в сторону градиента 2.0, где на странице преобладают оттенки нескольких светлых цветов.
6. Темный интерфейс
Темная тема стала трендом практически в каждом приложении. Она есть в WhatsApp и Skype, Gmail, Facebook, YouTube и во многих других приложениях.
Это стало настолько обыденным, что некоторые компании начали добавлять dark mode в свои последние обновления. Темная тема даже глазам дает отдохнуть! Так почему не применить ее в веб-дизайне?
Веб-дизайнеры также стали работать с темной темой через использование Hero Images, благодаря чему сайт кажется полностью черным.
Для максимального эффекта нужны контрастирующие цвета с оттенком: к примеру, #000000 идеально сочетается с #FFFFFF или желтым и так далее.
Представленный на скриншоте веб-сайт пояснит, что я имею в виду:
7. Scroll-generated веб-сайты
Scroll-generated веб-сайты (прим. переводчика – “основанные на скроллинге”) – один из последних трендов, подхваченных веб-дизайнерами.
Название может показаться схожим с динамическим скроллингом (англ. Dynamic scrolling) и сбить вас с толку, но на деле это разные понятия. Scroll-generated веб-сайт работает следующим образом: элементы сайта зависят от прокрутки и появляются во время скроллинга.
Когда же мы говорим о динамическом скроллинге, то в данном случае весь контент изначально присутствует на странице, и все, что нам нужно, это прокрутить до него.
Чтобы стало более понятно, взгляните на представленный ниже скриншот веб-сайта:
8. Интерактивные курсоры
Анимированные курсоры меняют внешний вид указателя на что-то привлекательное.
Помимо изменения размера, формы и внешнего вида курсора, разработчики также реализуют эффект анимации во время движения. С фреймворками и инструментами для веб-разработки 2020 года сделать такое несложно.
Для лучшего понимания взгляните на веб-сайт ниже:
9. 3D-дизайн
Трехмерный дизайн привлекает человеческий глаз. Пришлось сильно постараться, что перенести 3D на веб-сайты. Элементы трехмерного дизайна требуют большей пропускной способности, нежели 2D, и являются довольно массивными.
Так как в последнее время люди стали использовать более высокоскоростное интернет-соединение, веб-разработчики начали запускать трехмерные веб-сайты. При правильном использовании 3D-дизайн будет смотреться привлекательно и реалистично.
Прекрасный пример веб-сайта на скриншоте ниже:
10. Оптимизированная навигация
Навигационный контент может располагаться не только в области специальной панели, но и по всей странице. Обеспечение упрощенной навигации с другими тенденциями веб-дизайна 2020 года делает сайт привлекательным и позволяет пользователю исследовать его целиком, поскольку навигация – уже не просто текст в заголовке.
Для вдохновения взгляните на скриншот сайта Bikebear:
11. Фокус на улучшении UI и UX
Разработка новых фреймворков и улучшение существующих привело к появлению оснащенных UI/UX красочных веб-сайтов. На фоне таких сайтов, другие стали отставать.
В 2018 году интернет охватила волна модернизации UI и UX. Люди сфокусировались на дизайне настолько, что кто-то построил на этом карьеру. Причина проста: UI отвечает за привлекательность сайта, UX – за удобство для пользователя.
Посетители получают наслаждение от пользования сайтом, а именно этого хочет каждый разработчик. Если вы думаете заняться созданием сайта, стоит позаботиться о хороших UI и UX.
Ниже представлен скриншот с LambdaTest:
12. Большие жирные шрифты
Крупные и жирные шрифты на Hero Image ворвались в тренды с прошлого года. Они привлекают внимание и передают вложенный вами посыл. Такие шрифты легко разместить, а чтобы они лучше смотрелись, поработайте над цветовым контрастом и тенью.
Пример того, как применить это на практике, представлен ниже:
13. Художественные иллюстрации
Художественные иллюстрации – это скетчи на главной странице сайта. Эти зарисовки больше похожи на работу кистью, и в последнее время пользуются популярностью.
Это один из наиболее популярных трендов 2020 года в веб-дизайне. Такие иллюстрации можно часто наблюдать в различных видео типа TED, музыкальных клипах и т.д. Можно сказать, что они твердо и уверенно идут вперед.
Ниже представлена демонстрация от Lisa Glanz:
14. Сеточный дизайн
Разработчики и дизайнеры помешаны на сетках. Это не новая концепция, если вы хоть немного занимались веб-разработкой. Сетки представляют собой схему разделения чего-либо на части (в буквальном смысле) и размещения различной информации в каждой из них.
Важно отметить, что цвет сетки должен контрастировать с фоном веб-дизайна. Они не должны быть слишком громоздкими, и размещать их нужно только там, где это возможно.
Лучший пример – Pinterest:
15. Слияние фотографии с графикой
Слияние фотографий с графикой – правильное сочетание абстрактного и красочной графики. Фотография – это прекрасный способ передать какой-либо посыл (обычно это такая насущная тема, как феминизм) практически без слов.
Фотографии оказывают необычное влияние на пользователей, и поскольку они отражают актуальные темы, следует подходить к их использованию изобретательно.
В качестве примера для демонстрации я выбрал Wix:
Используемая здесь фотография отражает тематику сайта, а именно свадебные фотосессии. Что по-вашему лучше: сообщение в виде фотографии или пара абзацев на тему свадебных фотосессий?
16. Анимация, запускаемая пользователем
Часто анимация отображается на сайте через @keyframes и другие фреймворки, вроде anime.js. Суть тренда заключается в использовании анимации через взаимодействие с пользователем.
Такой подход завлекает посетителя и в целом улучшает user experience.
Этот сайт показывает удачный пример запускаемой пользователем анимации:
17. Плавающие элементы
Плавающие элементы можно рассматривать как дополнение трехмерных компонентов, о которых мы говорили ранее. Элемент “парит в воздухе” – таким образом создаются увлекательные изображения и шаблоны в веб-дизайне.
99designs используем в качестве демонстрации:
18. Истории с графикой
Отзывы всегда были неотъемлемой частью покупок, и все мы зачастую прочитаем пару-тройку, выбирая товар. А вы знали, что отзыв клиента о товаре может рассказать целую историю?
Захватывающие истории – лучший способ помочь пользователям почувствовать связь с миром вокруг них. К примеру, отзыв на веб-сайте службы доставки еды стимулирует посетителей проводить больше времени на сайте, так как они пользуются доставкой на протяжении долгого времени.
Истории с графикой могут вывести завлечение читателей на новый уровень.
Сайт, используемый в качестве демонстрации, – Apple:
19. Графики данных на веб-сайтах
Все мы используем статистику на своих сайтах, так как это отличный способ завлечь пользователей, но, к сожалению, не каждый пользователь еще и читатель. Посетители часто пропускают часть с текстом и сосредотачиваются на том, ради чего зашли на веб-сайт. Мы в силах это изменить.
Все, что нам нужно, использовать ту же стратегию, что и в презентациях: применение графиков и визуализаций. Примеры визуализации, графики, трехмерной визуализации и т.д. можно найти на просторах интернета.
Это послужит отличным дизайнерским решением, если вы хотите передать большой объем информации в аккуратном и привлекательном виде без размещения текста.
Для демонстрации использован сайт Uber:
20. Черное и белое
Сочетание черного с белым – неизменно актуальная комбинация. И это касается не только веб-сайтов, но и фотографий, эскизов, настенных росписей, наручных часов и т.д. Черно-белые комбинации очень приятны для глаз. Возможно из-за контрастирующих элементов, о которых мы говорили выше. Использование черно-белой цветовой гаммы на сайте (с оттенками черного) – новый тренд в веб-дизайне 2020 года, и похоже, он будет популярным и в будущем.
В качестве примера сайта я использовал Dribbble:
21. Геометрические фигуры и узоры
Геометрические формы помогают веб-дизайнерам создавать что-то захватывающее и мощное из обычного изображения.
Геометрия постоянно встречается в природе, поэтому мы подсознательно склонны к геометрическим узорам и формам. Если они сочетаются с подходящими цветами и контрастом, геометрические фигуры будут смотреться привлекательно.
Используемый для демонстрации сайт отражает истинную красоту геометрических фигур и паттернов:
22. Эксперименты с иллюстрациями
Вы скорее всего понимали, что иллюстрации становятся горячей темой в тенденциях веб-дизайна 2020 года и экспериментировании.
Веб-дизайнеры и пользователи любят в них все. Вы всегда можете поэкспериментировать с иллюстрациями, как, впрочем, и с любым другим из трендов. Более того, вы можете сочетать их с фотографиями, 3D-эффектами и т.д.
Прекрасным примером служит приведенный ниже веб-сайт:
Заключение
Надеюсь, эта подборка вас вдохновит. Конечно, как веб-разработчик, я могу с уверенностью сказать, что тенденции будут продолжать меняться. Все, что вы видите, будет улучшено в будущем. Точно так же, как я никогда не думал об использовании этих вещей три или четыре года назад, я не могу представить себе то же самое на три или четыре года вперед.
Статья публикуется в переводе. Автор оригинального текста Harish Rajora.
***
Дизайн и веб-разработка – близнецы-братья. Многие талантливые frontend-программисты начинали свой путь в профессии как дизайнеры. Если вы планируете сменить специализацию или задумываетесь о дополнительных навыках, обратите внимание на курс онлайн-академии GeekBrains. Начав с основ, вы пройдете стажировку в реальной команде и удачно обновите резюме.
7 тенденций веб-дизайна в ближайшем будущем / Хабр
Многие статьи пытаются рассказать о том, что сейчас в веб-дизайне считается крутым. Я попытаюсь зайти за очевидные рубежи и сделать предсказания на эту тему.1. Жесты вместо кликов
Мы забыли, как раньше было сложно прокручивать страницы. Приходилось тащить курсор к правому краю, чтобы пользоваться такой древней штукой, как полоса прокрутки. Если вы тогда уже были профессионалом, вы могли использовать колесо мышки, клавиши курсора или трекпад – но в этом вы обгоняли большинство пользователей.
В 2015 прокручивать проще, чем кликать. На мобильном можно делать прокрутку большим пальцем. А попасть точно в цель тяжелее – ровно наоборот по сравнению с десктопом.
В результате, всё больше сайтов будут построены на идее превосходства прокрутки над кликами. И конечно, именно это мы и видим.
Эта тенденция продолжится, поскольку мобильных устройств становится больше. На современных сайтах меньше мест для кликов, и больше прокрутки. Меньше ссылок, больше кнопок, больших кликабельных областей и высоких страниц, которые надо прокручивать.
Сайты, делящие статьи на несколько страниц, скоро усвоят это. Они превратятся в одностраничники, или даже, как TIME, в бесконечные страницы.
Пока неизвестно, появится ли веб на часах – но если да, то там он наверняка будет управляться жестами.
2. Свёрнутые меню отмирают
Прокрутка ничего не стоит, а устройства сильно отличаются в размере – поэтому свёрнутые меню уходят. Дизайнеры наконец-то могут не впихивать всё на верх страницы. Это ведёт к дизайну типа Medium – полноэкранные заголовки страниц, с контентом, который открывается только после прокрутки.
Используя высокие страницы, дизайнеры могут наполнять их большими красивыми картинками. В 2015 будет больше сайтов, использующих вертикальное пространство, и больше крупных картинок.
3. Пользователи ускоряются, сайты упрощаются
Сегодня любой подросток является экспертом по использованию веба. Даже начинающие умеют пользоваться вкладками браузера и жестом возвращаться на предыдущую страницу. В результате всё ускоряется, и пользователь становится менее терпимым. Если хотите вывести из себя спокойного человека, замедлите ему ненадолго интернет.
Сайты должны стать не только быстрее технически, но и проще для понимания. Задерживающие пользователя дизайны подобны сайтам, которые медленно грузятся. Простые дизайны проще окинуть взглядом. Проще увидеть, какой из этих дизайнов более новый – тот, от которого быстрее можно получить удовольствие:
Это основная причина смерти скевоморфического дизайна (копирования формы или внешнего вида предметов другими средствами) – пользователи более восприимчивы, менее терпеливы и много информации замедляет их.
Мобильные приложения опережают веб-сайты, предлагая минималистичные и красивые интерфейсы. Это потому, что минимализм лучше работает.
Плоский дизайн – это лишь начало. Тенденция идёт по направлению к немедленности и простоте.
4. Пиксели мертвы
На десктопе пиксель – это пиксель. Известно даже, сколько обычно пикселей в дюйме – 72 dpi. Теперь уже мало кто знает, что это такое.
В отзывчивом дизайне всё идёт к сеткам и процентам. Но остаётся ещё одна неохваченная тема: растровые изображения. Почти весь веб построен на изображениях с разрешением в половину экрана, и они не масштабируются. На ретина-дисплеях и в современных браузерах пришло время векторных картинок.
Это уже происходит с иконками, основанными на шрифтах и Material design от Google. Они идеальны для дизайнеров и современных браузеров.
Технологии уже есть, но профессиональным дизайнером нужно дать время на смену привычек, чтобы они могли делать сайты для высококачественных экраном. Когда экран среднего десктопа достигнет качества ретина, дизайнеры воспоследуют.
5. Анимация возвращается
Чтобы создать впечатление старого сайта, набросайте туда GIFок “Under Construction” и Flash-анимации. Но в современном мире анимация возвращается в новом виде. Плоский дизайн выглядит довольно уныло. Анимация помогает сайты выделиться и запихнуть больше информации в то же пространство.
Мобильные приложения поменяли ожидания пользователя. Они используют движение для передачи смысла, и сайты начинают делать примерно то же.
Технологии вроде CSS-анимации упрощают улучшение дизайнов без использования плагинов или проблем со скоростью и совместимостью. Веб-компоненты (о них ниже) ускорят этот процесс.
GIF-анимация вернулась и эффективно работает, её так просто создавать и делиться ею.
6. Компоненты – это новые фреймворки
Веб-технологии усложняются и становятся менее семантическими. Дизайнерам приходится писать сложный код на страницах для использования простых вещей, вроде включения в страницу Google Analytics или кнопки Facebook Like. Было бы проще, если бы могли написать что-либо вроде:
<google-analytics key=”UA-12345–678">
И это возможно с веб-компонентами, которые начнут распространяться в 2015 году. Google’s Material design уже пришёл к нам, и может послужить катализатором этого движения. Он обеспечивает анимацию и компоненты взаимодействия, взятые от приложений Android, с простыми тэгами вроде
Если оно приживётся, то на основе компонентов появится гораздо больше фреймворков. Возможно, Bootstrap 4.0?
7. Социальное насыщение и восход прямой электронной почты
Социальные сети пользуются большим успехом, но производители контента не так уж и счастливы. Проблема в насыщении. В Facebook пользователи видят лишь те из миллиардов постов, которые, по мнению сети, понравятся большинству пользователей. Со временем ваши посты видят всё меньшее количество людей. Эту проблему можно решить, как ни странно, заплатив Facebook.
Соцсети не умрут, но в 2014 многие заметные блоггеры вроде Тима Ферриса отвернулись от соц.сетей и сосредоточились на добрых старых емейл-рассылках. У емейлов есть преимущество – их увидит больший процент людей.
Я считаю, что эта тенденция усилится в 2015 году, вместе с веб-нотификациями (которые работают так же, как нотификации в мобильных приложениях).
Бонусное не-предсказание: CSS-формы
Эту крутую технологию заметят только дизайнеры. CSS shapes позволяют встраивать контент в формы, например, в круги:
Это круто, но пока браузеры не будут это гарантированно поддерживать, пожалуй, рискованно тратить на это время и делать две разных реализации дизайна для старых и новых браузеров. А кроме дизайнеров это никто и не заметит. Но это круто.
Чего ожидать в 2015
В 2014 мобильные приложения вытеснили десктопы, но основная масса веб-дизайнеров ещё не подтянулась. Большинство организаций заказывают веб-сайт, который хорошо выглядит на компьютере, а на мобильном работает уже во вторую очередь. В 2015 такая стратегия кажется непрофессиональной. Мобильники становятся основными веб-устройствами.
Плоский дизайн уже повсюду, но это не только плоские кнопки – главное, это более простые и быстрые сайты. Простота – это не мода, это будущее.
Всё более модно вставлять в посты анимацию, которая и выглядит качественно, и улучшает пользовательское восприятие.
Пиксели и скрытые меню с кликами уходят, уступая место прокрутке. Веб-компоненты облегчают создание сайтов, похожих на мобильные приложения.
Сейчас мы наблюдаем приход наилучших практик из мобильных приложений в веб. Со временем разница между приложениями и сайтами может полностью исчезнуть.
Современный веб-дизайн: популярные стили и элементы
По мере того, как WEB среда развивается, меняются восприятие пользователем дизайна и оформления контента. Новые направления веба с передовыми технологиями сайтостроения меняют и дизайнерские взгляды, но в целом, популярность современного чистого веб-дизайна продолжает расти. В моде лаконичность оформления и простота визуальных решений – разработка которых потребует от web-дизайнера учитывать еще и пользовательские ожидания.
Coastal Creative называет 2018-й годом контрастов и сочетаний разных стилей & направлений. Оформляя веб-сайт крупными изображениями, современный дизайнер волен добавить ретро-паттерны, цвета & типографику. Может использовать 2D окружение в трехмерном дизайне или статические иллюстрации с ненавязчивыми эффектами.
Визуальные контрасты уже начинают менять веб-дизайн. Стремясь к ясному разграничению, дизайнеры тонко сочетают изысканные штрихи с объёмными формами. Далее, ТОП популярных элементов и стилей современного веб-дизайна с примерами применения в композициях запоминающихся сайтов.
Текст, перекрывающий графический контент
Не секрет, что многие сайты выглядят скучновато и в 2017 году появилось неожиданное решение – перекрывающий контент. Это различные пересечения текста с изображениями, плашками, блоками. Применением крупных и жирных шрифтов продемонстрирует вашу уверенность, а посетителю позволит взглянуть на сайт с различных точек зрения.
Дизайны с наслаиванием и пересечением контента в общем пространстве:
elegantseagulls.com – сайт агентства с чистым дизайном и нестандартными подходами
carbonbeauty.com – минималистичный черно-белый дизайн, заголовок смещается вниз с прокруткой и проходит за и перед блоками
thibaultpailloux.com – разработчик на собственном сайте разнообразил тренд, украсив переходы градиентами
Асимметричные макеты и «ломаная» сетка
Ломаное размещение элементов – набирающий популярность web-тренд, для реализации которого не требуются экстра ресурсы разработки. Нестандартную сетку применяют, чтобы сайт не походил на другие из своей ниши. Вместе с направлением асимметричного дизайна, стиль наслаивания элементов порождает особую эстетику и свои правила. Нетипичная, как и любая другая верстка, подразумевает необходимость поддерживать визуальный баланс. Тут нужно будет планировать пересечения так, чтобы уравновесить асимметричную структуру оформления сайта.
Дизайны с асимметричной разметкой и наслаиванием элементов:
welikesmall.com – ультрасовременный дизайн digital-агентства использует ломаную сетку с асимметричными пересечениями элементов. Крутые эффекты и микро-анимации интерфейса
techstyle.com – черно-бело-синий дизайн с анимацией и параллаксом. Полупрозрачные плашки поверх фото с реалистичными тенями перекрывают собой синие круги, наезжающие на гранжевые фоны. Множественное наслаивание асимметричных flat-элементов создает объем, а вертикальное свободное пространство добавляет креатива и стильности
originalterritory.com – приятный eCommerce сайт «Территория собак» с асимметричной разметкой. Дизайн мягкий, компактный и современный
imsproductions.com – красивое применение тренда на сайте американской продакшн компании
heeds.eu – яркий и нестандартный дизайн. Двуцветная коррекция изображений, градиенты, ломанная разметка
Duotone и оверлей поверх изображений
Двутон (Дуплекс), overlay (перекрытие) с наложением слоя цвета и применение эффекта двойной экспозиции фотографий уже применяются в дизайнерских сайтах и ресурсах с медиа-контентом. Интерес масс к двутоновому окрашиванию пробудил запуск персонального плейлиста Spotify.
Современные и эстетичные веб-дизайны применяющие дуотон:
muller.it – итальянский продуктовый бренд красиво оформил сайт дуотон-видеобекграундом с добавлением мягкого градиента
cliquestudios.com – на главной странице сайта дизайн-агентства кейсы разграничены цветовыми фильтрами (overlay)
socialplayground.com.au – дуотон фото усиливают социальные доказательства, украшают главную и страницу «О нас»
Современное ретро в иллюстрациях и элементах
Как старина в дизайне уживается с новыми тенденциями и остается актуальным направлением? В сознании потребителей, винтажное оформление часто ассоциируется с высокой планкой качества. Для одних винтаж – синоним роскошного и дорогого. Другие, воспримут винтажный сайт как оживленный, полный энергии. У ретродизайна, также немало ценителей – красиво поданная композиция с ретро очаровывает. Еще одно конкурентное преимущество: дизайн с элементами прошлого вызывает ностальгические нотки. Со свойственной винтажному стилю укрупненностью элементов, он вполне вписывается в минималистичную концепцию современного веб-дизайна.
Современные сайты с элементами ретро-стиля:
sugarfirepie.com – винтажная иллюстрация в главном экране создает первое впечатление о кондитерском бренде, улучшает UX-дизайн сайта
Кастомные иллюстрации
Творчески проиллюстрированные коммерческие сайты пользуются популярностью, потому как их стремление к индивидуальности не остается без внимания. Уникальная иллюстрация в фоне, способна создать особый настрой и даже повлиять на эстетику сайта.
Эстетичные сайты с уникальными иллюстрациями:
getonboardbrt.com – красивое применение акварельной иллюстрации в плоском дизайне
bostonbrt.org – инновационную систему транспорта, бостонский сайт иллюстрирует акварелью
mamyfactory.com – рисованным изображением процесса вязки французский e-Commerce сайт привлекает целевого посетителя
lattice.com – стартапу важно показать фото с рабочим процессом, однако призывы к действию они усилили позитивными иллюстрациями
Брутальный веб-дизайн
Стиль брутализма в веб-дизайне достаточно многообразен. По сути это незавершенный дизайн и воплощение идеи минималистического контраста. Многих привлекает бруталистская эстетика: гранж, неотесанность, аскетизм. Есть мнение, что в определенных нишах брутальный веб-дизайн повышает конверсию сайта.
Стиль брутализм применяемый в веб-дизайнах:
gift.gucci.com – интерес к брутализму проявляют не только в веб дизайнерской среде: звездный бренд применяет не ради забавы
balenciaga.com – этот вид Web брутализма критик назвал минимализмом на стероидах (к примеру, mahzedahrbakery.com уже выглядит простым минималистичным сайтом)
Стильные текстуры в фоне
Подобно тому, как в дизайне интерьера обои то входят в моду, то выходят из моды – сейчас наблюдается возрождение фоновых текстур. Снова в тренде плиточные фоны и бэкграунды с повторяющимися элементами. Творчески подобранные текстуры придают сайту персональности. Также, стильный бэкграунд может отлично гармонировать с нестандартным формами элементов (например иконками) или кастомными иллюстрациями.
Современные веб-дизайны творчески применяющие фоновые текстуры:
simone-simon.fr – стильный французский сайт, эффектный дизайн создается наложением кусков текстур, полых фигур, больших букв
abcdentaltexas.com – необычное для сайта стоматологии мультяшное оформление с красивой текстурой фона
djeco.com/ru – клетчатый фоновый паттерн и другие текстуры в красивом мультяшном дизайне сайта компании
Градиенты 2.0
В 2017 году градиенты вернулись в веб-дизайн с более чистыми цветами (без примеси грязного оттенка). Возможно не надолго, но в 2018-м тренд крепнет и применяется в разных стилях.
Характерные признаки модного направления: колорит, оживленность, сайт с градиентами 2.0 выглядит свежим и современным.
Сайты с яркими оттенками и градиентами в дизайне:
wpengine.com – wordpress-хостинг оформил градиентами выпадающее меню и формы подписки
chunkagency.com – сайт креативного агентства с двухцветным неоновым градиентом и эффектными переходами
fullstory.com – двухцветные градиенты применяются для кнопок и в фонах
Продуманные анимации и эффекты UI
Анимация в веб-дизайне проделала долгий путь и применялась еще в 1999-м для создания агрессивных flash-баннеров «Кликни меня!». Продуманные микроитерации выглядят стильно и улучшают пользовательский опыт, интересные анимационные сценарии могут развлекать и служить навигационным центром, визуально обозначив интерактивное взаимодействие с пользователем. Без преувеличения – аудитория любителей анимированных эффектов широка.
Примеры сайтов с хорошо продуманной анимацией:
insuranceexperiments.org.uk – занимательный промо-сайт британской страховой компании в стиле FLAT, с плоским видео и мультяшными анимациями
aproposducancer.fr – свежий сайт лионского хосписа с фантастически иллюстрированным и анимированным дизайном. Красивые прелоадер, интерактив, скролл, UI
hellobloom.io – анимация с высокой детализацией, эффектное обучающее видео. Так, товарный Landing Page вовлекает и настраивает на позитив
stripe.com – уникальный эффект превращает выпадающее меню в украшательство, а легкая анимация акцентирует важный контент
district0x.io – современный полу-плоский дизайн анимирован по максимуму: креативные хедер / футер, облака в фоне карточек и сами карточки
Масштабируемая SVG-графика
Важные преимущества масштабируемой векторной графики (SVG) перед растровыми форматами: изображения масштабируются без потерь в качестве, легко редактируются при помощи CSS и весят мало. Технологии HTML5 позволяют интегрировать гибкие SVG-элементы в веб-страницу. С сервисами вроде svgator.com, можно создавать SVG-анимации без знаний кодинга.
Примеры эффектного применения SVG-графики:
blockcollider.org – свежий современный сайт с SVG эффектами и анимацией
boite-a-oeufs.com – креативное агентство сделало свой сайт на вордпрессе, используя SVG и анимировав на GSAP платформе
playground.it – страница-«заглушка» пока идет редизайн, анимированные SVG-иллюстрации делают ее просто залипательной. Сыграете в Jump UP?
Изометрия в дизайне
Вероятно, возвращение изометрического дизайна стало реакцией на FLAT-экспансию по всему миру.
Этот стиль оформления достаточно трудоемкий. Для 3D-визуализации в двумерном пространстве веб-страницы потребуется работа с графическими элементами. С другой стороны, изометрические иконки и графика – это отличный способ показать свою индивидуальность.
Примеры современных изометрических дизайнов:
pikmykid.com – приятный веб-дизайн в мягких тонах с плавными эффектами, изометрическими иллюстрациями, фиксированными полигональными фонами и красивыми кнопками (призрачные / с градиентным фоном)
brightscout.com – зеленый дизайн сайта компании красиво проиллюстрирован, использован полу-плоский стиль с тенями, градиентами и скорлл-эффектами
mibexsoftware.com – сайт софт-компании, современный плоский изометрический дизайн с фирменным персонажем
Разделенный экран
Мода на разделение веб-страниц пополам появилась в результате эволюции Hero-изображений.
Вертикальное разделение позволяет добавлять другие стилевые элементы. Сплит-экраны дают отличные возможности для продвижения контента.
Сайты эффектно использующие вертикальное разделение экрана:
enginethemes.com – разделенный пополам объект (элемент фирменного стиля) в центре главного сплит-экрана представляет компанию WP-разработчиков (код внутри / дизайн визуально)
bigeyeagency.com – нестандартная навигация с разделением экрана для кейсов, фоновое видео с текстурой и фотоэффекты в бэкграундах (высветление, размытие, боке, двойная экспозиция)
special.bose.eu – логическое разделение контента на главной, ярко представляет продукцию Bose и упрощает навигацию по сайту
chekhov.withgoogle.com – разделенным контентом представлен опрос «Узнай себя в произведениях Чехова»
Шесть актуальных трендов веб-дизайна | GeekBrains
https://d2xzmw6cctk25h.cloudfront.net/post/2104/og_image/696f6d77c5495caa47e4e6b1205243cd.png
Хороший дизайн всегда заставляет задуматься. Вот вы весь день кликаете на ссылки и скроллите, но потом вдруг почему-то останавливаетесь — на оригинальном взаимодействии с пользователем, интересном фото или просто на детали, которую раньше не видели. Что бы это ни было, глаз зацепился.
Почему так случилось? Здесь наверняка замешаны актуальные тенденции UX, визуальный опыт пользователя, его путь на вашем сайте. Как раз в этом и заключается разница между хорошим и классным сайтом.
Как и все тренды, тенденции в UX меняются. Если вы представляете бизнес, ваш сайт должен привлечь внимание, вовлечь и продать. Это и есть задача UX: захватить внимание пользователя, удержать его на странице и повысить конверсию.
В блогах и портфолио UX работает на чтение и шеринг материалов в других источниках. 75% пользователей оценивают, доверять сайту или нет, по внешнему виду. Поэтому важно, чтобы каждый разработчик фокусировался на потребностях юзера.
В этом материале мы выделили последние тенденции в веб-дизайне и для каждой подобрали сайт, который ярко её демонстрирует.
Чем меньше, тем лучше. Звучит как клише, но это один из топовых трендов ушедшего года, сохраняющий актуальность и сейчас. Бренд газировки Seriously Unsweetened создал минималистичный и подталкивающий к размышлению сайт.
Он сделан в конструкторе Squarespace. На основном изображении прозрачные бутылки с напитком размещены на ярком фоне: по одной на каждый вкус. А на узнаваемость бренда работает икс в логотипе.
Мы призываем дать свободу своему внутреннему минималисту. Вы облегчаете жизнь аудитории, не используя сложный UX — то, что дизайнеры называют «умственным усилием» (cognitive effort). Страница загружается быстрее, статистика отказов снижается и сайт фокусируется на целях вашего бренда.
Используйте пустое пространство с простыми, но контрастными цветовыми схемами, сосредоточьтесь на мелких деталях вроде логотипа и ставьте заголовки, которые чётко описывают содержание страницы.
Фокус на пользователе: Lemonade
Этот сайт — настоящий game-changer. Он меняет правила игры. Используя интеграцию с CUI (Conversation User Interface), он всего за пять минут способен предоставить пользователю подробные страховые котировки.
Lemonade — отличный пример привлекательного одностраничного сайта. На нём легко ориентироваться благодаря удобным кнопкам с действиями — например, «Узнать цены и подключить».
Интересное представление чат-бота — Майя — помогает быстрее подобрать подходящую страховку. Искусственный интеллект активно мимикрирует под живого человека: у Майи даже есть лицо. Этот чат-бот узнаёт нужную информацию маленькими кусочками. А также предсказывает возможные ответы пользователя и запоминает самые частые опечатки.
Такой веб-дизайн вызывает доверие. Кроме того, переходя между страницами, пользователь всегда знает, куда попадёт, — действия обозначены чётко.
Пример Майи показывает, как можно «очеловечить» своего бота
Нам целиком и полностью нравится этот UX — от заголовка «Забудьте всё, что вы знали о страховании» до розовых кнопок. И хотя чат-боты — идея совсем не новая, мы считаем, что за ними будущее.
Интересная анимация прокрутки: Crypton Trading
Сайт центра криптовалют, который использует искусственный интеллект для прогнозирования трендов и предпочтительных периодов покупки. Даже если вы не имеете отношения к крипте, вы будете прокручивать сайт и не сможете остановиться. И всё из-за потрясающей анимации, которая активируется во время скроллинга.
Каждый шаг прокрутки открывает новую букву, предложения формируются в неторопливом темпе — и пользователь вовлекается в криптопутешествие. Такой диалоговый UI помогает легко усваивать сложные технические детали.
Интерактивное приветствие
Вообще, если вы владеете JavaScript, то можете сами легко анимировать свой сайт. А если нет, у большинства веб-разработчиков есть инструменты для анимации, которые можно брать и использовать.
Но нужно оговориться: недавнее исследование NNG на рынке UX показало, что большинство пользователей замечают медленную загрузку страниц из-за нагромождения анимации прокрутки. Поэтому главное — не перестараться. Будьте осторожны, или вы рискуете пользователями.
Яркие фото товаров: Apple
Список топовых сайтов не обходится без Apple. Мы обсудили дизайн её сайта с Ганешем (Ganesh), старшим UX-разработчиком в MVF Global. Ему нравятся сверхреалистичные фото продуктов с разных углов, которые помогают продвигать товары благодаря особенному визуальному представлению.
Не каждый может конкурировать с Apple, это факт. Но принцип «качественные фотографии лучше продают» работает для всех. Поэтому вкладывайте время и деньги в фото и заботьтесь о том, что подумает покупатель.
Если хотите вдохновить сценариями использования своего продукта — так Apple продвигает линейку Pro — или просто показать его крупным планом, используйте вместо тысячи слов фото и получите отличную конверсию.
Если хотите построить личный бренд в вебе, нет примера лучше, чем сайт дизайн-студии Leandro Pedretti, созданный в конструкторе Wix. На момент подготовки статьи сайт, к сожалению, недоступен, так что выше ссылка на макет в Pinterest. В хедере — видео с разработкой прототипа, где сразу же демонстрируются возможности компании в дизайне.
Один клик — и вы под впечатлением. Видео вызывает больший эмоциональный отклик, чем картинка. Поэтому рекомендуем использовать возможности быстрого интернета. Но видео должно быть коротким, визуально привлекательным и без звука. Нет ничего хуже, чем звуки на сайте.
Сайт производителя бритв Harry’s продвигает мобильный дизайн. Мудрый шаг, учитывая, что недавний опрос показал: 83% покупателей по всему миру в будущем планируют делать покупки со смартфона.
Если вы разрабатываете интернет-магазин, убедитесь, что вы используете современные адаптивные технологии. Чётко представьте основные действия пользователей на сайте, упростите рекламные баннеры и укоротите меню.
В интернет-магазине также должны быть качественные фотографии товаров — это повышает доверие к бренду и демонстрирует актуальный ассортимент. Это именно то, что нам нравится в Harry’s, который разработан на конструкторе Shopify.
Последнее, но не по важности
Помните об основе основ — о заголовке. Чем крупнее, тем лучше. Жирные начертания шрифтов в сочетании с флэт-анимацией становятся всё популярнее. Пользователи проводят меньше времени на сайтах, и примерно 46% из них уйдут, если не увидят на странице чёткий месседж. Здесь поможет огромный красочный заголовок. Исследования показывают, что цвет увеличивает узнаваемость сайта на 80%, поэтому рекомендуем массивный заголовок, шрифт Sans Serif (без засечек) и яркий, однотонный фон.
Чтобы по-настоящему заинтересовать аудиторию, вы должны «повести её на прогулку», рассказать историю с запоминающимся содержанием. Анимация прокрутки хорошо подходит для этого — формирует повествование и не усложняет макет.
Узнайте свою аудиторию. Создайте сайт, который работает именно для неё, и подумайте об эстетике: оценят ли, например, любители технологий анимацию, или ваш смелый продукт не нуждается в этом? Какими бы ни были ваши страницы, никогда не забывайте о том, кто будет читать, нажимать и скроллить. Будьте в курсе тенденций дизайна, и тогда у вас получится сайт, который действительно привлечёт пользователей.
Эта статья — адаптированный перевод материала Website Building Expert. Недавно мы также писали об актуальных цветовых трендах по версии Shutterstock.
Хотите освоить лучшие практики веб-дизайна и все актуальные тренды? Тогда ждём вас на факультете веб-дизайна GeekUniversity! 🙂
лучших современных веб-сайтов — вдохновение для веб-дизайна
Веб-дизайн- Вдохновения
- Выбор редакции
- WordPress шаблоны
- Блог
- Войти
Веб-дизайнов от Тип сайта
- Корпоративный
- электронная торговля
- Событие
- Журнал / Блог
- Мобильное приложение
- Портал
- портфолио
- Товар
- веб-сервис
- WordPress темы
Веб-дизайн по цветов
10 тенденций современного веб-дизайна, которые вдохновят вашу стратегию на 2020 год
Веб-дизайн создает почти 95% первого впечатления посетителя о вашем бизнесе, а отличный дизайн может помочь вам улучшить показатели продаж.
Вот почему как никогда важно включить современный веб-дизайн в свою маркетинговую стратегию.
Но какие современные тенденции веб-дизайна появятся на горизонте в 2020 году и как вы можете использовать их, чтобы освежить свой сайт?
Просто прочтите 10 современных тенденций веб-дизайна, которые вы можете вдохновить в этом году!
Вам нужно больше вдохновения для современного веб-дизайна? Свяжитесь с WebFX или позвоните нам по телефону 888-601-5359!
Вам также может понравиться: Статистика веб-сайта 20201.Белое пространство
Современный дизайн веб-сайтов возвращается к минимализму с целенаправленным белым пространством, как в печатных журналах.
Подобно естественным течениям, белое пространство помогает перемещать посетителей по страницам вашего сайта, переходя от одного элемента к другому, и создает визуальную иерархию, в которой ни один элемент не отвлекает от целого.
Белое пространство комнаты для дыхания позволяет глазам отдыхать. Это также помогает пониманию, определяя отношения между элементами страницы.
Когда два элемента расположены близко друг к другу с небольшим промежутком между ними, человеческий глаз будет рассматривать их как одно целое. С другой стороны, если два элемента находятся дальше друг от друга, ваши глаза будут рассматривать их по отдельности.
Белое пространство позволяет посетителям определять иерархию вашего сайта. И они используют пустое пространство для поиска наиболее важной информации на страницах, поэтому знание того, как использовать белое пространство на вашем веб-сайте, поможет улучшить пользовательский интерфейс (UX) вашего сайта.
Пример: Взгляните на пустое пространство в цифровом портфолио Майлза Нгуена как веб-дизайнера и дизайнера взаимодействия.
Видите, как это ведет вас прямо ко всем важным моментам? Количество белого пространства, которое он оставляет в своем современном дизайне сайта, позволяет вашим глазам путешествовать с комфортом, давая вам много мест для отдыха.
Этот современный пример веб-дизайна переопределяет минимализм с продуманным использованием белого пространства.
2. Полностраничные заголовки
Полностраничные заголовки — это путь к современному веб-дизайну в 2020 году.
Веб-дизайнеры могут реализовывать варианты заголовков, но популярная установка включает добавление основного текста или кнопок призыва к действию (CTA) слева от заголовка с привлекательными изображениями справа.
Это потому, что читатели, как правило, сосредотачивают большую часть своего внимания на верхнем левом углу вашей страницы.
Пример: Сайт Discord, предлагающий приложение для голосового и текстового чата для геймеров, является хорошим примером.
Discord показывает забавное и причудливое изображение справа от заголовка, а слева подчеркивает преимущества платного сервиса. Их кнопки с призывом к действию четко обозначены и точно сообщают зрителям, что им нужно сделать, чтобы получить дополнительные впечатления.
Прокрутив вниз, вы обнаружите, что Discord группирует элементы сайта в карточки, делая их информацию гладкой, легкой для поиска и удобочитаемой, сохраняя при этом забавный элемент. Вы можете видеть, как такие веб-сайты создают ощущение игривой изысканности.
3. Игривые курсоры
Современные веб-сайты часто имеют курсоры, которые делают просмотр страниц новым.
Реализация игровых курсоров на вашем сайте в 2020 году может быть такой же простой, как изменение формы курсора, или столь же сложной, как кодирование анимации, запускаемой курсором.В любом случае ваши посетители отлично проведут время, используя уникальные курсоры.
Пример: Паоло Форнасье установил потрясающий курсор в своем онлайн-портфолио. Курсор отображает разные фотографии с волнистой анимацией и звуком фортепиано при прокрутке выровненного по вертикали текста в меню навигации.
Благодаря игривости анимации пользователи легко проводят пару минут, перемещая курсор по меню навигации.
Ваш курсор не должен быть таким сложным, как этот, но добавление уникального элемента к курсору обязательно добавит изюминки вашему сайту.
4. Динамическая прокрутка
Динамическая прокрутка — еще одна тенденция современного веб-дизайна на 2020 год.
Одна версия динамической прокрутки устанавливает разные скорости прокрутки для переднего и заднего планов вашего сайта, чтобы дать посетителям трехмерный эффект.
Пример: Взгляните на сайт Crypton, чтобы увидеть, насколько забавна динамическая прокрутка делает сайт.
Фоновое видео также можно включить в динамическую прокрутку, при которой видео воспроизводится только при прокрутке пользователя, а с помощью динамической прокрутки вы можете запускать анимацию и делать изображения похожими на магию.
5. Пользовательские иллюстрации
Иллюстрации вдохнут жизнь в ваш бренд и веб-сайт.
Что касается иллюстраций, современный веб-дизайн 2020 года черпает вдохновение из печатных изданий и других традиционных художественных форматов.
Прошли те времена, когда в 2020 году веб-сайты включали нестандартные иллюстрации в свой современный веб-дизайн.
Пример: Взгляните, например, на искусство известного иллюстратора Алисы Ли.Она разработала индивидуальные иллюстрации для популярных брендов, таких как Macy’s и The Washington Post. Вот один, который она создала для Airbnb.
Ее искусство помогло вызвать растущую тенденцию к созданию пользовательских иллюстраций для брендов, которые выглядят так, как будто они вышли прямо из сборника рассказов.
И с расширенными возможностями кодирования, иллюстрации продолжают развиваться за пределы 2D-дизайна.
Даже сейчас цифровой дизайн притягивает трехмерные иллюзии, которые добавляют еще один уровень глубины Интернету.
Например:
- Медленное изменение одного цвета на другой с градиентной заливкой
- Цифровые стили вырезания, имитирующие рисунки, вырезанные из слоев бумаги
- Взаимодействие с 3D-курсором, с которым пользователи не могут не взаимодействовать на вашем сайте
6. Расчетная сетка
Современные веб-дизайнеры продолжат играть с сетками в 2020 году — и асимметричный макет, вероятно, станет еще более популярным.
Пример: Интернет-портфолио Jingqi Fan демонстрирует, насколько функциональным может быть асимметричный макет.На его сайте много белого пространства и минималистский стиль, подчеркивающий его проектные изображения, в то время как асимметричный дизайн делает его сайт свежим, захватывающим и интересным.
Многие ведущие дизайнеры используют CSS Grid Layout, чтобы перенести в Интернет все возможности макета печати.
Также известный как Grid, CSS Grid Layout — это система макета 2D-сетки для Cascading Styles Sheet, языка кодирования, который описывает макет страницы сайта HTML. Сетка позволяет веб-дизайнерам более легко и последовательно создавать макеты для сложного адаптивного веб-дизайна в разных браузерах.
Макету сеткиCSS еще предстоит пройти путь, прежде чем он станет совместимым со всеми интерфейсами, но он продолжает набирать обороты как главный тренд веб-дизайна на 2020 год.
7. Цветовые тренды в 2020 году
В современном дизайне веб-сайтов используются цветовые палитры, и каждый год для Интернета появляются новые цвета. В 2018 году он был желтым, 2019 — синим, а в 2020 году сообщество прогнозирования тенденций WGSN предсказывает монетный двор.
В целом Venngage прогнозирует, что онлайн-цветовые палитры станут более приглушенными в 2020 г.2019.
Градиенты — это тенденция, продолжающаяся с 2019 по 2020 год, и дизайнеры, вероятно, продолжат изучать глубины, на которые они могут подойти к дизайну с помощью градиентов. А поскольку градиенты охватывают диапазон цветов, они идеально подходят для целевой аудитории.
Психология цвета также будет играть важную роль в тенденциях веб-дизайна на 2020 год. Прежде чем создавать новую цветовую палитру для своей компании, обязательно изучите психологию цвета. Важно, чтобы ваши цвета соответствовали вашему бренду.
Некоторые более мелкие тенденции в цветах, вероятно, сохранятся с 2019 по 2020 год. Кажется, что:
- Мягкие, холодные цвета (синий, бирюзовый и серый) = Информация и фон
- Смелые, теплые цвета (красные, оранжевые, даже зеленые) = призывы к действию (CTA)
Пример: Посетите веб-сайт Trello, чтобы найти программное обеспечение для совместной работы над проектами и организации.
Этот веб-сайт — отличный пример объединения приглушенных цветовых палитр и градиентов в гладкий иллюстративный дизайн.Они даже выделяют свой призыв к действию ярким цветом!
8. Жирный шрифт
Современный веб-дизайн будет еще больше играть со шрифтами в 2020 году по сравнению с 2019 годом. Шрифты с засечками и шрифтами с засечками так же популярны, как и прежде, а винтажный шрифт неожиданно возвращается в брендинг.
Обведенный шрифт и полужирный шрифт также отображаются во многих местах — от названий брендов до заголовков целевых страниц, где наиболее заметной тенденцией к шрифтам является преобладающий текст на экране.
Пример: Посмотрите, как Startup Lab использует выделение изображений жирным шрифтом.Они придают сайту смелость и объемность, но при этом выглядят профессионально.
Весело, правда?
Смотрите также, как они добавили трафаретные буквы в название своего бренда? Он демонстрирует немного шероховатый эффект, который приятно контрастирует с розовой жевательной резинкой на странице. Смелый выбор, но им это удалось.
Убедитесь, что выбранный шрифт соответствует вашему бренду, вашей аудитории и цели, которую вы ставите перед своей компанией.
Не забудьте также выбрать удобный для чтения шрифт для основного текста любого контента, который у вас есть на вашем сайте.Читаемость вашего текста — один из важнейших факторов улучшения UX вашего сайта. Простой и скромный шрифт без засечек, такой как Arial, — отличный выбор.
9. Повышенное внимание к UX / UI
В 2019 году современный веб-дизайн ориентирован на людей, а в 2020 году он станет еще более важным.
UX вашего сайта должен быть плавным, бесперебойным и интересным в 2020 году. Это означает:
Веб-дизайнеры сочетают функциональность с творчеством, чтобы создать отличный UX, опираясь на чистый дизайн, оставаясь при этом творческими и уникальными во всех смыслах.Лучшие веб-дизайнеры вносят немного неопрятности в белый стерильный мир технологий, как шоколадный соус на кухонном столе.
Наряду с UX пользовательский интерфейс вашего сайта должен быть интуитивно понятным в 2020 году. Это означает:
- Голосовые интерфейсы
- Подписи к изображениям
- Транскрипции видео
- Без отвлекающих элементов
- Конструкция со сбалансированным движением
Повысьте уровень UX / UI вашего сайта с помощью:
- Предоставление посетителям удобного для чтения контента и простых в использовании интерфейсов
- Покоряют эстетическое пристрастие к сладкому
Также важно отметить, что мобильный серфинг станет больше в 2020 г.2019. Более 50% интернет-трафика поступает с мобильных устройств, и ожидается, что это число будет расти.
Чтобы веб-сайт имел успешный современный веб-дизайн в 2020 году, все его элементы должны безупречно переводиться как на компьютер, так и на мобильные устройства. Мобильная адаптивная анимация и видеосъемка будут приобретать все большее значение в современном веб-дизайне.
Пример: Взгляните на элегантный мобильный дизайн Чобани.
Chobani предоставляет мобильным пользователям элегантный, полностью адаптивный дизайн, полностью использующий пустое пространство.Их содержание легко сканировать с помощью привлекательных и аппетитных изображений их продуктов.
С помощью простого баннера с призывом к действию в нижней части экрана, Chobani точно знает, как привлечь свою мобильную аудиторию.
10. Эффектные, увлекательные истории
Наконец, современные веб-сайты в 2020 году будут рассказывать истории.
Чтобы ваш сайт превратился в настоящий современный веб-сайт, научитесь рассказывать захватывающие истории в своих контентных и рекламных кампаниях.
Благодаря стильному дизайну и интересной истории ваш сайт обязательно привлечет и привлечет вашу целевую аудиторию.
Пример: Веб-сайт экологически чистого продовольственного бренда Zume — хороший пример использования вашего веб-сайта для рассказа истории.
Zume обнаружил проблему, решил ее исправить, и они рассказывают миру, как они это делают, делая приготовление пищи более эффективным, по отдельности.
Сайт чистый, поддающийся сканированию, на нем много изображений, инфографики и очень интересного видео, объясняющего, кто они и их цель.
Хотите вдохновения для более современного веб-дизайна?
Вот некоторые из наших любимых примеров современного дизайна веб-сайтов, которые могут вас вдохновить.
Хотите помочь превратить ваш сайт в современный веб-дизайн в 2020 году? У нас есть отмеченное наградами портфолио веб-дизайнов для более чем 1000 компаний!
Позвоните нам по телефону 888-601-5359 или свяжитесь с нами через Интернет, чтобы узнать, как наши услуги веб-дизайна могут превратить вас в гуру современного веб-дизайна!
6 основных элементов современного дизайна веб-сайтов, которые нельзя игнорировать
Как создать чистый, современный веб-сайт? Какие элементы дизайна вам нужно использовать или не использовать, чтобы ваш сайт выглядел минималистичным, смелым и профессиональным для вашего бизнеса?
Во-первых, давно прошли те времена, когда веб-сайт выглядел как секретные разделы оборотной стороны газет.
Вы знаете, что я имею в виду?
Здесь все буквально размещено на одной странице, обычно является домашней страницей , и так тесно переполнено множеством ярких и ярких значков, крошечных изображений, глупых маленьких уловок, бесполезных баннеров и почти любого места между элементами контента.
И, говоря о контенте, обычно его было очень мало.
Ой, подождите, немного похоже на сайт, показанный ниже.
Хотел бы я вам сказать, что снимок экрана с указанного выше веб-сайта на самом деле не существует, но он действительно существует.
Он управляется успешным британским предпринимателем по имени Ling Valentine , и, хотите верьте, хотите нет, его сайт довольно популярен.
Не удивительно, когда это выглядит так, , правда?
Я знаю, что вам интересно:
Следует ли использовать этот метод в вашем стремлении создать современный дизайн веб-сайта, который будет работать для вашего бизнеса?
Нет, — краткий ответ.
Создание минималистичного дизайна веб-сайта — это НЕ о том, чтобы втиснуть как можно больше на каждую страницу. Во всяком случае, это как раз наоборот.
Речь идет о создании ясности и простоты .
Меньше значит больше , верно ? Что ж, более или менее так. Чтобы не запутать вас там.
При разработке минималистичного веб-сайта для своего бизнеса вы должны непредвзято относиться к нескольким важным вещам —
- Удобство использования.
- Функциональность.
Несмотря на то, что вы сосредоточены на создании чистого и минималистичного веб-сайта, ваш проект с современным дизайном веб-сайта должен быть удобным для пользователя и обладать всеми функциями, необходимыми для увеличения конверсии.
Пользователи вашего веб-сайта и потенциальные клиенты должны иметь возможность легко перемещаться по вашему веб-сайту.
Итак, если вы думаете о полном редизайне веб-сайта, вот 6 основных элементов современного веб-дизайна , которые вы не должны игнорировать.
Приступим.
№1. Минималистичный дизайн
Номер один в моем списке, хотя я уже несколько раз использовал слово «минимальный» в этом посте.
Минимальный дизайн — это именно то, как это звучит, меньше — часто лучше.
Minimal design можно применить к любому стилю, будь то плоский, смелый, элегантный, стильный или boutique.
Минимальный дизайн на веб-сайтах необходим для создания фокуса и ясности для пользователей вашего сайта.Это помогает пользователям сосредоточиться на вашем контенте и упрощает навигацию по вашему сайту.
В минималистичном дизайне иногда меньше может показаться большим. Некоторые дизайнеры веб-сайтов пытаются сбалансировать основные элементы страницы. то есть контент, формы, изображения и другой визуальный контент, и поместите достаточное количество свободного пространства вокруг этих элементов.
Если вы вообще ориентированы на конверсию, вы оцените преимущества веб-сайта с минималистичным дизайном.
Веб-сайт, разработанный с минимальными элементами:
- Легче управлять.
- Загружается намного быстрее, чем веб-сайты с большим количеством опций, функций, элементов и тяжелым контентом.
- Помогает пользователям больше сосредоточиться на вашем контенте.
- Менее отвлекает и лучше конвертирует.
- Сделает ваш бизнес более профессиональным.
- Вашим посетителям проще ориентироваться и использовать. Как я уже несколько раз повторял.
Архитектор-дизайнер Сайт Сергея Махно — прекрасный пример минималистичного дизайна.
№ 2. Подходит для мобильных устройств (Адаптивный дизайн)
Верно, перейдем к мобильности.
Если ваш веб-сайт ВСЕ ЕЩЕ не оптимизирован для мобильных устройств, то вы на самом деле приносите своему бизнесу больше вреда, чем пользы, правда!
На самом деле, ваши конкуренты, вероятно, смеются над тем, что они могут в полной мере воспользоваться тем фактом, что ваши клиенты не могут получить доступ к вашему веб-сайту, продуктам или услугам с мобильных устройств.
Верно, все ваши потенциальные клиенты переходят на сайты конкурентов, потому что их сайты доступны на мобильных устройствах.
Если вы счастливы выбросить деньги на ветер и погрузить свой бизнес в яму, не беспокойтесь о создании веб-сайта, удобного для мобильных устройств.
Посмотрите на эту статистику. Думаю, тогда вы в полной мере оцените важность гибкого дизайна для мобильных устройств.
Что я рекомендую вам сделать, если вы не знаете, оптимизирован ли ваш сайт для мобильных устройств, — это протестировать его здесь.
№ 3. Веб-безопасный шрифт
Современный дизайн веб-сайтов также будет иметь безопасную, чистую и жирную типографику.
Чистая типографика будет включать следующие элементы —
- Использование стандартных веб-шрифтов.
- Текст правильного размера, обычно больше 16 пикселей. FabrizioVanMarciano.com использует 17 пикселей для основного текста для улучшения читаемости.
- Соответствующий межстрочный интервал для улучшения читаемости. Я рекомендую 1.9em /
- Ограниченное использование шрифтов разного цвета.
- Серый или черный шрифт, в зависимости от фонового тона / изображения.
Если на вашем веб-сайте все еще используется размер шрифта 12 пикселей или меньше, значит, он в порядке и действительно застыл во времени. Увеличьте его, чтобы вашим пользователям было легче читать вашу веб-копию.
№ 4. Изображения героев и баннеры
Использование больших изображений героев — еще одна очень популярная тактика современного дизайна веб-сайтов.
На самом деле, согласно Google Trends, эта тенденция в последние годы неуклонно растет. Посмотрите на снимок экрана ниже.
Изображения-герои — это по сути большие баннеры, обычно видимые над сгибом веб-страниц.
Очевидно, эти изображения в некоторой степени связаны с природой веб-сайта или его содержанием.
Хорошо продуманный баннер-главный герой и продуманное маркетинговое сообщение — лучший способ сообщить посетителям вашего сайта, о чем ваш сайт. Актуальность здесь является ключевым моментом.
Если вы посетите, например, домашнюю страницу FabrizioVanMarciano.com, вы увидите, что там есть красивый большой раздел, содержащий изображение меня, работающего на своем ноутбуке в фоновом режиме.
Мое сообщение ясное и краткое, и это помогает людям узнать, о чем мой веб-сайт, и, по сути, о том, что я тоже.
Многие другие персональные бренды, коучинговые и консультационные сайты также очень эффективно используют изображения-герои и баннеры, обычно для того, чтобы помочь им установить позитивную связь с посетителями своих сайтов, а также на личном уровне.
Вот несколько предпринимателей, которым это очень хорошо удается с изображениями героев своего личного бренда.
Крис Дакер Крис Дакер.com исключительно использует образ своего героя.
Как и Мэрайя на ее веб-сайте Femtrepreneur.
№ 5. Полноэкранные фоновые видео
Заметили ли вы, что на некоторых веб-сайтах пользовательские видео воспроизводятся в фоновых заголовках?
Что ж, это еще одна тенденция в современном веб-дизайне, которая становится все более популярной.
Проверьте тренд роста в Google Trends для этого.
Использование фонового видео на веб-сайтах достигается за счет жесткого кодирования, выполненного с помощью пользовательского HTML, CSS и небольшого количества JavaScript.
Или, если вы не слишком знакомы с кодом и хотите сэкономить время, деньги и сохранить немного здравомыслия, вы можете найти несколько плагинов, которые помогут вам быстро и легко создать фоновое видео для вашего сайта WordPress.
Если вы вообще заинтересованы в том, чтобы научиться создавать фоновое видео в WordPress самостоятельно, посмотрите этот видеоурок на YouTube.
Популярный конструктор страниц, Thrive Architect, позволит вам использовать фоновое видео в дизайне вашей страницы и в разделах героев.
Наконец, посетите веб-сайт Coulee Creative, чтобы увидеть прекрасный пример полноэкранного фонового видео в действии.
№ 6. Пуговицы-призраки
Хорошо, наконец, я хочу поделиться с вами модным дизайнерским увлечением современных веб-сайтов, с которым вы, возможно, знакомы, а именно использование кнопок-призраков или кнопок прозрачности.
Эти кнопки обычно бывают белого цвета или с прозрачным фоном.
Вы обычно видите их встроенными поверх изображения героя или какой-либо визуальной графики. См. Пример ниже.
Признаюсь, я люблю кнопки-призраки и считаю, что они отлично смотрятся на некоторых сайтах.
Тем не менее, когда дело доходит до оптимизации для увеличения конверсии, использование призрачных кнопок не всегда может быть такой хорошей идеей.
В недавнем тематическом исследовании Elevated Third тесты показали, что однотонные кнопки работают намного лучше, чем кнопки-призраки.
Нетрудно понять, почему.
Если вы посмотрите на снимок экрана выше еще раз и внимательно, вы увидите, что призрачная кнопка внизу страницы на самом деле почти невидима по сравнению с фоновым изображением.Это не так сильно выделяется.
Вы согласны с тем, что он ничем не выделяется?
Вот еще один —
Дело в том, что если вы собираетесь использовать кнопки-призраки в своем современном дизайне веб-сайта, просто убедитесь, что вы сделали их видимыми, а не скрытыми поверх плохо контрастирующих изображений или фона.
Лучший способ сделать ваши кнопки-призраки видимыми — это использовать какой-то градиент или эффект фильтра над изображениями ваших героев.
Упаковка
Итак, у вас есть 6 свежих современных тенденций в дизайне веб-сайтов , которые вдохновят вас на следующий веб-проект.
Конечно, вам не нужно вкладывать все свое время, деньги и энергию в использование каждого отдельного элемента, чтобы сделать ваш сайт более подходящим для настоящего времени.
В конце концов, пользовательский опыт и удовлетворение потребностей и желаний людей, потребляющих ваш контент, должны быть высшим приоритетом.
Кроме того, я хочу заявить, что хороший копирайтинг и твердое маркетинговое сообщение также являются частью общего архитектора дизайна. Хороший текст никогда не должен быть второстепенным в современном дизайне веб-сайтов, он должен быть его частью.
Желаем удачи.
шт. Нужна помощь с дизайном и брендингом вашего сайта WordPress? Щелкните здесь, чтобы узнать больше, или заполните мою анкету по веб-дизайну по номеру начать работу .
Примечание: Этот пост может содержать партнерские ссылки на продукты или услуги, которые я использую в своем бизнесе и поэтому рекомендую как дизайнер и разработчик. Это означает, что если вы нажмете на партнерскую ссылку и сделаете покупку продукта или услуги, я могу заработать небольшую комиссию по номеру без дополнительных затрат для вас .
14 современных тенденций веб-дизайна на 2018 год — DesignRevision
Тенденции в веб-дизайне растут и падают как реакция на технологические и культурные изменения. Тенденции могут меняться в таком же сверхбыстром темпе, как и все остальное в Интернете.
Введение
В этом посте я углублюсь и исследую некоторые из самых популярных тенденций веб-дизайна, которые я проанализировал, и верю, что мы увидим больше в течение 2018 года. Возьмите свой любимый напиток и приготовьтесь к вдохновляющим и модным американским горкам! 🍹
Содержание
Рассказывание историй с помощью иллюстраций и анимации
Использование иллюстраций стало мейнстримом и в последние несколько лет занимало центральное место.Такие компании, как Stripe и Slack, задают тон, используя их, чтобы рассказывать истории и определять свой бренд.
Вы можете использовать иллюстрации для любых целей. Самый популярный вариант использования — придать смысл рассказу и помочь вашей аудитории визуализировать определенные аспекты вашего продукта или услуги.
Использование иллюстраций в веб-дизайне — отличный способ придать смысл рассказу и помочь вашей аудитории визуализировать определенные аспекты вашего продукта или услуги. Нажмите, чтобы твитнуть
Только в этом году я заметил, что дизайнеры используют иллюстрации больше, чем когда-либо.Взглянем, например, на inturn.com.
анимация сайта inturn.comОни использовали анимированные иллюстрации, чтобы подчеркнуть проблемы управления избыточными активами. Анимации сведены к минимуму и в коротких, легко усваиваемых циклах. Таким образом, аудитория может увидеть проблему, которую решает их продукт, в привлекательной визуальной манере.
Этический дизайн и движения против темных паттернов пользовательского интерфейса
Страшно видеть, как некоторые крупные компании максимально используют данные, собранные пользователями, чтобы использовать человеческое поведение и обмануть людей.
Это предмет, который активно обсуждался, и он привлекает все больше и больше внимания как в сообществе дизайнеров, так и в широкой общественности.
С приближением вступления в силу GDPR мы увидим рост осведомленности о том, как данные собираются, обрабатываются и защищаются компаниями по всему миру (не только теми, которые расположены в ЕС).
Последние законодательные изменения откажутся от некоторых прошлых решений высшего руководства и позволят дизайнерам сосредоточиться на обеспечении более ориентированного на человека опыта.
Дизайн-системы
Дизайн-системыкак таковые не входят в группу «трендов веб-дизайна», но их определенно стоит упомянуть.
За последние несколько лет многие известные компании присоединились к тенденции популяризации своих внутренних систем проектирования. Тем самым они не только повышают узнаваемость бренда, но и подчеркивают его последовательность.
Система дизайна AtlassianЭто здорово! По сравнению со скучными «формулировками миссии» вы сможете заглянуть внутрь ценностей компании и понять, как они хотят, чтобы их воспринимали.Если вы спросите меня, там будет много уроков.
Дизайн-системы великолепны, потому что они необходимы для решения масштабных задач и обеспечивают целостные стандарты и наборы принципов. Уважение и то, и другое не только упрощает взаимодействие с внутри организации, но и способствует повышению согласованности продуктов .
Использование дизайн-системы упрощает общение и повышает согласованность продуктов. Нажмите, чтобы твитнуть
Творческое использование ИИ и интерактивных чат-ботов
По мере развития технологий становится все проще интегрировать чат-ботов на базе искусственного интеллекта в ваши сервисы с помощью открытых API.Чат-боты не только забавны и интерактивны, но вы можете запрограммировать их так, чтобы они могли самостоятельно настраиваться и обеспечивать персонализированный пользовательский интерфейс.
CNN Facebook ботСамые популярные варианты использования чат-ботов в то время — для маркетинга и рекламы, поддержки клиентов и для создания бесшовных процессов адаптации продукта.
Чат-боты оперативны, всегда доступны, и вы можете использовать их множеством творческих способов. Взаимодействие с чат-ботом не только улучшает взаимодействие с пользователем, но и увеличивает концентрацию внимания.
Еще больше градиентов
Градиентывпервые появились в эпоху Web 2.0, когда глянцевые кнопки считались стильными. Теперь они возвращаются более яркими, чем когда-либо, а также в лучшей форме. Никакой каламбур! Дизайнеры используют градиенты везде, от простых и органических форм до фонов и даже теней.
PlayUp от Estudio NK Градиентыснова появились несколько лет назад, но Apple подтвердила эту тенденцию, выпустив новый iPhone X. В этом году мы ожидаем, что градиенты перейдут на новый уровень и будут использоваться еще более творчески.
Нравится вам это или нет, но Интернет — красочное место, управляемое таинственными единорогами. Дизайнеры будут продолжать злоупотреблять градиентами и комбинировать цвета визуально привлекательными способами, пока в спектре достаточно цветов.
Повествование через визуализацию данных
Визуализация данных — отличный инструмент для создания визуально привлекательных историй, которые увлекут вашу аудиторию. Мне очень нравятся данные, и я определенно предвзято отношусь к этому, так как мне хотелось бы видеть больше.
До сих пор дизайнеры использовали визуализацию данных для инфографики или других статических сред. Тем не менее, последний прогресс в веб-технологиях и более доступных библиотеках меняет это. Веб-дизайнерам теперь стало проще, чем когда-либо, использовать визуализацию данных как эффективный инструмент для рассказа историй.
Предсказательный мирСовет для профессионалов: Сочетайте визуализацию данных с интуитивно понятным взаимодействием с пользователем, и вы получите идеальный рецепт потрясающего онлайн-опыта, который хорошо выглядит и одновременно познавательно.
Интерактивные пользовательские интерфейсы
Анимированные иллюстрации могут увести вас так далеко. Использование взаимодействий, использующих текущее состояние пользовательского интерфейса, выводит вас на новый уровень творчества. Дарин Сеннефф добился этого с помощью интерактивной анимации входа в систему Yeti, которая реагирует на ввод пользователя.
Анимированный Йети от Дарина СеннеффаИнтерактивная анимация — отличный способ добавить уникальности вашему пользовательскому интерфейсу. Вскоре после этого мы увидели, что NPM последовала их примеру и создала нечто подобное
Внедрение микровзаимодействий пользовательского интерфейса также может изменить или изменить восприятие вашего веб-сайта или приложения.Поэкспериментируйте с творческими и не отвлекающими взаимодействиями, которые в сумме добавляют к богатому пользовательскому опыту, могут иметь ценность. Хотя добавление слишком большого количества или использование переходов, которые нарушают работу пользовательского интерфейса или заставляют его казаться вялым, повлияют на удобство использования.
Еще больше (разноцветных) теней
Падающие тени помогают дизайнерам имитировать глубину в плоском 2D-пространстве. Они также помогают имитировать реальный мир и его естественные узоры, чтобы создать иллюзию расстояния между элементами.
Тени могут не только выделять элементы пользовательского интерфейса, но они также подсказывают, как определенные поверхности расположены в пространстве, обеспечивая ощущение перспективы.
Новая популярная тенденция, которую я недавно заметил, — это использование красочных, ярких или даже градиентных теней, которые соответствуют цвету элемента, который их излучает.
Органические, косые или геометрические формы и узоры
Органические кривые и округлые формы очень популярны среди современных тенденций веб-дизайна. Вы можете использовать округлые, наклонные или геометрические формы, чтобы привлечь внимание пользователя и направить его на наиболее важные области вашего веб-сайта.
Sugar Landing Page Эдди ЛобановскогоПростые изогнутые объекты в сочетании с градиентами и тенями могут создавать элегантные компоновочные композиции, объединяющие каждую секцию и обеспечивающие ощущение непрерывности.Подобные формы также могут работать очень хорошо, если вы объедините их с соответствующими стоковыми фотографиями, видео или иллюстрациями.
Что делает использование органических форм успешным в веб-дизайне, так это их корень в природе и их гибкость в их использовании для обеспечения естественного визуального потока.
Полужирный шрифт
Типографика — это основа веб-дизайна, а также вечная тенденция, которая в ближайшее время не станет непопулярной. Великие дизайнеры уделяют большую часть своего времени только типографике, чтобы оптимизировать дизайн для удобочитаемости и удобства использования.
Я заметил, что в последнее время дизайнеры используют популярное направление — это использование наложенных шрифтов в стоковой фотографии и неправильных макетов. Этот метод отлично подходит не только для создания контраста и уникального визуального баланса, но и для обеспечения хорошего восприятия вашего сообщения.
КгариИспользование интерактивной типографики, ориентированной на рассказывание историй, также может создать замечательный и увлекательный опыт. Прекрасным примером, заслуживающим внимания, является веб-сайт K’gari. Он не только использует великолепные пользовательские шрифты, но также позволяет пользователю продвигать историю вперед посредством взаимодействия.
Минимализм
Минимализм — одна из самых популярных и неподвластных времени философий дизайна. Он стал популярным в печати и среди популярных художников-графических дизайнеров после Второй мировой войны, и сегодня мы все еще рассматриваем его как технику, которую нужно использовать.
Магазин ВольтаМинимализм работает, потому что заставляет дизайнеров сводить интерфейсы продукта к наиболее важным основным функциям. Это заставляет нас делать упор на содержание, а не на внешний вид. Чтобы быть эффективным, минимализм в веб-дизайне должен иметь прочную основу, определяемую сеткой, а также исключительное использование типографики и контраста.
Минимальная стоковая фотография
Времена дрянных корпоративных стоковых фотографий давно прошли, по крайней мере, в большинстве областей современной сети. Благодаря тому, что Unsplash стал незаменимым ресурсом для создания красивых стоковых фотографий, дизайнеры получили доступ к большому количеству великолепных изображений на выбор для своих проектов.
Недостаточно иметь доступ к отличным изображениям. Важно адаптировать и комбинировать стоковые фотографии и контент таким образом, чтобы сообщение, которое вы пытаетесь донести, находило отклик у вашей аудитории.Популярная тенденция — использовать минималистичные стоковые фотографии со сплошным цветом фона, которые подчеркивают продукт или некоторые из его определенных ключевых особенностей.
Бугесса от Dog StudioИспользование хорошо интегрированных стоковых фотографий — также отличный способ имитировать естественную среду, в которой, казалось бы, должен быть каждый компонент.
Сломанные сетки и схемы
Сетчатые системы составляют основу для создания ритмичной структуры в любой планировке. Однако иногда нарушение сетки путем наложения элементов и их отображение таким образом, чтобы не соответствовать рекомендациям, может привести к приятным результатам, которые по-прежнему остаются гармоничными.
Мелвилл от WaaarkНарушение сетки стало популярным способом подчеркнуть элементы пользовательского интерфейса и направить внимание аудитории на призыв к действию. Разница в том, сколько обычно слишком много, может меняться в зависимости от имеющейся композиции макета, но обычно составление дизайна на основе двух смежных перекрывающихся сеток является наиболее распространенной практикой среди дизайнеров.
Вариативные и расширяющиеся шрифты
Переменные шрифты OpenType — это относительно новый формат шрифтов, который позволяет упаковывать несколько шрифтов в один файл.Это дает множество преимуществ, наиболее важным из которых является огромный прирост производительности.
Все больше и больше платформ начинают оказывать поддержку, и я верю, что в этом году вариативные шрифты станут более популярными среди дизайнеров. Самым популярным вариантом использования переменных шрифтов, вероятно, является ребрендинг Dropbox, который дебютировал с представлением Sharp Grotesk, их пользовательского шрифта.
Заключение
Этот список далеко не исчерпывающий, и в него вошли только некоторые ведущие тенденции веб-дизайна.Есть много других тенденций, которые я мог бы добавить, но я попытался ограничиться только теми, которые, по моему мнению, будут сохраняться в течение 2018 и последующих лет.
Каковы ваши любимые тенденции в дизайне, которые, по вашему мнению, станут популярными в 2018 году? Я что-нибудь пропустил? Дайте мне знать в разделе комментариев ниже!
Дизайн пользовательского интерфейса в современных веб-приложениях — Smashing Magazine
Что такое дизайн пользовательского интерфейса? Что делает пользовательский интерфейс эффективным и, что более важно, как вы подходите к созданию хорошего пользовательского интерфейса? В этой главе рассматриваются как теория, так и практические приемы, связанные с дизайном визуального интерфейса в современных веб-приложениях.
Что такое пользовательский интерфейс?
«То, как вы выполняете задачи с помощью продукта — что вы делаете и как он реагирует — это и есть интерфейс» — Джеф Раскин
Дизайн пользовательского интерфейса — это не только кнопки и меню; Речь идет о взаимодействии между пользователем и приложением или устройством, а во многих случаях — о взаимодействии между несколькими пользователями через это устройство. Это означает, что дизайн пользовательского интерфейса не о том, как выглядит продукт, а о том, как он работает.Речь идет не только о расположении кнопок и выборе цветов, но и о выборе правильных инструментов для работы. Нужны ли кнопки для конкретного интерфейса? Если да, то что должны делать эти кнопки? Что мне нужно предоставить пользователям, чтобы они могли понять, как работает мое приложение, и с легкостью выполнить то, что они хотят?
Дополнительная литература по SmashingMag:
Работа над пользовательским интерфейсом на ранних этапах жизненного цикла разработки продукта жизненно важна, потому что, как лаконично выразился Джеф Раскин: «Для покупателя интерфейс — это продукт».Пользователь видит и взаимодействует с пользовательским интерфейсом, а не с базовой серверной архитектурой вашего приложения. Таким образом, правильное понимание этого элемента окажет большое влияние на то, насколько вашим клиентам нравится пользоваться вашим продуктом и насколько он прост в использовании. Начните с разработки интерфейса, а затем кодируйте серверную часть, которая его поддерживает, вместо того, чтобы сначала создавать внутреннюю часть, а затем помещать поверх нее «оболочку» интерфейса.
Что делает отличный пользовательский интерфейс?
Прежде чем мы приступим к созданию пользовательского интерфейса для нашего продукта, важно сначала понять, что делает хороший пользовательский интерфейс; каких качеств мы должны стремиться достичь? Все отличные интерфейсы имеют восемь общих качеств или характеристик:
- Ясность : интерфейс позволяет избежать двусмысленности, делая все понятным посредством языка, потока, иерархии и метафор для визуальных элементов.Понятные интерфейсы не нуждаются в руководствах. Они также гарантируют, что пользователи делают меньше ошибок при их использовании.
- Concision : легко сделать интерфейс понятным, слишком уточнить и пометить все, но это приводит к раздуванию интерфейса, когда на экране одновременно отображается слишком много всего. Если на экране слишком много элементов, найти то, что вы ищете, будет сложно, и интерфейс станет утомительным в использовании. Настоящая проблема в создании отличного интерфейса — сделать его одновременно кратким и понятным.
- Знакомство : что-то знакомое, когда вы вспоминаете предыдущую встречу с ним. Даже если кто-то впервые использует интерфейс, некоторые элементы могут быть вам знакомы. Вы можете использовать метафоры из реальной жизни, чтобы передать смысл; например, вкладки в виде папок часто используются для навигации по веб-сайтам и в приложениях. Люди узнают их как элементы навигации, потому что им знакома метафора папки.
- Отзывчивость : Это означает несколько вещей.Во-первых, отзывчивость означает скорость: хороший интерфейс не должен казаться вялым. Во-вторых, интерфейс должен обеспечивать хорошую обратную связь с пользователем о том, что происходит, и о том, успешно ли обрабатывается ввод пользователя.
- Согласованность : Обеспечение единообразия интерфейса для всего приложения важно, поскольку оно позволяет пользователям распознавать шаблоны использования. Как только ваши пользователи узнают, как работают определенные части интерфейса, они смогут применять эти знания к новым областям и функциям, при условии, что пользовательский интерфейс там соответствует тому, что они уже знают.
- Эстетика : хотя вам не нужно делать интерфейс привлекательным для того, чтобы он выполнял свою работу, улучшение внешнего вида сделает время, которое пользователи проводят за вашим приложением, более приятным; и более счастливые пользователи могут быть только хорошо.
- Эффективность : Время — деньги, а отличный интерфейс должен сделать пользователя более продуктивным за счет ярлыков и хорошего дизайна. В конце концов, это одно из основных преимуществ технологии: она позволяет нам выполнять задачи с меньшими затратами времени и усилий, делая большую часть работы за нас.
- Прощение : все делают ошибки, и то, как ваше приложение обрабатывает эти ошибки, будет проверкой его общего качества. Легко ли отменять действия? Легко ли восстановить удаленные файлы? Хороший интерфейс не должен наказывать пользователей за их ошибки, а должен предоставлять средства для их исправления.
Разработка пользовательского интерфейса, включающего все эти характеристики, является сложной задачей, поскольку работа над одной характеристикой часто влияет на другие. Чем больше элементов интерфейса вы добавите, тем больше информации придется обрабатывать вашим пользователям.Конечно, верно и обратное: недостаточная помощь и поддержка могут сделать некоторые функции неоднозначными. Создание чего-то простого, элегантного и в то же время ясного и последовательного — сложная задача дизайнера пользовательского интерфейса.
Набор инструментов для визуального проектирования интерфейсов
Визуальный дизайн интерфейса — это процесс создания физического представления вашего интерфейса в том виде, в каком его увидят пользователи на экране своего электронного устройства. Цель дизайна визуального интерфейса — передать смысл, что достигается путем создания соответствующих визуальных элементов, которые лучше всего представляют, что делает приложение и как им можно управлять.Создание внешнего вида продукта не является основной целью визуального дизайна интерфейса, это просто компонент. Основная цель — коммуникация: коммуникационное поведение, чтобы помочь вашим пользователям понять, как работает ваше приложение.
Несколько основных элементов составляют визуальный дизайн интерфейса. Выбор подходящих типов, калибровка каждого элемента и последующее их осмысленное объединение позволяет нам передать смысл всех различных функций и возможностей нашего пользовательского интерфейса.
Вот основные строительные блоки визуального дизайна интерфейса:
Макет и расположение
Макет обеспечивает структуру для всех визуальных элементов в вашем интерфейсе.Он также определяет иерархию и отношения через интервалы между элементами. Сведение элементов ближе друг к другу указывает на связь между ними; например, ярлыки под иконками. Позиционирование также может улучшить поток. Например, размещение меток в формах над текстовыми полями, а не влево, позволяет нам легко перемещать взгляд вниз по ним, вместо того, чтобы постоянно смотреть влево, чтобы проверить, какая метка применяется к какому полю.
Форма и размер
Форма может использоваться для различения элементов; например, варьируя силуэты значков, чтобы их было легче и быстрее распознавать.Размер может использоваться для обозначения важности, более крупные элементы имеют большее значение. Размер также может сделать интерактивные элементы управления более удобными; Закон Фитта гласит, что чем больше интерактивная область, тем быстрее пользователи могут навести на нее курсор мыши. Увеличение размеров наиболее часто используемых элементов управления упростит для пользователей нажатие на них и, таким образом, повысит эффективность интерфейса.
Цвет
Цвет полезен для нескольких вещей. Цвет может привлечь внимание при условии, что он достаточно контрастирует с фоном (например, ярко-желтая рамка для уведомлений на белом фоне).Цвет может выражать значение. Например, красный цвет обычно символизирует опасность или остановку (как на светофоре), поэтому его лучше всего использовать для сообщений об ошибках; в то время как зеленый обычно означает успех или приглашение продолжить, и поэтому его следует использовать для контента такого рода. Цвет также может выделять взаимосвязи, например такие вещи, как кнопки и панели инструментов, цветовое кодирование, чтобы помочь пользователю.
При использовании цвета помните о нескольких вещах. Во-первых, разные культуры будут ассоциировать разные вещи с цветами, поэтому убедитесь, что любое значение, которое вы намереваетесь передать своим выбором цвета, работает на ваших рынках.Во-вторых, не забывайте о дальтонизме; проявляйте особую осторожность при различении элементов по цвету, например полос на диаграмме. Если пользователь дальтоник, он может быть не в состоянии различать определенные цвета, чаще всего красный и зеленый, поэтому вам может потребоваться использовать и другие индикаторы, такие как форма и текстура.
Контрастность
То, насколько светлый или темный объект находится по отношению к окружающим его элементам, будет влиять на удобство использования интерфейса. Ключевым моментом здесь является контраст. Черный текст на белом фоне имеет более высокий контраст, его легче обнаружить и прочитать, чем серый текст на белом фоне.Уменьшение контрастности определенных элементов позволяет вам отодвинуть их на задний план, позволяя пользователю различать более важные и менее важные элементы.
Текстура
В интерактивном дизайне существует концепция под названием аффорданс. Доступность — это качество, которое сообщает пользователю, как что-то должно использоваться. Подумайте о дверных ручках. Лучший способ сделать дверь, открывающуюся в одну сторону, — это прикрепить ручку со стороны тяги и оставить плоскую пластину ручки со стороны толкателя.Люди будут знать, толкать или тянуть автоматически, потому что интерфейс сообщает, как его следует использовать; то есть предлагает меньше методов взаимодействия и поэтому фокусирует внимание пользователя на правильном.
Мы можем воплотить эту идею в дизайн пользовательского интерфейса на экране с текстурой. Например, некоторые элементы визуального интерфейса можно перетаскивать, например угол окна, который позволяет изменять его размер. Чтобы указать, что вы можете щелкнуть и перетащить его, на нем обычно появляется набор выступов, иллюстрирующих более грубую текстуру.Шероховатые текстуры часто используются для придания более прочной поверхности захвата реальным объектам, чтобы помочь нам тянуть их пальцами, и эта идея транслируется на экран, где вместо пальцев вы использовали бы курсор мыши.
Практические методы создания эффективных пользовательских интерфейсов
Мы говорили о том, что такое пользовательские интерфейсы, какие характеристики должны иметь все пользовательские интерфейсы, и основные инструменты, которые мы можем использовать для их создания, поэтому теперь давайте рассмотрим некоторые практические методы, которые вы можете использовать в ваших собственных веб-приложениях и на веб-сайтах.
Используйте пустое пространство для построения отношений
Пустое пространство — это пустое пространство между различными элементами содержимого, такими как заголовки, текст и кнопки. Белое пространство — отличный инструмент для построения отношений между различными элементами. Сужая пространство между элементами, вы можете формировать группы связанных элементов. Увеличение пространства между этими группами еще больше подчеркнет их связь, отделяя их от остального контента. Используйте пустое пространство для группировки связанных элементов управления и построения иерархии элементов на странице.
На панели инструментов Gmail есть три группы кнопок, разделенных пробелом. В каждой группе есть кнопки, которые выполняют связанные действия.
Закругленные углы определяют границы
Закругленные углы часто используются для улучшения внешнего вида графических элементов. Они выглядят красиво и добавляют дополнительный штрих к вашему интерфейсу; но это еще не все, для чего их можно использовать. Закругленные углы определяют границы объектов. Когда вы видите закругленный угол, вы понимаете, что это конец контейнера.Если угол прямой, его можно прикрепить к другому контейнеру, поэтому граница будет не такой четкой. Закругленные углы или любая другая визуальная обработка углов, если на то пошло, могут, таким образом, усилить границы контейнеров.
Обратите внимание, как закругленные углы в списке клиентов Ballpark определяют края каждой записи. В середине каждой записи также есть углы, но они используются как разделители между связанными данными, а не как края всего контейнера.
Передайте смысл с помощью цвета
Цвет — отличный инструмент для передачи смысла; например, для определения различных элементов.При желании вы можете использовать цветовую кодировку, чтобы различать разные типы кнопок в вашем приложении. Красный можно использовать для деструктивных кнопок, таких как удалить и удалить, синий можно использовать для стандартных кнопок, а зеленый можно использовать для действий сохранения и обновления. Цветовое кодирование также можно использовать для различения различных частей данных, созданных пользователем, на обзорных экранах, чтобы упростить их сканирование.
Прямое внимание
Используйте анимацию, чтобы привлечь внимание. Иногда одного цвета и контраста недостаточно, чтобы привлечь внимание пользователя.Если произошло что-то важное, и вы действительно должны убедиться, что пользователь это заметил, используйте анимацию. Человеческий глаз способен улавливать движение, особенно на статическом фоне. Если пользователь добавляет задачу в список в приложении для повышения производительности или добавляет продукт в корзину, используйте анимацию, чтобы выделить то, что произошло. Например, вы можете использовать эффект выделения при создании элемента на экране. Это особенно полезно для приложений, интенсивно использующих AJAX; в этих случаях страница не обновляется при выполнении определенного действия, поэтому интерфейс должен сообщить пользователю, что что-то произошло.
Когда вы публикуете новое сообщение в Yammer, оно комбинирует выдвижение и выделение анимации.
Goplan использует цветные метки в левой части панели инструментов, чтобы пользователи могли быстро различать различные типы элементов, такие как задачи, заметки и записи в блогах.
Тени и затемненный фон для фокусировки
Еще один отличный способ сосредоточить внимание пользователя на области — использовать тени и затемненный фон. Тени можно использовать вокруг всплывающих меню и модальных окон и действовать как одеяла, которые блокируют визуальный шум вокруг окна.Тени уменьшают контраст элементов, которые лежат под ними, что, в свою очередь, увеличивает контраст элементов, для которых они используются. Модальные окна также могут иметь под собой более темный (или более светлый) полупрозрачный слой, который также помогает уменьшить визуальный шум от содержимого, которое они покрывают, и таким образом фокусирует внимание пользователя на самом модальном окне.
Подчеркнуть основные действия
Многие приложения имеют экраны, на которых отображаются основные и второстепенные действия. Например, если вы создаете проект в приложении для управления проектами, основная форма, вероятно, будет иметь поля для названия проекта, крайнего срока, уровня приоритета и т. Д.Внизу вы можете увидеть кнопку «Создать». Часто вы также видите кнопку или ссылку «Отмена» рядом с ней. Действие отмены менее важно, потому что оно обычно не нужно вашим пользователям, поэтому вы можете уменьшить его визуальный «вес». Например, вы можете сделать кнопку «Создать», а «Отменить» — простой гиперссылкой без визуального оформления. Это смещает фокус на основное действие и помогает пользователю быстрее найти его, когда он закончит заполнять форму.
MobileMe затемняет фон вокруг модальных окон и применяет к ним тени.Это переключает внимание пользователя на окно, блокируя шум внизу.
Повышение эффективности со ссылками на блоки
Используйте дополненные ссылки на блоки для облегчения наведения курсора. Веб-приложения полагаются на строительные блоки HTML для своего построения, что означает, что они интенсивно используют элемент привязки (более известный как «ссылка»). Элемент привязки по умолчанию является «встроенным», что в основном означает, что его ширина и высота покрывают только текст внутри него. Это, в свою очередь, означает, что размер интерактивной области ссылки равен размеру самого текста, который во многих случаях может быть слишком маленьким для пользователей, чтобы по нему было удобно нажимать.Мы можем применить padding к элементу привязки, чтобы сделать его больше.
Обратите внимание, насколько заметнее кнопка «Создать клиента» по сравнению с кнопкой «Отменить» в этой форме создания клиента Ballpark.
MobileMe использует дополненные ссылки на боковой панели навигации. Большие интерактивные области позволяют быстрее навести на них курсор мыши, что повышает удобство использования.
Для ссылок в списке, например на боковой панели, превращение якорей в «блоки» может быть еще лучшим решением. Вы можете указать тип элемента с помощью свойства CSS display; поэтому указание привязки как «блока» превратит его в элемент блока, что означает, что его высота и ширина больше не будут соответствовать размеру текста внутри него, а вместо этого по умолчанию будут охватывать всю ширину контейнера.Это идеально подходит для списков ссылок на боковой панели.
Используйте глаголы в качестве меток
При использовании вашего приложения люди всегда будут искать что-то делать. Это означает, что они будут думать глаголами. «Я хочу сохранить этот файл» или «Я хочу обновить эту запись». При построении диалоговых окон или любого другого типа подсказки пользователя используйте глаголы, а не восклицания, такие как «Да», «Нет» и «Хорошо». Когда пользователь видит такие варианты, как «ОК» и «Отмена», ему нужно будет прочитать сообщение выше, чтобы понять, что его просят сделать.Однако, если вы представляете варианты выбора в виде глаголов, например «Сохранить», «Не сохранять» и «Отмена», вы делаете диалоговое окно и выбор понятными для пользователя, даже не читая сопроводительное сообщение.
Рюкзак отлично использует глаголы для кнопок и ссылок, обеспечивая ясность для каждого выбора.
Автофокус / повторный фокус ввода
Формо-ориентированные приложения могут выиграть от автоматической активации поля ввода основной формы при загрузке веб-страницы. Например, такие поисковые системы, как Google, сосредотачиваются на своем основном поле поиска, исходя из предположения, что почти каждый, кто попадает на их домашнюю страницу, захочет ввести поисковый запрос в поле ввода, и поэтому, когда страница загрузится, вы можете сразу начать вводить текст.Автоматическая активация полей ввода может работать в других контекстах: например, в приложениях, требующих последовательных вводов, таких как построитель списков покупок. После ввода первого элемента пользователь может захотеть ввести больше, поэтому вам следует автоматически перефокусировать внимание на поле ввода, чтобы можно было быстро и последовательно вводить данные.
Tadalist позволяет быстро и последовательно вводить список дел. Когда вы пишете задачу и нажимаете «Enter», приложение добавляет новый элемент, а затем автоматически снова фокусируется на текстовом поле, готовое к дальнейшим действиям.
Backpack отлично использует глаголы для кнопок и ссылок, обеспечивая ясность для каждого выбора.
Используйте элементы управления при наведении курсора для упрощения и устранения беспорядка.
Многие приложения имеют набор контекстно-зависимых элементов управления, например кнопки для удаления и редактирования отдельных записей в списке. Чтобы упростить нацеливание на что-либо напрямую, они обычно помещаются рядом с каждым элементом, но это вызывает много дублирования. В большинстве случаев пользователю эти элементы управления не нужны, а когда они нужны, они будут нужны только для одного конкретного элемента.
Чтобы упростить интерфейс, используйте элементы управления наведением, которые появляются только при наведении курсора на определенную область. Так, например, при наведении курсора на запись, которую вы хотите отредактировать, отобразится кнопка редактирования, но для всех остальных записей кнопка будет скрыта.
Twitter показывает кнопки «Ответить» и «Добавить в избранное» при наведении курсора на каждое сообщение.
Basecamp позволяет вам прикреплять несколько файлов к сообщению, но одновременно показывает только одно поле вложения.
Элементы управления при наведении курсора — отличный способ избавиться от беспорядка и упростить интерфейсы, но перед их реализацией следует учесть несколько моментов.Во-первых, подумайте об обнаружимости. Людям необходимо обнаружить элемент пользовательского интерфейса, прежде чем они смогут его использовать: достаточно ли заметны ваши элементы управления, чтобы пользователь наткнулся на них? Люди естественным образом перемещают мышь по экрану и наводят курсор на объекты, на которые они смотрят, так что это может не быть большой проблемой, но все же стоит принимать во внимание. Во-вторых, интерфейсы просмотра веб-страниц на мобильных устройствах, таких как телефоны, могут не имитировать наведение курсора мыши, поэтому эти элементы управления могут быть недоступны.
Расширяющиеся формы
Если ваша форма требует ввода нескольких элементов данных в одни и те же поля ввода — например, прикрепление нескольких файлов к сообщению или добавление нескольких людей к записи компании в вашей базе данных — тогда вы можете использовать расширяющиеся формы для добиться этого элегантным способом.Поскольку пользователь работает только с одним полем за раз, вы должны отображать только одно поле за раз. Когда они заполняют и добавляют запись, приложение создает дополнительное поле для ввода под ней, чтобы они могли ввести дополнительную информацию. Таким образом, вместо отображения нескольких пустых полей ввода одновременно, вы отображаете только одно пустое поле и при необходимости добавляете другие.
Метки внутри полей ввода
Упрощение интерфейсов в основном зависит от продуманного сокращения. Вы хотите убрать ненужное и лучше использовать место для оставшегося.Одна из умных идей для форм — разместить метки внутри самих полей ввода. Это экономит место, а также делает совершенно ясным, к какому полю применяется каждая метка.
MobileMe сжимает экран входа в систему, перемещая метки текстовых полей внутри самих текстовых полей.
Контекстно-зависимые элементы интерфейса
Иногда вам нужно интегрировать дополнительные функции для более опытных пользователей вашего приложения, но вы не хотите добавлять вес интерфейсу. Что вы можете сделать, так это предложить контекстно-зависимые элементы интерфейса по запросу.Например, если где-то в вашем приложении есть панель поиска с расширенными фильтрами, вы можете отображать только панель поиска, когда она не используется, а затем отображать дополнительные элементы управления, когда пользователь нажимает на это поле. Таким образом, интерфейс остается тонким, а расширенные функции доступны всего в одном клике.
Vimeo отображает расширенные фильтры поиска, когда вы наводите курсор на строку поиска, предоставляя более опытным пользователям веб-сайта дополнительные функции по запросу.
Значки
Значки можно использовать для упрощения интерфейса и сделать его более привлекательным, но есть некоторые соображения, которые следует учесть перед их внедрением.Иконки почти всегда менее ясны, чем слова. Написать ярлык просто: вы просто говорите, что именно делает кнопка. Однако при разработке значка вы должны придумать эффективную метафору для описания рассматриваемого действия. Кроме того, выбранная вами метафора может не очень хорошо переводиться в разных странах, если на иллюстрации изображено что-то местное (даже корзины для мусора различаются по внешнему виду в разных странах мира).
Значки работают лучше всего, когда их не слишком много одновременно на экране и каждый визуально достаточно отличается от других, чтобы выделяться.Это означает, что изменение формы и цвета является ключом к созданию успешного набора значков. Правильно реализованные значки делают интерфейс более простым в использовании, поскольку, как только пользователи знакомятся с набором значков, характерные формы и цвета помогают им перейти прямо к нужному значку.
Сделайте отзывчивым с помощью индикаторов загрузки
Никто не любит ждать. Ожидание означает, что вы ничего не делаете, в то время как можете делать что-то ценное. К сожалению, в каждом приложении есть функции, выполнение которых требует времени; будь то экспорт большого документа или получение результатов поискового запроса, вашим пользователям придется подождать.Но вы можете значительно сократить время ожидания, показывая индикатор загрузки. Каждый раз, когда что-то загружается, добавьте индикатор загрузки, например вращающуюся анимацию или индикатор выполнения. Исследования показывают, что пользователи считают, что время ожидания меньше, когда отображаются такие индикаторы. 2 .
Индикаторы загрузки отлично подходят для короткого времени ожидания, но что, если действие занимает минуту или больше? Хотя вы ничего не можете сделать с самим временем загрузки (при условии, что вы уже сделали все, что в ваших силах), вы можете что-то сделать с ожиданием ваших пользователей.Найдите время, чтобы развлечь или проинформировать. Например, многие приложения отображают интересные подсказки и подсказки во время длительного ожидания. Если пользователь не делает ничего продуктивного, по крайней мере, он может узнать что-то новое.
Dropbox показывает индикатор выполнения, когда пользователи загружают файлы с помощью веб-интерфейса. Для подобных событий, время ожидания которых сильно различается, важна шкала выполнения, чтобы пользователям не приходилось постоянно гадать, сколько еще им придется ждать.
Сделайте его отзывчивым с помощью состояний нажатых кнопок
Скорость отклика вашего приложения не зависит исключительно от оптимизации вашей внутренней архитектуры.В этом большую роль играет и поведение вашего пользовательского интерфейса. Одним из наиболее часто используемых элементов любого визуального интерфейса является кнопка. В настольных приложениях кнопки имеют несколько состояний, наиболее распространенным из которых является состояние по умолчанию, в котором кнопка просто находится там, и состояние нажатия при нажатии на нее.
OtherInbox имеет набор значков для основной панели навигации, с ярлыками под каждым из них для ясности.
Состояние по умолчанию и нажатие кнопки поиска в WordPress.
Campaign Monitor предоставляет подробное справочное сообщение при первом входе в систему, а также большую кнопку, которая переводит вас на экран создания кампании.
Нажатое состояние выглядит примерно так: кнопка выглядит нажатой. Это состояние отправляет пользователям мгновенную обратную связь, что их клик был успешным. Так же, как и на рабочем столе, состояния нажатой кнопки могут использоваться в веб-приложениях для обеспечения дополнительной обратной связи и отзывчивости.
Полезные пустые состояния
Когда пользователь загружает ваше приложение в первый раз, на экране, скорее всего, будет не так много информации; пользователь еще не ввел никаких данных, поэтому отображать нечего.Воспользуйтесь этим пустым состоянием как возможностью помочь пользователю, включив в него краткое справочное сообщение, в котором содержится информация о том, как начать работу. Чтобы упростить задачу, вы можете прямо в справочном сообщении предоставить ссылку на рекомендуемое действие; так, например, если ваше приложение предназначено для управления кампаниями электронной почты, а пользователь только что создал новую учетную запись и вошел в систему, в справочном сообщении может быть указана ссылка на страницу создания новых кампаний.
Рекламируйте функции
Ваши пользователи не знают ваше приложение наизнанку, поэтому в некоторых ситуациях может быть хорошей идеей рекламировать функции в самом приложении.Кроме того, поскольку веб-приложения, как правило, постоянно обновляются, и время от времени появляются новые важные функции, имеет смысл информировать о них ваших пользователей. Сделайте это, разместив небольшую заметку на видном месте экрана. Он должен быть довольно привлекательным, но не отвлекать и не мешать пользователю выполнять свои задачи. Пользователи также должны иметь возможность закрыть уведомление, как только они его прочитают.
Gmail отображает это сообщение отмены каждый раз, когда вы удаляете электронное письмо, что позволяет быстро вернуть его.
Отменить
Одна из наиболее часто используемых функций в настольных приложениях — это надежный ярлык отмены. Случайно изменили форматирование диаграммы, над которой вы работаете? Нет проблем: нажмите Ctrl / Cmd и Z на клавиатуре, и приложение сделает шаг назад и восстановит документ в его состоянии до вашего последнего действия. Отменить — важный инструмент в упрощении интерфейсов, и его также можно использовать в веб-приложениях. Например, вы можете либо интегрировать знакомое сочетание клавиш, либо показывать временные уведомления со ссылками для отмены в них.
Yammer показывает полезное примечание под основной областью ввода относительно функции «следовать». Когда пользователи прочитают его, они могут закрыть его с помощью маленького крестика справа.
Writeboard позволяет восстановить вашу работу в течение двух месяцев после ее удаления.
Восстановить
Люди часто меняют свое мнение после удаления чего-либо, поэтому разумно принять некоторые дополнительные меры защиты при работе с более важными битами данных в вашем приложении; например, файлы проекта в приложении для управления проектами.Когда пользователь удаляет проект, вы можете, вместо того, чтобы удалять его сразу, заархивировать его на определенное время. Если они передумают и решат, что им нужно вернуть файлы проекта, вы легко сможете их восстановить. Несколько дополнительных мегабайт используемого пространства стоит того, чтобы порадовать ваших клиентов, когда они обнаруживают, что еще не все потеряно.
Диалоги подтверждения
При разрешении деструктивных действий в вашем приложении, таких как удаление элементов, рекомендуется предоставить диалоговое окно подтверждения, чтобы убедиться, что пользователь действительно хочет продолжить свое действие.Это более важно, если кнопка удаления расположена рядом с другими элементами управления; если пользователи случайно щелкнут по нему, они смогут отменить действие до того, как оно произойдет. Однако будьте осторожны, чтобы не злоупотреблять этой функцией, потому что это приведет к трению интерфейса, сделав действия более длительными и утомительными для выполнения, чем необходимо.
Freckle использует диалоговое окно подтверждения, чтобы убедиться, что вы не удалили записи случайно.
Заключение
Существует японская философия под названием Кайдзен, которая фокусируется на постоянном улучшении посредством небольших, постепенных шагов.Дизайн пользовательского интерфейса, особенно в современных веб-приложениях, не обязательно должен быть законченным, потому что вы всегда можете продолжать его развивать и улучшать. Думайте об этом как о Кайдзен.
Старая модель распространения программного обеспечения на компакт-дисках имела большой недостаток: после того, как вы записали и отправили продукт, вы не могли его изменить… ну, не очень-то просто. Вы можете выпустить патч, но вашим пользователям придется загрузить и установить его, прежде чем какие-либо изменения вступят в силу, и вы не можете гарантировать, что все обновят.Кроме того, выпуск патча для каждого небольшого изменения был невозможен, поэтому вам приходилось в значительной степени довести все до совершенства с первого раза, что потребовало большого тестирования перед выпуском. Модель «программное обеспечение как услуга» все изменила. Преимущество размещения вашего веб-приложения в сети заключается в том, что вы можете вносить небольшие изменения в любое время, когда захотите, и все ваши пользователи мгновенно получат к ним доступ.
Это означает, что вам не нужно настраивать интерфейс на 100% с первого раза.Если что-то не работает, вы можете это изменить. Наблюдая за тем, как пользователи взаимодействуют с вашим интерфейсом, вы начнете хорошо понимать, насколько хорошо он работает и где возникают трения — где вещи замедляют работу ваших пользователей. Если какие-либо части пользовательского интерфейса нуждаются в улучшении, вы можете очень легко обновить их для всех своих пользователей. Это подход кайдзен к дизайну интерфейса: небольшие, постепенные, регулярные улучшения. Так что не беспокойтесь о том, чтобы все стало идеально с первого раза; вместо этого повторяйте по ходу работы, и вскоре вы получите отличный интерфейс, который эволюционировал благодаря реальному использованию.
Типы современной коммуникации | Ресурсные методы
Общение является ключом к построению отношений, а современные формы общения позволяют нам оставаться на связи с друзьями и семьей из любой точки мира.
Сегодня в нашем общении преобладают современные технологии. У нас есть множество способов оставаться на связи, но каждый канал связи может влиять на наши отношения по-своему.
Вот 10 современных инструментов коммуникации, которые помогут вам оставаться на связи со своей аудиторией:
Социальные сети
Социальные сети существуют с первых дней Интернета и до сих пор доминируют в большей части нашей жизни. .Длинный список социальных сетей продолжает расти, и каждая из них продолжает привлекать миллионы (и даже миллиарды) пользователей на свои сайты каждый день, поэтому это одна из самых популярных форм общения.
Социальные сети могут быть посвящены узнаваемости бренда, но они также являются отличным каналом для общения, поскольку позволяют публиковать открытые сообщения для всеобщего обозрения, а также взаимодействовать с пользователями с помощью комментариев.
Для чего бы вы его ни использовали, это отличный первый шаг для общения.Ваши сообщения не ограничиваются вашими подписчиками, благодаря мощи хэштегов, репостов, лайков, ретвитов, сердец и других реакций ваши сообщения не ограничены аудиторией, которую они могут охватить. Мы все были свидетелями того, как сообщения становятся вирусными.
Вот 16 статистических данных в социальных сетях, которые нельзя игнорировать.
Социальные сети — прямое сообщение (DM)
Социальные сети не обязательно должны быть полностью общедоступными. Почти каждый канал социальных сетей предлагает вариант прямого обмена сообщениями, некоторые из этих служб обмена сообщениями даже имеют собственное приложение для обмена сообщениями, такое как Facebook Messenger.
Обмен личными сообщениями через социальные сети имеет ту же интимность, что и электронная почта, но имеет тенденцию быть менее формальным.
Компании должны связываться с кем-либо через прямое сообщение, только если клиент обратился к ним через этот канал. Однако определенные методы прямого обмена сообщениями становятся все более приемлемыми в некоторых социальных сетях, таких как Facebook. Боты Facebook Messenger теперь считаются нормой и могут помочь вам связаться с вашей аудиторией через службу обмена сообщениями Facebook.
Мгновенное сообщение (IM)
Хотя некоторые формы в Мгновенном сообщении относятся к социальным сетям, таким как Facebook Messenger, существует широкий спектр платформ обмена мгновенными сообщениями, которые не связаны с социальными сетями, такими как Google Hangouts и WhatsApp.
IM — отличный инструмент для быстрых неформальных чатов или групповых чатов.
SMS-сообщения
Мы все знаем об использовании текстовых сообщений. Они короткие, как правило, неформальные и представляют собой хороший способ передать небольшие фрагменты информации, которые могут быть получены получателем и на которые можно ответить в любое время.
В наши дни мы почти всегда находимся в пределах досягаемости мобильного устройства, поэтому неудивительно, что больше людей используют свои смартфоны больше, чем компьютеры для поиска, исследований и общения, чем когда-либо прежде, что делает его идеальной платформой для взаимодействия со своей аудиторией.
Электронный маркетинг
Первое массовое электронное письмо было отправлено еще в 1978 году, и даже тогда оно было очень успешным. Однако сегодня это одна из самых недооцененных маркетинговых платформ, несмотря на то, что она является одной из самых выгодных с точки зрения окупаемости инвестиций.
Электронный маркетинг можно использовать для множества различных целей, в том числе для продвижения продуктов и услуг, распространения новостей, повышения узнаваемости бренда или доставки сообщения в массы.
За прошедшие годы у большинства предприятий накопилось бы много адресов электронной почты, и во многих случаях они пропали бы зря. С помощью электронного маркетинга эти адреса электронной почты позволят вам восстановить связь со старыми клиентами, а также с новыми потенциальными клиентами.
Прямая электронная почта
Электронная почта похожа на прямой обмен сообщениями через социальные сети, но обычно носит более формальный характер.Это самый популярный способ общения между компаниями, ежедневно отправляется более 200 миллиардов электронных писем.
Ведение блога
Блог — это веб-сайт в диалоговом стиле, который позволяет вам публиковать сообщения, новости, знания или любую другую информацию во всемирной паутине для всеобщего обозрения.
В большинстве блогов есть раздел комментариев, в котором вы можете общаться с единомышленниками, заинтересованными в вашем сообщении. Вот почему это отличная площадка для общения.
Голосовой вызов
Голосовой вызов даже более персонализирован, чем каналы, упомянутые ранее. Телефон или мобильный телефон мгновенно позволяет обеим сторонам слышать тоны и эмоции другого абонента и является одним из наиболее часто используемых средств связи.
Видеочат
Видеочат позволяет обеим сторонам видеть друг друга, позволяя вам понимать язык тела и выражения лица. Этот вид общения не так популярен, как голосовой вызов, но у него есть свои преимущества.
Поскольку несколько бесплатных приложений для видеозвонков, таких как Apple FaceTime, Facebook messenger, Skype и WhatsApp, безусловно, заслуживают внимания.
Видеомаркетинг
За последние несколько лет видео стало действительно популярным благодаря таким социальным каналам, как YouTube, Facebook, Snapchat и Instagram. Также помогает то, что записывать видео стало проще, чем когда-либо, на смартфоны и камеры, которые всегда под рукой.
Важно, чтобы ваше сообщение передавалось в различных форматах, и видео — один из самых популярных способов сделать это, поскольку он значительно повышает вовлеченность.
Живой веб-чат
Вы, вероятно, уже видели много таких на веб-сайтах, и они могут быть очень полезны, если вы сможете правильно ими управлять. Живые веб-чаты позволяют людям на вашем веб-сайте задавать вам вопросы прямо в режиме реального времени, не покидая его.
Вам следует рассмотреть возможность использования живого веб-чата только в том случае, если вы можете гарантировать, что кто-то всегда будет активно использовать виджет. Если ответ кому-то в веб-чате займет больше нескольких секунд, это плохо отразится на вашем бизнесе, поэтому лучше избегать использования этих виджетов, если вы не можете поддерживать спрос.
Вот плюсы и минусы онлайн-чата.
Виртуальная реальность
Видео выше показывает нам потенциал виртуальной реальности для общения. Facebook разрабатывает социальную сеть VR в течение нескольких лет, и, хотя это еще не распространенный способ общения, у него большой потенциал.
По мере развития виртуальной реальности и падения цен на гарнитуры популярность виртуальной реальности неизбежно будет расти.Поскольку все больше и больше людей покупают гарнитуры виртуальной реальности, это может стать следующей современной формой общения, которая поразит массы, и это может произойти всего через несколько лет.
