Intern TrainingHuman-Computer Interaction and

Visual Design

2012.07.11

OutlineHCI(Human-Computer Interface)Our Project: ANTrip Design ProcessYour project: how to design?Tools

Adobe Edge/MuseDreamwaverIllustratorPhotoshopVisio

Visual Design on my WorkComment to InternQ&A

HCI(Human-Computer Interface)How it works? Can be Usable?

What is Design?Design is not just what it looks like and feels like. Design is how it works. – by Steve.J

Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service. – by Steve.J

Design is not someone’s business, it’s about yourself thinking to face your life.

ANTrip DesignWhy ANTrip? = a(an) Trip = ant trip

Chinese: 雲水途誌 = 雲水 ( 行腳 = 步行旅行的意思， it is like a ant walking step by step)

Logo Transformation

Do not give up to change!

ANTrip DesignEdit Page Transformation

How to startBe Simple

Everything is simple.Be Empathy

Thinking what of other’s thinking.Be Patience

Design is not only supported by Passion. It needs Productivity.

That is just do it!

Your Device Handheld

Display is smaller than 7 inch.Target User?

Multi-TouchGPS/Wifi ?Awareness

Location、Motion、 Temperature

Your SoftwareFunctions

What is you think it can be improved? It’s can be better? Connecting People and know how to help them.Just drawing concrete units

on the paperroughly sketch layout、 button、manipulation、what you may think about.Mind Map

Software Design Flow ChartA business Company around 200 people PRD •Production Request Document

•Updated by Product Manager

Review •Reviewed by Product Manager, Project Manager and Sales Manager.

SRS •Software Request Specification•Updated by Software Engineer Leader or SA(Software Analyst)

Review •Reviewed by Software Engineer Leader(SA) and Project Manager.

Design Doc •Design Document•Updated by Software Engineer or SD(Software Designer)

Review •Reviewed by Software Engineer (SD) and Software Engineer Leader.

Implement •Update by Software Engineer(SE).

1st Code Review •Reviewed by Senior Software Engineer.

2st Code Review •Reviewed in meeting by more than one Software Engineers .

Component Testing •Testing by Quality Analyst.

Integration Testing •Testing by Senior Quality Analyst.

Postmortem •Done by Project Manager.

UX (User Experience) Engineer

Software Design Flow ChartUnder 20 people

ToolsEdge / Muse / Dreamwaver

Tools is not to let us stop thinking.Tools flexibility is based on what u have known

HTML5Ajax conceptJQueryMVC architecture

IllustratorVector  diagram

Can change to any size without blur.Logo or Poster design.

PhotoshopThe right tool for the right job.

Photoshop can make any truth you ever saw.

Power Functions you need to know.Erasing background BrushLayer BlendingFilter

VisioBuild up your system flow chartIt is related about how data exchange

Visual Design on my WorkHow to image on your demand?

Simple and Simple again.Users don't want things too complicated.

ExampleCorel work experience

ExampleHP work experience

ExampleFilm experience

Suggestion to YouThink it different!Everything you ever encountered is meaningful for your future design.Work hard and more care.

BACKUP

Presented by Ivan Chiou