Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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
Responsi...
Code: Github
Files: Dropbox, Google Drive
Mockups: InVision
Testing: Silverback
Design: Sketch, Photoshop
Development: Bra...
Project Name
platform: Web, Android, iOS
comps: Presentation Files
dev: Front-End Files
docs: Misc Files
raw: Source Files...
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.
Upcoming SlideShare
Loading in …5
×

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

What’s the Problem? Workshop was created to uphold the importance of UI team’s role in providing right solutions to right problems thru UI design.

The key to providing positive UX in a digital product is identifying the users’ and the business’ goals and eliminating the hindrances along the way. This challenge entails solving problems and it is important to note that we must match right problems with right solutions – the team’s mindset, dynamics, and techniques play a big role in overcoming challenges.

http://designdrive.co/lab/workshops/whats-the-problem

  • Login to see the comments

  • Be the first to like this

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

  1. 1. What’s the Problem? Right Solutions to Right Problems thru UI Design DesignDrive.co/lab/workshops/whats-the-problem v 1.2
  2. 2. Scope Designers & Developers of UI Web Sites & Apps
  3. 3. Purpose UI Team = Problem Solvers
  4. 4. Goals Collaboration Project Organization Design Process Prototype
  5. 5. User Interface Design UID is +UX
  6. 6. User Interface Design +UX helps Users achieve their goals
  7. 7. User Interface Design Happy Users = Happy Business
  8. 8. Team Right Mindset
  9. 9. Team Right Dynamics
  10. 10. Team Right Questions
  11. 11. Design Process 0: Conceptualization 1: Information 2: Interaction 3: Presentation 4: Implementation
  12. 12. Design Process Stage 0 Conceptualization What’s the purpose of the product?
  13. 13. Design Process Stage 1 Information What is it that you want users to understand?
  14. 14. Design Process Stage 2 Interaction How will the content be used?
  15. 15. Design Process Stage 3 Presentation How is the content presented?
  16. 16. Design Process Stage 4 Implementation How will we integrate technology?
  17. 17. Design Process Goals Accessibility Optimization Adaptability Scalability
  18. 18. Design Artifacts Conceptualization Project Info Document Personas & Scenarios Creative Brief
  19. 19. Design Artifacts Information Site Map Flowchart
  20. 20. Design Artifacts Interaction Components Master List Interaction Diagram
  21. 21. Design Artifacts Presentation Style Guide Animation Diagram
  22. 22. Design Artifacts Implementation Prototype Product
  23. 23. Types of Artifacts Sketches Wireframes Mockups Prototypes
  24. 24. Content Presentation Behavior HTML CSS JS Front-End Design Principles
  25. 25. Progressive Enhancement Mobile-First Responsive Web Design Front-End Design Principles
  26. 26. Minimize HTTP Request Compress Assets Load JS Last Front-End Optimization
  27. 27. 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
  28. 28. Code: Github Files: Dropbox, Google Drive Mockups: InVision Testing: Silverback Design: Sketch, Photoshop Development: Brackets, Android/iOS IDE Front-End Tools & Services
  29. 29. Project Name platform: Web, Android, iOS comps: Presentation Files dev: Front-End Files docs: Misc Files raw: Source Files Project Folder Organization
  30. 30. project-name_platform_date_version_.ext Filename Syntax
  31. 31. Websites Developers.Google.com SmashingMagazine.com UXMatters.com Viget.com/blogs
  32. 32. Groups Philippine Web Designers Usability Philippines Philippine Web Accessibility Group
  33. 33. Events Form Function & Class UX Philippines Grafika Manila
  34. 34. © 2015 Brian Dys Sahagun. All Rights Reserved.

×