Vijf Design Angsten te Overwinnen Met CSS Grid

0
38

CSS grid, samen met een handvol andere nieuwe CSS-eigenschappen zijn een revolutie in web design. Helaas, de industrie niet heeft omarmd dat de revolutie nog en veel van het is gecentreerd rond angst die we kunnen herleiden tot problemen met de huidige staat van CSS grid tutorials.

De meerderheid van hen vallen in twee categorieën:

  1. Re-creëren van de klassieke web design patterns. Grid is groot bij het repliceren van de klassieke web design patterns, zoals kaart grids en de “heilige graal” pagina ‘ s.
  2. Spelen. Raster is ook geweldig voor het maken van leuke dingen zoals Monopoly borden of-video-game-interfaces.

Deze types van oefeningen zijn belangrijk voor de nieuwe technologie. Ze zijn een uitgangspunt. Nu is de tijd, als Jen Simmons zegt, om eruit te komen van onze ruts. Om dat te doen, moeten we af van onze ontwerp-angsten.

Angst 1: Asymmetrie

We hebben getraind in het tijdperk van de kaders die symmetrisch en ordelijke ontwerpen zijn beter. Het is waar dat voor veel toepassingen een symmetrisch ontwerp of een ordelijke raster van punten wordt de voorkeur. Maar toch, asymmetrie heeft de mogelijkheid tot het vastleggen oog en geest op een manier die symmetrie zal het ook nooit. Asymmetrie is interessant in zijn stoornis. Als je zenuwachtig bent, je kunt altijd klein beginnen.

Zie de Pen Asymmetrische Promo Raster door Bryan Robinson (@brob) op CodePen.

In dit voorbeeld hebben we een eenvoudige promotionele ruimte. Door het gebruik van een asymmetrische verticale en horizontale lay-out, kunnen we een sterkere visuele match tussen onze pictogram en onze button. Dit is geen grote ruimte, maar het is niet bang voor het gebruik van witruimte in te trekken het oog van de gebruiker waar we willen om te gaan.

Het spreken van witruimte…

Angst 2: De Negatieve Ruimte

Als we het begin van de jaren 2000, besloten we dat het OK was als gebruikers had om te scrollen. We begonnen met de invoering van witruimte in onze ontwerpen en de meeste van deze viel tussen de rijen van de inhoud. Dit maakte onze ontwerpen veel schoner, maar is verticale witruimte is de enige geldige optie is?

In dit voorbeeld is het ontwerp met de negatieve ruimte te creëren een gevoel van exploratie door de pagina ‘ s. Door het niet gebruiken van de traditionele inhoud rijen, het oog van de gebruiker krijgt een kans om te scannen en nemen de dingen in een trager tempo.

Zie de Pen Experimentele Homepage van Bryan Robinson (@brob) op CodePen.

Angst 3: Punk Rock?

Er is geen tekort van ontwerp gesprekken gericht op de print lay-outs van de jaren 1970. Het was een tijd van grote stabiliteit in het ontwerp van gereedschappen, waardoor creativiteit tot bloei te komen. Met dat kwam geïnspireerd en avant-garde design werk dat gecentreerd rond de punk-rock scene.

Dus mijn vraag is: Kunnen we de punk rockers in web design?

In dit voorbeeld is het ontwerp niet de zorg over uw vooroordelen. Tekst overlappen is het een bug? Nee, het is een feature. Afbeeldingen mogen niet met elkaar concurreren? Survival of the fittest!

Zie de Pen Raster Overlappen en Punk Rock Meditatie door Bryan Robinson (@brob) op CodePen.

Als dit voorbeeld vraagt, is dit een goed idee? Het is volledig ter discussie. Wat ik wel weet is dit: onze tools zijn geworden en meer stabiel; nu is het tijd voor experimenteren. Willen we de website ziet er hetzelfde uit, jaar na jaar, of willen we bedenken nieuwe en spannende patronen?

Angst 4: Nieuwe Bronnen van Inspiratie

Bronnen van inspiratie moet niet leiden tot angst, maar ze doen vaak de oorzaak zijn van hoofdpijn. Vergeet niet, inspiratie betekent niet dat een 1:1 vertaling van een concept.

Punk rock grafisch ontwerp

Ik noemde eerder de geweldige ontwerpen van de jaren ’70 en ’80. Hier zijn enkele links om verder te onderzoeken punk-rock ontwerp:

  • De Kunst van Punk Posters door Sean O ‘ Hagan
  • De Kunst van Chaos: Punk Rock is Tijdloos Invloed op Grafisch Ontwerp door Simon Martin

Vintage film grafisch ontwerp

Het bestuderen van film in college gaf me een grote waardering voor vintage film grafisch ontwerp. Een van mijn docenten zei ooit tegen mij: “Je moet in staat zijn om te vertellen van de toon en het onderwerp van een film met de titel kaarten.”

Dit geldt met name voor de post-wo II-films. Hun titels en posters zijn een schat aan ideeën van het ontwerp voor de instelling van een scène.

  • De Grafische Kunst van de Film Titel Design In de filmgeschiedenis door Rebecca Bruto
  • Saul Bass op Zijn Benadering bij het Ontwerpen van de Film van titels door De Academy of Motion Picture Arts & Sciences

Leren hoe te maken van grafisch ontwerp grids

Grafisch ontwerpers zijn met behulp van rasters voor een lay-out voor eeuwen, en er is veel literatuur over het ontstaan van deze netwerken:

  • Video: Mark Boulton | Ontwerpen van Rasters | CSS Dag 2017
  • Guity Novin, Een Geschiedenis van het Grafisch Ontwerp: Hoofdstuk 58, Geschiedenis van de Vormgeving en de Moderne Kranten en Tijdschriften
  • De lay-Essentials: 100 Design Principes voor het Gebruik van Rasters door Beth Tondreau

Angst 5: Uitwijkmogelijkheden

Het is waar dat het net is slechts 74% ondersteuning in de VS (op het moment van dit schrijven).

Dat moet je niet stoppen van het duwen van uw ontwerp. Er zijn tal van strategieën voor het starten met ondersteuning voor alle browsers en vervolgens naar voren te duwen in nieuwe patronen.

  • Met behulp van CSS Grid: Ondersteunende Browsers Zonder Raster door Rachel Andrew
  • Video: de Voortgang van Onze lay-Outs door Jen Simmons
  • Vallen — Voorwaarts Heroverweging van Progressive Enhancement, Graceful Degradation en Ontwikkelaar Moraal door Bryan Robinson

Wat is het volgende?

Het is de taak van elk van ons om te duwen onze industrie naar voren. De technologie is op zijn plaats om de uitdaging aangaan om het maken van nieuwe en interessante ontwerpen. Dit hoeft niet te worden zoals aangegeven en intens als een aantal van deze voorbeelden. Het begint door te beseffen dat we kunnen doen fantastische dingen … of we kunnen stagneren.

Hoe gaat u de druk van de industrie naar voren?