Тенденции веб-дизайна на 2018 год: полное руководство для дизайнеров

Тенденции веб-дизайна на 2018 год: полное руководство для дизайнеров

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

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

  1. Системы проектирования компонентов

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

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

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

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

Как выразился Натан Кертис, «система дизайна — это не проект, а продукт, обслуживающий продукты»..

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

Что делает дизайн на практике? Давайте посмотрим на систему дизайна Polaris, используемую Shopify. Они разбивают свою дизайн-систему на четыре части:

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

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

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

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

Дизайн-система Shopify Polaris.

Как создать дизайн-систему

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

  • Создайте инвентарь пользовательского интерфейса: просмотрите все свои продукты / веб-сайты и перечислите все используемые модели дизайна. Исправьте любые обнаруженные несоответствия.
  • Получите поддержку от организации: представьте свои выводы, чтобы привлечь всех остальных. Это помогает оценить количество часов проектирования и проектирования, потерянных из-за избыточной работы, а также указать, насколько более рациональные продукты могут улучшить результаты NPS..
  • Установление принципов дизайна: какими принципами руководствуется ваша компания? Объедините ответы в основной список.
  • Создайте цветовую палитру: стандартизируйте свою цветовую палитру с помощью точных цветовых кодов и договоритесь об универсальном соглашении об именах
  • Создайте типографский масштаб: настройте размер шрифта, высоту строки и т. Д. и установление особых правил отображения текста.
  • Внедрение значков и других стилей: просмотр исходной инвентаризации пользовательского интерфейса и загрузка выбранных значков и дизайнерских решений..
  • Начните создавать свои первые модели: выполните аудит библиотеки шаблонов, чтобы выбрать те, которые лучше всего отражают ваш бизнес, ваши продукты и ваших клиентов.

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

  1. Многоугольные формы и геометрические слои

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

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

Простая геометрия

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

Жирные линии для привлечения внимания

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

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

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

  1. Тактильный дизайн

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

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

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

Без ограничений

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

Многослойный дизайн

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

Целенаправленное движение и анимация

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

Детальная фотография

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

Понравилась статья? Поделиться с друзьями:
Новости о СЕО индустрии, интернета и поисковых технологиях