Яндекс.Метрика

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

Основные принципы flat-дизайна

12 июня 2013 | Опубликовано в статьюшечки | 10 Комментариев »

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

«Нет» добавлению эффектов

TriplAgent

В Арктику

Целевая приложение

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

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

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

Простые элементы

Вход в систему Календарь Ipad

Типы файлов

Площадь UI

Симоне Marcarino

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

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

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

Акцент на типографике

Кортни и Эндрю

Ржанка

 

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

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

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

Акцент на цвете

Закрыть целевую страницу

Интернет-радио

Белка Настройки

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

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

Цвета, как правило, яркие — используются в основном чистые цвета цветового круга — без оттенков и тонов. Очень популярны первичные и вторичные цвета. Также очень часто в цветом решении при создании плоского дизайна используются цвета ретро, такие, как salmon (лососевый), purple (фиолетовый), green (зеленый) и  blue (синий) — тоже достаточно популярны.

Минималистичный подход

Персональный сайт

DBX - Dropbox

Грязи

Плоский дизайн по своей натуре прост, и он хорошо сочетается с минималистичным подходом. 

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

 

«Почти плоский» дизайн

Нытье всплывающее

Calc

SimpleMail

Далее проект

Применение веб-музыка

Также можно выделить такой стиль некоторых дизайнов, как «почти плоский» дизайн. 

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

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

Автор: Carrie Cousins

Перевод — Дежурка.

Возможно, вас заинтересует:

 




Комментарии

  1. miiini
    Thumb up Thumb down -21

    Комментарий скрыт из-за рейтинга

    Yzif Ответ:

    Thumb up Thumb down +27

    Капитан Очевидность, ты снова всех нас спас!

  2. Георгий
    Thumb up Thumb down -6

    Комментарий скрыт из-за рейтинга

  3. Bella Liya
    Thumb up Thumb down +1

    Спасибо, очень информативно

  4. Анна Мартынянова
    Thumb up Thumb down -1

    Ой как миленько. Мне нравится *IN LOVE* *IN LOVE* *IN LOVE*

  5. Евгения
    Thumb up Thumb down +14

    нету картинок :(

  6. Кирилл
    Thumb up Thumb down +12

    ИЗОБРАЖЕНИЯ ДОБАВЬТЕ ПОЖАЛУЙСТА

  7. Роман
    Thumb up Thumb down +2

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

  8. User
    Thumb up Thumb down +1

    Жопы неграмотные!

[an error occurred while processing the directive]


[an error occurred while processing the directive]