Web Design Done Well: 우수한 편집

많은 웹 디자인 이야기는 콘텐츠 주변 에서 일어나는 일과 관련이 있습니다. 페이지 속도, 디자인 시스템, 검색 엔진 최적화, 프레임워크, 접근성 — 목록은 계속해서 늘어납니다. 이것은 Smashing Magazine 에서 우리에게 많은 글을 남길 수 있게 해주며, 이는 훌륭하지만 그것이 무엇을 위한 것인지 스스로에게 상기시킬 가치가 있습니다.

Web Design Done Well 시리즈의 이 세 번째 판에서 우리는 많은 웹사이트의 핵심인 콘텐츠를 연마하고 있습니다. 보다 구체적으로, 편집 내용. 웹은 스토리텔러에게 작업할 수 있는 믿을 수 없는 도구를 제공했으며 가끔 나 자신도 약간의 유능한 저널리스트로서 좋은 특종을 좋아합니다.

다음은 웹 기술을 다음 단계로 끌어올리기 위해 편집 콘텐츠와 결합한 예입니다. 그런 다음 디지털 콘텐츠에 대해 창의적으로 생각하기 위한 광범위한 팁으로 마무리하겠습니다. 콘텐츠 제작 라인에 압도된 지금도 좋은 점은 여전히 ​​빛난다.

로이터는 스와이핑에 기대

미국의 조직적인 인종차별에 대한 이 기사에서 Reuters는 스와이프를 중심으로 콘텐츠를 구성하여 이야기를 한 입 크기의 덩어리로 나눕니다. 읽기는 전통적인 스크롤 방식보다 훨씬 더 목적이 있는 것처럼 느껴집니다. 그것은 책의 페이지를 넘기는 것과 같습니다. 모바일에서는 말 그대로 다음 섹션으로 넘어갑니다. 빠르고 즉각적인 보고가 가능합니다. 즉, 뛰어난 데이터 시각화는 말할 것도 없습니다.

우리는 모바일 퍼스트 세계에 살고 있습니다. 이것에 대해 소중한 것은 아무 소용이 없습니다. 예, 잡지 스프레드에는 특정 등급이 있습니다. 예, 데스크탑 보기는 작업하기에 더 큰 캔버스를 제공합니다. 현실은 대부분의 사람들이 귀하가 게시한 내용을 휴대전화로 볼 것이라는 점입니다. 그러니 휴대전화에 기대십시오. 비슷한 접근 방식으로 The New York Times 와 Input 의 이러한 '탭 스토리'도 훌륭합니다. 모바일 중심의 사설에 대해 더 읽고 싶은 분들은 전설적인 신문 디자이너 Mario Garcia 의 Story 를 적극 추천합니다.

뉴욕 타임즈는 말보다 쇼를 보여줍니다

COVID-19 대유행이 초래한 모든 끔찍한 일들에도 불구하고, 적어도 숨이 멎을 정도로 좋은 보고가 이루어졌습니다. 이 대화형 New York Times 기사는 독자를 입자 수준으로 안내하여 안면 마스크가 작동하는 방식을 설명합니다. 섬유가 입자를 잡는 방법과 마스크마다 효과 수준이 다른 이유를 알 수 있습니다. 어떤 바보라도 복잡한 주제를 이해하기 어렵게 만들 수 있지만 이해하기 쉽게 만들 수 있습니까? 그 자체로 하나의 예술 형식입니다.

여기에는 많은 요소가 있습니다. 그래픽, 색상, 애니메이션 — 보트를 띄우면 증강 현실 경험도 있습니다. 건조하고 답답한 주제가 너무 쉽게 살아났습니다. 그리고 무엇보다 중요한 정보입니다. 이러한 이유로 Gabriel Gianordoli는 2020 Society for News Design 어워드에서 세계 최고의 디자이너로 선정되었습니다. 굉장한.

워싱턴 포스트, 기하급수적 스프레드 시각화

전염병은 또한 전 세계 출판물의 첫 페이지에 데이터 시각화를 강요했습니다. 2020년 3월의 기하급수적 확산에 관한 이 기사(기억나시나요?)는 특정 바이러스가 실제로 큰 문제가 되는 방법과 이유를 매우 빠르게 시각화하는 놀라운 작업을 수행합니다. 본격적인 시뮬레이션에서 작은 인라인 스파크라인 그래프에 이르기까지 디지털 설정을 최대한 활용한 사설입니다.

이 제품이 특히 마음에 드는 점은 결코 불필요한 느낌이 들지 않는다는 것입니다. 모든 비주얼은 스토리를 향상시켜, 같은 개념을 단어만으로 설명해야 하는 사람이 있다는 것이 거의 안타까울 정도입니다. 버튼 클릭으로 12개 이상의 언어로 사용할 수 있다는 것은 또 다른 멋진 터치입니다. 웹은 실제로 경계가 없다는 것을 상기시켜줍니다. 이 기사가 전 세계적으로 얼마나 많은 사람들에게 도움이 되었는지 상상할 수 있습니다.

Marshall 프로젝트 믹스 미디어

여기 마샬 프로젝트는 동화책의 우아함과 달콤 쌉싸름한 아름다움으로 미국 형사 사법 제도에 대한 강렬한 저널리즘을 제시합니다. "The Zo"에서는 독창적인 글, 인상적인 일러스트레이션, 매혹적인 내레이션 및 중요한 이야기가 결합됩니다. 이것은 전체 흐름의 멀티미디어 사설입니다.

그들은 노래가 여러 형태를 취할 수 있다고 말합니다. 온라인 편집 콘텐츠도 마찬가지입니다. 위에서 본 것은 96페이지 분량의 학술 논문에서 영감을 받은 것입니다. 온라인에서 애니메이션 시리즈로 새로운 청중을 찾은 다음 에미상 후보에 한두 번 후보가 될 수 있다는 사실은 인터넷의 변혁적인 힘에 대한 증거입니다.

SBS 인터랙티브 그래픽노블은 참신하지 않다

인터넷의 변혁적인 힘에 대해 말하면서 대화형 스토리는 어떻습니까? 우리는 모두 영화 각색, 라디오 연극 각색, 미니시리즈 각색 등에 익숙합니다. 왜 웹 페이지 적응이 안됩니까? 그것이 바로 호주 방송인 SBS가 Nam Le의 동명 책에 나오는 단편을 인터랙티브하게 재구성한 The Boat 로 시작한 일입니다.

페이지의 오프닝 시퀀스는 당신을 바로 끌어들입니다. 읽는 동안 파도와 함께 단어가 기울어지고 구르르 떨리며 천둥과 비의 소리가 당신의 감각을 가득 채웁니다. 이야기가 정리되면서 Matt Huynh의 삽화는 추억처럼 떠돌아다닙니다. 그것은 매우 생생한 경험이며 그 자체로 아름답고 젊은 세대에게 문학을 전하는 정통한 방법입니다.

푸딩 원숭이 주변

이 영감을 주는 사이트 시리즈의 사운드 에디션에 맞춰 제 시간에 이것을 접했으면 합니다. 상관없어, 지금 여기 있어. 진정으로 뛰어난 디지털 사설 쇼케이스에서 The Pudding은 무한 원숭이 정리를 음악으로 생생하게 설명하지 않습니다. 원숭이 정리가 무엇인지 모르십니까? 글쎄, 당신이 무엇을 기다리고 있는지, 페이지는 내가 할 수있는 것보다 훨씬 더 잘 설명 할 것입니다. 기다릴게.

대화형 4개 메모 예제를 사용하여 기사는 독자를 참여시키면서 개념을 이해하기 쉽게 만듭니다. 마지막으로 유쾌한 터치로서, 페이지 자체는 점점 더 복잡해지는 곡을 통해 무작위로 작동하는 라이브의 지속적인 실험입니다. 약 19년 만에 '세븐나이션 아미'가 나올 것이라고 예상할 수 있다. 원숭이가 키보드에서 충분히 오랫동안 타이핑하는 것이 완벽한 자바스크립트 프레임워크를 만들 수 있는지 궁금합니다. 희망은 영원합니다.

A List Apart: A Class Apart

데이터 시각화, 음악, 증강 현실 및 기타 멋진 도구에 대한 모든 이야기에 대해 기본 권리를 얻기 위해 할 말이 많습니다. 페이지가 눈길을 끌기 위해 라스베가스 스트립과 같은 웹일 필요는 없습니다. 목록 Apart는 대부분의 것보다 더 나은 것을 보여줍니다. 내용에 대한 접근 방식은 항상 내 마음에 자리를 잡을 것입니다. 제목, 삽화, 카피, 파란색 하이퍼링크. 아름다운.

지금 내가 깨달은 것은 불안할 정도로 오래 전에 '잔인한' 웹 디자인의 두 가지 분야에 대해 썼습니다. 내가 말한 요지는 하나의 접근 방식은 시끄럽고 뻔뻔하고 다른 접근 방식은 확고하게 기능적이라는 것입니다. A List Apart 는 제대로 된 후자의 아름다움을 보여줍니다. 멀티미디어 툴킷은 가지고 있으면 좋은 자산이지만, 지금도 말만으로도 충분할 때가 있습니다.

콘텐츠에 대해 창의적으로 생각하기

좋든 나쁘든 웹은 콘텐츠로 가득 차 있습니다. 많은 부분이 훌륭하지만 그렇지 않은 경우가 많습니다. 주변의 많은 이야기에는 조립 라인에 대해 이야기하는 산업가에게서 더 빨리 기대할 수 있는 차갑고 계산적인 흐름이 있습니다. 위에 공유된 예는 일을 몰아내고 싶은 충동을 억제하는 것의 가치를 말해주기를 바라지만 현실을 직시합시다. 대부분의 웹사이트에는 The Washington Post 와 같은 리소스가 없습니다.

그러나 개인 블로그에서 글로벌 출판물에 이르기까지 모든 수준에서 콘텐츠에 대해 창의적으로 생각할 수 있는 방법이 있습니다. 다음은 그 중 몇 가지입니다.

• 기본 접근 방식에 대해 질문하십시오.
  우리는 우리의 이야기를 말하는 방식을 포함하여 습관의 생물입니다. 일찌감치 시간을 내서 한 걸음 물러나서 이렇게 물어보십시오. 어떻게 다르게 할 수 있습니까? 기사보다 사진 에세이가 더 신중할 수도 있습니다. 열지도가 테이블보다 나을 수도 있습니다. 전문화는 물론 중요하지만, 작업을 수행하는 다른 방식, 종종 상호 보완적인 방식을 보지 못하게 해서는 안 됩니다.
• 무료 리소스를 사용하십시오.
  인터넷의 가장 큰 선물 중 하나는 무료로 제공되는 놀라운 것들이 얼마나 많다는 것입니다. 실제로 무료처럼 의도적으로. 사진에서 그래픽 디자인, 데이터 시각화 도구, 오디오 편집 소프트웨어에 이르기까지 콘텐츠를 변환하는 데 필요한 리소스를 클릭 한 번이면 됩니다. 우리의 공짜 태그는 시작하기에 좋은 곳입니다.
• 콘텐츠에 여러 형식을 제공합니다.
  특히 마샬 프로젝트가 '조'로 잘 보여주듯 이야기는 다양한 형태를 띨 때 새로운 관객을 찾을 수 있다. 기사를 썼습니까? 좋습니다. 오디오 버전을 녹음하지 않으시겠습니까? 데이터 기반 보고서를 작성했습니까? 꽤 멋집니다. 하지만 D3에 해당 숫자를 연결하기 시작했다면 얼마나 멋질까요? 알아내는 방법은 단 한 가지입니다.
• 실험.
  여기에 있는 예는 수확의 핵심이지만, 새로운 아이디어를 시도하고 때때로 발생하는 실패를 수용함으로써 얻을 수 있는 엄청난 양이 있다는 점을 언급할 가치가 있습니다. 반복은 창작 과정의 핵심입니다. 당신이 무언가를 시도하고 그것이 작동하지 않는다면, 상관없습니다. 그것이 효과가 있는 것에 도달하는 유일한 방법입니다.

콘텐츠에 대한 획일적인 접근 방식은 없지만 스토리를 존중하는 것은 필수적입니다. 웹 기술은 주요 이벤트가 아니라 보조적입니다. 그들이 개를 흔드는 꼬리가 되지 않도록 하십시오. 이야기가 전달되는 방식과 조화를 이룰 때 최고의 결과가 나옵니다. 몇 년 동안 사람들의 마음을 사로잡는 그런 종류의 콘텐츠입니다.