The document provides an overview of UI/UX design principles and processes, including strategies for user needs analysis, information architecture, visual design, and best practices for design tools, resources, and workflows like prototyping, mood boarding, and developing brand guidelines. It also discusses techniques for UX mapping like user journeys, flows, and blueprinting to understand customer interactions. The document is intended as a reference for someone learning about or working in UI/UX design.
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?
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
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
I design and develop experiences that make people’s lives simple
50K + download and 600+ songs
How
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)
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)?
How might you solve the problems through your platform?
What are the features, and how might you prioritize them?
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.
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.
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
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.
User Journey
Uber example
basic principles of UI Design.
example is Facebook’s use of their skeleton loading state.
good consistency and structure will make your users feel at home.
http://www.2em-creative.com/portfolio-ux03.html
https://frontify.com/styleguide
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.
https://www.learnhowtobecome.org/web-designer/
UI Designers and Visual Designers tools such as Sketch, Photoshop, Adobe Experience Design, Illustrator, zeplin, or Figma.