Icons flat design: Flat design Icons & Symbols

Разное

Содержание

Hammer Flat Design Icons Vector Pack Вектор для бесплатного скачивания

дом amount of material голубой

Сложные технологии синий

кисть бабочка красочные

Цвета вектор Всемирная

тормоз кабель cut throat stab electric tools

Оборудование инструмент

мультфильм одежда hand-painted

Запад

ax hammer hammer ta fly prisoners cast hook lasso man man hook ta cable snake cable bow ta arrows color arrows rockets yu ta leopard skin bow arrow sets prisoners man bow man ta arrows sword shield niu chain wheel mu chu fire bowl fire group steamer ta flywheel fire yao

Тибетские буддийские символы и объекты карта девяти оружия

христос христианство цвет

Молоток и гвозди

рука герб молот

Сосновец — герб

герб молот польша

Катовице — герб

молот клип объект

Молот

серпа молот клип

Серп молот

молот серпа nobg

Серп и молот Nobg

справочная информация лук торты

Background with cupcakes and macarons

справочная информация карта мультфильм

Cartoon Cat Background

аннотация античный искусство

Vector Retro Floral Elements

искусство design человека

Colorful hand-painted box Download

цветы цветочные украшения

Antique Designs

аннотация искусство барокко

Floral Decorative Elements Vector Graphics Set

справочная информация привлечено рука

Hand drawn school kids vector background material 03

Набор иконок стиля плоского дизайна для графического и веб-дизайна.

Icons for e-commerce, m-commerce, online shopping . — векторная иллюстрацияНабор иконок стиля плоского дизайна для графического и веб-дизайна. Icons for e-commerce, m-commerce, online shopping . векторное изображение ©Variant 69659077

Хотите получить любые 10 фотографий или векторов бесплатно?

Изображения

ВидеоРедакционныеМузыка и звуки

Инструменты

Для бизнеса

Наши цены

Все изображения

ВойтиЗарегистрироваться

Скачайте это изображение,

зарегистрировав аккаунт

Уже есть акаунт? Войти

Я принимаю условия Пользовательского соглашенияПолучать новости и спецпредложения

Набор векторных иконок плоского дизайна

— Вектор от Variant

Купите это изображение всего за €1. 44 с нашим Гибким планом

Получить

плоских дизайнов — Illustrationen und Vektorgrafiken

Grafiken

Bilder
Fotos
Grafiken
Vektoren
Videos

Durchstöbern SIE 2.56.77.77.78. Oder starten Sie eine neuesuche, um noch mehr faszinierende Stock-Bilder und Vektorarbeiten zu entdecken.

Sortieren nach:

Am beliebtesten

kreispfeil. schaltfläche weiter. png-symbol in der rechten linie im vektor flach — плоские иконки дизайна сток-графика, -клипарт, -мультфильмы и -символ

Крайспфейл. Schaltfläche Weiter. Png-Symbol in der rechten Line…

Kreispfeil. Schaltfläche «Вейтер». PNG-символ для правой линии в векторном стиле.

символ для технологической конфигурации. ausrüstung, компьютер, werkzeug, sprechblase digitales einstellungskonzept piktogramm. символ для управления инновационными процессами. медвежий барер строгий. изолированная векторная иллюстрация — плоские иконки дизайна, графика, клипарт, мультфильмы и символы

Символ для технологической конфигурации. Ausrüstung,…

Символ для технологической конфигурации. Zahnrad, Computer, Werkzeug, Sprechblase Digital Setting Konzept Piktogramm. Symbol für die Gliederung des Innovationsgeschäftsprozesses. Беарбайтбарер Стрих. Isolierte Vektorillustration.

weiße glühbirne und zahnrad-symbol mit langem schatten isoliert. инновацииконцепт. geschäftsidee. roter kreis-вкус. vektor-illustration — flat design icons stock-grafiken, -clipart, -cartoons und -symbole

Weiße Glühbirne und Zahnrad-Symbol mit langem Schatten isoliert. …

drucken von hausliniensymbolen. vektorillustration enthalten symbol — großformat, broschüre, broschüre, typografie, reiseführer, kalenderumriss piktogramm für polygraphie. 64×64 пикселя совершенный, контур контура — плоские иконки дизайна сток-графика, -клипарт, -мультфильмы и -символ

Drucken von Hausliniensymbolen. Vektorillustration enhalten…

kalendersymbole festgelegt. символ für den wochenkalender. контур и флачер стиль. календарьсимвол для приложений и веб-сайта. kalendersymbol-unterschiedsstil — активный вектор. — иконки плоского дизайна стоковые графики, клипарты, мультфильмы и символы

Kalendersymbole festgelegt. Symbol für den Wochenkalender….

Kalendersymbole gesetzt. Символ для Wochenkalender. Umriss und Flacher Stil. Календарь символов для приложений и веб-сайта. Календерсимвол Unterschiedsstil — Aktienvektor.

kundenfeedback-emoticons — плоские иконки дизайна стоковые графики, клипарты, мультфильмы и символы — плоские иконки дизайна стоковые графики, -клипарт, -мультфильмы и -символ

Eine Reihe von niedlichen Herzsymbolen.

загруженный sie zeilensymbole herunter. векторная иллюстрация вызывает символ — загрузка, облачная речь, порядок, файл, документ, дискета, дискета, дискета с пиктограммой для веб-кнопки. 64×64 пикселя совершенный, контур контура — плоские иконки дизайн сток-графика, -клипарт, -мультфильмы и -символ

Laden Sie Zeilensymbole herunter. Vektorillustration enhalten…

Zeilensymbole herunterladen. Векторные иллюстрации с изображением символов — загрузка, облачная служба, порядок, файл, документ, дискета, дискета Umriss Piktogramm for Web-Schaltfläche. 64×64 Pixel совершенство, увеличенное изображение.

einfaches gesichtssymbol-set für эмоциональный ausdruck (монохромный) — плоские иконки дизайна фондовая графика, -клипарт, -мультфильмы и -symbole 4 из 4 — плоские иконки дизайна стоковые графические изображения, клипарты, карикатуры и символы gebäude, straßenarbeit vorausschild — иконки плоского дизайна стоковые графики, клипарты, мультфильмы и символы

Schwarz-Weiß im Bau befindliche Symbole Стоковая Иллюстрация. ..

Schwarz-Weiß unter Bau Icons Stock Иллюстрация Бастель, Bauindustrie, Straßenbau, Bauwesen, Straßenarbeiten voraus Schild

pfeile schwarz icon set. векторпфайл. sammlung verschiedener pfeilsymbole. пфайлсимвол. курсор, zeiger für webdesign, schnittstelle. векториллюстрация. — плоские иконки дизайна стоковые графики, -клипарт, -мультфильмы и -символ

Pfeile schwarz Icon Set. Векторпфейл. Sammlung verschiedener…

Pfeile schwarz Symbolsatz. Векторпфейл. Sammlung verschiedener Pfeilsymbole. Пфайльсимвол. Курсор, Zeiger für Webdesign, Interface. Вектордарстелунг.

телефон с символом Wellen Symbol — черный цвет, изоляция — векторный фондовый рисунок — плоские иконки дизайна фондовая графика, -клипарт, -мультфильмы и -symbole

Телефон с символом Wellen Symbol — черный цвет, изоляция -…

blumensymbole. блюменсилуэтен. символ блюмендизайнс. muster aus gänseblümchen, роза и камилла.

satz von cartoon einfache grafische form isoliert auf weißem hintergrund. вектор — плоский дизайн иконок сток-графика, -клипарт, -мультфильмы и -символ

Блюменсимвол. Блюменсилуэттен. Symbol des Blumendesigns….

Blumensymbole. Блюменсилуэттен. Символ для Blumendesign. Muster von Gänseblümchen, Роза и Камилла. Satz von Cartoon einfache Grafikform isoliert auf weißem Hintergrund. Вектор.

Welt-Flaggen — векторный круглый символ — часть 2 из 4 — плоские иконки дизайна — графика, —клипарт, —мультфильмы и —символ

Welt-Flaggen — векторный круглый символ — часть 2 из 4

в öffentlichen medien. v2 — иконки плоского дизайна стоковые графики, клипарты, мультфильмы и символы

Lautsprechervektorsymbol zur Ankündigung in öffentlichen Medien….

lautsprecher-linien-symbol. мегафон-символ. вектор-иллюстрация. — плоский дизайн иконок сток-графика, -клипарт, -мультфильмы и -символ

Lautsprecher-Linien-Symbol. Мегафон-Символ. Вектор-иллюстрация.

Символ для Lautsprecherlinie. Мегафон-Символ. Векториллюстрация. Folge 10.

Набор иконок линии ärzte. Медицинские специалисты и линейные консультации пациентов с пиктограммами. gliederungssymbol für den medizinischen онлайн-поддержка. medizin info sprechblase. медвежий барер строгий. isolierte vektorillustration — иконки плоского дизайна0016 Набор иконок Ärzte Line. Medizinische Spezialisten und…

Ärzte-Line-Symbolsatz. Fachärzte und Patientenberatung Lineares Piktogramm. Online-Gliederungssymbol для медицинской поддержки. Medizin Info Sprechblase. Беарбайтбарер Стрих. Isolierte Vektorillustration.

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

Векторные символы и коммуникационные символы….

lupe-symbol — плоские иконки дизайна стоковые графики, -клипарты, -мультфильмы и -symbole Шнеллер Версанд.

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

Schnelle Lieferung LKW-Symbol. Шнеллер Версанд. Дизайн д…

домашний символ. векторная иллюстрация enthalten символ — landhaus, grundstück, ferienhaus, kamin, homepage, wohngebäude umriss piktogramm für immobilien. 64×64 пикселя perfekter, bearbeitbarer kontur — иконки плоского дизайна сток-графика, -клипарт, -мультфильмы и -символ

Главная-Liniensymbole. Увлекательная векторная иллюстрация Symbol -…

Homeline-Symbole. Векторные иллюстрации enthalten Symbol — Landhaus, Eigentum, Hütte, Kamin, Homepage, Wohngebäude Umriss Piktogramm für Immobilien. 64×64 Pixel совершенство, увеличенное изображение.

символ для benachrichtigungsglocken — плоские иконки дизайн стоковой графики, -клипарт, -мультфильмы и -symbole

символ для Benachrichtigungsglocken

фрукты линии иконки gesetzt. современный графический дизайн.

тонкая линия-концепте. einfache auflistung linearer gliederungselemente. vektorliniensymbole — иконки плоского дизайна стоковые графики, клипарты, мультфильмы и символы

Fruits Line Icons gesetzt. Современный графический дизайн. Символ Thin-Line-Konzep

einkaufswagen linie. минимальная векторная иллюстрация. inklusive einfache umriss-icons wie trolley, supermarkt-korb, shop-tasche, artikel hinzufügen, электронная коммерция. медвежий барер строгий. совершенный пиксель — плоские иконки дизайна стоковые графики, клипарты, мультфильмы и символы

Einkaufswagen Line Symbol. Minimale Vector-Illustration….

Warenkorb-Linien-Symbol. Минимальная векторная иллюстрация. Inklusive einfacher Umrisssymbole wie Trolley, Supermarktkorb, Einkaufstasche, Artikel hinzufügen, E-Commerce. Беарбайтбарер Стрих. Пиксельгенау.

weiße umhüllte symbol mit langem schatten isoliert. символ для электронной почты-nachrichtenbriefe. roter kreis-вкус. вектор-иллюстрация — плоские иконки дизайн сток-графики,-клипарт,-мультфильмы и-символ

Мы создали символ с изолированным изображением. Symbol für E-M

gesunde vegane ernährung. — плоские иконки дизайна стоковые графики, -клипарты, -мультфильмы и -символы

Веганские символы.

Gesundes vegetarisches Bio-Essen. Kochen veganer Gerichte. Диеты, детокс-коктейли и полезные напитки. Satz von Symbolen im modernen flachen geometrischen Stil. Abstraktes Design für Verpackungen. Вектордарстелунг.

вектор-интернет-рант — плоский дизайн иконок сток-графика, клипарт, мультфильмы и символы

вектор-интернет-рант

zeigersymbole. зейгерклик. курсор-символ. кликендерный палец. компьютер-маусклик. векториллюстрация. — плоский дизайн иконок сток-графика, -клипарт, -мультфильмы и -символ

Zeigersymbole. Зейгерклик. Курсор-Символ. Klickender Finger….

Символ руки. Klicken де Mauszeigers. Курсорсимвол. Нажмите Sie mit dem Finger. Компьютер-Маусклик. Вектордарстелунг.

символ реверса и обмена — серия классических линий — иконки плоского дизайна стоковая графика, клипарт, мультфильмы и символы

символ реверса и обмена — серия Classic Line

Bearbeitbarer Strich — Rückwärts — Liniensymbole

schwarze linie drucker -symbol isoliert auf weißemhintergrund.

legen sie symbole in farbigen quadratischen schaltflächen fest. vektor-illustration — flat design icons stock-grafiken, -clipart, -cartoons und -symbole

Schwarze Linie Drucker-Symbol isoliert auf weißem Hintergrund….

евро-liniensymbole gesetzt. современный графический дизайн. тонкая линия-концепте. einfache auflistung linearer gliederungselemente. vektorliniensymbole — плоские иконки дизайна стоковые графики, -клипарт, -мультфильмы и -символ

Euro-Liniensymbole gesetzt. Современный графический дизайн. Thin-Line-Konze

fünf-stern-bewertungsvektor im papierschnitt-design isoliert auf gruemhintergrund. обратная связь, überprüfen und bewerten sie uns konzept. eps 10 векторная иллюстрация. — иконки плоского дизайна стоковые графики, клипарты, мультфильмы и символы

Fünf-Sterne-Bewertungsvektor im Papierschnitt-Design isoliert…

Fünf-Sterne-Bewertungsvektor im Papierschnitt-Stil Design isoliert auf grauem Hintergrund. Обратная связь, Überprüfung und Bewertung des Konzepts. EPS 10 векторные иллюстрации.

schwarze linie sprechblasen mit frage- und antwortsymbol isoliert auf weißemhintergrund. q- и a-символ. часто задаваемые вопросы чат-рассказы и диаграммы. вектор — плоские иконки дизайн сток-графика, -клипарт, -мультфильмы и -символ

Schwarze Lines Sprechblasen mit Frage- und Antwortsymbol…

Alle Welt Fahnen — векторный набор иконок — плоский дизайн иконок сток-графика, клипарт, мультфильмы и символы

Alle Welt Fahnen — векторный набор иконок

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

E-Mail-Vektorsymbole festgelegt. Briefnachricht, Websymbol

E-Mail-Vektorsymbole gesetzt. Briefnachricht, Websymbol

mail-icon-set — иконки плоского дизайна, графика, клипарт, мультфильмы и символ

Mail-Icon-set

schere-symbol в плоском векторном стиле для приложений, пользовательского интерфейса, веб-сайтов.

schwarze sondier-vektor-illustration — иконки плоского дизайна стоковые графики, -клипарты, -мультфильмы и -символы

Схема-символ в плоском стиле Вектор для приложений, пользовательского интерфейса, веб-сайтов….

weiße e-mail und e-mail- символ mit langem schatten isoliert. umschlagsymbol электронная почта. электронная почта-nachrichtenzeichen. roter kreis-вкус. vektor-illustration — flat design icons stock-grafiken, -clipart, -cartoons und -symbole

Weiße E-Mail und E-Mail-Symbol mit langem Schatten isoliert….

фейер-символ. einfache flammensilhouetten. schwarze kontur warnzeichen. sammlung von informationssymbolen über kraftstoff eisern und heiße produkte. lagerfeuer oder brennbare flüssigkeit. вектор feuriger gliederungssatz — плоские иконки дизайна сток-графики, -клипарт, -мультфильмы и -символ

Feuer-символ. Einfache Flammensilhouetten. Schwarze Kontur…

Минималистичные иконки глифов умного дома — плоские иконки дизайна фондовая графика, -клипарт, -мультфильмы и -символы0003 informationsliniensymbol gesetzt.

datenschutzerklärung, handbuch, regel, anweisung, informieren, anleitung, referenz minimale vektor-illustration. einfache umriss zeichen tutorial app ui 30×30 pixel perfekt editierbarstrich — плоские иконки дизайна стоковые графики, -клипарты, -мультфильмы и -символы

Informationsliniensymbol gesetzt. Datenschutzerklärung, Handbuch,

иконки юридических документов — linienserie — редактируемый штрих — иконки плоского дизайна сток-графика, -клипарт, -мультфильмы и -символ

Legal Documents Icons — Linienserie — Editable Stroke

Symbole für juristische Dokumente (bearbeitbarer Strich)

welt karte reisekonzept — плоские иконки дизайна стоковые графики, -клипарты, -мультфильмы и -symbole

Welt Karte reisekonzept

qr-код смартфон-сканер линейный символ. векториллюстрация. — плоские иконки дизайн сток-графики, -клипарт, -мультфильмы и -символ

QR-код Smartphone-Scanner lineares Symbol. Векториллюстрация.

dokumente — значки иллюстраций — значки плоского дизайна сток-графика, -клипарт, -мультфильмы и -символ

Dokumente — Illustration Icons

Добавлено

Контакты с символом линии.

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

Контактная информация Символ линии. Минимальная векторная иллюстрация…

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

Герц-Символ-Лого. Herz-Symbol-Zeichen. Вспышки Herz-Symbol Дизайн.

Символ Герца. Герц-Иконен-Кунст. Herzsymbol eps. Herzsymbol Bild. Herzsymbol-логотип. Herzsymbol-Zeichen. Herzsymbol мигает Дизайн. Herz-Icon-Design. Herz-Symbol-Vektor, Liebesherzen, Herz-Symbol flaches Design isoliert auf weißem Hintergrund.

значок контура смартфона мобильный макет. wireframe-frontline-vector-handy — плоские иконки дизайна стоковые графики, -клипарты, -мультфильмы и -символы

Смартфон Outline Icon Mobile Mockup. Wireframe-Frontline-Vektor-

grafik-design-liniensymbole. вектор-иллюстрация enthalten символ — цифровая творческая работа, пинсель, палитра, druckvorstufe, макет презентации umriss piktogramm für die kunst. 64 x 64 пикселя. Vektor-Illustration enhalten…

Grafikdesign-Liniensymbole. Vektorillustration inklusive Symbol — digitales Kreativwerkzeug, Pinsel, Palette, Druckvorstufe, Präsentationslayout Gliederung Piktogramm für Kunst. 64×64 пикселей идеальное изображение.

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

White Speech Blase Chat-Symbol с изолированными изолированными языками….

Активация символа набора векторов. галочка isoliert auf weißem backcround. медвежий барер строгий. векторная иллюстрация — иконки плоского дизайна стоковые графики, клипарты, мультфильмы и символы

Aktivieren Sie Das Symbol setzen Vektor. Checkmark isoliert auf…

Häkchen Sie den Symbolsatzvektor auf weißem Hintergrund sikoliert

satz von vorsicht dreiecksymbolen — flat design icons stock-grafiken, -clipart, -cartoons und -symbole

Satz von Vorsicht Dreiecksymbolen

worldwide web- -набор иконок. веб-символы планеты. глобус-иконки для веб-сайтов. — плоские иконки дизайна стоковые графики, -клипарт, -мультфильмы и -символ

World Wide Web-Konzept-Globus-Icon-Set. Planet Web Symbolsatz….

werbekanäle lineare symbole gesetzt — flat design icons stock-grafiken, -clipart, -cartoons und -symbole und -symbole

Toilettensymbol-Set — Верхние векторные иллюстрации, изолированные…

Туалетные иконки-Set — Верхние векторные иллюстрации, изолированные на прозрачном фоне

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

пин-карта символ флач вектор силуэт изолирт

пин-карта символ флаш вектор-силуэт изолирт черный

глубокая линия символ вектор, isoliert auf weißem Hintergrund.

flachen stil für grafik-design — flat design icons stock-grafiken, -clipart, -cartoons und -symbole

Glühbirne Liney Symbol Vektor, isoliert auf weißem Hintergrund….

kundenservice icon set — flat design icons stock-grafiken, -clipart , -мультики и -символ

Kundenservice Icon Set

Uhr Symbol Vector Illustration Design редактируемые vesizable vesable eps 10 — flat design icons stock-grafiken, -clipart, -cartoons und -symbole

Uhr Symbol Vector Illustration Design Editable Vesizable VEsable…

из 100

Flat vs. Material vs. Skeuomorphic Примеры дизайна

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

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

Скевоморфизм

Слово скевоморф происходит от греческих слов skeuos (что означает «контейнер или инструмент») и morphḗ (что означает «форма»). В дизайне продукта мы определяем скевоморфизм как метод, используемый в дизайне пользовательского интерфейса, при котором объекты, значки и кнопки имитируют свои аналоги из реального мира. Например, значок корзины, который выглядит как мусорное ведро.

Зачем это делать? Во-первых, это помогает нам улучшить взаимодействие человека с компьютером (HCI). Это было важно еще в 1980-х годах, когда персональный компьютер был новой концепцией почти для всех. Крупные компании, такие как Apple, пытались свести к минимуму кривую обучения, создавая элементы и значки, которые были бы знакомы пользователям. Стив Джобс любил скевоморфизм, потому что считал, что он упрощает использование технологий людьми.

Примеры оригинальных скевоморфных иконок Apple Macintosh, созданных Сьюзен Каре. Изображение предоставлено Шейном Бздоком через Flickr.

Вторая волна скевоморфизма пришлась на конец первого десятилетия 2000-х. Развитие мобильных устройств заставило дизайнеров снова использовать скевоморфизм, чтобы помочь пользователям понять, как взаимодействовать с этими новыми устройствами. Еще в 2008 году концепция сенсорного экрана была новой для многих пользователей, поэтому дизайнеры создали элементы пользовательского интерфейса, которые позволяли пользователям ссылаться на свой предыдущий опыт. Например, значок приложения камеры в Apple iOS 6 имел 3D-эффекты, такие как тени, глубину и текстуры, чтобы сделать его похожим на настоящую камеру.

Примеры скевоморфных иконок в интерфейсе Apple iOS. Изображение предоставлено Apple.

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

В Apple iOS 6 использовалась скевоморфная книжная полка, которая выглядела как настоящая физическая книжная полка с трехмерными полками и текстурами дерева.

Изображение предоставлено ipadyoupad.

Через несколько лет после смерти Стива Джобса в 2011 году Apple отказалась от скевоморфизма. Было несколько основных причин, по которым Apple и другие дизайнерские компании приняли такое решение:

К середине 2010-х годов большинство пользователей уже научились использовать интерфейсы, и им больше не нужны были элементы реального мира, чтобы помочь им в этом.
Скевоморфизм затрудняет масштабирование дизайна, поскольку он неудобен для отклика. В нем используется множество чисто декоративных элементов, которые гораздо сложнее адаптировать под различные экраны и разрешения. Для этого вам потребуется создать детали визуального дизайна для каждого размера/разрешения.
Скевоморфизм требует больших ресурсов, что означает увеличение времени загрузки и использование большей пропускной способности. Последнее особенно критично для веб-сайтов.

Многие дизайнеры считают, что скевоморфизм мертв, но это не так. Скевоморфизм существует в тонких визуальных деталях во многих продуктах, которые мы используем сегодня. Например, в 2020 году Apple привнесла элементы скевоморфизма в дизайн macOS под названием Big Sur.

На приведенном ниже экране взгляните на Центр управления ОС, особенно на элементы управления «Экран» и «Звук» — на панели яркости дисплея используются мелкие детали скевоморфизма, такие как тяжелая тень для управления яркостью.

Визуальный стиль Центра управления в macOS Big Sur использует элементы скевоморфизма. Изображение предоставлено Apple.

Еще один примечательный пример — иконки в Биг-Суре. Проверьте значки Apple Mail и Apple Messages на снимке экрана ниже.

В док-станции macOS Big Sur используются псевдо3D-значки. Изображение предоставлено Apple.

Плоский дизайн

В 2006 году Microsoft выпустила музыкальный проигрыватель Zune. Плеер должен был конкурировать с iPod от Apple — и, как мы знаем, Microsoft проиграла эту битву. Однако игрок представил миру новую концепцию: плоский веб-дизайн.

Для создания Zune дизайнеры создали новый визуальный язык под названием Microsoft Metro, который представлял собой интерпретацию Microsoft плоской эстетики. Метро было полной противоположностью скевоморфизму. С минимализмом в основе, цель этого языка заключалась в том, чтобы удалить все чисто декоративные элементы и сделать дизайн чисто утилитарным. Metro был одним из первых примеров плоского дизайна в цифровых продуктах, и Microsoft использовала этот язык для многих продуктов, включая Windows 8.

Визуальный дизайн Windows 8 основан на языке Metro. Изображение предоставлено Giorgosarv18.

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

Как следует из названия, эта тенденция использует такие характеристики, как:

2D-элементы
Простая типографика
Минимализм
Яркие цвета

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

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

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

В попытке решить эту проблему сообщество дизайнеров разработало Flat 2. 0, визуальный стиль, который воплощает в себе все гладкие, минималистичные характеристики плоского дизайна с несколькими заметными исключениями, которые немного приближают его к 3D. Например, он вводит только тонкие тени и градиенты, чтобы предложить улучшенный UX. С тех пор Flat 2.0 стал сегодня стандартом де-факто для приложений и веб-дизайна.

Дизайн-система Adobe Spectrum использует элементы плоской эстетики 2.0. Изображение предоставлено Adobe.

Material Design

Позднее, в 2014 году, Google выпустила собственный язык под названием Material Design. Эта система дизайна представляет собой более сбалансированную интерпретацию Flat 2.0 и пытается объединить реальный и цифровой миры. Слово «материал» относится к цифровым объектам, которые напоминают по свойствам объекты реального мира.

Хотя неясно, почему Google вообще создала Material Design, одной из возможных причин была необходимость унифицировать внешний вид вещей на разных устройствах Android, включая экраны разных размеров и разрешений. Материальный дизайн хорошо играет роль набора руководств, облегчающих эту задачу. Большая часть эволюции UX Google, внутренний гигант включает Material Design в большинство своих продуктов. Примеры Material Design включают YouTube, Evernote и многие другие приложения.

Итак, что такое материальный пользовательский интерфейс с точки зрения дизайна? По сути, Material Design — это использование в основном плоских элементов с тонкими 3D-штрихами. 3D штрихи помогают дизайнерам создавать многомерный опыт, позволяя им создавать несколько слоев, играя с осью Z.

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

Анимированный переход в Material Design. Видео кредит Google.

Заключение

Дизайн никогда не бывает статичным.