1.
What’s the Problem?
Right Solutions to Right Problems
thru UI Design
DesignDrive.co/lab/workshops/whats-the-problem
v 1.2

2.
Scope
Designers & Developers of UI
Web Sites & Apps

3.
Purpose
UI Team = Problem Solvers

4.
Goals
Collaboration
Project Organization
Design Process
Prototype

5.
User Interface Design
UID is +UX

6.
User Interface Design
+UX helps Users
achieve their goals

7.
User Interface Design
Happy Users
=
Happy Business

8.
Team
Right Mindset

9.
Team
Right Dynamics

10.
Team
Right Questions

11.
Design Process
0: Conceptualization
1: Information
2: Interaction
3: Presentation
4: Implementation

12.
Design Process
Stage 0
Conceptualization
What’s the purpose of the product?

13.
Design Process
Stage 1
Information
What is it that you want users to understand?

14.
Design Process
Stage 2
Interaction
How will the content be used?

15.
Design Process
Stage 3
Presentation
How is the content presented?

16.
Design Process
Stage 4
Implementation
How will we integrate technology?

17.
Design Process Goals
Accessibility
Optimization
Adaptability
Scalability

18.
Design Artifacts
Conceptualization
Project Info Document
Personas & Scenarios
Creative Brief

19.
Design Artifacts
Information
Site Map
Flowchart

20.
Design Artifacts
Interaction
Components Master List
Interaction Diagram

21.
Design Artifacts
Presentation
Style Guide
Animation Diagram

22.
Design Artifacts
Implementation
Prototype
Product

23.
Types of Artifacts
Sketches
Wireframes
Mockups
Prototypes

24.
Content
Presentation
Behavior
HTML
CSS
JS
Front-End Design Principles

25.
Progressive Enhancement
Mobile-First
Responsive Web Design
Front-End Design Principles

26.
Minimize HTTP Request
Compress Assets
Load JS Last
Front-End Optimization

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.
Code: Github
Files: Dropbox, Google Drive
Mockups: InVision
Testing: Silverback
Design: Sketch, Photoshop
Development: Brackets, Android/iOS IDE
Front-End Tools & Services

29.
Project Name
platform: Web, Android, iOS
comps: Presentation Files
dev: Front-End Files
docs: Misc Files
raw: Source Files
Project Folder Organization

30.
project-name_platform_date_version_.ext
Filename Syntax

31.
Websites
Developers.Google.com
SmashingMagazine.com
UXMatters.com
Viget.com/blogs

32.
Groups
Philippine Web Designers
Usability Philippines
Philippine Web Accessibility Group

33.
Events
Form Function & Class
UX Philippines
Grafika Manila

34.
© 2015 Brian Dys Sahagun. All Rights Reserved.