web design - 從需求到設計，我要思考什麼？

從需求到設計 我要思考什麼？RICE TSENG | INTERACTION DESIGNER @YAHOO

Interaction Designer @Yahoo

Visual Designer, UI Engineer @Trend Micro

Interaction Designer @Dlink

NCCU - Digital Content and Technologies - TUI, HCI

UX v.s UI

Product Design Process 

Web Design Process

Skills & Tools

AGENDA

UX UI有⼀樣嗎?

PRODUCT設計流程

strategy inspiration implementationideation

strategy inspiration implementationideation

Who & Why?Empathy

Hypothesis

Meaningful innovation start with USERS

strategy inspiration implementationideation

Brainstorm/ How Might We storyboarding

implementationideation

ideation

idea

prototype build

measure

learn

build

measure

iterate

design concept interaction design

visual design design language usability testing development bucket test

data analysis user night

WEB設計流程

常常我們會聽到 ⼀種需求

「要做⼀個...網站, 要做漂亮⼀點...」

但身為⼀個 設計師

我們應該思考的是...

使⽤者 網站⽬的

時程 合作對象

價錢 案例分析

REQUIREMENTS客⼾需求

1

我們那些聰明的客⼾ 永遠都不知道⾃⼰需要什麼

「滑動起來很活潑的...那種」

我的理解是 滑動 = scroll

活潑 = 有互動性，按鈕或是前後背景的層次

RWD? Parallax scrolling? Flat design style?

PLANNING規劃

2

了解使⽤者誰會造訪這網站｜為什麼｜核⼼⽬的是什麼

網站地圖網站架構｜流程

框線圖介⾯｜內容規劃

UsernameSearch Keyword

System info

Client

Dashboard

Processes

Service

Application

Interaction User

Drivers

StartupTask

File Manager

Reboot

Note

Remote

Logo

CPU information

Core 0

Core 1

Disk Drives

50GB 60GB

C:\ D:\

30GB

E:\

Processes ( Top 5 per GPU ) sort sort

Memory Information

UsernameSearch Keyword

System info

Client

Dashboard

Processes

Service

Application

Interaction User

Drivers

StartupTask

File Manager

Reboot

Note

Remote

Logo

CPU information

Core 0

Core 1

Disk Drives

50GB 60GB

C:\ D:\

30GB

E:\

Processes ( Top 5 per GPU ) sort sort

Memory Information

DESIGN開始做設計，應該注意什麼

3

設計與前置作業TYPOGRAPHY COLOR SCHEME GRID SYSTEM

design standard

typography

iconography

interaction

Color Palette

善⽤GRID排版

思考響應式網⾴的設計不同平台，導覽也會不同

圖⽚的排版會流動式的改變

DEVELOPMENT設計師沒事了嗎？

4

切圖與溝通哪邊要切圖｜可否⽤CSS 或 ICON FONT 代替

原型PROTOTYPE

CommunicationPrototype =

GapDesigner OtherRDPMDesignerstakeholders

Gapconcept execution

Language

SKILL TOOL

DESIGNPS | SKETCH | ICON FONT

CODINGCSS3 | HTML5 | JS | BOOTSTRAP | WEB FONT

Thank youdribbble : https://dribbble.com/ricetseng