비 디자이너를 위한 기본 디자인 설계 원칙 (Fundamental design principles for non-designers)

이 글은 Anna 4erepawko MészárosFundamental design principles for non-designers글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.


presentation
이것은 전문 디자이너에게 돈을 지불할 여유가 없는 모든 콘텐츠 제작자들과 디자이너들이 항상 너무 바빠서 도움을 줄 수 없는 팀의 비 디자이너들을 위한 것입니다. 이 간단한 단계를 따를 수 있다면 디자인이 더 좋을 거라고 장담합니다.
이 목록은 제 비 디자이너 친구들, 가족, 동료들이 그들의 일상 생활에서 필요한 것들을 디자인하는 데 어려움을 겪는 것을 관찰한 몇 년 동안 만들어진 것입니다. 개인 뉴스레터, CV 및 포트폴리오, 페이스북 또는 인스타그램에 게시된 사진, YouTube용 비디오 미리보기 등입니다.
이 모든 사람들이 어떻게 하면 상황이 나아질 수 있는지에 대한 도움과 조언을 얻기 위해 제게 왔습니다. 저는 "사람에게 낚시를 가르쳐라"라는 생각을 확고히 믿는 사람입니다. 그래서 저는 그들에게 무언가를 디자인하는 대신, 그들에게 미래에 유사한 문제에 도움이 될 수 있는 귀중한 조언을 주려고 노력했습니다.
시간이 흐르면서, 저는 제가 사람들에게 똑같은 조언을 반복하고 있다는 것을 깨달았습니다. 저는 매번 다른 단어를 썼지만, 저의 모든 조언은 이 4가지 원칙을 강조할 수 있습니다.
저는 이 목록과 같은 수천 개의 목록이 있다는 것을 알고 있습니다. 하지만 저는 이 목록이 너무 지나치다고 생각합니다. 디자이너가 아닌 경우 25개의 "단순" 단계를 일관되게 따를 수는 없습니다(단순 25개의 부품이 들어 있지 않은 것은 사실 "단계를 진정으로 "단순"할 수 있음). 그리고 당신은 그럴 필요가 없어요.
이렇게 하면 반짝반짝 빛나는 아름다운 디자인을 만들 수 있을까요? 아니요. 이렇게 하면 누구나 쉽게 이해하고 상호작용할 수 있는 훌륭하고 명확하며 이해하기 쉬운 디자인을 만들 수 있을까요? 물론이죠. 그럼, 더 이상 말하지 않고, 제가 여러분께 보여드리죠.

누구나 따라하면 훌륭한 결과를 얻을수 있는 4 기본 디자인 설계 원칙

Contrast

모든 요소 사이에 충분한 대비가 있는지 확인합니다.
왜냐구요? 왜냐하면 약간 다르지만 충분히 다르지 않은 것들이 Uncanny Valley를 형성하기 때문입니다. 그들은 사람의 눈에 섬뜩하고 혐오감을 느끼거나 이해하기 어렵습니다. 이제 우리는 그것을 우리의 디자인에서 원하지 않죠, 그렇죠?
디자인 설계의 요소는 정확히 같거나 크게 달라야 합니다.
대조적인(contrast) 문제는 대부분 다음과 같은 4가지 방법으로 나타납니다.
1. Colour: 밝은 색상에 어두운 색을 사용하고, 그 반대도 마찬가지입니다.
예: 회색과 같은 조합을 약간 어두운 회색 또는 연한 파란색에 사용하지 마십시오. 읽기/연결이 매우 어렵습니다.
presentation
2. Size: 정확히 같은 크기 또는 상당히 다른 크기의 요소만 서로 옆에 놓습니다.
예: 32pt와 36pt의 텍스트 줄을 나란히 놓지 마십시오. 반면, 18pt와 36pt는 서로 잘 어울릴 것입니다.
presentation
3. Weight: 사이즈와 마찬가지로 정확히 같은 무게이거나 상당히 다른 무게의 요소만 서로 옆에 놓습니다.
예: 동일한 서체의 "Bold"와 "Black"은 weights를 서로 옆에 두지 마십시오. 너무 비슷해 보이기 때문입니다. 반면, "Light"과 "Bold" weights는 함께 잘 어울릴 것입니다.
presentation
4. 스타일: 하나의 이탤릭체를 다른 이탤릭체 타입 옆에 두거나, 다른 serif typeface 옆에 serif typeface를 두지 마세요. 다른 것들을 조합하세요.
예: "Times New Roman"과 "Georgia"를 나란히 놓지 마십시오. 너무 비슷해 보입니다. 스타일이 상당히 다른 글꼴을 조합합니다.
presentation

Consistency-일관성

유사한 요소가 유사한 방식으로 나타나는지 확인합니다.
왜냐구요? 첫째, 일관성을 유지함으로써(따라서, 단순하게) 사람들은 항상 변하는 것에 정신이 팔려 있지 않고, 여러분의 디자인의 중요한 부분에 주의를 집중할 수 있게 합니다.
둘째, 일관성은 단순히 빨리 결합되는 것이 아니라 신뢰를 높이고 실제로 디자인된 것처럼 보이게 합니다.
선택한 후에는 다음과 같은 사항을 준수해야 합니다.
  • Typeface/font
  • Colour palette/shade of colour
  • Grid
  • Alignment
  • Style of decorative elements
이런 식으로요...
presentation
Placeholder text courtesy of Batman Ipsum
예를 들어 YouTube 채널의 비디오 미리 보기 또는 중간 기사의 표지 등 서로 옆에 나타나는 여러 가지 작업을 수행할 때 모든 항목에 대해 하나의 전체 스타일을 선택하고 계속 유지합니다.

Occam’s Razor

aka 시각적인 소음을 줄입니다.

디자인 설계에서 사용하는 요소 수가 적을수록 좋습니다.
왜냐구요? 인간의 뇌는 정보를 처리하고, 입력의 과부하를 가지고 결정을 내리기가 어렵습니다. 가능한 한 적은 수의 장식 요소((typefaces, colours, shadows, frames, strokes, icons, patterns 등)를 사용합니다.
Occam’s Razor 디자인 설계 버전을 모든 항목에 적용합니다.
만약 어떤 것이 단지 두 개의 요소로 성취될 수 있다면, 3을 사용하지 마세요. 10개의 요소로 무언가를 이룰 수 있다면 20개를 사용하지 마세요. 알겠습니다.
presentation
Placeholder text courtesy of Batman Ipsum
만약 여러분이 영국의 오래된 학구적인 철학자들을 좋아하지 않고, 여러분이 넷플릭스에서 볼 수 있는 것들을 더 좋아한다면, 물론, 여러분이 디자인한 Marie Kondo가 되세요. 기쁨을 유발하지 않는 것(또는 디자인의 유용한 부분이 아닌 것)은 모두 사라져야 합니다.

Space

사물의 위치 지정 방식은 사물의 의미에 대한 메타 레벨(meta-level)의 메시지를 보냅니다.
왜 이것이 중요할까요? 왜냐하면 물건을 어떻게 배치하고 그 주위에 얼마나 많은 공간을 추가하느냐에 신경을 쓰는 것은 디자인의 복잡성을 줄이는 데 도움이 되기 때문에, 보는 것이 더 즐겁고 더 쉽게 상호작용할 수 있습니다.
디자인에서 공간을 사용하여 의미 마인드를 전달하려면 다음 세 가지를 선택합니다.
1. Proximity(근접성) = Relatedness(관련성)
다른 요소보다 서로 더 가까운 것은 다른 요소보다 서로 더 관련이 있는 것으로 인식됩니다.
이것은 너무 자주 무시되고 있는 것 같기 때문에 가장 중요한 것입니다.
It can be applied in many different ways, for example:
예를 들어 다음과 같은 다양한 방법으로 적용할 수 있습니다.
  • 행의 각 단어 사이에 있는 것보다 선 사이에 더 많은 공간이 있어야 하며, 마찬가지로, 단락 내부의 선 사이에 있는 것보다 서로 다른 단락 사이에 더 많은 공간이 있어야 합니다.
presentation

Ignore the proximity rule at your own peril
  • 디자인 설계 구성요소는 구성요소와 구성요소 모서리 사이의 공간보다 서로 간의 공간이 더 적어야 합니다.
presentation
  • Labels(라벨) 및 지원 정보는 설명/관련된 요소 근처에 배치해야 합니다.
presentation

2. Negative Space
Occam’s Razor와 함께, 디자인을 최대한 negative space를 제공하여 디자인 설계의 의미를 더욱 명확하게 할 수 있습니다.
너무 많은 요소를 제한된 공간에 넣는 것은 세 개의 다른 노래를 한 번에 들으려고 하는 것과 같습니다. 무슨 말을 하고 있는지 이해하기 힘듭니다.
presentation
Look at Apple’s website. One can very clearly understand what is being said (or, rather, sold).
3. 중요성과 주문
이건 지극히 상식적인 얘기지만 그래도 여기서 언급해야 할 것 같아요.
가장 중요한 것은 우선이고, 또는 가장 많은 공간을 차지하게 만드는 것입니다. 질서를 전달하기 위해 사물의 순서를 사용하세요. Et cetera. 나머지는 확실히 알 수 있어요.

마치며

축하합니다! 만약 여러분이 만드는 것을 무엇이든 만들면서 이 모든 단계를 따랐다면, 그것은 업계 기준으로 볼 때 매우 좋아 보일 것입니다.
다른 모든 것에는 항상 디자이너가 있습니다.

이 글은 번역 글입니다. 원본 링크입니다.


안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp