Visual Designer

to 

UX Designer

 

Feature Creep = Stress

 

 

Feature Creep =/= Profit

LEAN STARTUP

in S.K...

전형적인 IT 직종은?

 

기획

 

 

 

 

디자인

 

 

 

 

퍼블리싱

or 프론트 엔드 개발

 

 

 

개발

 

 

 

칼로 두부자르듯 나누어져있다!!!

특히 디자인은

visual design을 명명하는 경우가 굉장히 많음 

왜냐면 기획이라는 파트가 있기 때문임

https://blog.generalassemb.ly/what-type-of-design-is-right-for-you/ 

 Graphic / Visual / UX designers 차이에 대한 통상적 설명 

사실 범세계적으로는

이것에 더 가깝다

plan - strategy

국내에서는 전략기획이라고 많이 부름, 마케팅이며 컨셉, 비즈니스 플랜 등이 해당한다

define - 요구사항 분석

국내에서는 PM 이라는 기획자 출신 또는 실무에서 손 뗀 개발자 출신의 중간관리자가 많이 한다. 

DESIGN - UX/VISUAL

develop - front / back-end

extend - 사후점검 및 유지보수!

 

Information

Architect

Interaction

Designer

User

Researcher

wireframe

sitemap

task flow

navigation design

일단 논외..

얘들이 뭐하는 일인지는

차차 설명을....

visual design

visual design

interaction design

information architect

UX 디자인 프로젝트 가이드

제 2판

위키북스

에서 모든 내용을 참조(베낌)

구입강추

디자이너와 운영자 개발자 

모두에게 유용한 책

본인은 출판사와 관계가 없습니다

어디서부터

뭘 어떻게

시작하나???

대부분의 클라이언트는

대략적인 원하는 바가 있다.

그런데 말그대로 매우 대략적이고

수시로 바뀜.

그래서 define 단계가 얼마나 중요한가는 모두가 통감하는 현실이므로 구지 언급하지 않고...

그래서 어디서 부터 뭘 어떻게 접근할것인가?

 

 ux 디자인에는 여러가지가 있겠지만 오늘은 

 

User Scenario를 바탕으로

Sitemap과 

기능정의서 제작하는 법

와이어 프레임은 다음 시간에...

 

 

 

flow chart (task flow)

웹/앱 어플리케이션의 개발에만 쓰이지 않고 프로세스가 필요할 때 범용적으로 사용됨

 

 

예시를 봐볼까요 

Task Flow는 한없이 복잡해 질수도있다

예시를 볼까요

로그인 프로세스

이와같은 수준의 Task Flow

Lean Startup에서

디자이너가 직접 제작하기는 무리

그래도 궁금하다면 또는

언젠가 UX Design master가

되고 싶다면

 

http://www.smartdraw.com/flowchart/flowchart-symbols.htm

사이트 맵의 확실한 특징은

페이지 별이라는 점

 

이점 1. flow chart(task chart) 보다 클라이언트와 소통하기 쉽다.

이점 2. 페이지 별이므로 디자인 견적 산출에 용이하다. 

각각에 대해 한번 살펴봅시다

User scenario

Sitemap 

Feature List

정답도 없고

표준도 없다

 

다만 관습만이 있을뿐... 

따라서 최적화된 양식을 만들 필요가 있다

그래서 정리함..(베낌) 

1. Depth 

2. Decision

3. User role

4. Page ID

1. Depth

메인페이지의 주요 네비게이션의 페이지를 보통 1 depth로 본다.

 

주요 네비게이션 = 대메뉴 = Global Navigation Bar

 

또한 마이페이지 및 회원가입 메뉴도 보통 메인페이지의 주요 네비게이션에 포함되므로 보통 1 Depth로 본다.

 

 

2. Decision

유저 시나리오와 밀접하게 연관이 있다.

모든 경우의 수(유저의 선택 및 다양한 결과)와 연관이 있다. 

 

3. User role

대규모 서비스일 수록,

유저 종류에 따라 다르게 적용되는 기능이 많을 수록 중요하다.

 

일반적으로 최소한 3가지의 경우를 생각해야 한다. 

어드민 유저 / 일반 유저 / 비유저(로그아웃 및 비회원) 

 

하지만 유저의 종류는 생각보다 다양해질 수 있다.

ex ) 소셜로그인 회원, 옵션정보 미입력 회원, 유료서비스 사용 회원, 기업회원... etc...

4. Page ID

보통 Depth를 기준으로 Page ID를 가지게 된다.

기준은 정하기 나름. 

 

0.0.0 = 보통 서비스의 메인페이지일 것이다. 

2.0.0 또는 B.0.0 = 대메뉴 중 하나의 리스트 페이지일 것이다.

1.1.0 또는 A.1.0 = 대메뉴의 리스트 페이지 다음의 상세 페이지일 것이다.

2.1.3  또는 B.1.3 = 상세 페이지에서 정보 입력을 위한 필드 또는 그 안에 또 무슨 페이지 등의 단계...

 

 

 

  

 

 

 

기능정의서

사이트 맵과 달리 페이지별이 아닌,

개발 이슈로 구분되는 기능 덩어리의 정의

 brief ver 기능정의 명세서 살펴보기

1. 같은 기능이 여러 페이지에 포함될 수 있다.  ex) 댓글기능

 

2. 등록 / 조회 / 수정 / 삭제를 CRUD라고 한다.

Create / Read / Modify / Delete

 

3. 잘 모르겠는 기능은 개발자와 상의한다. 사이트맵이 디자인 공수라면, 기능정의서는 개발 공수 그 자체이다.

 

4. 기능정의서는 회의록처럼 매 미팅이 끝나면 남기고, 클라이언트와 개발사 양측의 합의를 보도록 한다. 

 

5. 최대한 상세하게 기능에 대한 설명을 기술하고(개발자와 상의),

와이어 프레임을 그릴 때는 기능정의서와 사이트맵 모두를 참조한다.

 

 

 

골딕 기능정의서를 볼까요

Sitemap은 1.1.1, 1.2.3

기능정의서는  A1, B8

로 하도록 정하겠습니다. 

실습의 시간

모펜을 정의해보자

Visual Designer to UX Designer

By lsw

Visual Designer to UX Designer

  • 1,219