![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](https://image.slidesharecdn.com/uiux-fundamentals-190629-190630054045/75/uiux-fundamentals-41-2048.jpg?cb=1666651737)
![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](https://image.slidesharecdn.com/uiux-fundamentals-190629-190630054045/75/uiux-fundamentals-42-2048.jpg?cb=1666651737)
![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](https://image.slidesharecdn.com/uiux-fundamentals-190629-190630054045/75/uiux-fundamentals-44-2048.jpg?cb=1666651737)
![Digital Prototype [60min]
Joining all our research and idea](https://image.slidesharecdn.com/uiux-fundamentals-190629-190630054045/75/uiux-fundamentals-45-2048.jpg?cb=1666651737)
![Brand guidelines [30min]
• Brand story
• Logo guidelines
• Color palette
• Typography](https://image.slidesharecdn.com/uiux-fundamentals-190629-190630054045/75/uiux-fundamentals-46-2048.jpg?cb=1666651737)
UI/UX Fundamentals
•2 likes•2,197 views
Download to read offline
Report
Design and its fundamental process have changed with time, growing challenges among the users, devices and different platforms for UI and UX process. In Design Fundamentals, a day-long thorough workshop, we will try to understand the fundamentals of UI and UX process, and follow the standard process and approaches to create a user-centric design. With basic Design Principles as the the backbone for our design, of course!
Recommended
More Related Content
What's hot
What's hot(20)
Similar to UI/UX Fundamentals
Similar to UI/UX Fundamentals(20)
Recently uploaded
Recently uploaded(20)
UI/UX Fundamentals
- 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.
- 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
- 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
Editor's Notes
- 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.apple.com/ https://www.amazon.com/ https://mashable.com/
- http://www.dailymail.co.uk/home/index.html http://www.bbc.com/news https://www.smashingmagazine.com/
- 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.
- https://business.tutsplus.com/tutorials/how-to-run-an-effective-brainstorming-session--cms-27145
- https://milanote.com/?utm_expid=.iLoWK3tZREW6PrMuyfGZ3g.0&utm_referrer=
- https://milanote.com/?utm_expid=.iLoWK3tZREW6PrMuyfGZ3g.0&utm_referrer=