[디자인][웹디자인][모양디자인][웹디자인이론]디자인의 개념, 디자인의 요소, 웹디자인 이론, 웹디자인의 원칙, 웹디자인의 기법, 웹디자인과 모양디자인(Look Design), 웹디자인 분석 사례 고찰(웹디자인)

소개글

[디자인][웹디자인][모양디자인][웹디자인이론]디자인의 개념, 디자인의 요소, 웹디자인 이론, 웹디자인의 원칙, 웹디자인의 기법, 웹디자인과 모양디자인(Look Design), 웹디자인 분석 사례 고찰(웹디자인)에 대한 보고서 자료입니다.

목차

Ⅰ. 개요

Ⅱ. 디자인의 개념
1. 본래적 의미(사전적 의미)
2. 사전적 의미의 일반적 해석
3. 본 session에서의 제한적 의미

Ⅲ. 디자인의 요소

Ⅳ. 웹디자인 이론
1. 집단성 (Grouping)
2. 간결성 (Simplicity)
3. 폐쇄성 (Closure)
4. 친숙성 (Familiarity)
5. 연속성 (Continuity)

Ⅴ. 웹디자인의 원칙
1. 집단성- Grouping 의 웹 인터페이스상의 응용
2. 간결성- 단순화의 웹 인터페이스상의 응용
3. 친숙성- 경험화의 웹 인터페이스상의 응용
4. 연속성- 정렬의 웹 인터페이스상의 응용

Ⅵ. 웹디자인의 기법
1. 정보의 양
1) 생략 기법
2) 친숙한 정보 표현 양식 활용
3) 도표의 활용
2. 정보의 그룹핑
1) 공간상의 그룹핑
2) 외곽선에 의한 그룹핑
3) 색채에 의한 그룹핑
3. 정보의 돋보임
1) 깜박임(Flashing)
2) 애니메이션(Animation)
3) 반전(Reversed Video)
4) 밑줄(Underlining)
5) 색채사용(Color)
4. 위치와 순서
5. 연관성 표현

Ⅶ. 웹디자인과 모양디자인(Look Design)
1. 레이아웃 디자인
2. 배경 디자인
3. 윈도우와 패널
4. 대화상자
5. 기능 단추와 컨트롤
6. 타이포그라피 디자인

Ⅷ. 웹디자인 분석 사례
1. NY TIMES
2. WASHINGTONPOST
3. US TODAY

참고문헌

본문내용

여 디자인해야 사용자가 혼란 없이 웹 페이지를 사용할 수 있다.
2. 배경 디자인
웹 페이지의 인상을 결정짓는 중요한 요소 중 하나로 배경을 빼놓을 수 없다. 배경은 화면의 가장 넓은 면적을 차지하고 있을 뿐 아니라 담겨 있는 내용과 조작의 실마리를 제공하기
때문이다.
3. 윈도우와 패널
윈도우와 패널은 레이아웃 디자인을 할 때 중요한 해결방안을 제시한다. 대개 레이아웃 디자인을 착수 알 대 화면을 목적이나 내용의 성격에 따라 크게 구획한다. 이렇게 구획한 것 들 중 어떤 부분은 패널이 되고 어떤 부분은 이미지나 비디오들이 보여질 윈도우가 된고 어떤 부분은 내용이 담길 영역이 된다.
4. 대화상자
화면 전체에 기존에 보여진 내용 외에 진행 과정에 따라 대화 상자가 사용된다. 그러나 웹의 경우 대화 상자 대신 다른 페이지로 이동하여 확인하는 경우가 많다.
5. 기능 단추와 컨트롤
기능 단추와 컨트롤은 사용자가 직접 조작하는 인터페이스의 부분이자 화면을 구성하는 디자인 요소이다. 때때로 기능 단추와 컨트롤들은 웹의 인상을 결정짓는데 큰 역할을 한다.
6. 타이포그라피 디자인
커뮤니케이션의 방식이 변화하고 있다. 이성적으로 정보를 표현하는 방식은 텍스트를 사용하는 대신 감성에 호소하는 자유분방한 이미지나 비디오를 사용하는 경향이 있다. 그러나 문자가 가진 정확한 메시지 전달력과 경제성은 여전하다. 웹에서도 여전히 문자는 메시지를
전달하는 매체에서 문자를 다루는 디자인 기법에서 빌려 올 수 있다. 웹 디자인시 문자 정보를 다루게 되는 경우 알아야 할 내용을 보면 다음과 같다.
서체 종류
크기
가독성
자간
행간
글줄길이
정렬
색상과 대비
Ⅷ. 웹디자인 분석 사례
1. NY TIMES
이 사이트의 첫 인상은 깨끗하다. 흰색 바탕에 검은색 글씨가 깨끗한 느낌을 준다. 상단부에 광고를 작게 넣고, ‘뉴욕타임즈’라는 로고를 크게 넣어 상징적이게 했다. 그 오른쪽의 날씨도 아주 간결하다. 주 화면은 가로로 세 개의 공간 그룹핑을 했다. 왼쪽에는 색상 그룹핑도 적용하여 눈에 잘 띄게 했다. 왼쪽은 부분별 기사를 링크 시켜두었는데, 그 특성에 따라 색상을 달리 적용한 것도 인상적이다. 가운데의 주요 기사란은 제목을 강조하고 간결하게 세부기사를 적는 방식을 사용하였다. 오른쪽은 외곽선에 의해 그룹을 나누어 주요 기사란과의 구분을 확실히 했다. 그 부분에 주요 사진을 한 장 삽입하였고, 그 밑에 사진에 대한 설명과 분야별 기사들을 링크해 놓았다. 전체적으로 그룹핑이 잘 되어 깔끔한 인상을 준다. 별다른 색상을 사용하지 않아 깨끗하고, 광고도 거의 없어 산만하지도 않다. 적당한 정보의 양도 읽는데 편하다. 하지만 너무 깨끗해서 다소 주목할 만한 점이 없는 것이 아쉽다. 이런 페이지에 플래시나 애니메이션 효과를 넣는 것은 오히려 부자연스러울 것이다. 다만 색상을 사용하여 기사거리의 구분을 표현하지 않은 점이 아쉽다. 오른쪽의 빈 공간도 너무 커 보인다.
2. WASHINGTONPOST
이 페이지는 상단에 강한 느낌의 바탕색에 로고를 새긴 것이 인상적이다. 특히 .com 부분을 붉은색으로 표현해 눈에 띄게 했다. 로고 부분에 날씨와 기사 검색창을 둔 것도 점수를 줄만하다. 전체적으로 크게 세 개의 그룹으로 나누어져 있다. 공간 그룹핑, 외곽선 그룹핑, 색상 그룹핑을 모두 적절히 사용하여 깔끔하면서도 정보를 한눈에 볼 수 있게 배려하였다. 왼쪽은 각 분야별 기사로 링크를 시켜 두었는데, 옅은 회색바탕에 짙은 남색글씨는 깔끔하고 분명한 느낌을 준다. 가운데 주요 기사 부분은 외곽선을 이용하여 크게 둘로 나누었는데, 사진과 주요 기사들의 배치가 비례적으로 보기에 좋다. 주요 기사를 나열하면서 중간에 긴 광고를 하나 삽입하였는데, 이는 다른 위치에 놓이는 광고보다 훨씬 눈길을 끄는 효과를 볼 수 있다. 기사만을 계속 나열하는 것보다는 광고를 삽입하여 위와 아래 둘로 나눈 것은, 단조로움을 없애준다. 같은 서체와 크기에서 메인 타이틀만 굵기의 차이를 주어 강조한 점도 돋보인다. 오른쪽 부분은 색상 그룹핑을 사용하여 기타 정보들을 보여준다. 색상의 표현이 적절하여 보는 이로 하여금 부담을 덜어준다. 특별한 군더더기 없이 적당한 양의 정보가 잘 정리되어 있는 페이지다.
3. US TODAY
이 웹 페이지는 다른 사이트와는 다른 구성으로 되어 있다. 우선 색상의 사용이 화려하다. “USA TODAY”라는 로고가 첫 눈에 들어올 만큼 인상적으로 표현되어 있다. 로고 옆에 다섯 가지의 섹션이 다양한 색상으로 표현되어 있다. 중앙에 사진과 주요 기사가 굵은 활자로 표현되어 있고, 그 밑에 주가지수와 광고가 있다. 중앙은 작은 공간을 두고 두 개의 그룹으로 나뉘어 있는데, 왼쪽에 캠페인을 나타내는 로고가 있고, 그 오른쪽에 기사들이 나열되어 있다. 가장 왼쪽에 따로 위치한 그룹에는 세분화한 분야가 링크되어 있다. 전체적으로 볼 때 부족하다 싶을 만큼 구성이 단순하다. 흰 바탕에 여러 가지 색상을 사용하여 보는 눈은 즐겁지만, 정보 전달이라는 본연의 목적과는 다소 거리감이 느껴진다. 특히 기사와 광고를 구분 없이 넣은 것도 어색하다. 왼쪽의 분야별 링크는 너무 세세할 정도로 작게 분류했다. Sports라는 범주에 묶을 수 있는 것들을 NBA, NHL, Baseball 등으로 나눈 것은 한 예이다. 이렇게 세분화 시켜 놓으면, 원하는 정보만을 골라 볼 수 있는 장점도 있지만, 페이지가 너무 복잡해지는 단점이 있다. 전체적으로 엉성한 듯한 느낌을 지울 수 없는 페이지이다.
참고문헌
강창언, 오용선, 강민구(1997) - 정보공학:코딩이론과 정보이론의 접목, 진영사
문남미, 김효근, 김지성(2000) - 웹 사이트 컨텐츠 특성이 웹 사이트 성과에 미치는 영향에 관한 연구
민상원(1998) - 홈페이지 디자인』, 서울: 도서출판대림
임은정(1998) - 월드와이드웹(WWW)홈페이지 디자인에 관한 연구, 대구효성가톨릭대학교 대학원 석사학위논문
이상호(2000) - 테마가 있는 홈페이지 만들기, 생능출판사
정부현(2000) - 웹 사이트 평가모형의 변천과정
코리즌 주식회사(2001) - 성공적인 웹 디자인, 코리즌 주식회사

키워드

웹,   디자인,   웹디자인,   웹디자인이론,   웹디자인기법