Основные правила Flat-дизайна

Вернуться
Опубликовано: 21.02.2015 г.

Последние несколько лет ознаменовались одной очень любопытной тенденцией – дизайнеры стали отказываться от объемных элементов в интерфейсах, заменяя их на всё более плоские. Это можно заметить как в операционных системах (за последнее время Apple, Google, Microsoft «расплющили» внешних вид своих ОС), так и в веб-дизайне, где эта тенденция проявляется еще сильнее. «Смело, плоско и красиво» стало основополагающим в оформлении современных сайтов. Так называемый Flat-дизайн уверенно шагает по планете. Но чтобы его правильно использовать, нужно знать основные правила и аспекты стиля.

 

 

Как можно больше пространства

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

Яркие, смелые цвета

Еще одно свойство Flat-дизайна, которое прямо-таки бросается в глаза – это использование ярких, запоминающихся цветов. Время черно-белых или светло-голубых сайтов проходит, им на смену приходят более яркие краски. Но здесь важно не переусердствовать: выберите для своего проекта не больше пяти основных цветов и используйте их на всех страницах. Правильно подобранные цвета позволят без труда выделить главную информацию, которую обязательно нужно заметить посетителям. Если вы сомневаетесь, в сети есть немало ресурсов, посвященных палитре цветов, которые принято использовать во Flat UI, они могут служить отличной отправной точкой. А инструменты вроде Adobe Color CC еще больше упростят задачу.

Видео-фон и панорамные картинки

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

Понятные и читабельные шрифты

Шрифт должен в первую очередь доносить информацию пользователю, а уже затем служить элементом дизайна. Поэтому Flat UI настоятельно рекомендует использовать простые и понятные шрифты, доступные для большинства пользователей и их устройств. Их должно быть легко прочитать как с экрана FullHD-устройства, так и с мобильного девайса. Основные шрифты, которые чаще всего используются в современных дизайнах – это Helvetica, Open Sans, Raleway и похожие на них. На Google Fonts можно найти немало полностью бесплатных шрифтов и сразу использовать их в своем проекте посредством @font-face. Размер шрифта также важен: не используйте слишком большие или слишком маленькие размеры без острой необходимости.

Иконочные веб-шрифты вместо картинок

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

Тени и градиенты под запретом

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

Привлекательный и понятный логотип

Разработка подходящего логотипа – один из важнейших этапов работы над оформлением сайта. Учтите несколько вещей:

Кроме того, логотип не должен выбиваться из общего стиля проекта, а логически его дополнять.

Использование прозрачности

Прозрачность – неотъемлемая часть Flat-дизайна. Проще всего ее реализовать, если использовать цветовую модель RGBA в проекте вместо RGB. Это одно из свойств, появившихся в CSS3, которое позволяет использовать альфа-канал (А в аббревиатуре RGBA как раз и означает Alpha). Чтобы понимать, как это работает, вспомните прозрачность в Photoshop. Прозрачность посредством CSS можно регулировать в пределах от 0 до 100%.

Параллакс

Этот эффект можно встретить в большинстве современных сайтов. Он не только очень красив, но и может быть полезен с информативной точки зрения. Сменяющие друг друга изображения выглядят шикарно и обязательно привлекают внимание всех зашедших на сайт. Не зря ведь параллаксом обзавелись даже такие гиганты как Apple, Twitter, Paypal и т.д. Создать параллакс-эффект несложно: можно написать его самостоятельно на JavaScript или чистом CSS, а можно взять готовые решения в сети. Кроме того, все современные фреймворки обязательно содержат этот элемент.

Интуитивно понятный интерфейс

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

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

2863 0

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *