Fünf Design-Ängste zu Besiegen, die Mit CSS-Raster

0
104

CSS-grid, zusammen mit einer Handvoll andere neue CSS-Eigenschaften, revolutionieren web-design. Leider, die Industrie hat nicht angenommen, dass die revolution noch und vieles davon dreht sich um die Angst, die wir zurückverfolgen kann zu Problemen mit dem aktuellen Stand der CSS-raster-tutorials.

Die meisten von Ihnen fallen in eine von zwei Kategorien:

  1. Re-Erstellung klassischer web-design-Muster. Grid ist toll zu replizieren klassischen web-design-Muster wie Karte grids ” und “Heilige Gral” – Seiten.
  2. Rund um das Spiel. Grid ist auch hervorragend für die Erstellung von Spaß Dinge wie Monopoly-Bretter-oder video-game-Schnittstellen.

Diese Arten von übungen sind wichtig für die neue Technologie. Sie sind ein Ausgangspunkt. Jetzt ist die Zeit, als Jen Simmons sagt, um aus unserer furchen. Um das zu tun, müssen wir die Leinen Los unsere design-ängste.

Angst 1: Asymmetrie

Wir habe ausgebildet worden, in der ära des frameworks, die symmetrische und geordnete Ausführungen sind besser. Es ist wahr, dass für viele Anwendungen eine symmetrische design, oder eine geordnete raster der Elemente bevorzugt wird. Doch, Asymmetrie hat die Fähigkeit zu erfassen, das Auge und Geist in einer Weise, dass die Symmetrie auch nie. Asymmetrie ist interessant, auf seine Störung. Wenn Sie nervös sind, können Sie beginnen immer klein.

Finden Sie den Stift Asymmetrische Promo Raster von Bryan Robinson (@brob) auf CodePen.

In diesem Beispiel haben wir eine einfache Werbefläche. Durch die Verwendung einer asymmetrischen vertikalen und horizontalen Layouts, die wir machen können, eine stärkere visuelle übereinstimmung zwischen unserem Symbol und unserem button. Dies ist nicht ein großer Raum, aber es ist nicht Angst vor der Verwendung von Leerzeichen zu ziehen den Blick des Benutzers, wo wir hin wollen.

Apropos Leerzeichen…

Fear 2: Negativer Raum

Als wir Links in die frühen 2000er Jahre, beschlossen wir, es war OK, wenn die Benutzer zu scrollen. Begannen wir die Einführung Leerzeichen in unsere designs und die meisten dieser fiel zwischen den Zeilen. Dies machte unsere designs viel sauberer, aber liegt in der vertikalen Leerraum, der nur gültige option?

In diesem Beispiel enthält der Entwurf die negativen Raum, um ein Gefühl der exploration durch die Seite. Nicht mit klassischen Inhalten Zeilen, den Blick des Benutzers ist die chance gegeben zu Scannen und nehmen Sie die Dinge in einem langsameren Tempo.

Finden Sie den Stift Experimentelle Homepage von Bryan Robinson (@brob) auf CodePen.

Fear 3: Punk Rock?

Es gibt keinen Mangel von design talks konzentriert sich auf den print-layouts der 1970er Jahre. Es war eine Zeit großer Stabilität in der design-Werkzeuge, die es erlaubt, die Kreativität zum blühen. Mit diesem kam Sie sich inspirieren und Avantgarde-design-Arbeit, die zentriert rund um den punk-rock-Szene.

So meine Frage ist: Können wir punk-Rocker in web-design?

In diesem Beispiel, das design kümmert sich nicht um Ihre Vorurteile. Text überschneiden, ist ein bug? NÖ, es ist ein feature. Bilder sollten nicht miteinander konkurrieren? Survival of the fittest!

Finden Sie die Stift-Raster Überlappen und Punk-Rock-Meditation von Bryan Robinson (@brob) auf CodePen.

Wie dieses Beispiel fragt, ist das eine gute Idee? Es ist völlig zur Debatte. Was ich weiß, ist dies: unsere tools sind gereift und stabiler geworden; jetzt ist die Zeit für Experimente. Wollen wir das web, um das gleiche Jahr nach Jahr, oder wollen wir den Traum, neue und aufregende Muster?

Angst-4: Neue Quellen der Inspiration

Quellen der inspiration sollte nicht dazu führen, dass Angst, aber Sie verursachen oft Kopfschmerzen. Denken Sie daran, inspiration bedeutet nicht, dass eine 1:1 übersetzung ein Begriff.

Punk-rock-Grafik-design

Ich bereits erwähnt die erstaunliche designs, die kam aus den ’70er und ’80er Jahre. Hier sind einige links, um weiter forschen punk-rock-design:

  • Die Kunst der Punk-Poster von Sean O ‘ Hagan
  • Die Kunst des Chaos: Punk, Rock, Zeitlose Einfluss auf Grafik-Design von Simon Martin

Vintage-Film-Grafik-design

Studium der film im college gab mir eine große Wertschätzung für vintage-Film-Grafik-design. Einer meiner Professoren sagte mir einmal: “Sie sollten in der Lage sein zu sagen, den Ton und Thema eines Films durch seine Titel-Karten.”

Dies gilt insbesondere für die post-Weltkrieg-II-Filme. Ihre Titel Sequenzen und Plakate sind eine Fundgrube für design-Ideen für die Einstellung der Szene.

  • Die Grafik Kunst, Film Title Design der Gesamten Kino-Geschichte von Rebecca Gross
  • Saul Bass auf Seinem Ansatz zur Gestaltung von Titel-Sequenzen von Der Academy of Motion Picture Arts & Sciences

Lernen Sie, wie man Grafik-design-Rastern

Grafik-Designer habe mit raster für das layout für Jahrhunderte, und es gibt eine Menge großartiger Literatur, die auf die Schaffung dieser Netze:

  • Video: Mark Boulton | Entwerfen Netze | CSS-Tag 2017
  • Guity Novin ist Eine Geschichte des Grafik-Design: Kapitel 58, Geschichte der Layout-Gestaltung und die Modernen Zeitungen und Zeitschriften
  • Layout Essentials: 100 Design-Prinzipien für die Verwendung von Rastern Beth Tondreau

Angst 5: Fallbacks

Es ist wahr, dass Grid nur 74% Zustimmung in den USA (zum Zeitpunkt des Schreibens dieses Artikels).

Das sollte nicht aufhören, Sie zu drängen, Ihre designs freuen. Es gibt viele Strategien für den Start mit Unterstützung für alle Browser, und dann schieben Sie Sie vorwärts in neue Muster.

  • Die Verwendung von CSS-Grid: Unterstützende Browser Ohne Gitter von Rachel Andrew
  • Video: Voran Unsere Layouts von Jen Simmons
  • Nach Vorne fallen — das Umdenken, Progressive Enhancement, Graceful Degradation und Entwickler Moral von Bryan Robinson

Was kommt als Nächstes?

Es fällt jedem von uns schieben unsere Industrie vorwärts. Die Technologie ist vorhanden, um die Herausforderung, uns selbst zu schaffen, neue und interessante designs. Das muss nicht so pointiert und intensiv, wie einige dieser Beispiele. Es beginnt mit der Realisierung können wir erstaunliche Dinge tun … oder wir stagnieren.

Wie werden Sie schieben die Industrie vorwärts?