Share
Ren. Et begrep som ofte brukes til å beskrive et nettsteddesign, men hva betyr det? Hvordan definerer du det? Jeg er ganske sikker på at det ikke betyr at hvitevakten er hvitere enn hvit eller at alt støvet har blitt børstet under fotfoten ... La oss ta en nærmere titt.
Designere overalt gush med beundring ved å se et webdesign og utrope "det er vakkert, det er så rent!". Det finnes et utall av antall webdesign run-ups dedikert til "ren" design og det er et begrep kastet ganske mye i webdesign samfunnet. Det kan være enkelt å se et godt eksempel på ren design, da den fremmer en viss følelse av profesjonalitet og kvalitet. Men det som ikke ofte diskuteres, er de underliggende prinsippene og faktorene som kombinerer for å skape dette "rene" utseende, og det er nettopp hva denne artikkelen har til hensikt å gjøre.
Før vi begynner, la oss være klare på en ting - ren design er ikke minimal design.
Noen mennesker kan forvirre de to, og det kan være lett å gjøre det. Mens det er noen likheter og overlapper av designprinsipper mellom de to, tror jeg at det er viktige forskjeller.
Minimalistisk design har en tendens til å fokusere på å fjerne overflødige og uønskede elementer for å tillate innholdet og kjernebudskapet til nettstedet å ta midtpunktet. Hvert element skal ha et forsvarlig formål. Minimalistisk design av natur bør være svært brukbar og funksjonell, da det ikke bør være distraksjon for å konkurrere med informasjonen som nettstedet prøver å kommunisere.
I stedet for å spørre hva som kan fjernes, bør du spørre hvordan det kan være raffinert.
Ja, rent design burde være brukbart, og ja, formålet med nettstedet skal være tydelig. Det er imidlertid et godtgjørelse for rent estetiske elementer og kreativ flair når du designer et "rent" nettsted. I stedet for å spørre om hva som kan fjernes (i tilfelle minimalistisk design), bør du spørre hvordan det kan være raffinert.
Hvis det var ett ord jeg ville bruke til å definere "rent" design, er det raffinement. Hvert enkelt element skal se ut som det tilhører og skal være til nytte og utfylle designen som helhet. Den overordnede designen må balanseres slik at informasjonen kan strømme og være lett å konsumere.
Før du gjør det til det endelige designet, må hvert element undersøkes. Designeren bør ta et øyeblikk å vurdere formålet med hvert element og avgjøre om det er det beste det kan være og hvis det kan gjøres noe tydeligere.
O.K, så nå at vi har en generell forståelse for "rent" design, la oss ta en titt på de ulike bidragende faktorene til denne stilen.
En oppmerksomhet på detaljer er viktig for å produsere en ren nettside design. Virkelig flott, rent design er avhengig av piksel-perfekt utførelse av mange subtile designelementer. Tilsynelatende små detaljer som grenser, høydepunkter, skygger, teksturer og mange andre må alle nøye vurderes.
For eksempel, la oss ta en nærmere titt på hovedfunksjonen av Studeo Wordpress-temaet, designet av Orman Clark. Orman er kjent for (og svært vellykket på) å produsere rene, brukervennlige Wordpress-temaer.
Der noen temautformninger enkelt kan implementere en stor, dristig bildeskjerm, er Studeo's funksjonsområde et paradis for delikate designdetaljer. Legg merke til den subtile tekstur som er lagt på bildet, det ene pikselpunktet og den nesten ufattelige lysegrå grensen nederst. Alle disse detaljene kan virke ubetydelige og kan til og med gå ubemerket av noen, men i fellesskap skaper de følelsen av kvalitet og raffinement.
Presisjon er nøkkelen når du velger å designe på en slik måte. En ting som kan ødelegge en ren design er den fryktede halvpiksel. Halvpiksler kan forekomme i Photoshop når linjene og kantene på figurene ikke justeres nøyaktig på piksel. Når dette skjer, blir kantene på en form sløret. Du kan se på bildet nedenfor, firkantene til høyre ser alltid så litt sløret ut.
En måte du kan forhindre dette når du designer i Photoshop, er å velge alternativet "Snap to Pixels". Når dette alternativet er valgt, vil alle dine formkanter være vakkert skarpe og rene.
Det sier seg selv at en ren design ikke kan virke rotete på noen måte. Mange elementer trangt sammen vil imidlertid gi utseendet til et rotete og rotete nettsted. Ikke hva vi vil. Dette er hvor avstand kommer inn.
Whitespace, margins, padding og line-height har alle en avgjørende rolle å spille i å trekke av en ren nettside design. Å gi elementene til et nettsted et passende antall avstand sikrer at de ser ut til å tilhøre og passer inn i den overordnede utformingen. En tilstrekkelig mengde avstand genererer også en luftig og elegant følelse til et nettsted.
I tillegg til å sørge for at elementene dine er godt fordelt, er det også nødvendig at du er i samsvar med verdiene du bestemmer deg for. Prøv å gjenta margin og padding verdier når du kan og hvor det er fornuftig å gjøre det. Gittersystemer som 960.gs er utrolig nyttige verktøy når du designer nettsteder på denne måten (mer om dette i et øyeblikk).
For å se full effekt som tilstrekkelig avstand har på et webdesign, bør du vurdere følgende to bilder. Det første bildet er en forhåndsvisning til et blogginnlegg med minimal og inkonsekvent mengde avstand mellom elementene.
Nå er det samme blogginnlegg med generøse mengder avstand.
Forskjellen det kan gjøre er ganske betydelig. Det andre designet ser mye mer balansert og rent nå, da alle elementene har mye mer å puste og plass til å strekke seg ut.
Som med de fleste ting i livet, er det imidlertid mulig å ha for mye av en god ting. For mye avstand kan få elementer til å gå tapt og frakoblet hverandre. Som et resultat kan sammenhengen og strømmen av et nettsted brytes.
Et av de beste verktøyene du kan bruke til å hjelpe deg med å opprette en "ren" nettside design er et rutenett system. Vi har allerede rørt på hvordan de kan være ekstremt nyttige når det gjelder mellomrom, men de er også uvurderlige for å sikre at justeringen din er flekk på.
På samme måte som avstand, kan justering gjøre en betydelig forskjell for utseendet på et nettsted. Korrekt og kontinuerlig justering gjør det mulig for rene linjer å løpe i hele lengden og bredden av nettstedet ditt. Glatte og ubrukte linjer er visuelt tiltalende og kan lede øyet lenger ned på siden.
Øyet er svært følsomt for endringer i justering, og det er i stand til å oppdage små endringer og inkonsekvenser. Det er derfor viktig at du ikke bare er pixel-perfekt når du lager designmock-ups, men også at denne presisjonen ikke går seg vill i utviklingsstadiet som følger.
Ideelt sett bør store teksttekster være (i de fleste tilfeller) venstrejustert. Venstrejustert tekst produserer en solid linje og skaper lett skiller informasjonskolonner. Sentralt justert tekst på den annen side skaper en ujevn kant på hver side og kan være vanskelig å lese i store kolonner. Lagre sentraljusteringen for korte tekstlinjer.
Som et utmerket eksempel på justering, vil du kanskje sjekke ut Design uten grenser. Designeren har ikke bare gjort eksepsjonell bruk av tilpasning, de har gjort det blindingly åpenbart av deres intensjoner ved å simulere Photoshop guide linjer som kjører gjennom nettstedet.
Med ankomsten av @ font-face og mange typer tjenester, har typografi i webdesign aldri vært større og vurderer at det store flertallet av informasjon på nettet er tekst, det er lite lurer på hvorfor. Vi kommer ikke til å dykke inn i typografienes intricacies her, da det er mange gode ressurser, men vi vil se på et par måter det kan spille en viktig rolle å spille.
For det første er bruk av typografi en effektiv måte å etablere et meget sterkt visuelt hierarki på. Hvis du noen gang har studert grunnlaget for webdesign, skjønner du at hierarkiet er litt av en stor avtale. Bruke typografi for å etablere ditt hierarki er en veldig elegant og ren metode for å gjøre det. Bare ved å endre størrelsen eller vekten på teksten, kan du veilede brukeren rundt nettstedet og kommunisere betydningen av ulike elementer. Du trenger ikke glatte piler eller høye merker for å understreke hva du vil at brukeren skal se.
For det andre, akkurat som bestemte farger fungerer harmonisk og utfyller hverandre, er det samme for skrifttyper. Det er mange forslag og retningslinjer for sammenkobling og arbeid med flere skrifter, men for en ren design er det best å holde det enkelt.
Å velge to skrifttyper er generelt et trygt alternativ, da for mange forskjellige skrifttyper kan komplisere et design. Å velge for et dristigere eller mer dekorativt skrifttype for overskriftene dine og en tryggere, mer lesbar type for kroppsteksten, kan sjelden gå galt. Kombinere en serif og en sans-serif-skrift kan fungere godt og praktiseres ofte.
Det er mange artikler og veiledninger som diskuterer fargeteori og hvordan det gjelder webdesign. Det er også mange nyttige ressurser for å hjelpe deg med å velge en passende fargepalett. Når det gjelder ren design, er det noen grunnleggende retningslinjer.
De aller fleste rene nettsteder velger en lys, nøytral og begrenset fargepalett av flere grunner.
Hvite, grå og lyse farger er enkle og diskret, slik at innholdet kan motta brukerens fokus. Dette er ideelt ut fra brukbarhetssynspunkt, og for de som ønsker at deres arbeid skal bli sentralt, for eksempel designere og fotografer. Små stryker av farge brukes ofte til å fremheve visse elementer som logoer, navigasjon og overskrifter for å bidra til å etablere et visuelt hierarki.
Fet farger, spesielt hvis mange blir brukt, kan komplisere en ren design og distrahere brukerens oppmerksomhet. Farge fremkaller visse følelser og reaksjoner, og for mange farger kan fremkalle flere og motstridende følelser. Det siste vi ønsker er at en bruker skal føle seg forvirret når han ser på nettstedet vårt.
Dette er ikke å si at en ren design ikke kan være fargerik, som det alltid finnes unntak fra regelen, og det finnes mange eksempler på rent design som benytter farge effektivt. Det er også generelle retningslinjer hvis du vil ha eller trenger å bruke farge i rene design.
Velg enkle, solide farger i stedet for gradienter i ditt design. Faste firkantblokker skaper klare, ubrukte linjer og hjelper å skille forskjellige deler av et design. Gradienter, mønstre og teksturer kan være distraherende og kan redusere tekstles lesbarhet. Hvis du bestemmer deg for å bruke gradienter og teksturer, behold den diskret og subtil.
Å vite hva som går inn i å lage en ren design og hvordan å implementere denne designstilen, kan være uvurderlig for en webdesigner. En ren design kommuniserer en følelse av raffinement og raffinement, akkurat det mange klienter og vi selv ønsker å være tilknyttet. Forhåpentligvis kan du ta noe bort fra denne artikkelen og bruke noen av disse metodene i en av dine fremtidige prosjekter.
Er det noen andre funksjoner i ren design du har lagt merke til? Eller vet du om en spesielt god demonstrasjon av ren design? Gi oss beskjed i kommentarene.
Accentsconagua