SlideShare a Scribd company logo
What’s the Problem?
Right Solutions to Right Problems
thru UI Design
DesignDrive.co/lab/workshops/whats-the-problem
v 1.2
Scope
Designers & Developers of UI
Web Sites & Apps
Purpose
UI Team = Problem Solvers
Goals
Collaboration
Project Organization
Design Process
Prototype
User Interface Design
UID is +UX
User Interface Design
+UX helps Users
achieve their goals
User Interface Design
Happy Users
=
Happy Business
Team
Right Mindset
Team
Right Dynamics
Team
Right Questions
Design Process
0: Conceptualization
1: Information
2: Interaction
3: Presentation
4: Implementation
Design Process
Stage 0
Conceptualization
What’s the purpose of the product?
Design Process
Stage 1
Information
What is it that you want users to understand?
Design Process
Stage 2
Interaction
How will the content be used?
Design Process
Stage 3
Presentation
How is the content presented?
Design Process
Stage 4
Implementation
How will we integrate technology?
Design Process Goals
Accessibility
Optimization
Adaptability
Scalability
Design Artifacts
Conceptualization
Project Info Document
Personas & Scenarios
Creative Brief
Design Artifacts
Information
Site Map
Flowchart
Design Artifacts
Interaction
Components Master List
Interaction Diagram
Design Artifacts
Presentation
Style Guide
Animation Diagram
Design Artifacts
Implementation
Prototype
Product
Types of Artifacts
Sketches
Wireframes
Mockups
Prototypes
Content
Presentation
Behavior
HTML
CSS
JS
Front-End Design Principles
Progressive Enhancement
Mobile-First
Responsive Web Design
Front-End Design Principles
Minimize HTTP Request
Compress Assets
Load JS Last
Front-End Optimization
HTML Outline GSnedders.HTML5.org/outliner
HTML, CSS Validation Validator.W3.org
Image Optimization ImageOptim.com
Responsive Web Design Chrome DevTool
Front-End Design Checklist
Code: Github
Files: Dropbox, Google Drive
Mockups: InVision
Testing: Silverback
Design: Sketch, Photoshop
Development: Brackets, Android/iOS IDE
Front-End Tools & Services
Project Name
platform: Web, Android, iOS
comps: Presentation Files
dev: Front-End Files
docs: Misc Files
raw: Source Files
Project Folder Organization
project-name_platform_date_version_.ext
Filename Syntax
Websites
Developers.Google.com
SmashingMagazine.com
UXMatters.com
Viget.com/blogs
Groups
Philippine Web Designers
Usability Philippines
Philippine Web Accessibility Group
Events
Form Function & Class
UX Philippines
Grafika Manila
© 2015 Brian Dys Sahagun. All Rights Reserved.

More Related Content

Similar to What's the Problem? Workshop - Right Solutions to Right Problems thru UI Design

UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
sumit singh
 
Top 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX DesignersTop 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX Designers
topseowebmaster
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
Digital Snack
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
Sarah Dutkiewicz
 
Intro to UIUX.pptx
Intro to UIUX.pptxIntro to UIUX.pptx
Intro to UIUX.pptx
ADRIANASAAGCAOILI
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic Advantage
Michael Dubakov
 
Unique UI/UX Design
Unique UI/UX DesignUnique UI/UX Design
Unique UI/UX Design
Andriy Tatchyn
 
Understanding the Concept of Web Design and Development.pdf
Understanding the Concept of Web Design and Development.pdfUnderstanding the Concept of Web Design and Development.pdf
Understanding the Concept of Web Design and Development.pdf
Promanage IT Solutions
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
Sarah Dutkiewicz
 
Designing your UX Career
Designing your UX CareerDesigning your UX Career
Designing your UX Career
Ranjeet Tayi
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
topseowebmaster
 
What is UI UX Design_ Difference Between UI & UX.pptx
What is UI UX Design_ Difference Between UI & UX.pptxWhat is UI UX Design_ Difference Between UI & UX.pptx
What is UI UX Design_ Difference Between UI & UX.pptx
TurboAnchor
 
Requirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial WebRequirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial Web
Michael Maclennan
 
Copy of GDSC23 - Speaker Presentation Template.pptx_20230829_075717_0000.pptx
Copy of GDSC23 - Speaker Presentation Template.pptx_20230829_075717_0000.pptxCopy of GDSC23 - Speaker Presentation Template.pptx_20230829_075717_0000.pptx
Copy of GDSC23 - Speaker Presentation Template.pptx_20230829_075717_0000.pptx
SipraMohanty11
 
Help Wanted: Using UX to Your Advantage
Help Wanted: Using UX to Your AdvantageHelp Wanted: Using UX to Your Advantage
Help Wanted: Using UX to Your Advantage
FITC
 
UI content
UI contentUI content
UI content
MUDDUKRISHNA14
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
Shawn Calvert
 
Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop
Brenna Mickey
 
Putting the "User" back in User Experience (Dallas Techfest Edition)
Putting the "User" back in User Experience (Dallas Techfest Edition)Putting the "User" back in User Experience (Dallas Techfest Edition)
Putting the "User" back in User Experience (Dallas Techfest Edition)
Jeremy Johnson
 
Ux strategy 112315c
Ux strategy 112315cUx strategy 112315c
Ux strategy 112315c
Brad Briscoe
 

Similar to What's the Problem? Workshop - Right Solutions to Right Problems thru UI Design (20)

UI/UX Design
UI/UX DesignUI/UX Design
UI/UX Design
 
Top 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX DesignersTop 10 Skills For UI/UX Designers
Top 10 Skills For UI/UX Designers
 
UX Design Mini Course
UX Design Mini CourseUX Design Mini Course
UX Design Mini Course
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
 
Intro to UIUX.pptx
Intro to UIUX.pptxIntro to UIUX.pptx
Intro to UIUX.pptx
 
User Experience as a Strategic Advantage
User Experience as a Strategic AdvantageUser Experience as a Strategic Advantage
User Experience as a Strategic Advantage
 
Unique UI/UX Design
Unique UI/UX DesignUnique UI/UX Design
Unique UI/UX Design
 
Understanding the Concept of Web Design and Development.pdf
Understanding the Concept of Web Design and Development.pdfUnderstanding the Concept of Web Design and Development.pdf
Understanding the Concept of Web Design and Development.pdf
 
The UX Toolbelt for Developers
The UX Toolbelt for DevelopersThe UX Toolbelt for Developers
The UX Toolbelt for Developers
 
Designing your UX Career
Designing your UX CareerDesigning your UX Career
Designing your UX Career
 
UI_UX Design Program.pdf
UI_UX Design Program.pdfUI_UX Design Program.pdf
UI_UX Design Program.pdf
 
What is UI UX Design_ Difference Between UI & UX.pptx
What is UI UX Design_ Difference Between UI & UX.pptxWhat is UI UX Design_ Difference Between UI & UX.pptx
What is UI UX Design_ Difference Between UI & UX.pptx
 
Requirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial WebRequirements Definitions Of The Geospatial Web
Requirements Definitions Of The Geospatial Web
 
Copy of GDSC23 - Speaker Presentation Template.pptx_20230829_075717_0000.pptx
Copy of GDSC23 - Speaker Presentation Template.pptx_20230829_075717_0000.pptxCopy of GDSC23 - Speaker Presentation Template.pptx_20230829_075717_0000.pptx
Copy of GDSC23 - Speaker Presentation Template.pptx_20230829_075717_0000.pptx
 
Help Wanted: Using UX to Your Advantage
Help Wanted: Using UX to Your AdvantageHelp Wanted: Using UX to Your Advantage
Help Wanted: Using UX to Your Advantage
 
UI content
UI contentUI content
UI content
 
User Centered Design
User Centered DesignUser Centered Design
User Centered Design
 
Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop Fundamentals of Web Design - Professional Development Workshop
Fundamentals of Web Design - Professional Development Workshop
 
Putting the "User" back in User Experience (Dallas Techfest Edition)
Putting the "User" back in User Experience (Dallas Techfest Edition)Putting the "User" back in User Experience (Dallas Techfest Edition)
Putting the "User" back in User Experience (Dallas Techfest Edition)
 
Ux strategy 112315c
Ux strategy 112315cUx strategy 112315c
Ux strategy 112315c
 

Recently uploaded

A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
Mostafa Abd Elrahman
 
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdfSMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
Magdiel70
 
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
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
kousato1
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
Mostafa Abd Elrahman
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Rostyslav Kasyanenko
 
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 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
rawankhanlove256
 
Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)
Kal-el Shows
 
Introduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptxIntroduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptx
Xiamen Tsianfan Industrial & Trading Co.,Ltd.
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
bookkdreambebe
 
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
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
Peclers Paris
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdfAcclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
ssuserdee4d8
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
lakshmichitra031
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
sonalibook860
 
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's HubOwokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
ifeoluwaowokoya
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
NakulJain35
 
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
 

Recently uploaded (20)

A Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdfA Journey Through Islamic Architecture.pdf
A Journey Through Islamic Architecture.pdf
 
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdfSMACNA -  DUCT CONSTRUCTION STANDARDS-2005.pdf
SMACNA - DUCT CONSTRUCTION STANDARDS-2005.pdf
 
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
 
2024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_202407082024_summer_my_dream_from_users_gnjp_20240708
2024_summer_my_dream_from_users_gnjp_20240708
 
A Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainabilityA Green City is an urban area that prioritizes sustainability
A Green City is an urban area that prioritizes sustainability
 
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENGPortfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
Portfolio of Family Coat of Arms, devised by Kasyanenko Rostyslav, ENG
 
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 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
 
Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)Identity Issues (Slideshow by: Kal-el Go)
Identity Issues (Slideshow by: Kal-el Go)
 
Introduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptxIntroduction of Stone Display Stand.pptx
Introduction of Stone Display Stand.pptx
 
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model SafeGirls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
Girls Call Indore ❤ 9800★00002 ❤ VIP Neha Singla Top Model Safe
 
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
 
SS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers ParisSS26 Men's Fashion Trend Book Peclers Paris
SS26 Men's Fashion Trend Book Peclers Paris
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdfAcclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
Acclerating_the_energy_transition_Microsoft_x_WindEurope_1711355110.pdf
 
Overview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets ModuleOverview to the Oracle Fixed Assets Module
Overview to the Oracle Fixed Assets Module
 
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
Girls call Service Indore 000XX00000 Provide Best And Top Girl Service And No...
 
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's HubOwokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
Owokoya Ifeoluwa PORT- FOLIO (1).pdf Tolu's Hub
 
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdhBalhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
Balhani 1st yr (1).pdfhshhshshshshshshshdhdhdh
 
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
 

What's the Problem? Workshop - Right Solutions to Right Problems thru UI Design