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.

1. Design to
make life
simple.

2. UI/UX
Fundamentals
Understanding UI/UX
Following the process and approaches
Design Principals
Trying out

4. Principal Creative Designer, Cotiviti
Founder, ChordPedia
9841380214
dezudas@gmail.com
#dijup @dezudas,

6. Can you design our
app?
Sure! I’ll get right to it.

9. UI vs UX?
UI design is what makes an interface beautiful and
UX design is what makes an interface useful.

11. Strategy
User Needs
Product Objectives

12. Scope
Functional Specifications
Content requirements

13. Structure
Information Architecture
User Flow

14. Skeleton
Interface Design
Information Design

15. Surface
Sensory Experience
Visual 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?

21. Provide clear,
meaningful feedback
Every action needs a reaction

22. Consistency matters
Style-guide

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.

26. Design resources
Icons
Inspirations
Images
Colors
Typography
Optimization

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.

34. Tools
Sketch
Photoshop
Adobe Experience Design
Illustrator
Zeplin
Figma
InVision

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

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

48. Group
Presentation