Fem Design Rädsla för att Besegra Med CSS Nätet

0
11

CSS nätet, tillsammans med en handfull andra nya CSS-egenskaper, håller på att revolutionera web design. Tyvärr, industrin har inte anammat att revolutionen ännu och en hel del av det är centrerad kring rädsla som vi kan spåra tillbaka till problem med nuvarande CSS nätet tutorials.

Majoriteten av dem falla i en av två kategorier:

  1. Återskapa klassiska web design mönster. Nätet är bra på att replikera klassiska web design mönster som kort-nät och “heliga graal” sidor.
  2. Att spela runt. Nätet är även bra för att skapa roliga saker som Monopol, styrelser eller tv-spel gränssnitt.

Dessa typer av övningar är viktiga för ny teknik. De är en utgångspunkt. Nu är det dags, som Jen Simmons säger, för att få ut våra spår. För att göra det måste vi kasta av oss våra design rädsla.

Rädsla 1: Asymmetri

Vi har utbildats i en tid präglad av ramar som symmetrisk och välordnat mönster är bättre. Det är sant att för många tillämpningar en symmetrisk design eller en ordnad rutnät av punkter är att föredra. Men, asymmetri har förmågan att fånga ögat och sinnet på ett sätt som symmetri aldrig kommer. Asymmetri är intressant i sin sjukdom. Om du är nervös, du kan alltid börja i liten skala.

Se Pennan Asymmetrisk Promo Rutnät av Bryan Robinson (@brob) på CodePen.

I detta exempel har vi en enkel pr-utrymme. Med hjälp av en asymmetrisk vertikal och horisontell layout, vi kan göra en starkare visuell matchning mellan vår-ikonen och våra knappen. Detta är inte ett stort utrymme, men det är inte rädd för att använda blanktecken för att fästa användarens öga där vi vill att det ska gå.

På tal om blanktecken…

Fear 2: Negativt Utrymme

När vi lämnat början av 2000-talet, bestämde vi att det var OK om användarna hade att rulla. Vi började införa blanktecken i våra mönster och de flesta av dessa minskade mellan rader av innehåll. Detta gjorde att vår design mycket renare, men är vertikalt mellanrum den enda giltiga alternativ?

I detta exempel, design innehåller negativa utrymme för att skapa en känsla av utforskande genom sida. Genom att inte använda traditionella innehåll rader, användarens öga ges en chans att skanna och ta saker och ting i en långsammare takt.

Se Pennan Experimentella Hemsida av Bryan Robinson (@brob) på CodePen.

Fear 3: Punk Rock?

Det finns ingen brist på design samtalen fokuserade på de tryckta layouter av 1970-talet. Det var en tid av stor stabilitet i design tooling, som accepteras kreativitet att blomma. Med det kom inspirerade och avant-garde design arbete som centrerad kring punk-rock scenen.

Så min fråga är: Kan vi vara punk rockers i webbdesign?

I detta exempel, design bryr sig inte om dina förutfattade meningar. Texten överlappar varandra är en bugg? Nope, det är en funktion. Bilderna bör inte konkurrera med varandra? Survival of the fittest!

Se Pennan Nätet Överlappar varandra och Punk Rock Meditation av Bryan Robinson (@brob) på CodePen.

Som detta exempel frågar, är detta en bra idé? Det är helt upp till debatt. Vad jag vet är detta: våra verktyg har mognat och blivit mer stabil; nu är det tid för experiment. Vi vill att webben ska se likadan ut år efter år, eller vill vi att drömma fram nya och spännande mönster?

Rädsla 4: Nya Källor till Inspiration

Inspirationskällor bör inte orsaka rädsla, men de gör ofta orsaka huvudvärk. Kom ihåg, inspiration betyder inte att en 1:1 översättning av ett begrepp.

Punk rock grafisk design

Jag nämnde tidigare den fantastiska mönster som kom ut på 70-talet och 80-talet. Här är några länkar för att fortsätta forska punk-rock design:

  • The Art of Punk Affischer av Sean O ‘ Hagan
  • Konsten i Kaos: Punk Rock Tidlösa Inflytande på Grafisk Design av Simon Martin

Vintage movie grafisk design

Att studera film i college gav mig en stor uppskattning för vintage movie grafisk design. En av mina lärare sa en gång till mig: “Du borde kunna berätta tonen och föremål för en film med titeln kort.”

Detta är särskilt sant för efter andra Världskriget filmer. Deras titel sekvenser och affischer är en guldgruva av design idéer för att ställa till en scen.

  • Grafisk Konst av Film Titel Design i Hela filmhistorien av Rebecca Brutto
  • Saul Bass på Hans Strategi för att Designa Film Titel Sekvenser av Academy of Motion Picture Arts & Sciences

Lär dig hur man skapar grafisk design nät

Grafiska formgivare har varit med nät för layout i århundraden, och det finns en massa bra litteratur om skapandet av dessa nät:

  • Video: Mark Boulton | Designa Nät | CSS Dag 2017
  • Guity Novin är En Historia av Grafisk Design: Kapitel 58, Historia Layout Design och Moderna tidningar och Tidskrifter
  • Layout Essentials: 100 Design Principer för Användning av Nät av Beth Tondreau

Rädsla 5: Fallbacks

Det är sant att Nätet har bara 74% stöd i USA (i skrivande stund).

Det borde inte hindra dig från att skjuta din design framåt. Det finns massor av strategier för att starta med stöd för alla webbläsare och sedan trycka sig in i nya mönster.

  • Med hjälp av CSS-Grid: att Stödja Webbläsare Utan Rutnät av Rachel Andrew
  • Video: Framskrider Våra Layouter av Jen Simmons
  • Faller Framåt — Nytänkande Progressiv Förstärkning, Graciös Nedbrytning och Utvecklare Moral av Bryan Robinson

Vad är nästa steg?

Det är upp till var och en av oss att driva vår bransch framåt. Tekniken är på plats för att utmana oss själva för att skapa nya och intressanta mönster. Detta behöver inte vara så spetsig och hård som några av dessa exempel. Det börjar med att inse att vi kan göra fantastiska saker … eller vi kan stagnera.

Hur kommer du driva branschen framåt?