전체 글24 4. 끼리끼리 근접성(Proximity) 근접성이란? 좋은 디자인 규칙 중 하나로 서로 관련이 있는 요소들은 가까이 두고 관련이 없는 것은 떼어놓아야 한다는 개념입니다. 균등한 간격으로 요소들을 배치했지만 시각적으로 그리 좋아보이지 않습니다. 매우 엉성하 결과물이네요. 좋은 디자인이 아닙니다. 이번에는 근접성에 근거해서 공통점을 가진 요소들을 서로 가깝게 묶어서 배치한 디자인입니다. 앞전에 봤던 페이지 보다 훨씬 더 좋은 디자인의 형태를 갖췄습니다. 이처럼 근접성을 근거로한 디자인은 좋은 디자인입니다. 위 예시를 뜯어보면 상단의 모든 메뉴 링크를 더 가깝게 배치했습니다. 서로 관련이 있기 때문이죠. 마찬가지로 중앙의 제목 역시 아래에 있는 텍스트와 서로 관련이 있어서 가깝게 배치했습니다. 하단의 버튼 역시 마찬가지입니다. 서로 비슷한 동작을 하.. 2023. 11. 16. 3. 착시현상 주의! 착시현상이란? 시각 자극을 인지하는 과정에서 주변의 다른 정보에 영향을 받아 원래의 사물에 대해 시각적인 착각이 발생하는 현상 이라고 나무위키에 정의되어 있습니다. 재밌는건 이런 착시현상이 디자인에서도 발생합니다. 위의 사각형과 원은 분명히 같은 크기입니다. 그런데 우리 눈에는 원이 사각형보다 더 작게 보입니다. 이럴 땐 어떻게 하면 좋을까요??? 측정된 수치를 따라야하나? 아니면 우리의 눈을 믿어야 하나? 우리는 웬만해서는 눈으로 본 걸 신뢰하게 됩니다. 즉, 위에서 원이 사각형보다 약간 작게 보인다면 착시를 바로잡고 둘 다 같은 크기로 보일 때까지 크기를 늘려줘야합니다. 비록 치수상으로는 맞지 않겠지만, 우리 눈에 보이는 크기가 실제 픽셀 보다 더 중요합니다. 마찬가지로 치수는 같지만 삽화 크기가 달.. 2023. 11. 16. 2. 계층구조 (Hierarchy)의 중요성 혼란한 웹페이지를 하나 가져왔습니다. 뭐가 문제인지 한 번 뜯어봅시다. 일단 정렬 & 그리드를 모두 벗어난 상태이며, 페이지 안에 모든 요소들이 자기주장이 너무 강합니다. 즉, 요소들 간 계층구조가 없어 시선이 편하게 머물 곳이 없습니다. 이번에는 계층구조가 잘 구성된 페이지를 살펴봅시다. 위의 웹페이지는 가장 중요한 정보가 무엇인지 우리에게 순차적으로 안내합니다. 일단 톡톡 튀는 오른편의 이미지에 가장 먼저 시선이 쏠립니다. 그 다음으로 왼편에 나열된 요소들에 시선이 넘어가죠. 제목과 내용은 폰트 크기로 계층구조가 이루어졌으며 하단의 버튼 역시 컬러(면)와 라인으로 계층구조가 나뉘어 우선순위가 명확합니다. 위 예시에서 살펴본대로 잘 짜여진 계층구조는 좋은 디자인의 기본원칙입니다. 우리는 시각적으로 동시.. 2023. 11. 16. 1. 디자인의 시작, 정렬과 그리드 (Alignment & Grid) 좋은 디자인이란 무엇일까? 답은 간단하다. 정리정돈이 잘된 디자인이 좋은 디자인이다. 여기서 말하는 정리정돈이란 질서가 잡힌, 정렬이 잘된 상태를 말한다. 우리는 혼란을 피하고 질서를 추구한다. 질서정연하고, 대칭적, 조직적인 상태가 우리에게 편안함과 안정감을 느끼게 해준다. 혼란하고 무질서한 상태보다 훨씬 더 아름답게 느껴진다. 참고로 내방은 혼란하다. 매우... 좋은 디자인은 바로 여기서 출발한다. 정렬은 가장 단순하고 기본적이지만 가장 강력한 디자인 규칙이다. 단순히 정렬만을 사용해서 무엇인가를 디자인한 것 처럼 보이게 할 수 있지만 반대로, 정렬을 잘못하면 엉성한 상태가 된다. 깔끔하게 정렬이 이루어졌다면 그 다음은 구조(레이아웃)를 형성하게 된다. 이것을 그리드라고 한다. 그리드란 인식이 가능한.. 2023. 11. 16. 이전 1 2 3 다음
