덜 생각하십시오. 더 나은 디자인.

관리 가능한 의사 결정 및 사고 과정을 통해 UI 디자인에서 더 나은 워크 플로우를 촉진합니다.

잘 디자인 된 UI는 경험을 직관적으로 만들뿐만 아니라 사용자에게 미적으로 기쁘게하는 일련의 주요 결정의 결과입니다. 의사 결정 프로세스를보다 능률화함으로써 워크 플로를보다 쉽게하고 최적의 결과를 얻을 수있는 가능성을 높일 수 있습니다.

디자인 프로세스에서 더 많은 가능성을 사용할수록 실행하고 정교하게 생각해야합니다.

미국의 심리학자 인 Barry Schwartz는 The Paradox Of Choice에서 선택을 제거하면 불안을 크게 줄일 수 있다고 썼습니다. 그는 우리에게 표준과 기준이 있어야한다고 주장했지만 더 나은 것이있을 가능성에 대해서는 걱정하지 않았습니다. 소비자와 관련이 있었지만 디자인 결정에도 적용된다고 생각합니다.

극대화 전략은 실제로 완벽 주의자가 아니라 최적의 경험을 종합적으로 창출 할 수있는 가장 유리한 결정을 내릴 수 있도록하는 것입니다.

1. 제한 변수

고 충실도 개념을 생성하기 위해 모든 잠재적 변수를 고려하고 많은 개념이있을 수 있다면, 초기에 변수를 제한하고 정의해야한다는 것이 분명해집니다. 선택 가능한 양을 줄이면보다 쉽게 ​​결정을 내릴 수 있습니다.

경험을 통해 특정 변수 그룹을 제한하는 것이 컴포지션 전체에 어떻게 영향을 미치는지 예측하기가 더 쉬워집니다.

선택을 줄이는 것은 독창성을 줄이는 것과 관련이 없습니다. 사전 정의 된 규칙을 중심으로 개념을 작성하는 것은 제한 사항이지만 디자이너로서 자체 규칙을 설정하고 규칙을 완전히 제어 할 수 있다고 가정합니다.

스케일 및 간격

UI 디자인의 모든 측면은 리듬을 촉진하고 프로젝트가 커짐에 따라 규모와 공간의 일관성을 유지하는 데 도움이되는 시스템을 중심으로 이루어져야합니다. 내가 좋아하는 그러한 시스템 중 하나는 모듈 식 스케일로, 주어진 비율에서 스케일을 촉진하여 컴포지션의 요소 또는 음의 공간을 측정하거나 설정할 수 있습니다.

비율을 선택하면 모듈 형 스케일로 스케일 및 간격을 쉽게 정의 할 수 있습니다.

그리드, 타이포그래피, 수직 간격 및 레이아웃의 전체 치수를 관리 할 수있는 수준으로 줄일 수 있지만, 미적 감각과 리듬도 만족 스럽습니다. UI 디자인이 훨씬 쉽습니다.

그리드

그리드 시스템은 컨텐츠가 수평면 내에서 구성되는 방식을 제한하고 UI와 관련하여 당연한 방법입니다. 그러나 그리드는 너무 많은 생각없이 선택되어 단일 크기에 적합합니다. 대부분의 디자이너가 인식하지 못하는 것은 콘텐츠를 중심으로 구축 된 그리드 시스템을 만드는 것이 좋습니다.

그리드 시스템은 레이아웃에서 변수를 줄입니다

즉, 컨텐츠 시나리오를 명확하게 이해하여 특정 그리드에서 컨텐츠를 더 잘 제공하는 방법에 대한 그림을 그릴 수 있습니다. 특정 간격 규칙 및 요구 사항이있는 로고 또는 특정 고정 단위가있는 광고와 같은 기존 자산 및 브랜드 가이드의 비즈니스 제약 조건을 생각해보십시오.

내용의 유형도 요인입니다. 상점, 뉴스 간행물 또는 블로그 레이아웃 또는 간단한 시작 페이지를 만드는 방법에는 큰 차이가 있습니다. 이미지가 많고 단어가 많은 레이아웃. 시선 스캔 패턴과 시각적 계층 구조에 미치는 영향을 이해하는 것이 도움이 될 수 있습니다.

비즈니스 및 컨텐츠 제한 사항을 미리 이해하면 그리드 시스템을 선택하고 레이아웃을 결정하기가 쉬워집니다.

타이포그래피

타이포그래피는 웹의 최대 95 %를 차지하고 커뮤니케이션의 원동력이 될 수 있으므로 UI ​​디자인의 가장 중요한 측면이라고 주장합니다.

모듈 식 스케일과 같은 시스템을 크기 및 선행에 적용 할 수 있지만 글꼴 모음 및 스타일도 제한 될 수 있습니다. UI는 두 가족과 두 개의 가중치를 초과 할 필요가 없습니다. 타당성과 제목이 처리되는 방식으로 규칙을 확장 할 수도 있습니다.

색깔

팔레트를 사용하면 쉽게 열광 할 수 있습니다. 소량의 색조는 충분하고 일관된 영상을 만드는 데 먼 길을 갈 수 있습니다. 일반적으로 시작점에 필요한 것은 5 개의 견본입니다.

Adobe Color CC와 같은 도구를 사용하면 팔레트를 쉽게 사전 정의 할 수 있습니다

대부분의 브랜드는 기본 색 또는 강조 색과 몇 가지 중성 또는 대비 색을 통합하여 보완해야합니다. 특히 처음에 15 가지 색조의 톤이 필요하지 않습니다. 작게 시작하고 나중에 한 두 번 음영을 늘리는 것이 좋습니다.

이미지

이미지를 UI에 통합하는 방법은 주로 콘텐츠의 맥락에 따라 결정됩니다. 그것이 무엇인지에 대한 대략적인 개념이 있다면, 비율, 크기, 모양 및 처리에 대한 변수로 이미지의 시작점을 만들 수 있습니다. 우리는 그렇게 많이 필요하지 않을 수도 있습니다.

이미지 변수를 제한하면 일관성이 향상되고 장기적으로 이미지 자산을보다 쉽게 ​​관리 할 수 ​​있습니다. 도식 법도 마찬가지입니다.

실제로 이미지의 비율과 크기에 몇 가지 변형이 필요합니까?

2. 스타일 가이드 이전 만들기

UI 프로젝트가 개념적으로 성장함에 따라 스타일 가이드 또는 패턴 라이브러리를 작성하고 유지 관리하는 것이 점점 중요 해지고 있습니다. 이것은 리듬과 일관성을 유지하면서 프로젝트 규모를 돕는 디자인 원칙을 확립 할 것입니다. 사전에 변수를 정의하는 경우 변수를 문서화하는 것이 좋습니다. 미래의 의사 결정은 스타일 가이드가없는 것보다 쉬울 것입니다.

프로젝트에 따라 스타일 가이드를 만드는 것은 사치스럽고 나중에 참조하기 위해 종종 사용됩니다. 그렇기 때문에 대부분의 스타일 가이드가 마지막 순간 또는 프로젝트가 완료된 후 함께 모이는 것이 좋습니다. 그러나 잠재적 인 설계 및 개발을 지원하기위한 스타일 가이드에 대한 많은 사후 합리화 및 추론이 있지만 실제로 개념화 초기 단계에서 충실도를 높이는 데 도움이 될 수 있습니다.

처음에 기본 스타일 가이드를 만들면 디자인 결정을 줄이기위한 원칙을 조기에 수립 할뿐만 아니라 향후 보안 주체를 발전시키고 보강하는 인프라로도 도움이됩니다.

처음에 하나를 만든다고해서 반드시 완성되어야한다는 의미는 아닙니다. 어쨌든 스타일은 초기 단계에서 더 많이 진화하는 경향이 있으며, 프로젝트가 커질수록 경계가 더 명확하고 단단해집니다.

3. 모듈 기반 우선 순위 및 적응

Brad Frost의 Atomic Design과 같은 모듈 식 설계 시스템에서는 특정 핵심 영역에서 레이아웃을 구성 할 수 있습니다. 다양한 레이아웃에서 모듈을 재사용 할 수 있습니다. 인터페이스는 페이지가 아닌 시스템으로 취급되며 패턴 기반 설계 및 개발이 프로세스의 대부분을 차지합니다.

이것은 훌륭한 방법론이며 UI 디자인을 훨씬 더 관리하기 쉽게 만들지 만 더 효율적으로 만들려면 주요 영역의 우선 순위를 정하고 주변의 모든 것을 조정해야합니다. 그러면 시각적 일관성이 보장됩니다.

주요 영역 식별

우리의 디자인은 중요한 부분을 중심으로 이루어져야합니다. 각 영역의 우선 순위는 인터페이스 내의 내용 또는 기능에 의해 결정되며 본질적으로 퍼즐의 열쇠입니다.

중요한 영역에 먼저 중점을 두어 이후의 영역이 기존 환경에 구부러지고 적응해야하므로 설계 결정을 줄입니다.

주요 영역에 집중

우선 순위가 높은 영역이 식별되면 중요한 부분에 초점을 맞추고 완성하기까지 세밀하게 조정해야합니다. 아이디어는 덜 중요한 영역을 조정하기 전에 직관적이고 모든 요구 사항을 충족시키는 것입니다.

4. 모든 사람에게 적용

수천 년 동안 설계자들은 효과적인 의사 소통을 위해 한 가지 일을하기 위해 노력해 왔습니다. Google은 시청자와 시각적으로 그리고 청각 적으로 더 효과적으로 의사 소통 할 수있는 방법을 지속적으로 개발하고 미세 조정하고 있습니다.

가장 광범위한 잠재 고객의 정보에 대한 액세스가 계속 증가함에 따라 가능한 한 많은 유형의 사람들이 액세스 할 수 있도록하는 것이 중요해졌습니다.

접근성은 변장의 축복입니다

더 많은 청중에게 음식을 제공하는 것은 더 많은 일처럼 들리며, 접근성을 혁신의 장벽으로보고 싶어합니다. 그러나 최신 표준을 준수하는 것이 변장의 축복이 될 수 있습니다.

디자인 용어의 예로는 바디 카피에서 최소 글꼴 크기, 카피와 배경 사이의 상당한 대비 또는 터치 장치의 더 큰 링크 가능 영역이 필요하다는 요구가 포함될 수 있습니다.

장애에 관한 것이 아닙니다

내게 필요한 옵션은 일부 사용자가 암시하는 것처럼 장애를 수용 할뿐만 아니라 최신 기능과 향상된 기능을 모두 지원하지 않는 레거시 장치 및 브라우저 사용자에게도 해당됩니다. 이러한 표준을 인식하고 준수하면 설계 결정이 자연스럽게 줄어 듭니다.

5. 시도되고 테스트 된 패턴 사용

사실, 사용자는 수년간의 실습과 박람회에서 흡수 한 수백 가지의 일반적인 디자인 패턴을 준수 할 때 직관적 인 인터페이스를 찾습니다. 우리가 전형적인 금형에서 벗어나 새로운 땅을 밟기 시작하자마자, 새로운 패턴이 대중에게 완전히 직관적이되기까지 시간이 걸리는 것을 알 수 있습니다.

독창적 인 UI 패턴을 제작할 시간과 장소가 있지만 일반적인 기술과는 거리가 멀지 않습니다. 그 이유는 성공적인 것입니다.

은색 안감은 우리가 재발 명에 대해 덜 걱정하고 미학에 집중할 수 있도록합니다. 확립 된 패턴을 기반으로 독창적 인 작품을 만들 수 있습니다.

성공적인 디자인 패턴을 더 많이 알고 통합할수록 디자이너로서의 선택은 줄어 듭니다. 우리는 반드시 무엇이 효과가 있을지 고려할 필요는 없지만 무엇이 효과가 있을지를 고려합니다.

최종 노트

이러한 접근법 중 일부는 우리의 사고와 의사 결정을 개별적으로 크게 줄이지 않거나 디자인을 크게 개선하지 못할 수 있습니다. 그러나 좋은 피드백을받는 것과 함께 이들을 통합하면 더 나은 UI를 디자인하기가 훨씬 쉬워 질 수 있습니다.

트위터에 날 따라와