[디자인기초] 14강. 웹 디자인 프로세스

1 웹 디자인 프로세스

 

■ 웹 디자인 프로세스

 

1) 조사&분석

- 누가 이 웹 사이트를 사용할 것인가? (관심사/연령/습성/생활환경)

- 고객의 요구를 파악

- 웹 사이트를 왜 만드는가?

- 웹 사이트의 목표를 명확히 설정

- 주의 : 다양한 재미를 주기 위해 내용을 너무 많이 넣으면 본래 목적과 어긋난 목적과 행동을 할 수 있다.

 

2) 컨셉설정

- 웹 사이트의 목적전달을 위해 공통적인 성질을 결정.

- 웹 페이지의 모든 요소(이미지, 모양, 컬러, 내용, 특징)에서 공통적으로 느껴질 수 있는 하나의 개념(일관성)

- 슬로건 → 'Play SM3! 지루한 일상은 젊음에 대한 죄다.'

- 컨셉 → '재미있는 사이트, 즐거움이 있는 사이트'

 

3) 구조설계 및 네비게이션 디자인

- 웹 페이지의 많은 정보를 페이지 별로 적절히 나누고 찾기 쉽도록 만드는 작업.

- 네비게이션 디자인의 방법

① 유사한 내용끼리 묶어 주기

② 이름 정해 주기

③ 가능한한 페이지의 이동 줄여 주기

ex) 원스톱 쇼핑의 개념을 영화예매 사이트 네비게이션 디자인에 적용시킨 사례.

- 웹 사이트에 들어갈 컨텐츠들의 구성방식 결정.

- 네비게이션 디자인은 이용자들의 편리성을 중심으로 설계.

- 장기적인 변화를 예상하면 웹사이트를 운영하고 수정하는 수고를 줄일 수 있게 됨.

 

4) 제작

- 네비게이션 및 구조설계를 바당으로 한 실제적인 페이지 디자인.

① 프로토타입 제작

- 웹 페이지 본 제작을 위하여 서로 다르게 2~3가지를 디자인.

- 웹사이트의 특정부분만 간추린 축소판을 보여줌.

- 외형적인 디자인의 느낌과 함께 사용상의 문제점 점검.

② 화면제작 및 매체제작

- 웹 페이지의 외형적인 디자인 구성을 위한 이미지 제작 및 편집과정.

- 플래시, 동영상, 이미지, 애니메이션 등이 포함.

- 예상 사용자들의 모니터 코기와 하드웨어의 수준, 인터넷 전송속도 고려.

③ HTML 코딩

- 그림이나 문자 들을 웹 페이지 상에 나타나게 하는 기본적인 프로그래밍 작업.

- 웹 디자이너에게는 필수적인 능력.

 

5) 사이트 테스트 및 오픈

- 사이트 제작이 완료되면 테스트를 거친다.

- 웹 서버에 올려 외부에서 사용되도록 한다.

① 페이지간 이동

② 구현된 기능

③ 사용상 편의성

- 오픈 → 수정/정보갱신/유지/관리

 

 

<정리하기> 1. 웹 디자인 과정 1) 조사&분석 2) 컨셉 설정 3) 구조설계 및 네비게이션 디자인 4) 제작 - 프로토 타입 제작 - 화면제작 및 매체제작 - HTML 코딩 5) 사이트 테스트 및 오픈