웹 디자인 가이드 01. 컬러

가이드가 없는 채로 디자인을 진행하다 내 디자인에 많은 문제가 있다는 것을 느꼈다. 

프로젝트에서 컬러를 잡는데, 내가 느낀 컬러와 다르게 진행되자 

여러 컬러가 섞이면서 정체성이 사라져 버렸다...

 

컬러를 다시 회복 시키면서 가이드를 작성하고자 한다.

내가 실무를 하면서 느낀 점은

 

가이드로 큰 컬러를 결정하지만 그래도!

내 디자인이 조잡해 보이는 것은 

전체적인 사진컬러, 일러스트 와의 조화도 중요한 것 같다.

 

내 디자인은 선명한 사진을 이용한 디자인을 많이 하는데,

일반 프리랜서로 사진 구하는 것은 무료 사이트에서 다운받는 것이 전부라, 

다운을 받을 수 있는 사진에 만족해 하며, 여러 사진을 조합해서 쓰곤 한다.

 

그러다 보니 디자인은 결국 산으로 가있고, 가이드라인의 컬러는 중요 포인트에만 보여지고

결국 내 프로젝트 컬러를 잃어 버린다. 

 

그러하여 여러 참고 디자인을 찾아 가면서 그 점을 해결해 보고자 한다.

 

컬러 가이드 정의 

 

주요 색상 Primary color 

보조 색상 Secondary color

강조 색상 Accent color

상호 작용 색상 Interaction color

무채색 색상 Gray color

 

등등이 있다.

 

컬러를 결정할 시 순서 

(제 의견이 반영 되어 있습니다.)

 

1. 주요 색상 Primary color을 정한다.

- 주요 색상을 고를 때는 가장 먼저이 프로젝트를 가장 잘 표현할 수 있는 컬러는 무엇인가 라는 색의 의미를 생각한다.

상품이 있으면 컬러를 결정하기 쉽겠지만 그렇지 않을 경우

키워드를 생각 해 놓은 뒤 컬러를 결정한다. 

 

 

예를 들어 활기참, 젊음, 창조적, 과 같은 키워드를 선정하고 그것을 잘 표현할 수 있는 이미지를 찾는다.

그리고 그 다음 색을 추출해 낸다.

 

 

주의 할 점

주요 색상이 고채도일 수록 색상의 면적을 넓게 잡으면 눈의 피로도가 증가 될 수 있어, 

주의 해야한다. primary color는 많이 쓰이는 컬러가 아니라, 사용자의 시선이 머무르는 곳에 쓰이는 것이라 

생각하여야 좋다.

 

2. 보조 색상Secondary color 강조Accent color 색상을 정한다.

보조색상은 주요 색상을 보조하는 컬러, 강조 컬러는 강조하는 컬러를 말한다.

 

보조색상은 유사색과 보색을 쓰는 방법으로 나누어져 있다.

보통 유사색을 많이 쓴다 생각한다. 

보조색상은 주요색상보다 비율이 더 많기 때문에 보조색상을 쓰게 되면 주요색상과의혼란을 주고, 가장 중요한 정보를 표현하는 주요색상의 의미를 잊을 수 있기 때문이다. 

 

주요색상과 보조색상의 비율은 7:3  / 8:2 로 잡는 것이 좋다.              

3. 밝음과 어두움 따른 변형색 설정

  주요색상과 보조색상을 정하고 기본색상 기준으로 밝음과 어두운 컬러 색상을 정한다.

 

4. 상호작용 색상 

상호작용을 위한 버튼은 다른 색상으로 디자인이 되어져야할 때가 있다.

이를 위한 색상을 정한다.

상호작용은 피드백은 공통적으로 사용하는 색상을 사용하여 혼란을 방지하면 좋다.

 

예) 빨간색 - 에러 / 노란색 - 경고 / 회색 - 취소 / 빨간색, 검은색, 회색 - 삭제 

 

5. 무채 색상을 정한다. 

단계에 따라 무채색상을 정한다.

 

 

6.UI에 추가 필요 색상을 정한다.

 

배경색, 글자색, 아이콘색 등 추가 색상을 정한다.

 

효과적인 웹사이트와 앱의 컬러스킴은 60-30-10의 비율을 따른다. 메인 컬러 60/ 보조컬러 30 / 강조 컬러 10을 말한다.