9 Pro tips for webdesign Alle må Read

1. Forrang (The Art of Styre Eye)
god web design, kanskje enda mer enn annen type design, handler om informasjon. En av de viktigste verktøyene i arsenal å gjøre dette på er forrang. Når du navigerer en god design, bør brukeren bli ført rundt på skjermen av designeren. Jeg kaller dette prioriteres, og det &'; s. Om hvor mye visuell vekt ulike deler av design 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 &'; s store og innstilt på hva som har vært vist i studier for å være det første stedet folk ser (øverst til venstre). Dette er en god ting siden du sannsynligvis vil en bruker å umiddelbart vite hva nettstedet det er de ser på.
Men forrang bør gå mye lenger. Du bør lede brukeren &'; s øyne gjennom en sekvens av trinn. For eksempel vil du kanskje din bruker å gå fra logo /merkevare til en primær posisjonering uttalelse, ved siden av en punchy bilde (for å gi området personlighet), deretter til hovedteksten, med navigasjon og en sidebar ta en underordnet posisjon i .. sekvensen
Hva bruker bør se på er opp til deg, Webdesigner, for å finne ut
For å oppnå det jeg kaller forrang du har mange verktøy til disposisjon:
1. Posisjon – hvor noe er på en side klart påvirker i hvilken rekkefølge brukeren ser det.
2. Farge – ved hjelp av dristige og fine farger er en enkel måte å fortelle brukeren hvor du skal lete.
tre. Kontrast – å være annerledes gjør ting skiller seg ut, samtidig som det samme gjør dem sekundær.
4. Størrelse – stor forrang for lite (med mindre alt er stort, og i så fall lite kanskje skiller seg ut takket være Kontrast)
5. Design Elements – hvis det er en gigantisk pil som peker på noe, gjett hvor brukeren vil se?
to. Avstand
Da jeg først begynte å designe, ønsket jeg å fylle alle tilgjengelige plassen opp med ting. Jeg trodde tomrom virket bortkastet. Men fant jeg det motsatte er tilfelle.
Spacing gjør ting klarere. I web-design er det tre aspekter av plass som du bør vurdere:
Linjeavstand: Når du legger teksten ut, avstanden mellom linjene påvirker direkte hvordan lesbar den vises. For lite plass gjør det enkelt for øyet å smitte over fra en linje til den neste; for mye plass betyr at når du er ferdig med en tekstlinje og gå til neste øyet ditt kan gå tapt. Så du må finne en gyllen middelvei mellom de to. Du kan kontrollere linjeavstand i CSS med " line-height &'; velgeren. Vanligvis finner jeg standardverdien er vanligvis for lite avstand for min smak. Linjeavstand er teknisk kalles ledende, som stammer fra den prosessen som skrivere pleide å bruke for å skille linjer med tekst i gamle dager – ved å plassere barer av bly mellom linjene
Padding:. Generelt sett teksten skal aldri berøre andre elementer. Bilder, for eksempel, bør ikke være rørende tekst, verken bør grenser eller tabeller.
Padding er mellomrommet mellom elementer og tekst. Den enkle regelen her er at du alltid bør ha plass der. Det finnes unntak selvfølgelig, særlig hvis teksten er en slags overskrift /grapic. Men som en generell regel, å sette avstanden mellom teksten og resten av verden gjør det uendelig mer lesbar og trivelig
White Space. Først av alt, white space doesn &'; t trenger å være hvit. Begrepet refererer bare til tom plass på en side (eller negativ plass som det &'; s noen ganger kalt). Hvit plassen er brukt til å gi balanse, proporsjoner og kontrast til en side. En masse tomrom tendens til å gjøre ting ser mer elegant og eksklusivt, så for eksempel hvis du går til en dyr arkitekt nettsted, du &'; ll nesten alltid se mye plass. Hvis du ønsker å lære å bruke mellomrom effektivt, gå gjennom et magasin og se på hvordan reklame er lagt ut. Annonser for store merker av klokker og biler, har de en tendens til å ha mye tomrom brukes som et element av design.
Tre. Navigation
En av de mest frustrerende opplevelsene du kan ha på noen nettsider er å være ute av stand til å finne ut hvor du skal gå eller hvor du er. I &'; d liker å tro at for de fleste web-designere, er navigasjon et konsept vi &'; ve greid å mestre, men det er alltid en som beviser meg feil. Det er to sider av navigasjons å huske på:
Navigasjon:? Hvor kan du gå
Det er noen commonsense regler å huske her. Knapper for å reise rundt et område skal være lett å finne – mot toppen av siden og lett å identifisere. De bør se ut navigasjonsknapper og være godt beskrevet. Teksten på en knapp bør være ganske klart om hvor det &'; s tar deg. Bortsett fra sunn fornuft, det &'; s også viktig å gjøre navigeringen brukbare. For eksempel, hvis du har en roll undermeny, noe som sikrer en person kan komme til elementene på undermenyen uten å miste roll er viktig. Tilsvar endre farge eller bilde på roll er gode tilbakemeldinger for en bruker: Orientering:. Hvor er du nå
Det er mange måter du kan orientere en bruker så det er ingen unnskyldning for ikke å?. I små områder, kan det være bare et spørsmål om en stor overskrift eller en " ned &'; versjon av den riktige knappen i menyen. I et større område, kan du benytte deg av brød smule løyper, sub-overskrifter og et områdekart for de virkelig tapt.
4. Design bygge
Livet har fått en mye enklere siden Webdesignere overført til CSS layouts, men selv nå det &'; s likevel viktig å tenke på hvordan du skal bygge en nettside når du &'; re fortsatt i Photoshop. Vurdere ting som:
Kan det faktisk gjøres
Du kan ha plukket en fantastisk font for kroppen din kopi, men det er faktisk en standard HTML font? Du har kanskje en design som ser vakker, men er 1100px bred og vil resultere i en horisontal scrollng for de fleste Internett-brukere. Det &'; s viktig å vite hva som kan og &'; t gjøres, og det er derfor jeg tror alle webdesignere bør også bygge nettsteder, i hvert fall noen ganger
Hva skjer når en skjerm er, endres størrelsen
Har du behov for å gjenta.? bakgrunn? Hvordan vil de arbeide? Er design sentrert eller venstrejustert?
Er du gjør noe som er teknisk vanskelig?
Selv med CSS posisjonering, noen ting som vertikal justering er fortsatt litt vondt og noen ganger best unngås helt.
Kunne liten endringer i design forenkler hvordan du bygger det?
Noen ganger flytter et objekt rundt i en design kan gjøre en stor forskjell i hvordan du må kode CSS senere. Spesielt når elementer av et design kryss over hverandre, legger det litt kompleksitet å bygge. Så hvis design har, sier fire elementer og hvert element er helt atskilt fra hverandre, ville det være veldig lett å bygge. På den annen side hvis alle fire overlapper hverandre, kan det likevel være lett, men det vil sannsynligvis være litt mer komplisert. Du bør finne en balanse mellom hva som ser bra ut og små endringer som kan forenkle byggingen din.
For store områder, spesielt, kan du forenkle ting?
Det var en tid da jeg pleide å lage bildeknapper for mine nettsteder. Så hvis det var en nedlastingsknappen, for eksempel, ville jeg lage en liten nedlasting image. I det siste året eller så, I &'; ve byttet til å bruke CSS for å lage mine knapper og har aldri sett seg tilbake. Jada, det betyr min knapper don &'; t alltid ha den fleksibiliteten jeg kan ønske seg, men besparelsene i byggetiden fra ikke å måtte gjøre dusinvis av små knappbilder er enorm
5.. Typografi
Innholdet er den vanligste element av design, så det &'; s ikke overraskende at mye arbeid har gått inn i den. Det &'; s viktig å vurdere ting som:
Font Choices: Ulike typer skrifter sier forskjellige ting om en design. Noen ser moderne, noen ser retro. Pass på at du bruker riktig verktøy for jobben
Skriftstørrelser:. For mange år siden var det trendy å ha veldig liten tekst. Heldigvis, i disse dager folk har begynt å innse at teksten er ment å bli lest, ikke bare så på. Sørg for at tekststørrelser er konsistente, store nok til å bli lest, og proporsjonert slik at overskrifter og sub-overskrifter skiller seg ut Spacing
riktig. Som omtalt ovenfor, er avstanden mellom linjene og bort fra andre gjenstander viktig å vurdere. Du bør også tenke på avstanden mellom bokstavene, men på nettet er dette av mindre betydning, som du don &'; t har så mye kontroll
linjelengde: Det er ingen fast regel, men generelt dine linjer med tekst. burde &'; t være for lang. Jo lengre de er, jo vanskeligere er de å lese. Små tekstkolonner arbeidet mye bedre (tenk på hvordan en avis legger ut tekst)
Farge:. En av mine verste vaner gjør lav kontrast tekst. Det ser bra ut, men doesn &'; t lese så godt, dessverre
avsnittsinndeling: Før jeg begynte å designe, jeg elsket å rettferdiggjøre teksten i alt.. Det er gjort for fine kanter på hver side av mine avsnitt. Dessverre, har en tendens justert tekst for å lage rare mellomrom mellom ord der de har vært automatisk linjeavstand. Dette isn &'; t fint for øyet når du leser, så hold deg til venstrejustert med mindre du tilfeldigvis har en magisk kropp av tekst som skjer med plass aldeles
6.. Usability
webdesign isn &'; t bare om pene bilder. Med så mye informasjon og samhandling skal skje på et webområde, det &'; s viktig at du som designer, sørge for det hele. Det betyr at du gjør ditt nettsted design bruk
Vi &';. Har allerede diskutert noen aspekter av brukervennlighet – navigasjon, forrang, og tekst. Her er tre mer viktigste:
forholde seg til reglene: Det er visse ting folk forventer, og ikke gi dem fører til forvirring. For eksempel, hvis teksten har en understreking, forventer du at det skal være en link. Gjør ellers ikke er god brukervennlighet praksis. Jada, kan du bryte noen konvensjoner, men de fleste av nettstedet ditt bør gjøre akkurat hva folk forventer at det skal gjøre
Tenk på hva brukerne faktisk vil gjøre: Prototyping er et vanlig verktøy som brukes i design til å faktisk " prøve &';! ut et design. Dette gjøres fordi ofte når du faktisk bruke en design, legger du merke til små ting som gjør en stor forskjell. ALA hadde en artikkel en stund tilbake kalt Never Bruk en advarsel når du mener Angre, som er et utmerket eksempel på en liten interface design beslutning som kan gjøre livet suger for en bruker: Tenk om brukeroppgavene. Når en bruker kommer til nettstedet hva er de faktisk prøver å gjøre? Liste ut de forskjellige typene av oppgaver folk kan gjøre på et område, hvordan de vil oppnå dem, og hvor lett du ønsker å gjøre det for dem. Dette kan bety at du trenger egentlig vanlige oppgaver på hjemmesiden din (f.eks " starte shopping &' ;, " lære om hva vi gjør, og' etc.) eller det kan bety å sikre noe som å ha en søkeboks alltid lett tilgjengelig. På slutten av dagen, er din web-design et verktøy for folk å bruke, og folk don &';! T som å bruke irriterende verktøy
7. Alignment
Holde ting lined up er like viktig i web-design som det er i print design. At &'; s ikke å si at alt skal være i en rett linje, men heller at du bør gå gjennom og prøver å holde ting konsekvent plassert på en side. Samkjøre gjør designen din mer organisert og fordøyelig, samt gjøre det synes mer polert.
8. Clarity (Skarphet)
Holde design skarp og tydelig er super viktig i webdesign. Og når det kommer til klarhet, det &';. Handler om pikslene
I CSS, vil alt være pixel perfekt så det &'; s ingenting å bekymre seg for, men i Photoshop er det ikke slik. For å oppnå en skarp design du må:
Hold form kanter glefset til piksler. Dette kan innebære manuelt rydde opp former, linjer og bokser hvis du &';. Re skape dem i Photoshop
Sørg for enhver tekst er opprettet ved hjelp av riktig anti-aliasing innstilling. Jeg bruker " Sharp &'; mye.
 Sikre at kontrasten er høy slik at grensene er klart definert.
 Over nedtone grenser bare litt å overdrive kontrasten.
9. Konsistens
konsistens betyr å gjøre alt match. Overskriften størrelser, skriftvalg, farge, knappe stiler, avstands, designelementer, illustrasjons stiler, foto valg, etc. Alt bør være tema for å gjøre design sammenhengende mellom sidene og på samme side.
Holde design konsekvent handler om være profesjonell. Uoverensstemmelser i et design er som stavefeil i et essay. De bare redusere oppfatningen av kvalitet. Uansett hva din design ser ut, holde den konsekvent vil alltid ta det opp et hakk. Selv om det &';. Sa dårlig design, i det minste gjøre det til en konsekvent, dårlig design
enkleste måten å opprettholde konsistens er å gjøre tidlige beslutninger og holde seg til dem. Med et virkelig stort område, men ting kan endre seg i designprosessen.
Å ha et godt sett med CSS stilark kan også gå en lang vei til å gjøre en konsekvent design. Prøv å definere kjerne tagger som og

på en slik måte at dine mislighold matche riktig og unngå å måtte huske spesifikke klasse navn hele tiden
.