과거는 여전히 존재합니다 – 시대를 초월한 디자인의 개요

게시 됨: 2022-03-11

디지털 디자인 산업이 성숙해지고 있습니다. 확립된 모범 사례와 디자인 시스템의 출현으로 이제 우리가 만드는 제품의 더 긴 디자인 수명을 위해 노력하는 것이 가능합니다. 원 히트 불가사의가 아닌 디지털 클래식을 목표로 할 수 있습니다.

산업 디자인은 장수의 포스터 자식입니다. Vespa 스쿠터의 시대를 초월한 매력. 코카콜라 병의 아이코닉한 윤곽. Eames 라운지 체어의 우아한 각도. 산업 디자인 세계의 영원한 경이로움과 동등한 디지털 디자인이 과연 있을까요? 사용자 인터페이스가 라이카 카메라처럼 수십 년을 견딜 수 있습니까?

아마, 답인 것 같습니다. 물리적 개체는 일단 구축되면 존재하기 위해 도메인 이름을 갱신하거나 웹 표준을 따라갈 필요가 없습니다. 시대를 초월한 디자인은 시대를 초월한 기반 위에 구축되어야 하지만 디지털은 항상 변화하고 있습니다.

그러나 디지털 디자인의 저장 수명은 연장될 수 있습니다. 기본 기술이 계속 발전하는 동안에도.

시대를 초월한 디자인
디지털 디자인이 산업 디자이너들이 오랫동안 만들어온 문화를 형성하는 경이로움을 창조할 수 있다면 어떨까요?

시대를 초월한 디자인을 목표로

디자인 시스템이 폭발적으로 인기를 얻고 있는 것은 놀라운 일이 아닙니다. 세심하게 제작된 디자인 시스템은 가장 빠르게 진화하는 제품에도 시대를 초월한 명확한 원칙을 제공합니다. UI 구성 요소는 시간이 지남에 따라 변경될 수 있지만 제품의 느낌 은 제품이 성숙하더라도 수년 동안 일관되게 유지될 수 있습니다. 유연성과 수명. 윈윈입니다.

디지털 디자인 명예의 전당 후보

디지털 디자인의 수명은 헛된 꿈이 아닙니다. 이것이 우리의 현재 현실이며 다른 사람들이 보여주듯이 인터페이스가 고급 와인처럼 숙성될 수 있습니다.

Google의 머티리얼 디자인(2014)

머티리얼 디자인의 등장은 디지털 디자인의 전환점이 되었습니다. 처음으로 Google과 같은 주요 업체가 처음부터 디자인 언어를 만들었습니다. 뿐만 아니라 디자이너가 자신의 작업에서 언어를 구현하기 위한 지침과 도구를 제공하여 권한을 부여했습니다.

좋은 UI
Material Design의 구성 요소는 물리적 세계의 미묘함을 참조합니다.

종이에서 영감을 받은 Material Design은 디지털 세계를 위한 디자인에 대한 우리의 생각에 혁명을 일으켰습니다. Material Design은 그림자 및 오래된 애니메이션 원칙과 같은 물리적 세계의 특성을 차용하여 GPU 팬을 회전시키지 않고 친숙한 시각적 신호를 기반으로 합니다. 더 이상 브라우저 탭을 멈추게 하는 가죽 질감이나 극도로 사실적인 반사를 복제하지 않습니다.

요약: 실제 세계는 디지털 디자인에 영향을 미칠 수 있지만 기본 기술의 특성에 적응해야 합니다.

GOV.UK (2013)

자체 종합 디자인 시스템을 갖춘 GOV.UK는 최초의 사용자 중심 정부 웹사이트 중 하나였으며 접근성과 정보 디자인을 지도에 담았습니다.

장수 디자인
GOV.UK는 사용성에 중점을 둔 최초의 정부 웹사이트 중 하나입니다.

촌스럽다고 할 수도 있겠지만 디자인 팀은 결코 미학을 목표로 삼지 않았습니다. 대신 초점은 정보 디자인이었습니다. 사용자에게 최소 시간에 작업을 완료하는 데 필요한 정보를 제공합니다. 아무 장식도 소란도 없습니다. 이러한 급진적인 단순함이 GOV.UK를 인스턴트 클래식으로 만들었습니다.

요점: 사용자 인터페이스는 성공하기 위해 예쁘지 않아도 됩니다.

iOS 7(2013)

2007년의 오리지널 iOS는 그 자체로 진입할 가치가 있지만, Apple이 스큐어모피즘에 작별을 고하고 플랫 디자인을 수용한 것은 iOS 7이 되어서였습니다. 작별인사, 나뭇결이여. 안녕하세요, 놀라운 단순함입니다. iOS가 성장했습니다.

효과적인 UI
iOS 6의 스큐어모피즘과 iOS 7의 평면 디자인 비교.

공정하게 말해서, Android는 평면 디자인의 구현으로 앞장섰고 틀림없이 더 나은 애니메이션을 선보였습니다. 그러나 Apple은 나중에 Mac과 iPad 운영 체제로 확장된 디지털 디자인 미학을 따라잡아 만들었습니다.

Apple은 iOS 7에서 스큐어모픽 효과를 완전히 포기하지 않았습니다. 메모 앱은 여전히 ​​미묘한 종이 질감을 특징으로 하며 날씨 앱은 일광 및 날씨 조건을 반영하도록 배경을 업데이트합니다. 그러나 2D 인터페이스는 더 이상 그렇지 않은 것으로 강제되지 않습니다.

요점: 평면 디자인은 2D 사용자 인터페이스의 핵심입니다.

트렐로 (2011)

사용성 향상을 제외하고 디지털 앱의 Swiss Army Knife는 거의 10년 동안 거의 변하지 않았습니다. 경쟁 제품이 "모든 기능"을 약속하면서 등장했지만 Trello는 그 기반을 굳건히 했고 단순함 때문에 인기를 유지했습니다.

현재의 디자인 트렌드
Trello는 오늘날의 많은 디지털 제품에 뒤따르는 기능을 가득 채우는 추세를 거부했습니다.

기능에 과부하가 걸리는 대신 Trello는 대다수의 UI를 혼잡하게 만들지 않으면서 일부 사용자의 틈새 요구 사항을 충족할 수 있는 플러그인 에코시스템을 제공했습니다. Trello는 디자인의 80/20 규칙(일명 "파레토 원칙")의 포스터 자식입니다.

요점: 신중하게 반복하고 80/20 규칙을 적용하십시오.

구글 크롬(2008)

Volkswagen의 태그라인이 "Das Auto"라면 Chrome은 "The Web Browser"여야 합니다. Google은 일반적인 웹 브라우저를 사용하여 필수적이지 않은 모든 것을 제거하고 놀라운 성능을 구현하여 시장을 압도했습니다.

장수를 위한 디자인
Chrome은 고성능을 위해 불필요한 모든 기능을 제거했습니다.

여기서 Google의 주요 공헌은 앞으로의 모든 디지털 제품에 성능을 필수 요소로 만드는 것입니다. 하드웨어와 브라우저의 한계를 이해하고 부드럽고 매끄러운 60fps를 위해 노력하는 것이 디지털 디자인을 인쇄나 산업 디자인과 근본적으로 다른 점입니다. Chrome의 성공은 뛰어난 사용자 경험을 위한 성능의 중요성에 대한 증거입니다.

요약: 단순성과 성능만으로도 장기적으로 승리할 수 있습니다.

베이스캠프 (2003)

Basecamp는 실리콘 밸리의 벤처 캐피털 펀딩, 기하급수적인 성장, 조기 철수라는 도그마에 반대하여 이름을 만들었습니다. 지속 가능하고 장기적인 제품에 대한 그들의 헌신은 Basecamp 3의 디자인에 반영됩니다.

디자이너는 시간의 테스트를 견디는 제품을 만드는 데 도움을 줄 수 있지만 CEO가 우아하게 노화되도록 설계된 제품을 높이 평가하지 않는다면 무력합니다. 오늘날의 디지털 제품 제조업체 중에서 신중한 의사 결정을 실행하거나 모든 새로운 트렌드를 쫓는 것을 거부하는 회사는 드뭅니다. 베이스캠프는 예외다.

요약: 지속 가능한 비즈니스는 지속 가능한 제품을 만듭니다.

디자인 트렌드
Basecamp의 디자인 수명은 신중한 의사 결정에 대한 회사의 헌신에 뿌리를 두고 있습니다.

구글(1998)

Google 홈페이지의 첫 번째 반복을 돌이켜 보면 이제 세계적으로 인정받고 틀림없이 사용할 수 있는 상징적인 레이아웃을 만드는 데 약 1년이 걸렸습니다.

구글의 홈페이지는 20세기 말의 누군가가 현재로 순간이동해 UI와 상호작용하고 무엇이 변했는지조차 눈치채지 못하는 희귀한 디지털 제품이다.

요점: 훌륭한 제품은 재창조하지 않고 진화할 수 있으며 여전히 시장 선두 위치를 유지할 수 있습니다.

디지털 디자인 트렌드
Google의 홈페이지는 초기 버전과 매우 유사합니다.

2001: 스페이스 오디세이 (1968)

Stanley Kubrick의 걸작은 헐리우드 영화와 미래 지향적인 비전을 동일시했습니다. 미래에 대한 예측은 일반적으로 현재에 의해 왜곡되어 나중에 보면 우스꽝스러워 보이는 진부한 아이디어를 낳습니다. 터치 스크린 디스플레이, iPad와 유사한 태블릿 및 음성 제어 인터페이스의 예측과 같은 개념이 2001: A Space Odyssey 에서 어떻게 상자를 벗어났는지 놀랍습니다.

그래픽 디자인 스타일
2001: Neil Armstrong이 인류 최초로 달에 발을 디디기 1년 전에 A Space Odyssey 가 출시되었습니다.

놀랍게도 UI 디자인은 Xerox PARC가 그래픽 사용자 인터페이스의 첫 번째 반복 실험을 시작하기 전에 5년이 더 걸리더라도 여전히 관련성이 있어 보입니다. 이 테스트는 나중에 Microsoft와 Apple 운영 체제의 기초가 될 테스트입니다.

그래픽 트렌드
50년이 지난 후 Stanley Kubrick의 UI는 시간의 테스트를 견뎌냈습니다.

영화의 컨셉 인터페이스는 평면 디자인 미학과 유사한 것을 특징으로 했습니다. 애플이 스큐어모피즘을 버리고 그 뒤를 따를 때까지 40년 이 더 걸렸다. 의도적인 예측이든 당시의 그래픽 기능의 제한이든 간에, 인터페이스의 얼핏은 오늘날까지 진실되게 울려 퍼집니다.

요약: Stanley Kubrick은 천재입니다.

지속적인 디지털 디자인을 위한 원칙

"시간을 초월한" 디지털 인터페이스를 만들기 위한 공식화된 원칙은 존재하지 않습니다. "빠르게 움직이고 문제를 해결하라"는 모토로 운영되는 업계에서는 놀라운 일이 아닙니다. 그러나 지침 원칙이 있다면 보편적이고 기술 적응력이 있으며 단순하고 실용적이어야 합니다.

보편성

디지털 제품의 장기적인 생존을 장려하는 한 가지 방법은 가능한 한 가장 많은 사람들이 사용할 수 있도록 하는 것입니다. 이는 접근성, 성능 및 포괄성을 위한 설계를 의미합니다. 제품이 널리 보급됨에 따라 다국어 경험이 제공되어야 합니다.

기술 적응

기술 적응형 설계는 기반 기술에 창의적인 비전을 강요하기보다는 기반 기술과 협력하여 작동합니다. 웹 디자인에서 이는 프레임 속도를 10fps로 낮추거나 HTML, CSS 및 JS에서 물리적 표면을 다시 생성하지 않는 애니메이션을 포기하는 것을 의미합니다.

넌센스 심플

이것은 제품이 수명을 다하기 위해 제품을 축소하거나 특정 수의 기능으로 제한해야 한다는 말은 아닙니다. 그러나 이는 기능이 전체적 경험을 염두에 두고 의도적으로 선택되었음을 의미합니다. 80/20 법칙을 적용하고 의심스러울 때는 단순함의 측면에서 오류를 범하십시오.

바쁜

디지털 디자인은 수명 측면에서 식물과 많은 공통점이 있습니다. 식물과 마찬가지로 생존을 위해 끊임없이 물을 주어야 합니다. 구글이 파산하고 문을 닫는다면 그 제품도 함께 문을 닫을 것이다. 실제 제품에는 해당되지 않습니다. 더 이상 존재하지 않는 국가에 더 이상 존재하지 않는 회사에서 만든 자동차는 잘 관리되면 여전히 사용할 수 있습니다. 산업 디자이너는 자신의 작업이 수명을 연장할 것이라고 확신할 수 있습니다. 디지털 디자이너에게는 그렇지 않습니다.

또한 많은 스타트업이 생존 모드에 있습니다. 인터페이스에 수명을 연장하는 방법을 탐색할 리소스가 없습니다. 대부분의 경우 디지털 디자이너는 자신의 작업이 늙기 전에 소멸되는 것을 보게 됩니다.

그런 상황에서 장수는 디지털 제품 디자인의 첫 번째, 두 번째, 다섯 번째 우선순위가 아닙니다. 제품이 노화에 대해 걱정할 수 있으려면 처음 몇 년을 통과해야 합니다.

그러나 작은 결정이 제품을 올바른 방향으로 이끌 수 있습니다. 시간이 충분할 때 일관된 디자인 시스템을 만드십시오. 시간이 부족하면 기존 시스템을 확장하거나 사용자 정의하십시오. 모범 사례를 따르십시오. 80/20 원칙을 적용합니다. 이는 급변하는 고압 환경에서도 디지털 디자인이 수명을 연장할 수 있는 작은 방법입니다.

장수를 위한 디자인

디지털 디자이너는 앞으로 몇 년 동안 관련성을 유지하는 작업을 만드는 것의 가치를 인식하는 것이 현명할 것입니다. 아마도 업계는 최신 트렌드에 집착하는 대신 시간의 시험을 견뎌낸 작업에 박수를 보내야 합니다.

사용자 인터페이스는 견고하고 오래된 Vespa 스쿠터의 향수를 불러일으키는 매력을 결코 간직할 수 없지만 디지털 제품은 여전히 ​​삶을 개선할 수 있습니다. 오래 할 수록 앞으로 수십 년 동안 지속되는 유산을 남길 가능성이 커집니다.


당신의 생각을 알려주세요! 아래에 귀하의 생각, 의견 및 피드백을 남겨주세요.

• • •

Toptal Design 블로그에 대한 추가 정보:

  • 디자인의 게슈탈트 원리 탐구
  • 디자인 원칙과 중요성
  • 검증된 UX 법칙(인포그래픽 포함)
  • 예술 대 디자인 – 시대를 초월한 논쟁
  • 가비지 만들기 중지: 오래 지속되는 인터페이스 설계 가이드