SlideShare a Scribd company logo
Agenda
1. What is UX/UI Design?
2. What is the UX Design Process?
3. Intro to Material Design
4. Material Design (Design & Components)
WHAT IS UX/UI DESIGN?
Spotify Apple Music
Question:
What does UX or UI Design mean to you?
UX Design = User Experience Design
“User experience encompasses all aspects of the end-user’s interaction with the
company, its services, and its products.”
- Don Norman, Cognitive Scientist & User Experience Architect
User
Product or
Service
UX
UI Design = User Interaction Design
UI is the point of interaction between the user and a digital device or product - it
considers the visual look, feel, and interactivity of the product.
UX UI
UX design is all about the overall feel of the
experience, while UI design is all about how the
product’s interfaces look and function.
In Summary...
Design is about solving problems.
It involves identifying something that is not working,
digging deep into the roots, exploring solutions to fix
it, and then deciding and designing a solution that
addresses the problem.
WHAT IS THE UX DESIGN PROCESS?
The UX Design Process
The UX design process tends to differ from business to business, but these 6
stages tend to be the most followed.
Understand Research Analyze Design Launch Evaluate
INTRO TO MATERIAL DESIGN
Google’s UX mantra:
“Focus on the user and all else will follow. With this in
mind, we seek to design experiences that inspire and
enlighten our users.”
What is Material Design?
Material Design is a design language
developed by Google in 2014. It’s a visual
language that synthesizes classic
principles of good design with innovation
of technology and science.
It offers certain design standards and
resources for developing applications
across Android, web, and iOS devices -
making developer and designer lives a lot
easier!
Principles of Material Design
Material Design is rooted in a few principles:
1. Material is the metaphor
2. Bold, Graphic, and Intentional
3. Motion Provides Meaning
Why Material Design?
There are many design styles out there like Flat Design, Skeuomorphism, and more
- so why choose Material Design?
Flat Design Skeuomorphism
Pros of Material Design
1. Material design provides clear guidance for developing apps on Android,
web, and iOS
2. If you want to have animation on your product, the material provides many
built-in resources and code to make your life easier
3. Material design provides guidelines for developing the app, so it is more
efficient and your quality of work is pretty much guaranteed
MATERIAL DESIGN
(DESIGN & COMPONENTS)
Material Design Components
Material Components are interactive building blocks for creating a user interface,
and include a built-in states system to communicate focus, selection, activation,
error, hover, press, drag, and disabled states. Component libraries are available
for Android, iOS, Flutter, and the web.
Material Design Color
Material design has a great collection
of colors which can made use by the
designers for applying them to their UI.
Principles:
1. Hierarchical
2. Legible
3. Expressive
Material Design Color
Primary color is the color displayed
most frequently across your app’s
screens and components
Secondary color provides more ways
to accent and distinguish your product.
Adding a secondary color is optional,
and should be applied sparingly to
accent select parts of your UI
Material Design Color Tool
Material Design Writing and Typography
The Material Design type scale provides
13 typography styles for everything from
headlines to body text and captions.
Each style has a clear meaning and
intended application within an
interface.
Material Design Elevation
Elevation is the relative distance between two surfaces along the z-axis
Surfaces at different elevations…
1. Allow surfaces to move in front of
and behind other surfaces
2. Reflect spatial relationships
3. Focus attention on the highest
elevation
Material Design Elevation
[DO] Top app bar overlaps
the cards, indicating it is in
front of the cards.
[DON’T]Without visual cues of surface edges
and overlap, it’s not possible to determine which
surfaces are above the others
Material Design Shape
Applying shape styles can help direct
attention or identify components,
communicate their state, and express your
brand.
Usage:
1. Emphasis
2. Identity
3. State
4. Branding
Material Design Shape
[DO] The menu has an arrow-like
corner that points toward the
navigation drawer, reinforcing that
these components are connected
[DON’T] Don’t use shapes in ways that
are ambiguous.
Icons in Material Design
An entire collection of
consistent stylized logos
and symbols for
common actions and
items.
You can download on
your desktop and use
them in your digital
products!
ANY QUESTIONS?

More Related Content

What's hot

What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
iFactory Digital
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
Aciron Consulting
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
aayush_jain_87
 
iOS Human Interface Design Guideline Part 1
iOS Human Interface Design Guideline Part 1iOS Human Interface Design Guideline Part 1
iOS Human Interface Design Guideline Part 1
Sansern Wuthirat
 
Elements of user experience presentation
Elements of user experience presentationElements of user experience presentation
Elements of user experience presentation
Neel Khan
 
Ui design
Ui designUi design
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
Mohamed Shehata
 
UI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesUI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best Practices
Samuel Chow
 
What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)
iFactory Digital
 
Designing apps for Android
Designing apps for AndroidDesigning apps for Android
Designing apps for Android
Lorica Claesson
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
xyz01
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
Madhuri Garg
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
Emerentiana Meicy
 
Mobile UI / UX Trends
Mobile UI / UX TrendsMobile UI / UX Trends
Mobile UI / UX Trends
Evgeny Tsarkov
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
Empatika
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
Shrestha Raaz
 
Ux & ui
Ux & uiUx & ui
Ux & ui
Fisher Liao
 
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Ashiq Uz Zoha
 
User Interface Design @iRajLal
User Interface Design @iRajLalUser Interface Design @iRajLal
User Interface Design @iRajLal
Raj Lal
 
Importance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- StackonImportance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- Stackon
najam gs
 

What's hot (20)

What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
UX/UI Design and How It Works
UX/UI Design and How It WorksUX/UI Design and How It Works
UX/UI Design and How It Works
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
iOS Human Interface Design Guideline Part 1
iOS Human Interface Design Guideline Part 1iOS Human Interface Design Guideline Part 1
iOS Human Interface Design Guideline Part 1
 
Elements of user experience presentation
Elements of user experience presentationElements of user experience presentation
Elements of user experience presentation
 
Ui design
Ui designUi design
Ui design
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
UI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best PracticesUI Design - Lessons Learned, Principles, and Best Practices
UI Design - Lessons Learned, Principles, and Best Practices
 
What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)What’s the difference between a UX and UI designer? (Part one)
What’s the difference between a UX and UI designer? (Part one)
 
Designing apps for Android
Designing apps for AndroidDesigning apps for Android
Designing apps for Android
 
Edge903 Project
Edge903 ProjectEdge903 Project
Edge903 Project
 
UX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMeUX/UI design process - Studio CreativeMe
UX/UI design process - Studio CreativeMe
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
 
Mobile UI / UX Trends
Mobile UI / UX TrendsMobile UI / UX Trends
Mobile UI / UX Trends
 
Ui Design And Usability For Everybody
Ui Design And Usability For EverybodyUi Design And Usability For Everybody
Ui Design And Usability For Everybody
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
Ux & ui
Ux & uiUx & ui
Ux & ui
 
Some Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile ApplicationsSome Dos and Don’ts in UI/UX Design of Mobile Applications
Some Dos and Don’ts in UI/UX Design of Mobile Applications
 
User Interface Design @iRajLal
User Interface Design @iRajLalUser Interface Design @iRajLal
User Interface Design @iRajLal
 
Importance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- StackonImportance of UX-UI in Android/iOS Development- Stackon
Importance of UX-UI in Android/iOS Development- Stackon
 

Similar to Building Beautiful Flutter Apps

UI.docx
UI.docxUI.docx
UI.docx
UI.docxUI.docx
Impact of Visual Design on UX
Impact of Visual Design on UXImpact of Visual Design on UX
Impact of Visual Design on UX
Mayank Ranjan
 
Interactive cues in flat design
Interactive cues in flat designInteractive cues in flat design
Interactive cues in flat design
Ming-Liang Liu
 
Guide 101_ Material Design in Android App Development.pdf
Guide 101_ Material Design in Android App Development.pdfGuide 101_ Material Design in Android App Development.pdf
Guide 101_ Material Design in Android App Development.pdf
BOSC Tech Labs
 
UI content
UI contentUI content
UI content
MUDDUKRISHNA14
 
essentials-of-ui-design.pdf
essentials-of-ui-design.pdfessentials-of-ui-design.pdf
essentials-of-ui-design.pdf
SandeshGyawali2
 
Shantanu kulkarni-Graphic and UIUX Designer
Shantanu kulkarni-Graphic and UIUX DesignerShantanu kulkarni-Graphic and UIUX Designer
Shantanu kulkarni-Graphic and UIUX Designer
ShantanuKulkarni54
 
UIUX Design - report on summer training.docx
UIUX Design - report on summer training.docxUIUX Design - report on summer training.docx
UIUX Design - report on summer training.docx
bhawnamangla2
 
user interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdfuser interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdf
ssuser590cc81
 
What are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma CampusWhat are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma Campus
Ashu Pal
 
Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014
Jessie Doan
 
Ux design process
Ux design processUx design process
Ux design process
Prateek Agrawal
 
584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx
hirenmkaklotar19
 
Top 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX DesignersTop 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX Designers
topseowebmaster
 
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Fonz Morris
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
Tunde Ojediran
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
topseowebmaster
 
Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1
Durgesh Pandey
 
Intro to UIUX.pptx
Intro to UIUX.pptxIntro to UIUX.pptx
Intro to UIUX.pptx
ADRIANASAAGCAOILI
 

Similar to Building Beautiful Flutter Apps (20)

UI.docx
UI.docxUI.docx
UI.docx
 
UI.docx
UI.docxUI.docx
UI.docx
 
Impact of Visual Design on UX
Impact of Visual Design on UXImpact of Visual Design on UX
Impact of Visual Design on UX
 
Interactive cues in flat design
Interactive cues in flat designInteractive cues in flat design
Interactive cues in flat design
 
Guide 101_ Material Design in Android App Development.pdf
Guide 101_ Material Design in Android App Development.pdfGuide 101_ Material Design in Android App Development.pdf
Guide 101_ Material Design in Android App Development.pdf
 
UI content
UI contentUI content
UI content
 
essentials-of-ui-design.pdf
essentials-of-ui-design.pdfessentials-of-ui-design.pdf
essentials-of-ui-design.pdf
 
Shantanu kulkarni-Graphic and UIUX Designer
Shantanu kulkarni-Graphic and UIUX DesignerShantanu kulkarni-Graphic and UIUX Designer
Shantanu kulkarni-Graphic and UIUX Designer
 
UIUX Design - report on summer training.docx
UIUX Design - report on summer training.docxUIUX Design - report on summer training.docx
UIUX Design - report on summer training.docx
 
user interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdfuser interfaceuiuxintroduction-191206225755.pdf
user interfaceuiuxintroduction-191206225755.pdf
 
What are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma CampusWhat are the Key Features of UI UX Technology? - Croma Campus
What are the Key Features of UI UX Technology? - Croma Campus
 
Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014Uxpin mobile UI Design Patterns 2014
Uxpin mobile UI Design Patterns 2014
 
Ux design process
Ux design processUx design process
Ux design process
 
584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx584697015-UI-and-UX-hiten presentation.pptx
584697015-UI-and-UX-hiten presentation.pptx
 
Top 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX DesignersTop 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX Designers
 
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
Coursera | Alphonso Morris - What’s Product Design vs UX vs UI? What is Growt...
 
Dev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trendsDev fest ile ife 2014-ux, material design and trends
Dev fest ile ife 2014-ux, material design and trends
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
 
Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1
 
Intro to UIUX.pptx
Intro to UIUX.pptxIntro to UIUX.pptx
Intro to UIUX.pptx
 

More from SheilaJimenezMorejon

Add a backend and deploy!
Add a backend and deploy!Add a backend and deploy!
Add a backend and deploy!
SheilaJimenezMorejon
 
Build a chatroom!
Build a chatroom!Build a chatroom!
Build a chatroom!
SheilaJimenezMorejon
 
Introduction to Applied Machine Learning
Introduction to Applied Machine LearningIntroduction to Applied Machine Learning
Introduction to Applied Machine Learning
SheilaJimenezMorejon
 
Intro to React
Intro to ReactIntro to React
Intro to React
SheilaJimenezMorejon
 
Git & GitHub WorkShop
Git & GitHub WorkShopGit & GitHub WorkShop
Git & GitHub WorkShop
SheilaJimenezMorejon
 
Information session
Information sessionInformation session
Information session
SheilaJimenezMorejon
 
Flutter introduction
Flutter introductionFlutter introduction
Flutter introduction
SheilaJimenezMorejon
 

More from SheilaJimenezMorejon (7)

Add a backend and deploy!
Add a backend and deploy!Add a backend and deploy!
Add a backend and deploy!
 
Build a chatroom!
Build a chatroom!Build a chatroom!
Build a chatroom!
 
Introduction to Applied Machine Learning
Introduction to Applied Machine LearningIntroduction to Applied Machine Learning
Introduction to Applied Machine Learning
 
Intro to React
Intro to ReactIntro to React
Intro to React
 
Git & GitHub WorkShop
Git & GitHub WorkShopGit & GitHub WorkShop
Git & GitHub WorkShop
 
Information session
Information sessionInformation session
Information session
 
Flutter introduction
Flutter introductionFlutter introduction
Flutter introduction
 

Recently uploaded

UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
DianaGray10
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
Zilliz
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
Matthew Sinclair
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Malak Abu Hammad
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
SOFTTECHHUB
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Safe Software
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
panagenda
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
Adtran
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
Tomaz Bratanic
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
Matthew Sinclair
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
DianaGray10
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Speck&Tech
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
Pixlogix Infotech
 

Recently uploaded (20)

UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5UiPath Test Automation using UiPath Test Suite series, part 5
UiPath Test Automation using UiPath Test Suite series, part 5
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
Infrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI modelsInfrastructure Challenges in Scaling RAG with Custom AI models
Infrastructure Challenges in Scaling RAG with Custom AI models
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
20240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 202420240607 QFM018 Elixir Reading List May 2024
20240607 QFM018 Elixir Reading List May 2024
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdfUnlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
Unlock the Future of Search with MongoDB Atlas_ Vector Search Unleashed.pdf
 
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
Goodbye Windows 11: Make Way for Nitrux Linux 3.5.0!
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Driving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success StoryDriving Business Innovation: Latest Generative AI Advancements & Success Story
Driving Business Innovation: Latest Generative AI Advancements & Success Story
 
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAUHCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
HCL Notes und Domino Lizenzkostenreduzierung in der Welt von DLAU
 
Pushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 daysPushing the limits of ePRTC: 100ns holdover for 100 days
Pushing the limits of ePRTC: 100ns holdover for 100 days
 
GraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracyGraphRAG for Life Science to increase LLM accuracy
GraphRAG for Life Science to increase LLM accuracy
 
20240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 202420240609 QFM020 Irresponsible AI Reading List May 2024
20240609 QFM020 Irresponsible AI Reading List May 2024
 
Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1Communications Mining Series - Zero to Hero - Session 1
Communications Mining Series - Zero to Hero - Session 1
 
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
Cosa hanno in comune un mattoncino Lego e la backdoor XZ?
 
Best 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERPBest 20 SEO Techniques To Improve Website Visibility In SERP
Best 20 SEO Techniques To Improve Website Visibility In SERP
 

Building Beautiful Flutter Apps

  • 1.
  • 2. Agenda 1. What is UX/UI Design? 2. What is the UX Design Process? 3. Intro to Material Design 4. Material Design (Design & Components)
  • 3. WHAT IS UX/UI DESIGN?
  • 5.
  • 6.
  • 7. Question: What does UX or UI Design mean to you?
  • 8. UX Design = User Experience Design “User experience encompasses all aspects of the end-user’s interaction with the company, its services, and its products.” - Don Norman, Cognitive Scientist & User Experience Architect User Product or Service UX
  • 9. UI Design = User Interaction Design UI is the point of interaction between the user and a digital device or product - it considers the visual look, feel, and interactivity of the product. UX UI
  • 10. UX design is all about the overall feel of the experience, while UI design is all about how the product’s interfaces look and function. In Summary...
  • 11. Design is about solving problems. It involves identifying something that is not working, digging deep into the roots, exploring solutions to fix it, and then deciding and designing a solution that addresses the problem.
  • 12. WHAT IS THE UX DESIGN PROCESS?
  • 13. The UX Design Process The UX design process tends to differ from business to business, but these 6 stages tend to be the most followed. Understand Research Analyze Design Launch Evaluate
  • 15. Google’s UX mantra: “Focus on the user and all else will follow. With this in mind, we seek to design experiences that inspire and enlighten our users.”
  • 16. What is Material Design? Material Design is a design language developed by Google in 2014. It’s a visual language that synthesizes classic principles of good design with innovation of technology and science. It offers certain design standards and resources for developing applications across Android, web, and iOS devices - making developer and designer lives a lot easier!
  • 17. Principles of Material Design Material Design is rooted in a few principles: 1. Material is the metaphor 2. Bold, Graphic, and Intentional 3. Motion Provides Meaning
  • 18. Why Material Design? There are many design styles out there like Flat Design, Skeuomorphism, and more - so why choose Material Design? Flat Design Skeuomorphism
  • 19. Pros of Material Design 1. Material design provides clear guidance for developing apps on Android, web, and iOS 2. If you want to have animation on your product, the material provides many built-in resources and code to make your life easier 3. Material design provides guidelines for developing the app, so it is more efficient and your quality of work is pretty much guaranteed
  • 21. Material Design Components Material Components are interactive building blocks for creating a user interface, and include a built-in states system to communicate focus, selection, activation, error, hover, press, drag, and disabled states. Component libraries are available for Android, iOS, Flutter, and the web.
  • 22. Material Design Color Material design has a great collection of colors which can made use by the designers for applying them to their UI. Principles: 1. Hierarchical 2. Legible 3. Expressive
  • 23. Material Design Color Primary color is the color displayed most frequently across your app’s screens and components Secondary color provides more ways to accent and distinguish your product. Adding a secondary color is optional, and should be applied sparingly to accent select parts of your UI
  • 25. Material Design Writing and Typography The Material Design type scale provides 13 typography styles for everything from headlines to body text and captions. Each style has a clear meaning and intended application within an interface.
  • 26. Material Design Elevation Elevation is the relative distance between two surfaces along the z-axis Surfaces at different elevations… 1. Allow surfaces to move in front of and behind other surfaces 2. Reflect spatial relationships 3. Focus attention on the highest elevation
  • 27. Material Design Elevation [DO] Top app bar overlaps the cards, indicating it is in front of the cards. [DON’T]Without visual cues of surface edges and overlap, it’s not possible to determine which surfaces are above the others
  • 28. Material Design Shape Applying shape styles can help direct attention or identify components, communicate their state, and express your brand. Usage: 1. Emphasis 2. Identity 3. State 4. Branding
  • 29. Material Design Shape [DO] The menu has an arrow-like corner that points toward the navigation drawer, reinforcing that these components are connected [DON’T] Don’t use shapes in ways that are ambiguous.
  • 30. Icons in Material Design An entire collection of consistent stylized logos and symbols for common actions and items. You can download on your desktop and use them in your digital products!