SlideShare uma empresa Scribd logo
1 de 13
Baixar para ler offline
UX / UI DESIGN PROCESS
STUDIO CREATIVE ME
42 531
UNDERSTAND
& RESEARCH
INFORMATION
ARCHITECTURE
WIREFRAMING UX TESTING USER INTERFACE
DESIGN
CLIENT BRIEF
UNDERSTAND & RESEARCH
INFORMATION
ARCHITECURE
This phase starts with an internal
studio meeting where all
information is brought together and
summarised in the form of an
informational flowchart defining the
basic navigation flow a user would
go through while using the
app.various different possibilities
are thought upon and a final
information structure is established
as the starting point for the app
design.
CONCEPT
SKETCHES
Rough app screens are drawn on paper to visually bring the idea
into shape. Many different ux possibilities are explored at this stage
with discussions and brainstorming sessions within the team and
then with the client.
WIREFRAMING
The best shortlisted ideas are then created as fine wireframes to be
able to see the idea coming to shape in black and white. It doesn’t
include images , colours and other fine details, but is able to
establish the app navigation in a clean and precise manner.
UX TESTING
A functional prototype of the
wireframe screens is created and
shared with the client and other
users to be able to experience the
app as if it was a real functional
app. This stage greatly helps to
capture any navigation or
functionality errors done at the
conceptual stage. It saves lots of
time and money for the client as
reifications are easily done on
earlier stages and not carried over
to the development stage.
USER
INTERFACE
DESIGN
Final screens are designed after
the client’s approval of the user
experience. The user interface
design stage involves creation of
custom icons and illustrations and
establishing a colour scheme and
layout for the app. The UI is hence
the skin of the app, but the UX is
the soul.
ON BOARDING SCREEN
UI DESIGN
UI DESIGN
Final screens are designed after
the client’s approval of the user
experience. The user interface
design stage involves creation of
custom icons and illustrations and
establishing a colour scheme and
layout for the app. The UI is hence
the skin of the app, but the UX is
the soul.
UX/UI design process - Studio CreativeMe
Thanks for watching :)
© COPYRIGHT / STUDIO CREATIVEME 2017

Mais conteúdo relacionado

Mais procurados

UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!Jayan Narayanan
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the DifferenceVibloo
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiMatin Maleki
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for StartupsRichard Fang
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyCHI UX Indonesia
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)iFactory Digital
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory sessionSooraj P R
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentationaayush_jain_87
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideBabajide Aroyewun
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)Emerentiana Meicy
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataMohamed Shehata
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience? Dotinum
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designMoodLabs
 

Mais procurados (20)

UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!UX Design + UI Design: Injecting a brand persona!
UX Design + UI Design: Injecting a brand persona!
 
What is UI/UX and the Difference
What is UI/UX and the DifferenceWhat is UI/UX and the Difference
What is UI/UX and the Difference
 
Introduction to UI UX
Introduction to UI UXIntroduction to UI UX
Introduction to UI UX
 
UI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin MalekiUI and UX Design for Startups - Matin Maleki
UI and UX Design for Startups - Matin Maleki
 
UI & UX Design for Startups
UI & UX Design for StartupsUI & UX Design for Startups
UI & UX Design for Startups
 
UX/UI Introduction
UX/UI IntroductionUX/UI Introduction
UX/UI Introduction
 
UX Experience Design: Processes and Strategy
UX Experience Design: Processes and StrategyUX Experience Design: Processes and Strategy
UX Experience Design: Processes and Strategy
 
What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)What’s the difference between a UX and UI designer? (Part two)
What’s the difference between a UX and UI designer? (Part two)
 
UI UX Introductory session
UI UX Introductory sessionUI UX Introductory session
UI UX Introductory session
 
A UI and UX training presentation
A UI and UX training presentationA UI and UX training presentation
A UI and UX training presentation
 
Understanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun BabajideUnderstanding UI/UX Design by Aroyewun Babajide
Understanding UI/UX Design by Aroyewun Babajide
 
UX is not UI!
UX is not UI!UX is not UI!
UX is not UI!
 
UI UX in depth
UI UX in depthUI UX in depth
UI UX in depth
 
How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)How to Find a Good UI/UX Designer (or be one!)
How to Find a Good UI/UX Designer (or be one!)
 
UI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed ShehataUI-UX Practical Talking - Mohamed Shehata
UI-UX Practical Talking - Mohamed Shehata
 
What is a User Experience?
What is a User Experience? What is a User Experience?
What is a User Experience?
 
UX & UI Design: Differentiate through design
UX & UI Design: Differentiate through designUX & UI Design: Differentiate through design
UX & UI Design: Differentiate through design
 
UX/UI design
UX/UI designUX/UI design
UX/UI design
 
UI/UX Courses
UI/UX Courses UI/UX Courses
UI/UX Courses
 
UX and UI
UX and UIUX and UI
UX and UI
 

Semelhante a UX/UI design process - Studio CreativeMe

Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1Durgesh Pandey
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu ZouWenzhu Zou
 
Get to know about UI/UX designing
Get to know about UI/UX designingGet to know about UI/UX designing
Get to know about UI/UX designingMenusha Pathirana
 
Unified user experience for toshiba products
Unified user experience for toshiba productsUnified user experience for toshiba products
Unified user experience for toshiba productsFlavio Fabiani
 
Introduction to ui ux
Introduction to ui uxIntroduction to ui ux
Introduction to ui uxWycliff1
 
What is user experience(ux) & ux designer
What is user experience(ux) & ux designerWhat is user experience(ux) & ux designer
What is user experience(ux) & ux designerMetricoid Technology
 
Ashfaq Amin's UX Portfolio
Ashfaq Amin's UX PortfolioAshfaq Amin's UX Portfolio
Ashfaq Amin's UX PortfolioAshfaq Amin
 
ui ux design course in hyderabad
ui ux design course in hyderabadui ux design course in hyderabad
ui ux design course in hyderabadtejashrireddyvibhin
 
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesLaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesIgor Vivchar
 
lasoft-ui_ux-presentation .pdf
lasoft-ui_ux-presentation .pdflasoft-ui_ux-presentation .pdf
lasoft-ui_ux-presentation .pdfLaSoft
 
HoytUX Design Process 2016
HoytUX Design Process 2016HoytUX Design Process 2016
HoytUX Design Process 2016Rob Hoyt
 
UI UX design.docx
UI UX design.docxUI UX design.docx
UI UX design.docxRiniyaMary
 
essentials-of-ui-design.pdf
essentials-of-ui-design.pdfessentials-of-ui-design.pdf
essentials-of-ui-design.pdfSandeshGyawali2
 
The Complete UX Deliverables
The Complete UX Deliverables The Complete UX Deliverables
The Complete UX Deliverables Bashar louzon
 
UX Design: A Concept and Evolution
UX Design: A Concept and EvolutionUX Design: A Concept and Evolution
UX Design: A Concept and EvolutionAppsbee
 
CV_portfolio_WZou
CV_portfolio_WZouCV_portfolio_WZou
CV_portfolio_WZouJewelZou
 
UI/UX - The Bigger Picture
UI/UX - The Bigger PictureUI/UX - The Bigger Picture
UI/UX - The Bigger PictureMayank Lambhate
 

Semelhante a UX/UI design process - Studio CreativeMe (20)

Game interface design part 1
Game interface design part 1Game interface design part 1
Game interface design part 1
 
Portfolio of Wenzhu Zou
Portfolio of Wenzhu ZouPortfolio of Wenzhu Zou
Portfolio of Wenzhu Zou
 
UI_UX.pptx
UI_UX.pptxUI_UX.pptx
UI_UX.pptx
 
Get to know about UI/UX designing
Get to know about UI/UX designingGet to know about UI/UX designing
Get to know about UI/UX designing
 
Unified user experience for toshiba products
Unified user experience for toshiba productsUnified user experience for toshiba products
Unified user experience for toshiba products
 
Introduction to ui ux
Introduction to ui uxIntroduction to ui ux
Introduction to ui ux
 
What is user experience(ux) & ux designer
What is user experience(ux) & ux designerWhat is user experience(ux) & ux designer
What is user experience(ux) & ux designer
 
Ashfaq Amin's UX Portfolio
Ashfaq Amin's UX PortfolioAshfaq Amin's UX Portfolio
Ashfaq Amin's UX Portfolio
 
ui ux design course in hyderabad
ui ux design course in hyderabadui ux design course in hyderabad
ui ux design course in hyderabad
 
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferencesLaSoft | Unique UI/UX design based on your ideas and user’s preferences
LaSoft | Unique UI/UX design based on your ideas and user’s preferences
 
lasoft-ui_ux-presentation .pdf
lasoft-ui_ux-presentation .pdflasoft-ui_ux-presentation .pdf
lasoft-ui_ux-presentation .pdf
 
HoytUX Design Process 2016
HoytUX Design Process 2016HoytUX Design Process 2016
HoytUX Design Process 2016
 
Vijayabaskar-Resume
Vijayabaskar-ResumeVijayabaskar-Resume
Vijayabaskar-Resume
 
UI UX design.docx
UI UX design.docxUI UX design.docx
UI UX design.docx
 
essentials-of-ui-design.pdf
essentials-of-ui-design.pdfessentials-of-ui-design.pdf
essentials-of-ui-design.pdf
 
UI_UX.pptx
UI_UX.pptxUI_UX.pptx
UI_UX.pptx
 
The Complete UX Deliverables
The Complete UX Deliverables The Complete UX Deliverables
The Complete UX Deliverables
 
UX Design: A Concept and Evolution
UX Design: A Concept and EvolutionUX Design: A Concept and Evolution
UX Design: A Concept and Evolution
 
CV_portfolio_WZou
CV_portfolio_WZouCV_portfolio_WZou
CV_portfolio_WZou
 
UI/UX - The Bigger Picture
UI/UX - The Bigger PictureUI/UX - The Bigger Picture
UI/UX - The Bigger Picture
 

Último

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfsaidbilgen
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfHctorFranciscoSnchez1
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024mikailaoh
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsBlock Party
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxSamKuruvilla5
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024Alan Dix
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLkenzukiri
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtTeeFusion
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Ted Drake
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Ed Orozco
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillCre8iveskill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...khushisharma298853
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before ConstructionResDraft
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTThink 360 Studio
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxb2kshani34
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxHasan S
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comjakyjhon00
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazineRivanEleraki
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Amil baba
 

Último (19)

Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdfBuilding+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
Building+your+Data+Project+on+AWS+-+Luke+Anderson.pdf
 
LRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdfLRFD Bridge Design Specifications-AASHTO (2014).pdf
LRFD Bridge Design Specifications-AASHTO (2014).pdf
 
UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024UX Conference on UX Research Trends in 2024
UX Conference on UX Research Trends in 2024
 
Designing for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teamsDesigning for privacy: 3 essential UX habits for product teams
Designing for privacy: 3 essential UX habits for product teams
 
Cold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptxCold War Tensions Increase - 1945-1952.pptx
Cold War Tensions Increase - 1945-1952.pptx
 
The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024The future of UX design support tools - talk Paris March 2024
The future of UX design support tools - talk Paris March 2024
 
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOLMath Group 3 Presentation OLOLOLOLILOOLLOLOL
Math Group 3 Presentation OLOLOLOLILOOLLOLOL
 
Mike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy ShirtMike Tyson Sign The Contract Big Boy Shirt
Mike Tyson Sign The Contract Big Boy Shirt
 
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
Introduce Trauma-Informed Design to Your Organization - CSUN ATC 2024
 
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...Design mental models for managing large-scale dbt projects. March 21, 2024 in...
Design mental models for managing large-scale dbt projects. March 21, 2024 in...
 
High-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkillHigh-Quality Faux Embroidery Services | Cre8iveSkill
High-Quality Faux Embroidery Services | Cre8iveSkill
 
Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...Khushi sharma undergraduate portfolio...
Khushi sharma undergraduate portfolio...
 
Construction Documents Checklist before Construction
Construction Documents Checklist before ConstructionConstruction Documents Checklist before Construction
Construction Documents Checklist before Construction
 
How to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPTHow to use Ai for UX UI Design | ChatGPT
How to use Ai for UX UI Design | ChatGPT
 
Production of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptxProduction of Erythromycin microbiology.pptx
Production of Erythromycin microbiology.pptx
 
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptxWCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
WCM Branding Agency | 210519 - Portfolio Review (F&B) -s.pptx
 
Create Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.comCreate Funeral Invites Online @ feedvu.com
Create Funeral Invites Online @ feedvu.com
 
Embroidery design from embroidery magazine
Embroidery design from embroidery magazineEmbroidery design from embroidery magazine
Embroidery design from embroidery magazine
 
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
Best-NO1 Pakistani Amil Baba Real Amil baba In Pakistan Najoomi Baba in Pakis...
 

UX/UI design process - Studio CreativeMe

  • 1. UX / UI DESIGN PROCESS STUDIO CREATIVE ME
  • 4. INFORMATION ARCHITECURE This phase starts with an internal studio meeting where all information is brought together and summarised in the form of an informational flowchart defining the basic navigation flow a user would go through while using the app.various different possibilities are thought upon and a final information structure is established as the starting point for the app design.
  • 5. CONCEPT SKETCHES Rough app screens are drawn on paper to visually bring the idea into shape. Many different ux possibilities are explored at this stage with discussions and brainstorming sessions within the team and then with the client.
  • 6. WIREFRAMING The best shortlisted ideas are then created as fine wireframes to be able to see the idea coming to shape in black and white. It doesn’t include images , colours and other fine details, but is able to establish the app navigation in a clean and precise manner.
  • 7. UX TESTING A functional prototype of the wireframe screens is created and shared with the client and other users to be able to experience the app as if it was a real functional app. This stage greatly helps to capture any navigation or functionality errors done at the conceptual stage. It saves lots of time and money for the client as reifications are easily done on earlier stages and not carried over to the development stage.
  • 8. USER INTERFACE DESIGN Final screens are designed after the client’s approval of the user experience. The user interface design stage involves creation of custom icons and illustrations and establishing a colour scheme and layout for the app. The UI is hence the skin of the app, but the UX is the soul.
  • 11. UI DESIGN Final screens are designed after the client’s approval of the user experience. The user interface design stage involves creation of custom icons and illustrations and establishing a colour scheme and layout for the app. The UI is hence the skin of the app, but the UX is the soul.
  • 13. Thanks for watching :) © COPYRIGHT / STUDIO CREATIVEME 2017