[웹사이트_리디자인] 화면설계 - 와이어프레임, 메인페이지, 스토리보드 레이아웃 잡는 방법

1. 화면 설계를 위한 와이어프레임

 

- 1920x1080 기준으로 작업하되 화면설계&화면구현 시 컬러감이 들어가지 않는게 좋다. 

- 디자인 레퍼런스 참고를 위해 자주 방문하는 Pinterest 에 '와이어프레임'이라고 검색해보았다. 

 

 

[화면설계] - 와이어프레임

 

[화면설계] - 와이어프레임

 

 

2. 웹사이트 메인페이지 레이아웃 화면설계 및 구현 중요점 

기능 : 
- 사이트 명확한 목표 메시지 전달
- 사이트 전체 정보 파악 / 명확한 정보 구분
- 우선 순위 콘텐츠 강조
- 우선 순위별 시각 흐름
- 핵심 콘텐츠 : 강조(선택과 집중) 

표현 : 
- 사이트의 시각 정체성(주제, 성격) 전달
- 강렬한 룩 앤 필
- 신뢰 할 수 있는 그래픽 퀄리티 

 

3. 웹사이트 메인페이지/타이틀(서브페이지) 스토리 보드 작성방법

[UI] 화면설계(와이어프레임,스토리보드,목업)

 

스토리 보드 1단계 

＃  메뉴 구성도 만들기
전체적인 메뉴 구성도이며, 어떤 것을 보여주고 결정된 사항을 표현하기 위한 메뉴
의 순서와 구성 단계, 용어를 정의한다. 

 

스토리 보드 2단계 

 

＃   스타일 확정
레이아웃이나 글자 모양, 크기, 색상, 그래픽에서의 일관성을 유지해야 한다.

 

스토리 보드 3단계 

＃  설계하기
화면에 보여지는 시각적인 디자인 콘셉트를 잡는다.

 

 

4. Style에 들어갈 Design Guide 만들기 

웹사이트를 만들기 전 스타일에 들어갈 디자인가이드.txt를 먼저 만들고 가는 것이 좋습니다. 
어떤 서체, 어떤 컬러를 사용할 지 PPT 형태나 일러스트 와이어프레임 형태로 만들어놓는 것이 좋습니다. 

중요점 예시 

＃   반응형 구현 
＃   트렌드에 맞는 디자인
＃   개편 - 컨텐츠에 대한 수정(내용보완)
- ex) 카페 메뉴에 대한 세부적인 설명 등(정보에 관련된 보안)
- ex) 기능성보완 디자인 

＃   세부적 사항 

- 컬러, 폰트 등 

＃   기본 레이아웃 
1) 로고
2) Header 
3) Section 1,2, 
4) 네비게이션 
5) 헤더 
6) 푸터 

 

5. 웹사이트 리디자인 시 과정 Process

1. 사이트 분석
1) 기능적 부분
- 000 부분이 가시성 떨어짐 
- 중복되는 글들 카테고리로 묶어줌 
- shop 

2) 디자인 부분
- 투박한 폰트 
- 브랜드 메인컬러 찾기 어려움
- 정체성 없음
- 산만한 분위기 집중도 낮음 
- 컬러감이 통일감이 없는 느낌 



2. 디자인 방향 (키워드/마인드맵) 
- 대표키워드
- 마인드맵 

3. 컨셉 컬러 
1) 메인컬러
2) 서브컬러

4. 폰트 
1~2가지 

5. 레이아웃 
1) 메인페이지
2) 서브페이지