Главная  /  Блог  /  Web  /  
  • Плоскость и минимализм – новые тенденции в сфере веб и UI дизайна

    /  Ноября 11, 2014   /   Web,  Дизайн,  Креатив   /  
    ||||| Like It 1 |||||

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

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

    Что же произошло?

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

    Итак, как же коллективное сознание от любви к текстурированным, и объемистым интерфейсам перешло к простым цветам и плоскому дизайну? Этот переход был вызван множеством факторов. Ниже приводятся основные из них:

     

    Информационная перегрузка

    Информационная перегрузка

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

     

    Главное – простота!

    Простой UI design

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

     

    Содержимое на первый план

    Содержимое - на первый план

    Как это часто бывает, когда новые устройства и технологии выходят на рынок, мы в восторге от их «продвинутости» и интерактивности. Этот интерфейс-ажиотаж постепенно успокаивается, а интересы пользователей устремляются в сторону содержания. Медиа потребление выводит на первый план возможности девайса в плане прослушивания музыки, просмотра видео, написания каких-либо текстовых сообщений (для работы, общения и.т.д.)
    Мы сами выбираем для себя то, что нам нужно от устройства, и потому мудреный интерфейс может играть с нашим гаджетом злую шутку.

     

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

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

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

     

    Влияние технологий

    Влияние веб и UI технологий

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

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

     

    «Резиновый» дизайн

    Резиновый веб дизайн

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

     

    Хорошо, достаточно с теорией. Давайте ознакомимся с некоторыми практическими соображениями. Создание эффективного минималистичного дизайна удивительно сложно. Усваивая общие приемы UI (тени, скосы, текстуры и т.п.), вы быстро поймете, насколько важны немногие оставшиеся элементы. Следующие советы, в основном универсально применимы, но они особенно актуальны для плоских интерфейсов.

     

    Перед началом работы

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

     

    Тонкости процесса

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

    • При проектировании минимализированного интерфейса, вдохновение можно найти в эрах до появления ПК, когда дизайнеры и художники создавали великолепные работы при помощи карандаша и бумаги, без современных технических приспособлений. Помимо них, интересные идеи можно подсмотреть в творчестве художников-минималистов, архитекторов и промышленных дизайнеров.
    • Полезно иногда отвлекаться от работы, делать перерывы. Они могут наталкивать Вас на свежие идеи. Например, та же квартира – пример минимального дизайна;
    • Немалую помощь может оказать сравнение двух версий. Например, после перемещения линий вверх или вниз на 5 пикселей, стоит сохранить оба варианта и протестировать их, оставив лучший;
    • Необходимо проверить дизайнерские концепции для разных типов устройств на ранней стадии, и получить подтверждение их работы;
    • Во время работы, нужно постоянно спрашивать себя: «что мне действительно нужно?». Сначала найти элемент, который действительно необходим, а уже затем следует думать, как его упростить. Стереть то, во что вложено столько труда – всегда трудно. Но редактирование имеет решающее значение.

     

    Цвета

     

    Цвета - ключевой компонент визуального дизайна

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

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

     

    Типографика

    Типографика - элемент плоских содержательных сайтов

    Когда дело доходит до плоских содержательных сайтов, типографика является решающим фактором.

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

     

    Взаимодействие

    Интерактивный плоский UI

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

    • Ключевым из них является контрастность. Если большая часть макета белая, то вы могли бы выделить интерактивные элементы другим цветом. Если дизайн в первую очередь текстовый – то вы можете использовать простую иконографию. Если заголовки большие и нижнем регистре, вы могли бы сделать ссылки малыми шрифтом, и верхнем регистре. Подобных идей может быть миллион.
    • Также помогает расположение элементов в «ожидаемых» местах. Если вы используете тонкий шеврон для стрелки назад, логичнее всего было бы поместить его в верхнем левом углу, то есть там, где пользователи к этому привыкли.
    • Интерфейс должен быть интуитивно понятным, насколько это возможно. Но в тех случаях, когда взаимодействие является особенно сложным или неожиданным, необходима возможность легко и быстро исправить неизбежные ошибки.
    • Выпадающие, модальные окна, окна-ауты и другие многослойные элементы могут быть хлопотными для реализации в плоском дизайне. Границы или тонировка способны визуально разделить уровни взаимодействия. Возможен выбор и каких-либо других способов.

     

    Подведем итоги

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

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