Flat style: Флэт (flat) дизайн: лучшие практики плоского дизайна

Особенности FLAT — дизайна | Дизайн в жизни

Сравнительно недавно популярным стало такое направление дизайна как FLAT – дизайн или плоский дизайн. Что такое flat дизайн и какие основные принципы лежат в его основе, разберемся в нашей статье.

Пользователи Windows 8 и более поздних версий уже знакомы с FLAT – дизайном, так как первое, что встречает их при загрузке системы – это вот такой экран.

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

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

2. На первый план выходит типографика, композиция, геометрия. Особенно если это касается web – дизайна.

Геометрические фигуры являются основой плоского дизайна и трендом веб-дизайна 2020 года, который, уверена останется с нами еще надолго!

3. Гармония и простота цвета. В дизайне используется ограниченное количество цветов. Вот пример популярной палитры FLAT – дизайна.

4. Использование креативных информативных иконок.

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

В свое время самым популярным направлением в web-дизайне был Web 2.0. Теперь его место занял FLAT-дизайн. Мода имеет обыкновение возвращаться к хорошо забытому старому, чтобы сделать из него новое. Кто знает, когда выйдет из моды FLAT — дизайн, а пока наслаждайтесь простотой, гармонией и информативностью текущего веяния. К слову, плоский дизайн уже был популярен в 80-е годы, но тогда это было обусловлено техническими особенностями, невозможностью отображения теней и градиентов. А сейчас уже большинство ведущих IT компании перешли на Flat — дизайн.

Ну чтож, будем и мы подстраиваться под изменчивый мир. В следующей статье я покажу вам, как с помощью проcтых фигур в Photoshop можно создать иконки в стиле FLAT — дизайна.

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

(Visited 3 265 times, 1 visits today)

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

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

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

Сегодня все больше и больше дизайнеров применяют эту тенденцию в своих работах, однако особую популярность стиль Flat получил с распространением современных мобильных операционных систем Windows Phone и iOS 7, так как они являются последователями этой тенденции, хотя и не придерживаются им полностью.

Наша компания уже имеет опыт в создании сайтов в стиле Flat, и мы с радостью поможем вам в создании flat сайта!

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

Ниже мы проанализируем и приведем примеры некоторых сайтов, которые используют flat-стилистику.

1. Убираем все эффекты

Основной принцип flat-дизайна – это создание двумерного изображения, которое уже само по себе является плоским. При этом нужно избавиться от всех элементов, которые могут добавлять хоть какую-то глубину изображению: градиенты, плавные переходы, тени, скосы, объем, текстуры и так далее.

Во flat-дизайне вы не встретите элементы, которые пытаются выглядеть реалистично (скевоморфизм), 3D-анимацию, реалистичные пиктограммы и т.д. Однако при этом сам дизайн пытается оставаться аналогичным традиционному, но теперь на передний план выходят надписи, кнопки и навигация.

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

2. Используем простые элементы

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

3. Сделаем акцент на типографике

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

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

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

4. Привлечем внимание цветом

Чуть ли не основную роль в плоском дизайне играет цвет. Если внимательно изучить сайты, созданные на основе этой концепции, то первое, что бросается в глаза – яркая цветовая палитра. Она состоит, как правило из нескольких контрастных чистых (без оттенков) цветов, двух-трех, хотя это число может доходить и до восьми. Причем все эти цвета обычно используются в равной степени.

Наиболее популярными цветами являются первичные и вторичные цвета. То есть основные цвета (cyan, magenta, yellow, black) и полученные на основе их смешения. Также очень часто в цветом решении при создании плоского дизайна используются цвета ретро, такие, как salmon (лососевый), purple (фиолетовый) и т.д.

5. Минимализм

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

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

5 основных принципов Flat дизайна

Вот примеры элементов, определяющих стиль плоского дизайна.

Мы уходим от реалий дизайна web 2. 0 в виде закруглённых форм элементов со всевозможными эффектами — 3D, тени, блики и отражения, градиенты, тиснения. Словом всего, что создает глубину и объем. Большие, яркие элементы управления, глянец, применение текстур и прочие подобные способы проявления оригинальности уступают дорогу простому, двумерному представлению визуальных объектов.

Float Design

Заметьте, что это основа построения «плоского» сайта. Простота элементов Flat дизайна, как и сами принципы минимализма усиливают значимость типографики. Текстовым контентом возможно в принципе заменить часть тяжелой графики / изображений, а зачастую типография становится основным элементом дизайна. Раз стиль флэт минималистичен, то и характер шрифтов нужно согласовывать с общей схемой, стилем и композицией. Например, верхний регистр часто используют для элементов навигации или надписей.

Coderwall

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

Minimal Monkey

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

Beard Design

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

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

Примеры шаблонов сайтов с плоским дизайном Flat UI

Примеры сайтов в стиле Flat-дизайна

Identity

83 Design Collective

Frunatic

The Umbrella Group

 Slcl Foundation

My Felt

Behzad

Atlant

Simple as Milk

Weranda Family

Kitchen Sink Studios

Coffee Surfing

Sunny7

Krivaja Homes

Spring Summer

RIT Rochester Institute of Technology

Snow Bird

LEDbow

FlatStyle Перечисление (System.

Определение

Задает внешний вид элемента управления.Specifies the appearance of a control.

В этой статье

public enum class FlatStyle

public enum FlatStyle

 1 netframework-1.1 netframework-2.0 netframework-3.0 netframework-3.5 netframework-4.0 netframework-4.5 netframework-4.5.1 netframework-4.5.2 netframework-4.6 netframework-4.6.1 netframework-4.6.2 netframework-4.7 netframework-4.7.1 netframework-4.7.2 netframework-4.8 ">type FlatStyle = 

Public Enum FlatStyle

Наследование

Поля

Примеры

Ниже приведен пример манифеста, позволяющий приложению поддерживать стили оформления, доступные в Windows XP, если используется платформа .NET Framework версии 1,0.The following is an example of a manifest to allow your application to support the visual styles available in Windows XP if you are using version 1.0 of the .NET Framework. Манифест можно добавить в приложение как ресурс или как отдельный текстовый файл.The manifest can be added to your application as a resource or as a stand-alone text file. Файл манифеста находится в том же каталоге, что и исполняемый файл, а имя текстового файла должно быть полным именем исполняемого файла с дополнительным расширением MANIFEST.The manifest file resides in the same directory as the executable file, and the name of the text file must be the complete name of the executable file with an additional file name extension of.manifest. Например, файл манифеста для MyApp.exe будет MyApp.exe. manifest.For example, the manifest file for MyApp.exe would be MyApp.exe.manifest. В этом примере предполагается, что FlatStyle свойства элементов управления в приложении установлены в значение System.This example assumes that the FlatStyle properties of the controls in your application are set to System.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>  
 <assembly xmlns="urn:schemas-microsoft-com:asm.v1" manifestVersion="1.0">  
 <assemblyIdentity  
     version="1.0.0.0"  
     processorArchitecture="X86"  
     name="CompanyName. ProductName.YourApplication"  
     type="win32"  
 />  
 <description>Your application description here.</description>  
 <dependency>  
     <dependentAssembly>  
         <assemblyIdentity  
             type="win32"  
             name="Microsoft.Windows.Common-Controls"  
             version="6.0.0.0"  
             processorArchitecture="X86"  
             publicKeyToken="6595b64144ccf1df"  
             language="*"  
         />  
     </dependentAssembly>  
 </dependency>  
 </assembly>  

Комментарии

Это перечисление используется такими элементами ButtonBase.FlatStyle , как, GroupBox.FlatStyle и Label.FlatStyle .This enumeration is used by members such as ButtonBase.FlatStyle, GroupBox.FlatStyle, and Label.FlatStyle.

В случае кнопки стиль всплывающего окна это перечисление управляет поведением и внешним видом.In the case of the Popup style button, this enumeration controls some behavior as well as appearance. Элемент управления стиля Popup изначально отображается плоским, пока указатель мыши не будет перемещен над ним.The Popup style control initially appears Flat until the mouse pointer moves over it. Когда указатель мыши перемещается над элементом управления Popup, он отображается как стандартный элемент управления стиля, пока указатель мыши не будет перемещен снова.When the mouse pointer moves over the Popup control, it appears as a Standard style control until the mouse pointer is moved off of it again.

Если используется стиль системы, внешний вид элемента управления определяется операционной системой пользователя, и следующие значения свойств будут игнорироваться: Control.BackgroundImage , ImageAlign , Image ,, ImageIndex ImageList и TextAlign .If the System style is used, the appearance of the control is determined by the user’s operating system and the following property values will be ignored: Control.BackgroundImage, ImageAlign, Image, ImageIndex, ImageList, and TextAlign. Кроме того, Control.BackColor свойство будет игнорироваться для элементов управления «Кнопка».In addition, the Control.BackColor property will be ignored for button controls. Если поддерживается, пользователи могут изменять внешний вид элементов управления, настраивая параметры внешнего вида их операционной системы.If supported, users can change the appearance of controls by adjusting the appearance settings of their operating system.

Примечание

Если FlatStyle RadioButton для свойства CheckBox классов и задано значение System , элемент управления рисуется операционной системой пользователя, а выравнивание проверки основывается на CheckAlign ButtonBase.TextAlign значениях свойств и.When the FlatStyle property of the RadioButton and CheckBox classes is set to System, the control is drawn by the user’s operating system and the check alignment is based upon the CheckAlign and ButtonBase.TextAlign property values. CheckAlignЗначение свойства не изменяется, но внешний вид элемента управления может быть затронуто. The CheckAlign property value is not changed, but the appearance of the control can be affected. Флажок выравнивается по левому или правому краю элемента управления (выравнивание влево или по центру отображается по левому краю, право остается неизменным) и выравнивается по вертикали так же, как и текст описания.The check box is horizontally aligned with either the left or right edge of the control (a left or center alignment appears left aligned, right remains unchanged), and vertically aligned the same as the descriptive text. Например, если имеется CheckBox элемент управления со CheckAlign значением свойства ContentAlignment.MiddleCenter и TextAlign значением свойства ContentAlignment.TopRight , а FlatStyle для свойства задано значение System , выравнивание флажка будет выглядеть так, чтобы ContentAlignment.TopLeft Выравнивание текста не изменилось.For example, if you have a CheckBox control with a CheckAlign property value of ContentAlignment. MiddleCenter and a TextAlign property value of ContentAlignment.TopRight, and the FlatStyle property value is set to System, the check box alignment will appear to be ContentAlignment.TopLeft while the text alignment remains unchanged.

Внимание!

Установка FlatStyle свойства в системе не рекомендуется, если необходимо отобразить изображение на элементе управления, отобразить изображение в качестве фона элемента управления или выполнить точное выравнивание текста.Setting the FlatStyle property to System is not advisable if you need to display an image on a control, display an image as a control’s background, or perform precise text alignment.

Применяется к

См. также раздел

Что такое Flat Design и для чего это нужно?

Вы здесь: Главная — Что такое Flat Design и для чего это нужно?

Если зайти на практически любой сайт, то можно заметить, что многие из них создаются в стиле flat. Современные сайты делают именно на основе идеи Flat Design. Это модно, креативно, современно и очень неплохо смотрится. Особенно хорошо в таком стиле выглядит landing page, в последнее время «лендинги» делаются именно во flat design. Но зачем такой стиль нужен на других ресурсах, и нужен ли вообще? Как использовать этот дизайн, как создавать под него сайты? Об этом мы сейчас и поговорим.

Что это и для чего?

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

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

Принципы Flat Design’a. Простота

Про этот принцип мы уже успели сказать кое-что, но забыли упомянуть, что это главный принцип Flat дизайна. Но, это не совсем принцип, это — идея всего flat стиля. Главная мысль, заключающаяся в том, чтобы пользователь обращал своё внимание на контент, а не на разные эффекты. Чистота и минималистичность — визитная карточка Flat дизайна.

Цвет

Важнейшую роль во Flat Design играет цвет. В этом стиле он должен быть ярким и насыщенным. Никто не сможет ограничить Вас в подборе цветов, во flat нет никаких ограничений в этом плане, всё зависит только от Вас и ваших идей! То, что Вы изображаете, о чём пишете и думаете, это всё должно отразиться и в цветах, вот что подразумевает цвет во flat дизайне.

Тонкость в работе со шрифтами

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

Чистота

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

Итоги

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

Оставляйте свои отзывы и вопросы в комментариях!

• Создано 27. 09.2017 08:00:00
• Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov. ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

графические принципы и визуальная форма – тема научной статьи по искусствоведению читайте бесплатно текст научно-исследовательской работы в электронной библиотеке КиберЛенинка

СОВРЕМЕННОЕ СОСТОЯНИЕ ЖУРНАЛИСТИКИ

УДК 7.036

Е. В. Васильева

Санкт-Петербургский государственный университет, Санкт-Петербург

Ж. С. Гарифуллина (Аристова)

Санкт-Петербургский государственный университет, Санкт-Петербург

FLAT-DESIGN И СИСТЕМА ИНТЕРНАЦИОНАЛЬНОГО СТИЛЯ: ГРАФИЧЕСКИЕ ПРИНЦИПЫ И ВИЗ УАЛЬНАЯ ФОРМА

Flat-design (англ. «плоский дизайн») — одно из важнейших направлений современной графики, которое формирует основу современной визуальной системы. Он является одной из наиболее устойчивых художественных структур и обнаруживает сходство с графическими принципами интернационального стиля. Цель данного исследования — рассмотреть основные принципы «плоского дизайна» — одного из наиболее влиятельных направлений современной компьютерной графики и провести параллель между flat-design и важнейшими художественными стратегиями XX века. Авторы обращают внимание на сходство принципов flat-design и так называемого «Интернационального стиля», обнаружившего себя в архитектуре, дизайне и графике в 1930-е -1960-е годы. Авторы полагают, что устойчивость и востребованность системы flat-design может быть связана с ее последовательным обращением к инструментарию «Интернационального стиля», который может рассматриваться как нормативный элемент для современного дизайна. Обнаруживая общее начало с такими явлениями как интернациональный графический стиль, flat-design выступает как одно из наиболее влиятельных направлений в современной визуальной системе.

Ключевые слова: flat-design, плоский дизайн, интернациональный стиль, швейцарский стиль, Баухаус, графический дизайн.

Художественная система «Интернационального стиля» получила свое распространение в 1920-е годы [8. С. 364] и сформировалась как законченное направление в середине 1950-х годов [4. С. 72]. Интернациональная форма дала о себе знать в разных странах и разных направлениях искусства, став одним из наиболее заметных и влиятельных художественных течений ХХ века. Вплоть до настоящего момента, несмотря на многообразие художественных течений и школ, «интернациональный стиль» остается наиболее заметной визуальной системой. Развиваясь одновременно в разных странах, интернациональный стиль сформировался как единая традиция, фактически определив стандарт и норматив современных дизайна и архитектуры. «Интернациональный стиль» подразумевал сложение единого художественного языка и концептуальных принципов [4. С. 74], где важное значение имела не только форма, но и протяженность, пространство [16. С. 27]. Инструментарий, связанный с регламентацией формы, линии и объема, стал важным приемом в идеологии «интернационального стиля» в архитектуре, дизайне и графике.

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

Другой момент — тотальное распространение стиля с точки зрения его социальной стратиграфии. «Интернациональный стиль» очерчивает крайне широкий горизонт, от корпоративной архитектуры (Сигрем Билдинг, Мис ван дер Роэ, 1958), строений официозного толка (Дворец «Финляндия», Алвар Аалто, 1962 — 1975) или градостроительных проектов (Чандигарх, Ле Корбюзье,

1951-1962) до частной архитектуры (Дом-водопад, Фрэнк Ллойд Райт, 1939) и малых форм. В системе интернационального стиля принципиально важно, что он полностью охватывает систему и формирует сквозную стратегию, образуя, таким образом, тотальный прецедент. «Интернациональный стиль» становится одной из центральных синтетических систем [1. С. 362].

Отталкиваясь от архитектурной формы, «интернациональный стиль» объединяет всю стратиграфию архитектуры и дизайна. Понимая, что «интернациональный стиль» сформировался как архитектурный прецедент [4. С. 75] и развивался на его базе, мы, тем не менее, можем применить это обозначение и к другим формам дизайна — в частности, к дизайну графическому [18. С. 54]. Возникнув в начале 1930-х годов в качестве названия выставки в Музее современного искусства в Нью-Йорке (знаменитая экспозиция «Современная архитектура: интернациональная выставка») [17], это явление получило устойчивую основу не только в проектировании и строительстве, но и в графике. Интернациональная графическая система оказалась столь же целостной и устойчивой формой как и строительная практика.

Применительно к графической системе понятие «интернационального стиля» представляется гораздо более спорным и аморфным. Его возможные обозначения — «Интернациональный типографический стиль», «Интернациональный графический стиль» или «Швейцарский стиль» [18. С. 12] лишь подчеркивают картину неопределенности понятия, которая обозначает единую доктрину, но не обладает безусловными рамками [8. С. 365]. Если в архитектуре термин был напрямую связан с последовательной программой формообразования, которая так или иначе сформировалась в рамках выставки «Современная архитектура» [22], то в графике границы этого феномена оказались более умозрительным — не было ни манифестов, ни установочных выставок, ни формообразующих программных текстов. Интернациональный графический дизайн стал прямым переносом архитектурного термина и подчеркнул общую ситуацию преобразования формы и видения [8. С. 367]. Интернациональная графика была тесно связана с визуальными принципами русского конструктивизма [5. С. 115], Баухауса и «Новой типографики» [19. С. 27] — таким образом, ее можно соотнести с развитием широкого, и, одновременно, фокусно очерченного направления. «Интернациональный стиль» в графике в значительно большей степени, нежели в архитектуре, был связан с деятельностью отдельно взятой национальной школы — речь о швейцарском графическом дизайне [20. С. 326]. И, по большому счету, интернациональный графический стиль — это, прежде всего, работы швейцарских мастеров: Макса Билла, Отля Айхера, Армина Хофмана, Йозефа Мюллер-Брокмана.

«Интернациональный стиль» в графическом дизайне — это набор признаков, не регламентированных на уровне программы или манифеста, но, в то же время, абсолютно узнаваемых: лаконичный шрифт, сплошная заливка, плоскостное изображение. В этом смысле, «интернациональная графика» выглядит практической версией художественной системы, положенной в основу модернизма [4. С. 74]. Принципы, сформировавшие основу графического «Интернационального стиля», скорее аналитического толка — графический интернациональный стиль подразумевал не только использование фиксированных приемов, сколько поддержание методов регламентации информации и визуальной формы [3. С. 291]. Графический «Интернациональный стиль» подразумевал создание структуры.

Отчетливые границы изображения, упорядоченность и ясность можно считать основными принципами интернациональной графики [20. С. 327]. Вплоть до настоящего момента, в ситуации, когда условия системы требуют реализации практических задач, связанных с обретением ясности, точности, системности и устойчивого регламента, интернациональный графический стиль по-прежнему остается универсальной художественной формой. На протяжении второй половины XX века необходимость решения функциональных задач приводила к реанимации форм графического «интернационального стиля» — с этим отчасти связана устойчивость его форм. «Интернациональный стиль» оказался тем нормативным графическим языком, который был незаменим и в решении практических задач, и в достижении идеологического абсолюта [4. С. 79]. Формы «интернационального стиля» оказались универсальной графической программой, преодолевшей условные хронологические рамки эпохи (1950-е — 1960-е) [13. С. 176], и оказались устойчивыми к нововведениям и постмодернистской стратегии [3. С. 295], и практики «Новой волны» [25].

Формат flat-design, несмотря на свою относительную новизну и мнимую оторванность от традиции классической плакатной или печатной графики, последовательно вобрал в себя многие

элементы «интернационального стиля». Как правило, устойчивость и стабильность flat-design принято объяснять его функциональными преимуществами [12]: он прост, адаптивен, понятен и на стадии создания и в процессе восприятия, легко воспроизводим, он представляет собой стабильный продукт с практической точки зрения. Сильная сторона flat-design, в частности, заключалась в его способности преодолеть графическую сложность скевоморфизма [14].

Flat-design основан на двухмерном изображении и исключает трехмерные элементы. Обращаясь к феномену «плоского дизайна» можно обратить внимание на его визуальный бэкграунд, который связывает flat-design с фундаментальными графическими направлениями и школами ХХ века. Таким образом, flat-design функционирует в контексте ведущих графических систем. Визуальная стратегия «плоского дизайна» сближает его с традицией Баухауза [11. С. 29] и графической практикой интернационального стиля [18]. Это позволяет рассматривать flat-design в ряду ведущих изобразительных практик ХХ столетия. Визуальная простота определяет функциональные характеристики — ясность, удобство в прочтении и пользовании сделали flat-design важной инструментальной единицей современной веб-системы.

В то же время, эта практическая составляющая представляется не единственным основанием широкого, последовательного и систематического распространения flat-design. Его графическая система последовательно использует базовые элементы «интернационального стиля». Фактически, flat-design стал обращением к визуальным стандартам, которые формировали облик графического дизайна на протяжении всего XX века. Flat-design, по сути, использовал понятную и укоренившуюся визуальную традицию, усвоенную на уровне норматива графической программы.

Flat-design воспринял систему, которая представляла собой (и отчасти представляет до сих пор) многоуровневую структуру, охватывающую дизайн-пространство от глобальных проектов до повседневной практики. В рамках flat-design был акцептирован последовательный набор приемов, характерных для графического «интернационального стиля»: простые формы, геометрическая основа, плоскостное изображение, локальный интенсивный цвет, шрифт без засечек, свободная, но структурная организация материала, художественная и смысловая осознанность пустого пространства [16. С. 127]. В этом также заключается одна из особенностей устойчивости flat-design как метода — он сохранил идеологическую основу «интернационального стиля», связанную с регламентацией материала. Как и «интернациональный стиль», flat-design обеспечил не только художественный акцент в представлении материала, но и его ясность. Эта понятность, структурность и целостность в изображении той или иной темы, унаследованные от «интернационального стиля», стали основным качеством и важным преимуществом flat-design.

В ситуации с «плоским дизайном» речь, по сути, идет о формировании нового стандарта — как информационного, так и визуального — стандарта, основанного на идеологии и традиции «интернационального стиля». Flat-design коррелирует с системой интернационального графического стиля, который и в формате компьютерной графики утверждается как доминирующая система.

Визуальная форма и концепция flat-design заняла сходную нишу — и с точки зрения универсализма стиля, и в смысле его подчеркнутой ясности, когда элементы визуальной структуры складываются из простейших компонентов. Этот феномен, в частности, хорошо заметен на примере музейных сайтов. Минималистический «рубленный» шрифт (сайт музея Виктории и Альберта, Лондон), строгая модульная сетка (сайт музея Метрополитен, Нью-Йорк), лаконичный формат (сайт музеев Тейт, Лондон-Ливерпуль), геометрические элементы, белый фон (сайт Музея Современного Искусства, Нью-Йорк), ограниченная и четко структурированная навигационная шкала (музей Эрмитаж, Санкт-Петербург) — все это сближает конструкцию flat-design с идеологией интернационального стиля [10].

Программный flat-design построен на сочетании нескольких принципов — в частности — схематичная типографика, блочная структура и акцент на изображениях. Последнее обстоятельство обращает на себя особое внимание как один из формативных элементов современной визуальной системы в целом. В 1970-е годы сразу несколько исследователей, среди которых можно было бы назвать Элвина Тоффлера [7], Жана-Франсуа Лиотара [6] и Жана Бодрийяра [2] обратили внимание на важность символического в современном сознании. Практически одновременно с этим произошло осознание важности сферы изображения, известное как «Визуальный поворот» [21. С. 19]. Виртуальная система языка, которая на протяжении долгого времени оставалась формообразующей системой, на протяжении ХХ столетия испытала заметное давление со стороны

изобразительной среды. Изображение, фотография и кинематографическая система обнаружили тенденцию к созданию собственного нарративного инструментария и среды. Феномен нескольких последних лет — не только устойчивое формирование виртуальной системы, но и преобразование формата взаимодействия с ней [1. С. 365].

Одной из причин развития flat-design можно считать массовое распространение мобильных приложений, формат и функциональная система которых предполагает удобство простых форм. На международной конференции Museums and the Web [15] в 2013 году в докладе, подготовленном Питером Гордельсом и рассматривающем систему сайтов Рейксмузеум было высказано наблюдение, что приложения ориентированы на приватный формат и подразумевают простоту использования. Часто в приложениях всего несколько функций, контент располагается максимально крупно, его можно легко увеличивать. Особенности мобильных приложений часто продиктованы самими устройствами — смартфонами и специфической системой их организации. Эта специфика широко использована в современном дизайне: сайты становятся адаптивными — ими возможно пользоваться как на компьютерах, так и на других носителях.

Все вышеперечисленные особенности отражены и использованы, в частности, в процессе строительства музейных сайтов. Являясь одним из примеров информационных сайтов массового использования, они подразумевают решение как художественных, так и практических задач. В качестве примера можно привести такие структуры как сайт Музея Прадо (Мадрид), сайт Музея Виктории и Альберта (Лондон), сайт Музея Метрополитен (Нью-Йорк), сайт Музея Современного Искусства (Нью-Йорк), сайт Музея д’Орсэ (Париж), сайт Музея Эрмитаж (Санкт-Петербург). На конференции Museums and the Web в 2016 году [25] представители музея Прадо пояснили, что, разрабатывая новый дизайн музейного сайта, они стремились к более дружелюбному пользовательскому интерфейсу и навигации. Сотрудники музея и разработчики отметили, что основным достоянием музея остается коллекция, поэтому все внимание сайта сконцентрировано на экспонатах. Инструментарий «плоского дизайна» выдвигает содержание сайта и коллекцию музея на передний план. Сайт приобретает статус виртуальной экспозиции, при этом вбирая в себя функционал таких элементов как буклет, визитная карточка и журнал.

В то же время, активное использование flat-design ведет к унификации интернет-пространства и к ослаблению идентичности отдельных сайтов. Это обстоятельство ослабляет персонификацию различных институций, что имеет под собой негативные последствия — в частности, девальвация позиций графической идентичности в целом. Подобная ситуация отчасти связана формой «плоского дизайна», который на протяжении нескольких последних лет становится объектом последовательной критики. Минималистичные сайты оказываются похожими друг на друга, теряя собственный характер и собственное лицо. Подобная ситуация может быть воспринята и как одно из обстоятельств развития компьютерного дизайна, и как феномен актуальной художественной и социальных систем, где персонификация и фигура индивида утрачивают свои позиции и значение.

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

Список литературы

1. Аристова, Ж. Принципы интернационального стиля в системе Flat-design: графическая форма и визуальные условия образовательных и музейных web-систем [Текст] / Ж. Аристова, Е. Васильева // Искусство и художественное образование в контексте межкультурного взаимодействия Материалы VI Международной научно-практической конференции. — 2017. — С. 362-367.

2. Бодрийяр, Ж. Символический обмен и смерть [Текст] / Ж. Бодрийяр // Символический обмен и смерть. — М.: «Добросвет», 2000. — 387 с.

3. Бу И. Система микрографики и визуальная практика «Новой волны»: к определению принципов современного дизайна [Текст] / Бу И // Обсерватория культуры. — 2018. — Т. 15. — № 3. -С.290-297.

4. Васильева, Е. Идеальное и утилитарное в системе интернационального стиля: предмет и объект в концепции дизайна ХХ века [Текст] / Е. Васильева // Международный журнал исследований культуры. — № 4 (25). — 2016. — С. 72-80.

5. Ли, М. Феномен «Детского конструктивизма» и советская книжная графика 1920-х гг. [Текст] / М. Ли // Вестник Восточно-Сибирского государственного института культуры. — 2018. -№ 1 (5). — С. 114-123.

6. Лиотар, Ж-Ф. Состояние постмодерна [Текст] / Ж-Ф. Лиотар // Состояние постмодерна. -СПб.: Алетейя, 1998. — 160 с.

7. Тоффлер, Э. Третья волна [Текст] / Э. Тоффлер // Третья волна. — М.: АСТ, 2004. — 800 с.

8. Фремптон, К. Международный стиль: тема и вариации, 1925-1965 [Текст] / К. Фремптон // Современная архитектура: критический взгляд на историю развития. — М.: Стройиздат, 1990. -С. 361-375.

9. Хоменко, О. Семиотика дизайна: дизайн как средство коммуникации [Текст] / О. Хоменко // Знак: проблемное поле медиаобразрвания. — 2018. — № 1. — С. 184-193.

10. Asghar, T. The True History of Flat Design [Электронный ресурс] / T. Asghar // Web Design Ai. — URL: http://www.webdesignai.com/flat-design-history/ (дата обращения: 17.04.2018).

11. Baumann, K. Bauhaus Dessau: Architecture Design Concept [Текст] / K. Baumann // Bauhaus Dessau: Architecture Design Concept. — Berlin: JOVIS Verlag, 2007. — 144 p.

12. Clum, L. A Look at Flat Design and Why It’s Significant [Электронный ресурс] / L. Clum // UX Magazine. — URL: http://uxmag.com/articles/a-look-at-flat-design-and-why-its-significant (дата обращения: 17.04.2018).

13. Eskilson, S. Graphic Design A New History [Текст] / Eskilson S. // Graphic Design A New History. — New Haven: Yale University Press, 2012. — 464 p.

14. Gessler, N. Skeuomorphs and Cultural Algorithms [Электронный ресурс] / N. Gessler // UCLA Anthropology. — URL: https://web.archive.org/web/20120624065316/http://www.skeuomorph.com/ (дата обращения: 17.04.2018).

15. Gorgels, P. Rijksstudio: Make Your Own Masterpiece [Электронный ресурс] / P. Gorgels // MW2013: Museums and the Web 2013. — URL: http://mw2013.museumsandtheweb.com/paper/ rijksstudio-make-your-own-masterpiece/ (дата обращения: 17.04.2018).

16. Gössel, G. Functional Architecture. Funktionale Architektur. Le Style International, 1925-1940 [Текст] / Gössel G. // Functional Architecture. Funktionale Architektur. Le Style International, 19251940. — Berlin: Taschen, 1990. — 399 p.

17. Hitchcock, H-R The International Style [Текст] / H-R. Hitchcock; P. Johnson // The International Style. — New York: W. W. Norton & Company, 1997. — 272 p.

18. Hollis, R. Swiss Graphic Design: The Origins and Growth of an International Style, 1920-1965 [Текст] / R. Hollis // Swiss Graphic Design: The Origins and Growth of an International Style, 19201965. — New Haven: Yale University Press, 2006. — 272 p.

19. Meer, J. Neuer Blick auf die Neue Typographie. Die Rezeption der Avantgarde in der Fachwelt der 1920er Jahre [Текст] / J. Meer // Neuer Blick auf die Neue Typographie. Die Rezeption der Avantgarde in der Fachwelt der 1920er Jahre. — Bielefeld: Transcript, 2015. — 382 p.

20. Meggs, P. and Purvis, A. Meggs’ History of Graphic Design [Текст] / P. Meggs, A. Purvis, A. Meggs // History of Graphic Design. — Hoboken: John Wiley & Sons, 2006. — 624 p.

21. Mitchell, W. J. T. Picture Theory: Essays on Verbal and Visual Representation [Текст] / W. J. T. Mitchell // Picture Theory: Essays on Verbal and Visual Representation. — Mitchell Chicago, 1994. — 462 p.

22. Modern architecture: international exhibition. Catalogue [Текст] // Modern architecture: international exhibition. — New York: Museum of Modern Art, 1932. — 204 p.

23. Pantoja, J. The new Prado Museum website: A (semantic) challenge [Электронный ресурс] / J. Pantoja, J. Docampo, A. Martin, R. Maturana and C. Navalon // MW2016: Museums and the Web 2016. — URL: http://mw2016.museumsandtheweb.com/proposal/the-new-prado-museum-website-a-semantic-challenge/ (дата обращения: 17.04.2018).

24. Riley, T. The International Style: Exhibition 15 and The Museum of Modern Art [Текст] / T. Riley // The International Style: Exhibition 15 and The Museum of Modern Art. — New York: Rizzoli International, 1992. — 224 p.

25. Weingart, W. My Way to Typography [Текст] / W. Weingart. — Baden: Lars Müller Publishers, 2000. — 520 p.

FLAT-DESIGN AND THE SYSTEM OF INTERNATIONAL STYLE: GRAPHIC PRINCIPLES AND VISUAL FORM

Vasilyeva E. V., St. Petersburg State University, St. Petersburg, ev100500@gmail.com Garifullina (Aristova) Zh. S., St. Petersburg State University, St. Petersburg, bunnyspb2@gmail.com

Flat-design is one of the most important areas of modern graphics, which creates the basis of modern visual system. It is one of the most common and stable art structures and it reveals similarities with the graphic principles of the international style — both in design and architecture. The purpose of this study is to examine the basic principles of «flat design» — one of the most important direction in modern graphics. The article draw a parallel between flat-design and one of the most important art strategy of the 20th century — the international style. The authors mark the similarity of the principles of flat-design and the so-called «International style», which reveals itself in architecture, design and graphics in the 1930s-1960s. The authors suppose that the relevance of the flat-design can be connected with its appeal to the «International Style», that could be recognized as a normative phenomena for contemporary design. Discovering a common roots with such phenomena as the «International graphic style», flat-design functions as one of the most influential trends in the modern visual system.

Keywords: flat-design, International style, Swiss style, Bauhaus, graphic design.

References

1. Aristova, Zh. and Vasil’eva, E. (2017) Principy internacional’nogo stilja v sisteme Flat-design: graficheskaja forma i vizual’nye uslovija obrazovatel’nyh i muzejnyh web-sistem [=Principles of international style in the Flat-design system: graphic form and visual conditions of educational and museum web-systems], in: Iskusstvo i hudozhestvennoe obrazovanie v kontekste mezhkul’turnogo vzaimodejstvija Materialy VI Mezhdunarodnoj nauchno-prakticheskoj konferencii [=Art and artistic education in the context of intercultural interaction. Materials of the VI International Scientific and Practical Conference], pp. 362-367. (In Russ.).

2. Bodrijjar, Zh. (2000) Simvolicheskij obmen i smert’ [=Symbolic exchange and death], Dobrosvet, Moscow, 387 p. (In Russ.).

3. Bu Yi. (2018) Sistema mikrografiki i vizual’naja praktika «Novoj volny»: k opredeleniju principov sovremennogo dizajna [=Micrographics system and visual practice of the «New Wave»: to the definition of the principles of modern design], in: Observatorija kul’tury [=Observatory of Culture], No. 3, pp. 290-297. (In Russ.).

4. Vasil’eva, E. (2016) Ideal’noe i utilitarnoe v sisteme internacional’nogo stilja: predmet i ob’ekt v koncepcii dizajna XX veka [=Ideal and utilitarian in the system of international style: the subject and object in the design concept of the XX century], in: Mezhdunarodnyj zhurnal issledovanij kul ‘tury [=International Journal of Cultural Research], No. 4 (25), pp. 72-80. (In Russ.).

5. Li, M. (2018) Fenomen «Detskogo konstruktivizma» i sovetskaja knizhnaja grafika 1920-h gg.[=The phenomenon of Children’s «Constructivism» and the Soviet book graphics of the 1920s.], in: Vestnik Vostochno-Sibirskogo gosudarstvennogo instituta kul tury [=Bulletin of the East Siberian State Institute of Culture], No. 1 (5), pp. 114-123. (In Russ.).

6. Liotar, Zh-F. (1998) Sostojaniepostmoderna [=State of Postmodern]. Aletejja, Saint Petersburg, 160 p. (In Russ.).

7. Toffler, Je. (2004) Tret’ja volna [=The Third Wave], AST, Moscow, 800 p. (In Russ.).

8. Frempton, K. (1990) Mezhdunarodnyj stil’: tema i variacii, 1925-1965 [=International style: theme and variations], in: Frempton, K. Sovremennaja arhitektura: kriticheskij vzgljad na istoriju razvitija [=Modern architecture: a critical look at the history of development]. Strojizdat, Moscow, pp. 361-375. (In Russ.).

9. Homenko, O. (2018) Semiotika dizajna: dizajn kak sredstvo kommunikacii [=Semiotics of design: design as a communication tool], in: Znak: problemnoe pole mediaobrazrvanija [=Sign: the problem field of media], No. 1, pp. 184-193. (In Russ.).

10. Asghar, T. The True History of Flat Design, in: Web Design Ai, available at: http://www. webdesignai.com/flat-design-history/, accessed 17.04.2018.

11. Baumann, K. (2007) Bauhaus Dessau: Architecture Design Concept. JOVIS Verlag, Berlin, 144 p.

12. Clum, L. A Look at Flat Design and Why It’s Significant, in: UXMagazine, available at: http:// uxmag.com/articles/a-look-at-flat-design-and-why-its-significant, accessed 17.04.2018.

13. Eskilson, S. (2012) Graphic Design A New History. Yale University Press, New Haven, 464 p.

14. Gessler, N. Skeuomorphs and Cultural Algorithms, in: UCLA Anthropology, available at: https:// web.archive.org/web/20120624065316/http://www.skeuomorph.com/, accessed 17.04.2018.

15. Gorgels, P. Rijksstudio: Make Your Own Masterpiece, in: MW2013: Museums and the Web 2013, available at: http://mw2013.museumsandtheweb.com/paper/rijksstudio-make-your-own-masterpiece/, accessed 17.04.2018.

16. Gössel, G. (1990) Functional Architecture. Funktionale Architektur. Le Style International, 19251940. Taschen, Berlin, 399 p.

17. Hitchcock, H-R. and Johnson, P. (1997) The International Style. W. W. Norton & Company, New York, 272 p.

18. Hollis, R. (2006) Swiss Graphic Design: The Origins and Growth of an International Style, 19201965. Yale University Press, New Haven, 272 p.

19. Meer, J. (2015) Neuer Blick auf die Neue Typographie. Die Rezeption der Avantgarde in der Fachwelt der 1920er Jahre. Transcript, Bielefeld, 382 p.

20. Meggs, P. and Purvis, A. (2006)Meggs’History of Graphic Design. John Wiley & Sons, Hoboken, 624 p.

21. Mitchell, W. J. T. (1994) Picture Theory: Essays on Verbal and Visual Representation. University of Chicago Press, Chicago, 462 p.

22. Modern architecture: international exhibition (1932). Catalogue. Museum of Modern Art, New York, 204 p.

23. Pantoja, J., Docampo, J., Martin, A., Maturana, R. and Navalon, C. The new Prado Museum website: A (semantic) challenge, in: MW2016: Museums and the Web 2016, available at: http://mw2016. museumsandtheweb.com/proposal/the-new-prado-museum-website-a-semantic-challenge/, accessed 17.04.2018.

24. Riley, T. (1992) The International Style: Exhibition 15 and The Museum of Modern Art. Rizzoli International, New York, 224 p.

25. Weingart, W. (2000) My Way to Typography. Lars Müller Publishers, Baden, 520 p.

Васильева Екатерина Викторовна — кандидат искусствоведения, доцент факультета Искусств, Санкт-Петербургский государственный университет, Санкт-Петербург.

ev100500@gmail.com

Гарифуллина (Аристова) Жанна Сергеевна — магистрант факультета Искусств, Санкт-Петербургский государственный университет, Санкт-Петербург.

bunnyspb2@gmail.com

Обзор 10 современных стилей продуктовых иллюстраций — Дизайн на vc.ru

{«id»:137484,»url»:»https:\/\/vc.ru\/design\/137484-obzor-10-sovremennyh-stiley-produktovyh-illyustraciy»,»title»:»\u041e\u0431\u0437\u043e\u0440 10 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439″,»services»:{«facebook»:{«url»:»https:\/\/www.facebook.com\/sharer\/sharer.php?u=https:\/\/vc.ru\/design\/137484-obzor-10-sovremennyh-stiley-produktovyh-illyustraciy»,»short_name»:»FB»,»title»:»Facebook»,»width»:600,»height»:450},»vkontakte»:{«url»:»https:\/\/vk.com\/share.php?url=https:\/\/vc.ru\/design\/137484-obzor-10-sovremennyh-stiley-produktovyh-illyustraciy&title=\u041e\u0431\u0437\u043e\u0440 10 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439″,»short_name»:»VK»,»title»:»\u0412\u041a\u043e\u043d\u0442\u0430\u043a\u0442\u0435″,»width»:600,»height»:450},»twitter»:{«url»:»https:\/\/twitter.com\/intent\/tweet?url=https:\/\/vc.ru\/design\/137484-obzor-10-sovremennyh-stiley-produktovyh-illyustraciy&text=\u041e\u0431\u0437\u043e\u0440 10 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439″,»short_name»:»TW»,»title»:»Twitter»,»width»:600,»height»:450},»telegram»:{«url»:»tg:\/\/msg_url?url=https:\/\/vc.ru\/design\/137484-obzor-10-sovremennyh-stiley-produktovyh-illyustraciy&text=\u041e\u0431\u0437\u043e\u0440 10 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439″,»short_name»:»TG»,»title»:»Telegram»,»width»:600,»height»:450},»odnoklassniki»:{«url»:»http:\/\/connect.ok.ru\/dk?st.cmd=WidgetSharePreview&service=odnoklassniki&st.shareUrl=https:\/\/vc.ru\/design\/137484-obzor-10-sovremennyh-stiley-produktovyh-illyustraciy»,»short_name»:»OK»,»title»:»\u041e\u0434\u043d\u043e\u043a\u043b\u0430\u0441\u0441\u043d\u0438\u043a\u0438″,»width»:600,»height»:450},»email»:{«url»:»mailto:?subject=\u041e\u0431\u0437\u043e\u0440 10 \u0441\u043e\u0432\u0440\u0435\u043c\u0435\u043d\u043d\u044b\u0445 \u0441\u0442\u0438\u043b\u0435\u0439 \u043f\u0440\u043e\u0434\u0443\u043a\u0442\u043e\u0432\u044b\u0445 \u0438\u043b\u043b\u044e\u0441\u0442\u0440\u0430\u0446\u0438\u0439&body=https:\/\/vc.ru\/design\/137484-obzor-10-sovremennyh-stiley-produktovyh-illyustraciy»,»short_name»:»Email»,»title»:»\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u043d\u0430 \u043f\u043e\u0447\u0442\u0443″,»width»:600,»height»:450}},»isFavorited»:false}

2927 просмотров

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

Уникальные иллюстрации помогают брендам выделиться из толпы.

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

Ещё больше статей о дизайне, а также полезные сервисы можно найти на ux-journal.ru

В этой статье вас ждет путешествие по десяти уникальным стилям иллюстраций.

1. Slack

Slack – это инструмент для ускорения коммуникации в распределенной команде. В 2017 году Alice Lee с командой редизайнула Slack. Они также попробовали новый стиль иллюстраций, который был призван сделать бренд еще более дружественным. Slack были одними из первых кто решились на такой шаг.

И главное, команда Slack продолжает экспериментировать и развивать начатое.

2. Dropbox

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

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

Вот здесь вы можете почитать о культуре дизайна в Dropbox: https://dropbox.design/

3. Oscar

Oscar Health — помощник, который помогает получить максимум от свой медицинской страховки. Эту коммуникацию они и вложили в иллюстрации.

Oscar запилили дизайн иллюстрации как на макро-, так и на микроуровне. Например, иконки, для разных страниц сделали на основе того же стиля иллюстрации.

4. Etsy

Etsy – это e-commerce платформа для дистрибуции авторских товаров. В коммуникации у них смелые иллюстрации с забавными персонажами. Хоть иллюстрации у них и не являются основным элементом дизайна, они все равно создают незабываемые впечатления для посетителей сайта.

5. Notion

Notion – это инструмент, который собирает управление вашими повседневными делами в одно приложение. На главной странице они так и говорят: «С Notion Вы получаете одну точку для прокачки всех дел». Собственно с помощью иллюстраций это многократно подчеркивается. Иллюстрации Notion сообщают, что это не просто инструмент, это живое рабочее пространство, объединяющее команды и идеи.

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

6. MailChimp

Mailchimp – из почтового сервиса вырос в платформу для автоматизации digital-маркетинга. Персонаж MailChimp – одна из самых узнаваемых иллюстраций в индустрии продуктового дизайна. Каждый из нас хотя бы раз видел этого дружелюбного шимпанзе в деле.

В 2018 году их команда провела редизайн. Ребята представили новый стиль иллюстраций – плоские иллюстрации.

Одна из заметных особенностей нового стиля MailChimp – использование яркого желтого цвета для привлечения внимания пользователя. В результате, на многих страницах текст ушел на второй план.

MailChimp каждой иллюстрацией теперь намекает: «Уберите всю возню. Попробуйте Mailchimp в работе».

7. Digital Ocean

Digital Ocean провайдер облаков. В их иллюстрациях вы найдете микс двух техник рисования. К примеру, для домашней страницы они используют 3D иллюстрации.

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

8. Shopify

Shopify – это платформа e-commerce для интернет-магазинов и розничных торговых точек. Shopify с помощью образов выстраивает эмоциональные отношения, а не просто деловые.

Meg Robichaud в блоге делится множеством подробностей, как им удалось добиться этого результата (посмотрите ее блог на Medium).

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

9. Intercom

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

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

10. Duolingo

Duolingo – это платформа для изучения иностранных языков. Duo — главный герой сервиса (дружелюбная сова) направляет и мотивирует пользователей, когда они выполняют очередное упражнение. Говорят учащиеся невероятно привязывается к этому совенку.

Что такое плоский дизайн? | Фонд дизайна взаимодействия (IxDF)

С появлением персональных компьютеров скевоморфный дизайн стал важным для ознакомления пользователей, незнакомых с технологиями, с новыми концепциями. Скевоморфизм использует простой подход — он создает реалистичные возможности в пользовательских интерфейсах (UI), которые пользователь может использовать в своей реальной жизни. Таким образом, когда вы удаляете файл — он попадает в корзину на экране. Акт выброса чего-либо — это то, к чему может относиться каждый.

С течением времени скевоморфный дизайн становился все более реалистичным с концепциями, любовно переданными в 3-х измерениях. Многие дизайнеры считали, что такой подход становится все более излишним. Пользователи были лучше знакомы с ИТ, чем когда-либо прежде, и, кроме того, в 3D-мусорном ведре не было ничего, что могло бы добавить какую-то особую ценность по сравнению с 2D-рендерингом того же мусорного ведра.

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

Автор / Правообладатель: crassuscz. Условия авторского права и лицензия: CC BY 3.0

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

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

Краткая история плоского дизайна

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

Хороший пример раннего цифрового плоского дизайна можно найти в злополучном MP3-плеере Microsoft Zune, который был выпущен еще в 2006 году. Интерфейс был чистым и простым, с использованием строчной типографии с крупным шрифтом, силуэтом стилизованный дизайн логотипа и простые монохромные шрифты.

Zune, возможно, больше не с нами, но стиль пользовательского интерфейса продолжился сначала в Windows Phone, а затем и в очень высмеиваемой (хотя и не из-за ее плоского дизайна) операционной системе Windows 8.

Автор / Правообладатель: Bkwparadox. Условия авторского права и лицензия: CC BY-SA 3.0

Zune, возможно, никогда не покорил воображение рынка MP3-плееров, но его наследие живет в плоском дизайне.

В 2013 году Apple присоединилась к партии плоского дизайна, выпустив iOS7, сознательно отказавшись от предыдущих скевоморфных дизайнов.

Джони Айв (руководитель отдела дизайна Apple) сказал; «Когда мы сели в ноябре прошлого года (работать над iOS 7), мы поняли, что люди уже привыкли к прикосновению к стеклу, им не нужны физические кнопки, они понимают преимущества», — говорит Айв.«Так что была невероятная свобода в том, что не нужно было так буквально ссылаться на физический мир. Мы пытались создать менее конкретную среду. У него не было дизайна ».

Разве плоский дизайн не скучен?

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

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

Автор / Правообладатель: alexlasek. Условия авторского права и лицензия: CC BY 3.0

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

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

Что означает плоский дизайн для UI-дизайнеров?

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

Что входит в плоский дизайн?

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

• Яркие контрастные цвета для выделения деталей значков, иллюстраций и т. Д.
• Типографика без засечек крупным и легко читаемым шрифтом, которая дает четкое представление о значке или иллюстрации для
• Четкие, чистые элементы пользовательского интерфейса, которые легко увидеть и легко понять

Это должно объединить визуально согласованный и функциональный дизайн пользовательского интерфейса.

Автор / Правообладатель: dtafalonso. Условия авторского права и лицензия: CC BY 3.0

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

The Take Away

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

Ссылки

Прочтите мнение Джони Айва о плоском дизайне в Cult of Mac здесь — http://www.cultofmac.com/246312/jony-ive-explains-why-he-decided-to-gut-skeuomorphism-out- оф-ios /

Интересное исследование плоского дизайна и скевоморфизма можно найти здесь — http://intuio.at/en/blog/the-truth-about-skeuomorphism-vs-flat-design/

Hero Изображение: Автор / Правообладатель: Pixel Fantasy.Условия авторских прав и лицензия: CC BY-NC-ND 2.0

Почему редакционные иллюстрации выглядят так похожи в наши дни — Quartz

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

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

Вот пример в приложении Quartz:

Другой экземпляр в разделе отзывов New York Times:

На обложке журнала Los Angeles

Журнал On Time:

Недавний экземпляр в Le Monde:

Иллюстрация стиль даже регулярно появляется на обложке The New Yorker:

Обратите внимание, что все эти примеры были сделаны разными иллюстраторами.

Введите слово «иллюстрация» в поиске картинок Google, и вы увидите результаты такого типа.

Quartz

  общедоступный класс перечисления FlatStyle  

  общедоступное перечисление FlatStyle  

  тип FlatStyle =  

  Public Enum FlatStyle  

  
 <сборка xmlns = "urn: schemas-microsoft-com: asm.v1" manifestVersion = "1.0">
 
  Описание вашего приложения здесь.
 <зависимость>
     <зависимая сборка>
         
     
 
 
  

После этого последовательность событий была естественной — дизайн был расширен до Windows Phone 7 в 2010 году (и назывался «Metro») и был настолько влиятельным, что даже Apple заменила свой скевоморфный дизайн и полностью утратила свою актуальность в iOS7. .Поговорим о смене формы.

Один из последних обновлений включает ребрендинг Google и введение плоского логотипа 2015 года. Однако их услуги далеко не плоские и теперь требуют материального дизайна.

Материальный дизайн (Google)

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

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