Beautiful WebDesign

Beautiful WebDesign

디자인 요소 

균형

시각적인 균형의기본개념은 시소에서 관찰되는 물리적인 균형과 유사하다

모든 물체에는 무게가 있다

레이아웃 요소들 또한 그렇다

1) 대칭적 균형 2) 비대칭적 균형

1) 대칭적 균형

대칭적 균형(symmetrical balance) 또는 정규 균형(formal balance)

중심선을 기준으로 양쪽에 구성요소가 동일하게 배치

- 쌍방균형(bilatreral symmetry : 하나이상의 축에 의해 균형을 이루어 구성

- 방사형(radial symmetry) : 중심점 주변에 간은 간격으로 구성

2) 비대칭적 균형

비대칭적 균형(asymmetrical balance) 또는 비정규 균형(informal balance)

추상적 방법, 시각적  재미

기준을 중심으로 크기, 모양, 색조, 위치가 각각 다른 개체로 구성

* 페이지 비중이 전체적으로 균등한 느낌이 나도록 배치 중요

* 웹에서 자주 사용 : 글자와 메인 콘텐츠의 대비를 명확하게 하려는 전략

* 상대적으로 작은 단인 메뉴 영역은 더 어둡거나 테두리를 사용 또는 다른 방법을 사용해서 한층 두드러지도록 한다

* 반복, 가시성 높은 불릿(bullet), 유사 색상 구조로 된 헤더, 통일감 있는 폰트 등 조화

통일성

디자인 이론에서는 통일성(unity)을 다른 요소들이 상호작용하는 방법이라 말한다

통일성을 유지하는 방법은 1) 근접 2) 반복

1) 근접

레이아웃에서 서로 가까이에 위치한 개체들은 자연스럽게 사람의 시선을 끄는 초점(focal point)이 된다

웹페이지에 있는 개체들의 마진(margin)과 패딩(padding) 을 설정할때 이 근접 개념을 적용할 수 있다

CSS 스타일 규칙을 활용하여 각 요소 사이에 있는 공간을 늘이거나 줄여, 요소들을 일종의 그룹으로 만들어 낸다

2) 반복

유사개체들을 한데 모으면 단일 집단(a Group)으로 인식

색상, 모양, 텍스처, 유사한 개체들을 반복하면 웹 페이지 디자인을 하나로 묶는데 도움이 되고, 디자인 응집성도 높아진다

* HTML 요소 중 리스트(ol,dl)에서 각 항목앞에 찍히는 불릿 기호(bullet)가 좋은 예

강조

강조(emphasis) 또는 우월성(dominance) 통일성과 아주 밀접한 관련이 있는 개념

강조는 다양한 디자인 요소들을 다 함께 어우러지기보다는 사용자가 특정 요소에 집중하도록

: 버튼같이 사용자가 클릭하기를 유도할때 또는 오류 메시지 경우 사용자가 읽기를 유도할때

초점(focal point)이란 페이지와 융화되는 다른 요소와 달리 사용자의 시선을 끄는 무언가를 말한다

1) 배치

웹디자인에 존재하는 여러 제약으로 사용자는 대체로 한화면을 볼때 가운데를 가장 먼저 보게 된다

전체에서 정가운데 부분은 강조하기에 가장 강력한 위치

바꿔서 말하자면 중앙에서 멀리 떨어진 요소일수록 첫번째로 인지될 확률이 적다

2) 연속

연속(continuance) 우리 눈이 주로 한쪽 방향으로 움직인다는 것

한번 움직이기 시작한 시선은 더 두드러진 특징을 지닌 요소가 나타나기 전까지 그 경로를 따라 계속 움직인다

레이아웃을 통합할때 쓰는 방법

3) 위치적 고립

위치적 근접이 디자인에 통일성(unity)을 제공하는 것 처럼, 위치적 고립(isolation)은 강조를 해줌

주변과 구별되는 요소는 주의력을 사로잡는 힘이 있다

4) 대비

대비(contrast) 서로 다른 그래픽 요소들을 병렬로 배치하는 것이라 정의

레이아웃에 있는 특정부분을 강조할 때 가장 일반적 사용

요소의 크기나 색상을 활용하여 주변과 다르게 부각시키는 것

5) 비례

비례(proportion) : 개체들의 상대적 크기를 다르게 하는 디자인 원리

소형화(miniaturization)

* HTML의 <blockquote>요소는 태그에 포함된 콘텐츠를 들여쓰기로 표시해 주어 콘텐츠에 위치적 고립 효과를 부여

들여쓰기 효과가 있기 때문에 시각적으로 강조 효과를 볼수 있지만 반대로 강조를 위해서 <blockquote> 태그를 사용해서는 안된다

<blockquote>는 인용문을 표시해 주기 위한 태그

* CSS의 position속성 어떤 개체의 위치(position)를 CSS에서 절대 위치(absolute)로 설정하면 해당 개체는

페이지의 콘테이너에서 각 개체가 놓인 흐름과는 상관없이 자신의 위치를 콘테이너 영역에 적용된 속성에 영향 받지 않고

독립적으로 자신의 위치를 정할 수 있다 즉 다른 개체와 겹칠수도 있다

  

 위 내용은 도서를 스스로 이해하기 위해 익히고자 하는 부분을 정리 한것입니다 콘텐츠의 사용을 금합니다 동의하시겠습니까??

Evernote에 있는 체크박스 기능 어떻게 사용되는지 테스트합니다

내용을 메일로 보내고 저장하니.....