Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

구조 설정과 와이어프레임

..

  • Identifiez-vous pour voir les commentaires

구조 설정과 와이어프레임

  1. 1. 수집한 정보들을 정리하기 정보 구조 설계 (Information Architecture = I.A.) 연관성 있는 콘텐츠끼리 그룹핑하고 대표적인 키워드로 설정하기. 수집한 정보들 중 직접적으로 의미가 있는 것들을 선별한 뒤, 그것들이 어떤 성격을 가지고 있는지 분류하는 것. 선정대상
  2. 2. 메인 (index) 블로그 콘텐츠의 구조 및 구성(예시) 신랑신부 대명주단 이벤트서비스 인터뷰 상품소개 영상 3개 소개 가게소개 이벤트 Main menu 대명주단 원장 인터뷰 대명주단 장인 인터뷰 어머니 신부 • 방문상담 명주지갑 • 혼주 한벌 공짜 • 버선, 노리 무료제공 • 침대패드 무료 방문예약 견적신청 블로그링크 SNS 최근 블로그 상품사진 슬라이드 Pdf 카달로그 최근소식 연락처/ 오시는 길 방문예약 / 견적신청 전화번호 footer
  3. 3. 화면 설계 (스토리보드 = Story Board =WireFrame) 어떤 정보를 화면에 표시할 것인지, 화면 구성은 어떻게 할 것인지, 화면 간의 흐름은 어떤지 를 구성한다. 화면구성이 생각나지 않 을때는 사례를 보면서 응용한다.
  4. 4. 로고 가게소개 상품소개 블로그 이벤트 대명주단 한복 이미지 대명주단 상품소개 sorting http://themeforest.net/item/salient-responsive-multipurpose-theme/full_screen_preview/4363266 방문예약 견적신청 사이트 링크 전화번호. 주소 . 찾아오시는길 신부한복, 신랑신부, 어머니 SNS link Facebook. Instagram.footer 사례응용
  5. 5. Rough layout
  6. 6. 로고 가게소개 상품소개 블로그 이벤트 30년전통 대명주단 이미지 대명주단 소개 대명주단 이벤트 대명주단 한복장인 SNS link Facebook. Instagram.footer
  7. 7. 블로그상품소개가게소개 메인 전체적으로 원형을 만들어보기
  8. 8. 정보 구조도 화면구성 wireframe Rough layout 프로토타이핑 도구로 테스트 Design reference 화면구성 wireframe Detail layout Coding bootstrap

×