콘텐츠 우선 프로토타이핑

게시 됨: 2022-03-10
요약 ↬ 콘텐츠는 디지털 경제의 핵심 상품입니다. 우리가 고급스러운 경험을 하기 위해 만드는 것은 금이며, 충성도 프로그램과 상향 판매에 포함된 다이아몬드입니다. 그러나 디자이너로서 우리는 종종 사실 이후에 그것을 연결합니다. 우리는 상호 작용과 시각적 디자인의 프로토타입을 완전히 소진시키지만 나중에 "진짜 단어"를 넣을 수 있다는 점을 인정합니다. 더 나은 방법이 있습니다. 점점 더 우리가 만드는 디지털 상품은 콘텐츠, 기능, 코드 및 의도의 동적 시스템 내에서 작동합니다. 당사의 제품과 서비스는 방문자 행동과 이해를 형성하기 위해 노력하는 파트너 웹사이트, 소셜 미디어 피드 및 수많은 전자 수집기로 표류 및 유출됩니다. 시스템은 시스템을 기반으로 하며, 간단히 말해서 우리는 정신을 황홀하게 만드는 거대한 규모를 함께 엮었습니다.

콘텐츠는 디지털 경제의 핵심 상품입니다. 우리가 고급스러운 경험을 하기 위해 만드는 것은 금이며, 충성도 프로그램과 상향 판매에 포함된 다이아몬드입니다. 그러나 디자이너로서 우리는 종종 사실 이후에 그것을 연결합니다. 우리는 상호 작용과 시각적 디자인의 프로토타입을 완전히 소진시키지만 나중에 "진짜 단어"를 넣을 수 있다는 점을 인정합니다. 더 나은 방법이 있습니다.

점점 더 우리가 만드는 디지털 상품은 콘텐츠, 기능, 코드 및 의도의 동적 시스템 내에서 작동합니다. 당사의 제품과 서비스는 방문자 행동과 이해를 형성하기 위해 노력하는 파트너 웹사이트, 소셜 미디어 피드 및 수많은 전자 수집기로 표류 및 유출됩니다. 시스템은 시스템을 기반으로 하며, 간단히 말해서 우리는 정신을 황홀하게 만드는 거대한 규모를 함께 엮었습니다.

SmashingMag에 대한 추가 정보:

  • 신속한 프로토타입 테스트를 위한 설계 최적화
  • 올바른 프로토타이핑 도구 선택하기
  • 반응형 웹 디자인의 콘텐츠 프로토타이핑
  • 사용자 인터페이스 프로토타입 부활

우리는 과거에 간단한 시스템(정적 웹사이트와 인트라넷을 생각해 보십시오)을 알아내는 데 꽤 능숙했지만 대규모 동적 시스템은 훨씬 더 복잡하고 예측하기가 훨씬 더 어려운 것으로 나타났습니다. 시스템이 성장함에 따라 시스템은 기하급수적으로 더 복잡해지고 복잡해짐에 따라 그들의 행동은 점점 더 비선형적이 되어 우리 불쌍한 원숭이가 예측하기 어려워집니다. 대규모 시스템에서 소수점 이하 천 번째 소수점의 반올림 오류는 결과를 근본적으로 변경할 수 있습니다(Mitchell 33). 인터넷이 1조 개의 노드에 접근함에 따라 이것이 우리 모두가 지금 설계하는 세상입니다.

점프 후 더! 아래에서 계속 읽기 ↓

그러나 우리에게 익숙한 이러한 단순한 시스템은 보다 복잡한 공간을 설계하는 열쇠를 제공할 수 있습니다. 시스템 이론가인 John Gall이 말했듯이 "작동하는 복잡한 시스템은 작동하는 단순한 시스템에서 진화한 것이 항상 발견됩니다." 디지털 디자인의 공간에서 콘텐츠, 구조 및 의미 생성의 가장 단순한 동적 시스템이 기본 수준에서 의도한 대로 작동하는지 확인하면 의도한 대로 작동하는 더 크고 더 복잡한 시스템을 위한 토대를 마련할 수 있습니다.

디자이너로서 우리가 복잡성을 계속 유지할 수 있는 한 가지 방법은 콘텐츠를 초기에 프로토타이핑 프로세스로 가져오는 것입니다. 콘텐츠 우선 접근 방식은 콘텐츠의 제약과 기회에 더 일찍 직면하고 주요 디자인 결정이 내려지기 전에 콘텐츠에 굶주린 사용자와 함께 제안된 솔루션을 기능적으로 테스트하도록 권장합니다.

이 기사에서는 간단한 오픈 소스 도구 세트를 사용하여 첫날부터 프로토타이핑 프로세스에 실제 동적 콘텐츠를 도입하는 방법을 보여 드리겠습니다. 이 접근 방식을 사용하면 프로젝트의 맨 처음부터 사용자가 콘텐츠를 이해하는 방법에 집중하고 이해의 기초 위에 구조적, 시각적 및 기술적 요소를 구축할 수 있습니다.

콘텐츠용 화이트 박스 모델

시스템 연구자들이 동적 시스템의 동작을 이해하기 위해 사용하는 도구 중 하나를 "화이트 박스" 모델이라고 합니다. 시스템 학자인 Gerald Weinberg는 블랙박스 모델의 동작이 "완전히 숨겨져 있는" 반면 화이트 박스 모델의 동작은 "완벽하게 드러났습니다"라고 썼습니다. 복잡한 시스템의 경우 이러한 투명성이 중요합니다. Weinberg는 추가로 "가장 단순한 시스템이라도 때때로 개발자에게 놀라움을 포함합니다"(172)고 말합니다.

콘텐츠 우선 프로토타이핑의 목표는 콘텐츠, 내부 구조 및 지원 정보 아키텍처에 대한 화이트 박스 모델을 만드는 것입니다. 이를 통해 최종 사용자가 디지털 시스템이 제공하는 구조화된 콘텐츠에서 의미를 구축하는 방법을 설계 프로세스 초기에 발견할 수 있습니다. 콘텐츠 시스템의 구조를 핵심에서 올바르게 파악하는 데 시간을 할애함으로써 우리는 작동하는 이러한 단순한 시스템이 작동하는 더 크고 복잡한 시스템에 통합될 수 있는 단계를 설정합니다.

디지털 콘텐츠용 화이트 박스를 만들려면 다음 세 가지를 고려해야 합니다.

  • 콘텐츠의 유형과 목적에 따라 다양한 세부 수준의 콘텐츠 패키지로 구성된 콘텐츠 자체 .
  • 구조 , 로컬 페이지 또는 화면 수준과 글로벌 웹사이트 또는 애플리케이션 수준 모두에서;
  • 우리 콘텐츠가 궁극적으로 소비될 상황과 자세(데스크톱, 태블릿 또는 전화)에 대한 사용자 참여 .

"완벽하게 보이는" 상태를 유지하려면 이 모델이 기능면에서 투명해야 디자인 팀 구성원이 모델이 그렇게 작동하는 이유를 이해할 수 있습니다. 이 마지막 부분(사용자 참여와 결합된 투명성)은 화이트 박스 모델에 매우 중요합니다. 우리는 단순히 기능을 시연하기 위해 프로토타입을 구축하는 것이 아니라 단어와 우리가 사용하는 구조는 의도한 청중이 해석합니다.

콘텐츠 우선 프로토타이핑 접근 방식은 기존 콘텐츠를 디자인할 때 유용하지만 콘텐츠 생성 과정에서 편집 팀을 참여시키는 좋은 방법이기도 합니다. 프로젝트 초기에 사용자에게 실제 단어, 이미지 및 자산을 제공하면 모든 사람이 프로젝트 목표를 달성하기 위해 미세 조정, 조정 또는 회전할 시간을 가질 수 있습니다. 프로젝트 계획이 후기 작성 전략을 따르는 것이라면 콘텐츠 우선 프로토타이핑은 사용자 앞에서 몇 가지 콘텐츠 변형을 얻은 다음 이해 관계자 앞에서 사용자 반응을 얻을 수 있는 기회를 제공합니다.

콘텐츠 우선 프로토타이핑 프레임워크

위에서 설명한 원칙과 목표를 가지고 이러한 종류의 프로토타입을 만들기 위한 시작 프레임워크를 만들었습니다. 시스템 사고 자체의 정신에서 이 도구는 각각 간단한 기본 작업을 잘 수행하는 더 간단한 시스템의 느슨한 결합에 의존합니다.

이 프레임워크를 위해 Excel, Jekyll, ZURB Foundation 및 Browsersync를 조합하고 Gulp 스크립트로 모두 연결했습니다. 저는 이러한 특정 애플리케이션과 프레임워크를 선택했습니다. 널리 사용 가능하고, 오픈 소스(대부분)이며, 지원 커뮤니티가 활발하고 문서가 훌륭하기 때문입니다.

콘텐츠 우선 프로토타이핑 프레임워크
콘텐츠 우선 프로토타이핑 프레임워크(큰 버전 보기)

GitHub의 프로젝트 페이지에서 아래에 설명된 예제 프로젝트의 사본과 콘텐츠 우선 프로토타이핑 프레임워크 스타터 키트를 다운로드할 수 있습니다. 조각이 어떻게 서로 맞물리며 각각이 하는 일을 살펴보겠습니다.

뛰어나다

Excel 또는 XLSX 형식으로 저장하는 모든 스프레드시트 프로그램은 구조화된 콘텐츠 및 분류 시스템을 만들고 편집하는 데 사용됩니다. 문서를 저장할 때마다 콘텐츠 세트의 각 패키지(스프레드시트에서 행으로 표시됨)는 Jekyll 페이지와 JSON 문서로 내보내집니다. 이를 통해 콘텐츠에서 페이지 작업과 전역 작업을 모두 실행할 수 있고 단일 "저장" 명령으로 콘텐츠 변경 사항을 전체 웹사이트에 전파할 수 있습니다.

지킬

Jekyll은 오픈 소스 정적 웹 사이트 생성기이며 콘텐츠 패키지, 페이지 및 카테고리 간의 동적 구조를 명확하게 표현하는 데 사용됩니다. Jekyll은 스프레드시트에 저장한 내용을 변수로 나타내고 해당 변수에 대한 연산을 수행하여 구조를 생성할 수 있습니다. Jekyll은 또한 조건부 논리를 적용하기 위한 "if/then" 태그와 콘텐츠 세트를 순환하고 필터링하기 for 루프를 제공합니다.

기초

오픈 소스 모바일 우선 프론트 엔드 프레임워크인 ZURB Foundation은 정보 계층 구조를 명확히 하고 반응형 동작을 구조화하는 데 사용됩니다. Foundation의 그리드, 스타일 정의 및 반응형 동작을 사용하면 HTML 요소에 클래스를 적용하기만 하면 거의 모든 표준 웹 레이아웃 패턴을 만들 수 있습니다.

브라우저 동기화

마지막으로 Browsersync는 프로토타입을 브라우저에 제공하고 변경 시 CSS와 페이지를 업데이트합니다. 또한 Browsersync를 사용하면 동일한 네트워크에 연결된 모든 장치에서 프로토타입에 액세스할 수 있습니다. 즉, 랩톱에서 편집할 때 휴대폰과 태블릿에서 자동 업데이트를 볼 수 있습니다.

이러한 도구를 함께 연결하면 최종 프로덕션 환경을 구성하는 동적 시스템과 유사한 환경에서 프로토타입을 구축할 수 있지만 이동해야 할 때 속도를 저하시키는 데이터베이스, 클라우드 서비스 및 네트워크 대기 시간을 겪지 않아도 됩니다. 빨리 아이디어를 시도하십시오.

여기에 코드가 포함되어 있기 때문에 패닉 상태인 경우…

당황하지 마세요. 이러한 도구는 디자이너 친화적이며 우수한 지원 커뮤니티를 보유하고 있습니다. 아이디어를 실현하기 위해 프론트엔드 개발자가 될 필요는 없습니다. HTML과 CSS의 기본을 알아야 합니다. 이러한 언어는 어렵지 않습니다. 언어를 배운다고 해서 좋은 디자인 작업을 수행하는 능력이 손상되지는 않습니다. 서체 디자인의 전설 Erik Spiekermann은 “코드를 이해하고 코드를 이해하려면 적어도 코딩을 하지 않는 경우 배워야 합니다. 코드는 100년 전의 기본 개념이기 때문입니다." 시작하는 가장 좋은 방법은 잠수하는 것입니다.

콘텐츠 우선 프로토타이핑의 예: Green Lake 커뮤니티 센터

콘텐츠 우선 프로토타이핑이 실제로 어떻게 보이는지 더 잘 이해하기 위해 실제 세계에서 디지털 콘텐츠 컬렉션을 가져와 보겠습니다.

다음은 시나리오입니다. Green Lake Community Center는 Green Lake 지역의 커뮤니티 구성원에게 수업, 프로그램 및 이벤트를 제공합니다. 불행히도 현재의 모든 수업, 프로그램 및 이벤트 정보는 PDF를 통해서만 온라인으로 제공되며, 이는 센터의 고정 너비 데스크톱에 최적화된 웹사이트에서만 볼 수 있습니다. 보다:

Green Lake Community Center 코스 목록
Green Lake Community Center의 코스 목록 (큰 버전 보기)

휴대폰을 통해 수업, 프로그램 및 이벤트 정보에 액세스하려는 커뮤니티 회원들에게 다가가기 위해 센터는 모바일 우선 프로그램 웹사이트를 개설하기로 결정했습니다. 이 이니셔티브는 궁극적으로 공원 및 레크리에이션을 위한 도시 전체의 반응형 웹사이트를 위한 촉매 역할을 할 것입니다.

다른 디자인 프로젝트와 마찬가지로 저는 경험적 및 경쟁적 분석으로 시작하여 사용 가능한 트래픽 및 사용자 데이터를 살펴보겠습니다. 이해 관계자와 최종 사용자가 있으면 그들과도 반드시 이야기하겠습니다. 웹사이트의 목적에 대해 잘 이해하고 있다고 생각되면 종이에 대한 기본적인 고급 정보 아키텍처 및 사용자 인터페이스 아이디어를 살펴보겠습니다.

스케치북 탐색
스케치북 탐색(큰 버전 보기)

초기 디자인 접근 방식이 형성되기 시작하면 콘텐츠 우선 프로토타이핑 워크플로를 사용하여 초기 아이디어를 얻을 수 있습니다. 더 중요하게는 이러한 아이디어가 제공할 콘텐츠를 궁극적으로 소비될 컨텍스트로 가져올 수 있습니다. 이 경우 브라우저. 이 프로세스가 어떻게 보이는지 자세히 살펴보겠습니다.

콘텐츠 캡처

이 예에서는 콘텐츠 우선 프로토타이핑 프레임워크 스프레드시트에서 캡처한 구조화된 콘텐츠가 _data 파일을 저장할 때마다 페이지 템플릿에 자동으로 기록되는 방식을 볼 수 있습니다. 여기서는 "카탈로그" 시트를 사용하여 콘텐츠를 구성했습니다. "제목", "설명", "카테고리" 및 "태그" 변수는 이미 페이지 템플릿에 포함되어 있으므로 해당 값이 즉시 업데이트됩니다. 원하는 만큼 콘텐츠 행에 다른 열을 추가할 수 있습니다. 템플릿에 해당 변수를 포함해야 합니다(자세한 내용은 아래 참조).

"디렉토리" 및 "피드" 시트도 스타터 키트에 포함되어 있으며 각각의 콘텐츠 유형에 대해 다른 범주(열)를 포함합니다. 각 시트는 콘텐츠를 자체 폴더(이 경우 "카탈로그", "디렉토리" 및 "피드")와 자체 JSON 파일로 내보냅니다. 필요한 만큼 다른 시트를 추가할 수 있습니다. Jekyll 구성 파일을 업데이트하여 시트를 가져올 수 있도록 하십시오(자세한 내용은 "Jekyll Data Pages Generator" 플러그인 설명서 참조).

더 많은 콘텐츠 패키지 추가

콘텐츠 패키지(스프레드시트의 행)를 추가하면 새 페이지가 프로토타입에 자동으로 추가됩니다. 각 행은 단일 페이지를 나타내고 해당 행의 각 열은 Jekyll이 페이지를 빌드할 때 템플릿에 채우는 변수를 나타냅니다. 이 예에서 "커뮤니티 센터" 카탈로그의 콘텐츠는 상당히 균일하지만 항목 설명의 길이가 매우 다양하다면 해당 변형이 페이지 레이아웃에 어떤 영향을 미치는지 쉽게 확인하고 경험할 수 있습니다. 그런 다음 콘텐츠를 다르게 청크하거나 요약 또는 슬러그와 같은 새로운 요소를 추가하기로 결정할 수 있습니다.

또한 이 시스템을 사용하면 레이블, 범주 및 태그를 쉽게 실험할 수 있습니다. "범주" 열의 값을 변경하여 다양한 아키텍처 접근 방식이 주어진 콘텐츠를 쉽게 찾는 사용자의 능력에 어떤 영향을 미치는지 테스트할 수 있습니다. 예를 들어 이 예에서는 클래스 유형과 참가자의 연령 그룹을 기반으로 조직 시스템을 만들었습니다. 이를 통해 프로토타입이 형성될 때 메뉴와 홈 페이지에서 다양한 탐색 접근 방식을 쉽게 테스트할 수 있습니다.

HTML로 구조 및 계층 추가

콘텐츠가 제 위치에 있으면 그 구조가 사용자에게 이해가 가도록 해당 콘텐츠를 마크업에 래핑하기 시작합니다. 여기에서 변수를 텍스트처럼 취급하고 "플랫" HTML 파일에서 텍스트를 마크업하는 것처럼 마크업합니다. 여기서 결과는 꽤 예측 가능해야 합니다(좋은 일입니다).

Jekyll의 템플릿 시스템은 사용자가 만든 페이지 템플릿을 가져와 헤더와 탐색 아이콘이 포함된 전역 템플릿으로 래핑합니다. 이것이 "layout: default"가 의미하는 것입니다. 이 템플릿의 래퍼로 "default" 템플릿을 호출합니다. 하나 또는 두 개 이상의 템플릿 수준이 일반적으로 필요하지 않지만 원하는 만큼 템플릿을 중첩할 수 있습니다. 페이지 목록 및 글로벌 링크와 같은 반복되는 요소를 수용하기 위해 웹 사이트가 렌더링될 때 템플릿에 특정 코드 조각을 삽입하는 "포함"을 사용할 수도 있습니다. 템플릿 및 포함에 대한 자세한 내용은 Jekyll의 공식 문서를 확인하십시오.

Jekyll의 마크업 태그로 로직 추가

Jekyll을 사용하면 템플릿 시스템에 특정한 기본 태그를 포함하여 기본 로직을 추가할 수 있습니다. 여기에서 for 태그를 사용하여 Green Lake Community Center의 클래스 목록(위의 여러 콘텐츠 패키지를 추가할 때 생성됨)을 순환하고 목록의 각 커뮤니티 센터 클래스를 링크로 렌더링합니다.

if 문을 사용하여 조건을 만들 수도 있습니다. 여기에서는 현재 있는 클래스 페이지에 대한 링크를 숨기기 위해 if 문을 사용하고 있습니다.

머리가 폭발했다면 당황하지 마십시오. 논리를 추가하는 것은 일종의 고급 기능입니다. 콘텐츠 변수와 HTML을 고수하면 프로토타입이 제대로 작동합니다. 그러나 Jekyll의 템플릿 시스템은 사람이 읽기 쉽고 선택하기 쉽습니다. 기본 조각이 작동하는 방식에 대한 제작자의 빠른 소개를 확인하십시오.

Foundation의 CSS로 스타일 및 반응형 동작 추가

HTML 구조의 첫 번째 초안이 준비되면 CSS 클래스를 포함하고 문서를 저장하여 프로토타입에 스타일을 추가할 수 있습니다. 이미 스타터 키트에 연결된 ZURB Foundation의 프론트엔드 프레임워크는 다양한 웹 및 기본 애플리케이션 패턴에 대한 스타일 클래스를 제공합니다. 여기에 표시된 예에서는 단순히 두 개의 다른 클래스를 드롭함으로써 모바일 프로토타입에 더 "탭하기 쉬운" 느낌을 주고 시각적 계층 구조에 대한 훨씬 더 명확한 감각을 도입했습니다. 이러한 변경 사항은 이 템플릿을 사용하는 모든 콘텐츠에 자동으로 전파됩니다.

Foundation을 사용하면 모바일 우선 반응 동작을 쉽게 포함하고 수십 개의 미리 빌드된 레이아웃, 컨테이너 및 미디어 구성 요소를 사용할 수 있습니다. 모두 CSS이기 때문에 모든 것을 자신의 취향에 맞게 수정하고 미세 조정할 수 있습니다. 이 예에서는 Foundation의 기본 색상 팔레트를 "흑백 와이어프레임" 스타일로 수정했지만 Foundation을 원하는 스타일로 조정할 수 있습니다. 문서나 자습서를 찾아보거나 수업을 수강하여 Foundation 사용에 대해 자세히 알아보세요(수업은 훌륭하지만).

조기에 피드백을 받고 진행하면서 수정

콘텐츠가 준비되면 구조의 여러 변형을 쉽게 만들고 테스트할 수 있습니다. 레이블, 카테고리, 키워드 및 기타 메타데이터는 콘텐츠 스프레드시트에서 직접 변경할 수 있습니다. 마찬가지로 페이지 구조, 흐름 및 표시의 변형은 Jekyll 템플릿의 대체 버전을 만드는 문제일 뿐입니다. 이러한 모든 변경 사항은 "저장"을 누르는 순간 프로토타입 전체에 즉시 적용됩니다.

Green Lake Community Center 모바일 홈 화면의 대체 버전
Green Lake Community Center 모바일 홈 화면의 대체 버전 (큰 버전 보기)

Green Lake Community Center 프로토타입의 첫 번째 버전을 완성하기 위해 모바일 홈 페이지의 세 가지 변형을 만들었습니다. 이 경우 내가 해야 할 일은 홈 페이지 템플릿의 요소를 재정렬하고 두 탐색 요소(즉, 전체 너비 버튼과 이미지 타일)에 대한 데이터 소스를 바꾸는 것뿐이었습니다.

이 모든 단계를 순서대로 설명했지만 Gulp(모든 간단한 시스템을 함께 연결하는 JavaScript 작업 실행기)는 문서를 저장할 때마다 변경 사항을 업데이트한다는 점을 명심하십시오. 즉, 언제든지 모든 단계로 돌아가서 사용자 응답, 이해 관계자 피드백 또는 콘텐츠 또는 컨텍스트에 대한 새로운 발견을 기반으로 조정할 수 있습니다.

이러한 유연성을 통해 사용자와 함께 다양한 화면 계층 및 콘텐츠 처리를 쉽게 테스트할 수 있으며 이러한 테스트에서 실제 콘텐츠, 청중이 직접 경험하고 반응할 수 있는 콘텐츠를 사용할 수 있습니다. 프로토타입의 최종 형식은 HTML, CSS 및 JavaScript이기 때문에 가장 편한 테스트 도구를 사용하여 사용자 피드백을 수집할 수 있습니다(저는 UserTesting 및 Lookback을 좋아합니다).

HTML, CSS 및 JavaScript의 프로토타입 형식은 또한 귀하의 작업이 병렬 및 후속 작업을 보다 쉽게 ​​알릴 수 있음을 의미합니다. 예를 들어, 최종 제품이 기존 CMS 플랫폼을 기반으로 구축될 경우 명확하게 설명할 수 있는 콘텐츠, 구조 및 디스플레이 요구 사항이 CMS 옵션을 평가하는 데 도움이 됩니다. 마찬가지로 프로토타입은 프론트 엔드 개발자를 위한 그리드, 계층 구조, 제목, 링크 동작 및 글꼴과 관련된 디자인 결정을 위한 사양 문서 역할을 할 수 있습니다.

그러나 콘텐츠 우선 프로토타이핑의 목표는 단순히 브라우저에서 디자인하는 것이 아니라는 점을 잊지 마십시오. 목표는 브라우저와 사용자 피드백을 사용하여 콘텐츠 구성을 미세 조정하여 간단한 잘 작동하는 구조.

이 방법의 장점은 카테고리, 레이블 및 탐색 경로가 생성하는 시스템을 신속하게 수정할 수 있다는 점입니다. 이는 정적 컨텐츠 모델링에 비해 뚜렷한 이점을 제공합니다. 동적 콘텐츠가 원하는 방식으로 작동하도록 하기 위해 추가 CSS를 많이 사용하고 있는 경우 소스로 돌아가십시오. 더 잘 작동하도록 콘텐츠를 다르게 청크할 수 있습니까? 클래스 또는 태그 세트를 추가(또는 제거)하시겠습니까? 다른 모든 것이 제자리에 있는 것처럼 보이게 하는 간단하고 우아한 솔루션을 찾을 때까지 다양한 변형을 시도하십시오.

웹 너머로 생각하는 시스템

여기에 표시된 기본 예는 콘텐츠 우선 프로토타이핑 접근 방식이 작동하는 단순한 콘텐츠 시스템을 만드는 데 어떻게 도움이 되는지 보여줍니다. 콘텐츠 우선 프로토타이핑은 콘텐츠 모델, 계층 구조, 범주 및 레이블의 사소한 조정으로 사용자의 정보 요구 사항에 대한 보다 깨끗하고 우아한 솔루션으로 이어질 수 있는 위치를 찾는 데 도움이 됩니다.

이 도구는 웹 기술을 기반으로 하지만 이해를 위해 콘텐츠를 구성하는 방식은 개별 도구, 기술 및 플랫폼을 초월합니다. 특정 구현의 요구 사항과 제약을 제거한 가장 기본적인 형태의 콘텐츠가 청중에게 이해가 되고 간단하고 우아한 방식으로 커뮤니케이션 목표를 달성한다면 이미 개별 기술 구현을 넘어 확장할 수 있는 기반을 구축한 것입니다. 이해하기 위해 특정 플랫폼이나 스크립트가 필요하지 않은 콘텐츠를 구축했습니다. 어떤 식으로든 이해되었으면 하는 내용의 집합체입니다.

디자인 프로세스의 핵심에 콘텐츠를 배치할 때 특정 구현이 아니라 이해를 위해 해결하기 시작합니다. 다른 모든 것은 중간 단계입니다. 우리가 디자인하는 최종 플랫폼이 인간의 마음이라는 것을 인식함으로써, 우리는 이해를 불러일으키는 단순한 구조를 식별할 수 있고 디자인 프로세스 전체에 걸쳐 이러한 구조를 강화하기 위해 노력할 수 있습니다.

작품 인용

  • 복잡성, 가이드 투어 , Melanie Mitchell(뉴욕: 옥스포드, 2009)
  • 일반 시스템 사고에 대한 소개 , Gerald Weinberg(뉴욕: Dorset House, 1975)