SlideShare a Scribd company logo
1 of 50
Design to
make life
simple.
UI/UX
Fundamentals
Understanding UI/UX
Following the process and approaches
Design Principals
Trying out
Principal Creative Designer, Cotiviti
Founder, ChordPedia
9841380214
dezudas@gmail.com
#dijup @dezudas,
Can you design our
app?
Sure! I’ll get right to it.
UI vs UX?
UI design is what makes an interface beautiful and
UX design is what makes an interface useful.
Strategy
User Needs
Product Objectives
Scope
Functional Specifications
Content requirements
Structure
Information Architecture
User Flow
Skeleton
Interface Design
Information Design
Surface
Sensory Experience
Visual Design
UX Mapping
• Empathy mapping help team members understand
the user’s mindset.
• Customer journey maps focus on a specific
customer’s interaction with a product or service.
• Experience Mapping generalize the concept of
customer-journey maps across user types and
products.
• Service Blueprinting are counterparts to customer
journey maps, focused on the employees.
UX Mapping
• User Journey
• Top Level view of user interaction with a
products or services
• Shows the different stages and scenarios of
the interaction
• Not too specific in terms of functionality or
interaction patterns
• User Flow
• Shows a specific path of flow a user follows
within a product
• Shows the details: screens, pages
functionality & interactions
Clarity comes first
Why is this here?
Does this make sense?
What other possibilities can I explore?
Provide clear,
meaningful feedback
Every action needs a reaction
Consistency matters
Style-guide
In doubt, use
established design
patterns
Logo in the top left corner
Navigation in top right corner
Use visual hierarchy.
I. Typography
II. White space (AKA Negative Space)
III. Color
Mood Board
an arrangement of images, materials, pieces
of text, etc. intended to evoke or project a
particular style or concept.
Design resources
Icons
Inspirations
Images
Colors
Typography
Optimization
Icons
• Ionicons has thousands of free icons to choose from for
personal and commercial usage.
• Font Awesome will be popular with the coders among
us. These icons are spread across several different
categories. Scalable and customizable with CSS.
• Flaticon is one of the largest searchable icon databases
with icons available in SVG, PNG, EPS and even PSD!
• Fontastic— If their selection of 9,000 icons aren’t
enough, simply create and customize your own icon
fonts with Fontastic.
• Icomoon— Iconography and icon management tool for
perfectionists.
• World Vector Logo— Logo collection.
UX design inspiration
• Daily UI daily user interface design prompt straight to
their inbox for 100 days straight.
• Dribbble show and tell for designers.
• Site Inspire is a wonderful resource which exhibits
some of the best and boldest in web and interaction
design .
• Land-Book product landing page gallery
• Call to Idea variety of different categories to help
• Media Queri responsive design inspiration
Blogs
• Hey Designer curated articles and covers a range of
diverse topics from prototyping to typography.
• Smashing Magazine Highly interesting content for
developers and designers
• Designer News platform, you can share and discover
interesting content as well as start discussions and
upvote good content.
Images
• Place It will put your images into context. People needs
to see things in context to ‘get’ it and with Place It you
can get mockups of anything.
• Unsplash has a wide range of beautiful, free to use
images and they upload 10 new photos every 10 days.
• The Stocks is a royalty free image aggregator only it’s
more than that because it also offers video, audio,
icons, fonts and colors. UX designers are spoilt for
choice!
• Pixabay has over half a million images and they’re all
free — perfect if you need to get your hands on a stock
photo, illustration or vector. Not bad at all.
Color
• Flat UI Colors has your back if you want to create
something with simple and minimal color design.
• LOLColors has curated color palette inspiration at your
fingertips. You can also see how popular certain color
palettes are too. And they get bonus points for their
name. LOL.
• UI Gradients is your one stop shop for all things
gradient. They’re are going through something of a
revival on the internet and we’re not complaining.
• https://www.colorsandfonts.com/gradients.html
Typography
• Google Fonts has a wide selection of well made fonts.
They’re free to use have cross platform display and no
license required.
• Typography Pocket Guide will help you brush up your
typography knowledge and help you become an expert
in all things type. If you’ve ever struggled with which
fonts to combine then this little website will set you
right.
• Font Squirrel is another free font website with a huge
selection of diverse and interesting typefaces. The fonts
are high quality and ready for commercial use. Go
bananas!
Optimization
• Optimizilla let’s you upload and compress up to 20
images
• Test My Site allows you to make sure your website has
a mobile-friendly design, according to Google’s
standards.
• Usability Checklist is a reference sheet. It’s vital never
to forget your users when designing
• Sizzy is a great tool where you can preview multiple
screens at once while you work
• Justinmind Widget Libraries There’s nothing more
tiresome than creating and re-creating UI components.
Tools
Sketch
Photoshop
Adobe Experience Design
Illustrator
Zeplin
Figma
InVision
Before break
• 1) The name of your digital product.
• 2) A short description of your project idea. The description
should answer the following questions:
• What is it?
• Who is it for?
• Where does it live?
• 3) A tagline for your project, using suitable language aligned
with the intended audience.
• 4) A description of the main activity or function of the app.
“A user interface is
like a joke. If you
have to explain it,
it’s not that good.”
Martin LeBlance
Today’s Workshop
• Brainstorming – 30min
• UX Mapping: user journey & flow –
30min
• Sketching and Wireframing
• Mood Board – 30min
• Digital prototyping – 60hr
• Brand guidelines – 30min
Brainstorming [30min]
• Define the problem
• Lay out the context and definitions
• Pick an appropriate facilitator
• Invite the right people
• Set the agenda
• Holding the session
UX Mapping [30min]
• User Journey
• How user will use this app and its use
case
• User Flow
• How user will navigate this app with
screen flow
Sketching &
Wireframing
• provides an early visual that can be used
to review with the client
• easier to amend than concept designs
• page content and functionality are
positioned correctly
Mood Board [30min]
A mood board should contain your visual
research for your project idea. It should
have:
• Between 5 to 10 images to help
define the mood or attitude of your
product or service, or as possible
content in your interface
• At least one possible typeface that
will appear in your design
• A color palette of 3 to 5 colors based
on/pulled from the imagery you
collected
Digital Prototype [60min]
Joining all our research and idea
Brand guidelines [30min]
• Brand story
• Logo guidelines
• Color palette
• Typography
Group
Presentation
UI/UX Fundamentals
UI/UX Fundamentals

More Related Content

What's hot

What's hot (20)

Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
The difference between ux and ui design
The difference between ux and ui designThe difference between ux and ui design
The difference between ux and ui design
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
What is UX?
What is UX?What is UX?
What is UX?
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
UX/UI Design 101
UX/UI Design 101UX/UI Design 101
UX/UI Design 101
 
UI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan KarunarathnaUI/UX presentation by Roshan Karunarathna
UI/UX presentation by Roshan Karunarathna
 
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 Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
UI/UX Courses
UI/UX Courses UI/UX Courses
UI/UX Courses
 
UX and UI
UX and UIUX and UI
UX and UI
 
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
 
The Importance of UX
The Importance of UXThe Importance of UX
The Importance of UX
 
UI UX Design Presentation
UI UX Design Presentation UI UX Design Presentation
UI UX Design Presentation
 
Simple Steps to UX/UI Web Design
Simple Steps to UX/UI Web DesignSimple Steps to UX/UI Web Design
Simple Steps to UX/UI Web Design
 
UX design
UX designUX design
UX design
 
What is UX?
What is UX?What is UX?
What is UX?
 

Similar to UI/UX Fundamentals

Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
jayyearley
 
graphic designing
graphic designing graphic designing
graphic designing
Northpole Web Service
 
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti   Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Smash Tech
 

Similar to UI/UX Fundamentals (20)

Designers whodoeswhatsps2019
Designers whodoeswhatsps2019Designers whodoeswhatsps2019
Designers whodoeswhatsps2019
 
Intro to UX Design
Intro to UX DesignIntro to UX Design
Intro to UX Design
 
Specialization for Web & Graphic Designer
Specialization for Web & Graphic DesignerSpecialization for Web & Graphic Designer
Specialization for Web & Graphic Designer
 
Open Source Needs Design
Open Source Needs DesignOpen Source Needs Design
Open Source Needs Design
 
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!)
 
Web Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptxWeb Designing training in Chandigarh.pptx
Web Designing training in Chandigarh.pptx
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
Designing for Interactive User Interfaces
Designing for Interactive User InterfacesDesigning for Interactive User Interfaces
Designing for Interactive User Interfaces
 
graphic designing
graphic designing graphic designing
graphic designing
 
Ni week no designer, no problem
Ni week no designer, no problem Ni week no designer, no problem
Ni week no designer, no problem
 
Design Learnings
Design LearningsDesign Learnings
Design Learnings
 
essentials-of-ui-design.pdf
essentials-of-ui-design.pdfessentials-of-ui-design.pdf
essentials-of-ui-design.pdf
 
UX Army of One
UX Army of OneUX Army of One
UX Army of One
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
 
Android UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and ProfitAndroid UX-UI Design for Fun and Profit
Android UX-UI Design for Fun and Profit
 
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti   Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
Android UX-UI Design for fun and profit | Fernando Cejas | Tuenti
 
Between Paper & Code
Between Paper & CodeBetween Paper & Code
Between Paper & Code
 
Web Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptxWeb Designing Course in Chandigarh Join Now.pptx
Web Designing Course in Chandigarh Join Now.pptx
 
UX design for every screen
UX design for every screenUX design for every screen
UX design for every screen
 

Recently uploaded

Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
FIDO Alliance
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
Wonjun Hwang
 

Recently uploaded (20)

Overview of Hyperledger Foundation
Overview of Hyperledger FoundationOverview of Hyperledger Foundation
Overview of Hyperledger Foundation
 
How to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in PakistanHow to Check GPS Location with a Live Tracker in Pakistan
How to Check GPS Location with a Live Tracker in Pakistan
 
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...Hyatt driving innovation and exceptional customer experiences with FIDO passw...
Hyatt driving innovation and exceptional customer experiences with FIDO passw...
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
TrustArc Webinar - Unified Trust Center for Privacy, Security, Compliance, an...
 
JavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate GuideJavaScript Usage Statistics 2024 - The Ultimate Guide
JavaScript Usage Statistics 2024 - The Ultimate Guide
 
How to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cfHow to Check CNIC Information Online with Pakdata cf
How to Check CNIC Information Online with Pakdata cf
 
Microsoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - QuestionnaireMicrosoft CSP Briefing Pre-Engagement - Questionnaire
Microsoft CSP Briefing Pre-Engagement - Questionnaire
 
Six Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal OntologySix Myths about Ontologies: The Basics of Formal Ontology
Six Myths about Ontologies: The Basics of Formal Ontology
 
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
AI+A11Y 11MAY2024 HYDERBAD GAAD 2024 - HelloA11Y (11 May 2024)
 
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
Human Expert Website Manual WCAG 2.0 2.1 2.2 Audit - Digital Accessibility Au...
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Working together SRE & Platform Engineering
Working together SRE & Platform EngineeringWorking together SRE & Platform Engineering
Working together SRE & Platform Engineering
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
Simplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptxSimplifying Mobile A11y Presentation.pptx
Simplifying Mobile A11y Presentation.pptx
 
Generative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdfGenerative AI Use Cases and Applications.pdf
Generative AI Use Cases and Applications.pdf
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
ADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptxADP Passwordless Journey Case Study.pptx
ADP Passwordless Journey Case Study.pptx
 
CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)CORS (Kitworks Team Study 양다윗 발표자료 240510)
CORS (Kitworks Team Study 양다윗 발표자료 240510)
 

UI/UX Fundamentals

  • 2. UI/UX Fundamentals Understanding UI/UX Following the process and approaches Design Principals Trying out
  • 3.
  • 4. Principal Creative Designer, Cotiviti Founder, ChordPedia 9841380214 dezudas@gmail.com #dijup @dezudas,
  • 5.
  • 6. Can you design our app? Sure! I’ll get right to it.
  • 7.
  • 8.
  • 9. UI vs UX? UI design is what makes an interface beautiful and UX design is what makes an interface useful.
  • 10.
  • 16.
  • 17.
  • 18. UX Mapping • Empathy mapping help team members understand the user’s mindset. • Customer journey maps focus on a specific customer’s interaction with a product or service. • Experience Mapping generalize the concept of customer-journey maps across user types and products. • Service Blueprinting are counterparts to customer journey maps, focused on the employees.
  • 19. UX Mapping • User Journey • Top Level view of user interaction with a products or services • Shows the different stages and scenarios of the interaction • Not too specific in terms of functionality or interaction patterns • User Flow • Shows a specific path of flow a user follows within a product • Shows the details: screens, pages functionality & interactions
  • 20. Clarity comes first Why is this here? Does this make sense? What other possibilities can I explore?
  • 21. Provide clear, meaningful feedback Every action needs a reaction
  • 23. In doubt, use established design patterns Logo in the top left corner Navigation in top right corner
  • 24. Use visual hierarchy. I. Typography II. White space (AKA Negative Space) III. Color
  • 25. Mood Board an arrangement of images, materials, pieces of text, etc. intended to evoke or project a particular style or concept.
  • 27. Icons • Ionicons has thousands of free icons to choose from for personal and commercial usage. • Font Awesome will be popular with the coders among us. These icons are spread across several different categories. Scalable and customizable with CSS. • Flaticon is one of the largest searchable icon databases with icons available in SVG, PNG, EPS and even PSD! • Fontastic— If their selection of 9,000 icons aren’t enough, simply create and customize your own icon fonts with Fontastic. • Icomoon— Iconography and icon management tool for perfectionists. • World Vector Logo— Logo collection.
  • 28. UX design inspiration • Daily UI daily user interface design prompt straight to their inbox for 100 days straight. • Dribbble show and tell for designers. • Site Inspire is a wonderful resource which exhibits some of the best and boldest in web and interaction design . • Land-Book product landing page gallery • Call to Idea variety of different categories to help • Media Queri responsive design inspiration
  • 29. Blogs • Hey Designer curated articles and covers a range of diverse topics from prototyping to typography. • Smashing Magazine Highly interesting content for developers and designers • Designer News platform, you can share and discover interesting content as well as start discussions and upvote good content.
  • 30. Images • Place It will put your images into context. People needs to see things in context to ‘get’ it and with Place It you can get mockups of anything. • Unsplash has a wide range of beautiful, free to use images and they upload 10 new photos every 10 days. • The Stocks is a royalty free image aggregator only it’s more than that because it also offers video, audio, icons, fonts and colors. UX designers are spoilt for choice! • Pixabay has over half a million images and they’re all free — perfect if you need to get your hands on a stock photo, illustration or vector. Not bad at all.
  • 31. Color • Flat UI Colors has your back if you want to create something with simple and minimal color design. • LOLColors has curated color palette inspiration at your fingertips. You can also see how popular certain color palettes are too. And they get bonus points for their name. LOL. • UI Gradients is your one stop shop for all things gradient. They’re are going through something of a revival on the internet and we’re not complaining. • https://www.colorsandfonts.com/gradients.html
  • 32. Typography • Google Fonts has a wide selection of well made fonts. They’re free to use have cross platform display and no license required. • Typography Pocket Guide will help you brush up your typography knowledge and help you become an expert in all things type. If you’ve ever struggled with which fonts to combine then this little website will set you right. • Font Squirrel is another free font website with a huge selection of diverse and interesting typefaces. The fonts are high quality and ready for commercial use. Go bananas!
  • 33. Optimization • Optimizilla let’s you upload and compress up to 20 images • Test My Site allows you to make sure your website has a mobile-friendly design, according to Google’s standards. • Usability Checklist is a reference sheet. It’s vital never to forget your users when designing • Sizzy is a great tool where you can preview multiple screens at once while you work • Justinmind Widget Libraries There’s nothing more tiresome than creating and re-creating UI components.
  • 35. Before break • 1) The name of your digital product. • 2) A short description of your project idea. The description should answer the following questions: • What is it? • Who is it for? • Where does it live? • 3) A tagline for your project, using suitable language aligned with the intended audience. • 4) A description of the main activity or function of the app.
  • 36. “A user interface is like a joke. If you have to explain it, it’s not that good.” Martin LeBlance
  • 37.
  • 38.
  • 39.
  • 40. Today’s Workshop • Brainstorming – 30min • UX Mapping: user journey & flow – 30min • Sketching and Wireframing • Mood Board – 30min • Digital prototyping – 60hr • Brand guidelines – 30min
  • 41. Brainstorming [30min] • Define the problem • Lay out the context and definitions • Pick an appropriate facilitator • Invite the right people • Set the agenda • Holding the session
  • 42. UX Mapping [30min] • User Journey • How user will use this app and its use case • User Flow • How user will navigate this app with screen flow
  • 43. Sketching & Wireframing • provides an early visual that can be used to review with the client • easier to amend than concept designs • page content and functionality are positioned correctly
  • 44. Mood Board [30min] A mood board should contain your visual research for your project idea. It should have: • Between 5 to 10 images to help define the mood or attitude of your product or service, or as possible content in your interface • At least one possible typeface that will appear in your design • A color palette of 3 to 5 colors based on/pulled from the imagery you collected
  • 45. Digital Prototype [60min] Joining all our research and idea
  • 46. Brand guidelines [30min] • Brand story • Logo guidelines • Color palette • Typography
  • 47.

Editor's Notes

  1. I design and develop experiences that make people’s lives simple
  2. 50K + download and 600+ songs
  3. How
  4. Are they the same thing? Are they different things? What’s the difference between UI and UX Design? Which one’s right for you? How do you learn it and what the heck are they? How it looks = Interface = Visual design How it feels = experience = non visual design UI and UX are two terms that are often conflated together, but they are actually separate fields that overlap. UI designer might be focusing more on form and aesthetics, on the look and feel and the organization of the information UX designer might concentrate much more on how the interface feels, but on the navigation and the structure and the story of the whole site or app. Example can be button Design of the button Different state of the button. (loading, processing)
  5. According to Garrett in The Elements of the User Experience, UX can be understood in five primary planes What is the problem you are trying to solve? What are your user needs? How does your product fit within a business context (product objectives)?
  6. How might you solve the problems through your platform? What are the features, and how might you prioritize them?
  7. ideas should begin to form a structure. concerned with how the information within an app is organized, and how users cognitively process the information. User flows map out the specific journeys users embark on through the app to help solve their specific need. It’s concerned with the most logical steps for your users to gratify their needs.
  8. ideas should begin to form a structure. concerned with how the information within an app is organized, and how users cognitively process the information. User flows map out the specific journeys users embark on through the app to help solve their specific need. It’s concerned with the most logical steps for your users to gratify their needs.
  9. The skeleton plane seeks to achieve the structure of an interface design and information design. Interface design is concerned with the arrangement of specific interface elements to enable users to interact with the functionality of a system, while information design is concerned with the presentation of information in a way that facilitates understanding. you’ll find UX or Product Designers designing, testing, and iterating on wireframes
  10.  Empathy mapping: tool used to articulate what we know about a particular type of user. It externalizes user knowledge in order to create a shared understanding, and aid in decision making. Customer journey maps: visualization of the process that a person goes through in order to accomplish a goal tied to a specific business or product. It’s used for understanding and addressing customer needs and pain points. Experience Mapping: visualization of an entire end-to-end experience that a “generic” person goes through in order to accomplish a goal. This experience is agnostic of a specific business or product. It’s used for understanding a general human behavior (as opposed to a customer journey map, which is more specific and focused on related to a specific business). Service Blueprinting: visualizes the relationships between different service components — people, props (physical or digital evidence), and processes — that are directly tied to touchpoints in a specific customer journey.
  11. User Journey Uber example
  12. basic principles of UI Design.
  13. example is Facebook’s use of their skeleton loading state.
  14. good consistency and structure will make your users feel at home. http://www.2em-creative.com/portfolio-ux03.html https://frontify.com/styleguide
  15. https://www.apple.com/ https://www.amazon.com/ https://mashable.com/
  16. http://www.dailymail.co.uk/home/index.html http://www.bbc.com/news https://www.smashingmagazine.com/
  17. https://www.learnhowtobecome.org/web-designer/ A mood board is a type of collage consisting of images, text, and samples of objects in a composition. It can be based upon a set topic or can be any material chosen at random.
  18. https://www.learnhowtobecome.org/web-designer/
  19. UI Designers and Visual Designers tools such as Sketch, Photoshop, Adobe Experience Design, Illustrator, zeplin, or Figma.
  20. https://business.tutsplus.com/tutorials/how-to-run-an-effective-brainstorming-session--cms-27145
  21. https://milanote.com/?utm_expid=.iLoWK3tZREW6PrMuyfGZ3g.0&utm_referrer=
  22. https://milanote.com/?utm_expid=.iLoWK3tZREW6PrMuyfGZ3g.0&utm_referrer=