Fem Design Frykt for å Beseire Med CSS Rutenett

0
75

CSS rutenett, sammen med en håndfull andre nye CSS-egenskaper, er revolusjonerer web design. Dessverre, bransjen ikke har omfavnet at revolusjonen ennå, og mye av det er sentrert rundt i frykt for at vi kan spore tilbake til problemer med den nåværende tilstand av CSS rutenett tutorials.

De fleste av dem faller i en av to kategorier:

  1. Re-opprette klassiske web design mønstre. Rutenettet er gode på å kopiere klassiske web design mønstre som kort nett og “den hellige gral” – sider.
  2. Å spille rundt. Rutenettet er også stor for å skape morsomme ting som Monopol plater eller video spill grensesnitt.

Disse typer opplæring er viktig for ny teknologi. De er et utgangspunkt. Nå er det på tide, som Jen Simmons sier, for å komme ut av vår hjulspor. For å gjøre det, må vi kaste av våre design frykt.

Frykt 1: Asymmetri

Vi har blitt opplært i den æra av rammeverk som symmetrisk og ryddig design er bedre. Det er sant at i mange programmer en symmetrisk design eller en ordnet rutenett av elementer er å foretrekke. Likevel, asymmetri har evnen til å fange øyet og sinnet på en måte som symmetri aldri vil. Asymmetri er interessant i sin lidelse. Hvis du er nervøs, kan du alltid starte i det små.

Se Penn Asymmetrisk Promo Rutenett av Bryan Robinson (@brob) på CodePen.

I dette eksemplet har vi en enkel salgsfremmende plass. Ved hjelp av en asymmetrisk vertikal og horisontal layout, kan vi gjøre en sterkere visuell samsvar mellom våre ikonet og vår-knappen. Dette er ikke en stor plass, men det er ikke redd for å bruke mellomrom for å trekke brukerens oppmerksomhet der vi vil den skal gå.

Sett av plass…

Fear 2: Negative Rommet

Så vi dro tidlig på 2000-tallet, og vi bestemte at det var OK hvis brukerne hadde for å bla. Vi begynte å innføre tomrom i våre design og det meste av dette falt mellom rader av innhold. Dette har gjort våre design mye renere, men er vertikalt mellomrom er det eneste gyldige alternativet?

I dette eksemplet designen har negative plass for å skape en følelse av å lete gjennom siden. Ved å ikke bruke tradisjonelle innhold rader, brukerens øyne er gitt en sjanse til å skanne og ta ting på i et langsommere tempo.

Se Penn Eksperimentelle Hjemmeside av Bryan Robinson (@brob) på CodePen.

Frykt 3: Punk Rock?

Det er ingen mangel på design snakker fokusert på print oppsett av 1970-tallet. Det var en tid med stor stabilitet i design verktøy, som tillot kreativitet til å blomstre. Med det kom inspirert og avant-garde design arbeid som sentrert rundt punk-rock scenen.

Så spørsmålet mitt er dette: Kan vi være punk rockere i web-design?

I dette eksemplet er det design bryr seg ikke om dine fordommer. Tekst overlapp er en bug? Nope, det er en funksjon. Bilder bør ikke konkurrere med hverandre? Survival of the fittest!

Se Penn Rutenett Overlapping og Punk Rock Meditasjon av Bryan Robinson (@brob) på CodePen.

Som dette eksemplet spør om, er dette en god idé? Det er helt opp til debatt. Det jeg vet er dette: våre verktøy har modnet og blitt mer stabil; nå er det tid for eksperimentering. Vi ønsker nettet til å se det samme år etter år, eller ønsker vi å drømme opp nye og spennende mønstre?

Frykt 4: Nye Kilder til Inspirasjon

Kilder til inspirasjon bør ikke føre til frykt, men de gjør det ofte føre til hodepine. Husk, inspirasjon betyr ikke en 1:1 oversettelse av et konsept.

Punk rock grafisk design

Jeg nevnte tidligere er det fantastisk design som kom ut av ’70-og ’80-tallet. Her er noen linker for å fortsette å forske punk-rock design:

  • The Art of Punk Plakater med Sean O’Hagan
  • The Art of Chaos: Punk Rock er Tidløst Innflytelse på Grafisk Design av Simon Martin

Vintage film grafisk design

Å studere film i college ga meg en stor takknemlighet for vintage film grafisk design. En av mine professorer fortalte meg en gang: “Du burde være i stand til å fortelle tone og gjenstand for en film med tittelen kort.”

Dette gjelder spesielt for post-World War II filmer. Tittelen sekvenser og plakater er en skattekiste av design ideer for å sette en scene.

  • Den Grafiske Kunst av Film Tittel Design Gjennom Kino Historie av Rebecca Brutto
  • Saul Bass på Sin Tilnærming til Design Film Tittel Sekvenser av Academy of Motion Picture Arts & Sciences

Lære å lage grafisk design nett

Grafiske designere har vært ved hjelp av rutenett for layout i århundrer, og det er mye god litteratur på etableringen av disse nettene:

  • Video: Mark Boulton | Design Nett | CSS Dag 2017
  • Guity Novin er En Historie med Grafisk Design: Kapittel 58, Historie Layout, Design og Moderne Aviser og Magasiner
  • Layout Essentials: 100 Design Prinsipper for Bruk av Nett av Beth Tondreau

Frykt 5: Fallbacks

Det er sant at Rutenettet har bare 74% støtte i USA (på den tiden dette ble skrevet).

Det bør ikke stoppe deg fra å skyve dine design fremover. Det er mange strategier for å starte med støtte for alle nettlesere og deretter skyve frem til nye mønstre.

  • Ved hjelp av CSS Nettet: Støtte for Nettlesere Uten Rutenett av Rachel Andrew
  • Video: Fremgang i Vårt Oppsett av Jen Simmons
  • Å falle Fremover — Gjennomtenkning Progressive Enhancement, Grasiøs Fornedrelse og Utvikler Moral av Bryan Robinson

Hva er det neste?

Det faller til hver enkelt av oss å presse våre industrien fremover. Teknologien er på plass for å utfordre oss selv til å skape nye og interessante motiver. Dette trenger ikke å være så spisse og intens som noen av disse eksemplene. Den starter ved innser vi kan gjøre fantastiske ting … eller vi kan stagnere.

Hvordan vil du skyver industrien fremover?