Вы дизайнер, который ищет вдохновения и трендов? Тогда вы в нужном месте.

Здесь я собрал 17+ трендов в мире веб-дизайна. Посмотрите 👀

1. Минимальность и комфорт

Меньше – больше: тенденция минимализма продолжается с еще более пустыми пробелами. Особенно белые пространства для чистого многоцелевого универсального дизайна.

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

Как вы уже знаете — «первое впечатление длится дольше».

Проект: Rem от Alim Maasoglu
Вы также можете почувствовать мою любовь к негативным пространствам в моей работе.

2. Футуристические дизайны

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

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

Проект: Tesla Model 3 | User Interface by Michael Cherkashin

Проект Kepler.gl от Uber Design (команда: Data Design Designer: Jinglu Li)

3. Пользовательские иллюстрации и видео

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

Визуальная информация обрабатывается в 60,000 раз быстрее, чем текст!

Люди запоминают 10% того, что они слышат, 20% того, что они читают, 80% того, что они видят и делают!

Чтобы убедить вас, активность на одного подписчика в Instagram в 58 раз выше, чем на Facebook.

Seet от Eddie Lobanovskiy

GOT OPEN — A Tennis Game of Thrones от Lena Vargas Afanasieva

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

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

Если вы хотите пример, проверьте YouTube канал Invision.

4. Тени для дополнительной глубины

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

Прежде чем погрузиться, вы должны прочитать Дизайн со Светом и Тенями от Canva Team

Flyknit Lunar 3 | Made You Look👁 255 | Live a little more.
Автор: Callum Notman | STUDIOJQ

Вы можете использовать тени и цвета (с небольшими вариациями) для следующего:

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

Внимание: не используйте тени чрезмерно.

5. Отзывчивый веб и логотипы

В 2018 мобильные 📱 взяли лидерство 🎢. Google переводит приоритет на мобильный поиск. Веб-разработчики теперь чувствуют себя комфортно с адаптивным веб-дизайном. Теперь вы также можете увидеть этот комфорт в дизайне логотипов. Спасибо Google.

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

6. Минимальность студийных снимков

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

Мультистабильность находится принципиально позади этого.

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

Проект: Squarspace от Akatre Studio

7. Больше отрицательных пространств

🧞 ♂ Отрицательные пространства являются пустыми пробелами вокруг или между содержимым. Они могут быть выполнены в любом цвете.

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

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

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

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

Microsoft: Hololens от Bohdan Kononets

8. Webflow – дизайн и разработка в одно и то же время

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

Я хотел бы поделиться Cards 2,0, бесплатный UI Kit по Jan Losert, который вы можете клонировать, чтобы исследовать инструмент.

Скачать Cards 2,0 бесплатно

9. Анимации, GIF и Cinegrapghs

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

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

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

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

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

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

AI Powered – расписание встречи Джонни вино™

По словам Дэна Саффера, дизайнера и автора книги Микровзаимодействия: Дизайн с деталями

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

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

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

11. Яркие градиенты и яркие цвета

Градиенты возвращаются 🔙: после долгого времени обратно в сеть. Градиенты 2.0 с различимыми цветами становятся популярными.

Вы можете увидеть их в использовании везде от Spotify к iPhone X 🤩.

Nike Free Design от Leo Natsume

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

12. Большая, смелая и креативная типографика

Веб-дизайнеры превращают типографику в инструмент для создания захватывающих инновационных художественных работ. В 2018 веб-дизайн не вращается вокруг нескольких типографик. Комбинация из 5–6 типографик уже более используема.

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

Scenery Illustration от Willie. H

13. Фоновые частицы

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

Каждая секунда задержки снижает удовлетворенность клиентов на 16% и сокращает продажи на 7%.

Какова связь между скоростью и фоновыми частицами?

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

Digital Agency Exploration от Surja Sen Das Raj

14. Создайте больше места с дизайном разделенной страницы

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

Split fold Design for blog от Divan Raj

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

15. Одноцветные и гибридные иконки

Моно-цветные иконки легко читаются.

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

16. Расскажите истории, чтобы сохранить пользователей

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

Когнитивный психолог Джером Брунер предлагает

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

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

Выбор носителя на вас.

Character & illustration от Seung Uk Hong

17. Сделайте свой контент готовым к печати

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

один × 3 =