SlideShare a Scribd company logo
Shunsuke Kawai
April 25 , 2015
Product Design Process &
Documentation Essentials
An Overview Of The Design Process &
Documents in Product Design
GOAL!!
Read on to learn about conceptual
sketching and wireframing,
low and high fidelity prototypes, and the
intricacies of design specification.
Iterated Sketching &
Wireframing
Sketches are likely the most prevalent
documentation you’ ll create during the
design phase.
lough detailed
1. ROUGH SKETCHING
2. WIREFRAMING
Sketches are likely the most prevalent
documentation you’ ll create during the design
phase.
fastest way to visualize a concept
Common Langage
Wireframing should act as the backbone of the
product.
Detailed Mockups
Detailed mockups can either be the highest
fidelity wireframes or the next iteration of
concept mockups.
lough detailed
3. Detailed Mockups
Some companies will skip wireframing
altogether and create a lower fidelity concept
mockup before increasing fidelity to a detailed
mockup.
A detailed mockup is oftentimes a design draft
or can be the actual visual design.
PSD to HTML is Dead
Detailed mockups can either be the highest
fidelity wireframes or the next iteration of
concept mockups.
Prototypes
If wireframes are about structure, then
prototypes are about experience.
lough detailed
UX
Communication & collaboration ( 交流と共同 )
Gauge feasibility while reducing waste( 実現可能性をはかる )
失敗することで新しい気づきを得られる。良いとこと悪いところが分かる。
Sell your idea( アイデアを売る )
プロトタイプは長ったらしい言葉ではなく、体験と共有することでビジョンを伝えられる。
Test usability earlier( ユーザビリティテストを簡単に )
プロトタイプによって早期にユーザビリティの課題をみつけられる。
Set your design priorities( デザインの優先順位を決める )
プロトタイピングにより現実的でインタラクションを加味したデザインが考えられる。
Why prototype in design process ?
Ux design process&docmenteiton
1. LOW FIDELITY
Better and more honest feedback
People may focus on the visuals of a picture - perfect prototype
Great for A/B testing
10-20 rough variations in UI < 2-3 pixel-perfect ones.
Cheaper to make mistakes
Focuses on flow instead of pages
One of the most important decisions isn’ t what a page looks
like, but what happens before and after.
2. HIGH FIDELITY
An early representation of the full product
Marketing, sales, and business development can all come to a
useful understanding of the product
Reduced development time
Users may significantly reduce development
Better idea of scope
High fidelity prototypes provide more detailed information for
accurate engineering cost estimates early in the process
More faithfully
More interactive
More Comunication
Design Specifications
仕様書
While prototypes show interaction and aesthetics,
design specifications describe the processes and
artistic assets needed to make all that work.
source: Breaking the UX Status Quo
1. USER FLOW
User flows, or journeys, map the entire realm of circumstances
and decisions that influences how someone achieves their goal.
source: Task Flowchart
2. TASK FLOW
If user flows are holistic ( 全体的 ) in strategy, then task flows are microscopic in
execution. Task flows describe specific and repeatable series of actions such as setting
the alarm time on an alarm clock app.
I Think ... Key UXD Step
Prototyping is teamplay
3. ASSETS & STYLE
Principles
Guidelines related to hierarchy, alignment, and simplicity
Colors
A small snapshot of the color palette was shown to give just
enough information
Typography
The design was kept simple by constraining to only one font and
listing specific font weights
Iconography
The full system and library of icons
Define,
Design and Refine
定義ーデザインー洗練
"The goal of wireframing and prototying is
delivering great product concepts, not
deliverables."
Ux design process&docmenteiton

More Related Content

What's hot

THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
Marc-Oliver Gern
 
User Experience: Research, Design, Process, and Workflow
User Experience: Research, Design, Process, and WorkflowUser Experience: Research, Design, Process, and Workflow
User Experience: Research, Design, Process, and Workflow
sollitaire
 
Great Agile in a UX World
Great Agile in a UX WorldGreat Agile in a UX World
Great Agile in a UX World
Anthony Viviano
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
Murali Krishna
 
The theory of great UX/UI Design
The theory of great UX/UI DesignThe theory of great UX/UI Design
The theory of great UX/UI Design
Sachin Karweer
 
Best user experience design company
Best user experience design companyBest user experience design company
Best user experience design company
amandacerry
 
Integrating Design and Development in Your Workflow
Integrating Design and Development in Your WorkflowIntegrating Design and Development in Your Workflow
Integrating Design and Development in Your Workflow
Karl Kaufmann
 
The Impact of Brand User Experience Design
The Impact of Brand User Experience DesignThe Impact of Brand User Experience Design
The Impact of Brand User Experience Design
Marc-Oliver Gern
 
An Introduction To User Centred Design Techniques
An Introduction To User Centred Design TechniquesAn Introduction To User Centred Design Techniques
An Introduction To User Centred Design Techniques
suzeingram
 
UX + BA: Working Together In Harmony [updated]
UX + BA: Working Together In Harmony [updated]UX + BA: Working Together In Harmony [updated]
UX + BA: Working Together In Harmony [updated]
Jacklyn Burgan
 
UX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design MissionUX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design Mission
Marc-Oliver Gern
 
Storytelling: Selling a brilliant idea like a rock star
Storytelling: Selling a brilliant idea like a rock starStorytelling: Selling a brilliant idea like a rock star
Storytelling: Selling a brilliant idea like a rock star
Ricardo Luiz
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
GDGKuwaitGoogleDevel
 
GHA Lean UX presentation
GHA Lean UX presentationGHA Lean UX presentation
GHA Lean UX presentation
Growth Hacking Asia
 
FLEXperience
FLEXperienceFLEXperience
FLEXperience
Joe Johnston
 
Baux
BauxBaux
Design Strategy
Design Strategy Design Strategy
Design Strategy
Liya James
 
Co-Design Workshop
Co-Design WorkshopCo-Design Workshop
Co-Design Workshop
Userspots
 
UX Maturity Models
UX Maturity Models   UX Maturity Models
UX Maturity Models
Gena Drahun
 
09
0909

What's hot (20)

THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
THE UX INTERVIEW – 3 Quick Questions. 3 Short Answers.
 
User Experience: Research, Design, Process, and Workflow
User Experience: Research, Design, Process, and WorkflowUser Experience: Research, Design, Process, and Workflow
User Experience: Research, Design, Process, and Workflow
 
Great Agile in a UX World
Great Agile in a UX WorldGreat Agile in a UX World
Great Agile in a UX World
 
UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX UX Design process, #UX, #Design Process, #Agile UX
UX Design process, #UX, #Design Process, #Agile UX
 
The theory of great UX/UI Design
The theory of great UX/UI DesignThe theory of great UX/UI Design
The theory of great UX/UI Design
 
Best user experience design company
Best user experience design companyBest user experience design company
Best user experience design company
 
Integrating Design and Development in Your Workflow
Integrating Design and Development in Your WorkflowIntegrating Design and Development in Your Workflow
Integrating Design and Development in Your Workflow
 
The Impact of Brand User Experience Design
The Impact of Brand User Experience DesignThe Impact of Brand User Experience Design
The Impact of Brand User Experience Design
 
An Introduction To User Centred Design Techniques
An Introduction To User Centred Design TechniquesAn Introduction To User Centred Design Techniques
An Introduction To User Centred Design Techniques
 
UX + BA: Working Together In Harmony [updated]
UX + BA: Working Together In Harmony [updated]UX + BA: Working Together In Harmony [updated]
UX + BA: Working Together In Harmony [updated]
 
UX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design MissionUX Tools for Agile Teams – Design Mission
UX Tools for Agile Teams – Design Mission
 
Storytelling: Selling a brilliant idea like a rock star
Storytelling: Selling a brilliant idea like a rock starStorytelling: Selling a brilliant idea like a rock star
Storytelling: Selling a brilliant idea like a rock star
 
i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design  i/o extended: Intro to <UX> Design
i/o extended: Intro to <UX> Design
 
GHA Lean UX presentation
GHA Lean UX presentationGHA Lean UX presentation
GHA Lean UX presentation
 
FLEXperience
FLEXperienceFLEXperience
FLEXperience
 
Baux
BauxBaux
Baux
 
Design Strategy
Design Strategy Design Strategy
Design Strategy
 
Co-Design Workshop
Co-Design WorkshopCo-Design Workshop
Co-Design Workshop
 
UX Maturity Models
UX Maturity Models   UX Maturity Models
UX Maturity Models
 
09
0909
09
 

Similar to Ux design process&docmenteiton

Iti_(2).pdf
Iti_(2).pdfIti_(2).pdf
Iti_(2).pdf
RanaFoud
 
How to Use Engineers in a UX Department
How to Use Engineers in a UX DepartmentHow to Use Engineers in a UX Department
How to Use Engineers in a UX Department
Stephen James
 
Application Prototyping - Pablo González - Capturing and Managing Requirements
Application Prototyping - Pablo González - Capturing and Managing RequirementsApplication Prototyping - Pablo González - Capturing and Managing Requirements
Application Prototyping - Pablo González - Capturing and Managing Requirements
Visure Solutions
 
PDF Submission for Checkux prototypes vs wireframes.pdf
PDF Submission for Checkux  prototypes vs wireframes.pdfPDF Submission for Checkux  prototypes vs wireframes.pdf
PDF Submission for Checkux prototypes vs wireframes.pdf
petter son
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
Lewis Lin 🦊
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
Marcelo Graciolli
 
Business Analyst
Business AnalystBusiness Analyst
Business Analyst
Yaswanth Babu Gummadivelli
 
Net Magazine Feb 2010
Net Magazine Feb 2010Net Magazine Feb 2010
Net Magazine Feb 2010
Super User Studio
 
Propeller UI/UX Process
Propeller UI/UX ProcessPropeller UI/UX Process
Propeller UI/UX Process
Blair Stewart
 
Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web Design
Hitesh Mehta
 
5 tips on how to get a product to market
5 tips on how to get a product to market5 tips on how to get a product to market
5 tips on how to get a product to market
3dinnovations
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
tec
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013
Bill Scott
 
NUX October 6th 2014 - UX in a traditional enterprise
NUX October 6th 2014 - UX in a traditional enterpriseNUX October 6th 2014 - UX in a traditional enterprise
NUX October 6th 2014 - UX in a traditional enterprise
pjhauser
 
Prototyping Workshop
Prototyping WorkshopPrototyping Workshop
Prototyping Workshop
Tamara Pinos
 
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile Challenges
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile ChallengesIs Lean UX Agile’s Brain? How Lean UX Fixes Common Agile Challenges
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile Challenges
FITC
 
Integrating User Centered Design with Agile Development
Integrating User Centered Design with Agile DevelopmentIntegrating User Centered Design with Agile Development
Integrating User Centered Design with Agile Development
Julia Borkenhagen
 
Part C Developing Your Design SolutionThe Production Cycle.docx
Part C Developing Your Design SolutionThe Production Cycle.docxPart C Developing Your Design SolutionThe Production Cycle.docx
Part C Developing Your Design SolutionThe Production Cycle.docx
smile790243
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - Update
John Yesko
 
Doors Analyst
Doors AnalystDoors Analyst
Doors Analyst
Bill Duncan
 

Similar to Ux design process&docmenteiton (20)

Iti_(2).pdf
Iti_(2).pdfIti_(2).pdf
Iti_(2).pdf
 
How to Use Engineers in a UX Department
How to Use Engineers in a UX DepartmentHow to Use Engineers in a UX Department
How to Use Engineers in a UX Department
 
Application Prototyping - Pablo González - Capturing and Managing Requirements
Application Prototyping - Pablo González - Capturing and Managing RequirementsApplication Prototyping - Pablo González - Capturing and Managing Requirements
Application Prototyping - Pablo González - Capturing and Managing Requirements
 
PDF Submission for Checkux prototypes vs wireframes.pdf
PDF Submission for Checkux  prototypes vs wireframes.pdfPDF Submission for Checkux  prototypes vs wireframes.pdf
PDF Submission for Checkux prototypes vs wireframes.pdf
 
The Guide To Wireframing
The Guide To WireframingThe Guide To Wireframing
The Guide To Wireframing
 
The guide to wireframing
The guide to wireframingThe guide to wireframing
The guide to wireframing
 
Business Analyst
Business AnalystBusiness Analyst
Business Analyst
 
Net Magazine Feb 2010
Net Magazine Feb 2010Net Magazine Feb 2010
Net Magazine Feb 2010
 
Propeller UI/UX Process
Propeller UI/UX ProcessPropeller UI/UX Process
Propeller UI/UX Process
 
Importance of Wireframes in Web Design
Importance of Wireframes in Web DesignImportance of Wireframes in Web Design
Importance of Wireframes in Web Design
 
5 tips on how to get a product to market
5 tips on how to get a product to market5 tips on how to get a product to market
5 tips on how to get a product to market
 
Wireframes and UI-Prototypes
Wireframes and UI-PrototypesWireframes and UI-Prototypes
Wireframes and UI-Prototypes
 
bringing design to life with lean ux & lean engineering - Lean Day West 2013
bringing design to life with  lean ux & lean engineering - Lean Day West 2013bringing design to life with  lean ux & lean engineering - Lean Day West 2013
bringing design to life with lean ux & lean engineering - Lean Day West 2013
 
NUX October 6th 2014 - UX in a traditional enterprise
NUX October 6th 2014 - UX in a traditional enterpriseNUX October 6th 2014 - UX in a traditional enterprise
NUX October 6th 2014 - UX in a traditional enterprise
 
Prototyping Workshop
Prototyping WorkshopPrototyping Workshop
Prototyping Workshop
 
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile Challenges
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile ChallengesIs Lean UX Agile’s Brain? How Lean UX Fixes Common Agile Challenges
Is Lean UX Agile’s Brain? How Lean UX Fixes Common Agile Challenges
 
Integrating User Centered Design with Agile Development
Integrating User Centered Design with Agile DevelopmentIntegrating User Centered Design with Agile Development
Integrating User Centered Design with Agile Development
 
Part C Developing Your Design SolutionThe Production Cycle.docx
Part C Developing Your Design SolutionThe Production Cycle.docxPart C Developing Your Design SolutionThe Production Cycle.docx
Part C Developing Your Design SolutionThe Production Cycle.docx
 
Rich User Experience Documentation - Update
Rich User Experience Documentation - UpdateRich User Experience Documentation - Update
Rich User Experience Documentation - Update
 
Doors Analyst
Doors AnalystDoors Analyst
Doors Analyst
 

Recently uploaded

Artificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architectureArtificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architecture
Mostafa Abd Elrahman
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
eamhs
 
Doreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemonDoreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemon
DanielNacorda4
 
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdfHongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
Hong Hao Furniture Ltd.
 
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
ailynolive
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
bookneha89
 
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista FashionsVista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Fashions
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
bookneha89
 
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
monikaservice00
 
Pranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum PortfolioPranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum Portfolio
Pranay Мhatre
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
sexytaniya455
 
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdfTemple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
taradcunha
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
ChiragSuresh
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
monikaservice00
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
Mostafa Abd Elrahman
 
Private Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Private Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Private Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Private Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
45unexpected
 
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
chandadutta02102
 
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
khloe sexy girl
 
The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
TeeFusion
 
AI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptxAI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptx
Shayestha Fathima
 

Recently uploaded (20)

Artificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architectureArtificial Intelligence (AI) is revolutionizing the field of architecture
Artificial Intelligence (AI) is revolutionizing the field of architecture
 
Carleton University degree offer diploma Transcript
Carleton University degree offer diploma TranscriptCarleton University degree offer diploma Transcript
Carleton University degree offer diploma Transcript
 
Doreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemonDoreamon Booklet about the origin of doramemon
Doreamon Booklet about the origin of doramemon
 
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdfHongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
HongHao Furniture Catalogue EN 202407 - Store Fit-out.pdf
 
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
Private Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Service ...
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Vista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista FashionsVista Blinds Catalogue Brochure by Vista Fashions
Vista Blinds Catalogue Brochure by Vista Fashions
 
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in CityIndore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
Indore Girls Call 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
Vip Today Girls Call Indore 000XX00000 Provide Best And Top Girl Service And ...
 
Pranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum PortfolioPranay Mhatre Introduction cum Portfolio
Pranay Mhatre Introduction cum Portfolio
 
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Pune 000XX00000 Provide Best And Top Girl Service And No1 in City
 
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdfTemple Architecture in India - 9 major styles · UPSCprep.com.pdf
Temple Architecture in India - 9 major styles · UPSCprep.com.pdf
 
Unit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.pptUnit-1 OOMD- Inthhro- class modeling.ppt
Unit-1 OOMD- Inthhro- class modeling.ppt
 
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
Chinese Girls Call Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Humans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural worldHumans have long had a complex and dynamic relationship with the natural world
Humans have long had a complex and dynamic relationship with the natural world
 
Private Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Private Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...Private Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
Private Girls Call Mumbai 9920725232 Unlimited Short Providing Girls Service ...
 
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in CityGirls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
Girls Call Vadodara 000XX00000 Provide Best And Top Girl Service And No1 in City
 
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
BBW Girls Call Mumbai 9967584737 Provide Best And Top Girl Service And No1 in...
 
The Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady HatThe Death of Slim Shady Hat
The Death of Slim Shady HatThe Death of Slim Shady Hat
 
AI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptxAI in Fashion_Dr. Shayestha Fathima.pptx
AI in Fashion_Dr. Shayestha Fathima.pptx
 

Ux design process&docmenteiton

  • 2. Product Design Process & Documentation Essentials An Overview Of The Design Process & Documents in Product Design
  • 3. GOAL!! Read on to learn about conceptual sketching and wireframing, low and high fidelity prototypes, and the intricacies of design specification.
  • 4. Iterated Sketching & Wireframing Sketches are likely the most prevalent documentation you’ ll create during the design phase.
  • 6. 1. ROUGH SKETCHING 2. WIREFRAMING Sketches are likely the most prevalent documentation you’ ll create during the design phase. fastest way to visualize a concept Common Langage Wireframing should act as the backbone of the product.
  • 7. Detailed Mockups Detailed mockups can either be the highest fidelity wireframes or the next iteration of concept mockups.
  • 9. 3. Detailed Mockups Some companies will skip wireframing altogether and create a lower fidelity concept mockup before increasing fidelity to a detailed mockup. A detailed mockup is oftentimes a design draft or can be the actual visual design.
  • 10. PSD to HTML is Dead Detailed mockups can either be the highest fidelity wireframes or the next iteration of concept mockups.
  • 11. Prototypes If wireframes are about structure, then prototypes are about experience.
  • 13. Communication & collaboration ( 交流と共同 ) Gauge feasibility while reducing waste( 実現可能性をはかる ) 失敗することで新しい気づきを得られる。良いとこと悪いところが分かる。 Sell your idea( アイデアを売る ) プロトタイプは長ったらしい言葉ではなく、体験と共有することでビジョンを伝えられる。 Test usability earlier( ユーザビリティテストを簡単に ) プロトタイプによって早期にユーザビリティの課題をみつけられる。 Set your design priorities( デザインの優先順位を決める ) プロトタイピングにより現実的でインタラクションを加味したデザインが考えられる。 Why prototype in design process ?
  • 15. 1. LOW FIDELITY Better and more honest feedback People may focus on the visuals of a picture - perfect prototype Great for A/B testing 10-20 rough variations in UI < 2-3 pixel-perfect ones. Cheaper to make mistakes Focuses on flow instead of pages One of the most important decisions isn’ t what a page looks like, but what happens before and after.
  • 16. 2. HIGH FIDELITY An early representation of the full product Marketing, sales, and business development can all come to a useful understanding of the product Reduced development time Users may significantly reduce development Better idea of scope High fidelity prototypes provide more detailed information for accurate engineering cost estimates early in the process
  • 19. Design Specifications 仕様書 While prototypes show interaction and aesthetics, design specifications describe the processes and artistic assets needed to make all that work.
  • 20. source: Breaking the UX Status Quo 1. USER FLOW User flows, or journeys, map the entire realm of circumstances and decisions that influences how someone achieves their goal.
  • 21. source: Task Flowchart 2. TASK FLOW If user flows are holistic ( 全体的 ) in strategy, then task flows are microscopic in execution. Task flows describe specific and repeatable series of actions such as setting the alarm time on an alarm clock app.
  • 22. I Think ... Key UXD Step
  • 24. 3. ASSETS & STYLE Principles Guidelines related to hierarchy, alignment, and simplicity Colors A small snapshot of the color palette was shown to give just enough information Typography The design was kept simple by constraining to only one font and listing specific font weights Iconography The full system and library of icons
  • 26. "The goal of wireframing and prototying is delivering great product concepts, not deliverables."