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

Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
ellemjani
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NishantRathi18
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
lhtvqoag
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
k7nm6tk
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
talaatahm
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
9lq7ultg
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
tobbk6s8
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
Jaime Brown
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
ijk38lw
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
bagmai
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
Bianca Woods
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
PabloMartelLpez
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
kuapy
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
bo44ban1
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
Harry Harrold
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
Virtual Real Design
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
k4krdgxx
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
anthonylin333
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
wkip62b
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
3vgr39kx
 

Recently uploaded (20)

Introduction to User experience design for beginner
Introduction to User experience design for beginnerIntroduction to User experience design for beginner
Introduction to User experience design for beginner
 
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHINHR Engineers Portfolio 2023 2024 NISHANT RATHI
NHR Engineers Portfolio 2023 2024 NISHANT RATHI
 
NHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree TranscriptNHL Stenden University of Applied Sciences Diploma Degree Transcript
NHL Stenden University of Applied Sciences Diploma Degree Transcript
 
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
一比一原版(LSBU毕业证书)伦敦南岸大学毕业证如何办理
 
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdfAHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
AHMED TALAAT ARCHITECTURE PORTFOLIO .pdf
 
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
一比一原版马里兰大学毕业证(UMD毕业证书)如何办理
 
一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样一比一原版肯特大学毕业证UKC成绩单一模一样
一比一原版肯特大学毕业证UKC成绩单一模一样
 
Heuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdfHeuristics Evaluation - How to Guide.pdf
Heuristics Evaluation - How to Guide.pdf
 
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
一比一原版(Vancouver毕业证书)温哥华岛大学毕业证如何办理
 
Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)Manual ISH (International Society of Hypertension)
Manual ISH (International Society of Hypertension)
 
Practical eLearning Makeovers for Everyone
Practical eLearning Makeovers for EveryonePractical eLearning Makeovers for Everyone
Practical eLearning Makeovers for Everyone
 
CocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdfCocaCola_Brand_equity_package_2012__.pdf
CocaCola_Brand_equity_package_2012__.pdf
 
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
按照学校原版(UIUC文凭证书)伊利诺伊大学|厄巴纳-香槟分校毕业证快速办理
 
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
一比一原版阿肯色大学毕业证(UCSF毕业证书)如何办理
 
Getting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by NeontribeGetting Data Ready for Culture Hack by Neontribe
Getting Data Ready for Culture Hack by Neontribe
 
Graphic Design Tools and Software .pptx
Graphic Design Tools and Software   .pptxGraphic Design Tools and Software   .pptx
Graphic Design Tools and Software .pptx
 
一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样一比一原版马来西亚世纪大学毕业证成绩单一模一样
一比一原版马来西亚世纪大学毕业证成绩单一模一样
 
UXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdfUXpert_Report (UALR Mapping Renewal 2022).pdf
UXpert_Report (UALR Mapping Renewal 2022).pdf
 
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理一比一原版布兰登大学毕业证(BU毕业证书)如何办理
一比一原版布兰登大学毕业证(BU毕业证书)如何办理
 
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
一比一原版南安普顿索伦特大学毕业证Southampton成绩单一模一样
 

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