Please enable JavaScript.
Coggle requires JavaScript to display documents.
UX
User Experience Design (STYLE GUIDE (Brand Guidelines
Style Guide für…
UX
User Experience Design
-
-
USER RESEARCH
BEGINNING PHASE
- Discovery and Empathizing
- Getting to know the users, the problem and the business goals
-
-
-
-
THE MIDDLE PHASE (chaotic)
- developing the solution and learn how users feel about it
- chaos of development beginning and project progressing, often loosing focus on UX while navigating costs & deadlines
- finding ways to get solid feedback is critical in this phase
- getting something in front of your users quickly is essential
- interation and adjusting the proposed solution
-
-
-
-
MARKET RESEARCH
COMPETITIVE ANALYSIS
a.k.a. Competitor Analysis
analyzing the competition and understanding how the existing or proposed solution holds up against it
direct competitors
- very similar product, feature or service
- possibly share the same target audience
indirect
- may serve the same needs for the customers but are not necessarily similar in terms of what they offer
- could be used in place of own product or service
Ressources for Competitor Analysis
-
-
STYLE GUIDE
Brand Guidelines
Style Guide für die Brand und Corporate identity
- They may include proper use of the logo, approved corporate fonts and colors and other style details.
Pattern Library
This is where you may find all of the details surrounding design patterns for a specific system, product or website.
- A design pattern is solution to a recurring design problem that is repeatable. For example, let’s say you’re on an e-commerce site and navigate to the Cart but haven’t added anything yet. You may see a little frowny icon and a message similar to: “You haven’t added in items to your cart” with a button to Continue Shopping. This an example of an Empty State. The pattern can be defined as the look/feel of these types of messages throughout an application or product, as well as with a definition as when to use that versus dummy or placeholder data.
Component LIbrary
Components show what something is and how it works. Examples may include modals, form elements, tool tips, and other specific elements.
- vs pattern library
Patterns can include multiple components potentially but show how something should work in specific, repeatable situations.
Some Component Libraries contain code snippets for developers to be able to easily copy and paste into the product. This helps to ensure consistency in the UI and experience as well as saves them time over having to find a similar component and copy over the code from there.
Design System
So how does all of this tie together in a sensible form? Welcome the Design System! This is the overarching product resulting from the combination of the previous guides and libraries. It’s where everything is found relating to styles, patterns, components and design details for your product or application.
- You may need to create some or all of these systems at some point, and that is no small task. - There are many great examples to review out there including these systems by Atlassian, IBM and the well-known Google Material Design system.
Style Guide
rules for the primary styles throughout a system, website or application.
It may include
- fonts,
- colors,
- button styles,
- grid details, and similar information.
-
