Inspirierte Designentscheidungen mit Emmett McBain: Art Direction als soziale Gerechtigkeit

Neben der Werbung ist das Verkaufen eine Fähigkeit, die die Leute oft missbilligen. Es stimmt: Niemand mag es, wenn jemand ihn dazu zwingt oder in die Irre führt, und niemand mag es, unterbrochen zu werden.

Aber zu gut verkauft zu werden – von einem Verkäufer, der Ihre Bestrebungen, Motivationen und Bedürfnisse versteht – kann eine Erfahrung sein, von der Käufer und Verkäufer profitieren.

Zu lernen, wie man verkauft, war eines der besten Dinge, die ich früh in meinem Berufsleben gemacht habe. Damals habe ich Fotoausrüstung verkauft, und obwohl ich den Stress, der mit dem Erreichen von Verkaufszielen verbunden war, nie genossen hatte, habe ich es immer genossen, mich mit Fotografen zu treffen.

Neue Kunden zu finden, bedeutete oft Kaltakquise, Klopfen an einer Studiotür und häufige Ablehnung. Ich verbrachte Zeit damit, über die Arbeit von jemandem zu sprechen, bevor ich die Produkte erwähnte, für deren Verkauf mich meine Firma bezahlte. Ich interessierte mich wirklich für Fotografie, aber ich hatte auch gelernt, dass es genauso wichtig ist, die Probleme eines Menschen zu verstehen, wie zu erklären, wie meine Produkte helfen können, sie zu lösen.

Was ich gelernt habe, hat mir unermesslich gut gedient, seit ich aufgehört habe, Kameras zu verkaufen, und angefangen habe, mein Talent zu verkaufen. Es hat mir geholfen, mit Menschen umzugehen, nicht zuletzt beim Präsentieren (sprich: Verkaufen) meiner Ideen gegenüber Kunden.

Es ist eine Tatsache, dass nicht immer die beste Idee oder die beste Ausführung einen Pitch oder eine Präsentation gewinnt. Oft ist es die Idee, die der beste Verkäufer verkauft.

Der Verkauf von Ideen sollte zu einer Ihrer besten Fähigkeiten werden, also lernen Sie zu verkaufen. Lerne, wie du über deine Arbeit sprichst, damit die Person, an die du verkaufst, deine Ideen versteht und warum sie sie bei dir kaufen sollte. Lernen Sie, Menschen sowohl mit Ihren Worten als auch mit Ihrer Arbeit zu inspirieren. Geben Sie ihnen das Gefühl, dass sie so sehr Teil Ihrer Ideen sind, dass sie einfach bei Ihnen kaufen müssen.

Als schwarzer amerikanischer Grafikdesigner, der in den 1950er, 60er und 70er Jahren in der Werbung arbeitete, hatte Emmett McBain nicht nur ein unglaubliches Talent, er verstand es auch, an andere Afroamerikaner zu verkaufen.

Er wusste, dass seine Designs, um die Produkte seiner Kunden zu verkaufen, beim schwarzen Publikum Anklang finden mussten, indem sie Bilder zeigten, auf die sie sich bezogen, und eine Sprache, die ihnen vertraut war.

Als graubärtiger Engländer fällt es mir nicht leicht, andere kulturelle Perspektiven zu verstehen als ich. Aber ich habe gelernt, wie wertvoll es ist, Designs zu machen, die Menschen ansprechen, wie auch immer sie aussehen und wo immer sie leben. Nicht nur, um die Produkte meiner Kunden an sie zu verkaufen, sondern damit jeder das Gefühl hat, dass seine Bedürfnisse angehört und ihre Bedeutung verstanden werden.

Emmett McBain wurde 1935 in Chicago geboren und war ein afroamerikanischer Grafikdesigner, dessen Arbeit einen bemerkenswerten Einfluss auf die Repräsentation von Afroamerikanern in der Werbung hatte.

McBain studierte an mehreren Kunsthochschulen und schloss sein Studium der Gebrauchsgrafik an der American Academy of Art in Chicago ab.

Vince Cullers and Associates – die erste Full-Service-Werbeagentur in afroamerikanischem Besitz in den USA wurde 1958 gegründet. Cullers glaubte, dass „schwarz verkaufen“ „schwarz denken“ müsse, wenn Werbetreibende afroamerikanische Verbraucher erreichen wollten. Er verkaufte nicht nur an Afroamerikaner, sondern half ihnen auch, sie in der Werbung auszubilden und sie in seiner Agentur einzustellen. Einer dieser Mitarbeiter war der frischgebackene Emmett McBain.

Nach zwei Jahren kommerzieller Erfahrung verließ McBain Vince Cullers und wechselte als stellvertretender Kunstredakteur zu Playboy Records. Aber er blieb nicht lange in einer Junior-Rolle und wurde schnell Werbe-Art-Director des Playboy. McBain eroberte sich eine Nische als Cover-Künstler, und 1958 wurde sein Albumcover von Playboy Jazz All-Stars zum Albumcover der Woche des Billboard Magazine ernannt.

1959 verließ McBain den Playboy, aber er ließ seine Arbeit an Albumcovern nicht hinter sich. Sein neu gegründetes Designstudio McBain Associates arbeitete regelmäßig mit Mercury Records zusammen und er entwarf bis zu seinem 24. Lebensjahr über 75 Albumcover.

McBain kehrte 1968 als Creative Director zu Vince Cullers Advertising zurück und leistete einige seiner wichtigsten Beiträge zur Werbung für schwarze Amerikaner.

Vor den 1960er Jahren wurden schwarze Verbraucher von Markenherstellern und der Mainstream-Werbeindustrie, die ihnen diente, weitgehend ignoriert. Werbung für Afroamerikaner beschränkte sich hauptsächlich auf Zeitungen, die speziell auf das schwarze Publikum ausgerichtet waren.

Weiße Kunden zögerten, Geld für den Verkauf an Afroamerikaner auszugeben, da die Werbetreibenden der Ansicht waren, dass schwarze Verbraucher nur über ein geringes verfügbares Einkommen verfügten. In der politisch aufgeladenen Atmosphäre der Zeit hatten Unternehmen auch Angst, ihre Marken mit Afroamerikanern in Verbindung zu bringen.

Afroamerikaner waren auch in der Werbebranche nicht vertreten, und die Zahl der Schwarzen, die in der Werbung arbeiteten, war winzig. Aber Mitte der 1960er Jahre begannen Werbeagenturen, Afroamerikaner zu rekrutieren. Diese Agenturen hofften, dass ihre Erfahrungen die Botschaften ihrer Kunden für das afroamerikanische Publikum, das bis dahin jedes Jahr fast 30 Milliarden US-Dollar ausgab, verständlicher machen würden.

McBains Arbeit enthielt positive Botschaften für Afroamerikaner und die schwarze Gemeinschaft. Er verwendete Bilder von alltäglichen Menschen in gewohnter Umgebung für Kunden, darunter Mentholzigaretten von Newport, Marlboro von Philip Morris und Schönheitsprodukte von SkinFood Cosmetics speziell für schwarze Haut. Wie Vince Cullers wusste McBain, dass der Verkauf an schwarze Verbraucher bedeutet, ihre unterschiedlichen Bedürfnisse zu verstehen. Er verstand, dass – wie sein zukünftiger Partner, Texter Thomas Burrell, sagte – „Schwarze Menschen keine dunkelhäutigen Weißen sind“.

1971 ging Emmett McBain eine Partnerschaft mit Burrell ein, um Burrell-McBain Inc. zu gründen, das sie in einer Anzeige als „Eine Werbeagentur für den schwarzen kommerziellen Markt“ bezeichneten. Anstatt schwarze Amerikaner auszubeuten, wollten Burrell und McBain authentische und respektvolle Beziehungen zum schwarzen Publikum aufbauen.

Vor Burrell und McBain war der legendäre weiße Cowboy das Gesicht von Marlboro-Zigaretten. Aber McBains Marlboro-Mann war für afroamerikanische Raucher eher nachvollziehbar. Während Marlboros Cowboy in einer idealisierten Version des amerikanischen Westens gezeigt wurde, sah man McBains schwarze Charaktere in alltäglichen Umgebungen rauchen.

Ihre Marlboro-Kampagne war ein großer Erfolg und Burrell und McBain gewannen Coca-Cola und McDonald's als Kunden und halfen ihnen, die größte Werbeagentur im Besitz von Schwarzen in Amerika zu werden.

McBain verließ 1974 die von ihm mitbegründete Agentur und schlug eine Karriere als Künstler ein. Er eröffnete seine Kunstgalerie The Black Eye und gründete eine Beratungsfirma – auch The Black Eye genannt – die Agenturen half, sich besser mit der afroamerikanischen Gemeinschaft zu verbinden.

Emmett McBain starb 2012 an Krebs und wurde seitdem von AIGA, der Society of Typographic Arts und den Art Directors Clubs von Chicago und Detroit anerkannt.

Leider wurde kein Buch über Emmett McBain und seinen Beitrag zu Werbung und Design veröffentlicht. Ich habe seinen Namen weder auf Designkonferenzen gehört noch in Artikeln über modernes Design und insbesondere das Internet auf ihn verwiesen gesehen.

McBains spätere Arbeit hatte ab den 1960er Jahren einen tiefgreifenden Einfluss auf die Werbung, aber ich mag besonders seine Plattencover-Designs. Der Energieschub, der die Jazzmusik widerspiegelt, die McBain liebte. Seine Farben sind aufregend und lebendig. Seine Wahl der Schriftarten und die Art und Weise, wie er Schrift dekonstruiert und neu aufgebaut hat, sind inspirierend. Es gibt viel, was uns in der Arbeit von Emmett McBain inspirieren kann.

Vertikalen Inhalt ausrichten

Welchen Grafikstil ich auch wähle, der HTML-Code, der zur Implementierung dieses ersten McBain-inspirierten Designs benötigt wird, ist identisch. Ich brauche drei Strukturelemente; eine Kopfzeile, die mein SVG-Logo und Überschriften enthält, eine Haupt- und eine Nebenzeile, die eine Tabelle mit Citroen DS-Produktionsnummern enthält:

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

Für die Skalierbarkeit über Bildschirmgrößen hinweg verwende ich SVGs für die beiden Überschriften in meiner Kopfzeile. Die Verwendung von SVG sorgt für ein zusätzliches Maß an Konsistenz für den strichlierten Text der zweiten Überschrift, aber ich darf die Zugänglichkeit nicht vergessen.

In Ausgabe 8 habe ich erklärt, wie man Menschen hilft, die Hilfstechnologien verwenden, indem man ARIA zu SVGs hinzufügt. Ich füge ein ARIA-Rollenattribut sowie ein Ebenenattribut hinzu, das die fehlende Semantik ersetzt. Das Hinzufügen eines Titelelements hilft auch der Hilfstechnologie, den Unterschied zwischen mehreren SVG-Blöcken zu verstehen, aber Browser zeigen diesen Titel nicht an:

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

Um mit diesem Design zu beginnen, füge ich grundlegende Grundstile für jede Bildschirmgröße hinzu, beginnend mit Vorder- und Hintergrundfarben:

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

Ich füge den SVG-Elementen in meiner Kopfzeile pixelgenaue Abmessungen hinzu und verwende dann automatische horizontale Ränder, um das Citroen-Logo zu zentrieren:

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

Emmet McBain fügte in sein inspirierendes Design vertikale schwarze Streifen ein, um seinem Layout Struktur zu verleihen. Um einen ähnlichen Effekt zu erzielen, ohne meinem HTML-Code zusätzliche Elemente hinzuzufügen, füge ich sowohl der linken als auch der rechten Seite meines Hauptabsatzes dunkle Ränder hinzu:

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

Dieselbe Technik fügt meiner Tabelle der Citroen DS-Produktionsnummern einen ähnlichen Effekt hinzu. Ich füge meiner Tabelle die beiden äußeren Rahmen hinzu:

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

Dann füge ich rechts neben meinen Tabellenüberschriften eine dritte Regel hinzu:

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

Indem sichergestellt wird, dass jede Zelle die halbe Breite meiner Tabelle ausfüllt, verläuft dieser vertikale Streifen in der Mitte von oben nach unten:

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

Wenn jemand numerische tabellarische Daten wie diese Jahres- und Produktionszahlenpaare liest, überfliegen seine Augen die Jahresspalte. Dann folgen sie hinüber, um zu sehen, wie viele Autos Citroen in diesem Jahr hergestellt hat. Die Leute könnten auch Produktionszahlen vergleichen, um entweder nach hohen oder niedrigen Zahlen zu suchen.

Um ihre Vergleiche zu erleichtern, richte ich die Produktionsnummern rechts aus:

 aside td { text-align: right; }

Abhängig von den OpenType-Funktionen, die in der von Ihnen gewählten Schriftart verfügbar sind, können Sie auch die Lesbarkeit von Tabellendaten verbessern, indem Sie Zeilen anstelle von Zahlen im alten Stil angeben. Einige Ziffern im alten Stil – einschließlich 3, 4, 7 und 9 – haben Unterlängen, die unter die Grundlinie fallen können. Diese erschweren das Lesen längerer Zahlenfolgen. Futterziffern hingegen beinhalten Zahlen, die auf der Grundlinie sitzen.

OpenType-Funktionen steuern auch die Breite von Zahlen, was den Vergleich von Zahlenfolgen in einer Tabelle erleichtert. Während proportionale Zahlen unterschiedliche Größen haben können, haben tabellarische Zahlen alle die gleiche Breite, sodass Zehner, Hunderter und Tausender genauer ausgerichtet werden:

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

Schließlich führe ich das Kreismotiv am unteren Rand dieses kleinen Bildschirmdesigns ein. Ich möchte diese kreisförmigen Bilder nicht in meinen HTML-Code einfügen, daher verwende ich einen CSS-generierten Inhaltsdaten-URI, in dem die Bilddatei in eine Zeichenfolge codiert ist:

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

Ich bin oft überrascht, wie wenige Änderungen ich vornehmen muss, um Designs für mehrere Bildschirmgrößen zu entwickeln. Der Wechsel von kleinen Bildschirmen zu mittelgroßen Designs erfordert oft nur geringfügige Änderungen der Schriftgrößen und die Einführung einfacher Layoutstile.

Ich beginne damit, das Citroen-Logo und die SVG-Überschriften in meiner Kopfzeile horizontal auszurichten. Auf mittleren und großen Bildschirmen steht dieses Logo in meinem HTML an erster Stelle und die Überschriften an zweiter Stelle. Aber optisch sind die Elemente vertauscht. Flexbox ist das ideale Werkzeug, um diesen Wechsel vorzunehmen, indem einfach der Standardwert für die Flex-Richtung von Zeile zu Flex-Richtung geändert wird: row-reverse:

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

Früher habe ich meinem Logo eine genaue Breite gegeben. Aber ich möchte, dass die Überschriften den gesamten verbleibenden horizontalen Raum ausfüllen, also gebe ich ihrer übergeordneten Division einen Flex-Grow-Wert von 1. Dann füge ich einen ansichtsfensterbasierten Rand hinzu, um die Überschriften und das Logo auseinander zu halten:

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

Für dieses mittelgroße Design habe ich das Layout mit einem symmetrischen dreispaltigen Raster entwickelt, das ich sowohl auf Haupt- als auch auf Nebenelemente anwende:

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

Dann generiere ich mit derselben Technik, die ich zuvor für das Nebenelement verwendet habe, zwei Bilder für das Hauptelement und platziere sie in der ersten und dritten Spalte meines Rasters:

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

Ich wiederhole den Vorgang für das Nebenelement, wobei dieser neue :after-Inhalt das generierte Bild ersetzt, das ich für kleine Bildschirme hinzugefügt habe:

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

Der zusätzliche Platz, der auf mittelgroßen Bildschirmen verfügbar ist, ermöglicht es mir, mehr von dem vertikalen Streifenmotiv einzuführen, das von Emmett McBains ursprünglichem Design inspiriert ist. Die vertikalen Ränder links und rechts des Hauptabsatzes sind bereits vorhanden, also muss ich nur noch den Schreibmodus auf vertikal-rl ändern und ihn um 180 Grad drehen:

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

Einige Browser respektieren Rastereigenschaften und strecken eine Tabelle ohne Hilfe auf die volle Höhe der Rasterzeile. Andere brauchen ein wenig Hilfe, also gebe ich meiner Produktionszahlentabelle eine explizite Höhe, die einen gleichmäßigen Abstand zwischen den Zeilen hinzufügt:

 aside table { height: 100%; }

Die volle Wirkung dieses McBain-inspirierten Designs entfaltet sich, wenn die Bildschirme breit genug sind, um Haupt- und Nebenelemente nebeneinander anzuzeigen. Ich wende ein einfaches zweispaltiges symmetrisches Gitter an:

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

Dann platziere ich die Haupt- und Nebenelemente mithilfe von Zeilennummern, wobei sich die Kopfzeile über die gesamte Breite meines Layouts erstreckt:

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

Unstrukturiert aussehen

Die leuchtenden Farben und unregelmäßigen Formen der Blöcke in diesem nächsten Design sind so unerwartet wie der Jazz, der Emmett McBains Original inspirierte. Während die Anordnung dieser Layouts unstrukturiert aussehen mag, ist der Code, den ich brauche, um es zu entwickeln, sicherlich nicht. Tatsächlich gibt es nur zwei Strukturelemente, header und main:

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

Ich beginne mit dem Anwenden von Hintergrund- und Vordergrundfarben sowie einer großzügigen Polsterung, damit jemandes Augen um und durch Räume im Design wandern können:

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

Diese bunten Blöcke würden den begrenzten Platz auf einem kleinen Bildschirm dominieren. Stattdessen füge ich meinem Header die gleichen leuchtenden Farben hinzu:

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

Unregelmäßige Formen sind ein Aspekt dieses Designs, den ich bei jeder Bildschirmgröße sichtbar machen möchte, daher verwende ich einen Polygonpfad, um den Header zu beschneiden. Nur Bereiche innerhalb des Clip-Bereichs bleiben sichtbar, alles andere wird transparent:

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

Die Beachtung selbst der kleinsten typografischen Details lässt die Menschen wissen, dass jeder Aspekt eines Designs sorgfältig durchdacht wurde. Eine horizontale Linie im kleinen Element am Anfang meines Hauptinhalts ändert die Länge neben dem Text.

Ich möchte meinem HTML keine horizontale Darstellungsregel hinzufügen und mich stattdessen für eine Kombination aus Flexbox und Pseudoelementen in meinem CSS entscheiden. Zuerst formatiere ich den Text des kleinen Elements:

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

Dann füge ich ein :after Pseudo-Element mit einem dünnen unteren Rand hinzu, der der Farbe meines Textes entspricht:

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

Das Hinzufügen von Flex-Eigenschaften richtet den Text und mein Pseudo-Element am unteren Rand des kleinen Elements aus. Indem Sie dem Pseudo-Element einen Flex-Grow-Wert von 1 geben, kann es seine Breite ändern, um längere und kürzere Textfolgen zu ergänzen:

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

Ich genieße Überraschungen, und hinter meiner zweitrangigen Überschrift „Champion de France“ steckt mehr, als man denkt.

Vor fast zehn Jahren veröffentlichte Dave Rupert Lettering.js, ein jQuery-Plugin, das Javascript verwendet, um einzelne Buchstaben, Zeilen und Wörter mit span-Elementen zu umschließen. Diese separaten Elemente können dann auf beliebige Weise gestaltet werden. Mit nur einem mehrfarbigen Element in diesem Design wende ich dieselbe Technik an, ohne ein Skript zu bedienen:

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

Dann gebe ich jedem ausgewählten Buchstaben eine eigene Farbe:

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

Ich habe die Herausforderung des responsiven Designs immer als Chance gesehen, kreativ zu sein und das Beste aus jeder Bildschirmgröße herauszuholen. Der zusätzliche Platz, der auf mittleren und großen Bildschirmen verfügbar ist, ermöglicht es mir, die großen, unregelmäßig geformten Farbblöcke einzuführen, die dieses Design unerwartet machen.

Zuerst wende ich Rastereigenschaften und ein achtspaltiges symmetrisches Raster auf das body-Element an:

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

Dann platziere ich meinen Header in drei dieser Spalten. Wenn die farbigen Blöcke jetzt sichtbar sind, ändere ich die Hintergrundfarbe der Kopfzeile in ein dunkles Grau:

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

Das horizontale und vertikale Zentrieren von Inhalten war vor Flexbox eine Herausforderung, aber jetzt ist das Ausrichten und Ausrichten meiner Kopfzeileninhalte einfach:

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

Ich ändere die Farbe der Textelemente meiner Kopfzeile:

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

Dann wende ich negative horizontale Ränder an, sodass mein Header Elemente in der Nähe überlappt:

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

Mein Hauptelement benötigt kein zusätzliches Styling und ich platziere es mit Zeilennummern in meinem Raster:

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

Elemente, die zur Entwicklung eines Designs benötigt werden, müssen nicht in HTML vorliegen. An ihre Stelle können in CSS erstellte Pseudo-Elemente treten, wodurch HTML von jeglicher Darstellung frei bleibt. Ich verwende ein :before-Pseudoelement, das auf den Körper angewendet wird:

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

Dann füge ich ein Daten-URI-Hintergrundbild hinzu, das das gesamte Pseudo-Element unabhängig von seiner Größe abdeckt:

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

CSS Grid behandelt Pseudoelemente wie alle anderen, sodass ich diese bunten Blöcke mithilfe von Zeilennummern in meinem Raster platzieren kann:

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

Während Entwickler meist Haltepunkte für Medienabfragen verwenden, um signifikante Änderungen an einem Layout vorzunehmen, sind manchmal nur geringfügige Änderungen erforderlich, um ein Design zu optimieren. Jeremy Keith nennt diese Momente „Tweakpoints“.

Dieses mittelgroße, von McBain inspirierte Design funktioniert gut bei größeren Bildschirmen, aber ich möchte sein Layout optimieren und den größten Bildschirmen mehr Details hinzufügen. Ich beginne damit, meinem Raster vier zusätzliche Spalten hinzuzufügen:

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

Dann positioniere ich die generierten Farbblöcke, Kopfzeilen und Hauptelemente mit neuen Zeilennummern neu:

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

Diese Elemente überlappen sich jetzt. Um zu verhindern, dass sie neue Zeilen in meinem Raster bilden, gebe ich ihnen allen den gleichen Rasterzeilenwert:

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

Diese Änderung an meinem Design fügt einen weiteren Farbblock zwischen Kopf- und Hauptbereich hinzu. Um die Semantik meines HTML-Codes beizubehalten, füge ich vor meinem Hauptinhalt ein Pseudo-Element und ein Daten-URI-Bild hinzu:

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

Dekonstruktion von Typenbildern

Zu Beginn seiner Karriere zeigte Emmett McBains Plattencover-Designs, dass er ein Gespür für Typografie hatte. Er ging oft spielerisch mit Schrift um, dekonstruierte sie und baute sie wieder auf, um unerwartete Formen zu bilden. Diese Kontrolle über den Typ war online noch nie einfach, aber SVG macht fast alles möglich.

Dieses nächste von McBain inspirierte Design basiert auf SVG und nur zwei strukturellen HTML-Elementen; eine Kopfzeile, die die große typbasierte Grafik enthält, ein Hauptelement für meinen Inhalt:

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

Ich brauche nur sehr wenige Grundstile, um mit der Entwicklung dieses Designs zu beginnen. Zuerst füge ich Hintergrund- und Vordergrundfarben und Polsterung in meinen beiden Elementen hinzu:

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

Zweitens definiere ich Stile für meinen Typ, der sowohl Überschriften als auch den darauf folgenden Textabsatz enthält:

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

Ich gebe meinem Hauptinhalt einen satten violetten Hintergrund, der der Farbe des Citroen im gegenüberliegenden Panel entspricht:

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

Dieses Design wird von einer großen Grafik dominiert, die ein Profil des Citroen DS und ein stilisiertes Schriftbild der Worte „Champion de France“ enthält. Die Anordnung der Buchstaben wäre mit CSS-Positionierung und -Transformationen schwierig zu bewerkstelligen, was SVG zur perfekten Wahl macht.

Dieses SVG enthält drei Gruppen von Pfaden. Die erste enthält Umrisse der Worte „Champion de:“

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

Die nächste Gruppe umfasst Pfade für die bunte Anordnung von Buchstaben. Ich gebe jedem Buchstaben ein eindeutiges id-Attribut, um ihn individuell gestalten zu können:

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

Dann füge ich Klassenattribute zu einer Gruppe von Pfaden hinzu, die das Citroen DS-Profil bilden. Mit diesen Attributen kann ich die Farben des Autos anpassen, um verschiedene Farbthemen zu ergänzen, und sie sogar über Haltepunkte für Medienabfragen hinweg ändern:

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

Mittelgroße Bildschirme ermöglichen es mir, die Positionen meines Citroen DS-Profils und Typbildes zu optimieren:

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

Die Reihenfolge dieser Transformationen ist wichtig, da verschiedene Kombinationen von Rotieren, Skalieren und Übersetzen subtil unterschiedliche Ergebnisse liefern. Dann füge ich meinem Hauptinhalt Spalten hinzu:

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

Bisher kommt dieser Hauptinhalt nach meiner Kopfzeile im Dokumentenfluss. Bei größeren Bildschirmen möchte ich, dass diese Elemente nebeneinander angeordnet sind, also wende ich Rastereigenschaften und zwölf Spalten auf den Körper an:

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

Ich platziere die Kopfzeile und die Hauptzeile mit Zeilennummern in meinem Raster. Die Kopfzeile umfasst sieben Spalten, während der Hauptinhalt nur fünf umfasst, wodurch ein asymmetrisches Layout aus einem symmetrischen Raster entsteht:

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

Grafischen Text skalieren

Die Unterscheidung zwischen SVG und HTML verschwimmt, je mehr ich SVG in meiner Arbeit verwende. SVG ist ein XML-basiertes Format und eignet sich perfekt für die Einbindung in HTML. Dieses letzte McBain-inspirierte Design basiert auf SVG in HTML, nicht nur wegen seiner auffälligen Bilder, sondern auch wegen des Textes.

Um dieses markante rot-schwarze Design zu entwickeln, benötige ich vier strukturelle HTML-Elemente. Ein Header enthält ein Bild des legendären Citroen DS. Die Bannerabteilung umfasst eine große Überschrift, die mit SVG-Text entwickelt wurde. Das Hauptelement enthält meinen Fließtext und schließlich eine Seite für ergänzende Inhalte:

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

Früher dachte ich, dass die Verwendung von SVG zum Rendern von Text genauso unangemessen ist wie das Setzen von Text in Bildern, aber nachdem ich SVG häufiger verwendet habe, wird mir klar, dass ich mich geirrt habe.

In Ausgabe 8 habe ich erklärt, dass SVG-Text wie HTML-Text zugänglich und auswählbar ist. Es hat auch den Vorteil, dass es mit Beschneidungspfaden, Verlaufsfüllungen, Filtern, Masken und Strichen unendlich gestaltbar ist.

Die Überschrift des Bannerbereichs enthält zwei Textelemente. Das erste enthält das große Wort „Champion“, das zweite „de France“. Paare von x- und y-Koordinaten auf jedem tspan-Element platzieren diese Wörter genau dort, wo ich möchte, dass sie eine solide Textplatte entwickeln:

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

Unabhängig davon, ob ich dieses SVG in meinen HTML-Code einbaue oder es als externes Bild verlinke, kann ich CSS verwenden, um seinen Stil zu definieren. Diese Überschrift ist ein verknüpftes Bild, also füge ich meine Stile der SVG-Datei hinzu:

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

Ich beginne damit, Grundfarben und Typografiestile hinzuzufügen. Ich habe mich dafür entschieden, den Beginn jedes neuen Absatzes einzurücken, also entferne ich alle unteren Ränder und füge jedem nachfolgenden Absatz einen 2ch breiten Einzug hinzu:

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

Der dunkelgraue Hintergrund und der rote Text meines Seitenelements stehen im Gegensatz zu denen an anderer Stelle in meinem Design. Durch Erhöhen von Helligkeit und Sättigung erscheinen Farben vor dunklen Hintergründen lebendiger:

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

Mittelgroße Bildschirme ermöglichen es mir, das Design meiner Inhalte zu optimieren, um den verfügbaren zusätzlichen Platz optimal zu nutzen. Ich verwende zwei verschiedene mehrspaltige Layouteigenschaften. Zuerst die Angabe von zwei Spalten mit variabler Breite für meine Inhaltsabteilung. Dann eine beliebige Anzahl von Spalten, die alle eine Breite von 16em haben:

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

Der größte Teil meines Stylings ist für Leute sichtbar, die selbst die kleinsten Bildschirme verwenden, daher beinhaltet die Entwicklung eines Layouts für einen großen Bildschirm das Anwenden von Rastereigenschaften und zwölf Spalten auf das body-Element:

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

Ich platziere das Citroen-Logo in der ersten Spalte:

 body > svg { grid-column: 1; }

Dann erstreckt sich der Header, der ein Bild des ikonischen DS enthält, über vier Spalten:

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

Sowohl der Bannerbereich mit seiner stylischen SVG-Überschrift als auch der Fließtext meines Hauptinhalts nehmen acht Spalten ein:

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

Und schließlich nimmt das Seitenelement mit umgekehrtem Thema drei Spalten rechts von meinem Design ein. Um sicherzustellen, dass dieser Inhalt jede Zeile von oben nach unten in meinem Layout umfasst, platziere ich ihn mit Zeilennummern:

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

Lesen Sie mehr aus der Serie

• Inspirierte Designentscheidungen: Avaunt Magazine
• Inspirierte Designentscheidungen: Dringende Angelegenheiten
• Inspirierte Designentscheidungen: Ernest Journal
• Inspirierte Designentscheidungen: Alexey Brodovitch
• Inspirierte Designentscheidungen: Bea Feitler
• Inspirierte Designentscheidungen: Neville Brody
• Inspirierte Designentscheidungen: Otto Storch
• Inspirierte Designentscheidungen: Herb Lubalin
• Inspirierte Designentscheidungen: Max Huber
• Inspirierte Designentscheidungen: Giovanni Pintori
• 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.