Опасные дизайн-тренды — 2017
Три (а потом еще три) тренда в дизайне, которые могут завести не туда, испортив пользовательский опыт.
Нельзя судить книжку по обложке, а вот судить веб-сайт по его дизайну — точно можно. Люди обычно оценивают и судят о продуктах и веб-сайтах по их внешнему виду, еще до того, как смогут понять их функциональность и пользу. Следовать за трендами в дизайне необходимо, чтобы продукты выглядели свежо и привлекательно. Но являются ли дизайн-тренды панацеей?
Мы, дизайнеры, знаем, что следование трендам является важной частью нашей работы, но не стоит просто слепо следовать им. Не каждый тренд может быть полезным или подходящим для каждого случае. Даже хорошие тренды могут завести не туда, испортив user experience. Вот почему им надо следовать осмысленно, отсеивая изменяя их при необходимости.
Давайте взглянем на три опасных дизайн-тренда 2017 года и то, как использовать их с умом.
«Кислотные» цвета
Как известно, цвета могут передавать эмоции и могут быть стратегически использованы в брендинге и UI-дизайне. Яркие цвета привлекают наше внимание и создают больше положительных эмоций, чем темные или нейтральные цвета. Яркие, привлекающие внимания цвета всегда более энергичные, веселые и смелые, тогда как пастельные тона более расслабляющие и сдержанные.
2017 — увлекательный год, стартапы и новые продукты появляются как грибы после дождя и все они сражаются за место на рынке. Цвета — отличный способ привлечь наше внимание, эмоционально вовлечь нас и вот почему «кислотные» цвета становятся все более и более популярными. Но насколько бы не был привлекательным этот тренд, он может стать «выстрелом в ногу» и помешать пользовательскому опыту.
Опасности
- От больших заливок или соседствующих ярких цветов может пойти кровь из глаз — не буквально, конечно, но заболеть они точно могут. Владельцы глаз закроют из и уйдут, а вы хотите, чтобы они остались. В конце концов, именно для этого вы и использовали эти пестрые цвета в первую очередь.
- Яркие цвета в качестве подложки для текста или даже рядом могут сделать чтение неприятным, раздражающим или даже невозможным. Яркие цвета на дисплее излучают больше света. Это как светить лампой в лицо людям, которые пытаются читать. Если им и удастся прочитать текст, то у них будет неприятный пользовательский опыт, что приведет к негативному восприятию вас и того, что вы пытались сказать в своем тексте.
Как надо
- сочетайте в правильных пропорциях яркие цвета с большими объемами темных или нейтральных
- используйте яркие цвета как акцент, чтобы привлечь и направить внимание пользователя
- используйте яркие цвета с большой типографикой, как декоративный элемент
- используйте яркие цвета для подчеркивания элемента или взаимодействия
Как не надо
- старайтесь не использовать яркие цвета на больших поверхностях и в качестве основного фона
- старайтесь не использовать яркие цвета на одной странице или рядом друг с другом
- не используйте яркие в качестве подложки к основному тексту (или рядом с ним)
- не используйте яркие цвета на небольших поверхностях, у которых есть функциональная нагрузка (небольшие иконки или кнопки)
Экспериментальная сетка
В погоне за всеобщим вниманием, дизайнеры отказываются ограничивать свое воображение, восставая против гармонии, возвращая хаос в повестку современного дизайна через уникальные, несбалансированные и нетипичные композиции. Экспериментальная сетка становится все более популярной в 2017.
Это интересный и игривый тренд. Это отличный способ добавить немного разнообразия и помочь дизайнам из сферы искусства и моды выделяться в море аккуратных сеток. Экспериментальные сетки сбалансированы неидеально; фотографии, типографика или интерфейс обычно не выравнены, у элементов разные паддинги и они часто накладываются друг на друга.
Опасности
- В нашей повседневной жизни достаточно хаоса. Неужели нам нужно его еще больше, когда мы ищем информацию онлайн? Несбалансированная игривость в сетке может легко помешать возможности сканировать и находить информацию на сайте, делая браузинг невыносимым занятием. Когда основной целью является получение информации с загруженной контентом страницы, структурированная сетка просто необходима.
- Визуальная иерархия также очень важна для навигации пользователей в контенте страницы. В экспериментальных сетках элементы часто «разлетаются» друг от друга, разделяя контент странным и, зачастую, случайным, не-иерархичным образом. Другие элементы могут наезжать друг на друга или оказываться в менее видимых частях страницы, делая достаточно сложно читать, группировать и обрабатывать информацию.
Как надо
- использовать экспериментальную сетку, когда чтение контента не является основной задачей
- использовать несбалансированную композицию как акцентную деталь между хорошо структурированными и выровненными блоками
- не забывать о правиле близости и четко отделять различные сегменты контента
- использовать перекрывающие друг друга элементы только при наличии хорошего контраста и большой типографики
Как не надо
- не использовать экспериментальные сетки в загруженных контентам страницах
- не использовать несбалансированную композицию когда у аудитории ограничено время на просмотр контента
- нельзя случайным образом разбрасывать элементы по странице — базовое выравнивание должно присутствовать всегда
- не накладывайте элементы друг на друга вслепую — учитывайте контраст и контекст
Мелкие детали
Минимализм был популярен довольно долго и популярен до сих пор. Тем не менее, сейчас мы наблюдаем переход к более детализированной композиции. Этому есть свои причины — минималистичный дизайн не позволяет удивлять и выделяться, в отличие от более детализированных и сложных композиций. Фокус на мелких деталях очень важен сегодня.
Пространство с мелкими деталями привлекают взгляд, от небольших, таких как точки-переключатели, до плавающих элементов, не выполняющих никакой функции. Летающие декоративные иконки, подчеркивания, геометрические фигуры и фрагменты становятся все более и более популярными, так как они добавляют интересные ноты в любой дизайн. Они могут служить противовесами, разделителями или указателями на контент, как небольшие полезные комментарии.
Опасности
- Мелкие детали могут быть полезными для привлечения внимания и развлечения пользователей, но могут случайно начать соревноваться с тем, что действительно важно — навигацией и контентом. Слишком много деталей могут стать невыносимыми, разрушая иерархию, вводя в заблуждение, вместо того, чтобы помогать пользователю использовать навигацию или сканировать контент. Мелкие детали, которые не служат никакой цели, по сути являются цифровым шумом и дефектами.
- Мелкие детали часто используются как декоративный элемент, рядом с картинками и типографикой, иногда накладываясь на них. Иногда они следуют за скроллом или курсором мыши. В результате, они привлекают внимание, что может быть и хорошо и плохо. Мы должны не забывать об этой их функции и размещать их соответственно, чтобы не рисковать читабельностью.
Как надо
- используйте мелкие детали с учетом контента, удостоверившись, что они не влияют на читабельность
- используйте мелкие детали как указатели для привлечения внимания или разделения основного контента
- балансируйте мелкие детали при помощи минималистичной и чистой сетки
- попробуйте добавить деталям контекст, делая их релевантным контенту
Как не надо
- не используйте мелких деталей в загруженных контентом страницах
- избегайте случайных деталей, которые не служат никакой цели или не могут помочь рассказать вашу историю
- постарайтесь отделить детали без функций от основной навигации
- относитесь к мелким деталям как к маленьким радостям, а не к основному компоненту дизайна
Достойны упоминания
Мелкая типографика
Маленький шрифт смотрится и ощущается более стильно. Он оставляет воздух для других элементов и дает пространство глазу. Использование небольшого кегля дает возможность создавать интересные контрасты без борьбы за свободное пространство.
С другой стороны, мелкая типографика может потеряться в больших блоках текста или препятствовать читабельности контента. Используйте мелкую типографику с осторожностью — только в коротких параграфах. Также, избегайте использовать кегль ниже 13pt.
Экспериментальная навигация
Экспериментальные паттерны навигации становятся все более популярными, по мере того как все больше дизайнеров стремятся к инновации. Различные стили навигации могут сделать небольшие сайты с минимумом контента более интересными или они могут помочь пользователям использовать навигацию особым способом.
Экспериментальные паттерны навигации могут быть восхитительными и полезными, если они достаточно интуитивные. Нужно помнить, что они подходят не для всякого дизайна или любой аудитории и жизненно важно тестировать их юзабилити.
Анимации
Анимации приносят бесконечные возможности в UI-дизайн. Они могут позволить творчески трансформировать или улучшить пользовательский опыт. Анимации могут добавить дополнительный уровень любому дизайну, привлекая внимание в нужных местах. Анимации обогащают минималистичные композиции, улучшая сторителлинг и пользовательские взаимодействия.
Слишком интенсивное использование анимации может привести к созданию тяжелых веб-сайтов и увеличенному времени ожидания, что будет испытывать терпение пользователя. Неверные или ненужные анимации тоже могут ввести в заблуждение, прерывать или сбивать с толку, так что используйте их мудро.
Заключение
В море веб-сайтов и продуктов, дизайнеры пытаются сохранять свои работы свежими и релевантными, следуя дизайн-трендам. Но тренды могут быть опасны и не являются панацеей. Важно использовать их разумно, в зависимости от контента, аудитории и целей, которых мы пытаемся достичь.
Самое главное — мы не должны жертвовать пользовательским опытом для того, чтобы дизайн выглядел хорошо и современно.
Перевод выполнен специально для сообщества Behance Russia.
Перевел Владимир Клименко, редактор — Варвара Новожилова.
