Design
Design
2022/05/23 (增加連結)
簡介
從設計的觀點來看,有幾個重要的概念,首先是設計思維(Design Thinking),設計思維是個強調同理心(Empathy)、構想(Ideation)及透過設計雛型進行測試(Testing)的設計流程。在設計的概念上從抽象的設計原則(Design Principles),將設計原則歸納出一些常見並可落實的設計樣式(Design Patterns)到最後形成完整的設計系統 (Design Systems)。
21st Century Design (6:00) by Don Norman (繁體中文字幕)
Service Design
UX vs. Service Design (2:50) NN group
Journey map、service blueprint
Complex Social Technical System
Design Thinking
Design Thinking is a process that any team can use to come up with innovations for their business, product, or process.
Design Goals, Design Principles, and Design Heuristics
Design Goals
Design Goals are statements a team makes about the quality of experience they would like a product to attain.
Design Principles
Design Principles are words or statements that set direction. Like design goals, they point to an expected result, but there isn’t an expectation of being reached. They are directionally correct but may never be reached.
Design Heuristics
Design heuristics are strategies or “rules of thumb.”
Often design heuristics are statements used to specify how to accomplish design principles or design goals
Design Language, Design Patterns, and Design System
Design Language
A Design Language is a set of precepts or general rules — usually formed out of Design Principles and characterized by Design Heuristics — that describe how you make decisions when designing a system.
Design Patterns
Design patterns transitioned the idea of architectural patterns into the user experience design space.
Design System
A Design System is the constructs or code that embodies a design language and its design patterns.
Design Execution
Design Execution is the activities the design team takes to make sure a quality product reaches its audience.
But what does design or design thinking mean to a business?
‘Design centric’, not ‘design led’
The challenge and the challengers
Design for systems, not users: The unintended consequences of user-centered design
The Guide to Design (Our industry needs more designers. Most importantly: a different type of designer. )
Why design? Why now?
Industry overview
Design with capital D
Purpose & community
The architecture of information
Talking to users
Balancing form and function
The job of a designer
The road ahead
The Business of Design : How to articulate the value of our work
What is Your Design Philosophy?
There is art in design, but design is not art
Design must be rooted in reality
Design is never perfect
Design is a set of tools, not a standardized process
Design communicates obvious function
Design should delight
Design Process
From Data, to Content to Visuals. A simplified journey through the design process.
Blank: The starting point
Data
Content
Visuals
Hypothesis-driven practices to build better features
Define
Implement
Test
Act
3 things I learned with hypothesis-driven product management
You can formalize the unknown
It is humbling
Closing the loop
Minimum Viable Design Process: how I approach design projects in 2019?
Hypothesis-driven design
Goals
Sketches and mockups rather than wireframes
Flow-based deliverables
Component libraries and mini design systems
Design tokens
5 Design Approaches to start a New Creative Project: from Design Thinking, Design Driven Innovation to Speculative Design
Forecasting Approach: Think about the future from the past and the present.
Design Thinking (1)
Systems Thinking (2)
Design-Driven Innovation (3)
Backcasting Approach: Think about what we should do now from the future.
Speculative Design (4)
Transition Design (5)
Participatory Design Approach (These concepts are considered as an organization of the project rather than a design process/approach)
Participatory Design
Inclusive Design
Co-Design
You can flexibly design the process just by asking simple two questions at the beginning:
Think from the present (forecasting) or the future (backcasting)?
View from the micro (individual layer) or macro (system layer)?f
The Realm of Speculative Design: Challenging Assumptions and Recognising the Weak Signals
3 types of futures include the following:
Possible futures: What might happen?
Probable futures: What is likely to happen?
Preferable futures: What do we want to happen?
AI, data and design skills: outputs from a Design Council workshop: We then ran a speculative design workshop on 9 January 2020 to think about the future and the challenges of today around the untapped potential of design skills.
Design frameworks, what are they and what’s the difference anyway? (連結無效)
The Double Diamond
Discover, Define, Develop and Deliver
Lean UX
Concept
Validate internally
Prototype
Test externally
Learn from user behavior
Iterate
Agile scrum
Stanford dschool Design Thinking
Empathise
Define
Ideate
Prototype
Test
IBM Loop
Observe
Immerse yourself in the real world
Reflect
Come together and look within
Make
Give concrete form to abstract ideas
Google Ventures Design Sprints
Understand
Diverge
Decide
Prototype
Validate
Hypothesis driven design
Start with questions and assumptions
Prioritise the questions and assumptions
Turn them into hypotheses
Develop an experiment and testing the hypothesis
Learn and build
URADLA
Understand
Research
Analyse
Design
Launch
and Analyse again
Design frameworks: what are they and why you should be using them
Double Diamond
Design Thinking
Hook Model
To help us understand
Google Analytics
Hotjar
To help us envision
Sketch
Photoshop
To help us prototype (and handoff)
InVision
To help us validate
Usability Hub
Optimal Workshop
Maze
To help us communicate
Slack
To help us store our work
Plantapp
Dropbox
Confluence
Optimize your User Interface design process with Component-driven strategy
Atomic design
Collaborative design tools
The answer is Component-driven strategy
Before starting applying this strategy, we need to have:
A typical design system to be the basic rules for the design development
A wireframe (low/mid-fidelity) or a part of the wireframe (as we are in the Agile world), as an architecture for the design.
When you have the above items ready, it’s time to get started:
Firstly, build up your components back-log
Next, assign the defined components group to your designers
And lastly, start Lego-ing to make the screen designs — Easy game!
The design process is a lie : 10 things people don’t tell you about designing products
What no one explains about the design process
understand, ideate, test, and implement
Design Principles
Some design principles are universal
Signal-to-Noise Ratio
Performance Load
Cognitive Load
Kinematic Load
Proximity
Iteration
Design principles that help you shape the best user experience
Principle 1 — don’t make the users think
Principle 2 — Think beyond visual presentation
Principle 3 — let your users get involved in the product design process
Principle 4 — keep your product design consistent
Principle 5 — Make your design work for everyone
Six principles for delivering a great product experience: The 6XP Framework Behind the Philosophy of Curation in Product Design.
Is it Impactful?
Is it Meaningful?
Is it Ego-Free?
Is it Genuinely Us?
Is it Slaying Business Dragons?
Is it Ready?
3 reasons why your designs fail
Lack of Empathy
The Principle: Is it Impactful?
Lack of Meaningfulness
The Principle: Is it Meaningful?
Lack of Validation
The Principle: Is it Ego-Free?
5 design principles for better products
Clarity over complexity
Reduce cognitive load
Hick’s Law
Miller’s Law
Familiarity increases clarity
Acknowledge with feedback
Manage errors effectively
3 Rules Apple Has Forgotten About Design
Make everything as simple as possible, but no simpler.
Form follows function.
It should “just work.”
Principles For Designing Better Products
Think an idea through
A team of three
Doing nothing is an option
Launch and learn
Five factors of meaningful design
Connectedness: The experience should connect to the person.
Coherence: The experience should make sense.
Purpose: The experience should lead to a goal.
Resonance: The experience should feel right.
Significance: The experience should matter.
Great Design Vs Good Design: What’s The Difference? Here’s The Truth
Good Design Gives People What They Say They Want, Great Design Solves People’s Problems In Unexpected Ways
Good Design Is Data-Driven, Great Design Is Data-Informed
Good Design Tries To Please Everyone, Great Design Is Opinionated And Challenges Conventions
Great Design Sweats The Details Without Losing Sight Of The Big Picture
Good Design Tries To Impress, Great Design Gets Out Of The Way
Great Design Takes Vision, Courage, And Discipline
3 simple questions to ask when evaluating a design
What will a user want to do?
Will a user know how to do it?
Will a user know whether their actions were correct?
Design principles every developer should know
Consistency
Minimalism
Smooth usage
Accessibility and UX
Design Psychologies 101: use the way humans think to make better UI
Principle 1: Hick’s law, Cognitive Load and Information Understanding
Principle 2: Miller’s law and limits of human short-term memory
Principle 3. Jackob Nielsen Law, Mental Models, and User Expectation
5 psychological principles that will improve your customer experience
People prefer simplicity over complexity
People love choice — but not too much
Choice Overload
Lots of options attracted customers to browse, but fewer choices got them to buy.
People only remember an experience based on its peak and its end-point.
the Peak-end Rule
the more intense and more recent the feelings, the more memorable the experience.
People prefer relevant, personalized messages
Cocktail Party Effect
People are scared to try new things — unless everyone else is doing it too.
Social Proof
6 design guidelines for non-designers: Good design principles can be learned and exercised by anyone.
Use Contrast
Use Color and Weight
Use Fewer Borders
Don’t Use Oversized Icons
Use Accent Borders
Consistency
User-Centered
Simple
Consistent
Confirmation and Feedback
Forgiveness
Accessible
Digestible
Familiar
Navigable
Data-Driven
Control
Helpful
A guide to Motion Design principles
12 Motion Design Principles for Digital Products
Easing
Offset and Delay
Parenting
Transformation
Value Change
Masking
Overlay
Cloning
Obscuration
Parallax
Dimensionality
Dolly and Zoom
Design like Elon Musk using 6 fundamental principles
Question the question
Reason from first principles
Kill your darlings
Undesign
Ideas supersede hierarchy
Everyone is a chief engineer
Dieter Rams’ design principles applied to source code
Good design is innovative
Good design makes a product useful
Good design is aesthetic
Good design makes a product understandable
Good design is unobtrusive
Good design is honest
Good design is long-lasting
Good design is thorough down to the last detail
Good design is environmentally friendly
Good design is as little design as possible
Applying Dieter Rams Design Principles for creating compelling digital products
Dieter Rams’ 10 Principles of Design — Are they relevant in 2021?
A Great Product Solves Meaningful Customer Pain While Meeting The Needs Of The Business
A Great Product Is Built And Launched At The Right Time - When The Market Is Ready For It
A Great Product Is “Born” As A Result Of Intense And Effective Collaboration Between The Engineering, Design, And Product People
A Great Product Starts With Focusing On One Big Problem But Does It Exceptionally Well
A Great Product Doesn’t Just Have A Good Offering. It Is Way Better Than Anyone Else Is Offering
A Great Product Is Sticky
A Great Product Persistently Aims To Find Better Solutions Since Its Nature Is Based On Continuous Innovation Through Consistent Experimentation
Simplicity
YAGNI and KISS: a complex look at the principles of simplicity
KISS (Keep It Simple Stupid) suggests that you implement the full solution to a problem in the simplest way possible YAGNI (You Ain’t Gonna Need It) asks the question of whether everything in the full solution is really necessary.
Solving the right problem: if you have an overcomplicated solution, it’s probably because you’re trying to solve an overcomplicated problem.
Law #1 — Reduce
Law #2 — Organise
Law #3 — Time
Law #4 — Learn
Law #5 — Differences
Law #6 — Context
Law #7 — Emotion
Law #8 — Trust
Law #9 — Failure
Law #10 — The One
Basic simplicity — reduce, organize, time
Intermediate simplicity — learn, differences, context
Deep simplicity — emotion, trust, failure
The 10th law — The One — sums up the entire set of laws.
Delight / Emotion
Experiences that delight: how we emotionally engage with design
Want to become a better UX Designer in 2021? Design for Emotions
Don Norman: Emotional Design (2:15)
Visceral
Behavioral
Reflective
The three ways that good design makes you happy | Don Norman (12:41) **
The Art of Emotion — Norman’s 3 Levels of Emotional Design
Emotional Design Elements
Emotion-Memory Link
Aesthetic-Usability Effect
Persuasive Emotion (Gut Feeling)
Ownership Effect
This is where I was wrong about UX: Emotional Design in 2020
Why Emotional Design?
3 Circles of Emotional Design
Circle 1: Visceral Design
Circle 2: Behavioral Design
Circle 3: Reflective Design
Human emotions. How to design products loved by millions of people
Design Patterns
7 design patterns to improve your login design
Login Modals
Multiple Steps
Use clear naming conventions
Social Logins
Cap locks On
Immediate Form Validation
Remember Your Users
From Like Buttons to Message Bubbles: The UX Designs You Can’t Use ** 這些都是有專利的,不能使用
The UI/UX Patterns You Literally Can’t Use ** 這些都是有專利的,不能使用
Design Hub
Why a design team needs a Design Hub? : Creating a group vision helps solve problems and build a strong team culture.
Design Sprint
It’s time to move on from Design Thinking: Yes, it’s time we embrace design sprints.
Design thinking process can take weeks and even months to produce a prototype. A sprint, on the other hand, takes just five days.
How can Design Sprints foster creative confidence — Design at Pipedrive
Revolutionizing the Public School System — a Design Sprint Case Study
Graphic Design
The Role of Wit in Graphic Design
How do we improve in the ability to inject wit in our work?
Think of the audience as your friends
Don’t be too serious about your work
Be playful and experiment
Enjoy what you are doing
Read a lot — quality magazines and books are filled with witty statements
Immerse yourself in graphic design culture — books, magazines, museums
Work at a design agency that creates great work
Open Design
Open Doodles: Embracing Open Design as a way to learn and grow together.
Why Open?
Starting as a Thief
Hire Illustrators
Other Open Source Illustrations
Case Study
Service Design Case Study: Redesigning The Future Of Public Transport
How Retail Companies Fail at Checkout
The cash register “interview”
Lines and perception
Forced self-checkout
Did you find everything you were looking for?
Credit card obstacles
Pushing the store credit card
Ancillary products, the worst offender
Building a Better Boarding Pass: How to make this important slip of paper more traveler-friendly
參考資料
Flip-to-Action method consists of a problem reframing exercise (flip method) and a solution sketching exercise (Action Canvas).
How to use the Flip Canvas
Step 1: Pick a problem, pain or friction
Step 2: Define the reasons for the problem
Step 3: Flip it!
Step 4: Turn the flip into a How Might We question
How to use the Action Canvas
Step 5: Pick a HMW from the Flip Canvas & write it on a new Action Canvas™
Step 6: Write the Solution pitch
Step 7: Describe who this provides value for and how
Step 8: Draw & describe what the solution does and how
Step 9: How might this come to life?
Step 10: Cost & time
Step 11: Next step
The basis of design practice
The business value of design
How design affects the economy
Showcasing design value
The humane value of design
Content
Content: the design system element you forgot: Design and content are interdependent. For a design system that genuinely scales, integrate content.
Lorem Ipsum will destroy your design : And why designers can do with flexing their content muscles a bit.
Lorem Ipsum is not ideal for high-fidelity prototypes
It makes thoughtful feedback harder to reach
The layout space suitable for Lorem Ipsum may not accommodate real content
The earlier you define a general framework for content, the more relevant the design will become
It is challenging to backtrack on content late into the design journey
It’s always better to put in content early for the main titles
Attention and intention: divided attention theory in interface design
Designing for tech you don’t get.: Learning, communicating and creating an impact in a technically challenging space.
Why should designers be involved?
Build domain knowledge.
Communicate effectively
Design your development process
Have daily or weekly syncs
Learn to confront conflict
Build consensus with workshops
Advocate for design in a skeptical or uninformed environment
Lastly, be observant.
How Good Interface Design Can Make Your Teams More Productive
Factors that increase friction
The impact of efficient design
Creating seamless workflow processes
How a device-agnostic approach could improve your design
How would it work on the most basic device?
How could it be built efficiently?
How would the experience translate across devices?
Designing for Invisible Experiences
When designing for this problem, it’s important to keep in mind the following:
Build trust with the user.
Ensure the user is in control during the shopping experience
Make the messaging consistent. For example, in case of a refund, the merchant should communicate the precise processing time effectively and ensure the timeline is met.
Make the experience simple and flexible. The user should be able to select any payment method easily.
The 3 levels of invisible design
Aesthetic invisibility
An intuitive, self-documented interface
Interactive invisibility
Voice is the new keyboard
Product invisibility
Anticipatory design
The principles of sensory design
Learn About the Senses
Include the Senses in Research
Investigate the Relationships Between Senses
Target Specific Senses
Trigger Synesthetic Experiences
Discover the Sensory Implications of Design Elements
Impose Hypothetical Sensory Constraints
Avoid Sensory Overload
Include Senses in Product Strategy
Designer
If design principles are for designs, then design values are for designers
What Is Design Evangelism?: 4 key things evangelists do for design
Advocate
Educate
Collaborate
Inspire