UI 디자인 모범 사례 및 일반적인 실수

이 기사의 오디오 버전을 들어보세요

비록 타이틀 UI 디자이너가 전통적인 그래픽 디자이너로부터의 출발을 제안하지만, UI 디자인은 여전히 ​​시각 디자인 분야의 역사적 전통의 일부입니다.

각 움직임 또는 매체와 함께 해당 분야는 새로운 그래픽 언어, 레이아웃 및 디자인 프로세스를 도입했습니다. 세대 사이에 디자이너는 인쇄기에서 Xerox로, 또는 종이에서 픽셀로의 전환을 가로질러 왔습니다. 이 세대에 걸쳐 그래픽 디자인은 각 시대의 시각적 언어를 대표하는 책임을 수행했습니다.

UI 디자인이 초기 단계에서 전환됨에 따라 어떤 종류의 그래픽 세계가 발전할 것으로 기대할 수 있습니까? 현재의 궤적을 보면 미래가 암울해 보입니다. 오늘날 UI 디자인의 많은 부분이 표준화되고 반복 가능하게 되었습니다. 설계 토론은 한계를 뛰어넘거나 새로운 것을 상상하기보다 설계가 안전하게 작동하도록 학습 규칙에 초점을 맞춘 온라인 토론입니다.

UI 디자이너가 패턴과 트렌드에 의존하는 경향은 단조로운 시각적 환경을 조성할 뿐만 아니라 프로세스가 점점 더 공식화됨에 따라 디자이너의 가치를 떨어뜨립니다.

UI 모범 사례와 일반적인 실수를 검토할 때 가장 시급한 문제는 기술 숙련도가 아니라 반복적이고 시각적으로 지루한 디자인의 맹공격을 피하는 것입니다.

가장 흔한 5가지 UI 디자인 실수는 다음과 같습니다.

1. UI 디자이너는 규칙에 집착하게 되었습니다.
2. 그리드는 UI 디자이너의 창작 과정을 제한하고 있습니다.
3. UI 디자인은 패턴으로 표준화되었습니다.
4. 서체는 비극적으로 잘못 이해되고 있습니다.
5. 대비는 디자인의 만병통치약이 아닙니다.

일반적인 실수 #1: UI 디자이너가 규칙에 집착하게 되었습니다.

그래픽 디자인의 세계는 항상 일련의 규칙과 표준을 따랐습니다. 설계 분야 내에서 일반적인 실수는 위반된 표준 규칙과 밀접하게 일치합니다. 이러한 관점에서 디자인 규칙은 신뢰할 수 있는 지침으로 보입니다.

그러나 모든 디자인 분야에서 의식적으로 규칙을 어기면서 새로운 움직임과 창의적인 혁신이 생겨났습니다. 이는 설계가 조건부이고 설계자의 재량권이 필요하기 때문에 가능합니다. 디자인은 정답이 정해져 있는 프로세스가 아닙니다. 따라서 디자인 규칙은 차갑고 딱딱한 사실이 아닌 지침으로 간주되어야 합니다. 경험 많은 디자이너는 틀에서 벗어날 수 있을 만큼만 룰북을 알고 존중합니다.

디자인이 온라인에서 논의되는 방식은 종종 해야 할 일과 하지 말아야 할 일의 목록을 중심으로 이루어집니다. 완벽한 디자인을 위한 10가지 쉬운 단계를 마스터하세요! 불행히도 디자인은 원칙과 경향에 대한 훨씬 더 강력한 이해를 필요로 합니다. 좋은 디자인으로 가는 길은 체크리스트에 대한 체계적인 준수를 통해 이루어지지 않습니다.

흥미롭게도 디자이너가 규칙 위반을 중단하면 창의적인 혁신을 이룰 수 없습니다. UI 디자이너가 의사 결정 능력을 연마하기보다 지침을 따르는 능력만 개발한다면, 그들은 빠르게 무의미해질 수 있습니다. 우리의 작업이 기성 템플릿보다 더 큰 가치를 추가한다고 어떻게 주장할 수 있겠습니까?

"상위 10개" 디자인 규칙을 조심하십시오

오늘날 UI 디자인 세계에서 디자인 규칙의 문제는 그 풍부함입니다. 디자이너가 문제를 해결해야 하는 경우 기존 UI 커뮤니티와 솔루션 세트를 살펴보기만 하면 됩니다. 그러나 이러한 지침과 규칙이 너무 많으면 신뢰성이 떨어집니다.

Google에서 "Top UI Design Mistakes"를 검색하면 50만 개의 결과가 나옵니다. 이 저자들 중 대부분이 서로 동의할 확률은 얼마나 됩니까? 제공되는 각 설계 팁이 독자의 설계 문제와 정확히 일치할 가능성은 얼마입니까?

종종 온라인 교육 기사는 문제 이면의 설계 원칙을 안내하기보다는 심각한 문제에 대해 논의합니다. 결과적으로 새로운 디자이너는 디자인이 제대로 작동하는 이유를 결코 배우지 못합니다. 대신, 그들은 이전에 왔던 것에 의존하게 됩니다. 디자인 실험이나 놀이를 장려하는 기사가 너무 적다는 것이 우려되지 않습니까?

디자이너는 미리 결정된 규칙과 디자인 템플릿이 아닌 지침 원칙의 툴킷을 사용해야 합니다. “시차 스크롤을 하려면 x를 누르고 캐러셀을 보려면 y를 누르십시오. 선택하기 전에 탐색 도구가 트렌드인 최신 블로그 게시물을 참조하세요.” 지루한-!

팁 및 "상위 10" 목록은 예측 가능한 추세를 따릅니다.

트렌드는 디자이너에게 정크 푸드와 같습니다. 그것들을 따르면 초기에 약간의 회수를 제공하지만 장기적으로 가치가 거의 없는 저렴한 솔루션을 생산합니다. 트렌드를 따르는 디자이너는 빠르게 데이트합니다. 다른 사람의 디자인 경로를 따랐을 때의 보상은? 직업적 공허함을 갉아먹는 느낌.

자신의 스타일과 시스템을 발명하기 위해 노력하는 것은 힘든 일이지만 노력할 가치가 있는 것은 사실입니다. 매일의 이익과 돌파구는 모두 자신의 것입니다. 디자이너의 영혼을 먹여 살리는 것 같지 않은 카피가 있습니다.

일반적인 실수 #2: 그리드가 UI 디자이너의 창작 과정을 제한하고 있습니다

규칙에 대한 내 주장에도 불구하고 여기에 하나가 있습니다. UI 디자이너가 그리드 없이 작업하는 것은 불가능합니다. 웹 및 모바일 인터페이스는 기본적으로 픽셀 단위 구성을 기반으로 합니다.

그러나 이것이 UI 디자이너가 그리드 중심의 모양만 추구해야 한다는 의미는 아닙니다. 마찬가지로 모든 디자인 관련 결정이 그리드를 기반으로 할 이유가 없습니다.

그리드를 최신 유행 도구로 사용하지 않기

일반적으로 트렌드에 맞춰 디자인하면 디자인이 좋지 않습니다. 기껏해야 추세가 만족스러운 결과로 이어지지만 전반적인 영향은 거의 확실하지 않습니다. 유행한다는 것은 평범하다는 것이다.

따라서 디자인에 그리드를 사용할 때 그리드가 도구로 제공해야 하는 것과 전달할 수 있는 것을 이해하십시오. 그리드는 일반적으로 그리드의 제약 조건 내의 모든 것이 동일하게 나타나므로 중립성을 나타냅니다.

그리드는 또한 편견 없는 탐색 경험을 허용합니다. 사용자는 디자이너의 큐레이터 손의 간섭 없이 항목에서 항목으로 이동할 수 있습니다. 다른 탐색 구조를 사용하여 디자이너는 콘텐츠를 그룹화하고 원하는 시퀀스를 보다 의도적으로 설정할 수 있습니다.

워크플로로 그리드를 기본값으로 사용하지 마십시오.

RISD(Rhode Island School of Design)의 교수이자 PIN-UP Magazine의 이사인 Dylan Fracareta는 "대부분의 사람들은 12열 그리드로 시작합니다. 왜냐하면 3열 그리드와 4열 그리드를 사용할 수 있기 때문입니다."라고 지적합니다. 여기서 위험은 디자이너가 작업을 즉시 미리 결정한다는 것입니다.

이를 방지하기 위해 Fracareta는 물리적으로 그리드 선에 물건을 배치하는 것과는 대조적으로 정해진 수량만큼만 이동 도구를 사용합니다. 이것은 질서를 확립하고 예상치 못한 결과에 대한 가능성을 열어주는 이중 효과가 있습니다.

브라우저를 위한 설계는 코드를 입력하고 무슨 일이 일어났는지 확인하는 것을 의미했습니다. 오늘날 웹 디자인은 "투명한 종이 두 장을 조정하는 것과 비슷하다"는 기존 레이아웃 디자인과 유사합니다. 디자이너로서 우리는 이 과정에서 어떤 이점을 얻을 수 있습니까?

그리드는 제한적일 수 있지만 가장 전통적인 조직 형태 중 하나입니다. 그리드는 직관적입니다. 그리드는 중립적이고 겸손합니다. 그리드를 사용하면 콘텐츠가 스스로 말하고 사용자가 인터페이스를 쉽게 탐색할 수 있습니다. 그리드의 제한성에 대한 나의 경고에도 불구하고 다른 어레이는 다양한 수준의 안내 또는 자유를 허용합니다.

일반적인 실수 #3: UI 디자인이 패턴으로 표준화되었습니다.

표준화된 디자인 요소의 개념은 UI 디자인보다 앞선다. 건축 세부 사항은 수세기 동안 유사한 디자인 환경에 반복되고 적용되었습니다. 이 관행은 사람들이 거의 인식하지 못하는 건물의 일부에 적합합니다.

그러나 건축가가 가구 치수 및 난간 높이와 같은 공통 요소를 표준화하자 사람들은 베이지색 물리적 환경에 대해 무관심을 표현하기 시작했습니다.

뿐만 아니라 표준화된 치수는 비효율적인 것으로 판명되었습니다. 통계적 평균에 기초하여, 그들은 종종 인구의 많은 부분에 서비스를 제공하지 못했습니다. 반복 가능한 세부 사항이 제 자리를 차지하지만 무비판적으로 사용해서는 안 됩니다.

디자이너는 패턴을 제품으로 사용해서는 안 됩니다.

많은 UI 디자이너는 패턴을 단순한 시간 절약 도구 이상으로 봅니다. 그들은 그것들을 복잡한 설계 문제에 대한 기성품 솔루션으로 봅니다. 패턴은 디자이너의 작업을 더 쉽게 하기 위해 반복되는 작업과 아티팩트를 표준화하기 위한 것입니다. 유감스럽게도 캐러셀, 페이지 매김 및 F 패턴과 같은 특정 패턴은 많은 인터페이스의 전체 구조가 되었습니다.

패턴 사용이 정당한가?

디자이너들은 사람들이 웹에서 읽는 방식의 결과로 F-패턴이 존재한다고 스스로에게 말합니다. Espen Brunborg는 아마도 사람들이 우리의 F-패턴을 남용한 결과로 이런 식으로 읽는다고 지적합니다. "웹 디자이너가 레시피를 따르는 것뿐이라면 무슨 의미가 있습니까?" 브룬보그가 묻는다.

일반적인 실수 #4: 서체는 비극적으로 잘못 이해됩니다.

많은 "빠른 팁" 디자인 목록은 글꼴에 대한 엄격하고 빠른 규칙을 제안합니다. 각 규칙은 "하나의 글꼴 모음만! 고정 폭 글꼴은 죽었다! 어떤 대가를 치르더라도 얇은 글꼴을 피하십시오!” 이것은 뜨거운 공기에 지나지 않습니다.

유형, 텍스트 및 글꼴에 대한 유일한 합법적 규칙은 가독성을 강화하고 적절한 의미를 전달하는 데 있습니다. 텍스트가 읽을 수 있는 한 다양한 서체를 사용할 수 있습니다. UI 디자이너는 인터페이스에 구현된 각 글꼴의 이력, 용도 및 디자인 의도를 아는 책임을 져야 합니다.

서체 가독성이 최고

서체는 의미를 전달하고 가독성에 영향을 줍니다. 장치의 가독성에 대한 규칙을 둘러싼 모든 논의와 함께 디자이너는 텍스트 본문에 미적 감각을 부여하기 위해 글꼴이 설계되었다는 사실을 잊고 있습니다. 가독성은 매우 중요합니다. 이것은 논쟁의 여지가 없습니다. 하지만 이는 분명한 목표가 되어야 합니다. 그렇지 않으면 왜 Helvetica 또는 Highway Gothic 이외의 것이 필요합니까?

기억해야 할 중요한 점은 글꼴이 단지 가독성의 다른 컨텍스트를 위해 설계된 것이 아니라는 것입니다. 또한 의미를 전달하고 텍스트에 미묘한 분위기를 부여하는 데 필수적입니다.

어떤 대가를 치르더라도 얇은 글꼴을 피하는 것은 현명하지 않습니다

트렌드가 바뀌었다가 사라지면서 일반적인 디자인 비평에서는 얇은 글꼴을 완전히 피해야 한다고 주장합니다. 그러나 더 많은 규정이 필요합니까? 목표는 서체를 지원하는 디자인 원칙에 대한 더 깊은 이해가 되어야 하지 않을까요?

일부 디자이너는 얇은 글꼴을 읽을 수 없거나 장치 간에 신뢰할 수 없다고 확신합니다. 합법적인 포인트. 그러나 이것은 서체가 가독성과 관련된 기술적 선택으로만 이해되는 현재 UI 디자인 논의의 조건을 나타냅니다. 가독성이 유일한 디자인 문제라면 얇은 글꼴을 완전히 없애지 않는 이유는 무엇입니까?

보다 전체적인 접근 방식은 얇은 글꼴이 어떤 맥락에서 유리할 수 있는지 이해하는 것으로 시작됩니다. 굵고 두꺼운 텍스트는 실제로 더 얇은 텍스트보다 길게 읽기가 훨씬 어렵습니다. 그러나 굵은 글꼴은 시각적인 무게를 더 많이 전달하므로 제목이나 텍스트가 거의 없는 콘텐츠에 더 적합합니다.

얇은 글꼴은 종종 세리프를 사용하여 본문에 적합합니다. 어때요? 세리프 문자는 빠르게 연속해서 볼 때 함께 흐르기 때문에 오랜 시간 동안 더 편안하게 읽을 수 있습니다.

또한 얇은 글꼴은 우아함을 전달하기 때문에 선택되는 경우가 많습니다. 시각적인 세련미가 요구되는 클라이언트를 위한 인터페이스를 만들기 위해 디자이너를 고용한 경우 작업을 수행할 더 무거운 서체를 찾기가 어려울 것입니다.

글꼴은 계층 구조를 설정하기 위해 변형이 필요합니다.

일반적인 UI 디자인 실수는 글꼴 간에 적절한 변형을 제공하지 못하는 것입니다. 글꼴 변경은 인터페이스 내에서 시각적 계층 구조를 설정하는 데 도움이 되는 좋은 탐색 도구입니다. 일반적으로 가장 큰 항목(또는 가장 굵은 글꼴)이 가장 중요하고 시각적으로 가장 중요합니다. 시각적 중요성은 사용자가 콘텐츠 제목과 자주 사용하는 기능을 식별하는 데 도움이 됩니다.

너무 많은 변형이 계층 구조를 훼손합니다.

특히 인터페이스에 많은 서체가 포함된 경우 모든 글꼴 선택을 고유하게 만드는 문제는 실제로 눈에 띄는 것이 없다는 것입니다. 모든 글꼴이 다르면 사용자가 중요한 내용을 인식하거나 시각적 질서를 확립하기 어려워집니다.

일반적인 실수 #5: 대비는 만병통치약이 아닙니다.

많은 "Top Mistakes" 목록에 나타나는 공통 스레드는 UI 디자이너가 저대비 인터페이스를 피하도록 권장합니다. 대비가 낮은 디자인이 읽기 어렵고 비효율적인 경우가 많은 것이 사실입니다. 그러나 얇은 글꼴에 대한 나의 요점과 마찬가지로 나의 걱정은 절대 언어의 사용이 균질한 고대비 디자인 문화로 이어진다는 것입니다.

고대비로 기본 설정하는 것은 부주의합니다.

고대비 영상은 틀림없이 자극적이고 흥미진진합니다. 그러나 인간의 감정 범위에는 전달할 가치가 있는 상태가 더 많습니다. 시각적으로 자극을 주는 것은 시각적으로 안전할 수도 있습니다.

예를 들어, 현대 SF 영화 산업 전체를 생각해 보십시오. 모든 프로덕션이 시청자를 흥분으로 속이는 방법으로 블랙과 네온 블루 비주얼에 의존하는 것처럼 보입니다. 더 넓은 범위의 감정적 반응을 유발하는 고대비 이미지와 저대비 이미지를 모두 내러티브로 엮는 것이 더 효과적이지 않을까요?

기능적으로 인터페이스의 모든 요소가 다른 요소와 고대비이면 눈에 띄는 것이 없습니다. 이것은 계층적 도구로서의 대비의 잠재적 가치를 무효화합니다. 침체되고 트렌디한 디자인을 피하기 위해서는 다양한 디자인 움직임을 규칙이 아닌 도구로 고려하는 것이 필수적입니다.

결론

기껏해야 디자인 규칙은 지침입니다. 그들은 의사 결정에 안전을 제공하고 무분별한 선택의 위험에 대해 설계자에게 경고합니다.

반대로 디자인 규칙은 법률이 아닙니다. 그것들은 깨지지 않는 것이 아니며 확실히 우리의 확실한 항복을 받을 자격이 없습니다. 사실, 무모하게 따르는 디자인 규칙은 문제를 창의적으로 해결하는 능력을 약화시키는 심각한 목발이 될 수 있습니다.

디자이너는 과학자가 아닙니다. 우리가 내리는 모든 미학적 결정에 대해 경험적 증거를 제공할 의무는 없습니다. 우리의 직업이 과정과 신중한 판단의 하나인 것은 사실이지만 본능과 독창성을 위한 여지가 있습니다. 사실, 복잡하고 트렌디한 콘텐츠 세계에서 고객이 돋보이도록 돕는 우리의 능력은 새로운 가능성을 상상하려는 우리의 의지에 달려 있습니다.

우리는 실험해야 합니다. 우리는 놀아야 한다.

시각적 이점을 위해 디자인 규칙이 존재합니다. 그들은 구부러지고 부러질 수도 있지만 결코 맹목적으로 따라가서는 안 됩니다.