Inspirierte Designentscheidungen mit Giovanni Pintori: Werbung wird zur Kunstform

Mit ein oder zwei gelegentlichen Ausnahmen habe ich die letzten zweiundzwanzig Jahre damit verbracht, für unzählige Kunden zu entwerfen. Einige dieser Projekte dauerten ein Jahr, einige mehrere Monate, die meisten jedoch nicht länger als ein paar Wochen.

Es kann ein Nervenkitzel sein, einige Wochen oder Monate vollständig in die Gestaltung einer Produktschnittstelle oder einer Website vertieft zu sein. Es beginnt oft mit der Befriedigung, die der Gewinn der Arbeit mit sich bringt. Das Vertrauen eines neuen Kunden zu gewinnen, kann süchtig machen. In der verführerischen Kennenlernphase lernen Sie den Kunden kennen und was er von Ihnen und Ihrer Arbeit erwartet. Suchtkranke Persönlichkeiten wie meine sehnen sich nach der Intensität dieser Gefühle, aber – genau wie in manchen Beziehungen – verblasst die anfängliche Aufregung bald in der Realität der Zusammenarbeit.

Diese kreative Promiskuität kam meiner oft kurzen Aufmerksamkeitsspanne und rastlosen Neugier sehr entgegen. Aber es gab Zeiten, in denen ich mir wünschte, ich könnte länger bei einer Organisation bleiben, sie besser kennenlernen und einen positiven Einfluss auf das haben, was sie tun und machen.

Ich kenne viele Designer, die intern arbeiten. Ich beneide sie zwar nie um ihren Arbeitsweg oder das Geld, das sie dafür ausgeben, in der Nähe ihres Arbeitsplatzes zu wohnen, aber ein Teil von mir beneidet sie um ihre Fähigkeit, zu bleiben und die langfristige kreative Ausrichtung eines Unternehmens so zu gestalten, wie Giovanni Pintori Olivetti geholfen hat.

„Öffentlichkeit ist heute eine Kunstform geworden und muss diesem Namen immer mehr gerecht werden. Öffentlichkeitsarbeit ist eine Form des Diskurses, die Vagheit zugunsten von Kürze, Klarheit und Überzeugungskraft vermeiden sollte. Wer in der Öffentlichkeit tätig ist (Schriftsteller, Maler, Architekt), braucht gleichermaßen Logik und Vorstellungskraft.“

—Giovanni Pintori

Der italienische Designer Giovanni Pintori arbeitete über 31 Jahre für den Hersteller von Geschäftsprodukten Olivetti. In dieser Zeit entwickelte sich sein Stil zur einzigartigen Formensprache des Unternehmens. Der Reiz, länger als ein paar Monate bei einem Unternehmen zu arbeiten, ist mit zunehmendem Alter stärker geworden. In den letzten 18 Monaten habe ich die meiste Zeit damit verbracht, mit einem Schweizer Cybersicherheitsunternehmen zusammenzuarbeiten, das seinen Sitz in der Nähe von Mailand hat und in dem Giovanni Pintori zu Hause ist.

Wie Olivetti schätzt auch dieses Unternehmen Design in jeder Form. Während meine oberste Priorität das Design der Produkte des Unternehmens ist, hatte ich auch die Gelegenheit, ihre Marke, ihr Marketing und ihre gesamte kreative Ausrichtung zu beeinflussen.

Ich verbringe immer noch Zeit mit den Projekten anderer Leute, wenn mich die Arbeit reizt, aber ich habe gelernt, wie lohnend eine langfristige Kundenbeziehung sein kann. Ich bin glücklich und kreativ zufriedener als in den Jahren zuvor. Außerdem holt mich das Alter ein und ich habe nicht mehr die Energie, jedem attraktiven Projekt so nachzujagen wie früher.

Inspiriert von Giovanni Pintori

Der 1912 auf Sardinien geborene Giovanni Pintori wurde zu einem der einflussreichsten europäischen Grafikdesigner des 20. Jahrhunderts. Er wurde bekannt für den unverwechselbaren Stil, den er über 30 Jahre lang in Olivettis Designsprache einfließen ließ.

Pintori studierte Design am einflussreichen italienischen L'Istituto Superiore per le Industrie Artistiche (Höheres Institut für künstlerische Industrien), wo er von kreativen Künsten umgeben war. ISIA war eine fortschrittliche Schule, an der die Schüler Keramik, Malerei, Metall- und Holzarbeiten studierten.

Während seines Studiums bei ISIA lernte Pintori Renato Zveteremich kennen, den Werbedirektor und Publizisten, der in den 1930er Jahren die Werbeabteilung von Olivetti leitete. Nach seinem Abschluss an der HIAI kam Pintori zu Olivetti, um unter Zveteremich zu arbeiten, und wurde 1950 Art Director des Unternehmens.

Olivetti stellte Büromaschinen her, vor allem die Schreibmaschinen. Als Pintori zu Olivetti kam, war das Unternehmen bereits für seine originellen Produktdesigns bekannt. Seine Produkte waren sofort erkennbar, und unter der Leitung des Industriedesigners Marcello Nizzoli wurde jedes Detail ihrer Designs sorgfältig durchdacht – von der Form einer Leertaste bis zur Farbe ihrer Außenhüllen.

„Wenn Künstler aufgefordert werden, die funktionale Reinheit einer Maschine zu interpretieren, auszudrücken und zu verteidigen, ist dies wirklich ein Zeichen dafür, dass die Maschine in den menschlichen Geist eingedrungen ist und dass das Problem der Formen und Beziehungen immer noch intuitiver Natur ist.“

— Renato Zveteremich

Aber Olivettis Beschäftigung mit Design endete nicht mit seinen Produkten. Kreativität war ein wesentlicher Bestandteil der Unternehmenskultur, was sich in der Architektur seiner Fabriken und Büros bis hin zu Werbung und Grafikdesign zeigte, mit denen seine Produkte beworben wurden.

Während seiner 30-jährigen Karriere bei Olivetti entwarf Pintori die Werbung, Broschüren und sogar die Jahreskalender des Unternehmens. Pintoris ästhetischer Stil war kühn und selbstbewusst. Er verwendete leuchtende Farben aus minimalen Farbpaletten und kombinierte sie mit Formen, um seine Designs mit Energie zu füllen.

Aber Pintoris Arbeit war nicht nur spielerisch, sie war nachdenklich. Seine Formenwahl war nicht abstrakt. Formen suggerierten die Vorteile der Verwendung eines Produkts, anstatt seine Eigenschaften wörtlich zu beschreiben. Pintori illustrierte nicht nur Produkte, er erweckte sie durch seine Entwürfe zum Leben, indem er vorschlug, wie sie verwendet werden könnten und was sie tun könnten, um das Leben und die Arbeit der Menschen zu verbessern.

„Ich versuche nicht, im Namen der Maschinen zu sprechen. Stattdessen habe ich versucht, sie durch die grafische Darstellung ihrer Elemente, ihrer Funktionsweise und ihrer Verwendung für sich selbst sprechen zu lassen.“

Pintori prägte Olivettis Image weit über seine Zeit im Unternehmen hinaus und er arbeitete auch nach seinem Ausscheiden im Jahr 1967 weiter an Projekten mit ihnen. Er gründete sein eigenes Studio in Mailand, wo er als freiberuflicher Designer arbeitete, bevor er sich zurückzog und sich der Malerei widmete.

Giovanni Pintori starb 1999 in Mailand, und es gibt ein Buch, Pintori von Marta Sironi, herausgegeben von Moleskine, das seine erstaunliche Karriere katalogisiert.

Pintoris Arbeit inspiriert nicht nur wegen der Kühnheit seiner farbenfrohen Formen, sondern auch wegen dem, was sie darstellen. Pintori verstand, dass die Bewerbung eines Produkts mehr erforderte, als nur seine Eigenschaften aufzulisten. Werbung sollte eine Geschichte erzählen, die bei den Kunden Anklang findet, und davon sollten wir uns alle inspirieren lassen.

Erstellen von Farbpaletten

Die Farben, die wir wählen, sollten eine Geschichte über ein Unternehmen, ein Produkt oder eine Dienstleistung so eloquent erzählen wie unser Layout oder unsere Typografie. Unsere Farbauswahl kann die Aufmerksamkeit einer Person auf sich ziehen, ihre Wahrnehmung dessen beeinflussen, was wir tun, und sogar Emotionen wecken. Farbe spielt eine wesentliche Rolle, wenn es darum geht, ein Produkt oder eine Website einfach und intuitiv bedienbar zu machen. Neben Markenfarben helfen Farbpaletten für das Internet den Menschen bei der Navigation, lassen sie wissen, was sie drücken können und wo sie gewesen sind.

Ich mag es, meine Farben einfach zu halten, und meine Paletten enthalten selten mehr als drei Farbtöne; eine dominante Farbe, eine sekundäre oder unterstützende Farbe und ein Akzent. Dazu füge ich eine kleine Auswahl an neutralen Farben zur Verwendung als Hintergrund, Rahmen und Text hinzu.

Um meinen Designs Tiefe zu verleihen – und mir mehr Flexibilität zu geben – führe ich auch Schattierungen und Tönungen jeder meiner Farbtöne ein. Ich verwende dunklere Schattierungen für Umrandungen – zum Beispiel – um Knöpfe herum – und hellere Farbtöne, um Glanzlichter hinzuzufügen.

Da die Dunkelmodi von Betriebssystemen immer häufiger verwendet werden, verändere ich auch subtil die Helligkeit und Sättigung der Farben in meinen Paletten, damit sie vor dunklen Hintergründen lebendiger erscheinen.

Verwenden von Primärfarben

Der HTML-Code, der zur Implementierung meines ersten Pintori-inspirierten Designs benötigt wird, ist aussagekräftig und einfach wie das Design selbst. Ich brauche nur vier Strukturelemente; eine Kopfzeile, die zwei SVGs des Profils des ikonischen Morris Traveller enthält, das Hauptelement für meinen Fließtext, eine SVG der Vorderseite des Reisenden und schließlich eine Fußzeile, die das Firmenlogo von Morris Motors enthält:

 <header> <svg>…</svg> <svg>…</svg> </header> <main> <h1>…</h1> <p>…</p> </main> <figure> <svg>…</svg> </figure> <footer> <svg>…</svg> </footer>

Während externe SVG-Dateien zwischengespeichert werden und zum Rendern bereit sind, binde ich SVG jetzt wann immer möglich in meinen HTML-Code ein. Weniger externe Dateien bedeuten weniger HTTP-Anfragen, aber die Vorteile der Einbettung gehen weit über die Leistung hinaus.

Subtile Änderungen der Farbsättigung und Helligkeit zwischen hellen Themen und dunklen Modi sind oft notwendig, um die Schlagkraft von Designelementen vor kontrastierenden Hintergrundfarben zu erhalten. Wenn ein SVG in HTML eingebettet ist, können seine Füllungen und Striche mithilfe von CSS subtil geändert werden.

Ich beginne mit der Anwendung von Farb- und Typografie-Grundlagenstilen für die auffällige dunkle Version meines Designs. Dazu gehört Moderna Sans, eine vielseitige serifenlose Schrift, die von Luciano Vergara und Alfonso Garcia entworfen wurde und die ich ausgewählt habe, um den Stil von Pintoris Arbeit für Olivetti hervorzurufen:

 body { padding: 2rem; background-color: #262626; font-family: "moderna_sans-light"; color: #fff; } h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; font-weight: normal; line-height: 1; }

Flexbox verwandelt meine Kopfzeile in ein horizontal scrollendes Bedienfeld, eine der effektivsten Möglichkeiten, die visuelle Hierarchie in einem kleinen Bildschirmdesign aufrechtzuerhalten:

 header { display: flex; flex-wrap: nowrap; overflow-x: scroll; }

Die Eigenschaft flex-grow mit ihrem Wert 1 stellt sicher, dass alle Bilder erweitert werden, um jeden verfügbaren Platz auszufüllen, während flex-basis dafür sorgt, dass diese Flex-Elemente bei mindestens 640 Pixel beginnen;

 header svg { flex-grow: 1; flex-basis: 640px; } header svg:not(:last-of-type) { margin-right: 2rem; }

Schließlich füge ich große Mengen horizontaler Polsterung hinzu und richte das Morris-Logo in der Mitte meiner Fußzeile aus:

 footer { padding-right: 8rem; padding-left: 8rem; text-align: center; }

Mein horizontales Bildlauffeld macht einen kleinen Bildschirm interessanter, aber der zusätzliche Platz, der auf mittelgroßen Bildschirmen verfügbar ist, ermöglicht es mir, mehr von meinen typisch englischen Travellers zu zeigen.

CSS Grid bietet die präzise Platzierung und Stapelung von Elementen, die Flexbox fehlt, und ist die perfekte Wahl für diesen Header auf mittleren bis großen Bildschirmen. Ich ändere den Wert der Anzeigeeigenschaft von Flex zu Grid und füge dann drei symmetrische Spalten und Zeilen hinzu.

Während die Breite der beiden äußeren Spalten auf 270 Pixel festgelegt ist, wird die innere Spalte erweitert, um den gesamten verbleibenden Platz auszufüllen. Ich verwende eine ähnliche Technik für die drei Reihen und fixiere die äußeren beiden auf einer Höhe von 100 Pixel. Dies versetzt die Position beider Bilder und verleiht diesem Design Tiefe:

 header { display: grid; grid-template-columns: 270px 1fr 270px; grid-template-rows: 100px 1fr 100px; }

Unter Verwendung von Pseudo-Klassen-Selektoren und Zeilennummern platziere ich das erste SVG und verkleinere es dann, um Perspektive hinzuzufügen:

 header svg:first-of-type { grid-column: 2 / 4; grid-row: 1 / 2; transform: scale(.85); }

Dann platziere ich die zweite meiner beiden Grafiken. Ich erhöhe es innerhalb der Stapelreihenfolge, indem ich einen höheren Z-Index-Wert hinzufüge, der es dem Betrachter visuell näher bringt:

 header svg:last-of-type { grid-column: 1 / 3; grid-row: 2 / 4; z-index: 2; }

Selbst ein scheinbar banales Raster mit gleichmäßigen Verhältnissen kann zu einem originellen Layout führen, wenn ein Design viel Leerraum enthält, um das Auge zu lenken. Für dieses mittelgroße Design wende ich ein symmetrisches sechsspaltiges Raster mit Spalten- und Zeilenabstandswerten an, die proportional zur Breite und Höhe eines Bildschirms sind:

 @media (min-width: 48em) { body { display: grid; grid-template-columns: repeat(6, 1fr); column-gap: 2vw; row-gap: 2vh; } }

Mein Header-Element füllt die gesamte Breite meines Rasters aus. Dann platziere ich die Haupt-, Abbildungs- und Fußzeilenelemente und füge proportional mehr Leerraum hinzu, um die Breite meiner Abbildung und Fußzeile zu verringern:

 header { grid-column: 1 / -1; } main { grid-column: 2 / 6; } figure { grid-column: 3 / 5; } footer { grid-column: 3 / 5; padding-right: 4rem; padding-left: 4rem; }

Dieses Design wird mit dem Platz, der auf großen Bildschirmen verfügbar ist, profilierter.

Für sie wende ich Rasterwerte auf das body-Element an, um die acht Spalten eines zusammengesetzten 6+4-Rasters zu erstellen:

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

Indem ich mein mittelgroßes Design auf sechs Spalten stütze und dann dasselbe Raster in meinen großen Bildschirmverbund einfüge, hilft dies, die Proportionen in allen Größen meines Designs beizubehalten. Dann positioniere ich die vier Strukturelemente auf meinem neuen Raster neu:

 header { grid-column: 1 / 8; } main { grid-column: 2 / 5; text-align: right; } figure { grid-column: 5 / 7; } footer { grid-column: 4; padding: 0; }

Um schließlich einen soliden Inhaltsblock in der Mitte meines Designs zu erstellen, binde ich den Hauptinhalt an seine jetzt angrenzende Abbildung, indem ich seinen Text rechts ausrichte:

 main { text-align: right; } 

Monochromatische Paletten

Auch nach über zwanzig Jahren im Geschäft finde ich die Arbeit mit Farbe immer noch der herausforderndste Aspekt des Designs. Vielleicht tendiere ich deshalb so oft zu monochromatischen Farbschemata, weil sie es ziemlich einfach machen, einen optisch zusammenhängenden Look zu erzielen.

Monochromatische Farbpaletten enthalten Variationen in Schattierungen, Tönungen und Tönen, indem einer ausgewählten Grundfarbe unterschiedliche Prozentsätze von Schwarz, Grau oder Weiß hinzugefügt werden.

• Schattierungen : Verdunkeln Sie die Farbe mit Schwarz
• Tönungen : Aufhellen der Farbe mit Weiß
• Töne : Entsättigen Sie die Farbe mit Grau

Wenn sie für Hintergründe, Umrandungen und Details verwendet werden, können Schattierungen und Farbtöne einem Design ein harmonisches Aussehen verleihen.

Die Verwendung von Schattierungen, Tönungen und Tönen kann helfen, lebendige Farben abzuschwächen, die unerwünschte Aufmerksamkeit auf Aspekte eines Designs lenken könnten. Sie sind besonders nützlich, wenn Sie aus einer Reihe bestehender Markenfarben eine vielfältigere Farbpalette entwickeln.

Ich wähle oft entweder eine rein monochromatische oder teilweise monochromatische Palette, die eine Akzentfarbe enthält. Diese hinzugefügte Farbe wirkt als Kontrapunkt zur Grundfarbe und verleiht einem Design mehr Tiefe.

Begrenzung der Palette

Dank CSS Grid, Hintergrundbildverläufen und Pseudoelementen erreicht dieses nächste Pintori-inspirierte Design einen enormen Wert aus einem sehr kleinen Satz von HTML-Elementen. Ich brauche nur eine Überschrift, einen einzigen Absatz und sieben leere Unterteilungen. Ich gebe jedem Bereich seine eigene Identität. Dadurch kann ich ihnen ihren eigenen unverwechselbaren Stil verleihen:

 <h1>…</h1> <p>…</p> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>

Dieser HTML-Code platziert die Überschrift und den Absatz vor den sieben Feldern, aber schauen Sie sich das fertige kleine Bildschirmdesign genau an, und Sie werden sehen, dass dieser Inhalt neu geordnet wurde, um das Morris-Logo und dann ein Bild des Front-Ends des Travellers oben zu platzieren .

Während ich häufig Rastereigenschaften auf mittleren und großen Bildschirmen einführe, ist CSS Grid auch nützlich, um Inhalte auf kleineren Bildschirmen neu anzuordnen. Für dieses Design ändere ich den Anzeigewert des Body-Elements in Raster und füge dann eine auf der Höhe des Ansichtsfensters basierende Lücke zwischen den intrinsischen, nicht spezifizierten Zeilen ein:

 body { display: grid; row-gap: 2vh; }

Dann ordne ich die Felder, die mein Morris Motors-Logo und -Bild sowie die Überschrift enthalten, mithilfe der Zeilennummern neu an:

 #panel-d { grid-row: 1; } #panel-e { grid-row: 2; } h1 { grid-row: 3; }

Da meine Panel-Unterteilungen keine anderen Elemente haben, wird ihre Höhe auf Null reduziert, sodass nur ihre Grenzen übrig bleiben. Um sicherzustellen, dass Platz zum Anzeigen der generierten Hintergründe und Inhalte vorhanden ist, gebe ich eine Mindesthöhe für alle Panels an:

 [id*="panel"] { min-height: 380px; }

Das Panel, das in meinem kleinen Bildschirmdesign zuerst erscheint, zeigt das Morris Motors-Logo, das ich mithilfe einer CSS-generierten Inhaltsdaten-URI einfüge. Wenn Sie mit diesem praktischen Inhaltstyp nicht vertraut sind, ist ein Daten-URI eine Datei, die in eine Zeichenfolge codiert wurde. Sie können einen Daten-URI überall in Ihrem CSS oder HTML verwenden:

 <img src="data:image/png…"> <img src="data:image/svg+xml…">

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

Wenn ein Browser einen Daten-URI findet, entschlüsselt er den Inhalt und rekonstruiert die Originaldatei. Daten-URIs sind nicht auf codierte Bilder beschränkt, sondern werden häufig verwendet, um Bilder im PNG-Format und SVGs zu codieren. Sie finden online mehrere Tools zum Konvertieren von Bildern in Daten-URIs.

Zuerst ändere ich die Mindesthöhe dieses Panels, um sie an die Höhe meines Logos anzupassen, dann füge ich das Logo ein:

 #panel-d { min-height: 90px; text-align: center; } #panel-d:before { content: url("data:image/svg+xml…"); display: block; width: 135px; height: 90px; margin: 0 auto; }

Ich verwende eine ähnliche Technik, um ein Hintergrundbild hinter meinem Absatz zu platzieren. Ich füge Wiederholungs-, Positions- und Größeneigenschaften hinzu, die den Hintergrund flexibel machen, und platziere ihn immer in der horizontalen und vertikalen Mitte meines Absatzes:

 p { background-image: url("data:image/svg+xml…"); } p { background-repeat: no-repeat; background-position: 50% 50%; background-size: 50% 50%; } 

Jedes meiner Panels hat sein eigenes unverwechselbares grafisches Design. Ich hätte Bilder in diese sieben Felder einfügen können, aber dazu wären mindestens sieben zusätzliche HTTP-Anforderungen erforderlich gewesen. Stattdessen verwende ich verschiedene Kombinationen mehrerer Hintergrundbilder mit Daten-URIs und CSS-Verläufen, um die gewünschten Ergebnisse zu erzielen.

Das erste Panel enthält eine Grafik der Nabenkappe des Morris über einem gestreiften Hintergrund in Blau, Weiß und Schwarz. Das Hintergrundbild der Radkappe stammt von einem Daten-URI:

 #panel-a { background-image: url("data:image/svg+xml…"); }

Dann füge ich das zweite, gestreifte Hintergrundbild mit einem linearen Farbverlauf hinzu:

 #panel-a { background-image: url("data:image/svg+xml…"), linear-gradient( to bottom, #34749F, #34749F 65px, #fff 65px, #fff 80px, #262626 80px); }

Ich gebe zwei Sätze von durch Kommas getrennten Wiederholungs-, Positions- und Größenwerten an und denke daran, sie in derselben Reihenfolge wie meine Hintergrundbilder zu halten:

 #panel-a { background-repeat: no-repeat, repeat-x; background-position: 50% 100%, 0 0; background-size: 75% 75%, auto auto; }

Dieses nächste Panel enthält zwei SVG-Bilder, gefolgt von komplexeren schwarzen, gelben und weißen Streifen. Indem ich Farbstopps mit verschiedenen Farben an derselben Position in meinem Verlauf platziere, erstelle ich einen gestreiften Hintergrund mit harten Linien zwischen meinen Farben:

 #panel-b { background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), linear-gradient( to bottom, #B5964D, #B5964D 125px, #262626 125px, #262626 140px, #fff 140px, #fff 155px, #262626 155px); } #panel-b { background-repeat: no-repeat, no-repeat, repeat-x; background-position: 50% 45px, 50% 190px, 0 0; background-size: 90%, 90%, auto; }

Ich habe jedes meiner Panels mit verschiedenen Kombinationen derselben Techniken entwickelt, um sie schnell zu laden und flexibel zu machen. Es ist selten, online Designs zu finden, die auf einem modularen Raster basieren, aber es ist die perfekte Wahl für dieses Pintori-inspirierte Design für große Bildschirme. Dieses modulare Raster besteht aus drei Spalten und Reihen.

Ich füge Rastereigenschaften zum body-Element hinzu und lege dann meine Spaltenbreiten fest, um den gesamten verfügbaren Platz auszufüllen. Um sicherzustellen, dass immer genug Höhe vorhanden ist, um den Inhalt jedes Panels anzuzeigen, verwende ich den minmax-Wert von Grid und setze die minimale Höhe auf 300px und die maximale auf 1fr:

 @media (min-width: 64em) { body { display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: repeat(3, minmax(300px, 1fr)); gap: 1rem; min-height: 100vh; } }

Elemente in diesem Design überlappen sich nicht, daher verwende ich Raster-Vorlagen-Bereiche für ihre Einfachheit. Dieses Design hat neun Rasterbereiche, und ich gebe jedem einen einzelnen Buchstabennamen, a–h. Da der Buchstabe d für zwei benachbarte Bereiche verwendet wird, belegt der mit diesem Buchstaben platzierte Gegenstand beide:

 body { grid-template-areas: "abc" "dde" "fgh"; }

In dieser Großbildimplementierung steuert der CSS-Grid-Minmax-Wert die Höhe meiner Zeilen, wodurch die zuvor angewendete Min-Höhe überflüssig wird:

 [id*="panel"] { min-height: none; }

Ich platziere meine Panels unter Verwendung von Bereichsnamen, wodurch ich ändern kann, wo sie in meinem Layout erscheinen, ohne ihre Position in meinem HTML zu ändern:

 #panel-a { grid-area: a; } #panel-b { grid-area: b; } #panel-c { grid-area: c; } #panel-d { grid-area: d; } #panel-e { grid-area: e; } #panel-f { grid-area: f; } #panel-g { grid-area: g; } p { grid-area: h; }

Während das Design meiner Panels über alle Bildschirmgrößen hinweg konsistent bleibt, gibt es ein Panel, in dem sich der Inhalt und die Hintergründe für größere Bildschirme ändern. Dieses Panel enthält das bekannte Morris-Logo und die scheinbare Hauptüberschrift „Style… in a BIG way“.

Um dieses Panel zu entwickeln, füge ich zuerst einen tiefen durchgehenden Rand oben hinzu, gefolgt von einem Daten-URI-Hintergrundbild:

 #panel-d { border-top: 15px solid #262626; background-image: url("data:image/svg+xml…"); }

Dann füge ich ein zweites Hintergrundbild mit Farbverlauf hinzu, das das schwarze Feld und zwei vertikale gelbe Streifen erzeugt:

 #panel-d { background-image: url("data:image/svg+xml…"), linear-gradient( to right, #fff, #fff 280px, #B5964D 280px, #B5964D 320px, #fff 320px, #fff 335px, #262626 335px, #262626 calc(100% - 40px), #F2C867 calc(100% - 40px), #F2C867 100%); }

Früher in meinem Prozess habe ich ein :before-Pseudoelement verwendet, um das Morris-Logo zu diesem Design hinzuzufügen. Bei großen Bildschirmen positioniere ich dieses Logo unten links in meinem Panel:

 #panel-d position: relative; } #panel-d:before { position: absolute; bottom: 0; left: 0; margin: 0; }

Meine große Überschrift leitet sich direkt vom HTML-Text ab und ist nicht Teil dieses Panels, was es schwierig macht, sie auf flexiblen Bildschirmgrößen zu positionieren. Um mein Design präzise zu reproduzieren, ohne die Zugänglichkeit zu beeinträchtigen, verwende ich zunächst eine barrierefreie Methode, um diese Überschrift für Personen, die Bildschirmlesegeräte verwenden, visuell auszublenden:

 h1 { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

Dann setze ich den Text der Überschrift mit generiertem Inhalt und einem :after-Pseudoelement wieder ein. Ich positioniere es unten rechts in meinem Panel und repliziere seinen fetten, komprimierten, kursiven Stil:

 #panel-d:after { content: "Style… in a BIG way"; position: absolute; bottom: 0; right: 0; font-family: "moderna_sans-bold-cnd-it"; font-size: 2.8rem; line-height: 1; text-align: right; } 

Ergänzende Paletten

Farben, die sich ergänzen, sitzen auf gegenüberliegenden Seiten eines Farbkreises. Aber obwohl es einfach ist, ihre mathematische Beziehung zu verstehen, kann die Arbeit mit Komplementärfarben eine Herausforderung sein.

Benachbarte komplementäre Farbkombinationen können hart aussehen und sich unharmonisch anfühlen, anstatt einander zu ergänzen. Um zu verhindern, dass sie kollidieren, verwenden Sie Schattierungen, Tönungen oder Töne von Komplementärfarben, die auch dazu beitragen, Ihre Palette verwendbarer Farben zu erweitern.

Verwenden Sie alternativ geteilte Komplementärfarben, bei denen die Palette anstelle von entgegengesetzten Farben zwei Farben auf beiden Seiten der Komplementärfarbe enthält.

Ergänzende Farben

In meinem nächsten Pintori-inspirierten Design überschneiden sich mehrere farblich komplementäre Entwürfe von Morris Traveler. Der zur Entwicklung dieses Designs benötigte HTML-Code ist so minimal wie die Darstellungen dieses Autos. Eine Bannerabteilung enthält ein SVG des Morris-Logos, und das Hauptelement enthält die Überschrift und den laufenden Text.

Die Flexibilität dieses Designs über mehrere Bildschirmgrößen ergibt sich jedoch aus der Verwendung von zwei Bildelementen, die jeweils drei Bilder enthalten. Ich füge ein Bildelement in die Kopfzeile ein, dann ein weiteres in meine Fußzeile:

 <div class="banner"> <svg>…</svg> </div> <header> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </header> <main> <h1><b>…</b></h1> <p>…</p> </main> <footer> <picture> <source media="(min-width: 72em)"> <source media="(min-width: 48em)"> <img> </picture> </footer>

Jedes meiner Entwicklungsprojekte beginnt mit dem Hinzufügen der jetzt bekannten Grundstile, diesmal mit einer cremefarbenen Hintergrundfarbe und fast schwarzem serifenlosem Text:

 body { background-color: #f3f2f2; font-family: "moderna_sans-light"; color: #262626; }

Ich richte den Inhalt meines Bannerbereichs mittig aus und setze dann die maximale Breite des Logos auf winzige 150 Pixel:

 .banner { text-align: center; } .banner svg { max-width: 150px; }

Die Hauptüberschrift in diesem Design ist im fetten, komprimierten, kursiven Stil von Moderna Sans gesetzt:

 h1 { font-family: "moderna_sans-bold-cnd-it"; font-size: 2.027rem; font-weight: normal; line-height: 1.2; }

Ein Teil dieser Überschrift ist in einem Span-Element eingeschlossen, das es mir ermöglicht, seine Farbe zu ändern, um sie an andere Aspekte dieses Designs anzupassen, einschließlich des Stier-Emblems in der Mitte des Morris Motors-Logos:

 h1 span { color: #df4561; } #logo .emblem { fill: #df4561; }

Auf kleinen Bildschirmen enthalten sowohl die Kopf- als auch die Fußzeile ein einzelnes Traveler-Bild. Wenn Platz ist, um zwei Reisende nebeneinander zu platzieren, ändert ein Browser die Bilder in den beiden Bildelementen.

Für mittelgroße Bildschirme nutze ich den zusätzlichen verfügbaren Platz und führe ein vierspaltiges symmetrisches Raster ein:

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

Ich platziere die Bannerteilung in den beiden mittleren Spalten, zentriere mein Logo und verschiebe es dann vertikal, damit es zwischen die Stoßfänger meiner beiden Traveller passt:

 .banner { grid-column: 2 / 4; text-align: center; transform: translateY(2vh); }

Sowohl meine Kopf- als auch meine Fußzeile überspannen das Raster von Rand zu Rand, während die Platzierung des Hauptinhalts in den beiden mittleren Spalten ein komfortables Maß schafft:

 header, footer { grid-column: 1 / -1; } main { grid-column: 2 / 4; }

Die wichtigsten Änderungen am Layout dieses Designs sind bei größeren Bildschirmgrößen zu sehen. Trotz ihrer Namen müssen Sie kein Kopf- oder Fußzeilenelement am oberen und unteren Rand eines Layouts platzieren. Sie können überall innerhalb eines Designs platziert werden, auch links oder rechts.

Zur genaueren Kontrolle über mein Layout erhöhe ich die Anzahl der Spalten in meinem Raster von vier auf acht und füge dann zwei Zeilen ein. Die erste Zeile hat eine feste Höhe von 160 Pixel, während die Höhe der zweiten durch den Inhalt bestimmt wird:

 @media (min-width: 72em) { body { grid-template-columns: repeat(8, 1fr); grid-template-rows: 160px auto; column-gap: 2vw; } }

Ich positioniere meine Banneraufteilung über drei Spalten neu und stelle das Hauptelement unten passend ein:

 .banner, main { grid-column: 3 / 5; }

Dann platziere ich die Fußzeile in den ersten drei Spalten und die Kopfzeile in den letzten vier, um aus dem symmetrischen Raster ein asymmetrisches Layout zu erstellen:

 header { grid-column: 5 / -1; } footer { grid-column: 1 / 4; }

Sowohl Kopf- als auch Fußzeile füllen die Höhe meines Rasters von oben nach unten aus:

 header, footer { grid-row: 1 / 3; }

Während die Bannerabteilung die erste Reihe einnimmt:

 .banner { grid-row: 1; }

Und das Hauptelement passt ordentlich darunter:

 main { grid-row: 2 / 3; z-index: 2; }

Die Implementierung von hellen Themen und dunklen Designs ist Teil des alltäglichen Produkt- und Website-Designs geworden, seit Apple einen dunklen Modus für iOS und macOS eingeführt hat. Die Entwicklung von Dunkel-/Hell-Modi ist einfach, und es gibt jetzt eine weithin unterstützte Medienabfrage für diese Benutzereinstellung. Es stehen drei Werte zur Auswahl:

• no-preference : Jemand hat keine Präferenz geäußert
• Licht : Jemand hat ein Lichtthema ausgewählt
• dunkel : Jemand hat ein dunkles Thema gewählt

Die Einführung einer Dark-Mode-Version dieses Designs beinhaltet kaum mehr als das Hinzufügen von Änderungen an bestimmten Farbwerten innerhalb dieser Medienabfrage. Zum Beispiel durch Umkehren der Hintergrund- und Vordergrundtextfarben und Ändern der Pfadfüllfarben in meinem SVG-Logo:

 @media (prefers-color-scheme: dark) { body { background-color: #262626; color: #fff; } #logo .metal, #logo .emblem { fill: #fff; } }

Die Entscheidung für Farben im Dunkelmodus erfordert manchmal mehr, als sie einfach zu invertieren, indem weißer Hintergrund schwarz und schwarzer Text weiß wird. Reinweißer Text auf vollschwarzem Hintergrund macht das Lesen langer Textpassagen für das Auge ermüdend, erwägen Sie also, diesen Kontrast durch die Verwendung eines gebrochenen Weiß abzuschwächen:

 body { color: #f3f2f2; }

Manchmal können sogar leuchtende Komplementärfarben anders erscheinen, wenn sie vor einem dunklen Hintergrund platziert werden. Glücklicherweise können CSS-Filter die Helligkeit, Sättigung oder beides einer Farbe erhöhen, ohne dass eine andere Version einer Datei für dunklere Hintergründe exportiert werden muss:

 header img, footer img { filter: saturate(1.5) brightness(1.1); } 

Aufhellende Farben

In meinem letzten Pintori-inspirierten Design schweben bunte Rechtecke über dem dunkelgrauen Hintergrund. Dieses Design benötigt nur drei Strukturelemente; eine Kopfzeile, die wieder das Morris Motors-Logo enthält, ein figure-Element, das nicht ein, nicht zwei, sondern drei Umrissbilder des Morris Traveller enthält, und das Hauptelement, das meinen Fließtext enthält:

 <header> <svg>…</svg> </header> <figure> <img> <img> <img> </figure> <main> <h1>…</h1> <p>…</p> <p>…</p> </main>

Zu diesem minimalen HTML füge ich vier rein repräsentative SVG-Bilder hinzu. Da ich nicht möchte, dass diese von Hilfstechnologien angekündigt werden, füge ich jedem von ihnen ein verstecktes ARIA-Attribut hinzu:

 <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg> <svg aria-hidden="true">…</svg>

Zuerst lege ich Grundstile für Hintergrund- und Vordergrundfarben fest und wende dann dieselben SVG-Präsentationsbilder mithilfe von Daten-URIs auf den Hintergrund an:

 body { background-color: #262626; } background-image: url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"), url("data:image/svg+xml…"); color: #f3f2f2; }

Dann gebe ich Hintergrundwiederholungs- und Positionswerte an, platziere jedes SVG in der Mitte und stapele sie vertikal auf der Seite. Schließlich stelle ich ihre Größen ein:

 body { background-repeat: no-repeat; background-position: 50% 20px, 50% 240px, 50% 460px, 50% 680px; background-size: 200px 200px, 300px 200px, 200px 200px, 100px 100px; }

Damit das Logo in meiner Kopfzeile der Größe des dahinter liegenden SVG-Hintergrunds entspricht, schränke ich seine maximale Breite ein und zentriere es dann mit horizontalen Rändern:

 header { max-width: 200px; margin: 0 auto; }

Auch hier ist ein horizontales Bildlauffeld eine nützliche Möglichkeit, meine drei umrissenen Traveler-Bilder zu präsentieren, daher setze ich den Anzeigewert ihrer Figur auf flex und verhindere einen horizontalen Überlauf, indem ich den Wert auf scrollen setze:

 figure { display: flex; flex-wrap: nowrap; margin: 0; padding: 0; max-width: 100vw; overflow-x: scroll; }

Dann gebe ich einen Flex-Basiswert und eine passende Höhe an:

 figure img { flex-grow: 1; flex-basis: 320px; height: 320px; }

Ich habe meine vier farbenfrohen SVGs als Hintergrundbilder verwendet, damit sie nicht auf kleinen Bildschirmen erscheinen. Die Verwendung von Attributselektoren, um die Eigenschaft und den Wert eines Stils genau abzugleichen, ist eine ideale Methode, um auf Elemente abzuzielen, ohne auf zusätzliche Klassenattribute zurückgreifen zu müssen:

 [aria-hidden="true"] { display: none; }

Dieses Design benötigt nur einen Haltepunkt für Medienabfragen, um Layoutstile für mittlere und große Bildschirme anzuwenden. Ich wende acht gleich breite Spalten und acht Zeilen an und entferne dann die Hintergrundbilder, die ich für kleine Bildschirme angewendet habe:

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

Dann platziere ich die Kopf- und Hauptelemente zwischen den Zeilennummern in meinem Raster:

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

Ich muss die Bilder und die Aufteilung der Figur in meinem Raster platzieren, nicht die Figur selbst, also ändere ich ihre Anzeigeeigenschaft in Inhalt, wodurch sie für Stylingzwecke effektiv aus dem DOM entfernt wird:

 figure { display: contents; }

Dann platziere ich jedes Traveller-Bild in einem anderen Satz von Rasterspalten und -zeilen, wodurch sich ihre Größe zusammen mit ihrer Position ändert:

 figure img:nth-of-type(1) { grid-column: 3 / 6; grid-row: 2 / 4; } figure img:nth-of-type(2) { grid-column: 5 / 8; grid-row: 2 / 5; } figure img:nth-of-type(3) { grid-column: 3 / 4; grid-row: 5 / 6; }

CSS-Transformationen sind ideale Werkzeuge zur Feinabstimmung der Größe und Position von Elementen innerhalb der Rasterbeschränkungen. Sie sind auch nützlich, um einem Design ungewöhnliche Akzente zu verleihen. Ich verwende Drehen, Skalieren und Übersetzen, um diese Bilder fein abzustimmen:

 figure img:nth-of-type(1) { transform: rotate(-20deg) translateX(-12rem); } figure img:nth-of-type(2) { transform: scale(1.1); } figure img:nth-of-type(3) { transform: scale(1.25); }

Ich enthülle jetzt die farbenfrohen, repräsentativen Rechtecke und schiebe sie hinter meinen Inhalt, indem ich einen niedrigen Z-Index-Wert festlege. Wo sich diese Bilder überlappen, fügt ein Mix-Blend-Modus diesem Design noch mehr Farbe hinzu:

 [aria-hidden="true"] { display: block; z-index: 0; mix-blend-mode: multiply; }

In diesem letzten Schritt platziere ich diese Formen auf meinem Raster und verwende Drehungen, um diesem bereits farbenfrohen Design noch mehr Persönlichkeit zu verleihen:

 .bg-1 { grid-column: 2 / 4; grid-row: 2 / 4; transform: rotate(-30deg); transform-origin: 75% 50%; } .bg-2 { grid-column: 4 / 8; grid-row: 2 / 5; } .bg-3 { grid-column: 3 / 5; grid-row: 4 / 6; } .bg-4 { grid-column: 4 / 5; grid-row: 6 / 7; transform: rotate(5deg); transform-origin: 0 0; } 

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