>> Ⅱ. Web Design 구성요소 및 표현기법

Presentation on theme: ">> Ⅱ. Web Design 구성요소 및 표현기법"— Presentation transcript:

1 >> Ⅱ. Web Design 구성요소 및 표현기법

2 > table of Contents Ⅱ. Web Design 구성요소 및 기법 Web Site 성공에 대한 측정기준
Web Design Identity 구성요소 Web Design 표현기법 Layout Design

3 Ⅱ. Web Design 구성요소 및 기법 Web Site 성공에 대한 측정기준 합목적성 요소에 해당하는 평가기준
사용성 부분에 있어서의 평가기준 감성요소에 의한 평가기준 감동요소에 의한 평가기준 유희성 부분에 의한 평가기준 시대성 부분에 의한 평가기준 내용이 유용한/ 구색 갖추기 식의 잘 만든/ 못 만든 완성도가 높은/ 완성도가 낮은 구성이 탄탄해 보이는/ 구성이 빈약해 보이는 회사 이미지 홍보에 효과적인/ 회사 이미지 홍보에 부적절한 찾아보기 편리한/ 찾아보기 불편한 일관성이 있는/ 일관성이 없는 주목성이 있는/ 산만한 메뉴의 정리가 잘된/ 메뉴가 복잡한 눈이 편안한/ 눈이 피로한 마음에 드는/ 마음에 들지 않는 다시 오고 싶은/ 다시 오기 싫은 긴장감을 주는/ 지루한 포인트가 있는/ 포인트가 없는 리듬감이 있는/ 리듬감이 없는 기억에 좋게 남는/ 기억에 나쁘게 남는 호기심을 유발하는/ 평범한 감흥을 주는/ 감흥을 주지 않는 누군가에게 추천할만한/ 금방 잊고 싶은 아이덴티티가 있는/ 아이덴티티가 업는 시각적으로 재미있는/ 시각적으로 재미없는 언어적으로 재미있는/ 언어가 재미없는 내용이 참신한/ 내용이 진부한 참여하게 하는/ 그냥 보게만 하는 계속해서 보게 만드는/ 금방 나오고 싶은 화려한/ 심플한 개성 있는/ 개성 없는 참신한/ 진부한 유행하는/ 고전적인 신 기술을 적용한/ 옛 기술을 적용한

4 Web Design 측면에서 사용자 만족 요소와의 상관관계
웹 디자인 요소 사용자 만족 요소 컨텐츠 구성 합목적성 구성 시각 요소 사용성 요소 네비게이션 요소 감성 요소 아이덴티티 요소 감동 요소 참여 요소 유희성 요소 기술 요소 시대성 요소

5 Web Design Identity 구성요소
Visual Identity 이미지의 차별화를 통해 기업의 정체성을 시각적으로 표현. Page Layout, Typography, Image 활용범위, Color 활용범위, 배너규칙 디자인작업 조건 등을 규정 Behavior Identity 기업이념을 통해 새롭게 창출된 기업문화를 무형으로 표현 Mind Identity 기업의 신념, 가치관, 정서를 통일된 언어로 표현 Experimental Identity 일관된 Interface와 Navigation 규칙, User와의 Interaction을 통한 웹상에서 체험되는 일관된 경험 제공 Verval Identity 컨텐츠에 사용된 언어적 통일(언어의 사용) URL/기업명/브랜드명/사이트명 등 통일성 부여 Multimedia Identity 웹이 가진 풍부한 영상매체의 특징을 살린 정체성 확립. 사운드나 동영상의 일광성

6 GUI란, 사용자와 컴퓨터의 의사소통 Ⅱ. Web Design 구성요소 및 기법 Web Design 표현기법
GUI(Graphic User Interface) GUI란, 사용자와 컴퓨터의 의사소통

7 GUI디자인 기법 Ⅱ. Web Design 구성요소 및 기법 GUI Design 기법
▶ 한 화면 안에 표현할 정보의 양을 조절하는 것 ▶ 정보의 관련을 표현하기 위하여 그룹핑 하는 것 ▶ 정보해석의 효율을 높이기 위해 돋보이게 하는 것 ▶ 정보를 쉽게 찾을 수 있도록 위치와 순서를 조절하는 것 ▶ 연관성의 표현 ▶ 사용자의 학습과 수행을 돕기 위해 상징적인 그래픽을 사용하는 것을 들 수 있다.

8 조직성 Ⅱ. Web Design 구성요소 및 기법 Web Design 표현기법
▶ 조직성이란, 사용자에게 정보를 전달하고자 할 때 명백하고 일관성 있는 개념적 구조를 제공하도록 하는 것 ▶ 무질서와 혼란에 반대되는 개념 ▶ 조직성을 강화하기 위해서는 레이아웃을 디자인할 때 그리드시스템(Grid System) 활용 > 조직성 비교 무질서 하고 혼돈된 화면 조직적으로 잘 정돈된 화면

9 경제성 Ⅱ. Web Design 구성요소 및 기법 Web Design 표현기법
경제성이란 최소한의 실마리로 효율을 극대화하는 것. ▶ 커뮤니케이션을 위해서 꼭 필요한 요소만을 포함시켜 디자인 한다. ▶ 복잡한 아이콘으로 사용자에게 짐을 지우거나 하나의 대화상자 안에 불필요한 정보를 늘어 놓는 것을 삼가 한다. ▶ 각각의 디자인 대상물을 명료하게 디자인 한다. 즉 혼란을 일으킬 요소를 최소화 시켜 정보의 의미를 명확히 하여 디자인 한다. ▶ 중요한 정보와 그렇지 않은 정보를 명확히 구분하고 중요한 정보는 강조하여 처리한다.

10 의사소통성 Ⅱ. Web Design 구성요소 및 기법 Web Design 표현기법
'의사소통성'이란 정보의 모습을 사용자의 특성에 적절하게 조절하는 것으로서 '적합성'이라 표현할 수도 있다. ▶ 무엇보다도 Web Site나 서비스는 사용자에게 적합하도록 디자인되어야 한다. ▶ 사용자의 연령, 예상 사용 시간, 교육 정도, 성별, 기호 등을 고려하여 그들에게 적합한 메타포와 용어, 상징을 사용하여 디자인 하여야 한다. 게임랜드 국립중앙도서관

11 일관성 Ⅱ. Web Design 구성요소 및 기법 Web Design 표현기법
멀티미디어 디자인에서 일관성의 원칙은 대단히 중요하다. 일관성이 지켜지지 않으면 사용자를 혼란스럽게 한다. ▶ 하나의 Web Site나 서비스 내에서 지켜지는 통일된 약속을 의미. 각종 조절 요소들의 위치, 크기, 조작법 등 내부적인 일관성에 관여하는 요소들은 많다. 특히 많은 사람이 동시에 투입되어 제작되는 Web Site의 경우 일관성이 깨지기 쉽다. 아트디렉터는 이러한 일관성이 깨지는 일이 발생하지 않도록 주의하여야 한다.

12 그룹핑 Ⅱ. Web Design 구성요소 및 기법 Web Design 표현기법
정보의 그룹핑 기법은 조직성을 구현하기 위한 것이다. 동일한 양, 동일한 밀도의 정보라 하더라도 적절한 그룹핑을 사용하여 사용자의 효율을 높일 수 있다. ▶ 공간에 의한 그룹핑 : 화면상에 관련된 것끼리 근접하게 그룹으로 만들고 그룹과 그룹 간의 간격을 두는 것 ▶ 외곽선에 의한 그룹핑 : 사용자들은 외곽선을 둘러 명백하게 그룹핑 되어 보이는 것을 선호 ▶ 색채에 의한 그룹핑 : 동일한 배경을 공유함으로써 구성요소의 그룹핑 정도가 명확해 짐

13 돋보임 Ⅱ. Web Design 구성요소 및 기법 Web Design 표현기법 중요한 정보를 돋보이게 보여 주는 기법은
중요한 정보를 돋보이게 보여 줌으로써 사용자는 쉽게 중요한 정보를 찾게 되어 결국 학습과 수행에 있어 효율 향상을 가져오게 된다. 화면상의 특정 구성요소로 사용자의 관심을 유도하는 방법에는 몇 가지가 있다. 이들 가운데 보편적으로 사용되는 돋보임 기법에 대하여 주목 효과가 뛰어난 것부터 제시해 본다. ▶ 깜박임(Flashing) : 화면에서 깜박임은 사용자의 관심을 유도하는 데 가장 확실한 방법이다. 깜박임은 아니더라도 애니메이션 효과를 준 대상물도 사용자의 관심을 유도하는 데 유리하다. 그러나 그것이 과도하게 사용되었다거나 혹은 꺼지지 않고 있을 경우에 사용자에게 성가진 것이 된다. 깜박임의 기법을 조금이라도 사용한다면 그것은 급박한 상황을 사용자에게 알리기 위한 경우에만 사용하는 것이 바람직하다.

14 Ⅱ. Web Design 구성요소 및 기법 Web Design 표현기법 ▶ 애니메이션(Animation) : 애니메이션 기법은 깜박임 다음으로 정보를 돋보이게 하는 방법이다. 그러나 애니메이션 효과도 사용자의 관심을 매우 강력하게 유도하는 돋보임 기법이기 때문에 조심스럽게 사용하여야 한다. 무의미한 반복적인 애니메이션은 처음에는 사용자의 흥미를 끌지 모르지만 반복적으로 보여 줄 경우 사용자의 주의가 흩어져 정작 찾고자 하는 정보를 찾는 것을 방해하게 되기 때문이다. 웹 페이지상에서 애니메이션을 보여 줄 수 있게 되면서부터 하나의 페이지에 지나치게 많은 애니메이션을 담은 경우를 흔히 볼 수 있다. 이는 방문자의 수가 많은 사이트일수록 심한 경향을 보인다. 방문자가 많은 사이트는 대체로 광고가 많기 마련이고, 대부분의 광고가 사용자의 관심을 끌기 위해 애니메이션으로 처리되어 있기 때문이다. 제작자가 광고에 애니메이션이 되는 것을 통제할 수 있는 입장에 있다면 여러 개의 광고를 번갈아 애니메이션시키든지, 광고는 애니메이션을 시키지 않는 방법을 취하는 것이 바람직하다.

15 Ⅱ. Web Design 구성요소 및 기법 Web Design 표현기법 ▶ 반전(Reversed Video) : 반전은 화면상의 어떤 구성요소가 현재 선택되었음을 나타내기 위한 경우이다. 풀 다운(Pull-down) 메뉴에서 현재 선택된 것이 반전된 비디오로 나타난다. 선택된 대상에 대한 반전에 의한 표현 방법은 너무나 보편화 되어서 부분적으로 표준안이 되고 있는 상황이다. ▶ 밑줄(Underlining) : 밑줄에 의한 돋보임은 대개 핫워드를 표시하기 위해 광범위하게 사용된다. 핫워드는 그 단어와 관련된 보다 심도 있는 내용을 보기 위한 경우나 다른 페이지로 유도 하기 위해 사용한다. 그러나 밑줄을 사용할 때는 밑줄이 문자의 가독성을 방해하지 않도록 해야 한다. 밑줄은 색채나 굵기의 차이를 주어 함께 활용할 경우 돋보임의 정도를 조절할 수 있다. ▶ 밝기와 굵기의 차이(Brightness or Boldness) : 많은 멀티미디어 제품에서 문자나 도형을 다른 밝기나 굵기로 보여 주는 돋보임 기법을 활용하고 있다. 그러나 밝기나 굵기의 경우 그 단계는 두 단계만으로 다루어져야 한다. 더 많은 단계를 사용한다면 사용자에게 혼동을 불러 일으킬 소지가 되기 때문이다.

16 Ⅱ. Web Design 구성요소 및 기법 Web Design 표현기법 ▶ 색채사용(Color) : 색채를 사용하여 텍스트를 강조하고자 할 경우 다음의 세 가지 점을 주의 하여야 한다. 1) 본문과 핫워드의 색상이 확연히 구별되는 것이라야 한다. 본문이 검은색일 경우 핫워드로 쓰기에 적합한 색상은 채도가 높은 빨간색, 파란색, 초록색 등이다. 대체로 푸른 계열의 색상은 실제로 구현해 놓고 보면 본문과 구별이 잘 안 되는 경향이 있다. 따라서 본문과 확연히 구별할 필요가 있다면 붉은색 계열의 핫워드를 쓸 것을 제시한다. 2) 전체적인 글 읽기를 방해하지 않아야 한다. 핫워드가 특정 문장에 속한 제목일 경우 문제가 되지 않겠으나 본문 중에 핫워드가 자주 등장을 하는 경우라면 핫워드가 문장 전체를 계속 잃는 데 방해가 되지 않도록 하는 것이 바람직하다. 3) 배경과 문자가 확연히 구별되어야 한다. 본문과 핫워드의 대비를 연하게 하다가 보면 글자가 있는 배경과 핫워드가 잘 구별되지 않을 수 있다. 예를 들어 본문은 회색, 핫워드는 연두색, 배경은 흰색일 경우를 생각해 보자. 이 경우 본문과 핫워드는 잘 구별이 되겠지만 흰 바탕에 연두색의 글씨는 잘 보이지 않게 된다.