SlideShare uma empresa Scribd logo
1 de 13
web site IA construction
건축학 개론, 그리고 IA
:: 웹 서비스, 웹 사이트 전체 체계를 구조화하는 것
:: 레이아웃 구조의 기준
IA는 과일가게의 display
:: 가장 잘 팔리는 것을 보기 좋은 자리에
:: 가장 싱싱하고 예쁜 것을 잘 보이는 상단에
IA의 구성
정보의 구조화 네비게이션 레이블링
width x depth
 폭(Width): 최소 5개~최대 9개까지의 메뉴(Function),
 깊이(Depth): 최대 5단 이하로 제한
검색(searching function)
이용자 위치 정보(context)
방문정보의 표시
네비게이션 막대(navigation bar)
제목 붙이기(labeling)
practice: 테디베어 분리하기
:: 한 마리의 테디베어가 어떤 구성으로 만들어 지는가
width
depth
2013-09-03
번호
메뉴명
코드 폴더 페이지명
작업(완료 예정일 또는 실제 완료일)
1depth 2depth 3depth 4depth 5depth storyboard design coding program
01 네이버 /
01 GNB /gnb
01 로그인 10101 login 2012-01-02 2012-01-13 2012-01-15 2012-01-16
02 블로그 /blog
01 Front /front
01 prologue 1020101 prologue 2012-01-04 2012-01-15 2012-01-19 2012-01-25
02 blog
01 뷰 페이지 0102010201 view 2012-01-15 2012-01-16 2012-01-19 2012-01-23
02 글작성/수정 페이지 0102010202 write 2012-01-15 2012-01-16 2012-01-19 2012-01-22
03 photolog 01020103 photolog 2012-01-15 2012-01-16 2012-01-19 2012-01-25
02 Admin /admin
01 관리 /manage
01 기본설정 0102020101 set 2012-01-19 2012-01-20 2012-01-26 2012-01-26
02 통계 01020202 /statistics view 2012-01-22 2012-01-25 2012-01-26 2012-01-27
총 6 7 7 7 7 7
완료(수) 7 0 0 0
완료율(%) 100 0 0 0
IA 예시
단순구조의 layout
* 단순구조: 정보설계가 단순한 웹사이트 구조
메인과 서브 페이지의 구조가 동일하게 적용
type 1. 상단 네비
 70~80% 정도로 사용→높은 사용자 편리성
 컨텐츠의 양이 많은 대기업에서 사용
단순구조의 layout
type 2. 좌측 네비
 인터넷 초창기부터 사용
 우측 컨텐츠 영역의 레이아웃 구성 시 고려사항
 컨텐츠의 양이 적거나 네비게이션의 정보 설계 부분 컨텐츠가 중요할 경우
단순구조의 layout
type 3. 우측 네비
 시각원리에 의한 낮은 사용률
 컨텐츠 및 비주얼을 강조해 전달 시
단순구조의 layout
type 4. 하단 네비
 디자이너의 의도에 따라 창의적인 페이지 연출 가능
 주로 영화사이트 및 패션 사이트에서 활용
IA, 그리고 메뉴 구조도
 메뉴 구조도는 IA 문서 중 메뉴명으로 노출되는 부분을 계층적으로 작성한 것
 조금 더 시각적이고 웹사이트의 사용자 입장에서 무엇을 보게 될지 가늠할 수 있는 문서
 메뉴 구조도는 메뉴 구조만을 표현할 뿐 구체적 정보는 표현 불가
감사합니다.

Mais conteúdo relacionado

Semelhante a Ia

투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드병수 김
 
프로젝트실무와기획의역할
프로젝트실무와기획의역할프로젝트실무와기획의역할
프로젝트실무와기획의역할Amy Young Ah Kim
 
안드로이드 메테리얼 디자인 transition, cardview 맛보기
안드로이드 메테리얼 디자인 transition, cardview 맛보기안드로이드 메테리얼 디자인 transition, cardview 맛보기
안드로이드 메테리얼 디자인 transition, cardview 맛보기flashscope
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...Sang Seok Lim
 
허니컴 태블릿 디자인
허니컴 태블릿 디자인허니컴 태블릿 디자인
허니컴 태블릿 디자인Sang-min Lee
 
5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdfJeongeun Kwon
 
강의 개요 및 교안 2013 4차수_font
강의 개요 및 교안 2013 4차수_font강의 개요 및 교안 2013 4차수_font
강의 개요 및 교안 2013 4차수_fontYoung Choi
 
최영현 강의 개요 및 교안샘플 배포용_font
최영현 강의 개요 및 교안샘플 배포용_font최영현 강의 개요 및 교안샘플 배포용_font
최영현 강의 개요 및 교안샘플 배포용_fontYoung Choi
 
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드dgmit2009
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표ChangGyum Kim
 
강의 개요 및 교안 2014 1차수_font
강의 개요 및 교안 2014 1차수_font강의 개요 및 교안 2014 1차수_font
강의 개요 및 교안 2014 1차수_fontYoung Choi
 
5th.lecture.what.is.information.architecture
5th.lecture.what.is.information.architecture5th.lecture.what.is.information.architecture
5th.lecture.what.is.information.architectureJeongeun Kwon
 
퍼블리싱 협의 체크리스트
퍼블리싱 협의 체크리스트퍼블리싱 협의 체크리스트
퍼블리싱 협의 체크리스트규연 황
 
Elements of user experience
Elements of user experienceElements of user experience
Elements of user experienceHyunjin Yoo
 
웹사이트기획 및 관리
웹사이트기획 및 관리웹사이트기획 및 관리
웹사이트기획 및 관리봉조 김
 
iOS Auto Layout
iOS Auto LayoutiOS Auto Layout
iOS Auto LayoutEunjoo Im
 

Semelhante a Ia (20)

Dubuplus guide
Dubuplus guideDubuplus guide
Dubuplus guide
 
투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드투어팁스모바일웹 제작가이드
투어팁스모바일웹 제작가이드
 
프로젝트실무와기획의역할
프로젝트실무와기획의역할프로젝트실무와기획의역할
프로젝트실무와기획의역할
 
안드로이드 메테리얼 디자인 transition, cardview 맛보기
안드로이드 메테리얼 디자인 transition, cardview 맛보기안드로이드 메테리얼 디자인 transition, cardview 맛보기
안드로이드 메테리얼 디자인 transition, cardview 맛보기
 
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
The comprehensive guide for optimizing the performance of mobile HTML5 Web ap...
 
허니컴 태블릿 디자인
허니컴 태블릿 디자인허니컴 태블릿 디자인
허니컴 태블릿 디자인
 
5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf5th.Lecture.What.is.Information.Architecture.pdf
5th.Lecture.What.is.Information.Architecture.pdf
 
강의 개요 및 교안 2013 4차수_font
강의 개요 및 교안 2013 4차수_font강의 개요 및 교안 2013 4차수_font
강의 개요 및 교안 2013 4차수_font
 
최영현 강의 개요 및 교안샘플 배포용_font
최영현 강의 개요 및 교안샘플 배포용_font최영현 강의 개요 및 교안샘플 배포용_font
최영현 강의 개요 및 교안샘플 배포용_font
 
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
제 5회 DGMIT UI&UX 컨퍼런스: 2015 웹디자인 트렌드
 
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
 
강의 개요 및 교안 2014 1차수_font
강의 개요 및 교안 2014 1차수_font강의 개요 및 교안 2014 1차수_font
강의 개요 및 교안 2014 1차수_font
 
5th.lecture.what.is.information.architecture
5th.lecture.what.is.information.architecture5th.lecture.what.is.information.architecture
5th.lecture.what.is.information.architecture
 
퍼블리싱 협의 체크리스트
퍼블리싱 협의 체크리스트퍼블리싱 협의 체크리스트
퍼블리싱 협의 체크리스트
 
Elements of user experience
Elements of user experienceElements of user experience
Elements of user experience
 
Uiux
UiuxUiux
Uiux
 
모바일환경과 개발방향
모바일환경과 개발방향 모바일환경과 개발방향
모바일환경과 개발방향
 
웹사이트기획 및 관리
웹사이트기획 및 관리웹사이트기획 및 관리
웹사이트기획 및 관리
 
iOS Auto Layout
iOS Auto LayoutiOS Auto Layout
iOS Auto Layout
 
Jinyweb
JinywebJinyweb
Jinyweb
 

Ia

  • 1. web site IA construction
  • 2. 건축학 개론, 그리고 IA :: 웹 서비스, 웹 사이트 전체 체계를 구조화하는 것 :: 레이아웃 구조의 기준
  • 3. IA는 과일가게의 display :: 가장 잘 팔리는 것을 보기 좋은 자리에 :: 가장 싱싱하고 예쁜 것을 잘 보이는 상단에
  • 4. IA의 구성 정보의 구조화 네비게이션 레이블링 width x depth  폭(Width): 최소 5개~최대 9개까지의 메뉴(Function),  깊이(Depth): 최대 5단 이하로 제한 검색(searching function) 이용자 위치 정보(context) 방문정보의 표시 네비게이션 막대(navigation bar) 제목 붙이기(labeling)
  • 5. practice: 테디베어 분리하기 :: 한 마리의 테디베어가 어떤 구성으로 만들어 지는가
  • 7. 2013-09-03 번호 메뉴명 코드 폴더 페이지명 작업(완료 예정일 또는 실제 완료일) 1depth 2depth 3depth 4depth 5depth storyboard design coding program 01 네이버 / 01 GNB /gnb 01 로그인 10101 login 2012-01-02 2012-01-13 2012-01-15 2012-01-16 02 블로그 /blog 01 Front /front 01 prologue 1020101 prologue 2012-01-04 2012-01-15 2012-01-19 2012-01-25 02 blog 01 뷰 페이지 0102010201 view 2012-01-15 2012-01-16 2012-01-19 2012-01-23 02 글작성/수정 페이지 0102010202 write 2012-01-15 2012-01-16 2012-01-19 2012-01-22 03 photolog 01020103 photolog 2012-01-15 2012-01-16 2012-01-19 2012-01-25 02 Admin /admin 01 관리 /manage 01 기본설정 0102020101 set 2012-01-19 2012-01-20 2012-01-26 2012-01-26 02 통계 01020202 /statistics view 2012-01-22 2012-01-25 2012-01-26 2012-01-27 총 6 7 7 7 7 7 완료(수) 7 0 0 0 완료율(%) 100 0 0 0 IA 예시
  • 8. 단순구조의 layout * 단순구조: 정보설계가 단순한 웹사이트 구조 메인과 서브 페이지의 구조가 동일하게 적용 type 1. 상단 네비  70~80% 정도로 사용→높은 사용자 편리성  컨텐츠의 양이 많은 대기업에서 사용
  • 9. 단순구조의 layout type 2. 좌측 네비  인터넷 초창기부터 사용  우측 컨텐츠 영역의 레이아웃 구성 시 고려사항  컨텐츠의 양이 적거나 네비게이션의 정보 설계 부분 컨텐츠가 중요할 경우
  • 10. 단순구조의 layout type 3. 우측 네비  시각원리에 의한 낮은 사용률  컨텐츠 및 비주얼을 강조해 전달 시
  • 11. 단순구조의 layout type 4. 하단 네비  디자이너의 의도에 따라 창의적인 페이지 연출 가능  주로 영화사이트 및 패션 사이트에서 활용
  • 12. IA, 그리고 메뉴 구조도  메뉴 구조도는 IA 문서 중 메뉴명으로 노출되는 부분을 계층적으로 작성한 것  조금 더 시각적이고 웹사이트의 사용자 입장에서 무엇을 보게 될지 가늠할 수 있는 문서  메뉴 구조도는 메뉴 구조만을 표현할 뿐 구체적 정보는 표현 불가