쉿! CRAP 설계 원칙에 대한 이 내부자 비밀을 공유하지 마십시오.

CRAP 디자인 원칙을 사용하는 것은 효과적인 시각적 디자인을 만드는 놀라운 방법입니다.

"뭐?!" 너희들은 말했지, 그렇지? 글쎄, 이것은 당신이 전에 CRAP에 대해 들어본 적이 없다면 당신을 위한 놀라운 일입니다. 많은 컴퓨터 관련 책을 저술한 멋진 미국 작가인 Robin Patricia Williams는 그녀의 책 The Non-Designer's InDesign Book에서 그래픽 디자인 원칙을 설명했습니다. 그녀는 그것을 CRAP이라고 불렀습니다.

( 여기 에서 그녀와의 간단한 인터뷰도 읽을 수 있습니다 .)

그래서, CRAP은 무엇입니까? 물론 우리가 알고 있는 것은 아닙니다!

효과적이고 눈길을 끄는 디자인을 만들려면 일관성이 있어야 합니다. 일관성은 항상 필요한 기본 사항과 기본 사항을 구현하는 데 필요합니다. 이러한 기본 사항은 모든 디자이너가 지속적으로 고려해야 하는 매우 기본적인 필수 사항입니다.

그래픽 디자이너로서 당신의 임무는 보는 사람이 웹사이트를 떠날 수 없도록 매료시키는 무언가를 만드는 것입니다. 시청자는 매력적인 그래픽 디자인으로 좌석에 붙어 있어야 하며, 이를 위해 CRAP가 제공됩니다.

CRAP은 Contrast, Repetition, Alignment, Proximity의 약자입니다.

1. 차이

대비는 "예술 작품에서 서로 다른 요소(예: 색상, 톤 또는 감정)의 병치"로 설명됩니다. 대비는 요소를 돋보이게 만드는 것입니다. 들어가기 전에 고려해야 할 한 가지 팁이 있습니다. 대비 기능을 너무 많이 사용하면 대비를 높이는 것이 아니라 단순히 줄이는 것입니다. 왜요? 대비는 몇 가지 요소가 눈에 띄기를 원할 때 의미하는 바를 의미하기 때문입니다. 모든 것이 눈에 띄면 아무것도 눈에 띄지 않습니다! 크랩 디자인 원칙의 중요한 요소로서 이를 잘 활용하는 방법을 알아야 합니다. 자, 시작하겠습니다!

색상

색상의 차이를 사용하여 대비를 만들 수 있습니다. World Wide Web Consortium(W3C)은 텍스트와 배경 사이에 필요한 최소 대비에 대한 지침을 만들었습니다. 텍스트와 배경의 경우 고대비를 사용해야 하지만 다른 요소에 대해 이야기할 때는 그렇지 않습니다. 서로 다른 요소 간의 대비가 높으면 사용자의 눈이 피로해질 수 있습니다. 최적의 대비가 사용되었는지 여부를 확인하기 위해 디자인의 회색조 버전을 볼 수 있습니다.

일반적으로 눈을 피로하게 하는 고대비를 생성하지 않는 보색 음영 을 사용하는 것이 좋은 습관이 될 수 있습니다.

크기

특히 텍스트의 경우 요소 크기의 차이가 대비의 원인이 될 수 있습니다. 요소의 크기를 주변의 다른 요소보다 훨씬 크게 유지하면 눈길을 끌 수 있습니다. 클릭 유도문안(CTA) 버튼은 이 더 큰 크기에서도 이점을 얻을 수 있습니다. 시청자가 더 많이 알아차리고 CRO에 도움이 됩니다. 또한 CRO 전략에 대해 더 많은 도움이 필요하면 이 가이드를 확인하십시오.

모양

다른 모양을 사용하면 원하는 대비를 생성할 수 있습니다. 인포그래픽에서 사용된 형태의 대비를 효과적으로 볼 수 있습니다. 서로 다른 모양을 나란히 사용하면 독자의 마음을 사로잡는 데 도움이 됩니다. 사변형 모양에 둥근 모서리를 추가하거나 둥근 원형 요소와 함께 정사각형 요소를 사용하는 것도 모양 대비의 예가 될 수 있습니다.

폰트

글꼴을 다른 그룹으로 분류할 수 있습니다. Serif, Sans-serif, script, monospaced 및 display는 기본 유형 스크립트 분류입니다. 다른 글꼴 그룹을 사용하면 우리가 나타내려는 텍스트에 대한 대비를 만들 수 있습니다. 또한 다양한 글꼴 두께(굵게 또는 일반), 글꼴 스타일(기울임꼴, 불투명 또는 보통) 및 글꼴 장식(밑줄, 취소선 등)을 사용하면 게임을 한 차원 높일 수 있습니다.

2. 되풀이

인간으로서 우리의 마음은 좋아하는 패턴으로 프로그램되어 있습니다. 우리는 모든 곳에서 그들을 찾습니다. 패턴을 만드는 것은 무엇입니까? 되풀이! 또한 우리는 사물의 반복을 만날 때 정체성을 형성합니다. 주요 주제가 반복되지 않는 음악을 생각해 보십시오. 길을 잃었을 것입니다.

디자인에서도 똑같은 일이 일어납니다. 일관성을 유지하고 일종의 정체성을 부여하기 위해 디자인에서 색상, 모양, 질감, 크기 및 기타 속성을 반복해야 합니다. 또한 기업은 브랜드 인지도를 구축하기 위해 디자인에 반복을 사용합니다. 그들은 서로 다른 플랫폼과 채널에 일관성을 제공하기 위해 미리 정의된 색상과 글꼴 세트를 반복합니다.

디자인의 반복은 디자인의 4가지 CRAP 원칙에서 또 다른 중요한 원칙입니다. 사용자는 길을 잃지 않고 안전하다고 느낄 필요가 있습니다. 웹사이트의 UX를 최적화하는 데 도움이 됩니다.

3. 조정

CRAP 디자인 원칙의 또 다른 중요한 요소인 정렬은 디자인에서 요소의 위치를 ​​지정합니다. 그것은 디자인에 응집력과 질서감을 주는 것입니다. 요소 측면에서 모서리 또는 중심을 기준으로 정렬할 수 있습니다. 그러나 텍스트는 왼쪽, 오른쪽, 중앙에 정렬하거나 단순히 정렬할 수 있습니다. 사용된 텍스트 언어에 따라 LTR 또는 RTL인 왼쪽 및 오른쪽 정렬이 가장 많이 사용됩니다. 짧은 텍스트 범위에 중앙 정렬을 사용할 수 있습니다(하지만 긴 텍스트에서는 읽기 어렵습니다). 양쪽 맞춤은 줄 길이가 길고 글꼴 크기가 작고 단어가 더 짧을 때 좋은 선택입니다(긴 단어로 구성된 좁은 줄에 사용하면 가독성이 떨어짐).

각 디자인에는 수평 정렬 가이드 역할을 하는 수직선이 있어야 합니다. 페이지의 모든 곳에 떠 있는 텍스트는 보는 사람을 혼란스럽게 합니다. 시청자는 페이지의 모든 부분이 서로 간의 관계를 이해할 수 있어야 합니다.

4. 근접성

마지막으로 근접성은 CRAP 설계에서 중요한 역할을 하는 또 다른 원칙입니다. 디자인의 근접성은 서로 관련되고 서로 밀접하게 연결된 요소를 배치해야 함을 나타냅니다. 이해가 되는군요, 그렇죠? 당신은 당신이 읽고있는 기사와 관련된 링크를 탐색 모음에서 찾고 싶지 않습니까? 또한 페이지 전체에 걸쳐 요소를 균등하게 배치하면 디자인을 따라하기가 더 어려워집니다. 시청자가 원하는 정보를 쉽게 찾을 수 있도록 관련 요소를 최대한 그룹화하십시오.

3초 규칙

"사랑에 빠지는 데 걸리는 시간은 단 3초."

따라서 CRAP 디자인이 완벽한지 확인하기 위해 갈 수 있는 마지막 테스트는 3초 안에 효과적인지 확인하는 것입니다. 마음을 비우고 시선을 돌렸다가 다시 돌아봄으로써 스스로 할 수 있습니다. 3초 후에 친구나 친척에게 의견을 물어볼 수도 있습니다. 우리는 무언가가 우리를 사로잡는지, 계속할지 여부를 단 3초 만에 결정합니다.

관계

이러한 원칙을 단독으로 사용해서는 안 됩니다. 반복과 정렬이 함께 작동하여 "정상" 상태를 제공하므로 텍스트 조각의 모양이나 위치를 변경하여 대비를 생성할 수 있습니다. 또한 반복과 근접은 글머리 기호 목록과 같은 효과적인 형식을 생성하기 위해 함께 작동합니다. 글머리 기호의 반복은 포인트의 근접성을 강조합니다.

결론

오스카 와일드(Oscar Wilde)는 그의 가장 유명한 책 "도리안 그레이의 초상(The Picture of Dorian Gray)"의 서문에서 "아티스트는 아름다운 것을 창조하는 사람입니다. 예술을 드러내고 예술가를 숨기는 것이 예술의 목적이다.”

마지막으로, 목표는 문서를 만드는 데 들이는 노력이 사라지고, 보이지 않게 되어, 독자나 시청자가 전달하려는 아이디어에 제한 없이 액세스할 수 있도록 하는 것입니다. 디자인 구성 요소의 선택. 이와 관련하여 디자인 품질에 대해 언급(또는 알아차림)하는 사람은 거의 없지만 메시지를 보고 조치를 취할 것이기 때문에 감사할 일입니다. 그게 전부가 아닙니까?