3 тенденции дизайна в июне 2017

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

1. ТЕКСТ «TINY»


Похоже ли, что крупноформатная типография ушла в прошлое? Меньший, почти «крошечный» текст начал заменять большие смелые заголовки, которые уже давно были основой дизайна веб-сайта. От небольших заголовков до основного текста, которые кажутся скудными, в типографическом сокращении наблюдается определенная тенденция.
Хотя могут возникнуть некоторые проблемы с читабельностью, когда дело доходит до небольших размеров текста, особенно для обычного текста, более мелкие шрифты — это не плохо. Негабаритная типография почти начинала тяготиться к ярким размерам и надписям, которые были слишком большими, чтобы читать с легкостью.
Меньшие шрифты кажутся немного более мягкими и придают дизайну больше пространства для других элементов, для которых глаз может перемещаться. Трюк к эффективности с малым шрифтом заключается в том, чтобы сохранить надпись до минимума. Если посетителю не приходится много читать на вашем сайте, эта тенденция может быть эффективной и интересной. С другой стороны, с большими блоками текста крошечный шрифт теряется и может затруднить способность пользователя читать с легкостью и эффективно сканировать контент.
Баланс также вызывает беспокойство. Все шрифты должны несколько уменьшаться, чтобы создать хорошее чувство гармонии. Moonfarmer использует легкий шрифт для обработки логотипа и небольшую линию вторичной копии. Элементы типа хорошо контрастируют, и обработка типа света, похоже, соответствует настроению изображений.

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

Дизайн NBA Mountain Dew подталкивает все в малом масштабе. Это одно из самых маленьких обработок заголовков, которые вы, скорее всего, найдете, но в сочетании с чрезмерно смелым X-оверлейным и видео-фоном крошечный текст привлекает внимание.

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

2. ГЕОМЕТРИЧЕСКИЙ СЛОЙ


Новые способы создания элементов слоя постоянно растут в популярности. Вначале воплощенная в качестве основной и современной техники дизайна идея Google Material Design, геометрическое наслаивание — это другой способ добавить визуальный интерес к визуальным эффектам, которые могут оставить желать лучшего. Каждый из приведенных ниже примеров использует фреймворк с жирными фигурами, чтобы принести новую жизнь изображениям, которые представляют собой несколько простых зданий, фотографию встречи, изображения работающих людей.
Добавление забавных фигур, вырезов и цвета дает пользователю отправную точку, чтобы попасть в дизайн. Обратите внимание, что каждый из проектов использует геометрию, чтобы эффективно перемещать пользователя из формы в наиболее релевантный контент, например заголовок или брендинг. Геометрия может использоваться несколькими способами, которые объединяются с остальной частью дизайна:
• Разрезать на изображения, чтобы привлечь внимание к важным тестовым элементам, таким как Salt Projects;

• Использовать неожиданный яркий элемент границы, чтобы создать фокусную точку вне баланса, которая ведет пользователей по экрану, таких как Bailey и French;

• Размещать фотографии в необычных формах, чтобы добавить новый фокус на изображения, такие как Alchemy Digital.

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

3. РАЗМЫТЫЕ ОБРАЗЫ


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

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

ESPN «We the Fans» имеет размытый фон в стиле стадиона, который почти станет ареной для футбола в любом месте, чтобы продемонстрировать предварительный просмотр телевизионного документального фильма; Размытый фон помогает больше сосредоточиться на удовольствии типа лечения, что является основным брендингом для серии.

Заключение


Часто одни тенденции дизайна порождают другие. Интересно увидеть прогресс на небольшом отрезке времени. Самое приятное в этих идеях заключается в том, что они применимы практически в любом масштабе. Например, вы можете добавить крошечный текст только на свою домашнюю страницу и посмотреть, как изменение влияет на пользователей, прежде чем выкладывать их в более широком масштабе. Испытание и тестирование на этом уровне помогут предсказать, будет ли такая тенденция оставаться в силе или быстро исчезнет.
03 июля 2017, 18:45    Ivan Web-дизайн 0    4 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.