Плоский дизайн: практические рекомендации

Posted on by riasevastopol

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

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

  • Плоский дизайн: история, неприятности и эволюция

1. Через чур много информации

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

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

Никакого беспорядка: главные данные в Geckoboard понятны с первого взора

  • Факты и лишь факты: информационная перегрузка

Плоский дизайн: практические рекомендацииp2. Простота в подробностях

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

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

Легко и со вкусом: приложение Blue от Oak

3. И опять о контенте

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

4. Технологическая грамотность

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

Персональный кабинет Fitbit — броский, ясный и понятный

  • Понижение юзабилити, как последствия моды на плоский дизайн

5. Влияние разработок

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

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

размер шрифта и Насыщенность текста определяют как эстетику, так и юзабилити плоского интерфейса

Твитнуть цитату

6. Адаптивный дизайн

С распространением связанных между собой устройств с различными разрешениями интерфейсам было нужно стать более «эластичными»: так и показалось понятие адаптивного дизайна (responsive design). И не смотря на то, что адаптивность не требует какой-то особой эстетики, возможно с уверенностью заявить, что плоский дизайн тяготеет к ней значительно больше, чем другие стили. Еще одно преимущество минимализма — в сокращении размера страницы и времени загрузки.

Невесомо и без излишеств: OnSite

  • Респонсивный Vs адаптивный дизайн: что лучше для пользователя

Перейдем к практике

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

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

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

Принципиально важно вести процесс верно — это относится любого стиля, не только плоского. Ориентируясь на простоту, имейте в виду:

  1. Создавая минималистичный дизайн интерфейса, возможно черпать воодушевление из докомпьютерной эры, в то время, когда художникам и дизайнерам приходилось делать больше меньшими средствами. Это красивый предлог обратиться к работам титанов дизайна, к примеру, Йозефа Мюллера-Брокмана (Josef Muller-Brockmann) либо Вима Кроувела (Wim Crouwel). Возможно кроме этого уделить время живописцам-минималистам, таким как Эльсуорт Келли (Ellswort Kelly), архитекторам, к примеру, Мису ван дер Роэ (Mies van der Rohe), и промышленным дизайнерам, например, Дитеру Рамсу (Dieter Rams).
  2. Не бывает лишним отдохнуть от работы. Вся сущность плоского и минималистичного дизайна — в подробностях, так что сделать паузу, а после этого посмотреть свежим взором часто не редкость действеннее, чем трудиться без отдыха.
  3. Сравнивать версии оптимальнее , глядя на них в один момент. Возможно двадцать мин. двигать одну линию вниз и вверх, но стоит сохранить оба варианта и посмотреть на них сходу, как лучший делается очевиден.
  4. Масштаб объектов по отношению друг к другу играется важную роль, исходя из этого чем раньше вы начнете контролировать наброски на различных устройствах, тем раньше станете уверены, что все в порядке.
  5. На протяжении работы всегда спрашивайте себя: «Нужно ли мне это?» Весьма легко привязаться к какому-то элементу, в случае если вычисляешь его уместным, но неизменно необходимо искать методы упростить интерфейс. Само собой разумеется, убирать то, над чем продолжительно трудишься, тяжело и не очень приятно, но правки значительно серьёзнее.

Global Closet: игра, созданная студией The Workshop для проекта National Geographic Eduction

  • Истоки минимализма в веб-дизайне

Сетка

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

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

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

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

Приложение Live School для iPad от Rossul Design

Размещайте главные элементы так, дабы они разламывали структуру интерфейса и тем самым завлекали внимание

Твитнуть цитату

  • Перечень vs. Сетка: секреты юзабилити мобильного интерфейса

Цвет

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

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

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

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

Разнородная палитра в дизайне TriplAgent

  • Как дизайн и цвет воздействуют на показатели конверсии?

Типографика

Типографика — краеугольный камень плоских сайтов, ориентированных на контент.

1. Шрифты с засечками, непременно, возможно применять в плоском дизайне, но шрифты без засечек практически в любое время смотрятся значительно чище.

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

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

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

Чистая и замечательно читаемая типографика на Siteleaf

  • Типографика как инструмент увеличения производительности лендинга

Сотрудничество

В работе над плоским дизайном не редкость непросто указать на интерактивность элемента. Вот кое-какие распространнные методы:

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

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

2. Устоявшееся размещение. Если вы используете узкую стрелку для кнопки «Назад», поместите ее в левый верхний угол, где традиционно находится данный элемент и где его будут искать.

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

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

Taasky: пример того, как элементы несложной разметки оптимально разграничиваются посредством контрастов

  • Как сделать кликабельные элементы лендинга интуитивно понятными?

Вместо послесловия

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

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

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

Высоких вам конверсий!

По данным: smashingmagazine.comimage source techthis

Случайные статьи:

Плоский дизайн против Реализма


Подборка похожих статей:

riasevastopol

More Posts