О правильном взаимодействии с клиентами или преимущества CRM-систем
Previous
выбрать за меня
Instagram стал самой важной соцсетью для американских подростков
Next
веб-дизайн, интерфейс, плоский стиль, flat 2.0
Юзабилити

24 лучших примера “плоского дизайна 2.0”

На сегодняшний день плоский дизайн развился в нечто не столь… плоское. Райан Аллен, один из авторов издания Dapper Gentlemen, описывая новую модификацию старого тренда, использует термин «плоский дизайн 2.0». В недавней статье он детально изложил свое видение относительно плоского дизайна в его прежнем виде и того, во что он вылился сегодня. Также Аллен немного пролил свет на причины описываемых явлений.

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

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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



Световые эффекты, тени, плавные цветовые переходы, градиенты и др.

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

Cybeer Bar

веб-дизайн, интерфейс, плоский стиль, flat 2.0

У Cybeer Bar, согласно канонам жанра, присутствует упрощенная плоская стилистика, но вместе с тем и высокая детализация объектов, чего стоит хотя бы деревянная барная стойка. Еще одна особенность — предназначение каждой детали тщательно продумано.

Christmas with Joy



веб-дизайн, интерфейс, плоский стиль, flat 2.0

Christmas with Joy с помощью иллюстраций, выполненных в плоском дизайне, демонстрирует занятные версии известных всем рождественских персонажей. Среди прочих присутствует Ded Moroz и его милая внучка Snegurochka, которые разъезжают на своей тройке и раздают подарки. Но нам придётся ещё немного подождать до Нового года.

Инструкции Dropbox

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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

450 GSM

веб-дизайн, интерфейс, плоский стиль, flat 2.0

Веб-дизайн 450 GSM можно было бы назвать плоским, если бы не тень от птицы. Этот ресурс разрабатывался с помощью сервиса Startup Design Framework, который позволяет создать красивый сайт за короткое время.

Intercom  



веб-дизайн, интерфейс, плоский стиль, flat 2.0

Темно-голубой фон, стильные иконки, ненавязчивая типографика — вот основные детали плоского дизайна сайта Intercom. Характерная черта – округлые края иконок и кнопок.

Agency Survival Kit

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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

Hell‘o Baby

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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

Helbak

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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

Paye Ton Caps 

веб-дизайн, интерфейс, плоский стиль, flat 2.0

Графическое оформление этой онлайн-игры — самый что ни на есть плоский дизайн 2.0, с непритязательными формами предметов и приглушенными тенями.

CSS Conference EU

веб-дизайн, интерфейс, плоский стиль, flat 2.0

Традиционная цветовая палитра в сочетании со множеством деталей делают сайт CSS Conference EU ярким образчиком плоского дизайна.

Take It

веб-дизайн, интерфейс, плоский стиль, flat 2.0

Используется наложение слоев. В дизайне сайта, призванного популяризировать приложение Take It, фотографии дополняются плоскими мотивами. Городской ландшафт на заключительном слайде выполнен в типично плоской стилистике.

Google Santa Tracker

веб-дизайн, интерфейс, плоский стиль, flat 2.0

Flat 2.0, очевидно, очень подходит для рождественской тематики. Сайт Google Santa Tracker доказывает, что плоский дизайн и минимализм не всегда идут рука об руку. Множество индивидуальных деталей и беспрерывная анимация — снежные сугробы и транспорт, курсирующий на заднем плане, — делают эту страницу весьма любопытной. Размытые образы деревьев на переднем плане в сочетании с параллакс-скроллингом создают 3D-эффект.

For Better Coffee

веб-дизайн, интерфейс, плоский стиль, flat 2.0

Сайту немного не хватает теней, но множество деталей и контрастирующие цвета все-таки вынуждают отнести его к направлению Flat 2.0.

Dots

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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

Quotes Magazine

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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

Stash Flat Icons

веб-дизайн, интерфейс, плоский стиль, flat 2.0

Плоский дизайн сайта Stash Flat Icons рекламирует иконки для такого же дизайна. Ресурс отличает светлая цветовая гамма и обычная типографика, а равно и иконки с забавными персонажами.

Acapo

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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

Liberio

веб-дизайн, интерфейс, плоский стиль, flat 2.0

Liberio — очередной пример, который можно внести в учебник по плоскому веб-дизайну: светлые цвета, скромные шрифты (за исключением названия компании), гладкое и крайне упрощенное изображение планшета.

Kaipoche

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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

Team Treehouse

веб-дизайн, интерфейс, плоский стиль, flat 2.0

Team Treehouse тяготеет к старомодной интерпретации плоского стиля, и в то же время в иконках обильно присутствуют детали 2.0.

SCEATT

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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

Evolve Wealth

веб-дизайн, интерфейс, плоский стиль, flat 2.0

Дизайн Evolve Wealth, как и SCEATT, отличается от сайтов других финансовых компаний теплой атмосферой и юмором.

Black Tomato

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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

Lander

веб-дизайн, интерфейс, плоский стиль, flat 2.0

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

В заключение

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

Продолжаем наблюдать за дальнейшей эволюцией Flat Design…

Реакция на статью
поделюсь
200%
интересно
0%
полезно
300%
не уверен
100%
скучно
0%
где автор?
0%
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.