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 Usersachieve 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 DocumentPersonas & 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

ContentPresentationBehavior

HTML

CSS

JS

Front-End Design Principles

Progressive EnhancementMobile-First

Responsive Web Design

Front-End Design Principles

Minimize HTTP RequestCompress 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.