구조 설정과 와이어프레임

수집한 정보들을 정리하기 정보 구조 설계 (Information Architecture = I.A.)

연관성 있는 콘텐츠끼리 그룹핑하고 대표적인 키워드로 설정하기.

수집한 정보들 중 직접적으로 의미가 있는 것들을 선별한 뒤, 그것들이 어떤 성격을

가지고 있는지 분류하는 것.

선정대상

메인 (index)

블로그

콘텐츠의 구조 및 구성(예시)

신랑신부

대명주단 이벤트서비스 인터뷰

상품소개

영상 3개

소개

가게소개

이벤트

Main menu

대명주단 원장 인터뷰

대명주단 장인 인터뷰

어머니

신부

• 방문상담 명주지갑 • 혼주 한벌 공짜

• 버선, 노리 무료제공 • 침대패드 무료

방문예약

견적신청

블로그링크

SNS

최근 블로그

상품사진

슬라이드

Pdf 카달로그

최근소식

연락처/ 오시는 길

방문예약 / 견적신청

전화번호

footer

화면 설계 (스토리보드 = Story Board =WireFrame) 어떤 정보를 화면에 표시할 것인지, 화면 구성은 어떻게 할 것인지, 화면 간의 흐름은 어떤지 를 구성한다.

화면구성이 생각나지 않을때는 사례를 보면서 응용한다.

로고 가게소개 상품소개 블로그 이벤트

대명주단 한복 이미지

대명주단 상품소개 sorting

http://themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266

방문예약 견적신청 사이트 링크

전화번호. 주소 . 찾아오시는길

신부한복, 신랑신부, 어머니

SNS link Facebook. Instagram. footer

사례응용

Rough layout

로고 가게소개 상품소개 블로그 이벤트

30년전통 대명주단 이미지

대명주단 소개

대명주단 이벤트

대명주단 한복장인

SNS link Facebook. Instagram. footer

블로그 상품소개 가게소개

메인

전체적으로

원형을 만들어보기

정보 구조도

화면구성 wireframe

Rough layout

프로토타이핑 도구로 테스트

Design reference 화면구성 wireframe

Detail layout

Coding bootstrap