Otto Storch와 함께 영감을 받은 디자인 결정: 아이디어, 카피, 아트 및 타이포그래피가 분리될 수 없게 된 때

지난 몇 년 동안 HTML과 CSS에 대한 책은 내 스튜디오 책장에서 거의 사라졌습니다. 나는 그것들을 아트 디렉션, 편집 및 그래픽 디자인에 관한 책으로 대체했습니다.

최근에 나는 내 라이브러리에 새로 추가된 항목을 검색하다가 한 잡지의 퍼짐에 매료되었습니다. 나는 그 디자이너가 이미지와 타이포그래피를 장난스럽게 결합하여 에너지와 움직임으로 가득 찬 디자인을 만드는 방식을 좋아했습니다. 이 디자인을 다시 한 번 살펴보기 위해 제 iPhone으로 사진을 찍었습니다.

그 눈에 띄는 디자인을 처음 보았을 때 나는 그것을 만든 디자이너, 브루클린 태생의 Otto Storch에 대해 들어본 적이 없었습니다. 그는 수상 경력에 빛나는 그래픽 디자이너였지만 동시대의 많은 사람들과 달리 Storch와 그의 작업은 대부분 간과되었습니다.

Storch는 방대한 양의 작업을 축적했으며 그의 작업이 특히 온라인에서 더 널리 알려지지 않은 것은 놀라운 수치입니다. Storch에 대한 Wikipedia 페이지가 없으며 아무도 그에 대한 책을 출판하지 않았습니다.

나는 Otto Storch의 작업뿐만 아니라 그가 강한 직업 윤리를 지닌 다작 디자이너라는 사실에도 영향을 받았습니다. 저는 그가 Alexey Brodovitch에게서 배운 것을 디자인에 대한 접근 방식과 결합하여 독특하고 매력적인 작업을 수행한 방법에서 영감을 받았습니다. 나도 그렇게 할 수 있기를 바랍니다.

나는 디자인 컨퍼런스에서 Otto Storch의 이름이 언급되는 것을 들어 본 적이 없으며 웹 디자인에 관한 책에서 언급되는 것을 본 적이 없습니다. 그러나 그를 발견한 것은 더 많은 사람들이 그와 그의 작품을 알게 하고 싶게 만들었습니다.

그는 또한 비즈니스 중심적이고 빠르게 움직이며 실용적이고 기술적 제약이 있는 산업에서 창의성의 역할에 대해 생각하게 했습니다. 출판은 목이 졸린 사업이 될 수 있으며 Storch가 작업한 잡지는 유행하지 않았습니다. 그가 만든 것은 예술이 아니었지만 그것이 창의적이지 않다는 것을 의미하지는 않았습니다. Storch는 아이디어가 그림과 글만큼 효과적인 의사 소통에 필수적이라는 것을 이해했습니다. 경력 전반에 걸쳐 Storch는 매체의 한계에도 불구하고 아이디어를 포함하기 위해 열심히 노력했습니다. 이는 1960년대 잡지에서와 마찬가지로 오늘날 웹에서도 필수적인 접근 방식입니다.

영감을 받은 오토 스토치

Otto Storch는 1913년에 태어나 1930년대에 잊혀진 디지털 이전 사진 리터칭 기술에서 경력을 시작했습니다. 1950년대에 Storch는 저녁 수업을 듣고 Alexey Brodovitch 밑에서 디자인을 공부했으며, 그로부터 잡지에서 일할 수 있게 되었습니다.

성공은 하루아침에 이루어지지 않았으며, 뉴욕의 Storch Better Living 잡지가 그를 조감독으로 고용하기까지 7년의 프리랜서가 필요했습니다. McCall은 Popular Mechanics, Blue Book 및 Red Book, McCall's Magazine 자체를 포함한 여러 제목을 출판했습니다. Storch는 McCall's Magazine으로 이사하여 Brodovitch로부터 배운 것과 광고 자료, 앨범 표지, 책 표지 및 잡지를 디자인한 경험을 바탕으로 구축했습니다.

Storch는 독단적인 선택을 하는 것을 두려워하지 않았습니다.

“좋은 아트 디렉션은 불확실한 사람에게서 나오지 않습니다. 나는 강렬한 감정을 느낄 수 있었고 필요하다면 부서 편집자들과의 인기 경쟁에서 지고 싶었다. 잡지의 시각적 책임은 제 몫이었습니다.”

— 오토 스토치

Bea Feitler와 마찬가지로 Storch는 Alexey Brodovitch의 상상력이 풍부한 잡지 레이아웃의 유산을 이어갔습니다. 그는 양면 페이지 스프레드가 창의적인 캔버스라는 것을 이해하고 때때로 페이지 사이에 요소가 흐르도록 하여 이를 자신의 작업의 특징으로 만들었습니다. 다른 때에는 Storch가 거터를 디자인의 필수적인 부분으로 만들었습니다.

Storch는 스프레드를 통합하기 위해 종종 큰 헤드라인과 이미지를 사용했습니다. 'On the cob or off'의 경우 두 페이지에 버터를 떨어뜨리는 옥수수 속대입니다. 또 다른 기능인 '40번의 윙크 줄이기 계획'에서 그는 대상이 기지개를 켜고 달리는 텍스트 침대에 쉬도록 허용했습니다. 이 사본은 잠자는 모델의 무게로 가라앉습니다.

'십대 결혼이 무너지는 이유'의 흑백 대형 그래픽은 한 페이지에 그치지 않는다. 대신 스프레드의 4개 열 중 3개를 차지하므로 디자인을 지배합니다. 그 동심원의 중앙에 있는 헤드라인의 중력은 그것으로 시선을 끌어당깁니다.

'소녀는 어리석고, 소년은 끔찍하지 않다'에서 Storch는 두 명의 어린이를 홈통을 사이에 두고 이마에 맞췄습니다. 그는 텍스트를 반대 방향으로 정렬하여 이러한 긴장을 강조했습니다.

Storch는 이미지와 텍스트를 결합하는 것을 명확하고 쉽게 만들었지만 그가 달성한 결과는 수년간의 경험과 연습에서 나온 것입니다.

'패션을 물감처럼 신선하게 만들기'를 위해 Storch의 빽빽하게 채워진 텍스트는 예술가의 그림 물감 상자에 완벽하게 들어 맞습니다. McCall's Patterns에 대한 이 스프레드의 모델도 상자 안에 들어 맞습니다. Storch의 장난기 넘치고 예상치 못한 스케일 사용은 이 디자인에 또 다른 차원을 추가합니다.

Storch는 편집 디자인에서 강력한 아이디어, 카피, 이미지 및 타이포그래피가 필수적이라고 믿었습니다. 웹 디자인에서도 인쇄에 대한 명백한 차이점에도 불구하고 마찬가지라고 생각합니다.

Storch는 타이포그래피가 현재 읽을 수 있는 콘텐츠 이상을 할 수 있다는 것을 이해했으며 문자를 그래픽 개체로 바꾸는 재주가 있었습니다. 왼쪽에서 오른쪽으로 쓰는 언어를 위한 인쇄 디자인에서 왼쪽 페이지를 "verso"라고 하고 오른쪽 페이지를 "recto"라고 합니다. McCall의 'The First to Know'라는 책의 발췌문에서 Storch는 recto 및 verso 페이지를 미러링한 다음 원형 전화 다이얼을 반영하는 원으로 텍스트를 설정했습니다.

많은 Otto Storch가 있으며 그의 디자인은 오늘날 우리가 웹에서 하는 작업에 대해 알려줄 수 있습니다. Alexey Brodovitch와 마찬가지로 Storch는 캔버스에 제한을 받기보다는 자신의 캔버스를 마스터했습니다. 그는 자신의 페이지를 사용하여 콘텐츠를 이해할 수 있을 뿐만 아니라 더 매력적으로 만드는 방식으로 콘텐츠를 제시했습니다. 이 매력은 사람들을 브랜드, 제품 또는 스토리와 연결하고 매체에 관계없이 모든 비즈니스에 중요하기 때문에 중요합니다.

Otto Storch는 영감을 주는 디자이너 목록에 새로 추가될 수 있지만 그의 디자인은 이미 내 영향을 미치고 있습니다.

셰이프 업

W3C의 CSS Shapes Module Level 1은 2014년부터 후보 권장 사항이었으며 모든 최신 데스크톱 및 모바일 브라우저는 shape-outside, shape-margin 및 shape-image-threshold 속성을 구현했습니다.

 [src="shape.png"] { float: left; shape-outside: url(shape.png); shape-margin: 20px; }

웹 디자이너는 CSS Shapes가 제공하는 창의적 잠재력을 인식하지 못하며 더 이상 사용하지 않을 이유가 없습니다. 웹 개발자가 여전히 Shapes가 브라우저에서 제대로 지원되지 않는다고 생각할 수도 있습니다. 여전히 모든 최신 브라우저가 이제 Shapes를 지원하고 레거시 브라우저에서 해당 속성이 정상적으로 저하되므로 현재 사용하지 않을 이유가 없습니다.

모양으로 더 많은 작업 수행

오토 스토치(Otto Storch)의 이 디자인은 내 관심을 끌었던 첫 번째 디자인 중 하나였습니다. 나는 두 개의 정당화 된 사본 열의 구조적 단순성과 유기적 형태를 만들기 위해 텍스트를 감싸는 그의 이미지 배치가 어떻게 페이지를 에너지와 움직임으로 장난스럽게 채웠는지에 감탄했습니다.

나는 온라인에서 이런 종류의 에너지가 있는 레이아웃을 거의 볼 수 없기 때문에 내 디자인에는 4개의 밝은 색상의 딱정벌레가 포함되어 있습니다. 이 Storch에서 영감을 받은 디자인을 구현하려면 두 가지 구조적 요소만 필요합니다. 주요 요소와 옆. 이러한 각 요소에는 실행 중인 텍스트 단락과 작은 이미지를 큰 이미지로 바꿀 수 있는 두 개의 그림 요소가 포함되어 있습니다.

 <main> <picture>…</picture> <p>…</p> <p>…</p> <picture>…</picture> <p>…</p> <p>…</p> </main> <aside> <picture>…</picture> <p>…</p> <p>…</p> <picture>…</picture> <p>…</p> <p>…</p> </aside>

이 그림 요소는 작은 화면의 가장자리에 맞지만 실행 중인 사본의 단락 양쪽에 공백이 여전히 필요합니다. 뷰포트 너비 단위를 사용하면 해당 공간이 항상 해당 화면에 비례하여 유지됩니다.

 p { margin-right: 10vw; margin-left: 10vw; }

그림 요소는 HTML에 가장 유용한 추가 기능 중 하나입니다. 미디어 쿼리를 여러 이미지와 결합하여 브라우저는 레이아웃에 가장 적합한 이미지를 선택할 수 있습니다.

저는 미디어 속성과 최소 너비 값을 가장 자주 사용하며 이 디자인에는 그림 요소당 두 개의 이미지만 필요하지만 더 많은 이미지를 추가하고 미디어 값을 결합하여 복잡한 쿼리를 만드는 것도 가능합니다.

 <picture> <source media="(min-width: 48em)"> <img src="small.png" alt="Volkswagen Beetle"> <</picture>

이 사진의 이미지에는 작은 화면에 가장 적합한 내 딱정벌레의 자른 버전이 포함되어 있습니다. 모든 이미지에 동일한 너비를 적용한 다음 다음에 나올 CSS 모양에 대비하여 모양 여백을 추가합니다.

 picture { width: 160px; shape-margin: 20px; }

다각형 좌표를 사용하는 것보다 이미지의 모양을 구현하는 것이 더 쉽고 빠릅니다. 이미지에서 모양을 개발하려면 완전히 또는 부분적으로 투명한 알파 채널이 필요합니다. 이미지가 부분적으로 투명할 때 shape-image-threshold 속성은 모양을 형성하는 영역을 제어할 수 있습니다.

하나 이상의 모양에 동일한 이미지를 사용할 수 있습니다. 내 디자인에는 4개의 서로 다른 색상의 자동차가 포함되어 있지만 두 가지 모양 이미지만 필요합니다.

 main picture:first-of-type, aside picture:first-of-type { float: left; shape-outside: url(shape-1-sm.png); } main picture:last-of-type, aside picture:last-of-type { float: right; shape-outside: url(shape-2-sm.png); }

작은 화면 디자인이 완성되면 중간 크기 화면에 더 큰 이미지와 그에 맞는 모양 이미지를 소개합니다. 더 큰 화면에 맞게 이미지에 새 너비를 적용합니다.

 @media (min-width: 48em) { main picture:first-of-type { width: 290px; shape-outside: url(shape-1-lg.png); } main picture:last-of-type { width: 230px; shape-outside: url(shape-2-lg.png); } aside picture:first-of-type { width: 230px; shape-outside: url(shape-3-lg.png); } aside picture:last-of-type { width: 290px; shape-outside: url(shape-4-lg.png); } }

더 큰 화면에 대한 내 디자인은 언뜻 보기에는 복잡해 보일 수 있지만 레이아웃은 더 간단할 수 없으며 이러한 주요 요소와 측면 요소는 두 개의 대칭 열을 형성합니다.

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

공백은 이 대형 화면 디자인에서 큰 역할을 합니다. 이러한 열이 도입되면서 이전에 단락에 적용한 10vw 수평 여백은 공백이 이 레이아웃의 40%를 구성한다는 것을 의미합니다.

Otto Storch가 자신의 페이지를 사용하여 콘텐츠를 매력적이고 이해할 수 있는 방식으로 제시한 것처럼, 이 디자인은 폭스바겐 비틀의 이야기를 전할 뿐만 아니라 이 상징적인 작은 차가 운전하는 것이 얼마나 재미 있었는지에 대한 레이아웃을 암시합니다.

텍스트를 맛있게 보이게 하기

Brodovitch와 마찬가지로 Otto Storch는 이미지와 텍스트를 결합하는 데 탁월했으며 종종 사본을 미러링한 모양으로 조각했습니다. 이 디자인에서 Storch는 유리 모양의 맛있는 텍스트 블록을 만들었습니다. 온라인에서 이와 같은 기술을 사용하는 경우는 거의 없지만 매체가 무엇이든 독자를 스토리로 끌어들이는 데 도움이 될 수 있습니다. Storch에서 영감을 받아 다음 디자인을 위해 Volkswagen Beetle의 모양을 반영하도록 사본을 조각했습니다.

내 디자인에는 세 가지 대체 레이아웃이 포함되어 있습니다. 작은 화면을 위한 스크롤링 콘텐츠의 단일 열, 중간 화면을 위한 2x2 그리드, 수평으로 스크롤되는 콘텐츠 영역이 있는 큰 화면 디자인.

이 세 가지 디자인을 구현하는 데 필요한 네 가지 구조적 요소가 있습니다. 하나는 내 콘텐츠의 주요 요소이고, 세 개의 밝은 색상의 딱정벌레의 큰 이미지입니다. 이러한 요소를 섹션으로 묶은 다음 활주로를 나타내는 장식적인 프레젠테이션 구분을 추가합니다.

 <section> <img src="shape-1.png" alt=""> <main> <h1>Get bitten by the bug</h1> </main> <img src="img-1.png" alt="Volkswagen Beetle"> <img src="img-2.png" alt="Volkswagen Beetle"> </section> <div> </div>

작은 화면에 표시하기 위해 가로 스크롤 패널이 필요하지 않으므로 텍스트를 딱정벌레 모양으로 조각하는 기본 스타일과 모양만 추가합니다. 단락 텍스트를 중앙에 정렬하고 대문자로 설정하여 시작합니다. 나는 일반적으로 이런 식으로 전체 텍스트 블록을 텍스트로 설정하지 않지만 단단한 대문자는 딱정벌레 모양을 강조하는 데 도움이 됩니다.

 p { text-align: center; text-transform: uppercase; }

CSS Shapes 사양의 초기 초안에는 Storch처럼 모양 내부에 텍스트를 래핑할 수 있는 shape-inside 속성이 포함되어 있습니다. W3C가 이 기능을 아직 편집자의 초안인 CSS Shapes Module 레벨 2까지 연기한 것에 실망했습니다. shape-outside를 사용하여 비슷한 효과를 얻을 수 있지만 우선 온라인에서 Otto Storch만큼 창의적으로 활자를 사용할 수 있을 때까지 기다릴 수 없습니다.

내 단락에 두 개의 모양 이미지를 추가합니다. 딱정벌레의 얼굴을 반영하기 위해 다음 이미지 사이에 텍스트가 흐릅니다.

 <p> <img src="shape-2.png" alt=""> <img src="shape-3.png" alt=""> … </p>

이 두 이미지의 크기를 지정하고 뷰어가 볼 수 없도록 불투명도를 0으로 설정합니다.

 p img { width: 100px; height: 125px; opacity: 0; }

이 이미지는 순전히 표현용이며 내용이나 의미를 전달하지 않으므로 이미지에서 의미를 제거하기 위해 역할 속성을 추가합니다. 접근성 트리에서 가져오기 위해 다음 두 이미지에 aria-hidden 속성도 추가합니다.

 <img src="shape-2.png" alt="" role="presentation" aria-hidden="true">

내 텍스트를 상징적인 Volkswagen의 모양으로 조각하기 위해 동일한 두 이미지를 사용하여 shape-outside를 적용합니다. 첫 번째 이미지는 왼쪽으로, 두 번째 이미지는 오른쪽으로 떠 있습니다.

 p img:nth-of-type(1) { float: left; shape-outside: url(shape-l.png); } p img:nth-of-type(2) { float: right; shape-outside: url(shape-r.png); }

내 프레젠테이션 부서가 보조 기술에도 표시되는 것을 원하지 않으므로 동일한 역할과 aria-hidden 속성을 여기에도 추가합니다.

 <div role="presentation" aria-hidden="true"> </div>

작은 화면을 사용하는 사람들에게 분할이 표시될 필요가 없으므로 display 속성을 none으로 설정합니다.

 div { display: none; }

내 작은 화면 디자인은 딱정벌레처럼 스타일리시하지만 중간 크기 화면에서 사용할 수 있는 추가 공간을 통해 내가 모방하는 그림과 함께 조각된 텍스트를 배치할 수 있습니다.

디자인을 구현하기 전에 화면 크기가 변경될 때 요소를 재배열하는 방법을 결정하기 위해 스토리보드를 만듭니다. 중간 크기 화면의 경우 4개의 요소를 2x2 대칭 기둥 그리드에 배열합니다. 이러한 열의 크기를 조정하는 데 minmax 값을 사용하여 사용 가능한 모든 공간을 채우지만 너비는 400px 미만으로 줄어들지 않습니다.

 @media (min-width: 48em) { section { display: grid; grid-template-columns: minmax(400px, 1fr) minmax(400px, 1fr); grid-gap: 2vw; align-items: end; } }

더 큰 화면의 경우 두 행도 필요합니다. 높이가 같아야 하고 사용 가능한 모든 수직 공간을 차지해야 합니다.

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

가로로 스크롤되는 큰 콘텐츠 영역이 이 디자인을 지배하며 뷰포트보다 넓습니다. 패널에는 4개의 열이 포함되어 있습니다. 3개는 이미지용이고 1개는 제가 조각한 사본용이며 각 열의 너비는 최소 400픽셀입니다. 뷰포트의 최대 너비를 설정하고 수평 축에서만 스크롤을 허용하면 뷰포트 외부에 있는 모든 콘텐츠가 숨겨지지만 여전히 액세스할 수 있습니다.

 section { grid-template-columns: repeat(4, minmax(400px, 1fr)); max-width: 100vw; overflow-x: scroll; }

내 콘텐츠 아래에는 내 딱정벌레 모양의 바퀴 아래 도로를 나타내는 프레젠테이션 분할이 있습니다. 이 요소는 작은 화면 크기에서는 보이지 않으므로 보이게 하기 위해 표시 속성을 없음에서 차단으로 변경한 다음 밝은 회색 배경색을 추가합니다. 이전에 body 요소에 설정한 그리드 속성은 이 분할의 높이를 정의합니다.

 div { display: block; background-color: #a73448; } }

Webkit의 Dave Hyatt는 원래 2008년까지 CSS Reflections를 제안했지만 지금까지 다른 브라우저 렌더링 엔진에서는 구현되지 않았습니다. CSS 리플렉션은 현재 Google 크롬에서만 지원됩니다.

상상할 수 있듯이 리플렉션은 요소의 복사본을 만듭니다. 반사는 위, 아래 또는 왼쪽이나 오른쪽에 나타날 수 있습니다. 물리적 세계에서와 마찬가지로 요소가 어떤 식으로든 변경되면 반사가 따릅니다.

CSS Reflections에는 세 가지 실험 속성을 사용할 수 있습니다. 요소와 반사 사이의 거리를 제어하는 ​​방향 및 선택적 오프셋입니다. 또한 반사에 마스크를 적용하여 모양을 변경할 수도 있습니다. 예를 들어 그라디언트 마스크를 사용하여 반사 강도를 점차적으로 흐리게 하는 방법입니다.

CSS 리플렉션은 브라우저에서 제한적으로 지원되지만 이를 구현한 브라우저의 디자인에 추가 차원을 추가할 수 있습니다. 브라우저가 반사를 지원하고 화면이 효과를 충분히 발휘할 수 있을 만큼 충분히 클 때만 반사를 추가하고 싶습니다.

내가 찾고 있는 결과를 얻기 위해 먼저 뷰포트의 최소 너비를 테스트한 다음 브라우저가 -webkit-box-reflect:below 지원하는지 여부를 테스트하는 중첩 미디어 및 기능 쿼리를 사용합니다. 반사를 추가하고 프레젠테이션 부분의 색상을 빨간색에서 회색으로 변경합니다.

 @media (min-width: 64em) { @supports (-webkit-box-reflect:below) { section { -webkit-box-reflect: below 0 linear-gradient(transparent, white); } div { background-color: #f0f0f1; } } }

거울 대칭

McCall's Patterns에서 퍼진 이 눈에 띄는 검정과 빨강은 Storch의 가장 독특한 디자인 중 하나입니다. 레이아웃과 Storch가 두 페이지에서 동일한 색상을 사용하는 방식에 안심할 수 있는 대칭이 있습니다. 나는 즉시 그의 디자인에 끌렸고 비슷한 효과를 얻고 싶습니다.

이 디자인을 구현하는 데 필요한 HTML은 이보다 더 간단할 수 없습니다. 둘 다 그림 요소를 포함하는 두 개의 구조 요소(주요 요소와 보조 요소):

 <main> <picture>…</picture> <p>…</p> </main> <aside> <picture>…</picture> <p>…</p> </aside>

이러한 주요 요소와 보조 요소에는 각각 텍스트 단락이 포함되어 있습니다. 이 디자인에 필요한 회전을 달성하기 위해 span 요소 안에 각 텍스트 줄을 래핑합니다. 이러한 프리젠테이션 요소에 대한 더 나은 의미론적 대안이 있으면 좋겠지만 추가 스타일이 없으면 단락의 가독성을 방해하지 않습니다.

 <p> <span>Although </span> <span>designed in the </span> <span>1930s, due to </span> <span>World War II, </span> <span>civilian Beetles </span> <span>only began to </span> <span>be produced in </span> <span>significant </span> <span>numbers by the </span> <span>end of the 1940s.</span> </p>

먼저 body 요소에 어두운 회색 배경색을 적용합니다.

 body { background-color: #262626; }

그런 다음 최소 높이는 내 기본 및 옆 요소가 항상 뷰포트 높이를 채우도록 합니다. 콘텐츠를 가로 및 세로로 가운데에 맞추려면 flexbox 속성을 적용하고 방향을 열로 설정합니다.

 main, aside { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: 2rem 0; box-sizing: border-box; color: #fff; }

기본 비틀의 색상을 후속 패널과 일치시키려면 배경색을 동일한 빨간색으로 설정합니다.

 aside { background-color: #a73448; }

대문자 텍스트의 긴 구절은 일반적으로 대소문자 혼합으로 설정된 것보다 읽기가 더 어렵지만 대문자는 짧은 부분에 적합하며 세련된 모양을 만들 수 있습니다.

 p { margin: 0 2rem; text-align: center; text-transform: uppercase; }

내 작은 화면 디자인에서 주 요소와 옆 요소는 수직으로 쌓이고 높이가 뷰포트의 높이와 일치합니다. 중간 크기 화면의 경우 뷰포트의 절반을 채우도록 해당 요소의 최소 높이를 재설정합니다.

 @media (min-width: 48em) { main, aside { min-height: 50vh; padding: 2rem; }

중간 크기 화면에서 사용할 수 있는 추가 공간을 사용하면 쓰기 모드를 변경하여 단락의 스타일을 지정할 수 있으므로 텍스트가 세로로 표시되고 오른쪽에서 왼쪽으로 읽힙니다.

 p { max-height: 12em; margin: 0; text-align: left; writing-mode: vertical-rl; }

이러한 span 요소의 display 속성을 block으로 변경하면 단락이 여러 줄로 분할됩니다. 그런 다음 line-height는 선 사이에 공간을 추가하여 회전을 위한 공간을 허용합니다.

 p span { display: block; line-height: 2; }

회전, 크기 조정 및 번역을 포함한 변환은 거의 20년 동안 CSS의 일부였습니다. 변환을 사용하려면 회전과 같은 변환 기능을 추가한 다음 괄호 안에 값을 추가해야 합니다.

내가 찾고 있는 효과를 달성하기 위해; 내 텍스트의 처음 6줄을 시계 반대 방향으로 15도 회전합니다. 마지막 6개의 라인은 같은 양만큼 시계 방향으로 회전합니다. 나머지 모든 줄은 변경되지 않은 상태로 유지됩니다.

 p span:nth-child(-n+6) { transform: rotate(-15deg); } p span:nth-child(n+12) { transform: rotate(15deg); }

앞으로는 transform 속성과 독립적으로 회전과 같은 기능을 사용할 수 있게 되지만 이 글을 쓰는 시점에서는 Firefox만 개별 변환을 구현했습니다.

회전된 텍스트를 위한 공간을 만들기 위해 두 줄에 여백을 추가합니다.

 p span:nth-child(6) { margin-left: 1em; } p span:nth-child(12) { margin-right: 1em; } }

이 디자인은 큰 화면에서 사용할 수 있는 공간이 더 두드러집니다. 그들을 위해 두 개의 대칭, 동일한 높이 열을 생성하기 위해 본문 요소에 그리드 값을 적용합니다.

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

전체 뷰포트 높이까지 확장되는 기본 요소와 옆 요소 모두에 대칭 3열 그리드를 적용합니다.

 main, aside { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-column-gap: 0; padding: 2rem; min-height: 100vh; }

나는 메인 그림을 두 번째와 세 번째 열에 펼치고 옆 그림을 첫 번째와 두 번째 열에 펼칩니다.

 main picture { grid-column: 2 / -1; grid-row: 1; padding: 0 5vw; } aside picture { grid-column: 1 / 3; padding: 0 5vw; }

나머지 열에 단락을 배치하고 모든 요소에 동일한 행 번호를 부여하면 소스 순서에 관계없이 동일한 행에 유지됩니다.

 main p { grid-column: 1; grid-row: 1; } aside p { grid-column: 3; }

이 버전의 디자인에서는 텍스트가 오른쪽에서 왼쪽이 아니라 위에서 아래로 실행되어야 하므로 쓰기 모드를 가로, 위에서 아래로 재설정한 다음 텍스트를 오른쪽으로 정렬합니다.

 main p, aside p { max-height: none; writing-mode: horizontal-tb; } main span { text-align: right; }

마지막으로 이 대형 화면 디자인에 더 잘 맞도록 텍스트 줄의 회전 값과 여백을 바꿉니다.

 main p span:nth-child(-n+6) { transform: rotate(10deg); } main p span:nth-child(n+12) { transform: rotate(-10deg); } main p span:nth-child(6) { margin: 0 0 15px; } main p span:nth-child(12) { margin: 15px 0 0; } aside p span:nth-child(-n+6) { transform: rotate(-10deg); } aside p span:nth-child(n+12) { transform: rotate(10deg); } aside p span:nth-child(6) { margin: 0 0 15px; } aside p span:nth-child(12) { margin: 15px 0 0; } }

스팬 열

Otto Storch는 그의 가장 기억에 남는 디자인 중 많은 부분을 두 페이지에 걸쳐 큰 이미지와 인쇄상의 요소를 허용했습니다. 이 기술은 두 열의 양쪽 정렬된 텍스트 위에 버터를 바른 옥수수 속대를 놓는 것을 포함하여 눈에 띄는 스프레드를 만들었습니다.

나는 나의 최종 비틀 기반 디자인에 유사하게 눈에 띄는 효과를 원하고 그것을 구현하려면 세 가지 구조적 요소만 필요합니다. SVG 로고, 헤드라인, 내 노란색 Volkswagen 사진이 포함된 헤더, 그 다음에는 기본 및 보조 요소:

 <header> <svg>…</svg> <h1>Get bitten by the bug</h1> <figure> <picture>…</picture> </figure> </header> <main>…</main> <aside>…</aside>

정상적인 흐름과 몇 가지 기본 스타일만 있으면 이 디자인의 작은 화면 버전을 구현하는 데 필요합니다. 먼저 어두운 배경을 추가하고 흰색 텍스트를 지정합니다.

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

헤드라인을 페이지 중앙에 배치하려면 여백을 적용하고 텍스트 기반 단위를 사용하여 최대 너비를 설정한 다음 대문자를 중앙에 정렬합니다.

 h1 { margin: 0 auto 1.5rem; max-width: 8rem; text-align: center; text-transform: uppercase; }

이미지 크기를 조정하는 대신 좁은 뷰포트에 맞도록 이미지를 확대하고 가로 스크롤 패널을 추가하는 경우가 많습니다. 이 기술은 내가 가장 좋아하는 작은 화면 디자인 장치 중 하나입니다.

이 그림에는 뷰포트보다 넓은 이미지가 포함되어 있으며 바퀴를 포함한 자동차의 전체 프로필이 포함되어 있습니다. overflow-x: scroll; 그림에 액세스할 수 있도록 뷰포트 외부에 있는 그림의 일부를 만듭니다.

 figure { overflow-x: scroll; }

중간 크기 화면은 이러한 기본 스타일을 많이 상속하지만 더 많은 공간을 사용할 수 있게 되면 넓은 뷰포트 기반 여백을 사용하여 좁은 텍스트 열을 만들어 디자인에서 세로 축을 강조하고 싶습니다. 또한 모든 내용을 볼 수 있도록 그림 요소 오버플로를 재설정합니다.

 @media (min-width: 48em) { figure { overflow-x: visible; } p { margin-right: 25vw; margin-left: 25vw; } }

내 디자인의 가장 큰 버전은 가장 복잡합니다. 그것은 실행 중인 두 열의 텍스트 위에 내 딱정벌레의 큰 그림을 배치할 뿐만 아니라 그 텍스트가 바퀴 주위를 감쌉니다. 대칭형 2열 그리드를 생성하기 위해 body 요소에 더 큰 화면의 그리드 속성을 적용하는 것으로 시작합니다.

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

내 헤더는 두 열에 걸쳐 있으며 중첩된 그리드 값은 내 비틀의 VW 로고, 헤드라인 및 이미지를 정렬합니다. 이 중첩 그리드에서 두 개의 외부 열은 나머지 사용 가능한 공간을 모두 차지하는 반면 중앙 열은 내용을 수용하도록 자동으로 크기가 조정됩니다.

 header { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 1fr; grid-row-gap: 4vh; }

이 중앙 열에 로고와 헤드라인을 배치합니다.

 svg, h1 { grid-column: 2; }

그런 다음 단락 사이에 여백을 추가합니다.

 p { margin-right: 1rem; margin-left: 1rem; }

이 디자인의 그림 요소에는 두 개의 이미지가 포함됩니다. 첫 번째는 중소 화면용 바퀴로 완성되고 두 번째는 대형 화면용 바퀴가 없는 자동차입니다. 이 딱정벌레에 바퀴를 다시 고정하기 위해 주 요소와 보조 요소 모두 내부 :before pseudo-elements 사용합니다. 그런 다음 모양 여백을 추가하여 그들과 근처의 실행 중인 텍스트 사이에 공간을 추가합니다.

 main:before, aside:before { display: block; shape-margin: 10px; }

생성된 콘텐츠를 사용하여 메인 요소 앞에 뒷바퀴를 추가하고 해당 바퀴를 오른쪽으로 띄웁니다. 그런 다음 shape-outside 속성은 이 휠 주위에 텍스트를 래핑합니다.

 main:before { content: url(shape-l.png); float: right; shape-outside: url(shape-l.png); }

옆 요소 앞에 비슷한 값을 적용합니다. 이번에는 휠을 왼쪽으로 띄웁니다.

 aside:before { content: url(shape-r.png); float: left; shape-outside: url(shape-r.png); } }

이제 실행 중인 텍스트가 딱정벌레의 바퀴 주위를 둘러싸고 있어 가독성이나 반응성을 희생하지 않으면서 내 디자인을 더욱 매력적으로 만듭니다.

결론

Otto Storch는 기억에 남는 디자인을 많이 만들었지만 그와 그의 작업이 크게 잊혀진 것이 안타깝습니다. Storch에 대한 Wikipedia 페이지가 없으며 아무도 그에 대한 책을 출판하지 않았습니다. Storch의 디자인은 웹에서 작업하는 디자이너에게 많은 것을 제공하고 더 많은 사람들이 그를 재발견하기를 바랍니다.

그의 작업은 또한 Shapes를 사용하여 온라인에서 얼마나 더 많은 것을 달성할 수 있는지 보여줍니다. 현재 잘 지원되고 있음에도 불구하고 이 CSS 속성은 거의 Storch만큼 간과되었습니다. 모양은 단순한 텍스트 줄 바꿈 이상의 기능을 제공하며 아직 그 잠재력이 완전히 실현되지 않았습니다. 나는 그것이 곧 바뀌기를 바랍니다.

시리즈에서 더 읽어보기

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

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