Опасный дизайн — тренды 2017 года (перевод)

«Опасные» тренды 2017-го года в веб-дизайне. Обзор тенденций и советы по их умелому использованию.

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

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

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

Яркие цвета

Яркие цвета

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

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

Опасности

  1. Большие поверхности, оформленные с помощью ярких цветов, заставляют наши глаза «кровоточить», не буквально, конечно, однако они могут действительно нанести вред глазам. Если глазам больно, человек закроет их или отведёт взгляд, в то время как вы, используя интенсивные цвета, старались добиться того, чтобы взгляд пользователя вашего сайта был прикован к нему.
  2. Яркие цвета фоном или даже рядом с текстом могут мешать или раздражать при чтении этого текста. Яркие цвета отражают больше света. Это как будто светить фонариком в лицо людям, пока они пытаются прочитать текст. Если даже им удастся его прочесть, у них останутся негативные ощущения, что может привести к тому, что им попросту не понравится то, что вы написали на таком ярком фоне.
Опасности ярких цветов

Делай

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

Не делай

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

Экспериментальные модульные сетки

Экспериментальные модульные сетки

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

Это интересный и весёлый тренд. Он является хорошим способом добавить некоторого разнообразия и позволить выделить свой дизайн среди множества «прилизанных» макетов. Экспериментальное оформление не может быть идеально сбалансированным: фотографии, типографика или интерфейс обычно не выравнены на одном уровне, у элементов разные отступы (padding), и они могут накладываться друг на друга.

Опасности

  1. Наша жизнь и без того полна хаоса. Нужно ли нам ещё больше хаоса, когда мы хотим найти какую-то информацию на сайте? Несбалансированная «игривость» в оформлении может препятствовать беглому или внимательному просмотру информации на сайте, делая её поиск трудновыполнимым. Когда основной целью является нахождение информации на странице, перегруженной контентом, необходима аккуратная структура в оформлении сайта.
  2. Визуальная иерархия также важна для того, чтобы пользователь мог ориентироваться в контенте. В экспериментальном оформлении элементы зачастую разъезжаются, разбивая контент на странные случайные куски. Другие элементы могут накладываться друг на друга или уходить в менее заметные области страницы, что усложняет чтение, группирование или обработку информации.
Опасности эксперементальных модульных сеток

Делайте

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

Не делайте

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

Мелкие детали

Мелкие детали

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

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

Опасности

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

Делай

  • Используйте мелкие детали с оглядкой на контент, убедитесь, что понимание контента не пострадает.
  • Используйте мелкие детали как указатели, чтобы управлять вниманием пользователя или отделять основное содержание.
  • Совмещайте мелкие детали с минимальным и чётким оформлением.
  • Добавляйте к деталям контекст, чтобы они были уместными в данном контенте.

Не делай

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

Важные дополнения

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

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

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

С другой стороны, мелкая типографика может затеряться среди больших текстовых блоков или препятствовать просмотру или чтению контента. Используйте мелкую типографику с осторожностью - только в коротких параграфах. Также избегайте использовать шрифты размером менее 13 пунктов (13pt).

Экспериментальная навигация

Экспериментальная навигация

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

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

Анимированные изображения

Анимированные изображения

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

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

Анимированные изображения

Выводы


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

Последнее и самое важное: мы не должны жертвовать вниманием пользователя ради того, чтобы сайт выглядел современно.

Надеемся, что данная статья была полезной. Если у вас остались вопросы по данной теме — мы с удовольствием на них ответим. Пишите нам на адрес info@intecmedia.ru и подписывайтесь на нашу рассылку!

Оригинал статьи на английском смотрите на medium.muz.li.