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

Flat is where it’s at —

These days, most people are looking at your design on a flat screen, so instead of pretending the image is something that it’s not, embrace the flatness. Flat design may still be considered a “trend,” but the fact that it’s been around for almost a decade just goes to show how versatile and valuable it is.


If you’re afraid this style will make your design look identical to all the others, don’t cheap out on something generic. Work with a designer whose portfolio is full of unique flat designs that say exactly who they’re for and what their owners do. With the right designer, your flat design might just jump off the screen.

6. Long Shadows

As mentioned above, flat design tends to be simple and spacious—that is why it rejects using any kinds of effects. However, there is one effect that emerged from flat design. It became a trend and one of the significant features. 

We’re talking about the long shadow effect. It has some typical characteristics which make this effect recognizable. Those are a 45-degree angle and big size (a shadow should be about twice as long as the object). As a result, long shadows really bring more depth to flat designs.

Flat Icon with Long Shadow

Such an effect makes an object look more three-dimensional, while still maintaining a flat look. 

История флэт дизайна

Очевидно, что флэт дизайн не появился из воздуха. Его истоком обычно считают швейцарский стиль. Швейцарский стиль, также известный под названием International Typographic Style или более коротко — международный стиль, — это направление, которое зародилось в 1920-х годах, но было встречено очень критично, а затем получило яркое перерождение в графическом дизайне в Швейцарии 1940-50-х годов, ставшим прочной основой графического дизайна середины 20-го века во всем мире. Основоположниками этого творческого движения были Йозеф Мюллер-Брокманн и Армин Хофманн.

Согласно сайту Design Is History, краткое описание ключевых особенностей этого стиля заключается в следующем: «… стиль ориентировался на простоту, удобочитаемость и объективность. Наследие этого стиля — использование шрифтов без засечек, сеток и асимметричных макетов. Также выделяется сочетание типографики и фотографии как средства визуальной коммуникации. Основные влиятельные работы были разработаны как плакаты, которые считались наиболее эффективным средством предоставления информации».

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

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

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

Первый шаг к повышению популярности плоского UI в цифровых продуктах был сделан Microsoft, это движение началось в начале 2000-х годов и широко развилось в продуктах 2010 года, в частности, в разработке мобильных интерфейсов для Windows Phone 7. Основные особенности плоского дизайна, такие как интуитивные простые формы, жирная четкая типография, яркие контрастные цвета, длинные тени, отсутствие сложных деталей и текстур, хорошо прижились. Следующий скачок популярности флэт дизайна произошел в 2013 году, когда Apple выпустила iOS 7 на основе принципов плоской графики в качестве основы для удобных интуитивно понятных интерфейсов. Можно также сказать, что некоторые ключевые принципы плоского дизайна нашли свое выражение в Material Design от Google.

Так основными особенностями плоского дизайна стали:

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

Монотонные цвета

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

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

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

Монотонные цвета особенно популярны для мобильных приложений и мобильного дизайна.


Монотонные примеры : Так же, как с другими цветовыми палитрами, в монотонных схемах также необходимо использовать контраст. Смешивайте оттенки отличные от базового цвета. Начните с насыщенного (100%) и оттенками 50%, 20% и 8%.

Let’s Sum Up

To sum things up, we’ve revealed some facts from the history of flat design, and talked about colors, shapes and typography. We’ve looked at flat design from different angles, discussed its advantages and disadvantages, and listed some of the main points that are essential for making good design.

I hope you’ve discovered some new information from this article or at least found it interesting and inspiring. You should really try making a flat design piece if you haven’t tried before.

All in all, what else can be mentioned when talking about flat design?

If you are really into flat design, if you like its straight-edged shapes, vivid colors, crisp fonts and its overall clean and minimalistic look, then go for it! 

It is trendy, but, as with any other kind of graphic style, you should not limit your creativity to one and the same kind of techniques and visual elements. Current trends don’t mean that you can’t choose any other design style for your project. Skeuomorphism still looks intricate, and there is no reason for giving up drawing realistic objects with a bunch of tiny details and textures. Just remember that your design should match each specific project, reflecting its feel and look, preserving usability and function.

When not to use flat design —

Don’t use flat design when your image is selling realism or when you would rely on details to tell the whole story. Here are some examples:

  • Book covers tend to favor more realistic imagery since they are selling fictional worlds and characters. Entrepreneurial and self-help tomes, however, can safely rely on flat design since they tend to be written in a ‘how-to’ format
  • Full color T-shirts and apparel designs where purchasers are going to want something detailed that shows off their style
  • For mascots and character design, details are often needed to give the character a personality
  • Product packaging typically uses more elaborate and eye-popping artwork to compete on the shelves
  • Social images and public service websites—this is where you want to highlight humanity and diversity

Стилистика и освещение

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

Предметы

Общий стиль Flat Lay задают мелкие детали.Небольшие акценты помогают заполнить пустое пространство и гаромнизировать общую композицию. Набор предметов для Flat Lay:

  • живые, засушенные и искусственные цветы (сирень, флоксы, розы, тюльпаны, лаванда);
  • бижутерия (серьги, цепочки, кольца);
  • еда (торты, пирожные, кексы, макаруны, вафли, меренги);
  • кристаллы, карты ТАРО или игральные карты;
  • коробки со стружкой (H&M, IKEA, Fix Price, Leonardo);
  • подсвечники из IKEA;
  • свечи разной длины и ширины;
  • открытки DIY (есть в цветочных и книжных);
  • статуэтки и фигурки;
  • развороты журналов;
  • растения суккуленты или кактусы;
  • состаренная бумага с ретро-шрифтом;
  • декоративные обертки;
  • карточки и открытки с надписями или мотивирующими фразами;
  • флаконы духов;
  • очки;
  • тюбики или палитры красок;
  • крафтовые конверты.

Дополнительные мелкие предметы:

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

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

Шрифты

Открытки с надписями для Flat Lay фото содержат красивые калиграфические шрифты. Найти подобные произведения искусства можно в канцелярских и книжных и магазинах для рукоделия (по типу Leonardo), а также заказать по интернету.

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

  • клипарты и стикеры можно найти в приложении Pics Art;
  • красивые шрифты есть в программах AppForType, Типографика, Snapseed.
  • забавные наклейки и стикеры можно найти в редакторе Avatan Plus.

Get flat design right with these steps —

So you want to use flat design. Here are a few steps to take if you want to ensure you get it right:

Don’t confuse flat with boring

Flat design is inherently minimalist. But just because a design isn’t detailed doesn’t necessarily mean it is boring. Usually, minimalist designs are easy-to-scan and have a sleek, modern feel. Rather than put you to sleep, they get right to the point. Whether they’re boring or not ultimately depends on the designer.


The key to making a design like this work is to use the white space to guide the viewer’s eye towards the most important elements. In this way, you can build meaning and aesthetic appeal into your flat design without falling, well, flat.

Color, context and contrast are your friends

Every color in this image is carefully chosen because without shading, color and contrast have to step up to create depth. Banner design by iving.

Choosing a flat look means you will lose some of the key elements that normally make up a design, like shading around a button to indicate that it’s clickable or realistic images that can spark empathy in the viewer. With this more limited toolbox, you have to get creative with the tools you do have like color, contrast, context and scale.

This means using a more saturated hue to emphasize certain text or buttons and giving the user context clues to help them understand how to use certain elements, like placing an arrow on the right and left sides of the page to tell users to swipe right and left for more content or arranging links horizontally in a toolbar-like manner. Deliberate aesthetic choices like these tell the viewer how to use your design in the absence of skeuomorphic design elements.

Liven up your flat design with animation

Animation and flat design are natural friends. This is because detailed drawings require much more work to make the motion convincing (such as redrawing the figure in various poses) whereas flat design can get away with simplified animations.

Though you can use this technique for storytelling or adding some pizzazz to your logo, animating flat design elements can also be a way to make up for what you lose when you eliminate shading and texture. Make the design elements you want to highlight move to show users where to direct their attention.

Choose a flat-friendly font

Because you have less to work with visually, every design choice you make counts even more than it normally would, and typography is one choice you don’t want to overlook.

Try out your font in flat style to see if it’ll work. Play around with the colors and scale to see if there’s a way to make it work with your flat design. Logo design by minimalexa.

A good rule to follow when choosing a font is that it should take its cue from flat design—that is, keep it simple and leave out decorative elements like serifs. Though some novelty fonts work in flat, others—like tight fonts and anything that incorporates a lot of small images—can be difficult to render well in a flat design. Some examples of sans serifs that look great with flat design include Telegrafico and Junction.

Флэт дизайн — применение на практике

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

Проектирование пользовательского интерфейса

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

Дизайн пользовательского интерфейса

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

Тематические иллюстрации

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

Печатные иллюстрации

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

Брэндинг

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

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

Как сделать Flat Lay фото: простые правила

Наши советы и секреты помогут вам создать серию оригинальных фотокарточек:

  1. Фон может быть наложен на 60%, 80% или на 100% всего снимка.
  2. На фото должен присутствовать только один крупный и тяжелый предмет (коробка, фотоаппарат, коробка айфона, свеча, ноутбук и тд).
  3. Если вы выбрали коробку, то ее нужно чем-то заполнить. На дно лучше положить стружку (купить ее можно в цветочных).
  4. Съемка Flat Lay может быть совершена с помощью специального штатива для фотоаппарата или телефона. Это очень удобно!
  5. Под массивный элемент рекомендуется положить разворот журнала, открытки или карточки с надписями. Покрутите их по своему усмотрению, они могут заходить друг за друга, но надписи должны хорошо читаться.
  6. На одно фото необходимо примерно такое количество цветов: 1 пучок из 3-5 бутонов, 1-2 бутона по отдельности и немного лепестков. Огромную охапку лучше всего располагать по бокам фото, можно даже сделать так, чтобы ее стебли не полностью попадали в кадр.
  7. Маленькими лепесточками рекомендуется заполнить все пустоты в композиции.
  8. Желательно сделать несколько снимков с разных ракурсов, чтобы в конечном итоге выбрать наиболее выигрышный.
  9. Если вы не чувствуете композицию, то просто попробуйте повторять раскладку на фото как у многих фотографов, заменяя элементы своими предметами.

8. Pros & Cons of Flat Style

While flat design has become so popular due to its numerous advantages, it still has some drawbacks, which designers face while working with this style. Let’s sum up both the pros and cons of flat design.

Flat Space Exploration Banners

Pros

Trend

Flat design has developed into a trend, attracting a lot of positive attention among designers and web designers, and it doesn’t seem to be losing its position. On the contrary, it’s spreading more and more and acquiring some new forms and features, gradually transforming into something even more creative.

Simplicity

Flat design is simple, minimalist, and clean. When it comes to websites, flat designs really help you to focus more on the content, not on the distracting visual effects. This also works for mobile app interfaces: clean design with big flat buttons make it perfect to work on mobile devices.

Vividness


The use of color is another great plus of flat design. Bright and bold colors look attractive and clean, and the lack of gradients makes a design look modern. What is more, such clean colors make it look more positive and engaging, creating a proper mood. 

Cons

There are a lot of other advantages of flat design, but no design is perfect, and we can’t idealize it. There are still some disadvantages that we must mention:

Unresponsive

Sometimes, the lack of additional details or visual effects makes it very hard to create a convenient and user-friendly interface, which makes the whole design not responsive. Not all users actually feel comfortable with this design, because it may be hard to find clickable elements on a web page or elements which you need to tap in a mobile application, because they are not interactive. 

Typography Problems

As mentioned, not every font fits flat design. Sometimes such a design piece with bold, straight-edged fonts looks really balanced and stylish. However, choosing the wrong typography may result in completely ruining your design. You really need to feel which fonts are appropriate for flat design and which are a no-no. Weak typography skills can make it really hard to pick the proper font. 

Weak Visuals

Due to the limitations in use of effects, colors and fonts, flat design may look too simple and uninviting. Its minimalism can also become its greatest disadvantage—all those designs end up looking quite the same. It is rather hard to make your icons or web pages differ from somebody else’s designs, because we’re using the same simplified shapes, limited color palettes and similar fonts. As a result, in the course of time flat design may come to look boring.

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

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

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

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

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

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

Плоский дизайн: вдохновляющие примеры сайтов

Золотой треугольник

С диагональным золотым сечением тоже всё просто.

Вариант 1

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

Ориентируйтесь на картинку. Из правого верхнего угла провести линию под углом в 90 градусов. Область пересечения отрезков – это и есть идеальное место для расположения главного предмета, на котором вы хотите сконцентрировать внимание.. Здесь все ключевые объекты должны быть расположены не в «точках силы», а в двух больших частях сетки

Остальные предметы могут лежать прямо или вдоль линий

Здесь все ключевые объекты должны быть расположены не в «точках силы», а в двух больших частях сетки. Остальные предметы могут лежать прямо или вдоль линий.

Вариант 2

Необходимо проделать все пункты, кроме 3. А в образовавшихся треугольниках разместить по одному главному предмету.


С этим читают