- 색상
- 포인트 컬러 #666666 호버하면 #555555
-
베이스 컬러는 전체적으로 흰색 - 입력창은 #eeeeee 포커싱하면 테두리 강조 #666666
- 포인트 컬러는 바꾸기로 했으나 실제 적용된 느낌을 모두 함께 보고 판단하기로 하자.
-
고객센터 문의사항에 카테고리, 파일첨부, 이메일, 핸드폰 번호 - 제품 상세 페이지
- 상품 이미지, 옵션 5:5
- 상세 정보, 리뷰, Q&A, 반품, 배송정보, 원산지 표기
- 주문 제작 페이지
- 사용자가 원하는 사진?이미지를 올릴 수 있게 만들자.
- 위로 버튼
- 폰트
- 각자 작업물 취합후 정식 프로젝트에 기용
- 메뉴를 헤더에 넣고 글씨 흰색 배경 노노
- 헤더 아래 이미지 헤더랑 붙이기
사이트의 존재의의는 아래의 모든 것을 관통한다. 존재의의는 이 사이트의 목적과도 연관이 있다.
목적이 정해졌다. 그럼 이제 특정 사용층을 정해두고 그들을 공략할 생각을 해야한다. 어떤 사람들이 이 사이트를 필요로할까? 라는 생각이 바로 나와야한다.
우리는 쇼핑몰을 만든다. 여러 상품을 노출시키고, 상품을 판매하는 것으로 사용자들에게 만족감을 주고 추후에 다시 이용할 수 있게끔 만드는 것이 목적이라고 할 수 있다. 사용자들은 쇼핑몰에서 상품을 찾아보고, 둘러보면서 마음에 드는 게 있으면 가져간다. 사용하는 사람들의 입장에서도 생각해봐야한다는 의미이다. 이를 유저시나리오라고 한다.
사용자 입장에서 생각하면 어떤 컨텐츠들이 있어야하고, 배치를 어떻게 하면 좋을지에 대한 힌트를 얻을 수 있다.
타켓층이 정해졌다. 그럼 이제 그들에게 어떤 것을 보여줄 것인지에 대한 확실한 생각이 있어야한다.
마케팅 요소가 있어야한다는 의미. 차별점이 있고 이를 어필해야 이용자가 '정착'한다. 이것을 생각하면서 자연스럽게 벤치마킹을 하게 된다.
사이트맵이란 웹 사이트의 모든 페이지를 모아둔 것이다. 메뉴라고 생각하도 된다. 만들 웹 사이트에 어떤 페이지들이 있을지를 먼저 구상해봐야한다. 보통 1차 메뉴부터 2차 메뉴까지 있는 경우가 많고 3차 메뉴까지 있는 경우도 있다.
컨텐츠도 정해졌고, 타켓도 정해졌다면 이를 구현하기 위해 어떠한 기능을 만들 것인지부터 시작해서 그 기능을 보여주기 위해 정보를 어떻게 담을 것인지, 그리고 그 정보의 흐름을 어떻게 구현할 것인지를 정하기 시작한다.
정보구조도는 두가지 유형이 있는데 웹 사이트가 어떤 페이지들을 갖고 있을지 트리구조로 도식화하는 유형과 페이지별로 어떤 정보를 주고, 어떤 역할을 하는지를 정리하는 유형이 있다. 그 정리된 기능들이 어떤 흐름으로 연계되어 흘러갈지를 도식화해서 정리해둔 것이 플로우차트이다. 순서도라고도 한다.
이 부분을 생략하면 상당히 곤란하겠지만, 적어도 메뉴구성은 필수적으로 되어있어야한다.
와이어프레임을 구성한 후에 정보구조도와 플로우차트를 참고해서 스토리보드를 형성한다. 와이어프레임은 실질적인 디자인을 하기 전에 각 페이지의 박스들이 어디에 위치할 것인가를 시뮬레이션하는 것이다. 스토리보드는 화면설계서이다. 페이지를 구성하는 각 박스들이 어떤 기능을 보이는지를 정리하는 것이다.
실질적인 개발 전에 최종적으로 만들어지는 기획 결과물이기 때문에 정보구조도와 플로우차트가 필요하다.
디자인은 그저 예쁘게 보이기 위한 것이 아니기 때문에 배치를 왜 이렇게 했는지에 대한 '생각'이 있어야한다. 사용자들의 시각으로 그 흐름을 잘 생각해봐야한다. 페이지별로 디자인들이 일치해야하기 때문에 규칙을 잘 마련해두기도 해야한다. 예를들어, 색상이나 애니메이션 같은 것들은 일관성이 있어야하겠다.
지금까지의 과정을 그대로 구현한다. 구현이 목적이기 때문에 과한 욕심을 부려서는 안되고 과하지 않고 구현할 수 있는 선에서 지금까지의 과정이 이루어져야지만 매끄러운 구현이 가능하다.