How to Turn Good Design Direction into a Good System

아이디어는 저절로 떠오르지 않습니다. 좋은 아이디어가 좋은 것으로 바뀌는 것은 아이디어 이전에 존재했던 구조와 시스템이 그것을 실현했기 때문입니다. 창조적인 공간에는 시스템이 좋은 아이디어가 죽는 곳이라는 신화가 있습니다. 그 혁신은 거의 항상 구조에서 벗어나는 것을 의미합니다. 이것은 진실에서 멀어질 수 없습니다. 디자이너가 자신의 작업에서 참신함의 역할을 어떻게 오해하고 있는지에 대해 알아야 할 모든 것을 알려주는 유독한 프레이밍입니다. 그러나 잠시 후 더 자세히 설명합니다. 구조와 시스템은 창의성을 짓밟고 모든 것을 동일하게 만들지 않습니다. 그들은 아름다움과 기술에서 효율성과 이익을 짜내지 않습니다. 그들은 그런 일을 할 수 있습니다. 그러나 그것은 그들이 실제로 원하는 것이 아닙니다. 구조와 시스템은 디자이너의 가장 중요한 도구일 뿐만 아니라 궁극적으로 디자인이 무엇인지 입니다 . 그것들은 새로운 아이디어가 이해되고 경험되는 것, 즉 만들어지는 것을 가능하게 만드는 것입니다 . 그러나 적시에 적용되는 경우에만 작동합니다. 내 경력의 이 시점에서 약 120명의 개인 디자이너와 ~150명의 개인 프로그래머, 개발자 및 엔지니어와 함께 일했습니다. 그들 모두는 좋은 생각을 가지고 있었습니다. 그들 중 몇몇은 그들이 만들도록 고용된 것을 출시하는 동안 그 좋은 아이디어를 유지할 수 있었습니다. 20년 동안 이것을 관찰하고 사람들이 그것을 통해 일하도록 도운 후에, 나는 근본 원인을 이해하게 된 것 같습니다. 이해해야 할 두 가지가 있습니다. 좋은 아이디어가 좋은 것이 되는 것을 막는 첫 번째는 대부분의 디자이너가 작업에서 아이디어, 구조 및 시스템의 균형을 오해 하고 있다는 것입니다. 두 번째는 적시에 구조와 시스템을 통합하지 않는 것입니다. 올바른 일을 적시에 수행한다는 개념 자체가 체계화된 구조입니다. 구조와 독립적으로 존재하는 아이디어는 없습니다. 어떤 것도, 경험도, 정말로 큰 시스템의 구조화된 부분이 아닌 현실의 한 구석도 없습니다. 적은 것보다 적은 것보다 적은 것에서 더 많은 것을 얻을 수 있습니다. 아이디어를 생성하는 데 사용되는 가치, 작업 및 시간의 일부는 나와 함께 일한 디자이너에 의해 거의 항상 과대 평가됩니다. 그들은 다양한 가능한 방향을 생성하는 데 며칠(때로는 몇 주!)을 보낼 것이며 결국 한두 가지 정도는 추구할 가치가 있습니다. 자, 이것이 필요할 수도 있습니다. 결국 저는 좋은 것을 만드는 방법은 많은 것을 만드는 것이라고 믿습니다 . (우리가 가장 먼저 만드는 것이 최고라고 가정하는 것은 주제넘은 생각입니다.) 그러나 제가 몇 번이고 관찰한 것은 첫 번째 창작 활동의 폭발이 가라앉고 방향을 잡으면 유사하게 집중되지 않은 창작 세대의 추가 폭발이 뒤따른다는 것입니다. 이런 일이 발생하면 초기 레이아웃이나 구성을 검토하면서 왜 그렇게 많은 새로운 아이디어가 존재하는지(매우 다양한 시각적 요소, 시각적 언어에 대한 다양한 측면 또는 다양한 유형의 이미지)가 있는지 묻고 디자이너들에게 전체 시각적 시스템을 수행할 수 있을 만큼 충분히 강력한 한두 가지로 다시 줄이도록 촉구합니다. 시각적 언어가 아이디어 밀도가 높을수록 체계화하고 이해하기가 더 어렵습니다. 이것을 "Less is more"라는 잘 알려진 격언으로 요약하기는 너무 쉽습니다. 그것은 절대적으로 올바른 생각이지만, 나는 종종 "더 많은 것에서 더 적은 것이 나올 수 있는 것보다 덜 쉬운 것에서 더 많은 것이 나올 수 있다"고 덧붙입니다. 이것은 아이디어의 체계화가 얼마나 중요한지 중요하고 미묘한 차이입니다. 그것을 이해하는 디자이너는 그들의 작품의 우아함으로 칭찬을 받습니다. 편집자가 필요 없는 디자이너. 아이디어 대 구조 비율 아이디어 창출 — 10% 좋은 아이디어는 아마도 디자인 프로젝트 노력의 약 10%를 차지할 것입니다. 좋아요. 10퍼센트 만 . 인터랙션 디자인 프로젝트에서 초기 디자인 방향은 일반적으로 요소 콜라주로 표현됩니다. 이것은 의도적으로 해체된 일관된 시각적 언어의 요소를 표현한 것입니다. 아이디어는 이러한 요소(색상, 모양, 타이포그래피, 이미지 등)가 어떻게 다양한 방식으로 함께 작동하고 특정 레이아웃을 승인하도록 요청하지 않고도 시각적 언어로 유권자의 편안함을 확보할 수 있는지 보여주는 것입니다. 지나치게 노력해서는 안 되며 탐색과 한계의 균형을 반영해야 합니다. 여기서 핵심은 일관성입니다. 특정 랜드마크를 나타낼 정도로 구체적이지 않으면서 모두 같은 세계의 일부처럼 느껴져야 합니다. 구조 - 20% 이를 지원하기 위한 구조 만들기, 즉 관심과 사용을 위해 일관된 풍경을 제공하는 페이지, 화면 또는 장면 만들기는 약 20%입니다. 이것은 우리가 우리 사물의 외부 지향 정보 아키텍처를 체계화하는 곳입니다. 인터랙션 디자인에서는 이를 프로토타이핑 또는 와이어 프레이밍이라고 부르는 경향이 있습니다. 우리는 여기서 구조에 전념하고 있지만 그 구조가 어떻게 보이는지는 아닙니다. 나는 20년 경력 전체에 걸쳐 정확히 같은 방식으로 프로세스의 이 부분을 시작했습니다. 도구가 변경되었습니다. 요점은 그렇지 않습니다. 프로토타입을 만들기 전에 의도한 경험이 의미가 있는지 확인합니다. 나는 누가 이것을 사용할 것인지를 고려해야 하고 그것이 정보와 행동의 측면에서 작용할 것으로 기대합니다. 인터랙션 디자인 프로젝트에서 저는 항상 매우 일반적인 화면으로 사전 프로토타입을 만들 것입니다. 저는 이것을 "블로킹"이라고 부릅니다. 왜냐하면 저는 블록을 사용하기 때문입니다. 큰 것들. 사물의 모양이나 가장자리에 구애받지 않고 정보와 상호 작용 지점을 배포할 수 있을 만큼 충분히 내 화면의 풍경을 분할하기 시작해야 합니다. 내 차단이 이해되면 공간의 정보 아키텍처를 보여주고 정보의 우선 순위와 가능한 작업을 시각적으로 표시하기에 충분한 세부 정보로 더 넓은 영역을 채우기 시작합니다. 열 기반 그리드를 설정하는 것이 기존 마크업 프레임워크로 시작하는 개발자에게 유용하다는 것을 알았지만 요소가 다른 규칙을 따르지 않는 경우 이를 사용하는 데 별 의미가 없습니다. 하위 구조 - 40% 정보의 분류, 요소 간의 연결(기능 및 개념 모두), 사용자 경험의 관리 계층을 고려하여 설계에서 하위 구조 통합은 실제로 40%입니다. 이것은 종종 디자이너가 완전히 잊거나 오해하는 단계입니다. 예를 들어 웹사이트를 디자인할 때 무엇이 ​​모듈화되고 무엇이 모듈화되지 않는지, 콘텐츠 유형이 데이터베이스에서 어떻게 구조화되는지, 정보가 기존 내부 및 외부 시스템과 어떻게 통합되는지, 콘텐츠 관리 시스템이 어떻게 구성될 것인지를 디자이너가 고려하는 단계입니다. 자신이 만든 것을 유지하기 위해 다른 사람이 사용할 수 있습니다. 이는 종합사물의 체계화. 얼마나 상세하고 얼마나 많은 협업이 필요하며 최종 제품의 강도, 확장성 및 전반적인 우아함에 얼마나 많은 영향을 미치기 때문에 노력과 가치의 가장 큰 부분입니다. 인터랙션 디자인 프로젝트에서 디자인된 구성 요소가 시스템 모듈이 되는 곳입니다. 여기서 기억해야 할 좋은 점은 Figma에서 구성 요소로 만들었다고 해서 개발자가 시스템 구성 요소, 콘텐츠 유형, 모듈 또는 Gutenberg Block 인 Wordpress의 용어. 설계 도구에서 구성 요소를 생성하면 설계 프로세스 내에서 쉽게 업데이트할 수 있습니다. 추가 구현에 대해 반드시 요구해서는 안됩니다. 여기서 디자이너는 고정된(예: "하드 코딩") 유동적인(예: 관리되는 콘텐츠) 디자인의 요소를 지속적으로 구별하는 것이 중요합니다. 이것을 최종 문서의 단계로 언급하는 것만으로는 충분하지 않습니다. 유동적인 디자인 요소가 모양, 크기 및 고정 여부에 관계없이 다른 요소의 경험을 어떻게 변경하는지 완전히 설명하려면 초기에 충분히 생각해야 합니다. 시각적 시스템 — 20% 최종 시각적 시스템 만들기 — 초기 아이디어를 외부 및 내부 구조에 결합한 결과인 완전한 시각적 언어 및 패턴 라이브러리 — 다음 20%입니다. 시스템(와이어프레임, 프로토타입, 분류 및 콘텐츠 계획)이 완전할수록 시각적 언어가 더 빠르고 자연스럽게 결합됩니다. 나는 디자이너가 스타일이 없는 시스템을 개선하는 데 더 많은 시간을 할애할 때 타이포그래피, 모양, 색상, 이미지 처리, 결합된 요소(예: 카드) 또는 상호 작용 세부 정보와 같은 다양한 시각적 요소를 시도하는 데 더 많은 시간을 할애하는 것을 관찰했습니다 . 대부분의 디자이너는 이러한 "고충실도" 디자인의 제품을 호출합니다. 이것은 앞의 두 가지가 잘 처리되지 않으면 진전이 이루어지지 않거나 시스템이 응집되거나 함께 유지되는 것을 방해하는 불필요한 새로운 생성을 많이 보기 시작하는 단계입니다. 다시 말하지만, 이것에 대한 나의 개인적인 프로세스는 20년 동안 변하지 않았습니다. 배치를 시작하기 전에 내 블록으로 돌아갑니다. 두 번째 단계 와이어프레임이 아니라 이전의 간단한 블록입니다. 다양한 요소 간의 그래픽 관계가 얼마나 흥미로운지를 기준으로 선택하여 화면 구조를 과도하게 복잡하게 만들지 않기 위해 그것들을 출발점으로 사용합니다. 이러한 일반적인 경계가 없으면 더 자세한 와이어프레임을 가이드로 사용하여 텍스트, 색상, 모양 및 이미지의 유혹이 심오합니다. 구조와 시각적 언어의 불일치는 거의 항상 기본 구조에서 시작하여 유지하지 않고 레이아웃을 더 예쁘고 참신하게 만들기 위해 레이아웃을 사용자 정의한 결과입니다. 화면이나 템플릿을 검토하고 헤드라인, 목록 또는 카드와 같은 항목이 뚜렷한 이유 없이 거의 모든 항목에서 다르게 취급되는 것을 발견하면 일반적으로 그 이유가 여기에 있습니다. 문서화 — 10% 마지막으로 시각 시스템의 문서화는 마지막 10%입니다. 사물의 구현 및 유지 관리에 필요한 문서는 점점 더 광범위해지고 있습니다. 그러나 사전에 구조와 시스템을 적절하게 활용한다면 그러한 문서를 작성하기 위한 노력은 상대적으로 최소화되어야 합니다. 그렇게 하면 기본적으로 이동하면서 문서화됩니다. 구성 파일을 "정리"하고 프로세스를 통해 "성공"하지 못한 많은 자료를 제거하는 데 많은 시간을 소비하는 경우 아이디어 생성 작업을 너무 확장한 결과일 수 있습니다. 구조를 충분히 강조하지 않습니다. 마찬가지로, 처음으로 다른 사람으로부터 피드백을 받았기 때문에 이 단계에서 컴포지션 파일을 수정하고 사용 상태 세부 정보를 추가하는 경우, 이는 아마도 충분히 제공되지 않은 결과일 것입니다(완전히 생략되지 않은 경우). 하부 구조 작업. 단계별로 체계화! 이 전체 에세이에서 한 가지를 얻는다면 체계화가 디자인의 엄격함이라는 점을 바랍니다 . 아무리 창의적이거나 유명하더라도 디자이너는 혼돈에 안주할 여유가 없습니다. 그리고 훨씬 더 철학적인 수준에서, 그 이전에 존재했던 아이디어의 상부 구조의 요소가 되지 않고는 어떤 아이디어도 존재하지 않습니다. 즉, 짜여 지지 않고는 어떤 아이디어도 경험의 일부가 되지 않습니다 . 패브릭의 기존 구조를 무시하면 걸림돌과 구멍이 생깁니다. 그것은 나쁜 디자인입니다. PS "사람들에게 보여주기 전까지는 아무것도 알 수 없습니다." IDEO 의 David Kelly는  이렇게 말했습니다. 피드백을 받는 것은 디자인 작업의 마지막 단계뿐만 아니라 가능한 한 자주 이루어져야 합니다. 적어도 제 생각에는 디자인 작업의 요소로 정량화하기가 훨씬 어렵기 때문에 위의 분석에서 별도의 요소로 포함하지 않았습니다. 피드백은 동료, 리뷰의 감독, 클라이언트, 사용자 또는 충분한 거리가 있는 경우 자신에게서 올 수 있습니다. 이 특정 구조와 시스템에서 눈에 띄게 누락된 것처럼 보이기 때문에 언급해야 할 필요성을 느꼈습니다. 구조화된 피드백은 품질 보증( QA ) 시스템 에서 형성됩니다 . 좋은 QA는 프로젝트의 주요 단계에서 이루어지며, 구체적으로 만들어진 물건의 종류와 만드는 데 사용된 기술의 종류에 따라 결정됩니다. 최고의 QA는 창의적인 프로세스와 의도적으로 거리를 둡니다. 결함을 가장 잘 확인하고 노출하기 위해 격리되어야 합니다. 나는 내 경력에서 아주 소수의 우수한 QA 전문가와 함께 일했으며, 그들 모두의 공통점은 엄격하고 극도로 상세하고 구조화된 시스템을 반복해서 따르는 능력이었습니다. 나는 스스로 그렇게 할 수 있는 디자이너를 만난 적이 없다. QA 에 대해 이야기하는 것은 좋은 아이디어가 구조에 따라 살거나 죽는다는 점을 강조하는 가장 쉬운 방법이 될 것입니다. 그러나 디자이너는 자신의 작업에서 경험한 품질을 완전히 보장할 수 없기 때문에 가능한 한 근접하기 위해 자신의 기술에 맞는 구조와 시스템을 사용하는 방법을 배우는 것이 더 중요합니다.