Fünf Design-Ängste, die Sie mit CSS Grid überwinden können

CSS Grid, zusammen mit einer Handvoll anderer neuer CSS-Eigenschaften, revolutioniert das Webdesign. Leider hat sich die Branche noch nicht vollends auf diese Revolution eingelassen, und vieles davon hängt mit der Angst zusammen, die wir auf Probleme mit dem aktuellen Stand der CSS Grid-Tutorials zurückführen können.

Die Mehrheit von ihnen fällt in eine von zwei Kategorien:

1. Nachbildung klassischer Webdesign-Muster. Grid ist großartig darin, klassische Webdesign-Muster wie Karten-Grids und „Holy Grail“-Seiten nachzubilden.
2. Herumspielen. Grid eignet sich auch hervorragend für die Erstellung von unterhaltsamen Dingen wie Monopoly-Brettern oder Videospiel-Interfaces.

Diese Arten von Tutorials sind wichtig für neue Technologien. Sie sind ein Ausgangspunkt. Jetzt ist die Zeit, wie Jen Simmons sagt, aus unseren ausgetretenen Pfaden auszubrechen. Um das zu tun, müssen wir unsere Design-Ängste ablegen.

Angst 1: Asymmetrie

Wir wurden im Zeitalter der Frameworks darauf trainiert, dass *symmetrische* und geordnete Designs besser sind. Es stimmt, dass für viele Anwendungen ein symmetrisches Design oder ein geordnetes Raster von Elementen bevorzugt wird. Doch Asymmetrie hat die Fähigkeit, das Auge und den Geist auf eine Weise zu fesseln, wie es Symmetrie niemals tun wird. Asymmetrie ist in ihrer Unordnung *interessant*. Wenn Sie nervös sind, können Sie immer klein anfangen.

Sehen Sie den Pen Asymmetric Promo Grid von Bryan Robinson (@brob) auf CodePen.

In diesem Beispiel haben wir einen einfachen Werbebereich. Durch die Verwendung eines asymmetrischen vertikalen und horizontalen Layouts können wir eine stärkere visuelle Übereinstimmung zwischen unserem Icon und unserem Button erzielen. Dies ist kein großer Bereich, aber er scheut sich nicht, Leerraum zu nutzen, um das Auge des Benutzers dorthin zu lenken, wo wir es haben wollen.

Wo wir gerade vom Leerraum sprechen...

Angst 2: Negativraum

Als wir die frühen 2000er hinter uns ließen, entschieden wir, dass es in Ordnung sei, wenn Benutzer scrollen mussten. Wir begannen, Leerraum in unsere Designs einzuführen, und ein Großteil davon befand sich zwischen den Inhaltszeilen. Das machte unsere Designs viel sauberer, aber ist vertikaler Leerraum die einzig gültige Option?

In diesem Beispiel nutzt das Design Negativraum, um ein Gefühl der Erkundung der Seite zu erzeugen. Indem keine traditionellen Inhaltszeilen verwendet werden, erhält das Auge des Benutzers die Möglichkeit, die Inhalte in einem langsameren Tempo zu erfassen.

Sehen Sie den Pen Experimental Homepage von Bryan Robinson (@brob) auf CodePen.

Angst 3: Punkrock?

Es mangelt nicht an Design-Vorträgen, die sich mit Print-Layouts der 1970er Jahre befassen. Es war eine Zeit großer Stabilität bei den Design-Werkzeugen, die Kreativität aufblühen ließ. Damit entstanden inspirierende und avantgardistische Designarbeiten, die sich um die Punkrock-Szene drehten.

Meine Frage ist also: Können wir Punkrocker im Webdesign sein?

In diesem Beispiel kümmert sich das Design nicht um Ihre Vorstellungen. Textüberlappung ist ein Fehler? Nein, es ist ein Feature. Bilder sollten sich nicht gegenseitig konkurrieren? Survival of the fittest!

Sehen Sie den Pen Grid Overlap and Punk Rock Meditation von Bryan Robinson (@brob) auf CodePen.

Wie dieses Beispiel fragt: Ist das eine gute Idee? Das ist völlig diskussionswürdig. Was ich weiß, ist: Unsere Werkzeuge sind ausgereifter und stabiler geworden; jetzt ist die Zeit für Experimente. Wollen wir, dass das Web Jahr für Jahr gleich aussieht, oder wollen wir neue und aufregende Muster entwerfen?

Angst 4: Neue Inspirationsquellen

Inspirationsquellen sollten keine Angst verursachen, aber sie verursachen oft Kopfschmerzen. Denken Sie daran, Inspiration bedeutet nicht eine 1:1-Übersetzung eines Konzepts.

Punkrock-Grafikdesign

Ich habe früher die erstaunlichen Designs erwähnt, die in den 70er und 80er Jahren entstanden sind. Hier sind einige Links zur weiteren Recherche über Punkrock-Design:

• The Art of Punk Posters von Sean O’Hagan
• The Art of Chaos: Punk Rock’s Timeless Influence on Graphic Design von Simon Martin

Vintage Film-Grafikdesign

Mein Filmstudium hat mir eine große Wertschätzung für das Vintage-Film-Grafikdesign vermittelt. Einer meiner Professoren sagte mir einmal: „Man sollte den Ton und das Thema eines Films anhand seiner Titelkarten erkennen können.“

Das gilt insbesondere für Filme nach dem Zweiten Weltkrieg. Ihre Titelsequenzen und Poster sind eine Fundgrube an Designideen für die Inszenierung einer Szene.

• The Graphic Art of Film Title Design Throughout Cinema History von Rebecca Gross
• Saul Bass on His Approach to Designing Movie Title Sequences von The Academy of Motion Picture Arts & Sciences

Lernen Sie, wie man Grafikdesign-Grids erstellt

Grafikdesigner verwenden seit Jahrhunderten Grids für Layouts, und es gibt viel großartige Literatur über die Erstellung dieser Grids.

• Video: Mark Boulton | Designing Grids | CSS Day 2017
• Guity Novin's A History of Graphic Design: Chapter 58, History of Layout Design and Modern Newspapers and Magazines
• Layout Essentials: 100 Design Principles for Using Grids von Beth Tondreau

Angst 5: Fallbacks

Es stimmt, dass Grid zu diesem Zeitpunkt nur eine Unterstützung von 74 % in den USA hat (zum Zeitpunkt des Schreibens).

Das sollte Sie nicht davon abhalten, Ihre Designs voranzutreiben. Es gibt zahlreiche Strategien, um mit Unterstützung für alle Browser zu beginnen und dann neue Muster zu entwickeln.

• Using CSS Grid: Supporting Browsers Without Grid von Rachel Andrew
• Video: Progressing Our Layouts von Jen Simmons
• Falling Forward — Rethinking Progressive Enhancement, Graceful Degradation and Developer Morality von Bryan Robinson

Was kommt als Nächstes?

Es liegt an jedem von uns, unsere Branche voranzubringen. Die Technologie ist vorhanden, um uns herauszufordern, neue und interessante Designs zu schaffen. Dies muss nicht so spitz und intensiv sein wie einige dieser Beispiele. Es beginnt damit, zu erkennen, dass wir erstaunliche Dinge tun können ... oder wir stagnieren.

Wie werden Sie die Branche voranbringen?