Emmett McBain의 영감을 받은 디자인 결정: 사회적 자산으로서의 아트 디렉션

광고와 함께 판매는 사람들이 종종 눈살을 찌푸리게 하는 기술입니다. 사실입니다. 강요하거나 오도하는 사람을 좋아하는 사람은 없고 방해받는 것을 즐기는 사람도 없습니다.

그러나 당신의 열망, 동기, 필요를 이해하는 판매원에 의해 잘 팔리는 것은 구매자와 판매자에게 유익한 경험이 될 수 있습니다.

판매 방법을 배우는 것은 직장 생활 초기에 내가 한 가장 좋은 일 중 하나였습니다. 그때는 사진장비를 팔았고, 목표달성으로 인한 스트레스는 별로 즐기지 않았지만 사진가들과의 만남은 늘 즐거웠다.

새로운 고객을 찾는 것은 종종 냉담하고, 스튜디오 문을 두드리고, 자주 거절당하는 것을 의미했습니다. 나는 우리 회사가 나에게 판매하기 위해 나에게 지불한 제품을 언급하기 전에 누군가의 일에 대해 이야기하는 데 시간을 보냈다. 저는 사진에 정말 관심이 많았지만 다른 사람의 문제를 이해하는 것이 내 제품이 문제를 해결하는 데 어떻게 도움이 될 수 있는지 설명하는 것만큼 중요하다는 것도 배웠습니다.

카메라 판매를 중단하고 재능을 판매하기 시작한 이후로 배운 것이 측량할 수 없는 도움이 되었습니다. 그것은 내가 사람들을 대하는 데 도움이 되었습니다. 특히 내 아이디어를 고객에게 발표(읽기: 판매)하는 데 도움이 되었습니다.

항상 최고의 아이디어나 최선의 실행이 프레젠테이션이나 프레젠테이션에서 승리하는 것은 아닙니다. 그것은 종종 최고의 영업 사원이 판매하는 아이디어입니다.

아이디어를 판매하는 것은 최고의 기술 중 하나가 되어야 하므로 판매하는 법을 배우십시오. 당신이 판매하는 사람이 당신의 아이디어와 그들이 당신에게서 그것을 사야 하는 이유를 이해할 수 있도록 당신의 작품에 대해 이야기하는 방법을 배우십시오. 당신의 말과 작품으로 사람들에게 영감을 주는 법을 배우십시오. 그들이 당신에게서 구매해야만 하는 당신의 아이디어의 일부인 것처럼 느끼게 하십시오.

1950년대, 60년대, 70년대에 광고 분야에서 일한 흑인계 미국인 그래픽 디자이너로서 Emmett McBain은 놀라운 재능을 가졌을 뿐만 아니라 다른 아프리카계 미국인에게 판매하는 방법도 이해했습니다.

그는 고객의 제품을 판매하기 위해 자신의 디자인이 흑인 청중과 관련된 이미지와 친숙한 언어를 보여줌으로써 흑인 청중의 공감을 불러일으킬 필요가 있다는 것을 알고 있었습니다.

수염 난 영국인으로서 나와 다른 문화적 관점을 이해하는 것은 쉽지 않습니다. 그러나 저는 사람들이 어떻게 생겼고 어디에 살든지 말해주는 디자인을 만드는 것의 가치를 배웠습니다. 고객의 제품을 판매할 뿐만 아니라 모든 사람이 고객의 요구 사항에 귀를 기울이고 고객의 중요성을 이해하고 있다고 느낄 수 있도록 합니다.

1935년 시카고에서 태어난 Emmett McBain은 아프리카계 미국인 그래픽 디자이너로 광고에서 아프리카계 미국인의 표현에 놀라운 영향을 미쳤습니다.

McBain은 여러 미술 학교에서 공부했으며 시카고의 American Academy of Art에서 상업 미술을 공부한 후 졸업했습니다.

Vince Cullers and Associates는 1958년에 설립된 미국 최초의 아프리카계 미국인 소유 전체 서비스 광고 대행사입니다. Cullers는 광고주가 아프리카계 미국인 소비자에게 다가가려면 "흑인 판매"가 "흑인을 생각하는 것"이 ​​필요하다고 믿었습니다. 그는 아프리카계 미국인들에게 판매했을 뿐만 아니라 광고에 대해 교육하고 자신의 에이전시에서 고용하는 데 도움을 주었습니다. 그 직원 중 한 명이 새로 졸업한 Emmett McBain이었습니다.

2년의 상업 경력을 가진 McBain은 Vince Cullers를 떠나 Playboy Records에서 보조 아트 편집자로 옮겼습니다. 그러나 그는 후배 역할에 오래 머물지 않았고 곧 플레이보이의 판촉 아트 디렉터가 되었다. McBain은 커버 아티스트로 틈새 시장을 개척했으며 1958년 그의 Playboy Jazz All-Stars 앨범 아트는 Billboard Magazine의 이번 주 앨범 표지로 선정되었습니다.

1959년에 McBain은 Playboy에서 물러났지만 앨범 표지 작업을 포기하지 않았습니다. 그의 새로 설립된 디자인 스튜디오 McBain Associates는 정기적으로 Mercury Records와 협력했으며 24세 때까지 75개 이상의 앨범 표지를 디자인했습니다.

McBain은 1968년 크리에이티브 디렉터로 Vince Cullers Advertising으로 돌아와 흑인 미국인을 위한 광고에 가장 중요한 공헌을 했습니다.

1960년대 이전에 흑인 소비자는 유명 브랜드 제조업체와 주류 광고 업계에서 무시당했습니다. 아프리카계 미국인에 대한 광고는 주로 흑인 청중을 위한 신문으로 제한되었습니다.

광고주들이 흑인 소비자를 가처분 소득이 거의 없는 것으로 보았기 때문에 백인 고객들은 아프리카계 미국인들에게 판매하는 데 돈을 쓰는 것을 주저했습니다. 정치적으로 가혹한 당시 분위기에서 기업들은 자신들의 브랜드를 아프리카계 미국인과 연관 짓는 것을 두려워했습니다.

아프리카계 미국인도 광고 업계에서 대표되지 않았고 광고에서 일하는 흑인의 수도 적었습니다. 그러나 1960년대 중반에 광고 대행사에서 아프리카계 미국인을 모집하기 시작했습니다. 이 에이전시는 그들의 경험이 클라이언트의 메시지가 그때까지 매년 거의 300억 달러를 지출한 아프리카계 미국인 청중과 더 관련이 있기를 바랐습니다.

McBain의 작업은 아프리카계 미국인과 흑인 커뮤니티에 긍정적인 메시지를 제공했습니다. 그는 Newport의 멘톨 담배, Philip Morris의 Marlboro, 특히 Black skin을 위한 SkinFood Cosmetics의 미용 제품을 포함하는 클라이언트를 위해 일상적인 환경에서 일상적인 사람들의 이미지를 사용했습니다. Vince Cullers와 마찬가지로 McBain은 흑인 소비자에게 판매하는 것이 그들의 다양한 요구를 이해한다는 것을 의미한다는 것을 알고 있었습니다. 그는 미래의 파트너이자 카피라이터인 Thomas Burrell이 "흑인은 피부가 검은 백인이 아닙니다."라고 말했습니다.

1971년 Emmett McBain은 Burrell과 제휴하여 Burrell-McBain Inc.를 설립했으며, 광고에서 "암거래 시장을 위한 광고 대행사"로 설명했습니다. Burrell과 McBain은 흑인 미국인을 착취하기보다는 흑인 청중과 진정성 있고 존중하는 관계를 형성하는 것을 목표로 했습니다.

Burrell과 McBain 이전에는 상징적인 흰색 카우보이가 말보로 담배의 얼굴이었습니다. 그러나 McBain의 Marlboro 남자는 아프리카 계 미국인 흡연자들과 더 관련이 있습니다. 말보로의 카우보이가 미국 서부의 이상화된 버전에서 보여진 반면, McBain의 흑인 캐릭터는 일상적인 환경에서 담배를 피우는 것으로 나타났습니다.

그들의 말보로 캠페인은 큰 성공을 거두었고 Burrell과 McBain은 계속해서 Coca-Cola와 McDonald's를 고객으로 확보하여 그들이 미국에서 가장 큰 흑인 소유 광고 대행사가 되도록 도왔습니다.

McBain은 1974년 자신이 공동 설립한 에이전시를 떠나 예술가로서의 경력을 시작했습니다. 그는 자신의 아트 갤러리인 Black Eye를 열고 Black Eye라고도 하는 컨설팅 회사를 설립하여 대행사들이 아프리카계 미국인 커뮤니티와 더 잘 연결되도록 도왔습니다.

Emmett McBain은 2012년 암으로 사망한 후 AIGA, Society of Typographic Arts, Chicago 및 Detroit의 Art Directors Clubs에서 인정을 받았습니다.

슬프게도 Emmett McBain과 광고 및 디자인에 대한 그의 공헌에 대한 책이 출판되지 않았습니다. 나는 디자인 컨퍼런스에서 그의 이름이 언급되는 것을 들어 본 적이 없으며 현대 디자인, 특히 웹과 관련된 기사에서 그가 언급되는 것을 본 적이 없습니다.

McBain의 후기 작업은 1960년대 이후 광고에 지대한 영향을 미쳤지만 저는 특히 그의 음반 표지 디자인을 좋아합니다. McBain이 사랑한 재즈 음악을 반영하는 에너지 폭발. 그의 색상은 흥미롭고 생생합니다. 그가 선택한 서체와 서체를 해체하고 재구성하는 방식은 영감을 줍니다. Emmett McBain의 작업에는 우리에게 영감을 주는 것이 많이 있습니다.

세로 콘텐츠 정렬

내가 어떤 그래픽 스타일을 선택하든 이 최초의 McBain에서 영감을 받은 디자인을 구현하는 데 필요한 HTML은 동일합니다. 세 가지 구조적 요소가 필요합니다. 내 SVG 로고와 헤드라인이 포함된 헤더, 메인, 시트로엥 DS 생산 번호 테이블이 포함된 제사이드:

 <header> <svg>…</svg> <div> <svg>…</svg> <svg>…</svg> </div> </header> <main> <p>…</p> </main> <aside> <table>…</table> </aside>

화면 크기에 따른 확장성을 위해 헤더의 두 헤드라인에 SVG를 사용합니다. SVG를 사용하면 두 번째 헤드라인의 획이 있는 텍스트에 추가적인 일관성을 제공하지만 접근성을 잊지 말아야 합니다.

8호에서 SVG에 ARIA를 추가하여 보조 기술을 사용하는 사람들을 돕는 방법을 설명했습니다. ARIA 역할 속성과 누락된 의미 체계를 대체하는 수준 속성을 추가합니다. title 요소를 추가하면 보조 기술이 SVG의 여러 블록 간의 차이점을 이해하는 데 도움이 되지만 브라우저는 이 제목을 표시하지 않습니다.

 <svg role="heading" aria-level="1" aria-label="Citroen DS"> <title>Citroen DS</title> <path>…</path> </svg>

이 디자인을 시작하기 위해 전경색과 배경색으로 시작하는 모든 화면 크기에 대한 기본 기초 스타일을 추가합니다.

 body { background-color: #fff; color: #262626; }

헤더의 SVG 요소에 정확한 픽셀 치수를 추가한 다음 자동 수평 여백을 사용하여 Citroen 로고 중앙에 배치합니다.

 header > svg { margin: 0 auto; width: 80px; } header div svg { max-height: 80px; }

영감을 주는 디자인에서 Emmet McBain은 레이아웃에 구조를 추가하기 위해 수직 검은색 줄무늬를 포함했습니다. HTML에 추가 요소를 추가하지 않고 유사한 효과를 얻으려면 기본 단락의 왼쪽과 오른쪽 모두에 어두운 테두리를 추가합니다.

 main p { padding: .75rem 0; border-right: 5px solid #262626; border-left: 5px solid #262626; }

동일한 기술이 내 시트로엥 DS 생산 번호 테이블에 유사한 효과를 추가합니다. 내 테이블에 두 개의 외부 테두리를 추가합니다.

 aside table { width: 100%; border-right: 5px solid #262626; border-left: 5px solid #262626; border-collapse: collapse; }

그런 다음 테이블 헤더 오른쪽에 세 번째 규칙을 추가합니다.

 aside th { padding-right: .75rem; padding-left: .75rem; border-right: 5px solid #262626; }

모든 셀이 내 테이블 너비의 절반을 채우도록 하면 이 세로 줄무늬가 위에서 아래로 중앙을 따라 이동합니다.

 aside th, aside td { width: 50%; box-sizing: border-box; }

누군가가 이러한 연도 및 생산 번호 쌍과 같은 숫자 테이블 형식 데이터를 읽을 때 눈은 연도 열을 스캔합니다. 그런 다음, 그들은 그 해에 시트로엥이 생산한 자동차 수를 확인하기 위해 따라갑니다. 사람들은 높거나 낮은 숫자를 찾기 위해 생산 숫자를 비교할 수도 있습니다.

비교를 더 쉽게 하기 위해 생산 번호를 오른쪽에 정렬합니다.

 aside td { text-align: right; }

선택한 글꼴에서 사용할 수 있는 OpenType 기능에 따라 구식 숫자 대신 줄을 지정하여 표 형식 데이터 가독성을 향상시킬 수도 있습니다. 3, 4, 7, 9를 포함한 일부 구식 숫자에는 기준선 아래로 떨어질 수 있는 디센더가 있습니다. 이렇게 하면 더 긴 숫자 문자열을 읽기가 더 어려워집니다. 반면 안감 숫자에는 기준선에 있는 숫자가 포함됩니다.

OpenType 기능은 또한 숫자의 너비를 제어하여 테이블의 숫자 문자열을 더 쉽게 비교할 수 있도록 합니다. 비례 숫자는 크기가 다를 수 있지만 표 숫자는 너비가 모두 같으므로 수십, 수백, 수천이 더 정확하게 정렬됩니다.

 aside td { font-variant-numeric: lining-nums tabular-nums; }

마지막으로 이 작은 화면 디자인의 하단에 원형 모티브를 소개합니다. 내 HTML에 이러한 원형 이미지를 포함하고 싶지 않으므로 이미지 파일이 문자열로 인코딩되는 CSS 생성 콘텐츠 데이터 URI를 사용합니다.

 aside:after { content: url("data:image/svg+xml…"); }

여러 화면 크기에 맞는 디자인을 개발하기 위해 변경해야 할 사항이 얼마나 적은지 자주 놀라곤 합니다. 작은 화면에서 중간 크기 디자인으로 전환하는 경우 종종 유형 크기를 약간 변경하고 간단한 레이아웃 스타일을 도입하면 됩니다.

헤더에서 시트로엥 로고와 SVG 헤드라인을 수평으로 정렬하는 것으로 시작합니다. 중형 및 대형 화면에서 이 로고는 HTML에서 첫 번째로 표시되고 헤드라인은 두 번째로 표시됩니다. 그러나 시각적으로 요소가 반대입니다. Flexbox는 기본 flex-direction 값을 row에서 flex-direction: row-reverse로 변경하기만 하면 이 전환을 만들기 위한 이상적인 도구입니다.

 @media (min-width: 48em) { header { display: flex; flex-direction: row-reverse; align-items: flex-start; } }

이전에는 로고에 정확한 너비를 지정했습니다. 그러나 헤드라인이 나머지 수평 공간을 모두 채우길 원하므로 상위 부문에 flex-grow 값을 1로 지정합니다. 그런 다음 헤드라인과 로고를 분리하기 위해 뷰포트 기반 여백을 추가합니다.

 header div { flex-grow: 1; margin-right: 2vw; }

이 중간 크기 디자인의 경우 대칭 3열 그리드를 사용하여 레이아웃을 개발했으며 이를 기본 요소와 보조 요소 모두에 적용했습니다.

 main, aside { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }

그런 다음 이전에 옆 요소에 사용한 것과 동일한 기술을 사용하여 기본 요소에 대해 두 개의 이미지를 생성하고 그리드의 첫 번째 및 세 번째 열에 배치합니다.

 main:before { grid-column: 1; content: url("data:image/svg+xml…"); } main:after { grid-column: 3; content: url("data:image/svg+xml…"); }

나는 작은 화면을 위해 내가 추가한 생성된 이미지를 대체하는 이 새로운 :after 컨텐츠로 옆 요소에 대한 프로세스를 반복합니다.

 aside:before { grid-column: 1; content: url("data:image/svg+xml…"); } aside:after { grid-column: 3; content: url("data:image/svg+xml…"); }

중간 크기의 화면에서 사용할 수 있는 추가 공간을 통해 Emmett McBain의 독창적인 디자인에서 영감을 받은 세로 줄무늬 모티브를 더 많이 소개할 수 있습니다. 기본 단락의 왼쪽과 오른쪽에 세로 테두리가 이미 설정되어 있으므로 쓰기 모드를 vertical-rl로 변경하고 180도 회전하는 일만 남았습니다.

 main p { justify-self: center; writing-mode: vertical-rl; transform: rotate(180deg); }

일부 브라우저는 그리드 속성을 존중하며 도움 없이 테이블을 그리드 행의 전체 높이까지 늘립니다. 다른 사람들은 약간의 도움이 필요하므로, 나는 생산 번호 테이블에 행 사이에 균일한 양의 공간을 추가하는 명시적 높이를 제공합니다.

 aside table { height: 100%; }

이 McBain에서 영감을 받은 디자인의 완전한 효과는 화면이 메인 요소와 옆 요소를 나란히 표시할 수 있을 만큼 충분히 넓을 때 나타납니다. 간단한 2열 대칭 그리드를 적용합니다.

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } }

그런 다음 내 레이아웃의 전체 너비에 걸쳐 있는 헤더와 함께 줄 번호를 사용하여 기본 요소와 옆 요소를 배치합니다.

 header { grid-column: 1 / -1; } main { grid-column: 1; } aside { grid-column: 2; }

구조화되지 않은 모습

이 차기 디자인의 밝은 색상과 불규칙한 블록 모양은 Emmett McBain의 원본에 영감을 준 재즈만큼이나 의외입니다. 이러한 레이아웃의 배열이 구조화되지 않은 것처럼 보일 수 있지만 이를 개발하는 데 필요한 코드는 확실히 그렇지 않습니다. 실제로 헤더와 메인이라는 두 가지 구조적 요소만 있습니다.

 <header> <svg>…</svg> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <small>…</small> <h2>…</h2> <p>…</p> </main>

먼저 배경색과 전경색을 적용하고 다른 사람의 눈이 디자인의 공간을 돌아다닐 수 있도록 충분한 양의 패딩을 적용합니다.

 body { padding: 2rem; background-color: #fff; color: #262626; }

그 밝은 색상의 블록은 작은 화면에서 사용할 수 있는 제한된 공간을 지배합니다. 대신 헤더에 동일한 밝은 색상을 추가합니다.

 header { padding: 2rem 2rem 4rem; background-color: #262626; } header h1 { color: #c2ce46; } header p { color: #fc88dc; }

불규칙한 모양은 모든 화면 크기에서 볼 수 있기를 원하는 이 디자인의 한 측면이므로 폴리곤 경로를 사용하여 헤더를 자릅니다. 클립 영역 내부의 영역만 계속 표시되고 나머지는 모두 투명해집니다.

 header { -webkit-clip-path: polygon(…); clip-path: polygon(…); }

타이포그래피의 가장 작은 세부 사항에도주의를 기울이면 디자인의 모든 측면이 신중하게 고려되었음을 알 수 있습니다. 내 주요 콘텐츠의 시작 부분에 있는 작은 요소의 수평선은 텍스트와 함께 길이를 변경합니다.

내 HTML에 프리젠테이션 수평 규칙을 추가하고 싶지 않고 대신 내 CSS에서 Flexbox와 의사 요소의 조합을 선택합니다. 먼저 작은 요소의 텍스트에 스타일을 지정합니다.

 main small { font-size: .8em; letter-spacing: .15em; line-height: .8; text-transform: uppercase; }

그런 다음 텍스트 색상과 일치하는 얇은 하단 테두리가 있는 :after 의사 요소를 추가합니다.

 main small:after { content: ""; display: block; margin-left: .75rem; border-bottom: 1px solid #262626; }

flex 속성을 추가하면 텍스트와 유사 요소가 작은 요소의 맨 아래에 정렬됩니다. 의사 요소에 flex-grow 값을 1로 지정하면 더 길고 짧은 텍스트 문자열을 보완하기 위해 너비를 변경할 수 있습니다.

 main small { display: flex; align-items: flex-end; } main small:after { flex-grow: 1; }

나는 놀라움을 즐기며 두 번째 수준의 "Champion de France" 헤드라인에 눈에 보이는 것보다 더 많은 것이 있습니다.

거의 10년 전에 Dave Rupert는 Javascript를 사용하여 개별 문자, 줄 및 단어 텍스트를 span 요소로 래핑하는 jQuery 플러그인인 Lettering.js를 출시했습니다. 그런 다음 이러한 개별 요소는 다양한 방법으로 스타일을 지정할 수 있습니다. 이 디자인에서 단 하나의 멀티 컬러 요소로 스크립트를 제공하지 않고 동일한 기술을 적용합니다.

 <h2>Champion <span>d</span><span>e</span> <span>F</span><span>r</span><span>a</span><span>n</span><span>c</span><span>e</span></h2>

그런 다음 선택한 각 문자에 고유한 색상을 지정합니다.

 h2 span:nth-of-type(1) { color: #c43d56; } h2 span:nth-of-type(2) { color: #905dd8; } h2 span:nth-of-type(3) { color: #377dab; }

저는 항상 반응형 디자인의 도전을 창의력을 발휘하고 모든 화면 크기를 최대한 활용할 수 있는 기회로 여겼습니다. 중대형 화면에서 사용할 수 있는 추가 공간으로 인해 크고 불규칙한 모양의 색상 블록을 도입할 수 있어 이 디자인을 예기치 않게 만들 수 있습니다.

먼저 그리드 속성과 8열 대칭 그리드를 body 요소에 적용합니다.

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(8, 1fr); } }

그런 다음 헤더를 해당 열 중 세 개에 배치합니다. 색상 블록이 표시되면 헤더의 배경색을 짙은 회색으로 변경합니다.

 header { grid-column: 4 / 7; background-color: #262626; }

Flexbox 이전에는 가로 및 세로로 콘텐츠를 중앙에 배치하는 것이 어려웠지만 이제는 헤더 콘텐츠를 정렬하고 정당화하는 것이 간단합니다.

 header { display: flex; flex-direction: column; align-items: center; justify-content: center; }

헤더의 텍스트 요소 색상을 변경합니다.

 header h1 { color: #fed36e; } header p { color: #fff; }

그런 다음 음수 수평 여백을 적용하여 헤더가 가까운 요소와 겹칩니다.

 header { margin-right: 1.5vw; margin-left: -1.5vw; }

내 주요 요소는 추가 스타일 지정이 필요하지 않으며 줄 번호를 사용하여 그리드에 배치합니다.

 main { grid-column: 7 / -1; }

디자인을 개발하는 데 필요한 요소가 HTML일 필요는 없습니다. CSS에서 생성된 의사 요소가 그 자리를 대신할 수 있으므로 HTML을 프리젠테이션에서 자유롭게 유지합니다. 나는 바디에 적용된 :before 의사 요소를 사용합니다.

 body:before { display: block; content: ""; }

그런 다음 크기에 관계없이 전체 의사 요소를 덮을 데이터 URI 배경 이미지를 추가합니다.

 body:before { background-image: url("data:image/svg+xml…"); background-position: 0 0; background-repeat: no-repeat; background-size: cover; }

CSS Grid는 의사 요소를 다른 요소와 마찬가지로 취급하므로 줄 번호를 사용하여 이러한 다채로운 블록을 내 그리드에 배치할 수 있습니다.

 body:before { grid-column: 1 / 4; }

개발자는 대부분 미디어 쿼리 중단점을 사용하여 레이아웃에 중요한 변경 사항을 도입하지만 때로는 디자인을 조정하는 데 약간의 변경만 필요합니다. Jeremy Keith는 이러한 순간을 "트윅포인트"라고 부릅니다.

이 중간 크기의 McBain에서 영감을 받은 디자인은 더 큰 크기에서도 잘 작동하지만 레이아웃을 조정하고 가장 큰 화면에 더 많은 세부 사항을 추가하고 싶습니다. 그리드에 4개의 추가 열을 추가하는 것으로 시작합니다.

 @media (min-width: 82em) { body { grid-template-columns: repeat(12, 1fr); } }

그런 다음 새 줄 번호를 사용하여 생성된 색상 블록, 헤더 및 기본 요소의 위치를 ​​변경합니다.

 body:before { grid-column: 1 / 8; } header { grid-column: 7 / 10; } main { grid-column: 9 / -1; }

이제 이러한 요소가 겹칩니다. 따라서 내 그리드에서 새 행을 형성하는 것을 방지하기 위해 모두 동일한 그리드 행 값을 제공합니다.

 body:before, header, main { grid-row: 1; }

내 디자인에 대한 이 조정은 헤더와 메인 사이에 또 ​​다른 색상 블록을 추가합니다. HTML의 의미를 보존하기 위해 기본 콘텐츠 앞에 의사 요소와 데이터 URI 이미지를 추가합니다.

 main:before { display: block; content: url("data:image/svg+xml…"); float: left; margin-right: 2vw; width: 10vw; }

유형 이미지 분해

경력 초기에 Emmett McBain의 레코드 표지 디자인은 그가 타이포그래피에 재능이 있음을 보여주었습니다. 그는 종종 활자를 가지고 장난을 치고, 그것을 해체하고, 예상치 못한 모양을 형성하도록 재건했습니다. 이러한 유형 제어는 온라인에서 결코 쉬운 일이 아니지만 SVG는 거의 모든 것을 가능하게 합니다.

McBain에서 영감을 받은 이 차세대 디자인은 SVG와 두 가지 구조적 HTML 요소에 의존합니다. 내 콘텐츠의 주요 요소인 큰 유형 기반 그래픽이 포함된 헤더:

 <header> <h1>…</h1> <p>…</p> <svg>…</svg> </header> <main> <h2>…<h2> <div>…</div> <svg>…</svg> </main>

이 디자인 개발을 시작하려면 기초 스타일이 거의 필요하지 않습니다. 먼저 배경색과 전경색을 추가하고 두 요소 내부에 패딩을 추가합니다.

 body { background-color: #fff; color: #262626; } header, main { padding: 2rem; }

둘째, 제목과 그 다음에 오는 텍스트 단락을 모두 포함하는 유형에 대한 스타일을 정의합니다.

 h1, h2, h1 + p { letter-spacing: .05em; line-height: 1.4; text-transform: uppercase; }

나는 반대쪽 패널의 시트로엥 색상과 일치하는 풍부한 보라색 배경을 주요 콘텐츠에 제공합니다.

 main { background-color: #814672; color: #fff; }

이 디자인은 시트로엥 DS의 프로필과 "Champion de France"라는 단어의 양식화된 이미지가 포함된 큰 그래픽이 지배합니다. 문자 배열은 CSS 위치 지정 및 변환을 사용하여 달성하기 까다로워서 SVG를 완벽한 선택으로 만듭니다.

이 SVG에는 세 가지 경로 그룹이 있습니다. 첫 번째는 "Champion de:"라는 단어의 개요를 포함합니다.

 <svg> <g> <path>…</path> </g> </svg>

다음 그룹에는 밝은 색상의 문자 배열을 위한 경로가 포함됩니다. 각 문자에 고유한 id 속성을 부여하여 개별적으로 스타일을 지정할 수 있습니다.

 <g> <path>…</path> <path>…</path> <path>…</path> <path>…</path> <path>…</path> <path>…</path> </g>

그런 다음 Citroen DS 프로필을 구성하는 경로 그룹에 클래스 속성을 추가합니다. 이러한 속성을 사용하여 자동차의 색상을 조정하여 다양한 색상 테마를 보완하고 미디어 쿼리 중단점에서 변경할 수도 있습니다.

 <g> <path class="car-paint">…</path> <path class="car-tyres">…</path> <path class="car-wheels">…</path> <path class="car-shadow">…</path> <path class="car-lights">…</path> <path class="car-stroke">…</path> </g>

중간 크기 화면을 사용하면 Citroen DS 프로필 및 유형 이미지의 위치를 ​​조정할 수 있습니다.

 @media (min-width: 48em) { header svg { margin-bottom: -6rem; transform: scale(.85) translateY(-4rem) rotate(-20deg); } }

회전, 크기 조정 및 이동의 다양한 조합이 미묘하게 다른 결과를 제공하므로 이러한 변환의 순서는 중요합니다. 그런 다음 기본 콘텐츠에 열을 추가합니다.

 main div { column-width: 14em; column-gap: 2rem; }

지금까지 이 주요 콘텐츠는 문서 흐름에서 내 헤더 다음에 옵니다. 더 큰 화면의 경우 이러한 요소가 나란히 배치되기를 원하므로 그리드 속성과 12개의 열을 본문에 적용합니다.

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(12, 1fr); } }

행 번호를 사용하여 헤더와 메인을 그리드에 배치합니다. 헤더는 7개 열에 걸쳐 있지만 주요 콘텐츠는 5개 열에 걸쳐 있어 대칭 그리드에서 비대칭 레이아웃을 생성합니다.

 header { grid-column: 1 / 8; } main { grid-column: 8 / -1; }

그래픽 텍스트 크기 조정

SVG와 HTML의 구분이 모호해지면 작업에 SVG를 더 많이 사용합니다. SVG는 XML 기반 형식이며 HTML에 통합될 때 완전히 집에 있습니다. McBain에서 영감을 받은 이 최종 디자인은 인상적인 이미지뿐만 아니라 텍스트에도 HTML의 SVG를 사용합니다.

이 눈에 띄는 빨간색과 검은색 디자인을 개발하려면 4개의 구조적 HTML 요소가 필요합니다. 헤더에는 아이코닉한 시트로엥 DS의 이미지가 포함되어 있습니다. 배너 부문에는 SVG 텍스트를 사용하여 개발된 큰 헤드라인이 포함됩니다. 주요 요소에는 실행 중인 텍스트가 포함되며 마지막으로 추가 콘텐츠는 따로 있습니다.

 <svg>…</svg> <header> <svg>…</svg> </header> <div> <svg>…</svg> </div> <main> <div> <svg role="heading" aria-level="1">…</svg> </div> <div class="content"> <p class="dropcap">…</p> <p>…</p> </div> </main> <aside> <small>…</small> <svg role="heading" aria-level="2">…</svg> <p>…</p> <figure>…</figure> <svg role="heading" aria-level="2">…</svg> <p>…</p> </aside>

SVG를 사용하여 텍스트를 렌더링하는 것은 이미지 내에서 텍스트를 설정하는 것만큼 부적절하다고 생각했지만 SVG를 더 많이 사용하면서 내가 틀렸다는 것을 깨달았습니다.

문제 8에서 HTML 텍스트와 마찬가지로 SVG 텍스트에 액세스하고 선택할 수 있는 방법을 설명했습니다. 또한 클리핑 패스, 그라디언트 채우기, 필터, 마스크 및 획을 사용하여 스타일을 무한대로 사용할 수 있다는 장점이 있습니다.

배너 부문의 헤드라인에는 두 개의 텍스트 요소가 포함됩니다. 첫 번째는 "Champion"이라는 큰 단어를 포함하고 두 번째는 "de France"를 포함합니다. 각 tspan 요소의 x 및 y 좌표 쌍은 해당 단어를 텍스트의 단단한 슬래브를 개발하려는 위치에 정확하게 배치합니다.

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 850 360"> <title>Champion de France</title> <g fill="#ff" fill-rule="evenodd"> <text> <tspan class="title__dropcap" x="0" y="240">C</tspan> <tspan class="title" x="180" y="160">hampion</tspan> </text> <text> <tspan class="title__small" x="600" y="260">de France</tspan> </text> </g> </svg>

이 SVG를 HTML에 통합하거나 외부 이미지로 링크하도록 선택하든 CSS를 사용하여 스타일을 정의할 수 있습니다. 이 헤드라인은 연결된 이미지이므로 SVG 파일에 스타일을 추가합니다.

 <svg> <style type="text/css"> <![CDATA[ text { color: #fff; } .title { font-family: Clarendon URW; font-size: 150px; } .title__dropcap { font-family: Clarendon URW; font-size: 300px; text-transform: lowercase; } .title__small { font-family: Obviously; font-size: 85px; text-transform: uppercase; } ]]> </style> </svg>

기본 색상과 타이포그래피 스타일을 추가하는 것으로 시작합니다. 각 새 단락의 시작 부분을 들여쓰기로 선택했으므로 모든 아래쪽 여백을 제거하고 모든 후속 단락에 2ch 너비 들여쓰기를 추가합니다.

 body { background-color: #a73448; color: #fff; } .content p { margin-bottom: 0; } .content p + p { text-indent: 2ch; }

내 옆 요소의 어두운 회색 배경과 빨간색 텍스트는 내 디자인의 다른 부분과 반대입니다. 밝기와 채도를 높이면 어두운 배경에서 색상이 더욱 생생하게 보입니다.

 aside { background-color: #262626; color: #d33c56; }

중간 크기 화면을 사용하면 사용 가능한 추가 공간을 최대한 활용하기 위해 콘텐츠 디자인을 조정할 수 있습니다. 두 개의 다른 다중 열 레이아웃 속성을 사용합니다. 먼저 내 콘텐츠 분할에 대해 가변 너비의 두 열을 지정합니다. 그런 다음 모두 너비가 16em인 열의 수는 다음과 같습니다.

 @media (min-width: 48em) { .content { column-count: 2; column-gap: 2rem; } aside { column-width: 16em; column-gap: 2rem; } }

내 스타일의 대부분은 가장 작은 화면을 사용하는 사람들도 볼 수 있으므로 큰 화면 레이아웃을 개발하려면 body 요소에 그리드 속성과 12개의 열을 적용해야 합니다.

 @media (min-width: 64em) { body { display: grid; grid-template-columns: repeat(12, 1fr); } }

시트로엥 로고를 첫 번째 열에 배치합니다.

 body > svg { grid-column: 1; }

그런 다음 상징적인 DS의 이미지가 포함된 헤더는 4개의 열에 걸쳐 있습니다.

 header { grid-column: 3 / span 4; }

세련된 SVG 헤드라인이 있는 배너 부문과 내 주요 콘텐츠의 실행 텍스트는 모두 8열을 차지합니다.

 #banner, main { grid-column: 1 / span 8; }

그리고 마지막으로 반전된 테마 옆 요소는 내 디자인의 오른쪽에 있는 세 개의 열을 차지합니다. 이 콘텐츠가 레이아웃의 맨 위에서 맨 아래까지 모든 행에 걸쳐 있는지 확인하기 위해 행 라인 번호를 사용하여 배치합니다.

 aside { grid-column: 10 / -1; grid-row: 1 / 6; }

시리즈에서 더 읽어보기

• 영감을 받은 디자인 결정: Avaunt Magazine
• 영감을 받은 디자인 결정: 시급한 사항
• 영감을 받은 디자인 결정: 어니스트 저널
• 영감을 받은 디자인 결정: Alexey Brodovitch
• 영감을 받은 디자인 결정: Bea Feitler
• 영감을 받은 디자인 결정: Neville Brody
• 영감을 받은 디자인 결정: Otto Storch
• 영감을 받은 디자인 결정: Herb Lubalin
• 영감을 받은 디자인 결정: Max Huber
• 영감을 받은 디자인 결정: Giovanni Pintori
• 영감을 받은 디자인 결정: Bradbury Thompson

주의: Smashing 회원Smashing 회원은 Andy의 Inspired Design Decisions 잡지의 아름답게 디자인된 PDF와 이 기사의 전체 코드 예제에 액세스할 수 있습니다. Andy의 웹사이트에서 직접 이 호의 PDF와 예제 및 기타 모든 호를 구입할 수 있습니다.