Bea Feitler의 영감을 받은 디자인 결정: 멈출 수 없는 창조력

미술 학교에서 그래픽 디자인을 공부하지 않았더라도 몇 가지 유명한 이름을 알고 있을 것입니다. 100년이 넘는 상업 아트 디렉션을 통해 더 많은 이름을 발견할 수 있습니다. 우리가 웹에 대해 더 창의적으로 생각하도록 격려하고 영감을 줄 수 있는 놀라운 일을 한 사람들입니다.

놀라운 재능을 가진 사람들을 발견하는 것은 아트 디렉션을 공부하는 가장 보람 있는 측면 중 하나입니다. 한 디자이너에 대해 배우면 종종 다른 디자이너로 연결되는데, 내가 존경하는 작품을 찾았을 때 그 디자이너가 무엇을 만들었는지 뿐만 아니라 왜 만들었는지 이해하고 싶습니다.

1950년대까지 Harper's Bazaar에 대한 Alexey Brodovitch의 영향력 있는 작업에 대해 알게 된 후, 나는 그의 유산이 잡지에 미친 영향을 알고 싶었습니다. 이로 인해 1960년대 내내 Harper's Bazaar를 감독한 Bea Feitler와 그녀의 크리에이티브 파트너 Ruth Ansel을 만나게 되었습니다.

Feitler는 "당신이 들어본 적 없는 선구적인 여성 아트 디렉터"로 묘사되었습니다. 나는 그녀가 디자인 컨퍼런스에서 언급되는 것을 들어 본 적이 없으며 웹 디자인에 관한 기사에서 그녀가 언급되는 것을 본 적이 없습니다.

그러나 Feitler의 자신감 있고 활기찬 디자인은 그녀의 삶과 작업을 매력적으로 만드는 요소의 일부일 뿐입니다. 훨씬 더 중요한 것은 그녀의 작업이 1960년대 미국 사회의 변화와 그녀가 그것에 영향을 미치기 위해 한 선택을 반영한 방법이었습니다.

그녀의 작업에 대해 단 한 번의 전시회가 열렸고 한 권의 회고전이 출판되었습니다. 그녀의 조카가 쓴 "O Design de Bea Feitler"는 2012년 그녀의 모국인 브라질에서 출판되었습니다. 사본을 찾는 데 몇 달이 걸렸지만 결국 하나를 찾았습니다. 내가 산 책 중 가장 비싼 책이다.

Feitler는 그녀를 팔로우한 잡지 디자이너들에게 가르친 것만큼이나 웹을 위해 디자인하는 사람들에게 가르칠 것이 많습니다. 내가 했던 것처럼 Bea Feitler의 작품에 사람들이 사랑에 빠지도록 조금이나마 도움이 되었으면 합니다.

영감을 받은 Bea Feitler

Bea Feitler는 1938년 리우데자네이루에서 태어났습니다. 앨범 표지, 책 재킷, 잡지 및 포스터 디자인 작업을 마친 후 그녀는 브라질을 떠나 맨해튼으로 이사했습니다. 1961년(아직 25세)에 그녀는 미술 조수가 되었고, 당시 Ruth Ansel과 함께 Harper's Bazaar에서 최연소이자 최초의 여성 공동 예술 감독이 되었습니다.

미국으로 이주하기 전에 Harper's Bazaar에서 물러난 Alexey Brodovitch처럼 Feitler는 아티스트 및 사진 작가와의 협업을 통해 그녀의 작업을 정의했습니다. Harper's Bazaar에서 Richard Avedon의 유명한 분홍색 우주 헬멧을 쓴 모델 Jean Shrimpton의 사진, 그리고 Rolling Stone의 표지에 있는 Annie Leibovitz의 벗은 John Lennon의 사진.

Feitler는 Brodovitch를 만난 적이 없지만 그녀가 그의 유산을 어떻게 존경하고 발전시켰는지 보는 것은 매혹적입니다. Feitler는 잡지 페이지가 의도적으로 개별적으로 구성되어야 하지만 동시에 조화로운 리듬을 형성하기 위해 서로 연결되어야 한다는 것을 이해했습니다.

잡지는 흘러야 합니다. 리듬이 있어야 합니다. 한 페이지만 볼 수는 없고 앞 뒤를 시각화해야 합니다. 좋은 편집 디자인은 조화로운 흐름을 만드는 것입니다. — 비 피틀러

Feitler는 팝 아티스트 Jasper Johns, Roy Lichtenstein, Andy Warhol뿐만 아니라 스트리트 패션 및 청소년 문화에서 영감을 받은 대담한 색상의 선택과 Brodovitch의 양면 스프레드에 대한 숙달을 결합했습니다.

그녀는 1965년 4월 Harper's Bazaar 표지와 1972년 12월 페미니스트 잡지 Ms. 표지를 위해 두 번 네온 분홍색 배경에 야한 녹색 텍스트를 배치하여 색상을 실험하거나 관습을 깨는 것을 두려워하지 않았습니다.

Harper's Bazaar 스튜디오에서 그녀는 Ruth Ansel과 공유했으며 끊임없이 변화하는 콜라주가 그들의 영감의 벽을 채웠습니다. 내 작은 스튜디오에 공간이 있었으면 하는 것. Feitler는 미디어 혼합을 두려워하지 않았고, 그녀의 가장 상징적인 스프레드 중 하나가 효과가 없다고 느꼈을 때 Avedon의 가장 유명한 사진 중 하나를 신문 가판대에서 구입한 만화책의 패널과 결합했습니다. 아래 거리.

Feitler의 디자인은 1960년대 미국 사회의 변화에 ​​영향을 미치고 반영했습니다. 그녀가 아트 디렉팅한 잡지는 그 시대의 문화에 완벽하게 부합하면서도 오늘날의 온라인 작업과도 관련이 있는 빠르게 진행되고 거의 영화 같은 품질을 가졌습니다. Feitler는 좋은 편집 디자인은 조화로운 흐름을 만드는 것이라고 믿었습니다. 이는 잡지 ​​페이지만큼이나 매력적인 사용자 경험 및 고객 여정을 디자인하는 것과 관련이 있습니다.

어떤 사람들은 웹은 인쇄되지 않는다는 만트라를 계속 암송하지만 Feitler의 작업에서 배울 수 있는 것이 많습니다. 그녀의 디자인은 온라인 편집 디자인뿐만 아니라 전자 상거래 웹사이트와 디지털 제품 디자인도 개선하는 데 도움이 됩니다.

Feitler는 책이 "이미지 대 텍스트의 50/50"이라고 말했습니다. 웹에서는 대화형 기능과 비디오도 허용해야 합니다. 이러한 구성 요소를 성공적으로 결합하여 일관되고 매력적인 경험을 만드는 방법을 이해하는 것은 모든 디지털 디자이너가 개발해야 하는 기본 기술입니다.

멘토이자 교사로서 Feitler는 Alexey Brodovitch와 많은 원칙을 공유했습니다. 그녀는 학생들에게 자신의 방향을 발전시키도록 격려했으며 많은 학생들이 저명한 예술 감독이 되었습니다. Feitler는 모든 사람들로부터 가장 높은 수준의 디자인 우수성을 요구하고 수용했습니다.

본능을 믿으면서 열정을 붙잡고 깊이 파고드세요. 예상한 것에서 벗어나십시오. 사고를 수용하고 결국에는 창의적인 딜레마에 대한 완벽한 솔루션을 발견하고 이를 수행하는 동안 매우 기뻐할 것임을 알고 있습니다. — 루스 안셀

슬프게도 Bea Feitler는 1982년 44세의 나이로 암으로 사망했습니다. 저는 그녀가 그녀를 팔로우한 잡지 아트 디렉터들에게 가르쳤던 것처럼 웹을 디자인하는 사람들에게도 가르칠 것이 많다고 믿습니다. 나는 그녀의 삶과 일이 우리가 확신에 있어 용기를 갖고 우리 자신의 용감하고 자신감 있는 선택을 하는 데 영향을 미치기를 바랍니다.

#### 뷰티 블래스트 오프

Harper's Bazaar's는 이전에 게스트 편집자가 없었지만 1965년 4월 판에서는 오랜 협력자인 Richard Avedon이 전체 호를 편집하고 사진을 찍었습니다.

내부에서 Avedon은 주류 패션 잡지의 표지에 등장한 최초의 흑인 여성인 Donyale Luna와 NASA에서 빌린 우주복을 입은 Paul McCartney를 촬영했습니다. 표지를 위해 Avedon은 뉴욕의 가장 유명한 양봉업자 중 한 명이 만든 우주 헬멧을 쓰고 있는 현대 수퍼모델 Jean Shrimpton의 이미지를 선택했습니다.

Avedon은 나중에 마감 시간이 지난 오후 11시에 표지를 위해 촬영한 사진이 작동하지 않았다고 회상했습니다. 그래서 Feitler는 분홍색 Day-Glo 종이로 헬멧 모양을 잘라 Avedon의 사진 위에 얹었습니다. 포커스 그룹, 연구, 청중 테스트도 없고 대담하고 직관적인 디자인 결정만 있습니다.

그 결과 New York Art Director's Club 메달을 수상했으며 American Society of Magazine Editor의 2005년 상위 40개 잡지 표지 목록에서 15위에 올랐습니다.

⁵⁰ ⁄ ₅₀ 이미지를 텍스트로

Feitler에서 영감을 받은 첫 번째 디자인을 구현하기 위해 내 목표는 가장 최소한의 구조 요소 집합을 사용하는 것입니다. header 와 콘텐츠에 대한 main 및 aside 요소. 내 헤더에는 상징적인 Volkswagen Beetle의 분할 이미지와 인라인 SVG Volkswagen 로고가 포함된 헤드라인이 포함되어 있습니다. 이 헤드라인에는 텍스트가 포함되어 있지 않으므로 ARIA 레이블을 사용하여 설명합니다. 이것은 보조 기술을 사용하는 사람들에게 도움이 될 것입니다.

 <header> <h1 aria-labelledby="Volkswagen logo"> <svg>…</svg> </h1> <picture>…</picture> </header> <main>…</main> <aside>…</aside>

작은 화면의 경우 일반 흐름으로 기초 스타일만 필요하고 단일 열 레이아웃을 처리합니다. 먼저 헤더 이미지 뒤에 선형 그래디언트를 추가합니다. 그라디언트는 매우 유연하지만 유용함에도 불구하고 놀라울 정도로 잘 사용되지 않습니다.

 header { padding: 1rem 2vw; background-image: linear-gradient( to right, #444 0%, #444 50%, #fff 50%, #fff 100%); text-align: center; }

내 그라디언트는 왼쪽에서 어두운 회색으로 시작하여 오른쪽에서 흰색으로 끝납니다. 색상 정지가 없으면 결과는 해당 색상 사이의 부드러운 그라디언트가 되지만 헤더 중앙에 단단한 선이 필요합니다. 이 효과를 얻기 위해 동일한 50% 위치에 두 개의 색상 정지점을 배치합니다. 그라디언트의 방향을 변경하기 위해 해당 백분율을 조정할 필요가 없습니다. 그라디언트 방향 to right to left 으로 간단히 변경할 수 있습니다.

여러 크기의 화면에 디자인을 적용하면서 시각적 무게의 일관된 균형을 유지하는 것이 중요합니다. 내 헤더 이미지가 너무 커서 첫 번째 화면에서 실행 중인 텍스트를 밀어내는 것을 원하지 않으므로 최대 높이를 75vh 또는 작은 화면 높이의 3/4로 설정합니다.

 header img { max-height: 75vh; }

작은 화면 디자인을 완성하기 위해 header 를 위치 지정 컨텍스트로 설정합니다. 그런 다음 Volkswagen 엠블럼을 절대적으로 배치하고 5vw 의 뷰포트 너비 단위를 사용하여 너비가 화면에 맞게 조정되도록 합니다.

 header { position: relative; } h1 { position: absolute; top: 1rem; left: 1rem; width: 5vw; }

내 세로 방향 이미지는 키가 큰 화면에 잘 맞지만 화면이 키보다 넓은 경우 더 넓은 형식의 이미지가 필요합니다. Orientation은 훌륭하지만 뷰포트의 방향을 테스트하는 거의 사용되지 않는 미디어 쿼리입니다. 이 미디어 쿼리는 보다 일반적인 너비 쿼리의 대안으로 스타일시트에서 사용할 수 있습니다. picture 요소의 source 에도 적용할 수 있습니다. 이 쿼리는 너비가 높이를 초과할 때마다 내 세로 이미지를 가로 이미지로 바꿉니다.

 <picture> <source media="(orientation: landscape)"> <img src="portrait.png" alt="Volkswagen Beetle"> </picture>

대체 조경 디자인의 경우 Grid를 사용하여 header , main 및 aside 요소를 배치합니다. 열과 행, 템플릿 영역을 포함하여 이러한 요소를 배치하는 몇 가지 옵션이 있지만 저는 grid-template-columns 를 사용하여 body 에 대칭 2열 그리드를 정의하기로 선택했습니다. 선형 그래디언트를 다시 적용하고 전체 뷰포트와 일치하도록 최소 높이를 설정합니다.

 @media screen and (orientation: landscape) { body { display: grid; grid-template-columns: [main] 1fr [aside] 1fr; min-height: 100vh; background-image: linear-gradient( to right, #444 0%, #444 50%, #fff 50%, #fff 100%); } }

가로 방향에서 내 header 는 화면의 전체 너비를 채웁니다. 이 요소에 선형 그라데이션 배경 이미지가 더 이상 필요하지 않으므로 간단히 제거할 수 있습니다.

 header { grid-column: 1 / -1; background-image: none; }

이제 이 그리드는 매우 간단하기 때문에 명명된 라인을 사용하여 그리드에 main 및 aside 요소를 배치합니다.

 main { grid-column: main; } aside { grid-column: aside; }

최종 결과는 브라우저 또는 장치 화면이 가로 방향인지 세로 방향인지에 따라 레이아웃을 조정하는 디자인입니다.

#### 만화책 아트

Bea Feitler는 정기적으로 사진과 삽화를 결합했으며 만화책 예술은 그녀의 경력 전반에 걸쳐 작업에 나타납니다.

Harper's Bazaar에서 그녀는 만화책 배경에 우주복을 입은 Jean Shrimpton의 Avedon 사진 중 하나를 배치했습니다. 나중에 그녀는 1973년에 전설적인 만화가 Marie Severin에게 Ms. Magazine의 표지를 만들도록 의뢰했습니다.

스케일 강조

폭스바겐 비틀은 개성이 강한 소형차였다. 다음 디자인에는 일치하는 캐릭터가 있었으면 합니다. 대형 스크린 디자인은 비틀의 바퀴의 거대한 그림을 사용하여 그 작은 차의 작음을 강조합니다. 그러나 큰 화면에 도달하기 전에 작은 화면에서도 비슷한 규모의 대비를 유지하고 있는지 확인하고 싶습니다.

세 가지 구조적 요소가 이 디자인을 구현하는 데 필요한 마크업을 구성합니다. 큰 바퀴 그림의 header , 작은 자동차 이미지를 포함하는 figure , 내 달리기 텍스트의 메인. 스크린 리더를 사용하는 사람에게는 header 가 의미가 없으므로 aria-hidden 속성을 사용하여 헤더를 숨기기로 선택했습니다.

 <header aria-hidden="true"> <img src="header.png" alt=""> </header> <figure> <img src="figure.png" alt="Volkswagen Beetle"> </figure> <main>…</main>

기본 스타일과 일반적인 흐름은 내 작은 화면 디자인의 대부분의 측면을 처리하지만 이것이 전체 개념을 독특하게 만드는 요소를 무시할 수 있음을 의미하지는 않습니다. 큰 바퀴와 작은 폭스바겐의 대비. 내 header 가 항상 뷰포트 높이의 1/3을 차지하도록 하고 헤더와 콘텐츠 사이에 동일한 공백이 있도록 하기 위해 높이와 여백 모두에 뷰포트 높이 단위를 사용합니다.

 header { margin-bottom: 33vh; height: 33vh; } 

유연한 레이아웃을 개발할 때 자주 접하는 한 가지 문제는 의도하지 않은 이미지 크기 조정입니다. 내 header 의 고정된 높이와 이미지의 100% 너비를 사용하면 거대한 바퀴가 왜곡될 수 있습니다. 다행히 object-fit 속성을 사용하여 종횡비를 유지하는 방법이 있습니다. 4가지 가능한 옵션이 있으며 none :

1. contain
   부모의 콘텐츠 상자 안에 맞추면서 이미지의 종횡비를 유지합니다.
2. cover
   이미지의 종횡비를 유지하지만 이번에는 전체 상자를 채웁니다. 이 경우 콘텐츠 상자 외부의 이미지 일부가 숨겨집니다.
3. fill
   이미지의 너비와 높이가 부모와 일치하도록 이미지가 왜곡됩니다.
4. scale-down
   포함과 유사하게 이미지 또는 비디오의 크기를 부모 내부에 맞도록 줄입니다.

내 큰 휠이 종횡비를 변경하지 않고 헤더를 완전히 채우길 원합니다. 또한 이미지의 일부가 잘려서 cover 가 object-fit 대한 올바른 선택이 되는 것에 대해 걱정하지 않습니다.

 header img { object-fit: cover; object-position: center bottom; width: 100%; height: 100%; }

이제 휠 이미지가 제 위치에 있으므로 전체 자동차의 작은 이미지와 큰 크기를 대조하여 스케일을 제공합니다. 딱정벌레의 최대 크기를 뷰포트 너비의 절반으로 제한하고 여백을 사용하여 가로로 가운데에 맞춥니다.

 figure { margin: 0 auto; max-width: 50vw; }

이 디자인은 단색 회색 배경을 사용하여 도로를 나타내므로 배경색을 추가하고 figure 을 10px 아래로 이동하여 비틀의 바퀴가 활주로에 단단히 고정되도록 합니다.

 main { padding: 2rem; background-color: #f0f0f1; } figure { transform: translateY(10px); }

더 큰 화면은 큰 인상을 줄 수 있는 기회를 제공하는데, 이 디자인에서는 header 이미지가 큰 화면의 너비와 전체 높이의 절반을 차지하도록 하고 싶습니다. 이 시리즈의 많은 디자인에 사용한 것과 동일한 6+4 복합 그리드를 적용합니다. 여기에는 3개의 행을 추가한 8개의 열이 있습니다. 중간 및 하단 행에 고정 높이를 지정하고 첫 번째 행이 나머지 수직 공간을 모두 차지하도록 허용합니다.

 @media screen and (min-width : 64em) { body { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; grid-template-rows: 1fr 155px 155px; grid-column-gap: 2vw; } }

body 가 항상 전체 뷰포트 높이를 채우도록 하기 위해 최소 높이 100vh 를 적용하고 선형 그래디언트를 사용하여 도로의 환상을 만듭니다.

 body { min-height: 100vh; background-image: linear-gradient( to top, #f0f0f1 0%, #f0f0f1 155px, #fff 155px, #fff 100%); }

행 번호를 사용하여 header 을 그리드에 배치하여 열의 절반과 모든 행을 차지합니다. 작은 figure 을 정렬하면 그리드 모듈의 끝에 배치됩니다. 그런 다음 main 은 실행 중인 텍스트의 좁은 단일 열을 형성합니다.

 header { grid-column: 5 / -1; grid-row: 1 / 4; margin-bottom: 0; height: auto; background-color: #444; } figure { grid-column: 1 / 4; grid-row: 2; align-self: end; max-width: auto; } main { grid-column: 4; grid-row: 1 / 3; align-self: center; background-color: transparent; } 

스토리를 잘 전달하려면 규모가 스토리 이해에 어떤 ​​영향을 미치는지 아는 것이 중요합니다. 단순한 크기만으로는 충분하지 않으므로 상당한 영향을 미치려면 크기가 다른 요소의 크기에 상대적이어야 합니다.

Bea Feitler는 스케일을 이해하고 잘 사용했습니다. 그녀는 종종 큰 전경 요소를 배경의 작은 요소와 대조하여 놀라운 깊이가 포함된 디자인을 만들었습니다. 이제 규모를 사용하여 제품 및 웹사이트 디자인에 영향력을 더함으로써 그녀의 발자취를 따를 수 있습니다.

자신감 있는 색상 선택

Bea Feitler의 자신감 있는 색상 선택은 그녀 작업의 특징 중 하나였으며 즉시 나를 매료시켰습니다. 다음 Feitler에서 영감을 받은 디자인을 위해 저는 짙은 빨간색과 생생한 노란색을 대조하고 디자인의 양쪽에서 이러한 색상을 반대로 했습니다.

이 페이지는 색상 면에서는 크지만 마크업 면에서는 작습니다. 두 개의 구조적 요소만 필요합니다. header 와 main . 둘 다 내부에는 figure 과 나눗셈이 있습니다.

 <header> <figure>…</figure> <div>…</div> </header> <main> <figure>…</figure> <div>…</div> </main>

배경 및 텍스트 색상은 이 디자인을 구현하기 위한 시작점입니다. 나는 다른 모든 것을 정상적인 흐름에 맡길 수 있습니다.

 body { background-color: #ba0e37; color: #f8d72e; } main { background-color: #f8d72e; color: #272732; } 

중간 크기 화면의 경우 header 와 main 내부의 그림과 구분선이 모든 뷰포트의 높이와 너비의 절반을 차지하도록 하고 대칭 2열 그리드와 최소 높이를 적용합니다.

 @media screen and (min-width : 48em) { header, main { display: grid; grid-template-columns: 1fr 1fr; min-height: 50vh; } }

나는 두 번째 열에 머리글의 figure 을 배치하고 첫 번째 열에 나눗셈을 배치합니다. 이것은 내용 순서의 반대이기 때문에 한 열이 다른 열 아래로 떨어지는 것을 방지하기 위해 동일한 행에 둘 다 할당해야 합니다.

 header figure { grid-column: 2; header div { grid-column: 1; grid-row: 1; }

주요 요소의 figure 과 구분은 내용 순서를 따르므로 grid-row 을 지정할 필요가 없습니다.

 main figure { grid-column: 1; align-self: end; } main div { grid-column: 2; }

화면을 가장자리에서 가장자리까지 색상으로 채우고 싶습니다. 더 큰 화면의 경우 내 body 의 전체 높이를 확장하는 비대칭 2열 그리드를 적용합니다.

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

이 대형 화면 디자인에서 내 header 와 main 의 figure 과 구분은 수평이 아닌 수직으로 쌓입니다. display 속성을 grid 에서 flex 로 변경하고 방향을 column 으로 설정합니다. 그러나 main 의 시각적 순서는 내용 순서와 반대이므로 방향을 열에서 열 반전으로 변경합니다.

 header, main { display: flex; flex-direction: column; } main { flex-direction: column-reverse; }

그런 다음 실행 중인 텍스트의 가독성을 향상시키기 위해 다중 열 레이아웃을 사용하고 열 너비를 18em 으로 지정합니다. 브라우저는 부모 요소 내부에 들어갈 수 있는 만큼의 해당 너비의 열을 생성합니다.

 main div { column-width: 18em; column-gap: 2vw; }

단색의 큰 블록은 눈을 피곤하게 할 수 있으므로 SVG를 사용하여 body 에 장난스럽고 반복적인 배경 이미지 패턴을 추가하여 분할하고 싶습니다.

 body { background-image: url("data:image/svg+xml"); }

SVG 내에서 채우기 색상을 지정하고 미묘한 효과를 위해 낮은 채우기 불투명도를 설정합니다.

 fill='#f8d72e' fill-opacity='0.1'

동일한 SVG 이미지를 main 의 노란색 배경에 적용합니다. 이번에는 채우기 색상을 흰색으로 변경하고 채우기 fill-opacity 를 높입니다.

 main { background-image: url("data:image/svg+xml"); } fill='#fff' fill-opacity='0.2'

패턴과 질감은 Bea Feitler의 아이코닉한 잡지 스프레드의 많은 부분에서 큰 역할을 하지만 웹에서는 인기를 잃었습니다. 다음으로 디자인에 깊이를 더할 CSS 및 SVG 패턴을 사용하는 방법을 보여 드리겠습니다.

패턴과 질감이 깊이를 더합니다.

이 다음 Feitler에서 영감을 받은 디자인에서는 원을 사용하여 폭스바겐 비틀의 곡선미를 전달하고 싶습니다. 이 멋진 디자인을 구현하려면 최소한의 HTML이 필요합니다. 단 세 가지 요소만 있으면 됩니다. header , main 및 aside :

 <header aria-hidden="true"> <picture>…</picture> </header> <aside> <div><img></div> <div><img></div> </aside> <main> <h1 aria-labelledby="Volkswagen logo"> <svg>…</svg> </h1> <p>…</p> </main>

화면 판독기에서 header 를 발표하는 것을 원하지 않으므로 값이 true 인 aria-hidden 속성을 추가합니다. 스크린 리더가 내 최상위 제목을 설명하기를 원하므로 여기에 aria-labelledby 속성을 추가합니다.

하프톤 스타일의 점은 이 페이지에 질감을 추가하고 여러 배경 그라디언트와 background-size 및 background-position 조합을 사용하여 이와 같은 패턴을 쉽게 구현할 수 있습니다.

 body { background-color: #ba0e37; color: #fff; background-image: radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%), radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%); background-size: 6vw 6w; background-position: 0 0, 3vw 3vw; }

이 스타일을 세 단계로 나눕니다.

1. 쉼표로 구분된 두 개의 방사형 그래디언트입니다. 각 그라디언트는 두 가지 색상 단계를 포함합니다. 첫 번째 단계는 15% 이고 두 번째 단계는 16% 로 점을 형성합니다.
2. 뷰포트 너비 단위를 사용하여 결과 패턴의 크기를 조정함으로써 도트 크기를 페이지 너비에 비례하도록 유지합니다.
3. 첫 번째 방사형 그래디언트를 뷰포트의 왼쪽 상단( 0 0 )에 배치하고 두 번째는 배경 크기의 절반인 뷰포트 너비 단위를 사용하여 배치합니다.

Lea Verou는 선형 및 방사형 그라디언트를 사용하여 개발한 유용한 패턴 갤러리를 편집하느라 바빴습니다. Lea의 갤러리만큼 영리하지만 복잡한 그라디언트를 사용하여 이미지와 같은 패턴을 생성하는 데 문제가 있다는 점이 있습니다.

SVG 패턴이 훨씬 더 적절해 보입니다. 가볍고 훨씬 유연합니다. URL을 사용하여 배경 이미지에 SVG를 추가하고 HTTP 요청이 염려되는 경우 SVG를 data:image 로 스타일시트에 포함합니다.

 body { background-image: url("data:image/svg+xml"); }

이 디자인의 aside 에는 각각 딱정벌레의 멋진 전면 사진이 포함된 두 부분이 있습니다. 곡선을 보완하기 위해 해당 분할을 원으로 자릅니다.

 aside div { -webkit-clip-path: circle(); clip-path: circle(); } 

사진의 배경을 완전히 투명하게 하여 필요할 때마다 부모 부분의 색상을 변경할 수 있습니다. 도트 패턴의 힌트가 표시되도록 약간 투명한 배경색을 추가합니다.

 aside div:first-child { background-color: rgba(57,135,106,.9); } aside div:last-child { background-color: rgba(248,215,46,.9); }

이 디자인에 색상과 질감이 너무 많기 때문에 레이아웃이 단순해야 하므로 가장 좁은 열이 260px 아래로 줄어들 수 없는 2열 비대칭 그리드를 적용합니다.

 @media screen and (min-width : 64em) { body { display: grid; grid-template-columns: 4fr minmax(260px, 1fr); } }

빨간색 패턴에 대해 실행되는 텍스트 단락의 접근성과 가독성을 향상시키기 위해 배경과 일치하는 색상에 미묘한 그림자를 추가합니다.

 p { filter: drop-shadow(0 0 5px #ba0e37); } 

과거에는 사진을 필터링하여 흐림, 색상 변경 또는 그림자 효과를 적용하려면 이미지 편집기에서 파괴적인 효과를 추가해야 했지만 오늘날에는 CSS에서 동일한 필터를 많이 사용할 수 있습니다. 다른 HTML 요소에도 필터를 적용할 수 있습니다.

CSS 필터를 적용하는 것은 간단합니다. 먼저 필터 함수를 선언한 다음 괄호 안에 값을 선언합니다. opacity 속성 대신 필터를 사용하여 요소의 불투명도를 25% 로 줄이려면 opacity 필터를 사용합니다.

 .ihatetimvandamme { filter: opacity(.25); }

이러한 값은 각 필터에 따라 다릅니다. 일부 필터는 도를 사용하고 픽셀, 백분율 또는 이에 상응하는 십진수를 사용할 수 있습니다. 예를 들어 .25 는 25% 이고 1 은 100% 입니다.

10개의 스톡 CSS 필터가 있습니다: blur , brightness , contrast , drop-shadow , greyscale , hue-rotate , invert , opacity , saturate , sepia . URL 기능을 사용하여 SVG의 사용자 정의 필터를 사용할 수도 있습니다.

header 에서 모든 색상을 제거하고 opacity 를 80% 로 줄이고 싶습니다. 여러 필터를 공백으로 구분하여 결합할 수 있습니다. 브라우저는 지정된 순서대로 필터를 적용하므로 내 header 의 경우 opacity 가 변경되기 전에 색상이 제거된다는 점을 기억하는 것이 중요합니다.

 header { filter: grayscale(1) opacity(.8); }

CSS 필터와 값 사이를 부드럽게 전환해야 하는 경우 :hover 의사 클래스에 대한 header 의 opacity 를 높여 상태 간에 전환을 추가할 수 있습니다.

 header { filter: grayscale(1) opacity(.8); transition: filter 1s linear; } header:hover { filter: grayscale(1) opacity(1); }

CSS를 사용하여 먼저 키프레임을 정의하고 애니메이션 지속 시간의 0 %에서 100% 사이의 비율로 필터 값을 설정하여 필터 간에 보다 정교한 애니메이션을 개발할 수 있습니다.

 @keyframes beetle { 0% { filter: grayscale(1) opacity(.8) blur(5px); } 50% { filter: grayscale(1) opacity(1) blur(0); } 100% { filter: grayscale(1) opacity(.8) blur(5px); } }

그런 다음 animation-duration , animation-delay 및 기타 선택적 설정에 대한 animation animation-name 및 값을 사용하여 이 애니메이션을 header 에 할당합니다.

 header:hover { animation-name: beetle; animation-delay: 0s; animation-direction: alternate; animation-duration: 1s; animation-fill-mode: forwards; animation-iteration-count: 1; animation-timing-function: linear; }

Una Kravets는 그녀의 CSSgram 라이브러리에 대해 CSS 필터와 혼합 모드를 사용하여 Instagram 필터 효과를 재창조했습니다. Una의 작업을 기반으로 개발자 Indrashish Ghosh는 Instagram 스타일 효과를 세부적으로 제어하고 업로드된 이미지에 적용하고 CSS 값을 생성하는 도구인 cssFilters를 만들었습니다. Indrashish와 같은 도구를 사용하면 이미지 편집기처럼 CSS 필터를 쉽게 사용할 수 있습니다.

지나치게 장식적인 디자인에 대한 반응인 평면 디자인은 거의 10년 동안 지배적인 미학이었습니다. 그라디언트, 패턴, 그림자 및 3차원 스큐어모피즘이 유행에서 벗어남에 따라 디자이너는 단색, 정사각형 모서리 및 날카로운 모서리를 수용했습니다.

안티 스큐어모피즘은 디자이너가 일부 사람들이 여전히 번성하는 것으로 볼 수 있는 것에 주의를 산만하게 하지 않으면서 기능 디자인과 사용성에 초점을 맞추는 데 의심의 여지가 없습니다. 그러나 제품과 웹사이트 디자인을 최소한으로 줄이는 것은 불행한 결과를 낳았습니다. 디자인을 거의 차별화하지 않고 제품과 웹 사이트는 구별하기 어려운 유감스러운 획일성을 채택했습니다.

나는 스큐어모피즘의 최악의 과잉으로의 회귀를 옹호하는 것은 아니지만, 나는 제품 및 웹사이트 디자이너들이 디자인에 대한 보다 활기찬 접근의 가치를 깨닫기를 바랍니다. 디자인이 경쟁 제품과 브랜드를 구별할 수 있는 방법을 평가하는 사람입니다. 그라디언트, 패턴, 그림자를 적절하게 사용하여 스토리를 전달하고 더 큰 어포던스를 제공하는 방법입니다. 이것은 제품과 웹사이트를 사용하기 쉬울 뿐만 아니라 더 즐겁게 만들 것입니다.

SVG 필터로 개발

이 최종 영감을 받은 디자인에는 두 가지 구조적 요소만 필요합니다. 6개의 밝은 색상의 딱정벌레가 포함된 header 와 내 텍스트의 main :

 <header> <div><img src="car-red.png" alt=""></div> <div><img src="car-green.png" alt=""></div> <div><img src="car-cyan.png" alt=""></div> <div><img src="car-magenta.png" alt=""></div> <div><img src="car-yellow.png" alt=""></div> <div><img src="car-black.png" alt=""></div> </header> <main>…</main>

일반적인 흐름은 작은 화면에 대해 이 디자인의 대부분을 처리하지만, 이것이 할 일이 없다는 것을 의미하지는 않습니다. 작은 화면에 맞게 모두 축소하면 그 화려한 자동차의 효과를 잃을 것입니다. 나는 또한 사람들이 내 콘텐츠를 보기 전에 6개를 모두 지나 스크롤하는 것을 원하지 않으므로 내 솔루션은 스크롤 패널에서 가로로 정렬하는 것입니다.

Flexbox는 이러한 이미지를 배열하기 위한 확실한 선택이지만 기본 왼쪽-오른쪽 순서는 첫 번째 차량의 앞면 대신 최종 차량의 뒷면을 표시하는 것을 의미합니다. 이것은 flex-direction 을 기본 row 에서 row-reverse 로 변경하여 쉽게 해결할 수 있습니다.

 header { display: flex; direction: row-reverse; max-width: 100%; overflow-x: scroll; }

이 모든 자동차가 같은 크기로 표시되기를 원하므로 flex-grow 속성과 1 값을 사용합니다. 뷰포트 외부에 더 볼 것이 있음을 나타내기 위해 각 자동차의 전면을 표시하고 싶기 때문에 flex-basis 값을 80% 로 설정했습니다.

 header div { flex-grow: 1; flex-grow: 0; flex-basis: 80%; /* flex: 1 0 80%; */ }

중간 크기의 화면에는 내 자동차 컬렉션을 위한 보다 정교한 레이아웃을 위한 공간이 있습니다. 이 디자인을 위해 각 모듈이 16:9 종횡비 직사각형인 8x12 모듈식 그리드에 딱정벌레를 배열합니다. 뷰어에서 가장 멀리 떨어져 있는 검은색 딱정벌레가 단일 모듈을 차지하고 전경의 빨간색 딱정벌레가 가장 큰 공간 영역을 차지할 때까지 자동차가 점점 더 커 보입니다.

이 모듈식 그리드를 구현하기 위해 헤더 요소에 Grid를 적용한 다음 동일한 크기로 반복되는 8개의 열과 콘텐츠의 최소 높이에 맞게 조정되는 12개의 행을 적용합니다. 항목을 각 행의 start 부분이 아닌 end 에 정렬하면 결과가 더 사실적으로 보입니다.

 @media screen and (min-width : 48em) { header { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(12, min-content); grid-row-gap: 10px; align-items: end; } } 

My next task is to place each Beetle onto the grid. I use a combination of child ( > ) and nth-child selectors to place each element using line numbers:

 header > :nth-child(1) { grid-column: 3 / -1; grid-row: 10 / -1; } header > :nth-of-type(2) { grid-column: 3 / 7; grid-row: 7 / 9; } header > :nth-of-type(3) { grid-column: 1 / 4; grid-row: 5 / 7; } header > :nth-of-type(4) { grid-column: 2 / 4; grid-row: 3; } header > :nth-of-type(5) { grid-column: 6 / 8; grid-row: 2; } header > :nth-of-type(6) { grid-column: 3; grid-row: 1; }

A design like this cries out for typographic details. Padding on the main element adds space around my running text, so to add interest to my type, I set column widths of 24em , and a browser will automatically create the right number of columns to fit the viewport:

 p { column-width: 24em; column-gap: 2vw; }

To add extra interest to my type, I combine a first-of-type pseudo-class selector with a first-line pseudo-element to transform that first line into uppercase letters:

 p:first-of-type::first-line { text-transform: uppercase; }

To implement my design for larger screens, I double the number of columns from eight to sixteen and reposition my images to the new line numbers:

 @media screen and (min-width : 64em) { header { grid-template-columns: repeat(16, 1fr); } header > :nth-child(1) { grid-column: 8 / 15; grid-row: 9 / 13; } header > :nth-of-type(2) { grid-column: 6 / 11; grid-row: 5 / 8; } header > :nth-of-type(3) { grid-column: 1 / 5; grid-row: 4 / 6; } header > :nth-of-type(4) { grid-column: 4 / 6; grid-row: 3; } header > :nth-of-type(5) { grid-column: 11; grid-row: 2; } header > :nth-of-type(6) { grid-column: 5; grid-row: 1; } }

Compared to today's Beetle — which weighs almost 3000lbs — the Volkswagen Type 1 was a lightweight and speedy little car for its time. I'd like to create the impression these cars are speeding past the viewer by adding motion blur. Blurring an element using a CSS filter is straightforward:

header > div { filter: blur(5px); }

이 필터를 사용하면 가장 적절한 단위로 보이는 픽셀을 포함하여 여러 길이 값을 사용하여 요소를 흐리게 처리할 수 있습니다. 그러나 CSS 필터를 사용하면 이미지 편집기의 가우시안 흐림 효과와 마찬가지로 가로 및 세로로 동일한 양을 사용하여 요소를 흐리게 할 수 있습니다. 내 디자인에 사실적인 모션을 추가하려면 CSS를 SVG 필터로 바꿔야 합니다.

이번 호에서 SVG 필터에 대한 세부 정보를 약간만 다루지만 SVG 전문가 Sara Soueidan은 이에 대해 광범위하게 저술했습니다. Sara의 SVG Filters 101 튜토리얼부터 시작하세요.

10개의 스톡 필터는 비교적 최근에 CSS에 추가되었지만 그 역사는 SVG 기원으로 거슬러 올라갑니다. SVG의 필터는 6개의 추가 필터와 놀라운 사용자 정의 가능성으로 훨씬 더 큰 유연성을 제공합니다. CSS blur 는 SVG에서 가로 및 세로 축(X/Y,) 모두에 대해 하나의 값만 허용하는 반면 두 값을 사용할 수 있습니다. 하나는 X축용이고 다른 하나는 Y축용입니다.

SVG에서 모든 필터에는 고유한 ID가 있으므로 HTML 요소를 흐리게 처리하려면 스타일시트의 필터 속성에 있는 URL 값을 사용하여 해당 ID를 참조하십시오.

 .blur { filter: url(#blur); }

필터는 SVG에서 고유한 요소를 가지고 있습니다. 바로 filter 요소입니다. 필터가 브라우저에 표시되지 않더라도 SVG 높이를 0 으로 지정하면 공간을 차지하지 않습니다.

 <svg height="0"> <filter>…</filter> </svg>

각 SVG 필터 프리미티브에는 "필터 효과"의 약어인 fe가 접두사로 붙는 고유한 이름이 있습니다. 당연히 블러의 이름은 feGaussianBlur 입니다. 흐림의 양은 수평 및 수직에 대해 하나의 균일한 값 또는 두 개의 개별 값을 사용하여 stdDeviation 으로 적용됩니다. SVG에서 이전의 균일한 5px 가우스 흐림 효과를 재현하기 위해 하나의 값을 추가합니다.

 <filter> <feGaussianBlur in="SourceGraphic" stdDeviation="5"/> </filter>

가로축에서만 이미지가 흐려지는 보다 사실적인 모션 효과를 찾고 있습니다. X축에만 흐림 효과를 적용하고 Y축은 0으로 둡니다.

 <filter> <feGaussianBlur in="SourceGraphic" stdDeviation="15, 0"/> </filter>

이제 내 차는 뷰포트를 가로질러 과속하지만 자세히 보면. 결과는 완전히 현실적이지 않습니다. 흐릿한 요소의 가장자리가 경계 상자에 의해 잘리기 때문입니다. 이것은 모든 요소를 ​​둘러싸는 직사각형입니다.

전체 필터 효과를 표시하려면 x , y , width 및 height 값을 사용하여 필터 영역의 크기를 늘려야 합니다. 가로 및 세로 축 모두에 -10% 의 음수 값을 사용한 다음 width 와 height 를 120% 로 늘리면 이미지의 흐릿한 가장자리에 더 많은 공간이 표시됩니다.

 <filter x="-10%" y="-10%" width="120%" height="120%"> … </filter>

빠르게 지나가는 자동차를 보거나 움직이는 기차 창 밖을 내다보면 가장 가까운 물체가 멀리 있는 물체보다 빠르게 움직이는 것처럼 보입니다. 내 디자인을 보다 사실적으로 보이게 하려면 전경, 중간 지대 및 배경에 있는 개체에 대해 다른 흐림 값 세트가 필요합니다.

벽장 빨간 딱정벌레와 같은 전경 요소에는 가장 높은 양의 수평 흐림 효과가 필요합니다. 이 필터에 blur-foreground 의 ID를 부여합니다.

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="15,0"/> </filter>

그런 다음 중간 지점의 딱정벌레는 10 의 약간 더 낮은 stdDeviation 을 받습니다.

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="10,0"/> </filter>

마지막으로 배경에 있는 개체가 가장 흐릿하게 보입니다. 내 스타일시트에 적용할 수 있도록 이 필터에 blur-background 부여합니다.

 <filter x="-10%" y="-10%" width="120%" height="120%"> <feGaussianBlur in="SourceGraphic" stdDeviation="5,0"/> </filter>

내 모든 필터를 지정하고 내 스타일시트에서 전경, 중간 및 배경의 딱정벌레에 적용합니다.

 <img src="car-red.png" class="blur-foreground"> <img src="car-green.png" class="blur-medium"> <img src="car-cyan.png" class="blur-medium"> <img src="car-magenta.png" class="blur-medium"> <img src="car-yellow.png" class="blur-background"> <img src="car-black.png" class="blur-background"> .blur-foreground { filter: url(#blur-foreground); } .blur-medium { filter: url(#blur-medium); } .blur-background { filter: url(#blur-background); }

6개의 다채로운 딱정벌레 세트가 이제 뷰포트를 가로질러 경주하고 있으며 나의 마지막 Feitler에서 영감을 받은 디자인도 승자입니다.

주의 : Smashing 회원은 Andy의 Inspired Design Decisions 잡지의 아름답게 디자인된 PDF와 이 기사의 전체 코드 예제에 액세스할 수 있습니다.

시리즈에서 더 읽어보기

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

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