CMS 웹 디자인: 동적 콘텐츠 응용 프로그램 가이드

온라인 미디어의 역동적인 콘텐츠 중심 세계를 위한 UI/UX 기술.

특히 온라인 미디어 공간에서 대다수의 웹 애플리케이션과 모바일 앱은 WordPress, Drupal 등과 같은 콘텐츠 관리 시스템(CMS)에 의해 구동됩니다. 이러한 시스템은 콘텐츠가 중요하고 역동적이며 지속적으로 자주 변경되는 인터넷 시대의 요구 사항을 충족하기 위해 등장했습니다.

과거에는 대부분의 웹 사이트가 원활하게 발전하고 성장하도록 구축되지 않은 정적이었습니다. 이제 그들은 살아있는 시스템으로 간주되며 최적의 설계 방법이 있습니다.

다음은 정적인 웹사이트 및 랜딩 페이지 이상으로 레퍼토리를 확장하고 뉴스 사이트, 블로그 또는 사용자가 정기적으로 콘텐츠를 게시하는 소셜 네트워크와 같은 동적 콘텐츠 중심 애플리케이션을 위한 효과적인 디자인을 시작하려는 디지털 디자이너를 위한 안내서입니다. 이러한 전환을 수행하기 위해 디자이너는 이러한 유형의 애플리케이션이 일반적으로 구조화되는 방식을 이해하고 디자인 프로세스에서 "콘텐츠 우선" 사고방식을 채택해야 합니다.

CMS 기반 애플리케이션의 CMS 웹 디자인 IA 패턴

디자이너는 특히 UX(사용자 경험)에 대해 작업하고 처음부터 디자인하는 경우 CMS 기반 애플리케이션에서 공통 정보 아키텍처 패턴에 대한 멘탈 모델을 가지고 있어야 합니다. 이러한 응용 프로그램에 공통적이고 필수적인 여러 페이지 유형이 있으며 "게시물"이 핵심 구성 요소로 기능하는 예측 가능한 방식으로 함께 연결되는 경우가 많습니다. 일반적으로 응용 프로그램이 포함할 수 있는 게시물 수에는 이론적인 제한이 없습니다.

첫 페이지

이것은 공식적인 진입 지점이며 종종 홈 페이지와 동의어입니다. 특히 액세스할 콘텐츠가 많을 때 가장 중요한 것을 강조 표시하거나 강조하는 데 도움이 되기 때문에 매우 일반적입니다. 이 페이지는 일반적으로 너무 많은 세부 정보를 공개하지 않고 게시물의 축약된 버전을 표시합니다.

게시물 페이지

"게시물"이 CMS 기반 애플리케이션의 핵심 단위인 경우 게시물 페이지 는 게시물에 대한 모든 공개 세부 정보가 표시되는 곳입니다. 그것은 아마도 애플리케이션에서 유일하게 진정으로 중요한 페이지일 것이며 특정 이벤트, 사람, 그룹, 제품 등에 대한 기사 페이지 또는 정보 페이지일 수 있습니다. 일부 더 큰 애플리케이션에서는 여러 유형의 게시물과 게시물이 있을 수 있습니다. 지정된 페이지.

목록/카테고리 페이지

이 유형의 페이지는 사용자가 사용 가능한 모든 게시물을 탐색하고 카테고리, 속성 또는 기타 기준으로 필터링할 수 있도록 하는 데 유용합니다. 스크롤할 콘텐츠의 양이 많은 경우에도 정렬 옵션이 일반적입니다.

검색 페이지

검색 전용 페이지는 소규모 응용 프로그램에 필수적이지는 않지만 항상 유용합니다. 경우에 따라 카테고리/목록 페이지와 병합되거나 통합될 수 있습니다.

사용자/저자 프로필

이 페이지는 하나 이상의 게시물을 작성하는 각 작성자 또는 사용자 전용입니다. 소규모 뉴스 사이트와 단일 작성자 블로그에서는 때때로 생략되지만 대규모 다중 작성자 뉴스 사이트, 콘텐츠 기반 소셜 네트워크 및 기타 사용자 생성 애플리케이션에서는 중요합니다. 일반적이고 유용한 방법은 이 페이지에 모든 사용자 게시물 목록을 포함하는 것입니다.

사용자 홈 또는 대시보드

이 페이지는 로그인한 사용자와 관련된 정보(게시물 포함)를 종종 개인 뉴스피드 또는 추천 콘텐츠, 최근 활동 및 상태의 형태로 표시합니다. 사용자 홈은 게이트 앱 및 소셜 네트워크 응용 프로그램에 필수적이지만 다른 앱에는 선택 사항이거나 관련이 없습니다.

동적 콘텐츠를 위한 콘텐츠 중심 UI 디자인

콘텐츠는 디자인보다 우선합니다. 내용이 없는 디자인은 디자인이 아니라 장식입니다. – 제프리 젤드만

CMS 기반 애플리케이션의 사용자 인터페이스를 디자인할 때 콘텐츠가 항상 디자인을 주도하는 것이지 그 반대가 아니라는 점을 기억하는 것이 중요합니다. 콘텐츠 우선 접근 방식은 최근 몇 년 동안 입증된 결과를 통해 점점 더 많은 미디어 회사에서 채택되었습니다. 이를 염두에 두고 UI 디자이너가 이러한 유형의 프로젝트에 발을 담글 때 염두에 두어야 할 권장 사항 목록은 다음과 같습니다.

스타일을 정의하기 전에 내용을 고려하십시오

콘텐츠 기반 애플리케이션에서 시각적 스타일은 콘텐츠 전체를 지원해야 합니다. 이러한 유형의 응용 프로그램의 특성은 일반적으로 내용이 가변적이며 완전히 예측할 수 없음을 의미하지만 전체 주제에 맞는 경우가 더 많습니다. 따라서 브랜드의 미학을 개발할 때 실제 콘텐츠가 영감의 훌륭한 원천이 될 수 있습니다. 동시에 디자이너가 특정 콘텐츠에 너무 집착하고 지나치게 타겟화된 스타일을 개발하는 경우에도 책임이 있습니다.

누가 콘텐츠를 정기적으로 만들 것인지 알아야 합니다.

CMS 기반 애플리케이션에서 콘텐츠는 주로 디자이너가 아닌 콘텐츠 제작자에 의해 결정됩니다. 따라서 디자이너는 정기적으로 콘텐츠를 게시하는 사람들, 즉 편집자, 작성자, 관리자 또는 공개 양식을 통해 콘텐츠를 입력하는 임의의 사용자에게 제품 모양에 대한 일부 제어 권한을 양도할 것으로 예상됩니다.

합의된 프로세스에 따라 디자이너는 이미지 선택, 이미지 준비 및 자르기에 대한 몇 가지 표준 및 지침을 설정할 수 있으며 텍스트 스타일에 일부 매개변수를 적용할 수도 있습니다. 그러나 전반적으로 좋지 않은 사진이나 매우 긴 헤드라인과 같은 콘텐츠 작성자의 부적합한 작업이 품질을 저하시키지 않도록 애플리케이션의 프론트 엔드를 형성하는 것은 디자이너의 책임입니다. 상당한 정도의 디자인.

가능하면 실제 콘텐츠로 디자인하십시오.

콘텐츠 유형은 CMS 기반 애플리케이션에서 매우 다양할 수 있으므로 많은 샘플을 살펴보는 데 시간을 할애하는 것이 좋습니다. 이상적으로는 뉴스 사이트나 블로그의 경우 디자이너가 디자인 프로세스의 맨 처음에 콘텐츠 제작자와 협력하고 스토리 예제, 제품 이미지, 비디오 또는 디자인 목업이 실제처럼 느껴지도록 도울 수 있는 모든 것을 요청할 것입니다. 가능한 한.

실제 콘텐츠로 디자인하는 것은 스톡 사진과 더미 텍스트를 사용하는 것보다 선호되며 와이어프레이밍 또는 프로토타이핑과 병행하여 수행할 수도 있습니다.

디자이너가 신중하게 사전 선택하거나 포토샵으로 편집한 이미지와 완벽하게 맞춤화된 헤드라인으로 디자인을 채운 다음 프로덕션 단계에 들어서면 침체기에 빠지는 디자인을 보는 것은 드문 일이 아닙니다.

스타일에 대해 지나치게 구체적이지 마십시오.

비주얼 스타일을 설정할 때 하나의 분위기, 장르, 스토리 또는 주제만 반영하여 콘텐츠를 편협하지 마십시오. 대신, 콘텐츠에서 작용할 수 있는 전체 톤 범위와 관련하여 단순하고 보편적으로 유지하십시오.

틈새 청중을 대상으로 하는 응용 프로그램의 경우 매우 구체적인 모양과 느낌을 수용할 수 있지만 오늘날의 시장에서는 구식으로 보일 수 있으며 대중적 매력이 부족한 경우가 많습니다. 또한, 잠재적으로 미래의 새로운 수직 분야로의 성장 및 확장 가능성을 제한할 수 있습니다.

디자인이 광범위한 콘텐츠에서 작동하는지 확인하려면 일반적으로 게시 가능한 주제 범위 내에서 현저하게 다른 주제로 동일한 페이지의 추가 버전 또는 두 개를 목업으로 테스트하는 것이 좋습니다.

다양한 콘텐츠를 위한 템플릿 으로 각 페이지 디자인

응용 프로그램의 각 페이지 유형을 다양한 미디어 항목(이미지, 위젯, 비디오, 텍스트 블록 등)에 대한 템플릿 또는 청사진으로 생각하여 채우고 어떤 항목이 변경될 수 있고 어떤 항목을 고정할 수 있는지 파악합니다. .

명확한 규칙과 일관성을 설정하십시오.

콘텐츠가 페이지마다 크게 다를 수 있다고 해서 콘텐츠가 표시되는 일관된 형식 집합이 없어야 한다는 의미는 아닙니다.

머리글과 이미지 크기를 예측 가능하게 유지하고 페이지 내에서 위에서 아래로 논리적 정보 계층을 관찰하면 많은 이점이 있습니다. 하나는 응용 프로그램 전체에 조화를 이루고 사용자의 방향을 적절하게 유지한다는 것입니다.

이를 보다 쉽게 ​​달성하려면 디자인 프로그램 내의 제목, 구분선, 버튼, 위젯 및 기타 요소를 포함하여 인터페이스의 가능한 한 많은 부분에 대해 재사용 가능한 모듈식 스타일 구성 요소 세트를 개발하십시오. 변형을 최소화하면서 이러한 구성 요소를 논리적 체계에서 반복적으로 사용합니다. Toptal Designer Wojciech Dobry의 이 기사는 Sketch에서 UI 라이브러리를 생성하기 위한 좋은 가이드를 제공합니다.

게시물에 개별화된 디자인 처리를 제공하지 마십시오.

페이지의 같은 섹션 내에서 스타일과 형식이 너무 다른 게시물을 제공하지 마십시오. 여기에는 이미지 크기 변경, 특수 텍스트 레이아웃 또는 글꼴 추가, 맞춤 장식이나 그래픽으로 개별 이미지를 부풀리기 등이 포함됩니다. 이것은 시각적 조화를 죽이는 경향이 있을 뿐만 아니라 일반적으로 리소스 낭비이며 개발자 또는 콘텐츠 관리자의 관점에서 성능 및 유지 관리에 방해가 됩니다.

콘텐츠가 항상 지정된 영역에 들어갈 것이라고 가정하지 마십시오.

CMS 기반 응용 프로그램의 동적 특성으로 인한 피할 수 없는 결과 중 하나는 주어진 표시 영역에 표시되는 텍스트의 길이가 다를 수 있다는 것입니다. 종종 CMS의 텍스트에 문자 제한을 두어 합리적으로 유지할 수 있지만 디자이너는 텍스트 블록이 항상 특정 라인 수에 맞을 것이라고 맹목적으로 가정해서는 안됩니다.

개별 문자 너비가 다를 뿐만 아니라 매우 낮은 문자 제한을 적용하여 작가의 창의성을 크게 제한하는 것도 관례가 아닙니다. 이것이 위에서 논의한 대로 실제 콘텐츠로 디자인을 테스트하고 다른 텍스트 샘플로 각 영역을 검사하는 것이 항상 좋은 이유입니다.

최악의 시나리오에 대비하려면 합의된 문자 제한에 도달할 때까지 일련의 넓은 알파벳 문자(예: 콘텐츠가 영어로 된 경우 "w")를 임시로 삽입하십시오.

콘텐츠가 돋보이도록 허용

콘텐츠 기반 응용 프로그램에서 콘텐츠는 항상 앞과 중앙에 유지되어야 하며 문체 브랜딩 요소는 일반적으로 뒤로 물러나야 합니다.

깨끗하고 밝고 중립적인 배경색으로 동적 콘텐츠를 둘러싸십시오.

흰색 또는 회백색이 일반적으로 바람직합니다. 이를 통해 밝고 어두운 다양한 유형의 이미지가 가려지지 않고 페이지에서 튀어나올 수 있습니다.

이미지를 크고 명령적으로 만드십시오.

큰 이미지, 특히 사진은 다른 어떤 것보다 방문자의 주의를 더 효과적으로 사로잡습니다.

헤드라인과 본문 텍스트를 크고 읽기 쉽게 유지하십시오.

텍스트가 많은 페이지의 경우 가독성이 높은 웹 글꼴을 선택하고 데스크톱, 모바일, 태블릿 등 모든 장치에 크고 편안한 크기로 배포합니다.

과도하게 디자인하지 마십시오.

종종 디지털 및 인쇄 디자이너는 독창적인 장식을 배치하거나 브랜딩 요소에 디자인에 자유를 부여하는 것을 좋아합니다. 일반적으로 특정 시각 효과는 때때로 콘텐츠 중심 디자인을 향상시킬 수 있지만 사용자가 뉴스 사이트나 블로그를 방문할 때 실제로 관심을 갖는 콘텐츠에서 쉽게 주의를 분산시킬 수도 있습니다.

이러한 효과는 이미지가 변경될 때 응용 프로그램의 모양을 예측하기 어렵게 만들 수도 있습니다. 일반적으로 장식 글꼴, 굵은 패턴, 일러스트레이션, 겹치는 이미지, 반투명 이미지 및 이미지 주위의 멋진 프레임을 확인하는 것이 가장 좋습니다. 마지막으로 로고를 추천 콘텐츠에 비해 상대적으로 작게 유지합니다.

동적 이미지 근처에 컬러 배경을 사용하지 마십시오.

지금은 대담하고 밝은 색상이 있지만 변경될 수 있는 이미지 주위에 채도가 높은 색상이나 배경색을 많이 적용하면 색상 충돌 및 과도한 자극, 내용을 방해합니다.

텍스트의 전체 페이지를 덮기 위해 어두운 배경을 사용하지 마십시오.

연구에 따르면 콘텐츠가 많은 애플리케이션에서 어두운 배경의 밝은 텍스트는 밝은 배경의 어두운 텍스트보다 눈에 더 많은 스트레스를 줍니다. 어두운 배경은 페이지의 특정 섹션이나 제한된 텍스트 양이 있는 슬라이드쇼 영역에 적합할 수 있지만 긴 텍스트 블록을 덮는 데는 적합하지 않습니다.

이미지 및 기타 미디어가 백엔드에서 작동하는 방식 이해

콘텐츠 관리 시스템은 이미지, 비디오 및 애니메이션 파일과 같은 미디어를 처리하는 방식이 다를 수 있으며, 때로는 개발자가 효율성을 위해 의도적으로 미디어에 제약 조건을 설정하기도 합니다.

예를 들어 이미지 크기 조정 및 자르기 방법과 생성 및 표시할 수 있는 크기 및 자르기 수에 제한이 있을 수 있습니다. 따라서 디자인을 진행하기 전에 응용 프로그램 개발자 또는 콘텐츠 관리자와 상의하여 무엇이 실용적인지(그리고 추가 개발 리소스를 투입할 의사가 있는 항목)을 결정하는 것이 중요합니다.

지원되는 미디어 형식을 확인하십시오.

일반적으로 응용 프로그램에서 이미지를 지원하는 것이 기본이지만 저장 및 표시할 수 있는 비디오, 오디오 및 기타 멀티미디어 파일의 유형과 시각적으로 사용자 지정할 수 있는 정도에 대해 콘텐츠 관리자와 상의하는 것이 좋습니다.

예를 들어, 맞춤형 비디오 플레이어가 구축될 것인지 또는 페이지에 YouTube 또는 Vimeo 비디오를 포함하는 것이 유일한 옵션인지 확인하는 데 도움이 됩니다. YouTube의 경우 동영상을 삽입, 크기 조정 및 스킨 처리하는 방법에 특정 표준과 제한이 있습니다.

이미지에 대해 다양한 자르기 및 크기를 지정하지 마십시오.

이미지에 대해 많은 개별 자르기를 만드는 것이 기술적으로 가능한 경우가 많지만 일반적으로 그렇게 하면 부정적인 영향이 있습니다. 예를 들어 기본적으로 WordPress CMS는 여러 크기의 업로드된 이미지를 단일 비율로 자동 생성하지만 별도로 자른 썸네일을 생성할 수 있는 옵션만 제공합니다.

각 이미지를 추가 비율로 자르려면 특별한 플러그인을 설치하거나 사전에 전용 도구를 개발해야 할 뿐만 아니라 업로드된 모든 이미지에 대해 추가 작업을 수행해야 하기 때문에 편집자에게 추가적인 요구가 따릅니다. 때로는 이것이 실행 가능한 이미지를 선택하는 것을 더 어렵게 만들고 워크플로를 더욱 느리게 만듭니다.

레거시 콘텐츠를 지원해야 하는지 여부를 결정하십시오.

레거시 응용 프로그램을 다시 디자인할 때 새 응용 프로그램을 처음부터 시작할 때보다 사용할 수 있는 옵션이 훨씬 더 적습니다. 이는 이미 기존의 미디어 리포지토리가 있고 모든 미디어를 새로운 형식으로 마이그레이션하는 것은 개발 관점에서 비용이 많이 들고 비실용적인 작업이 될 수 있기 때문입니다.

콘텐츠 편집자에게 다양한 스타일의 텍스트 스타일 제공

텍스트 콘텐츠는 CMS 기반 애플리케이션의 핵심 요소이며, 특히 뉴스 사이트나 블로그에서 편집자나 작가는 자신의 장치에 맡겨진 경우 강조를 제공하기 위해 텍스트의 스타일을 지정하고 서식을 지정하는 방법을 찾습니다. 특정 요점, 내용 나누기, 인용 추가, 목록 만들기, 다른 내용에 연결 및 기타 여러 작업 수행.

WordPress와 같은 많은 인기 있는 CMS 플랫폼은 기본적으로 텍스트 형식 지정 옵션을 제공하지만 디자이너가 이러한 스타일을 디자인에 맞게 사용자 정의하는 방법에 대한 계획을 세우지 못하면 결과는 임의적이거나 평범하거나 바람직하지 않은 결과가 될 것입니다.

텍스트의 서식을 지정할 수 있는 모든 일반적인 방법에 대한 설계를 수행합니다.

특히 블로그와 뉴스 사이트의 경우 굵은 글꼴 및 기울임꼴 텍스트, 머리글 및 부제목, 번호 매기기 및 글머리 기호 목록, 큰따옴표, 캡션을 포함하여 텍스트 형식을 지정할 수 있는 모든 일반적인 방법에 대한 스타일 규칙을 개발자에게 제공하는 데 시간이 걸립니다. , 하이퍼링크.

콘텐츠 제작자에게 너무 많은 스타일 제어 권한을 부여하지 마십시오.

일반적으로 편집자에게 너무 많은 디자인 제어 권한을 부여하는 것은 좋은 생각이 아닙니다. 페이지 내에서 자신만의 레이아웃을 만들거나 한 가지 이상의 방법으로 텍스트를 색칠하는 것과 같은 일을 하도록 허용하는 것은 어떤 사람들에게는 벅차거나 시간이 많이 소요될 수 있으며 다른 사람들에게는 보기 흉하고 일관성 없는 결과를 초래할 수 있습니다.

콘텐츠 중심 디자인의 미래 패턴

증강현실(AR)과 같은 신기술의 등장으로 콘텐츠 중심 디자인의 새로운 패러다임이 등장하기 시작했습니다. 현재 초기 단계에 있는 증강/혼합 현실 공간의 CMS 기반 응용 프로그램은 실제 개체 및/또는 장면을 콘텐츠의 핵심 부분으로 사용합니다.

특정 모바일 사용자의 보기 환경, 조명 조건, 텍스트 및 삽입된 3D 개체에 대한 물리적 근접성은 모두 최종 결과에 영향을 줄 수 있습니다. 이는 콘텐츠 큐레이션의 개념을 크게 바꾸고 디자인 프로세스에서 고려해야 하는 예측 불가능한 추가 계층을 추가합니다.

CMS 웹 디자인은 조금 다릅니다

CMS 기반 애플리케이션을 위한 디자인은 콘텐츠를 우선으로 하고 스타일을 두 번째로 두는 것을 의미합니다. 또한 디자인하는 콘텐츠의 가변성과 예측 불가능성을 계획하고 수용하는 것을 의미합니다. 무수히 많은 잠재적인 결과를 수용할 수 있는 능력은 새로운 기술이 콘텐츠 자체의 특성을 변형함에 따라 CMS 웹 디자인에서 훨씬 더 중요해질 것입니다.