Design language: Difference between revisions
Jump to navigation
Jump to search
imported>Guy Harris The Old Grey Lady is a newspaper; treat it as such. |
|||
| Line 1: | Line 1: | ||
{{Short description|Overarching scheme that guides the design of a complement of products}} | {{Short description|Overarching scheme that guides the design of a complement of products}} | ||
{{Distinguish|Visual programming language}} | {{Distinguish|Visual programming language|Architecture description language|Modeling language}} | ||
A '''design language''' or '''design vocabulary''' is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent [[design system]] for styling. | A '''design language''' or '''design vocabulary''' is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent [[design system]] for styling. | ||
| Line 18: | Line 18: | ||
=== Examples === | === Examples === | ||
In the 1980s, [[Memphis design]] became widely popular.<ref>{{Cite web |last=Levanier |first=Johnny |date=2021-02-05 |title=Memphis Design: How the Defining Look of the 1980s Is Making a Comeback |url=https://blog.99cluster.com/blog/design-history-movements/memphis-design/ |access-date=2025-06-10 |website=99designs |language=en-US}}</ref> | |||
[[Apple Inc.|Apple]] used the [[Snow White design language|Snow White design]] for its home computers in the 1980s, which used parallel stripes to give the impression that the enclosure was smaller than it actually was.<ref>{{cite web|last=Esslinger|first=Hartmut|date=10 September 2013|title=Keep It Simple|url=http://designmind.frogdesign.com/blog/snow-white-steve-jobs-and-apples-awakening-as-a-global-design-leader.html|work=designmind.frogdesign.com/|accessdate=21 January 2014}}</ref> The [[Apple Industrial Design Group]] is responsible for the industrial design of all Apple products. | [[Apple Inc.|Apple]] used the [[Snow White design language|Snow White design]] for its home computers in the 1980s, which used parallel stripes to give the impression that the enclosure was smaller than it actually was.<ref>{{cite web|last=Esslinger|first=Hartmut|date=10 September 2013|title=Keep It Simple|url=http://designmind.frogdesign.com/blog/snow-white-steve-jobs-and-apples-awakening-as-a-global-design-leader.html|work=designmind.frogdesign.com/|accessdate=21 January 2014}}</ref> The [[Apple Industrial Design Group]] is responsible for the industrial design of all Apple products. | ||
Cadillac introduced the [[Cadillac#The Art and Science era: 2000–present|Art and Science]] design philosophy in 2000, which emphasized sharp and crisp edges — what noted automotive journalist [[Dan Neil (journalist)|Dan Neil]] described as a "fractal geometric style."<ref name="neil">{{cite | Cadillac introduced the [[Cadillac#The Art and Science era: 2000–present|Art and Science]] design philosophy in 2000, which emphasized sharp and crisp edges — what noted automotive journalist [[Dan Neil (journalist)|Dan Neil]] described as a "fractal geometric style."<ref name="neil">{{cite news | ||
|title = BEHIND THE WHEEL/2003 Cadillac CTS; Turning 100, Sparkling Like a Gem | |title = BEHIND THE WHEEL/2003 Cadillac CTS; Turning 100, Sparkling Like a Gem | ||
| | |newspaper = [[The New York Times]] | ||
|author = Dan Neil | |author = Dan Neil | ||
|date = April 7, 2002 | |date = April 7, 2002 | ||
| Line 29: | Line 31: | ||
[[Ford Motor Company|Ford]] used the [[New Edge (design language)|New Edge]] design language in the 1990s and early 2000s, which combined intersecting arcs to create soft aerodynamic shapes. Later Ford used [[Ford Kinetic Design|Kinetic Design]] that featured a large lower trapezoidal grill on many vehicles. | [[Ford Motor Company|Ford]] used the [[New Edge (design language)|New Edge]] design language in the 1990s and early 2000s, which combined intersecting arcs to create soft aerodynamic shapes. Later Ford used [[Ford Kinetic Design|Kinetic Design]] that featured a large lower trapezoidal grill on many vehicles. | ||
[[Mazda]] has used the [[Mazda Nagare (car design)|Nagare]] design language, which used flowing lines influenced by wind.<ref>{{Cite web|title=Mazda Nagare design language - Car Body Design|url=http://www.carbodydesign.com/archive/2008/05/29-mazda-nagare-design-language/|access-date=2017-06-12|website=www.carbodydesign.com|language=en-US}}</ref> Mazda later used the Kodo design language.<ref>{{Cite news|last=Patton|first=Phil|date=2011-05-20|title=Mazda Designers Abandon Nagare, Embrace Kodo|language=en-US| | [[Mazda]] has used the [[Mazda Nagare (car design)|Nagare]] design language, which used flowing lines influenced by wind.<ref>{{Cite web|title=Mazda Nagare design language - Car Body Design|url=http://www.carbodydesign.com/archive/2008/05/29-mazda-nagare-design-language/|access-date=2017-06-12|website=www.carbodydesign.com|language=en-US}}</ref> Mazda later used the Kodo design language.<ref>{{Cite news|last=Patton|first=Phil|date=2011-05-20|title=Mazda Designers Abandon Nagare, Embrace Kodo|language=en-US|newspaper=The New York Times|url=https://www.nytimes.com/2011/05/22/automobiles/22KODO.html|access-date=2019-12-22|issn=0362-4331}}</ref> | ||
Other examples include the Dynamic Shield design language used by [[Mitsubishi]],<ref>{{Cite web|date=2016-07-20|title=Explained: Mitsubishi's Dynamic Shield Design Philosophy|url=https://thenewswheel.com/explained-mitsubishi-dynamic-shield-design-philosophy/|access-date=2019-12-23|website=The News Wheel|language=en-US}}</ref> and Dynamic x Solid used by [[Subaru]].<ref>{{Cite web|date=2016-07-19|title=DYNAMIC X SOLID: Subaru's Global Architecture Explained|url=https://thenewswheel.com/dynamic-x-solid-subarus-global-architecture-explained/|access-date=2019-12-23|website=The News Wheel|language=en-US}}</ref> | Other examples include the Dynamic Shield design language used by [[Mitsubishi]],<ref>{{Cite web|date=2016-07-20|title=Explained: Mitsubishi's Dynamic Shield Design Philosophy|url=https://thenewswheel.com/explained-mitsubishi-dynamic-shield-design-philosophy/|access-date=2019-12-23|website=The News Wheel|language=en-US|archive-url=https://web.archive.org/web/20191223001251/https://thenewswheel.com/explained-mitsubishi-dynamic-shield-design-philosophy/|archive-date=2019-12-23|url-status=dead}}</ref> and Dynamic x Solid used by [[Subaru]].<ref>{{Cite web|date=2016-07-19|title=DYNAMIC X SOLID: Subaru's Global Architecture Explained|url=https://thenewswheel.com/dynamic-x-solid-subarus-global-architecture-explained/|access-date=2019-12-23|website=The News Wheel|language=en-US|archive-url=https://web.archive.org/web/20191223001248/https://thenewswheel.com/dynamic-x-solid-subarus-global-architecture-explained/|archive-date=2019-12-23|url-status=dead}}</ref> | ||
==Software== | ==Software== | ||
In the context of [[graphical user interface]]s, for example, [[human interface guidelines]] can be thought of as design languages for applications.<ref>{{cite web |url=http://hci.stanford.edu/publications/bds/4p-guidelines.html |title=Bringing Design to Software |first=Terry |last=Winograd |year=1996 |website=Stanford HCI Group |access-date=22 February 2014}}</ref> | In the context of [[graphical user interface]]s, for example, [[human interface guidelines]] can be thought of as design languages for applications.<ref>{{cite web |url=http://hci.stanford.edu/publications/bds/4p-guidelines.html |title=Bringing Design to Software |first=Terry |last=Winograd |year=1996 |website=Stanford HCI Group |access-date=22 February 2014}}</ref> | ||
===Examples=== | ===Examples=== | ||
[[Apple Inc.|Apple]] has created some software design languages. | [[Apple Inc.|Apple]] has created some software design languages. Since 1997, the [[Appearance Manager|Platinum]] design language was used for [[Mac OS 8]] and [[Mac OS 9|9]] and emphasized various shades of gray. From 2000 onwards, the [[Aqua (user interface)|Aqua]] design language was introduced with [[Mac OS X 10.0]] and emphasized flatter interface elements and liberal use of reflection effects and transparency.<ref>{{cite web|title=Developer documentation on Aqua|url=https://developer.apple.com/documentation/MacOSX/Conceptual/OSX_Technology_Overview/UserExperience/chapter_6_section_2.html|archive-url=https://web.archive.org/web/20081007191229/https://developer.apple.com/documentation/MacOSX/Conceptual/OSX_Technology_Overview/UserExperience/chapter_6_section_2.html|archive-date=October 7, 2008|url-status=dead}}</ref><ref>{{cite web|date=July 19, 2000|title=Apple Introduces iMovie 2|url=https://www.apple.com/newsroom/2000/07/19Apple-Introduces-iMovie-2/|access-date=June 11, 2025|website=Apple Newsroom}}</ref> [[Brushed metal (interface)|Brushed metal]], first used in 1999, was intended for programs such as [[QuickTime Player]] that mimic the operation or interface of common devices. In June 2025 during [[WWDC 2025]], Apple introduce a new unified design language known as [[Liquid Glass]] across Apple platforms featuring an optical properties of glass with a sense of fluidity.<ref>{{cite web|url=https://developer.apple.com/documentation/technologyoverviews/liquid-glass|title=Liquid Glass}}</ref> | ||
[[Microsoft]] has used the [[Windows Aero|Aero]] design language for [[Windows Vista]] and [[Windows 7]]. The Aero design language used semitransparent glass like window borders as a distinctive feature. The [[Metro (design language)|Metro design language]] focused on simplified icons, absence of clutter and basic shapes. Metro was used in many Microsoft products including [[Windows 8]], [[Windows Phone 7]], the [[Xbox 360]] and [[Xbox One]].<ref name="wired-metro">{{Cite web|last=Chang|first=Alexandra|date=8 August 2012|title=Microsoft Doesn't Need a Name for Its User Interface|url=https://www.wired.com/2012/08/microsoft-doesnt-need-a-name-for-its-ui-metro-or-not/|website=[[Wired (website)|Wired]]|publisher=[[Condé Nast]]}}</ref><ref>{{Cite web|last=Kruzeniski|first=Mike|date=11 April 2011|title=How Print Design is the Future of Interaction|url=http://kruzeniski.com/2011/how-print-design-is-the-future-of-interaction/|website=Kruzeniski.com|publisher=[[WP:SPS|Self-published]]|access-date=11 May 2021|archive-date=14 March 2012|archive-url=https://web.archive.org/web/20120314071640/http://kruzeniski.com/2011/how-print-design-is-the-future-of-interaction/|url-status=dead}}</ref> The [[Fluent Design System]] was developed as a revamp of Metro in 2017, and used more motion, depth and translucency effects.<ref name="ars-fluentdesign">{{cite web|title=New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System"|url=https://arstechnica.com/information-technology/2017/05/new-windows-look-and-feel-neon-is-officially-the-microsoft-fluent-design-system/|website=Ars Technica|date=11 May 2017 |accessdate=11 May 2017}}</ref> | [[Microsoft]] has used the [[Windows Aero|Aero]] design language for [[Windows Vista]] and [[Windows 7]] which appeared in 2006. The Aero design language used semitransparent glass like window borders as a distinctive feature. The [[Metro (design language)|Metro design language]] focused on simplified icons, absence of clutter and basic shapes. Metro was used in many Microsoft products including [[Windows 8]], [[Windows Phone 7]], the [[Xbox 360]] and [[Xbox One]].<ref name="wired-metro">{{Cite web|last=Chang|first=Alexandra|date=8 August 2012|title=Microsoft Doesn't Need a Name for Its User Interface|url=https://www.wired.com/2012/08/microsoft-doesnt-need-a-name-for-its-ui-metro-or-not/|website=[[Wired (website)|Wired]]|publisher=[[Condé Nast]]}}</ref><ref>{{Cite web|last=Kruzeniski|first=Mike|date=11 April 2011|title=How Print Design is the Future of Interaction|url=http://kruzeniski.com/2011/how-print-design-is-the-future-of-interaction/|website=Kruzeniski.com|publisher=[[WP:SPS|Self-published]]|access-date=11 May 2021|archive-date=14 March 2012|archive-url=https://web.archive.org/web/20120314071640/http://kruzeniski.com/2011/how-print-design-is-the-future-of-interaction/|url-status=dead}}</ref> The [[Fluent Design System]] was developed as a revamp of Metro in 2017, and used more motion, depth and translucency effects.<ref name="ars-fluentdesign">{{cite web|title=New Windows look and feel, Neon, is officially the "Microsoft Fluent Design System"|url=https://arstechnica.com/information-technology/2017/05/new-windows-look-and-feel-neon-is-officially-the-microsoft-fluent-design-system/|website=Ars Technica|date=11 May 2017 |accessdate=11 May 2017}}</ref> | ||
[[Google]] developed [[Material Design]] in 2014 which emphasizes smooth responsive animations and transitions, padding and depth using lighting and shadows. Many of Google's products have implemented Material Design including Android, Android applications and web applications.<ref>{{Cite web|title=Material Design|url=https://material.io/blog/google-material-custom-theme/|access-date=2020-09-06|website=Material Design|language=en}}</ref> | [[Google]] developed [[Material Design]] in 2014 which emphasizes smooth responsive animations and transitions, padding and depth using lighting and shadows. Many of Google's products have implemented Material Design including Android, Android applications and web applications.<ref>{{Cite web|title=Material Design|url=https://material.io/blog/google-material-custom-theme/|access-date=2020-09-06|website=Material Design|language=en}}</ref> | ||
| Line 47: | Line 47: | ||
[[Flat design]] is a design language and style that simplifies elements and colours.<ref>{{cite web|author=Xavier Bertels|date=March 5, 2014|title=The History of Flat Design|url=https://xavierbertels.com/blog/the-history-of-flat-design|access-date=December 23, 2014|work=Xavier Bertels}}</ref> It has influenced user interface design in Microsoft's [[Zune]], [[Android (operating system)|Android]] starting with [[Android Ice Cream Sandwich|Android 4.0]],<ref name="verge-duarte">{{cite web|title=Exclusive: Matias Duarte on the philosophy of Android, and an in-depth look at Ice Cream Sandwich|url=https://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus/|url-status=dead|archive-url=https://web.archive.org/web/20120212191122/https://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus/|archive-date=2012-02-12|access-date=November 28, 2011|work=The Verge|publisher=[[Vox Media]]}}</ref> [[iOS 7]]<ref>{{Cite web|last=Pavlus|first=John|date=2013-06-10|title=Why Jony Ive Is Flattening iOS 7|url=https://www.fastcompany.com/1672780/why-jony-ive-is-flattening-ios-7|access-date=2020-04-06|website=Fast Company|language=en-US}}</ref> and [[OS X Yosemite]].<ref name="ars-yosemiteui">{{cite web|title=OS X Yosemite unveiled at WWDC, features big UI overhaul|url=https://arstechnica.com/apple/2014/06/os-x-yosemite-is-coming-and-it-will-redesign-the-entire-mac-desktop/|url-status=live|archive-url=https://web.archive.org/web/20140603214032/http://arstechnica.com/apple/2014/06/os-x-yosemite-is-coming-and-it-will-redesign-the-entire-mac-desktop/|archive-date=June 3, 2014|access-date=June 3, 2014|website=Ars Technica|date=2 June 2014 |df=mdy-all}}</ref> | [[Flat design]] is a design language and style that simplifies elements and colours.<ref>{{cite web|author=Xavier Bertels|date=March 5, 2014|title=The History of Flat Design|url=https://xavierbertels.com/blog/the-history-of-flat-design|access-date=December 23, 2014|work=Xavier Bertels}}</ref> It has influenced user interface design in Microsoft's [[Zune]], [[Android (operating system)|Android]] starting with [[Android Ice Cream Sandwich|Android 4.0]],<ref name="verge-duarte">{{cite web|title=Exclusive: Matias Duarte on the philosophy of Android, and an in-depth look at Ice Cream Sandwich|url=https://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus/|url-status=dead|archive-url=https://web.archive.org/web/20120212191122/https://www.theverge.com/2011/10/18/exclusive-matias-duarte-ice-cream-sandwich-galaxy-nexus/|archive-date=2012-02-12|access-date=November 28, 2011|work=The Verge|publisher=[[Vox Media]]}}</ref> [[iOS 7]]<ref>{{Cite web|last=Pavlus|first=John|date=2013-06-10|title=Why Jony Ive Is Flattening iOS 7|url=https://www.fastcompany.com/1672780/why-jony-ive-is-flattening-ios-7|access-date=2020-04-06|website=Fast Company|language=en-US}}</ref> and [[OS X Yosemite]].<ref name="ars-yosemiteui">{{cite web|title=OS X Yosemite unveiled at WWDC, features big UI overhaul|url=https://arstechnica.com/apple/2014/06/os-x-yosemite-is-coming-and-it-will-redesign-the-entire-mac-desktop/|url-status=live|archive-url=https://web.archive.org/web/20140603214032/http://arstechnica.com/apple/2014/06/os-x-yosemite-is-coming-and-it-will-redesign-the-entire-mac-desktop/|archive-date=June 3, 2014|access-date=June 3, 2014|website=Ars Technica|date=2 June 2014 |df=mdy-all}}</ref> | ||
In 2021, the [[GNOME Project]] expanded its focus of [[Adwaita (design language)|Adwaita]] to allow it to prosper as a design language for [[GNOME]].<ref>{{cite web |url=https://adrienplazas.com/blog/2021/03/31/introducing-libadwaita.html |title=Introducing Libadwaita |author=Plazas | In 2021, the [[GNOME Project]] expanded its focus of [[Adwaita (design language)|Adwaita]] to allow it to prosper as a design language for [[GNOME]].<ref>{{cite web |url=https://adrienplazas.com/blog/2021/03/31/introducing-libadwaita.html |title=Introducing Libadwaita |author-last=Plazas |author-first=Adrien |date=March 31, 2021 |access-date=January 3, 2022 |archive-url=https://web.archive.org/web/20220103025135/https://adrienplazas.com/blog/2021/03/31/introducing-libadwaita.html |archive-date=January 3, 2022 |url-status=dead}}</ref> | ||
==See also== | ==See also== | ||
| Line 58: | Line 58: | ||
==References== | ==References== | ||
{{reflist}} | |||
==External links== | ==External links== | ||
*[https:// | *[https://designsystems.surf/ Design Systems Database] | ||
{{Design}} | {{Design}} | ||
Latest revision as of 08:54, 11 June 2025
Template:Short description Script error: No such module "Distinguish". A design language or design vocabulary is an overarching scheme or style that guides the design of a complement of products or architectural settings, creating a coherent design system for styling.
Objectives
Designers wishing to give their suite of products a unique but consistent appearance and user interface can define a specification for it. The specification can describe choices for design aspects such as materials, color schemes, shapes, patterns, textures, or layouts. They then follow the scheme in the design of each object in the suite.[1]
Usually, design languages are not rigorously defined; the designer basically makes one thing similarly as another. In other cases, they are followed strictly, so that the products gain a strong thematic quality. For example, although there is a great variety of unusual chess set designs, the pieces within a set are typically thematically consistent.
Sometimes, designers encourage others to follow their design languages when decorating or accessorizing.
Industrial design
Industrial design is the process of designing products for mass production. A design language can provide a range of products a similar style that sets it apart from competitors.
In automotive design, the design language often uses a signature grille design. For instance, many BMW vehicles share a design language, including front-end styling consisting of a split "kidney grille" and four circular headlights.[1] Some manufacturers have appropriated design language cues from rival firms.[2]
Examples
In the 1980s, Memphis design became widely popular.[3]
Apple used the Snow White design for its home computers in the 1980s, which used parallel stripes to give the impression that the enclosure was smaller than it actually was.[4] The Apple Industrial Design Group is responsible for the industrial design of all Apple products.
Cadillac introduced the Art and Science design philosophy in 2000, which emphasized sharp and crisp edges — what noted automotive journalist Dan Neil described as a "fractal geometric style."[5]
Ford used the New Edge design language in the 1990s and early 2000s, which combined intersecting arcs to create soft aerodynamic shapes. Later Ford used Kinetic Design that featured a large lower trapezoidal grill on many vehicles.
Mazda has used the Nagare design language, which used flowing lines influenced by wind.[6] Mazda later used the Kodo design language.[7]
Other examples include the Dynamic Shield design language used by Mitsubishi,[8] and Dynamic x Solid used by Subaru.[9]
Software
In the context of graphical user interfaces, for example, human interface guidelines can be thought of as design languages for applications.[10]
Examples
Apple has created some software design languages. Since 1997, the Platinum design language was used for Mac OS 8 and 9 and emphasized various shades of gray. From 2000 onwards, the Aqua design language was introduced with Mac OS X 10.0 and emphasized flatter interface elements and liberal use of reflection effects and transparency.[11][12] Brushed metal, first used in 1999, was intended for programs such as QuickTime Player that mimic the operation or interface of common devices. In June 2025 during WWDC 2025, Apple introduce a new unified design language known as Liquid Glass across Apple platforms featuring an optical properties of glass with a sense of fluidity.[13]
Microsoft has used the Aero design language for Windows Vista and Windows 7 which appeared in 2006. The Aero design language used semitransparent glass like window borders as a distinctive feature. The Metro design language focused on simplified icons, absence of clutter and basic shapes. Metro was used in many Microsoft products including Windows 8, Windows Phone 7, the Xbox 360 and Xbox One.[14][15] The Fluent Design System was developed as a revamp of Metro in 2017, and used more motion, depth and translucency effects.[16]
Google developed Material Design in 2014 which emphasizes smooth responsive animations and transitions, padding and depth using lighting and shadows. Many of Google's products have implemented Material Design including Android, Android applications and web applications.[17]
Flat design is a design language and style that simplifies elements and colours.[18] It has influenced user interface design in Microsoft's Zune, Android starting with Android 4.0,[19] iOS 7[20] and OS X Yosemite.[21]
In 2021, the GNOME Project expanded its focus of Adwaita to allow it to prosper as a design language for GNOME.[22]
See also
- Graphic design
- Human interface guidelines
- Object-modeling language
- Complementary architecture
- Pattern language
- User interface design
References
External links
- ↑ a b Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".
- ↑ Script error: No such module "citation/CS1".