Inspirierte Designentscheidungen mit Bea Feitler: Eine unaufhaltsame kreative Kraft

Auch wenn Sie kein Grafikdesign an der Kunsthochschule studiert haben, kennen Sie vielleicht ein paar berühmte Namen. Mit über einem Jahrhundert kommerzieller Kunstrichtung gibt es noch viele weitere Namen zu entdecken. Menschen, die erstaunliche Arbeit geleistet haben, die uns ermutigen und inspirieren kann, kreativer über das Web nachzudenken.

Menschen mit unglaublichem Talent zu entdecken, war einer der lohnendsten Aspekte des Art Direction-Studiums. Wenn ich etwas über einen Designer lerne, komme ich oft zu einem anderen, und wenn ich jemanden finde, dessen Arbeit ich bewundere, möchte ich nicht nur verstehen, was er gemacht hat, sondern auch, warum er es gemacht hat.

Nachdem ich von Alexey Brodovitchs einflussreicher Arbeit bei Harper's Bazaar bis in die 1950er Jahre gehört hatte, wollte ich wissen, welchen Einfluss sein Vermächtnis auf das Magazin hatte. Dies führte mich zu Bea Feitler und ihrer kreativen Partnerin Ruth Ansel, die in den 1960er Jahren Harper's Bazaar leitete.

Feitler wurde als „die bahnbrechende Art Directorin, von der Sie noch nie gehört haben“ beschrieben. Ich habe sie noch nie auf einer Designkonferenz erwähnt oder in einem Artikel über Webdesign erwähnt gesehen.

Aber Feitlers selbstbewusste und energiegeladene Designs sind nur ein Teil dessen, was ihr Leben und ihre Arbeit faszinierend macht. Noch wichtiger war, wie ihre Arbeit die Veränderungen in der Gesellschaft in Amerika während der 1960er Jahre und die Entscheidungen, die sie traf, um sie zu beeinflussen, widerspiegelte.

Lediglich eine Ausstellung über ihre Arbeit und ein retrospektives Buch wurden veröffentlicht. „O Design de Bea Feitler“, geschrieben von ihrem Neffen, wurde 2012 in ihrer Heimat Brasilien veröffentlicht. Ich brauchte Monate, um ein Exemplar aufzuspüren, aber schließlich fand ich eines. Es ist das teuerste Buch, das ich gekauft habe.

Feitler hat Leuten, die für das Web designen, genauso viel beizubringen, wie sie es den Magazindesignern getan hat, die ihr gefolgt sind. Ich hoffe, dass ich ein wenig dazu beitragen kann, dass sich Menschen so in Bea Feitlers Arbeit verlieben, wie ich es getan habe.

Inspiriert von Bea Feitler

Bea Feitler wurde 1938 in Rio de Janeiro geboren. Nachdem sie an Plattencovern, Buchumschlägen, Magazinen und Plakatdesigns gearbeitet hatte, verließ sie Brasilien und zog nach Manhattan. 1961 – und immer noch erst 25 Jahre alt – wurde sie Art Assistant, damals neben Ruth Ansel eine der jüngsten und ersten weiblichen Co-Art Directoren bei Harper's Bazaar.

Genau wie Alexey Brodovitch – die vor ihrem Umzug in die Vereinigten Staaten von Harper's Bazaar zurückgetreten war – trug Feitlers Zusammenarbeit mit Künstlern und Fotografen dazu bei, ihre Arbeit zu definieren. Bei Harper's Bazaar, Richard Avedons Foto von Model Jean Shrimpton in ihrem berühmten rosa Weltraumhelm, dann Annie Leibovitz' nackter John Lennon auf dem Cover von Rolling Stone.

Obwohl Feitler Brodovitch nie begegnet ist, ist es faszinierend zu sehen, wie sie sein Vermächtnis respektiert und dann weiterentwickelt hat. Feitler verstand, dass Magazinseiten bewusst und individuell aufgebaut sein sollten, gleichzeitig aber zu einem harmonischen Rhythmus miteinander verbunden sein sollten.

Ein Magazin sollte fließen. Es sollte Rhythmus haben. Sie können nicht nur auf eine Seite schauen, Sie müssen sich vorstellen, was davor und danach kommt. Bei gutem Editorial Design geht es darum, einen harmonischen Fluss zu schaffen. – Bea Feitler

Feitler kombinierte Brodovitchs Beherrschung der Doppelseite mit ihrer Auswahl kräftiger Farben, die von den Popkünstlern Jasper Johns, Roy Lichtenstein und Andy Warhol sowie von Street Fashion und Jugendkultur inspiriert waren.

Sie scheute sich nicht, mit Farben zu experimentieren oder mit Konventionen zu brechen, indem sie zwei Mal grellen grünen Text auf einen neonpinken Hintergrund platzierte, zuerst für ein Harper's Bazaar-Cover im April 1965 und später für das feministische Magazin Ms. im Dezember 1972.

Im Harper's Bazaar Studio, das sie mit Ruth Ansel teilte, füllte eine sich ständig verändernde Collage ihre Inspirationswand; etwas, für das ich mir wünschte, ich hätte Platz in meinem winzigen Studio. Feitler hatte keine Angst davor, Medien zu mischen, und als sie das Gefühl hatte, dass eine ihrer ikonischsten Strecken nicht funktionierte, kombinierte sie eines der bekanntesten Fotos von Avedon mit einem Panel aus einem Comic, das sie in einem Zeitungskiosk gekauft hatte die Straße unten.

Feitlers Designs beeinflussten und spiegelten die Veränderungen in der amerikanischen Gesellschaft in den 1960er Jahren wider. Die Zeitschriften, die sie künstlerisch leitete, hatten eine schnelle, fast filmische Qualität, die perfekt zur damaligen Kultur passte, aber auch für unsere heutige Online-Arbeit relevant ist. Feitler glaubte, dass es bei gutem Editorial Design darum geht, einen harmonischen Fluss zu schaffen. Dies ist für die Gestaltung ansprechender Benutzererlebnisse und Kundenreisen ebenso relevant wie für Zeitschriftenseiten.

Auch wenn einige Leute immer noch das Mantra rezitieren, dass das Web nicht gedruckt ist, können wir viel von Feitlers Arbeit lernen. Ihre Designs können uns dabei helfen, nicht nur das redaktionelle Design online, sondern auch E-Commerce-Websites und digitale Produktdesigns zu verbessern.

Feitler sagte, ein Buch sei „50/50 Bild zu Text“. Im Web müssen wir auch interaktive Funktionen und Videos zulassen. Zu verstehen, wie man diese Komponenten erfolgreich kombiniert, um ein konsistentes, fesselndes Erlebnis zu schaffen, ist eine grundlegende Fähigkeit, die jeder Digitaldesigner entwickeln sollte.

Als Mentor und Lehrer teilte Feitler viele Prinzipien mit Alexey Brodovitch. Sie ermutigte ihre Studenten, ihre eigene Richtung zu entwickeln, und viele wurden selbst zu prominenten Art Directors. Feitler war anspruchsvoll und akzeptierte von allen nicht weniger als die allerhöchsten Standards für exzellentes Design.

Halten Sie an Ihren Leidenschaften fest und graben Sie tief, während Sie Ihren Instinkten vertrauen. Gehen Sie aus dem heraus, was erwartet wird. Akzeptieren Sie Unfälle und wissen Sie, dass Sie schließlich die perfekte Lösung für ein kreatives Dilemma finden und dabei sehr fröhlich sein werden. — Ruth Ansel

Leider starb Bea Feitler 1982 im Alter von nur 44 Jahren an Krebs. Ich glaube, dass sie denen von uns, die für das Internet designen, genauso viel beizubringen hat, wie sie es den Magazin-Art-Direktoren tat, die ihr folgten. Ich hoffe, ihr Leben und ihre Arbeit werden uns dazu bringen, unseren Überzeugungen Mut zu machen und unsere eigenen mutigen und selbstbewussten Entscheidungen zu treffen.

#### Beauty-Explosion

Harper's Bazaar's hatte zuvor keinen Gastredakteur gehabt, aber für die Ausgabe vom April 1965 hat Richard Avedon, ein langjähriger Mitarbeiter, die gesamte Ausgabe bearbeitet und fotografiert.

Im Inneren fotografierte Avedon Donyale Luna – die erste schwarze Frau, die auf dem Cover eines Mainstream-Modemagazins abgebildet war – und Paul McCartney in einem von der NASA geliehenen Raumanzug. Für das Cover wählte Avedon ein Bild des zeitgenössischen Supermodels Jean Shrimpton mit einem Weltraumhelm, der von einem der berühmtesten Hutmacher New Yorks angefertigt worden war.

Avedon erinnerte sich später daran, dass um 23 Uhr – nach Ablauf der Frist – das Foto, das er für das Cover aufgenommen hatte, nicht funktionierte. Also schnitt Feitler die Form eines Helms aus rosafarbenem Day-Glo-Papier aus und platzierte ihn über Avedons Foto. Keine Fokusgruppen, keine Recherche, keine Publikumstests, nur eine mutige und intuitive Designentscheidung.

Das Ergebnis war ein Cover, das die Medaille des New York Art Director's Club gewann und auf Platz 15 der American Society of Magazine Editors 2005-Liste der Top 40 Magazine Covers platziert wurde.

⁵⁰ ⁄ ₅₀ Bild zu Text

Um mein erstes von Feitler inspiriertes Design umzusetzen, ist es mein Ziel, die minimalsten Strukturelemente zu verwenden; eine header sowie main und aside für den Inhalt. Meine Kopfzeile enthält das geteilte Bild eines legendären Volkswagen Käfers und eine Überschrift, die ein Inline-SVG-Volkswagen-Logo enthält. Da diese Überschrift keinen Text enthält, verwende ich ein ARIA-Label, um sie zu beschreiben. Dies wird Menschen helfen, die unterstützende Technologien verwenden:

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

Für kleinere Bildschirme benötige ich nur Grundstile, da der normale Fluss mein einspaltiges Layout behandelt. Zuerst füge ich einen linearen Farbverlauf hinter dem Header-Bild hinzu. Farbverläufe sind unglaublich flexibel, aber trotz ihrer Nützlichkeit werden sie überraschend wenig genutzt:

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

Mein Farbverlauf beginnt links mit einem dunklen Grau und endet rechts mit Weiß. Ohne Farbstopps wäre das Ergebnis ein glatter Verlauf zwischen diesen Farben, aber ich möchte eine harte Linie in der Mitte meiner Kopfzeile. Um diesen Effekt zu erzielen, platziere ich zwei Farbstopps an der gleichen 50% -Position. Um die Richtung meines Farbverlaufs zu ändern, muss ich diese Prozentsätze nicht anpassen. Ich kann einfach die Verlaufsrichtung von to right to left ändern.

Es ist wichtig, ein konsistentes Gleichgewicht der visuellen Gewichtung beizubehalten, während Designs an verschiedene Bildschirmgrößen angepasst werden. Ich möchte nicht, dass mein Header-Bild so hoch ist, dass es meinen laufenden Text aus dem ersten Bildschirm schiebt, also lege ich eine maximale Höhe von 75vh oder drei Viertel der Höhe eines kleinen Bildschirms fest:

 header img { max-height: 75vh; }

Um mein kleines Bildschirmdesign zu vervollständigen, lege ich den header als Positionierungskontext fest. Dann positioniere ich das Volkswagen-Emblem absolut und stelle sicher, dass sich seine Breite an den Bildschirm anpasst, indem ich eine Viewport-Breiteneinheit von 5vw :

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

Mein Bild im Hochformat passt gut in große Bildschirme, aber ich brauche ein breiteres Bild für Bildschirme, die breiter als hoch sind. Orientierung ist eine fabelhafte, aber selten verwendete Medienabfrage, die die Ausrichtung eines Ansichtsfensters testet. Diese Medienabfrage kann in Stylesheets als Alternative zu konventionelleren Breitenabfragen verwendet werden. Es kann auch auf die source eines picture angewendet werden. Diese Abfrage tauscht mein Hochformat gegen eine Alternative im Querformat aus, wenn die Breite die Höhe überschreitet, egal ob auf einem kleinen Telefon oder einem Desktop-Display:

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

Für mein alternatives Landschaftsdesign verwende ich Grid, um die header , main und aside -Elemente zu platzieren. Es gibt mehrere Optionen zum Platzieren dieser Elemente – darunter Spalten und Zeilen sowie Vorlagenbereiche – aber ich habe mich für die Verwendung von grid-template-columns entschieden, um ein symmetrisches zweispaltiges Gitter auf dem body zu definieren. Ich wende den linearen Farbverlauf erneut an und stelle seine Mindesthöhe so ein, dass sie mit dem gesamten Ansichtsfenster übereinstimmt:

 @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%); } }

Im Querformat füllt meine header die gesamte Breite des Bildschirms aus. Da ich das Hintergrundbild mit linearem Farbverlauf auf diesem Element nicht mehr benötige, kann ich es einfach entfernen:

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

Da dieses Raster so einfach ist, platziere ich meine main und aside mit benannten Linien auf dem Raster:

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

Das Endergebnis ist ein Design, das sein Layout anpasst, je nachdem, ob ein Browser- oder Gerätebildschirm im Quer- oder Hochformat ausgerichtet ist.

#### Comicbuchkunst

Bea Feitler kombinierte regelmäßig Fotografien mit Illustrationen, und Comic-Buchkunst tauchte während ihrer gesamten Karriere auf.

Für Harper's Bazaar platzierte sie eine von Avedons Fotografien von Jean Shrimpton in einem Raumanzug auf einem Comic-Hintergrund. Später beauftragte sie 1973 die legendäre Comiczeichnerin Marie Severin mit der Gestaltung dieses Covers für das Ms. Magazine.

Skala betonen

Der Volkswagen Käfer war ein kleines Auto mit großer Persönlichkeit. Ich möchte, dass mein nächstes Design einen passenden Charakter hat. Das Großbilddesign verwendet ein riesiges Bild des Käferrads, um die Kleinheit des kleinen Autos zu betonen. Aber bevor ich zu großen Bildschirmen komme, möchte ich sicherstellen, dass ich auf kleinen Bildschirmen einen ähnlichen Kontrast im Maßstab beibehalte.

Drei Strukturelemente bilden das Markup, das ich benötige, um dieses Design zu implementieren; eine header für das große Radbild, eine figure , die das kleinere Bild des Autos enthält, und eine Hauptzeile für meinen laufenden Text. Da die header für niemanden, der einen Bildschirmleser verwendet, von Bedeutung ist, entscheide ich mich dafür, sie mit einem aria-hidden Attribut auszublenden:

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

Grundlegende Stile und normaler Fluss kümmern sich um die meisten Aspekte meines Designs für kleine Bildschirme, aber das bedeutet nicht, dass ich ignorieren kann, was es zum unverwechselbaren Gesamtkonzept macht; der Kontrast zwischen dem großen Rad und dem kleinen Volkswagen. Um sicherzustellen, dass mein header immer ein Drittel der Viewport-Höhe mit identischem Leerraum zwischen ihm und meinem Inhalt einnimmt, verwende ich sowohl für die Höhe als auch für den Rand Viewport-Höheneinheiten:

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

Ein Problem, auf das ich bei der Entwicklung flexibler Layouts häufig stoße, ist die unbeabsichtigte Größenänderung von Bildern. Mit einer festen Höhe auf meinem header und 100% Breite auf seinem Bild kann das Riesenrad verzerren. Glücklicherweise gibt es eine Möglichkeit, das Seitenverhältnis mit der Eigenschaft object-fit beizubehalten. Es gibt vier mögliche Optionen plus none :

1. contain
   Behält das Seitenverhältnis eines Bildes bei, während es in die Inhaltsbox eines übergeordneten Elements passt.
2. cover
   Behält das Seitenverhältnis eines Bildes bei, füllt dieses Mal aber die gesamte Box aus. In diesem Fall werden Teile des Bildes außerhalb der Inhaltsbox ausgeblendet.
3. fill
   Ein Bild wird so verzerrt, dass Breite und Höhe mit dem übergeordneten Bild übereinstimmen.
4. scale-down
   Verringert ähnlich wie „enthalten“ die Größe eines Bildes oder Videos, damit es in das übergeordnete Element passt.

Ich möchte, dass mein großes Rad den Header vollständig ausfüllt, ohne das Seitenverhältnis zu ändern. Ich mache mir auch keine Sorgen, dass einige Teile des Bildes abgeschnitten werden, was cover zur richtigen Wahl für die object-fit macht:

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

Jetzt ist das Radbild in Position, ich skaliere, indem ich seine große Größe mit einem kleinen Bild des gesamten Autos kontrastiere. Ich beschränke die maximale Größe des Käfers auf die Hälfte der Breite des Ansichtsfensters und zentriere ihn horizontal mit seinen Rändern:

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

Dieses Design verwendet einen soliden grauen Hintergrund, um die Straße darzustellen, also füge ich eine Hintergrundfarbe hinzu und bewege die figure um 10 Pixel nach 10px , damit die Räder des Käfers fest auf dem Asphalt sitzen:

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

Größere Bildschirme bieten die Möglichkeit, einen großen Eindruck zu hinterlassen, und für dieses Design möchte ich, dass das header die halbe Breite und die volle Höhe eines großen Bildschirms einnimmt. Ich verwende das gleiche zusammengesetzte 6+4-Gitter, das ich für viele Designs in dieser Serie verwendet habe. Es hat acht Spalten, zu denen ich drei Zeilen hinzufüge. Ich gebe der mittleren und der unteren Reihe eine feste Höhe und erlaube der ersten Reihe, den gesamten verbleibenden vertikalen Platz einzunehmen:

 @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; } }

Ich möchte, dass der body immer die volle Höhe des Ansichtsfensters ausfüllt, also wende ich eine Mindesthöhe von 100vh an und verwende einen linearen Farbverlauf, um die Illusion einer Straße zu erzeugen:

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

Unter Verwendung von Zeilennummern platziere ich die header auf dem Raster, sodass sie die Hälfte der Spalten und alle Zeilen einnimmt. Die Ausrichtung der kleinen figure platziert sie am Ende ihres Rastermoduls. Dann bildet der main eine einzelne schmale Spalte mit laufendem Text:

 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; } 

Zu wissen, wie der Maßstab das Verständnis einer Geschichte beeinflusst, ist entscheidend, um sie gut zu erzählen. Die schiere Größe allein reicht selten aus. Um eine signifikante Wirkung zu erzielen, muss die Größe im Verhältnis zur Größe anderer Elemente stehen.

Bea Feitler verstand Skalen und nutzte sie gut. Sie kontrastierte oft große Vordergrundelemente mit kleineren im Hintergrund, um Designs mit unglaublicher Tiefe zu schaffen. Wir können jetzt in ihre Fußstapfen treten, indem wir Skalierung nutzen, um Produkt- und Website-Designs Wirkung zu verleihen.

Zuverlässige Farbauswahl

Bea Feitlers souveräne Farbwahl war eines der Markenzeichen ihrer Arbeit und hat mich sofort angesprochen. Für mein nächstes von Feitler inspiriertes Design kontrastiere ich ein tiefes Rot mit einem leuchtenden Gelb und kehre diese Farben auf beiden Seiten des Designs um.

Während diese Seite groß in Farbe ist, ist sie auch klein im Markup. Ich brauche nur zwei Strukturelemente; ein header und main . In beiden befinden sich eine figure und eine Teilung:

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

Hintergrund- und Textfarben sind der Ausgangspunkt für die Umsetzung dieses Designs. Alles andere kann ich dem normalen Ablauf überlassen:

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

Bei mittelgroßen Bildschirmen möchte ich, dass die Zahlen und Unterteilungen in meiner header und main die Hälfte der Höhe und Breite eines beliebigen Ansichtsfensters einnehmen, also wende ich ein symmetrisches zweispaltiges Raster und eine Mindesthöhe an:

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

Ich platziere die figure der Überschrift in der zweiten Spalte und die Teilung in der ersten. Da dies das Gegenteil der Inhaltsreihenfolge ist, muss ich beide derselben Zeile zuweisen, um zu vermeiden, dass eine Spalte unter die andere fällt:

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

Die figure und die Aufteilung des Hauptelements folgen der Inhaltsreihenfolge, daher muss ich keine grid-row für sie angeben:

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

Ich möchte Bildschirme von Rand zu Rand mit Farbe füllen. Für größere Bildschirme wende ich ein asymmetrisches zweispaltiges Gitter an, das sich über die gesamte Höhe meines body erstreckt:

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

In diesem Großbilddesign sind die figure und Aufteilung in meinem header und main vertikal statt horizontal. Ich ändere die Eigenschaft display von grid auf flex und setze die direction auf column . Aber die visuelle Reihenfolge des main ist entgegengesetzt zu seiner Inhaltsreihenfolge, also ändere ich seine Richtung von Spalte zu Spalte-umgekehrt:

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

Um die Lesbarkeit meines Fließtextes zu verbessern, verwende ich dann ein mehrspaltiges Layout und gebe eine Spaltenbreite von 18em an. Ein Browser generiert so viele Spalten dieser Breite, wie in sein übergeordnetes Element passen:

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

Große einfarbige Blöcke können für das Auge ermüdend sein, daher möchte ich sie auflockern, indem ich dem body mithilfe von SVG ein verspieltes, sich wiederholendes Hintergrundbildmuster hinzufüge:

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

Innerhalb des SVG gebe ich sowohl die Füllfarbe als auch eine niedrige Deckkraft für einen subtilen Effekt an:

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

Ich wende das gleiche SVG-Bild auf den gelben Hintergrund meines main an, ändere diesmal seine Füllfarbe in Weiß und erhöhe die fill-opacity :

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

Muster und Texturen spielen in vielen der kultigen Magazin-Strecken von Bea Feitler eine große Rolle, und doch sind sie im Internet in Ungnade gefallen. Als Nächstes zeige ich Ihnen, wie Sie CSS- und SVG-Muster verwenden, die Ihren Designs Tiefe verleihen.

Muster und Textur verleihen Tiefe

In diesem nächsten von Feitler inspirierten Design möchte ich die Kurven des Volkswagen Käfers durch die Verwendung von Kreisen vermitteln. Ich brauche minimales HTML, um dieses formschöne Design zu implementieren, nur drei Elemente; eine header , eine main und eine 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>

Ich möchte nicht, dass der header von Screenreadern angekündigt wird, also füge ich ein aria-hidden -Attribut mit dem Wert true hinzu. Ich möchte, dass Screenreader meine Überschrift der obersten Ebene beschreiben, also füge ich ein aria-labelledby Attribut hinzu.

Punkte im Halbtonstil verleihen dieser Seite Textur, und es ist einfach, Muster wie dieses mit mehreren Hintergrundverläufen und Kombinationen aus background-size und background-position zu implementieren:

 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; }

Ich unterteile diesen Stil in drei Schritte:

1. Zwei radiale Farbverläufe, getrennt durch ein Komma. Jeder Farbverlauf enthält zwei Farbstufen, die erste bei 15% und die zweite bei 16% , die die Punkte bilden.
2. Indem ich Einheiten für die Breite des Ansichtsfensters verwende, um die Größe des resultierenden Musters zu bestimmen, halte ich die Punktgröße proportional zur Seitenbreite.
3. Positionieren Sie den ersten radialen Farbverlauf oben links im Ansichtsfenster ( 0 0 ) und den zweiten mit Einheiten für die Breite des Ansichtsfensters, die der Hälfte der Hintergrundgröße entsprechen.

Lea Verou war damit beschäftigt, eine Galerie nützlicher Muster zusammenzustellen, die sie mit linearen und radialen Farbverläufen entwickelte. So clever Leas Galerie auch ist, es gibt etwas an verschlungenen Farbverläufen, die verwendet werden, um bildähnliche Muster zu erzeugen, die mich stören.

SVG-Muster scheinen viel geeigneter zu sein. Sie sind genauso leicht und viel flexibler. Fügen Sie SVG mithilfe einer URL zu einem Hintergrundbild hinzu, und wenn Sie Bedenken hinsichtlich HTTP-Anforderungen haben, betten Sie eine SVG-Datei als data:image in ein Stylesheet ein:

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

Die aside in diesem Design enthält zwei Abteilungen, die jeweils Bilder der fabelhaften Front des Käfers enthalten. Ich schneide diese Unterteilungen in Kreise, um ihre Kurven zu ergänzen:

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

Indem ich die Hintergründe der Bilder vollständig transparent mache, kann ich die Farbe ihrer übergeordneten Bereiche jederzeit ändern. Ich füge leicht transparente Hintergrundfarben hinzu, die Hinweise auf das Punktmuster durchscheinen lassen:

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

Bei so viel Farbe und Textur in diesem Design muss mein Layout einfach sein, also wende ich ein zweispaltiges asymmetrisches Raster an, bei dem die schmalste Spalte niemals unter 260 Pixel schrumpfen kann:

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

Um die Zugänglichkeit und Lesbarkeit meiner Absätze mit Fließtext vor dem roten Muster zu verbessern, füge ich einen subtilen Schlagschatten in einer Farbe hinzu, die zu meinem Hintergrund passt:

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

In der Vergangenheit erforderte das Filtern eines Bildes zum Anwenden von Unschärfe, Farbänderung oder Schlagschatten das Hinzufügen destruktiver Effekte in einem Bildeditor, aber heute sind viele dieser Filter in CSS verfügbar. Sie können Filter auch auf andere HTML-Elemente anwenden.

Das Anwenden eines CSS-Filters ist unkompliziert. Deklarieren Sie zuerst die Filterfunktion und dann einen Wert in Klammern. Um die Deckkraft eines Elements mithilfe eines Filters auf 25% zu reduzieren – anstelle der opacity – verwende ich den opacity :

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

Diese Werte unterscheiden sich bei jedem Filter. Einige Filter verwenden Grade, akzeptieren Pixel, Prozentsätze oder die entsprechende Dezimalzahl. Beispielsweise entspricht .25 25% und 1 entspricht 100% .

Es stehen zehn Standard-CSS-Filter zur Auswahl: blur , brightness , contrast , drop-shadow , greyscale , hue-rotate , invert , opacity , saturate und sepia . Sie können auch die URL-Funktion verwenden, um einen benutzerdefinierten Filter von SVG zu verwenden.

Ich möchte alle Farben aus meiner header entfernen und die opacity auf 80% reduzieren. Ich kann beliebig viele Filter kombinieren, indem ich sie mit einem Leerzeichen trenne. Es ist wichtig, sich daran zu erinnern, dass ein Browser Filter in der angegebenen Reihenfolge anwendet, sodass für meinen header die Farbe entfernt wird, bevor die opacity geändert wird:

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

Wenn ich einen reibungslosen Wechsel zwischen CSS-Filtern und -Werten benötige, kann ich einen Übergang zwischen Zuständen hinzufügen, vielleicht indem ich die opacity meines header für eine :hover -Pseudoklasse erhöhe:

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

Ich kann CSS verwenden, um eine ausgefeiltere Animation zwischen Filtern zu entwickeln, indem ich zuerst meine Keyframes definiere und Filterwerte auf einen beliebigen Prozentsatz zwischen 0 und 100% der Dauer der Animation festlege:

 @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); } }

Ich weise diese Animation dann meinem header zu, indem ich den animation-name plus Werte für animation-duration , animation-delay und andere optionale Einstellungen verwende:

 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 hat Instagram-Filtereffekte mithilfe von CSS-Filtern und Mischmodi für ihre CSSgram-Bibliothek neu erstellt. Aufbauend auf Unas Arbeit hat der Entwickler Indrashish Ghosh cssFilters entwickelt, ein Tool zur granularen Steuerung dieser Effekte im Instagram-Stil, das Anwenden auf ein hochgeladenes Bild und das Generieren von CSS-Werten. Tools wie die von Indrashish machen die Verwendung von CSS-Filtern so einfach wie bei jedem Bildbearbeitungsprogramm.

Als Reaktion auf übermäßig ornamentale Designs ist Flat Design seit fast einem Jahrzehnt die dominierende Ästhetik. Als Farbverläufe, Muster, Schatten und dreidimensionaler Skeuomorphismus aus der Mode kamen, setzten Designer auf Volltonfarben, rechteckige Ecken und scharfe Kanten.

Anti-Skeuomorphismus hat Designern zweifellos dabei geholfen, sich auf das Feature-Design und die Benutzerfreundlichkeit zu konzentrieren, ohne von dem abgelenkt zu werden, was manche immer noch als Schnörkel ansehen. Aber die Reduzierung sowohl des Produkt- als auch des Website-Designs auf ein absolutes Minimum hatte unglückliche Folgen. Da ihre Designs kaum voneinander zu unterscheiden sind, haben Produkte und Websites eine bedauerliche Uniformität angenommen, die es schwierig macht, sie voneinander zu unterscheiden.

Obwohl ich keine Rückkehr zu den schlimmsten Auswüchsen des Skeuomorphismus befürworte, hoffe ich, dass Produkt- und Website-Designer den Wert eines lebendigeren Designansatzes erkennen werden; einer, der zu schätzen weiß, wie Design eine Marke von der Konkurrenz abheben kann. Eine Methode, die Farbverläufe, Muster und Schatten angemessen einsetzt, um Geschichten zu erzählen und mehr Erschwinglichkeit zu bieten. Dadurch werden Produkte und Websites nicht nur benutzerfreundlicher, sondern auch angenehmer.

Entwickeln Sie mit SVG-Filtern

Für dieses letzte inspirierte Design benötige ich nur zwei Strukturelemente; eine header , die sechs bunte Käfer enthält, und eine main für meinen Text:

 <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>

Normaler Fluss erledigt den größten Teil dieses Designs für kleine Bildschirme, aber das bedeutet nicht, dass es nichts zu tun gibt. Ich würde die Wirkung dieser farbenfrohen Autos verlieren, wenn ich sie alle verkleinern würde, damit sie auf einen kleinen Bildschirm passen. Ich möchte auch nicht, dass die Leute an allen sechs vorbeiscrollen, bevor sie meinen Inhalt sehen, also besteht meine Lösung darin, sie horizontal in einem Bildlauffeld auszurichten.

Flexbox ist die offensichtliche Wahl zum Anordnen dieser Bilder, aber die standardmäßige Links-Rechts-Reihenfolge würde bedeuten, dass die Rückseite des letzten Autos gezeigt wird, anstatt die Vorderseite des ersten. Dies lässt sich leicht lösen, indem Sie die flex-direction von der Standardzeile in row row-reverse ändern:

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

Ich möchte, dass alle diese Autos in derselben Größe erscheinen, also verwende ich die Eigenschaft flex-grow und einen Wert von 1 . Da ich die Vorderseite jedes Autos zeigen möchte, um anzuzeigen, dass es außerhalb des Ansichtsfensters mehr zu sehen gibt, setze ich den flex-basis Basiswert auf 80% ;

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

Auf mittelgroßen Bildschirmen ist Platz für ein aufwändigeres Layout meiner Autosammlung. Für dieses Design arrangiere ich meine Käfer auf einem modularen 8x12-Raster, wobei jedes Modul ein Rechteck mit einem Seitenverhältnis von 16:9 ist. Der schwarze Käfer, der am weitesten vom Betrachter entfernt ist, nimmt ein einzelnes Modul ein, und die Autos erscheinen zunehmend größer, bis der rote Käfer im Vordergrund die größte Raumzone einnimmt.

Um dieses modulare Raster zu implementieren, wende ich Grid auf mein Header-Element an, gefolgt von acht sich wiederholenden gleich großen Spalten und zwölf Zeilen, die sich an die Mindesthöhe ihres Inhalts anpassen. Indem die Elemente am end und nicht am start jeder Zeile ausgerichtet werden, sieht das Ergebnis realistischer aus:

 @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); }

Dieser Filter ermöglicht es mir, ein Element mit mehreren Längenwerten beliebig zu verwischen, einschließlich Pixel, die mir als die am besten geeignete Einheit erscheinen. Aber mit CSS-Filtern kann ich ein Element nur mit dem gleichen Betrag horizontal und vertikal verwischen, ähnlich wie der Gaußsche Weichzeichner eines Bildbearbeitungsprogramms. Um meinem Design realistische Bewegung hinzuzufügen, muss ich CSS gegen einen SVG-Filter austauschen.

Ich gehe in dieser Ausgabe nur auf wenige Details zu SVG-Filtern ein, aber die SVG-Expertin Sara Soueidan hat ausführlich darüber geschrieben. Beginnen Sie mit Saras SVG-Filter 101-Tutorial.

Während seine zehn Bestandsfilter eine relativ neue Ergänzung zu CSS sind, reicht ihre Geschichte weit zurück zu ihren SVG-Ursprüngen. Filter in SVG bieten eine weitaus größere Flexibilität mit sechs weiteren verfügbaren Filtern und unglaublichen Anpassungsmöglichkeiten. Während CSS blur nur einen Wert für horizontale und vertikale Achsen (X/Y) zulässt, kann ich in SVG zwei Werte verwenden; eine für die X-Achse, die andere für Y.

In SVG hat jeder Filter seine eigene Identität, um also zu einem HTML-Element zu verwischen, referenzieren Sie seine ID mit dem URL-Wert in der Filtereigenschaft aus einem Stylesheet:

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

Filter haben ihr eigenes Element in SVG, es ist das filter . Auch wenn ein Filter in einem Browser nicht sichtbar ist, wird durch die Angabe einer Höhe von 0 für SVG sichergestellt, dass kein Platz benötigt wird:

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

Jedes SVG-Filterelement hat seinen eigenen Namen, dem fe vorangestellt ist, einer Abkürzung für „Filtereffekt“. Es überrascht nicht, dass der Name für eine Unschärfe feGaussianBlur ist. Der Grad der Unschärfe wird als stdDeviation angewendet, wobei entweder ein einheitlicher Wert oder zwei getrennte Werte für horizontal und vertikal verwendet werden. Um die vorherige einheitliche 5px Gaußsche Unschärfe in SVG zu reproduzieren, füge ich einen Wert hinzu:

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

Ich suche nach einem realistischeren Bewegungseffekt, bei dem das Bild nur auf der horizontalen Achse unscharf ist. Ich wende Unschärfe nur auf die X-Achse an und lasse die Y-Achse auf Null:

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

Jetzt rast mein Auto über das Sichtfenster, aber wenn man genauer hinschaut. das Ergebnis ist nicht ganz realistisch. Das liegt daran, dass die Kanten meiner unscharfen Elemente durch den Begrenzungsrahmen abgeschnitten werden. Dies ist das Rechteck, das jedes Element umgibt.

Um den gesamten Filtereffekt sichtbar zu machen, muss ich die Größe meines Filterbereichs mit den Werten x , y , width und height erhöhen. Ich verwende negative Werte von -10% sowohl auf der horizontalen als auch auf der vertikalen Achse und erhöhe dann die width und height auf 120% , wodurch mehr sichtbarer Platz für die unscharfen Kanten meiner Bilder entsteht:

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

Wenn Sie vorbeirasende Autos beobachten oder aus einem sich bewegenden Zugfenster schauen, scheinen sich Objekte, die Ihnen am nächsten sind, schneller zu bewegen als weiter entfernte. Um mein Design realistischer erscheinen zu lassen, benötige ich unterschiedliche Weichzeichnungswerte für Objekte im Vordergrund, Mittelgrund und Hintergrund.

Vordergrundelemente wie der schrankrote Käfer benötigen die höchste horizontale Unschärfe. Ich gebe diesem Filter eine Identität von blur-foreground :

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

Dann erhalten Käfer im Mittelgrund eine etwas niedrigere stdDeviation von 10 :

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

Schließlich erhalten Objekte im Hintergrund die geringste Unschärfe. Ich gebe diesem Filter eine Identität von blur-background , damit ich ihn in meinem Stylesheet anwenden kann:

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

Nachdem alle meine Filter angegeben sind, wende ich sie in meinem Stylesheet auf Käfer im Vordergrund, Mittelgrund und Hintergrund an:

 <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); }

Mein Set aus sechs farbenfrohen Käfern rast jetzt über das Sichtfenster und mein endgültiges, von Feitler inspiriertes Design ist auch ein Gewinner.

NB : Smashing-Mitglieder haben Zugriff auf ein wunderschön gestaltetes PDF von Andys Inspired Design Decisions-Magazin und vollständige Codebeispiele aus diesem Artikel.

Lesen Sie mehr aus der Serie

• Inspirierte Designentscheidungen: Avaunt Magazine
• Inspirierte Designentscheidungen: Dringende Angelegenheiten
• Inspirierte Designentscheidungen: Ernest Journal
• Inspirierte Designentscheidungen: Alexey Brodovitch
• Inspirierte Designentscheidungen: Neville Brody
• Inspirierte Designentscheidungen: Otto Storch
• Inspirierte Designentscheidungen: Herb Lubalin
• Inspirierte Designentscheidungen: Max Huber
• Inspirierte Designentscheidungen: Giovanni Pintori
• Inspirierte Designentscheidungen: Emmett McBain
• Inspirierte Designentscheidungen: Bradbury Thompson

NB: Smashing-Mitglieder Smashing-Mitglieder haben Zugriff auf ein wunderschön gestaltetes PDF des Magazins Andy's Inspired Design Decisions und vollständige Codebeispiele aus diesem Artikel. Sie können das PDF und die Beispiele dieser Ausgabe sowie alle anderen Ausgaben direkt auf Andys Website kaufen.