CSS 그리드 템플릿 영역으로 웹용 아트 디렉팅

( 이 기사는 CoffeeCup Software의 후원을 받아 작성되었습니다 .) 자, 바로 본론으로 들어가겠습니다. CSS 그리드는 "모든 브라우저가 지원할 때 사용하겠습니다" 속성 중 하나이기에는 너무 중요하고 정말 중요합니다. CSS Grid를 사용하면 접근성, 응답성 또는 사용성을 손상시키지 않으면서 인쇄물에서와 같이 웹에서 레이아웃을 창의적으로 만들 수 있기 때문입니다.

웹 디자인이나 개발에 대해 진지하게 생각하고 있다면 CSS Grid를 배우고 사용하는 데에도 진지해야 합니다. 이 기사에서는 저처럼 크고 멍청한 머그도 이해할 수 있는 요소를 배열하는 방법과 충분히 주의를 끌지 못하는 요소를 배열하는 방법인 grid-template area 라는 한 측면을 사용하는 방법을 설명하려고 합니다.

자, 당신은 어떤 행동과 어떤 코드를 보고 싶어합니다. 나도 알아요. 하지만 잠깐만요. "방법"을 배우기 전에 수십 년 동안 다른 미디어에서 봐왔지만 대부분 웹에서는 없었던 레이아웃을 만드는 것이 "왜" 중요한지 알려드리고 싶습니다.

좌절감

"오늘 이 두 ​​레이아웃 중 어떤 레이아웃을 디자인하고 있습니까?" 웹상에서 디자인의 현재 상태를 한탄하는 트윗. 나는 웹 디자인이 어떻게 "영혼"을 잃었는지에 대해 이야기했습니다. 또한 사람들이 CSS Grid를 사용하여 잡지의 포스터나 페이지를 다시 만드는 것을 본 적이 있을 것입니다. 이 기술 데모는 훌륭하고 CSS Grid를 사용하여 복잡한 레이아웃을 구현하는 것이 다른 방법과 비교할 때 얼마나 쉬운지 보여주지만 이 작업을 수행하는 것이 중요한 이유에 대해서는 설명하지 않습니다.

그래서 이유는 무엇입니까? 레이아웃이 디자인에서 중요한 부분을 차지하는 이유는 무엇입니까? 글쎄요, 모든 것은 한 가지로 요약됩니다. 그것이 바로 커뮤니케이션입니다.

영원할 것 같은 웹 디자이너는 템플릿을 만든 다음 콘텐츠와 레이아웃 간의 관계를 거의 고려하지 않고 템플릿을 채웠습니다. 콘텐츠 관리 시스템, 반응형 디자인을 만들어야 하는 필요성, 지금까지 사용해온 CSS 속성의 한계를 고려할 때 이는 불가피한 일이라고 생각합니다. 물론, 우리는 유연하고 사용 가능한 디자인을 만들었지만 퍼즐의 핵심 부분, 즉 메시지를 전달하는 데 레이아웃이 수행하는 역할을 놓치고 있습니다.

블록을 몇 번 둘러본 적이 있다면 디자인에 적합한 톤을 설정하는 데 색상이 어떤 역할을 하는지 알게 될 것입니다. 유형도 그 역할을 한다고 말할 필요는 없습니다. 잘못된 서체를 선택하면 비효율적으로 의사 소통하고 사람들이 의도한 것과 다르게 느낄 위험이 있습니다.

'측정'과 같은 타이포그래피의 측면과 밀접하게 연결된 레이아웃은 똑같이 중요한 역할을 합니다. 대칭과 비대칭, 조화와 긴장. 이러한 원칙은 사람들을 귀하의 콘텐츠로 이끌고 안내하며 더 쉽게 이해할 수 있도록 도와줍니다. 그렇기 때문에 올바른 레이아웃을 만드는 것이 가장 적합한 서체를 선택하는 것만큼 중요합니다. 인쇄 디자이너는 수년 동안 이것을 알고 있습니다.

아트 디렉션을 통한 스토리텔링

아트 디렉션은 인쇄를 포함한 다른 미디어에서와 마찬가지로 웹에서도 중요하며, 내가 다룰 내용은 스토리텔링만큼이나 디지털 제품 홍보에도 적용됩니다.

'아트 디렉션'이라는 말을 들으면 어떤 생각이 드시나요? 반응형 이미지, HTML의 <picture> 요소 또는 '크기'를 사용하여 여러 화면 크기에 대체 자르기, 크기 또는 방향을 제시하는 것에 대해 생각하십니까? 유용한 반응형 디자인 및 아트 디렉션 도구가 되었지만 웹 디자인에는 도구 이상의 의미가 있습니다.

제이슨 산타 마리아(Jason Santa Maria)와 트렌트 월튼(Trent Walton)과 같은 디자이너는 때때로 작품에 고유한 이미지, 레이아웃 및 타이포그래피를 부여하여 글을 연출하는 디자이너를 생각하십니까? 이를 통해 아트 디렉션을 이해하는 데 더 가까워지지만 이미지, 레이아웃 및 타이포그래피는 아트 디렉션의 의미가 아니라 결과일 뿐입니다.

그렇다면 아트 디렉션이 정확히 그런 것이 아니라면 정확히 무엇입니까? 한 문장으로, 콘텐츠에서 본질적이고 정확한 의미 또는 목적을 추출하는 기술입니다. 잡지 기사 또는 가장 인기 있는 스타트업의 가장 멋진 앱을 사용해야 하는 이유 목록이 될 수 있으며 그 의미나 목적을 전달합니다. 디자인을 사용하여 더 나은. 우리는 웹에서 아트 디렉션에 대해 많이 듣지는 않지만 다른 매체에서 잘 확립되어 있습니다. 아마도 가장 기억에 남는 잡지와 어느 정도는 신문일 것입니다.

나는 1934년부터 1958년까지 Harpers Bazaar 잡지에 실린 Alexey Brodovitch의 작업을 직접 기억할 만큼 나이가 많지 않습니다.

나는 Face 매거진에 대한 Neville Brody의 예술적 아트 디렉션을 기억하며 여전히 매일 영감을 받습니다.

아트 디렉션은 웹과 관련하여 거의 논의되지 않으므로 관련이 없다고 생각하는 것을 용서받을 수 있습니다. 아트 디렉션을 웹보다 인쇄 세계에 더 적합한 활동이라고 생각하십니까? 어떤 사람들은 아트 디렉션을 어떤 면에서 엘리트주의자라고 생각할 수도 있습니다.

나는 그 중 어느 것도 사실이라고 생각하지 않습니다. 이야기는 어디에서 또는 어떤 매체를 통해 전달되든 이야기입니다. 그것들은 ProPublica에 게시된 것과 같이 생각을 자극할 수도 있고, 당신 회사의 이야기일 수도 있고 사람들이 당신과 거래해야 하는 이유일 수도 있습니다. 당신의 자선단체가 좋은 일을 지원하는 방법과 사람들이 기부를 해야 하는 이유에 대한 이야기가 있습니다. 그런 다음 스타트업의 새 앱에 대한 이야기와 누군가가 이 앱을 다운로드해야 하는 이유가 있습니다. 이 모든 이야기에는 당신이 하거나 판매하는 것에 대한 사실을 말하는 것 이상의 더 깊은 메시지가 있습니다.

아트 디렉션은 이러한 메시지를 이해하고 단어와 시각 자료의 구성과 표현을 통해 메시지를 가장 잘 전달할 수 있는 방법을 결정하는 것입니다. 아트 디렉션이 웹과 관련이 있습니까? 물론. 아트 디렉터는 디자인을 사용하여 사람들이 콘텐츠의 중요성을 더 잘 이해할 수 있도록 돕습니다. 이는 인쇄물과 마찬가지로 웹에서도 중요합니다. 사실 아트 디렉션의 기본 원칙은 인쇄물과 디지털 간에 변하지 않았습니다.

더 나아가 여러 채널에서 일관된 경험을 만들기 위해서는 아트 디렉션이 필수적이므로 기기와 화면 크기의 차이에서 이야기의 의미를 잃지 않도록 해야 합니다.

이전에 Guardian과 New Statesman의 일원이자 다른 많은 출판물을 설계한 David Hillman은 다음과 같이 말했습니다.

"(아트 디렉션) 가장 좋은 형태는 아트 디렉터가 잡지가 말하는 내용을 완전히 깊이 이해하고 디자인을 통해 잡지가 전달되는 방식에 영향을 미치도록 하는 것입니다."

우연히도 가디언의 전 크리에이티브 디렉터였던 내 친구 마크 포터는 이렇게 말했습니다.

"디자인은 공간의 요소 분포를 담당하고 있습니다."

CSS Grid를 사용하면 이전보다 훨씬 더 많은 요소의 배포를 담당할 수 있습니다.

하드보일드 스토리 아트 디렉팅

이제 이 문제를 다룰 시간이라고 생각합니다. 따라서 Hardboiled 일련의 예제에서 이 중 일부를 작동시키는 방법을 알려 드리겠습니다. 레이아웃과 그것이 스토리텔링에 어떻게 도움이 되는지를 조명하고 CSS 그리드를 사용하여 이러한 디자인 중 하나를 개발하는 방법에 대해 설명하겠습니다.

먼저, 뒷이야기. Hardboiled Web Design 의 2010년판 표지(1)에서 빨간 드레스를 입은 수수께끼의 여성(항상 빨간 드레스를 입은 여성이 있음)이 우리의 개인 성기에 총을 겨누고 있습니다. (쳇, 그 느낌은 나도 알아.) 2015년 5주년 기념판(2)까지 이야기는 계속 진행되고 그림자는 우리 탐정 사무실 문 너머로 불길하게 움직인다. 문이 열리고(3) 두 명의 악당이 등장하고 주먹다짐이 이어집니다(4). 우리의 미스터리한 여자는 펀치를 던지는 방법을 확실히 알고 있고 "키스해, 치명적"이라고 말하기 전에 한 악당이 의자에 묶여 있고 콩을 쏟을 준비가 되어 있습니다(5).

3장

그 두 악당이 문을 열었을 때 폭발적인 순간에 그 이야기를 시작하겠습니다. 이제 Scott McCloud의 책 'Understanding Comics'를 읽으셨다면 패널 크기가 사람들이 한 지역을 바라보는 시간에 영향을 미친다는 것을 알게 되실 것입니다. 그래서 저는 그 영향을 극대화하기 위해 우리의 나쁜 놈들의 이미지를 최대한 크게 만들고 싶습니다. (1). 후드가 모르는 것은 우리 여성이 그들을 기다리고 있다는 것입니다. 나는 레이아웃을 사용하여 아이 라인을 연결하여 긴장감을 더하고 (2) 동시에 내용이 시작되는 곳으로 독자의 눈을 끕니다.

4장

첫 번째 악당이 장면에 등장할 때 여백 없이 페이지의 왼쪽 가장자리를 사용하여 열린 문(1)을 나타냅니다. 대부분의 작업이 오른쪽에서 발생하므로 페이지의 높이와 너비의 대부분을 사용하여 넓은 공간 영역을 만듭니다(2).

이제 주먹이 모든 방향으로 날아갈 때 레이아웃이 동일하게 수행되어야 합니다. 따라서 내 콘텐츠는 맨 위(공백이 눈을 아래로 하는 굵은 단락(3))와 왼쪽에서 거대한 헤드라인(4)으로 옵니다. . 왜 내가 오른쪽 상단에 있는 작은 이미지를 언급하지 않았는지 의아해 할 수 있지만 잠시 후에 설명하겠습니다.

5장

싸움은 끝났고 우리 탐정은 다시 통제권을 잡았습니다. 그래서 이 마지막 페이지에서 더 구조화된 레이아웃을 사용하여 반환된 명령을 반영합니다. 주변에 많은 공백이 있는 양쪽 정렬된 텍스트의 단색 열(1)은 차분한 느낌을 더합니다. 동시에 오른쪽 정렬된 캡션(2)은 마치 총을 겨누는 심문처럼 초조하고 불편합니다.

내 손을 더러워지기

고백할 시간입니다. CSS 그리드를 사용한 레이아웃 개발에 대해 알아야 할 모든 것을 가르쳐주지는 않을 것입니다.

• Rachel Andrew의 Grid by Example
• Wes Bos로 CSS 그리드 배우기
• CSS 트릭에 대한 Chris House의 완벽한 그리드 가이드

대신 하나의 그리드에 대한 영감, CSS 그리드의 열과 행을 사용하여 (큰 화면) 레이아웃으로 변환한 다음 grid-template area 속성을 사용하여 생성된 공간 영역에 요소를 배치한 방법을 보여드리겠습니다. 마지막으로 더 작은 화면 크기에 맞게 디자인을 분해하고 변경하겠습니다.

완벽한 비트

내가 사용하는 레이아웃에 대한 영감 은 Face Magazine 을 위해 Neville Brody가 1983년에 디자인한 이 디자인에서 나왔습니다. 브로디가 가로축과 세로축, 그리고 메인 이미지가 차지하는 넓은 공간을 영리하게 만들어낸 모습에 매료되었습니다.

내 페이지의 여백 없는 <body> 요소에 다음 CSS Grid 속성을 적용하여 동일한 작업을 수행했습니다. 여기서 열은 1개의 분수 단위 너비로 2vw 간격으로 5번 반복됩니다.

 body { margin: 0; padding : 0; display: grid; grid-column-gap : 2vw; grid-template-columns: repeat(5, 1fr); } 

CSS Grid에서 이름을 지정하여 그리드 모듈을 정의한 다음 grid-template-areas 속성을 사용하여 단일 모듈 또는 공간 영역으로 알려진 여러 인접 모듈에 요소를 배치합니다. 복잡해보이죠? 아니 정말. CSS 그리드를 사용하는 가장 쉽고 확실한 방법 중 하나이므로 작업을 시작하겠습니다.

먼저 첫 번째 것들. 나는 포지셔닝할 5가지 요소를 가지고 있으며, 그것들은 나의 "Kiss Me, Deadly" 제목, 가장 큰 '배너' 이미지, 주요 콘텐츠, 옆 문단 및 두 개의 이미지, fig-1 및 fig-2입니다. 내 HTML은 다음과 같습니다.

 <body> <picture role="banner">…</picture> <h1 class="title">…</h1> <main>…</main> <aside>…</aside> <img class="fig-1"> <img class="fig-2"> </body>

나는 내러티브를 구성할 때와 마찬가지로 가장 의미 있는 순서로 마크업을 작성했습니다. 작은 화면에서도 스타일 없이도 꿈처럼 읽힙니다. 각 요소에 그리드 영역 값을 지정합니다. 이 값은 잠시 후 그리드에 배치하는 데 사용할 것입니다.

 [role="banner"] { grid-area: banner; } .title { grid-area: title; } main { grid-area: main; } aside { grid-area: aside; } .fig-1 { grid-area: fig-1; } .fig-2 { grid-area: fig-2; }

그리드 영역 값이 반드시 요소 유형을 반영할 필요는 없습니다. 실제로 a, b, c 또는 d와 같은 단일 문자를 포함한 모든 값을 사용할 수 있습니다.

다시 그리드를 사용하여 이전에 만든 열에 3개의 행을 추가합니다. 각 행의 높이는 그 안의 내용 높이에 의해 자동으로 정의됩니다.

 body { grid-template-rows: repeat(3, auto); }

여기에서 마법이 발생합니다. 말 그대로 grid-template-areas 속성을 사용하여 CSS에서 그리드를 그립니다. 여기서 각 마침표(.)는 하나의 빈 모듈을 나타냅니다.

 body { grid-template-areas: ". . . . ." ". . . . ." ". . . . ."; }

이제 이전에 만든 그리드 영역 값을 사용하여 해당 그리드에 요소를 배치할 차례입니다. 각 요소의 값을 그리드의 모듈에 배치하고 해당 값을 여러 인접 모듈(열 또는 행에 걸쳐)에 반복하면 해당 요소가 확장되어 공간 영역을 생성합니다. 마침표(.)를 남기면 빈 공간이 생성됩니다.

 body { grid-template-areas: ". aside . fig-2 fig-2" "title title banner banner banner" "fig-2 main banner banner banner"; }

레이아웃 CSS를 마치기 전에 한 가지 더 작은 세부 사항. 나는 옆 요소의 내용이 맨 아래에 위치하도록 하고(제목에 가깝고 그 위에 충분한 공백을 남겨 누군가의 시선을 끌도록) Flexbox를 배울 때 친숙할 수 있는 align-self 속성을 사용하지만 '끝'의 새로운 가치.

 aside { align-self: end; } 

남은 것은 눈에 띄는 반전 색상 구성과 제목의 "Deadly"라는 단어를 우리 여성의 드레스 색상과 연결하는 밝은 빨간색 악센트를 포함하여 디자인에 생명을 불어넣는 몇 가지 다른 스타일을 추가하는 것입니다.

 <h1 class="title">Kiss Me, <em>Deadly</em></h1> .title em { font-style: normal; color : #fe3d6b; }

연기 속으로 올라가다

이제, 나는 당신이 그 작은 싸움 이미지에 대해 궁금해하고 있다는 것을 알고 있으며, 나는 무언가를 인정해야 합니다. Natalie Smith는 Hardboiled Shot 표지를 위해 완성된 주먹 비행 일러스트레이션을 단 한 개만 만들었지만 그녀의 스케치는 낭비하기에는 너무 좋았습니다. CSS 그리드를 사용하여 연필 스케치의 반전된 버전을 총 위에 배치하고 CSS 변환으로 회전하여 연기 구름을 형성했습니다.

부수다

이 기사에서는 큰 화면을 위한 레이아웃을 만드는 방법을 보여주었지만 실제로는 작은 것으로 시작한 다음 중단점을 사용하여 스타일을 추가하거나 변경하면서 작업합니다. CSS 그리드를 사용하면 다양한 화면 크기에 레이아웃을 적용하는 것이 요소를 다른 그리드 템플릿 영역에 배치하는 것만큼 쉽습니다. 이 작업을 수행할 수 있는 두 가지 방법이 있습니다. 먼저 그리드 자체를 변경하는 것입니다.

 body { grid-template-columns: 50px repeat(2, 1fr); } @media screen and (min-width : 48em) { body { grid-template-columns: repeat(5, 1fr); } }

두 번째는 동일한 그리드의 다른 그리드 템플릿 영역에 요소를 배치하는 것입니다.

 body { grid-template-areas: "fig-1 aside aside aside aside" "fig-1 title title title title" "banner banner banner banner banner" ".... main main main main"; } @media screen and (min-width : 64em) { body { grid-template-areas: ".... aside .... fig-2 fig-2" "title title banner banner banner" "fig-1 main banner banner banner"; } } 

CSS 그리드 빌더 사용

그리드 템플릿 영역을 사용하면 아트 디렉팅 레이아웃을 쉽게 개발할 수 있어 저와 같은 평발도 할 수 있지만, 지저분한 작업을 수행하는 도구를 좋아하는 유형이라면 CoffeeCup Software의 CSS Grid Builder가 너. 이전에 WYSIWYG 편집기를 사용한 적이 있을 수 있으므로 그들이 내뱉은 코드가 얼마나 형편없었는지 기억하고 있을 것입니다. 내가 당신을 거기에서 멈추게 해주세요. CSS 그리드 빌더는 깔끔한 CSS와 접근 가능한 마크업을 출력합니다. 스스로 작성하는 것만큼 깨끗하지는 않지만 아주 가깝고 이를 개발한 소규모 팀이 더 나은 기능을 제공할 계획입니다. 내 손으로 쓴 HTML은 다음과 같습니다.

 <picture role="banner"> <source media="(min-width: 64em)"> <img src="banner-small.png" alt="Kiss Me, Deadly"> </picture>

CSS Grid Builder <picture> 요소는 적절한 측정을 위해 몇 가지 다른 요소가 추가된 추가 분할로 래핑됩니다.

 <div class="responsive-picture banner" role="banner"> <picture> <!--[if IE 9]><video><![endif]--> <source media="(min-width: 64em)"> <!--[if IE 9]></video><![endif]--> <img alt="Kiss Me, Deadly" src="banner-small.png"> </picture> </div>

내가 말했듯이 충분히 닫고 나를 믿지 않는다면 내 Hardboiled 예제에서 내보낸 파일 세트를 다운로드하십시오. 아마도 그것이 당신을 확신시킬 것입니다.

브라우저의 개발자 도구는 격자를 검사하는 데 점점 더 좋아지고 있지만 CSS Grid Builder를 사용하면 격자를 구축할 수 있습니다. 확실히. 기본적으로 CSS Grid Builder는 사용자 인터페이스에 래핑된 Chromium 기반 브라우저이며 macOS 및 Windows에서 실행됩니다. 즉, 브라우저에서 렌더링할 수 있는 경우 UI 도구에서 작성할 수 있지만 CSS 모양을 포함하여 한두 가지 주목할만한 예외가 있습니다.

사실, CSS Grid Builder는 그리드 이상을 구축하며 매우 편리한 그라디언트 를 포함하여 테두리 및 타이포그래피 를 포함한 배경 스타일을 생성하는 데 사용할 수 있습니다. Flexbox 및 다중 열 레이아웃 도 처리하지만 CSS Grid에 대해 배우고 싶기 때문에 여기 있습니다.

인터페이스 둘러보기

CSS Grid Builder의 인터페이스는 왼쪽에서 만들고 있는 디자인을 위한 넓은 영역과 오른쪽에서 제어할 수 있는 넓은 영역으로 예상한 대로입니다. 이러한 컨트롤에는 공통 요소가 포함됩니다. 텍스트, 이미지, 대화형 버튼 및 양식 컨트롤, 레이아웃 컨테이너. 이러한 요소 중 하나가 필요한 경우 작업 영역으로 끌어다 놓습니다.

을 눌러 스타일 탭을 표시하면 클래스 및 ID 속성에 이름을 지정하고 특정 중단점 및 특정 상태에 스타일을 적용하는 컨트롤을 찾을 수 있습니다. 모두 매우 유용하지만 창 하단에 다소 불편하게 숨겨져 있는 레이아웃 섹션이 가장 흥미롭습니다.

이 섹션에서는 그리드를 디자인할 수 있습니다. 시각적 표현 없이 레이아웃을 형성하기 위해 열과 행을 설정하는 것은 '그리드'가 작동하는 방식을 배우는 데 있어 가장 어려운 부분 중 하나일 수 있습니다. 그리드 구조를 시각적으로 정의하는 앱의 기능은 특히 CSS 그리드를 처음 접하는 경우 편리한 기능입니다. 제가 설명드릴 부분입니다.

CSS Grid Builder를 사용하여 컨테이너 분할을 추가했습니다. 작업 영역에서 선택하면 그리드 편집기에 액세스할 수 있습니다. 활성화하면 그리드를 시각적으로 구축하는 데 필요한 모든 도구가 있습니다.

• 열 및 행 추가
• 각 모듈 내의 콘텐츠 및 항목 정렬 및 정당화
• fr 및 minmax를 포함한 모든 유형의 단위를 사용하여 열과 행 크기 조정
• 간격 지정
• 그리드 템플릿 영역 이름 지정
• 중단점 지정

해당 설정에 만족하면 "확인"이 변경되고 작업 영역의 디자인에 적용됩니다. 돌아가서 슬라이더를 사용하여 다양한 중단점에서 결과를 미리 보고, 사용할 수 없는 브라우저를 사용하는 사람들의 비율이 줄어드는 것에 대해 걱정하는 사람 중 하나인 경우 CSS Grid Builder는 대체를 파악할 수 있는 설정도 제공합니다. 그런 다음 CSS 스타일을 복사하여 프로젝트의 다른 위치에 붙여넣거나 전체 키트와 caboodle을 내보냅니다.

CSS Grid Builder는 현재 무료 이며 CoffeeCup이 개발하고 있는 작업이 마음에 들면 개발 자금을 지원하기 위해 몇 달러를 투자할 수 있습니다.

청소

CSS Grid에 대한 흥분을 억제하기가 어렵습니다. 예, 더 많이 나와야 한다는 것을 압니다. 그러나 그것이 우리가 만드는 웹사이트를 청중에게 전달하려는 목표를 더 잘 전달할 수 있도록 다른 미디어로부터 교훈을 얻을 수 있는 가장 좋은 기회를 제공한다고 생각합니다. 더 많이 팔고자 하는 기업을 위한 웹사이트를 만들든, 기부를 통해 더 많은 돈을 모아야 하는 자선단체든, 더 효과적으로 이야기를 전하고 싶은 뉴스 매체를 만들든 CSS Grid와 사려 깊고 예술적으로 연출된 콘텐츠는 이 모든 것을 가능하게 합니다.

이제 하드보일드 입니다.

이 기사가 도움이 되었기를 바랍니다. 이제 CodePen에서 프로젝트 파일을 보거나 예제 파일을 다운로드하십시오.

Andy Clarke의 'Art Direction for the Web', 최초의 Hardboiled 웹 디자인 '샷'. Shots는 2018년 내내 출판될 'Art Directing for the web', 'Designing with a Browser', 'Selling the Creative Ideas'에 대한 단편 시리즈입니다.