Webdesign kan være villedende vanskelig, da det innebærer å oppnå et design som er både brukbart og behagelig, leverer informasjon og bygger merkevare, er teknisk lyd og visuelt sammenhengende.
Legg til det faktum at mange webdesignere (selv inkludert) er selvlærte, at webdesign er fremdeles roman nok til å være bare et sidefag i mange designinstitusjoner, og at mediet endres så ofte som den underliggende teknologien gjør.
Så i dag har jeg satt sammen mine 9 prinsipper for god webdesign. Disse er bare mine meninger, og jeg har forsøkt å knytte meg til mer lesing på fag, slik at du ikke bare hører stemmen min. Åpenbart har jeg mange ansvarsfraskrivelser: Regler er laget for å bli ødelagt, forskjellige typer design fungerer annerledes, og jeg lever ikke alltid til mitt eget råd. Så vær så snill å lese disse som de er ment - bare noen observasjoner jeg deler ...
Capture the Valley bruker fargestenger for å lede øyet gjennom deler fra topp til bunn ...
1. Precedence (Guiding the Eye)
God webdesign, kanskje enda mer enn andre typer design, handler om informasjon. En av de største verktøyene i ditt arsenal å gjøre dette er presedens. Når du navigerer med en god design, skal brukeren ledes rundt skjermen av designeren. Jeg kaller denne forrang, og det handler om hvor mye visuell vekt ulike deler av designet har.
Et enkelt eksempel på forrang er at i de fleste områder er det første du ser logoen. Dette er ofte fordi det er stort og satt til det som har blitt vist i studier for å være det første stedet folk ser (øverst til venstre). Han er en god ting siden du sannsynligvis vil at en bruker umiddelbart skal vite hvilket nettsted de ser på.
Men forrang bør gå mye lenger. Du bør lede brukerens øyne gjennom en rekke trinn. For eksempel vil du kanskje at brukeren skal gå fra logo / merke til en primærposisjonering ved siden av et slagaktig bilde (for å gi personligheten til nettstedet), deretter til hovedtekstteksten, med navigasjon og et sidebar som tar en sekundær stilling i sekvensen.
Hva brukeren skal se på, er opp til deg, webdesigneren, for å finne ut.
For å oppnå forrang har du mange verktøy til din disposisjon:
Stilling - Hvor noe er på en side, påvirker tydelig i hvilken rekkefølge brukeren ser det.
Farge - Bruk av dristige og subtile farger er en enkel måte å fortelle brukeren hvor du skal se.
Kontrast - Å være forskjellig gjør at det skiller seg ut, mens de er de samme, gjør dem sekundære.
Størrelse - Big har forrang over lite (med mindre alt er stort, i så fall kan lite skille seg ut takket være Kontrast)
Designelementer - hvis det er en gigantisk pil som peker på noe, gjett hvor brukeren vil se ut?
Videre lesning:
Du kan lese mer om mine tanker om Precedence i en gammel Psdtuts + post som heter Elements of Great Web Design - det polske. Joshua David McClurg-Genevese diskuterer prinsipper for god webdesign og design på Digital-Web. Joshua har også det lengste navnet noensinne :-)
Marius har et veldig rent, veldig enkelt sted med god plass
2. Spacing
Da jeg først begynte å designe, ønsket jeg å fylle alle ledige plasser med ting. Tomt rom virket søppeløst. Faktisk er motsatt sant.
Spacing gjør ting klarere. I webdesign er det tre aspekter av plass som du bør vurdere:
Linjeavstand Når du legger ut tekst, påvirker mellomrommet mellom linjene direkte hvordan lesbar det vises. For lite plass gjør det enkelt for øynene å spole over fra en linje til den neste, for mye plass betyr at når du er ferdig med en linje med tekst og går til neste, kan øyet ditt gå seg vill. Så du må finne et godt medium. Du kan styre linjeavstanden i CSS med "linjehøyde" -velgeren. Vanligvis finner jeg standardverdien er vanligvis for lite avstand. Linjeavstand er teknisk kalt ledende (uttalt ledding), som stammer fra prosessen som skrivere pleide å bruke for å skille tekstlinjer i løpet av de eldre dagene - ved å plassere linjer av bly mellom linjene.
padding Vanligvis bør tekst aldri røre andre elementer. Bilder, for eksempel, bør ikke røre tekst, heller ikke grensene eller tabellene. Padding er mellomrom mellom elementer og tekst. Den enkle regelen her er at du skal alltid ha plass der. Det er unntak selvfølgelig, spesielt hvis teksten er en slags overskrift / grafikk eller navnet ditt er David Carson :-) Men som regel legger mellomrom mellom tekst og resten av verden det uendelig mer lesbart og behagelig.
White Space Først av alt trenger ikke hvitt rom å være hvitt. Begrepet henviser bare til tomt plass på en side (eller negativ plass som det noen ganger kalles). Hvit plass brukes til å gi balanse, proporsjon og kontrast til en side. Mye av det hvite rommet har en tendens til å få ting til å virke mer elegant og eksklusivt, for eksempel hvis du går til et dyrt arkitektsted, vil du nesten alltid se mye plass. Hvis du vil lære å bruke whitespace effektivt, gå gjennom et blad og se på hvordan annonsene blir lagt ut. Annonser for store merker av klokker og biler og lignende har en tendens til å ha mye tomt rom brukt som et element av design.
Videre lesning:
På WebDesignFromScratch er det en flott artikkel som heter Web 2.0 How-to design guide, som omhandler Simplicity - et konsept som gjør mye bruk av avstand. Det er også mange andre nyttige ting der!
Noodlebox gjør en god jobb med å bruke på / av-stater i navigasjonen for å holde brukeren orientert.
3. Navigasjon
En av de mest frustrerende opplevelsene du kan ha på et nettsted, er ikke i stand til å finne ut hvor du skal hen eller hvor du er. Jeg vil gjerne tenke at for de fleste webdesignere er navigasjon et konsept vi har klart å mestre, men jeg finner fremdeles noen ganske dårlige eksempler der ute. Det er to aspekter ved navigering å huske på:
Navigasjon - Hvor kan du gå? Det er noen få regler for å huske her. Knapper for å reise rundt et nettsted burde være enkle å finne - mot toppen av siden og lett å identifisere. De skal se ut som navigasjonsknapper og være godt beskrevet. Teksten på en knapp skal være ganske tydelig om hvor den tar deg. Bortsett fra sunn fornuft, er det også viktig å gjøre navigasjonen brukbar. Hvis du for eksempel har en undermeny, kan det være viktig å sikre at en person kommer til undermenyelementene uten å miste overføringen. Tilsvarende endring av farge eller bilde på rollover er utmerket tilbakemelding for en bruker.
Orientering - Hvor er du nå? Det er mange måter du kan orientere en bruker på, så det er ingen unnskyldning for ikke. På små sider kan det bare være et spørsmål om en stor overskrift eller en "ned" -versjon av den aktuelle knappen i menyen. På et større område kan du gjøre bruk av brødsmuler, underoverskrifter og et nettstedskart for det virkelig tapt.
Videre lesning:
SmashingMagazine har et utvalg av CSS-baserte navigasjonsstiler som er hyggelige å gå gjennom, og # 3 er en av mine! En liste fra hverandre har også en god artikkel om orientering kalt Hvor er jeg?
4. Design å bygge
Livet har blitt mye lettere siden webdesignere overgikk til CSS-layout, men selv nå er det fortsatt viktig å tenke på hvordan du skal bygge et nettsted når du fortsatt er i Photoshop. Vurder ting som:
Kan det faktisk gjøres? Du har kanskje valgt en fantastisk skrifttype for kroppen din, men er det faktisk en standard HTML-skrift? Du kan ha et design som ser vakkert ut, men er 1100px bredt og vil resultere i en horisontal scroller for de fleste brukere. Det er viktig å vite hva som kan og ikke kan gjøres, det er derfor jeg tror at alle webdesignere bør også bygge nettsteder, i hvert fall noen ganger.
Hva skjer når en skjerm er resizing? Trenger du å gjenta bakgrunner? Hvordan skal de jobbe? Er designet sentrert eller venstrejustert?
Gjør du noe som er teknisk vanskelig? Selv med CSS-posisjonering, er noen ting som vertikal justering fortsatt litt smertefull og noen ganger best unngås.
Kunne små endringer i designet i stor grad forenkle hvordan du bygger den? Noen ganger kan du flytte et objekt rundt i et design, og det kan gjøre en stor forskjell på hvordan du må kode din CSS senere. Spesielt når elementene i et design krysser over hverandre, legger det til litt kompleksitet i bygningen. Så hvis designen din har, si tre elementer og hvert element er helt skilt fra hverandre, ville det være veldig enkelt å bygge. På den annen side, hvis alle tre overlapper hverandre, kan det fortsatt være lett, men vil nok være litt mer komplisert. Du bør finne en balanse mellom det som ser bra ut og små endringer som kan forenkle byggingen din.
For store steder, spesielt, kan du forenkle ting? Det var en tid da jeg pleide å lage bildeknapper for nettstedene mine. Så hvis det var en nedlastningsknapp, for eksempel, ville jeg lage et lite nedlastingsbilde. I det siste året eller så, har jeg byttet til å bruke CSS for å lage mine knapper og har aldri sett tilbake. Visst, det betyr at knappene mine ikke alltid har den fleksibiliteten jeg måtte ønske seg, men besparelsene i byggetiden fra å ikke måtte lage dusinvis av små knappbilder er store.
Hvis noen vet godt, er det iLoveTypography!
5. Typografi
Tekst er det vanligste elementet i design, så det er ikke overraskende at mye tanke har gått inn i den. Det er viktig å vurdere ting som:
Fontvalg - Ulike typer skrifter sier forskjellige ting om et design. Noen ser moderne, noen ser retro ut. Pass på at du bruker riktig verktøy for jobben.
Skriftstørrelser -For mange år siden var det trendy å ha veldig liten tekst. Heldigvis har folk i disse dager begynt å innse at teksten er ment å bli lest, ikke bare sett på. Pass på at tekststørrelsene er konsistente, store nok til å bli lest og proporsjonert slik at overskrifter og underoverskrifter skiller seg ut på riktig måte.
Spacing - Som diskutert ovenfor er avstand mellom linjer og vekk fra andre gjenstander viktig å vurdere. Du bør også tenke på mellomrom mellom bokstaver, men på nettet er dette mindre viktig, da du ikke har så mye kontroll.
Linjelengde - Det er ingen hard og rask regel, men generelt bør tekstlinjene dine ikke være for lange. Jo lengre de er, jo vanskeligere de skal lese. Små kolonner med tekst fungerer mye bedre (tenk på hvordan en avis legger ut tekst).
Farge - En av mine verste vaner gjør lavteksttekst. Det ser bra ut, men leser ikke så bra, dessverre. Likevel synes jeg å gjøre det med alle webdesign jeg noensinne har gjort, tsk tsk tsk.
paragraphing - Før jeg begynte å designe, elsket jeg å rettferdiggjøre teksten i alt. Det laget for fine kanter på hver side av mine avsnitt. Dessverre har en rettferdig tekst en tendens til å skape rare gap mellom ord hvor de har blitt automatisk avstand. Dette er ikke fint for øyet ditt når du leser, så hold deg til venstrejustert, med mindre du har en magisk teksttekst som skjer med perfekt plass.
Videre lesning:
Nick La på WebDesignerWall har en flott artikkel om online typografi kalt typografisk kontrast og flyt .
Happycog vet brukervennlighet innvendig ute, og deres eget nettsted er enkelt og enkelt å bruke.
6. Brukbarhet
Webdesign handler ikke bare om flotte bilder. Med så mye informasjon og samhandling som skal utføres på et nettsted, er det viktig at du, designeren, sørger for alt. Det betyr at du kan bruke webdesignet ditt.
Vi har allerede diskutert noen aspekter av brukervennlighet - navigering, forrang og tekst. Her er tre viktige:
Overholder standarder Det er visse ting folk forventer, og ikke å gi dem årsaker til forvirring. For eksempel, hvis tekst har en understreke, forventer du at det skal være en lenke. Å gjøre ellers er ikke god brukervennlighet. Sikker på at du kan bryte noen konvensjoner, men det meste av webområdet ditt bør gjøre akkurat hva folk forventer det å gjøre!
Tenk på hva brukerne egentlig vil gjøre Prototyping er et vanlig verktøy som brukes i design for å faktisk "prøve" et design. Dette gjøres fordi ofte når du faktisk bruker et design, legger du merke til små ting som gjør stor forskjell. ALA hadde en artikkel en stund tilbake kalt aldri bruk en advarsel når du mener å angre, noe som er et utmerket eksempel på et lite grensesnitt design beslutning som kan gjøre livet suge for en bruker.
Tenk på brukeroppgaver Når en bruker kommer til nettstedet ditt, hva prøver de faktisk å gjøre? Sett opp de forskjellige oppgavene folk kan gjøre på et nettsted, hvordan de skal oppnå dem, og hvor enkelt du vil gjøre det for dem. Dette kan bety at du har virkelig vanlige oppgaver på hjemmesiden din (for eksempel "start shopping", "lære om hva vi gjør" osv.), Eller det kan bety at det er noe som å ha en søkeboks som alltid er lett tilgjengelig. På slutten av dagen er webdesign et verktøy for folk å bruke, og folk liker ikke å bruke irriterende verktøy!
Videre lesning:
AListApart har mange artikler om brukervennlighet på nettet.
Elektrisk masse klarer å se røff, men hvis du ser nøye innse du at det er et fast rutenett og ting som faktisk er i orden.
7. Justering
Å holde ting lined up er like viktig i webdesign som det er i trykkdesign. Det er ikke å si det alt bør være i en rett linje, men heller at du bør gå gjennom og prøve å holde ting konsekvent plassert på en side. Aligning gjør designet mer bestilt og fordøyelig, så vel som å gjøre det virke mer polert.
Du kan også ønske å basere designene dine på et bestemt nett. Jeg må innrømme at jeg ikke gjør dette bevisst - selv om et nettsted som Psdtuts + selvsagt har en veldig fast rutenettstruktur. I år har jeg sett noen veldig gode artikler om rutenettdesign, inkludert SmashingMagazines design med gridbasert tilnærming og en liste som er å tenke utenfor rutenettet. Faktisk, hvis du er interessert i grid design, bør du definitivt besøke det passende navnet DesignByGrid.com hjem til alle ting griddy.
ExpressionEngine-nettstedet er klarhetens sjel. Alt er skarpt og rent.
8. Klarhet (Skarphet)
Å holde designen skarpe og skarpe er super viktig i webdesign. Og når det kommer til klarhet, handler det om pikslene.
I ditt CSS blir alt piksel perfekt, så det er ingenting å bekymre deg for, men i Photoshop er det ikke slik. For å oppnå et skarpt design må du:
Hold formekanter snappet til piksler. Dette kan innebære at du manuelt rydder opp figurer, linjer og bokser hvis du lager dem i Photoshop.
Sørg for at noen tekst er opprettet ved hjelp av den aktuelle anti-aliasing-innstillingen. Jeg bruker "Sharp" mye.
Sikre at kontrast er høy, slik at grensene er klart definert.
Overbelastende grenser bare litt for å overdrive kontrasten.
Videre lesning:
Jeg skrev litt mer om klarhet i Elements of Great Web Design - det polske. Jeg har lagt merke til at designere som overfører til webdesign, ikke tenker i piksler, men det er virkelig viktig.
Veerle gjør en god jobb med å holde selv de minste detaljene konsistente over hele linja.
9. Konsistens
Konsistens betyr at alt skal samsvare. Overskriftsstørrelser, skriftvalg, fargestoffer, knappestiler, mellomrom, designelementer, illustrasjonsstiler, bildevalg etc. Alt skal være tema for å gjøre utformingen sammenhengende mellom sider og på samme side.
Å holde designen din konsistent handler om å være profesjonell. Uoverensstemmelser i et design er som stavefeil i et essay. De reduserer bare oppfatningen av kvalitet. Uansett hvilket design du ser ut, holder det konsekvent, vil det alltid ta det opp. Selv om det er en dårlig design, gjør det i det minste en konsistent, dårlig design.
Den enkleste måten å opprettholde konsistens på er å ta tidlige beslutninger og holde seg til dem. Med et veldig stort nettsted kan det imidlertid endres i designprosessen. Da jeg for eksempel laget FlashDen, tok prosessen flere måneder, og til slutt hadde noen av mine ideer for knapper og bilder endret seg, så jeg måtte gå tilbake og revidere tidligere sider for å matche senere nøyaktig.
Å ha et godt sett med CSS stilark kan også gå langt for å lage en konsekvent design. Prøv å definere kjernekoder som
og
på en slik måte at standardverdiene dine samsvarer ordentlig og unngå å huske bestemte klassenavn hele tiden.
Videre lesning:
ThinkVitamin-artikkelen Hvordan CRAP er ditt design? diskuterer gjentagelse går ned på siden og hvor viktig det er. Artikkelen er skrevet av Mike Rundle som designer 9rules, så du vet at det er verdt å lese!
Få min bok!
Likte denne artikkelen? Jeg har nettopp fullført en bok om freelancing som du kan kjøpe online som en eBook. Gå over for å finne ut mer om hvordan å være en rockstar freelancer.
Share
Accentsconagua