SlideShare une entreprise Scribd logo
1  sur  28
Télécharger pour lire hors ligne
FLAT
DESIGN
N. Lakshmi Narasimhan
WHAT IS FLAT DESIGN?
Flat design is a two-dimensional style in design which lost all stylistic
elements that enhances the image up and make it seem three-dimensional.
DON’T FOCUS
• Gradients
• Drop shadows
• Textures
FOCUS
• Content
• Color
• Typography
FEATURES OF FLAT DESIGN:
Minimalist approach Focus on color
Focus on typography Simple elements
Principles
Of
FLAT
DESIGN
1. No Added Effects
• Flat design employs a distinct two-dimensional style that is simply flat.
• The concept works without drop shadows, bevels, embossing, gradients or
other tools that add depth
• It relies on placement of elements to make successful projects easy for users to
understand and interact with.
• Popular for website, app and mobile design.
• With small screens, there are fewer buttons and options, making a flat
interface fairly easy to use.
2. Simple Elements
• Flat design uses many simple UI elements, such as buttons and
icons.
• Simple shapes, such as rectangles, circles or squares and allow each
shape to stand alone.
• Each UI element should be simple and easy to click or tap.
Interaction should be intuitive for users without a lot of in-
design explanation.
3. Focus on Typography
• Because of the simple nature, typography is extremely important.
• Type should also be bold, simple and efficiently, in an effort to have
a consistent tone visually and textually.
• Type should also tell users how to use the design for increased ease
of use and interactivity.
4. Focus on Color
• Color is a major part of flat design.
• Color palettes in flat design often contain many more hues as well.
• While most color palettes focus on two or three colors at most, flat
design palettes may use six to eight colors equally.
5. Minimalist Approach
• Flat design works well with an overall minimalist design approach.
• Avoid too many bells and whistles in the overall site design.
• If you want to add visuals, opt for simple photography.
History
Of
FLAT
DESIGN
Flat design
originates from the
Swiss style
(aka International
Typographic Style)
which dominated the
design scene back in
the 1950s
It came into
existence in 1920s in
Russia, the
Netherlands and
Germany, and
became really
popular in 1950s in
Switzerland when
the world-famous
Helvetica typeface
was designed (back
in the day, it was
called Neue Haas
Grotesk).
THE ORIGINS: SWISS DESIGN AND
MINIMALISM
FLAT
DESIGN in
Modern
Times
Now….
• Quick forward to the twenty-first century. Every flat designer knows
that its modern history starts on the day when two opposing
companies – Microsoft and Apple – started their design combat.
Apple replaced
its skeuomorphic design
and went completely flat
in iOS7.
Microsoft created the
Zune media player in
2006.This player’s
display focused on
typography.And the
design got extended to
Windows Phone 7 in 2010
THE PROS
Of
FLAT
DESIGN
1. Compatibility With Responsive
Design
Flat design’s principles can be applied to other
design categories, but its grid-based layouts and
simple graphics are particularly suited to web and
mobile design since they’re easily abled to resized
or rearranged to display on different devices and
screen sizes.
2. Flexible Framework
Grids are also a flexible framework that can be
shaped into many configurations. This allows
designers to create an arrangement that best
and showcases their content, rather than
squeezing content into a limiting pre-determined
layout.
3. Clean, Readable Typography
• Flat qualities also extend to designers’
approach to typesetting, which often
results in larger, more streamlined
typography.The absence of shadows
and other effects makes text easier to
read.
• Sans-serif typefaces are a popular
choice and a good match for this
style.
THE CONS
Of
FLAT
DESIGN
1. Compromised Usability
• In an effort to emphasize flat design’s clean, streamlined qualities,
some designers fall into the trap of focusing too much on
aesthetics — to the extent that it negatively impacts a design’s
usability.
• It can be hard to tell what is or is not clickable (since everything is
flat, on the same visual plane). Important features and actions can
be hidden from view, or visual cues that users are accustomed to
might be missing — all in the pursuit of simplicity.
2. Lack of Distinctiveness
• Every business, brand, or individual planning a design project wants
results that represent their unique qualities.
• One of the downsides of flat design is that sticking to a simplistic,
narrowly defined visual style often results in designs that look very
or somewhat similar.
• Designers working in a purely flat style have a limited choice of
principles to apply to their projects.
3. Overly Focused on Trendy
Aesthetics
• Flat design regularly shows up on design trend lists
• But one of the problems with trends is that some designers will apply
them just to follow the crowd, without really thinking about their
usefulness.This can result in purposeless design choices — for
instance, early flat design’s fondness for long shadows.
Future
of
FLAT
DESIGN
1. Flat 2.0
• As designers have experimented with flat design over the past several years, many have noticed some of
the pros and cons and decided to adjust the style accordingly.
• While early iterations of flat design were characterized by a strict visual simplicity, recent developments
have seen the subtle reintroduction of qualities like shadow and texture — for both aesthetic and
functional reasons.
• The result of these tweaks resulted in a style often referred to as “Flat 2.0” or “almost-flat” design.
• This style is more of a compromise: you still get the clean simplicity of flat design, but add some subtly
skeuomorphic qualities for visual variety and improved usability.
• Another commonly used hybrid approach is the addition of photography rather than just flat illustrations
or icons.
For Instance- Difference between Flat 1.0 and Flat 2.0
2. Material Design
• Having many characteristics in common with almost-flat design, material design is a visual
language developed by Google that emphasizes grid-based layouts and features “deliberate
color choices, edge-to-edge imagery, large-scale typography, and intentional white space”
a bold, graphic look.
• The style uses a paper-inspired approach with “visual cues that are grounded in reality” and
“familiar tactile attributes” to help users quickly understand and navigate designs — which
sounds like a nod to skeuomorphism.
• Though material design clearly features elements of flat design, its attention to light and
shadow, motion, and other details demonstrates that flat design can be adapted to be more
useful and flexible.
For Instance- Difference between Flat Design and Material Design
Conclusion:
Thus while big brands like Microsoft, Apple, and Google definitely have
influence when it comes to popularizing design styles, it’s the
designers who take the trends and run with them to create something
new. It’s the designers who set the new trends and make the popular.
THANK YOU

Contenu connexe

Tendances

Architectural Design 1 Lectures by Dr. Yasser Mahgoub - Lecture 5 Concept
Architectural Design 1 Lectures by Dr. Yasser Mahgoub - Lecture 5 ConceptArchitectural Design 1 Lectures by Dr. Yasser Mahgoub - Lecture 5 Concept
Architectural Design 1 Lectures by Dr. Yasser Mahgoub - Lecture 5 ConceptGalala University
 
Designing For Android
Designing For AndroidDesigning For Android
Designing For AndroidRachit Shukla
 
Graphic and Web Design Principles
Graphic and Web Design Principles                      Graphic and Web Design Principles
Graphic and Web Design Principles Rob Nunez
 

Tendances (6)

Architectural Design 1 Lectures by Dr. Yasser Mahgoub - Lecture 5 Concept
Architectural Design 1 Lectures by Dr. Yasser Mahgoub - Lecture 5 ConceptArchitectural Design 1 Lectures by Dr. Yasser Mahgoub - Lecture 5 Concept
Architectural Design 1 Lectures by Dr. Yasser Mahgoub - Lecture 5 Concept
 
Visual Design Elements
Visual Design ElementsVisual Design Elements
Visual Design Elements
 
Thinking in design
Thinking in designThinking in design
Thinking in design
 
Designing For Android
Designing For AndroidDesigning For Android
Designing For Android
 
Graphic and Web Design Principles
Graphic and Web Design Principles                      Graphic and Web Design Principles
Graphic and Web Design Principles
 
Web design trends
Web design trendsWeb design trends
Web design trends
 

Similaire à Flat design

Flat Design - A Primer
Flat Design - A PrimerFlat Design - A Primer
Flat Design - A Primerwedu, Inc
 
Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016Lewis Lin 🦊
 
Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016Jessie Doan
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Bookjesús Santo
 
Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017nannudavis
 
Graphic Designing Course in Rohini | Graphic Designing Course in Pitampura
Graphic Designing Course in Rohini | Graphic Designing Course in PitampuraGraphic Designing Course in Rohini | Graphic Designing Course in Pitampura
Graphic Designing Course in Rohini | Graphic Designing Course in Pitampurakhushboo4894
 
Flat Design - Overview
Flat Design - OverviewFlat Design - Overview
Flat Design - OverviewJoe Buchmann
 
Wk23 2014 Tuesday Meeting
Wk23 2014 Tuesday MeetingWk23 2014 Tuesday Meeting
Wk23 2014 Tuesday MeetingYannick Lin
 
Gd1 Chapter 3 - Design
Gd1 Chapter 3 - DesignGd1 Chapter 3 - Design
Gd1 Chapter 3 - Designmjb77ny
 
Mobile Design
Mobile DesignMobile Design
Mobile DesignLifna C.S
 
Graphic design by Muhammad Mujeeb Riaz
Graphic design by Muhammad Mujeeb RiazGraphic design by Muhammad Mujeeb Riaz
Graphic design by Muhammad Mujeeb RiazMujeeb Riaz
 
Graphic Design for Dummies
Graphic Design for DummiesGraphic Design for Dummies
Graphic Design for DummiesYousra Beddaou
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataMohamed Shehata
 
30 GD1 Chapter 3a Design.pptx
30 GD1 Chapter 3a Design.pptx30 GD1 Chapter 3a Design.pptx
30 GD1 Chapter 3a Design.pptxmjb77ny
 
GD1 Chapter 3a Design.pptx
GD1 Chapter 3a Design.pptxGD1 Chapter 3a Design.pptx
GD1 Chapter 3a Design.pptxmjb77ny
 
Element of design
Element of designElement of design
Element of designRahul Gupta
 
Flat Design Trends 2014 Kuala Lumpur Malaysia
Flat Design Trends 2014 Kuala Lumpur Malaysia Flat Design Trends 2014 Kuala Lumpur Malaysia
Flat Design Trends 2014 Kuala Lumpur Malaysia Celeste Kirby-Brown
 
The Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for IDThe Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for IDJames Washok
 

Similaire à Flat design (20)

Flat Design - A Primer
Flat Design - A PrimerFlat Design - A Primer
Flat Design - A Primer
 
Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016Web Design Trends 2015 & 2016
Web Design Trends 2015 & 2016
 
Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016Web Design Book Of Trends 2015 2016
Web Design Book Of Trends 2015 2016
 
Web Design Trends e-Book
 Web Design Trends e-Book Web Design Trends e-Book
Web Design Trends e-Book
 
Web Design Trends 2017
Web Design Trends 2017Web Design Trends 2017
Web Design Trends 2017
 
Week2 lecture-whatiswebdesign-part1
Week2 lecture-whatiswebdesign-part1Week2 lecture-whatiswebdesign-part1
Week2 lecture-whatiswebdesign-part1
 
Graphic Designing Course in Rohini | Graphic Designing Course in Pitampura
Graphic Designing Course in Rohini | Graphic Designing Course in PitampuraGraphic Designing Course in Rohini | Graphic Designing Course in Pitampura
Graphic Designing Course in Rohini | Graphic Designing Course in Pitampura
 
Flat Design - Overview
Flat Design - OverviewFlat Design - Overview
Flat Design - Overview
 
Wk23 2014 Tuesday Meeting
Wk23 2014 Tuesday MeetingWk23 2014 Tuesday Meeting
Wk23 2014 Tuesday Meeting
 
Gd1 Chapter 3 - Design
Gd1 Chapter 3 - DesignGd1 Chapter 3 - Design
Gd1 Chapter 3 - Design
 
UI / UX Design Presentation
UI / UX Design PresentationUI / UX Design Presentation
UI / UX Design Presentation
 
Mobile Design
Mobile DesignMobile Design
Mobile Design
 
Graphic design by Muhammad Mujeeb Riaz
Graphic design by Muhammad Mujeeb RiazGraphic design by Muhammad Mujeeb Riaz
Graphic design by Muhammad Mujeeb Riaz
 
Graphic Design for Dummies
Graphic Design for DummiesGraphic Design for Dummies
Graphic Design for Dummies
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
30 GD1 Chapter 3a Design.pptx
30 GD1 Chapter 3a Design.pptx30 GD1 Chapter 3a Design.pptx
30 GD1 Chapter 3a Design.pptx
 
GD1 Chapter 3a Design.pptx
GD1 Chapter 3a Design.pptxGD1 Chapter 3a Design.pptx
GD1 Chapter 3a Design.pptx
 
Element of design
Element of designElement of design
Element of design
 
Flat Design Trends 2014 Kuala Lumpur Malaysia
Flat Design Trends 2014 Kuala Lumpur Malaysia Flat Design Trends 2014 Kuala Lumpur Malaysia
Flat Design Trends 2014 Kuala Lumpur Malaysia
 
The Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for IDThe Science of Visual Design: Creating Strong Graphics for ID
The Science of Visual Design: Creating Strong Graphics for ID
 

Dernier

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaBarusRa
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessThink 360 Studio
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfIBM
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosaannemarleenolthof1
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 

Dernier (18)

Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara RakovskaAMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
AMBER GRAIN EMBROIDERY | Growing folklore elements | Barbara Rakovska
 
UI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design SuccessUI UX Process for SaaS Product Design Success
UI UX Process for SaaS Product Design Success
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdfUnlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
Unlocking Conversion_ The Art of Turning Visitors into Loyal Customers.pdf
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa LetšosaModels of Disability - an overview by Marno Retief & Rantoa Letšosa
Models of Disability - an overview by Marno Retief & Rantoa Letšosa
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 

Flat design

  • 2. WHAT IS FLAT DESIGN? Flat design is a two-dimensional style in design which lost all stylistic elements that enhances the image up and make it seem three-dimensional. DON’T FOCUS • Gradients • Drop shadows • Textures FOCUS • Content • Color • Typography
  • 3. FEATURES OF FLAT DESIGN: Minimalist approach Focus on color Focus on typography Simple elements
  • 5. 1. No Added Effects • Flat design employs a distinct two-dimensional style that is simply flat. • The concept works without drop shadows, bevels, embossing, gradients or other tools that add depth • It relies on placement of elements to make successful projects easy for users to understand and interact with. • Popular for website, app and mobile design. • With small screens, there are fewer buttons and options, making a flat interface fairly easy to use.
  • 6. 2. Simple Elements • Flat design uses many simple UI elements, such as buttons and icons. • Simple shapes, such as rectangles, circles or squares and allow each shape to stand alone. • Each UI element should be simple and easy to click or tap. Interaction should be intuitive for users without a lot of in- design explanation.
  • 7. 3. Focus on Typography • Because of the simple nature, typography is extremely important. • Type should also be bold, simple and efficiently, in an effort to have a consistent tone visually and textually. • Type should also tell users how to use the design for increased ease of use and interactivity.
  • 8. 4. Focus on Color • Color is a major part of flat design. • Color palettes in flat design often contain many more hues as well. • While most color palettes focus on two or three colors at most, flat design palettes may use six to eight colors equally.
  • 9. 5. Minimalist Approach • Flat design works well with an overall minimalist design approach. • Avoid too many bells and whistles in the overall site design. • If you want to add visuals, opt for simple photography.
  • 11. Flat design originates from the Swiss style (aka International Typographic Style) which dominated the design scene back in the 1950s It came into existence in 1920s in Russia, the Netherlands and Germany, and became really popular in 1950s in Switzerland when the world-famous Helvetica typeface was designed (back in the day, it was called Neue Haas Grotesk). THE ORIGINS: SWISS DESIGN AND MINIMALISM
  • 13. Now…. • Quick forward to the twenty-first century. Every flat designer knows that its modern history starts on the day when two opposing companies – Microsoft and Apple – started their design combat. Apple replaced its skeuomorphic design and went completely flat in iOS7. Microsoft created the Zune media player in 2006.This player’s display focused on typography.And the design got extended to Windows Phone 7 in 2010
  • 15. 1. Compatibility With Responsive Design Flat design’s principles can be applied to other design categories, but its grid-based layouts and simple graphics are particularly suited to web and mobile design since they’re easily abled to resized or rearranged to display on different devices and screen sizes.
  • 16. 2. Flexible Framework Grids are also a flexible framework that can be shaped into many configurations. This allows designers to create an arrangement that best and showcases their content, rather than squeezing content into a limiting pre-determined layout.
  • 17. 3. Clean, Readable Typography • Flat qualities also extend to designers’ approach to typesetting, which often results in larger, more streamlined typography.The absence of shadows and other effects makes text easier to read. • Sans-serif typefaces are a popular choice and a good match for this style.
  • 19. 1. Compromised Usability • In an effort to emphasize flat design’s clean, streamlined qualities, some designers fall into the trap of focusing too much on aesthetics — to the extent that it negatively impacts a design’s usability. • It can be hard to tell what is or is not clickable (since everything is flat, on the same visual plane). Important features and actions can be hidden from view, or visual cues that users are accustomed to might be missing — all in the pursuit of simplicity.
  • 20. 2. Lack of Distinctiveness • Every business, brand, or individual planning a design project wants results that represent their unique qualities. • One of the downsides of flat design is that sticking to a simplistic, narrowly defined visual style often results in designs that look very or somewhat similar. • Designers working in a purely flat style have a limited choice of principles to apply to their projects.
  • 21. 3. Overly Focused on Trendy Aesthetics • Flat design regularly shows up on design trend lists • But one of the problems with trends is that some designers will apply them just to follow the crowd, without really thinking about their usefulness.This can result in purposeless design choices — for instance, early flat design’s fondness for long shadows.
  • 23. 1. Flat 2.0 • As designers have experimented with flat design over the past several years, many have noticed some of the pros and cons and decided to adjust the style accordingly. • While early iterations of flat design were characterized by a strict visual simplicity, recent developments have seen the subtle reintroduction of qualities like shadow and texture — for both aesthetic and functional reasons. • The result of these tweaks resulted in a style often referred to as “Flat 2.0” or “almost-flat” design. • This style is more of a compromise: you still get the clean simplicity of flat design, but add some subtly skeuomorphic qualities for visual variety and improved usability. • Another commonly used hybrid approach is the addition of photography rather than just flat illustrations or icons.
  • 24. For Instance- Difference between Flat 1.0 and Flat 2.0
  • 25. 2. Material Design • Having many characteristics in common with almost-flat design, material design is a visual language developed by Google that emphasizes grid-based layouts and features “deliberate color choices, edge-to-edge imagery, large-scale typography, and intentional white space” a bold, graphic look. • The style uses a paper-inspired approach with “visual cues that are grounded in reality” and “familiar tactile attributes” to help users quickly understand and navigate designs — which sounds like a nod to skeuomorphism. • Though material design clearly features elements of flat design, its attention to light and shadow, motion, and other details demonstrates that flat design can be adapted to be more useful and flexible.
  • 26. For Instance- Difference between Flat Design and Material Design
  • 27. Conclusion: Thus while big brands like Microsoft, Apple, and Google definitely have influence when it comes to popularizing design styles, it’s the designers who take the trends and run with them to create something new. It’s the designers who set the new trends and make the popular.

Notes de l'éditeur

  1. But since flat design has been around for several years now and is still going strong, it’s likely more than just a passing trend. So let’s look at its pros and cons and where it might be headed in the future.