웹사이트 분석과 설계 (화면 설계) 학번: 20084024 성명: 박준석.

Presentation on theme: "웹사이트 분석과 설계 (화면 설계) 학번: 20084024 성명: 박준석."— Presentation transcript:

1 웹사이트 분석과 설계 (화면 설계) 학번: 성명: 박준석

2 목차 1.페이지 레이아웃과 설계 2. 플로우차트 작성 3.스토리보드 작성

3 1.페이지 레이아웃과 설계 한 페이지에서 콘텐츠가 배치되는 방식. 전달하려는 내용이 고객에게 확실히 전달 될 수 있도록 ,
페이지 레이아웃이란? 한 페이지에서 콘텐츠가 배치되는 방식. 전달하려는 내용이 고객에게 확실히 전달 될 수 있도록 , 주요요소를 어디에 배치할 것인지 그리드로 표시하고 서체 등의 세부적인 사항도 결정해야 한다. 전형적인 페이지 레이라웃 설계방법 명확한 콘텐츠 그룹핑 사이트의 목적에 따른 가장 비중있는 요소의 우선 배치 그리드는 큰 콘텐츠에서 작은 콘텐츠 중심으로 세부적인 그리드는 시선의 이동을 고려하여 자연스럽게 메인 페이지와 일관성있는 서브페이지 레이아웃

4 1.페이지 레이아웃과 설계 어떤 물건이 어디에 놓여 있는지를 직관적으로 알 수 있도록 세부적인 분류와 레이블링 명확해야 한다.
명확한 콘텐츠 그룹핑 어떤 물건이 어디에 놓여 있는지를 직관적으로 알 수 있도록 세부적인 분류와 레이블링 명확해야 한다. 그룹핑이 쉽고 명확하게 되어 있는 웹사이트(사례 12-1)

5 1.페이지 레이아웃과 설계 핵심요소를 부각시킨 웹 사이트(사례12-2)

6 2.플로우 차트 설계 플로우차트(Flow Chart) 전체적인 사이트의 흐름도를 도식적으로 표현한 설계 기법
플로우차트의 표현요소 기능 명시 기능상의 내용에 대한 설명 분기 선택 기능상의 연결관계 표시

7 3.스토리보드 설계 스토리보드(Storyboard) 웹 페이지의 모든 화면들에 대한 구성요소들을 설계해놓은 계획서
스토리보드 구성 사례 1.페이지 주제 2.파일명 3.구성화면 4.화면설명 5.플로우차트와 로직 6.택스트 7.그래픽/비디오

8 화면 설계에 적용되는 디자인 원리 조직성(systemicty) 조직성을 이용한 디자인 기법 그리드 시스템 그룹핑
-공간에 의한 그룹핑 -외곽선에 의한 그룹핑 -색체에 의한 그룹핑 사용자에게 정보를 전달하고자 할 때 명백하고 일관성있는 개념적 구조를 제공하도록 하는것

9 화면 설계에 적용되는 디자인 원리 그리드 시스템을 사용한 조직적인 레이아웃 사례 사례 11-1
정글(

10 화면 설계에 적용되는 디자인 원리 사례 11-3 공간에 의한 그룹핑

11 화면 설계에 적용되는 디자인 원리 사례 11-4 외곽선에 의한 그룹핑