본문 바로가기
css

표시, 말하지 않음

by code-box 2021. 12. 30.
반응형

웹사이트의 콘텐츠 프레젠테이션을 디자인하는 데 얼마나 많은 시간을 소비하나요? 당신이 새로운 블로그 글을 쓰거나 새로운 페이지를 만들 때, 당신은 단어만을 생각하고 있는가, 아니면 당신의 독자들이 그 단어에 어떻게 참여할 것인가? 이러한 몇 가지 팁을 염두에 두고 방문자를 위해 사이트의 콘텐츠를 더 쉽게 소화시키고 시각적으로 더 흥미롭게 만들 수 있습니다.

좋은 기본을 사용하라.

콘텐츠의 구조에 대해 생각해 보십시오. 어떻게 하면 정보의 벽을 쉽게 소화할 수 있는 덩어리로 분해할 수 있을까요? 많은 정보를 수집하고 읽고 이해하기 쉽게 만들기 위해 당신이 따를 수 있는 몇 가지 기본적인 서식 규칙이 있다.

그만둬!

제목과 하위 제목을 사용하여 관련 내용을 그룹화합니다.

 

웹 상의 독자들은 모든 것을 한 줄씩 읽는 대신 정보를 검색한다. 큰 제목에 따라 콘텐츠를 작은 섹션으로 나누면 검색 중인 정보를 찾는 데 도움이 됩니다.

내가 무언가를 빨리 찾으려 할 때, 깨지지 않은 콘텐츠로 이루어진 거대한 벽이 있는 사이트에 뛰어드는 것만큼 위협적인 일은 없다. 기껏해야 cmd+f를 하고 특정 키워드를 검색하겠지만, 보통은 "lol no"라고 말하고 다른 곳에서 정보를 찾습니다.

직접 확인해 보십시오. 다음 중 접근하기 더 쉬워 보이는 예는 무엇입니까?

가능한 경우 단락을 목록으로 나눕니다. 목록을 사용하면 스캔이 쉬워집니다!

예를 들어 여러 단계로 이루어진 내용을 읽는다면, 따라 하기 위해서는 목록이 필요합니다. 개별 업무를 목록으로 나누지 않는 지시를 받을 때마다, 제 뇌는 필요한 단계를 끄집어낼 수 없습니다. 나는 내 자리를 잃거나, 뭔가를 놓치고, 혼란스러워합니다. 이는 재료, 튜토리얼의 단계 또는 회사에서 제공하는 다양한 서비스를 나열하는 경우에도 마찬가지입니다. 제 머리를 도와서 목록을 만들어 주세요.

 

소리 질러!

굵고 기울임꼴인 형식을 이용하여 중요한 텍스트를 불러옵니다.

예를 들어 문장에서 가장 중요한 부분을 굵게 표시해 내용을 훑어보는 독자들이 가장 중요한 부분을 눈에 띄게 한다. 기사를 쓸 때 독자들이 탭을 닫은 후 오랫동안 어떤 정보를 기억하기를 원하십니까?

제목, 인용문, 내부 대화문 등 정보를 참조하거나 인용할 때는 기울임꼴을 사용합니다.

강조 표시 만들기

 

굵게 또는 기울임꼴과 같은 콘텐츠 형식을 넘어서서 강조를 표시하고 레이아웃, 색상 및 이미지와 같은 도구를 사용하여 가장 중요한 정보에 주의를 끌 수 있습니다.

인간은 텍스트보다 6만 배 빠른 시각 정보를 처리합니다. 이 수치가 사실인가요? 누가 알겠어! 연구결과를 인용한 수많은 웹사이트들이 원본 자료를 찾지는 못했지만, 솔직히 웹에서 콘텐츠를 검색해 본 경험이 있다고 믿고 싶다. 제가 아바타가 도움이 된다고 생각하는 이유 중 하나는 트위터에서든, 슬랙과 같은 채팅 앱에서든 대화를 스크롤할 때 저는 먼저 아바타로, 그 다음에 이름으로 사람들을 식별하기 때문입니다. 누군가가 아바타를 업데이트할 때마다 저는 처음에는 뇌가 새로운 이미지에 적응하기 전에 짜증이 납니다.

아이콘, 일러스트레이션, 사진 등 텍스트 내용을 보완하고 강조하기 위해 이미지를 사용할 수 있습니다. 당신의 컨텐츠가 말하는 것을 사람들이 이해하는 데 도움이 되는 이미지를 목표로 하세요.

예를 들어, 이케아 지침을 따릅니다. 가구를 조립하는 것은 어렵고, 시각적으로 움직이는 이케아의 지시로 나만의 가구를 조금 더 쉽게 만들 수 있다.

 

(너무 지나치지만 마십시오. 혼란스러운 아이콘이나 바쁜 이미지는 주의를 산만하게 할 수 있습니다. 도움이 되지 않습니다.

이미지 외에 레이아웃이나 색상을 사용하여 정보를 불러올 수도 있습니다. 숫자가 많나요? 그것들을 표로 정리하거나, 모든 것을 한 단락에 작성하는 대신, 자신의 열에 텍스트가 큰 숫자를 불러내세요.

인용문이나 인용문을 사용하여 특정 인용문이나 기사의 중요한 부분을 강조합니다.

특정 또는 시기적절한 정보를 누군가에게 알려야 합니까? 내용을 콜아웃 상자에 포장합니다.

단지 문단 밖에서 생각해라! 웹사이트를 검색하거나 책이나 잡지를 통해 읽을 때, 어떤 종류의 내용이 가장 눈길을 사로잡나요? 당신은 나중에 어떤 정보를 기억하나요? 주변에서 영감을 얻으세요.

 

이야기하다

사람들은 감성적이다. 우리는 이야기, 특히 우리가 공감할 수 있는 이야기들을 기억한다. 당신의 콘텐츠를 이야기로 만들 수 있나요? 호기심 어린 시작과 강한 해상도로 발표해 주실 수 있나요? 갈등이 있나요?

2020년 미국 대통령 선거 당시 엘리자베스 워렌의 기술팀은 워렌의 초부자 세금 계획과 함께 제공되는 억만장자 계산기 등 유권자들이 참여할 수 있는 수많은 쌍방향 디지털 경험을 종합했다. 그들은 좀 더 깊이 있는 사례 연구를 작성했지만, 저는 그들이 만든 정보 스크롤 페이지(스크롤텔링이라는 별명)가 어떻게 문자 그대로 중요한 정보를 강조하여, 관련 링크된 콘텐츠를 제공하여 더 배우거나 인용문을 추가하거나 추가적인 개성을 주입하는지를 강조하고 싶습니다. 페이지는 내장된 대화형 콘텐츠를 혼합하여 사용자를 독서자, 비디오, 이미지 및 텍스트로 참여시킵니다. 워렌의 이야기를 표현할 수 있는 설득력 있는 방법이에요.

정보를 표시하는 새로운 방법 시도

웹은 대화형 플랫폼입니다. 적절한 경우 이를 활용하십시오(더 적은 것이 더 중요하며, 액세스 용이성이 필수적이며 고객을 알아야 함). 스크롤텔링, 캡션 비디오, 그리고 청중들을 위해 지금이 바로 AR/VR에 대해 알아볼 때입니다! 누가 알겠어. 가끔은 어떤 게 붙는지 시험해 볼 필요가 있어. 조심해. 실험도 좋지만 모두를 태워다 줘야 해

 

물론, 더 복잡한 상호작용에는 더 많은 작업 및/또는 예산이 필요하므로 컨텐츠로 만들 수 있는 내용은 리소스에 따라 달라집니다. 여러분이 만드는 스토리텔링의 종류는 여러분이 DIY 블로거이든지, 에이전시 또는 내부 크리에이티브 팀에 접근할 수 있든지 간에 다를 것입니다. 그리고 괜찮습니다. 모든 기사가 눈처럼 미디어가 풍부한 경험을 할 필요는 없습니다. 심지어 사미르 노즈랏의 SALT FAT AIDSHEAT와 같은 간단한 삽화도 독자들에게 좋은 분위기를 만들어주고 이해를 더 풍부하게 해줄 수 있다.

image

여러분이 첫 번째 웹사이트를 만드는 것이든, 혹은 여러분이 경험이 많은 작가이든지 간에, 여러분의 콘텐츠를 흥미롭고 매력적인 방식으로 발표하기 위해 여러분이 할 수 있는 일은 더 많을 것입니다. 다음에 새로운 것을 만들 때, 청중들에게 정보를 알려주지 말고 보여줄 수 있는 다른 방법들에 대해 생각해보세요.

댓글