Hvordan å designe en nettside

De tre grunnleggende regler

1. 1
   Regel nr. 1: Lytt til klienten. Du kan designe "verdens beste nettsted noensinne i historien om universet og utover," med rik svart, sofistikerte skrifter og dristige, kunstneriske farger for et område som skriker "utforske meg nå!" Dessverre, ønsket kunden en oransje menylinjen med chunky rosa og oransje type. Du har sparken, og din beste nettsted stadig at klienten eier rettighetene til-languishes på deres backup harddisk eller annet sted, for aldri å bli sett av dødelig menneske.
   • Studere kundens bedriftens identitet. Har klienten vise deg noen nettsteder som de virkelig liker. Dette vil ikke bare cue du på hva kiler deres fancy, vil det også gi deg noen ideer som du kanskje ikke har vurdert.
   • I tilfelle du trodde vi var en spøk om den oransje og rosa nettside, tenk at kuleste noensinne sofistikert nettsted fremme dette produktet:
     
2. 2
   Regel # 2: Kjenn ditt publikum og hva de leter etter, og design deretter. Grunnen til at folk har nettsteder er fordi de vil at andre skal se dem. Det kan være opplysende, eller det kan være drivverdig, eller det kan være for underholdning rettet til en bestemt demografisk. Din jobb som designer, er å vite hvem du skal designe for, og å holde dem på siden når de lander der.
   • Du kan tenke: "Hvis det ser bra ut, vil de bo." Men dette er ikke nødvendigvis tilfelle. Tenk fast eiendom, for eksempel. Her er et nettsted som har en ren, morsom design. Den har massevis av tomrom som åpner opp ting, dristige farger og en svært moderne utseende widescreen-format med linker fremtredende kjennetegnet:
     
   • Nå vurdere denne tilnærmingen til salg av fast eiendom i samme område: det er rotete og svært opptatt, glorete farger, og slathered med annonser.
     
   • Gjett hvilken som faktisk fungerer bedre for folk på jakt etter boliger? Det er riktig, den som faktisk viser hjem! Når folk søker etter "boliger for salg i Santa Monica," de ikke bryr seg om estetikk av nettstedet. De ønsker ikke å vite om eiendomsmegler, eller se pene bilder av byen. De ønsker å se hjemmene.
3. 3
   Regel # 3: Lytt til deg selv. Du forstår hva kunden liker, og vet du hva markedet søker etter. Til slutt er det på tide å ta hensyn til deg, designeren!
   • Bygge opp en mal i grafikkprogram etter eget valg. På separate lag (slik at du kan endre ting senere uten å ødelegge den generelle malen) lage elementer som går inn i siden din. Disse elementene kan omfatte:
     • Header. Dette er et element som vil være felles for alle sidene på nettstedet ditt. Overskriften består av tittelen og logoen til nettstedet, samt lenker til andre delområder av nettstedet (ex. Om, Kontakt, etc.). Visuelt og praktisk, vil dette binde alt sammen. Det er god praksis å gjøre den første knappen på menylinjen link tilbake til hjemmesiden.
     • La oss se på Apple, for eksempel:
       
     • Som med de fleste alt Apple har sin hjemmeside et veldig rent, ryddig design. Legg merke til menylinjen øverst, med logiske emner for hver knapp, pluss et søkefelt-alltid en fin touch hvis området støtter det. La oss nå se en destinasjonsside for en av knappene, iPad, og la oss ta en titt på noen av elementene:
       
     • Menylinjen endres bare ved mørkere iPad-knappen.
     • Emnet for landing side er i store svarte bokstaver i øvre venstre.
     • En ny sub-menylinjen vises slik at du kan lære mer om produktet. Hvis du klikker på hvert av disse undermenyene overskrifter, vil du se hver side vil tilby nye emne-relevant innhold, men vil være identisk i layout og design.
     • Mange ganger, hver viktigste overskriften i menylinjen vil flere sub-overskrifter som du må ta hensyn til. Istedenfor å lage en sekundær menylinjen, kan du bruke popup menyer som dette eksemplet fra Musiker venn:
       
     • Side bar. Dette vil være vanlig på mange sider på nettstedet ditt, men ikke nødvendigvis alle - sammenheng er konge. Men det er et svært viktig element, og må nøye designet for å være intuitive og unødvendig rotete. I motsetning til menylinjen, kan innholdet av en side bar være svært dynamisk. Disse to sidefelt fra eiendomsmegling markedsfører Trulia Den første er for kjøpere:
       
     • Og den andre er for leietakere. Legg merke til helt annet fokus for svært lik informasjon, og det ser ut på nøyaktig samme sted på siden bar:
       
     • Kroppen. Det er der det skjer, og er den mest variable delen av designen. Hvis du utformer en e-handel, for eksempel kan en side ha et produkt vurdering i kroppen, mens den neste har 20 varer for salg. Din jobb er å knytte de to sammen, slik at de ikke ser usammenhengende, visuelt. Bruke lignende farger, fonter og grensesnitt elementer å trekke det hele sammen.
     • Bunntekst. Dette er noe som ikke hvert område har, eller behov. Det er ofte brukt for ting som kanskje rot et ellers rent grensesnitt, eller gi tilgang til deler av området som ikke er nettstedets primære fokus. Her er et eksempel fra Groupon:
       

Retningslinjer

1. 1
   Øv godt brukergrensesnitt design. Posisjonere de ulike elementene på nettsiden, slik som tittel, sidebars, logoer, grafikk og tekst, på de samme stedene på hver side vil gjøre nettstedet farbare og intuitivt.
   • Holde samme header øverst på hver side. Hvorvidt innholdet på nettstedet gir seg til mange repeterende elementer, og pass på at toppen av hver side er identisk er et must.
   • Bruk logikk i design. Elementene på en enkelt side bør bestilles logisk etter viktighet eller emne, de forskjellige sidene i området bør gjøre det samme.
2. 2
   Lag en konsekvent stil. Mens oppsettet bør gi området strukturelle konsistens, bør stilen gi den tematiske harmoni.
   • Stick med to eller tre hovedfarger og sørge for at de harmonerer godt.
   • Unngå å bruke for mange skrifttyper eller størrelser, hvis du har tenkt å alternere mellom noen, sørg for at du bruker dem på samme måte på hver side.
   • Bruk Cascading Style Sheets (CSS) til å administrere enhetlig stil, og for å gjøre det enklere å endre elementer på tvers av en hel nettside uten å måtte gå til hver enkelt side.
3. 3
   Maksimere lesbarhet. For å gjøre teksten lettere å lese, dele den opp i mindre deler.
   • Bruk underoverskrifter og orddeling for å skille hver av seksjonene.
   • Bruk fet eller annen størrelse skrifter for å vise hierarkiet og viktigheten av temaene.
   • Ta hensyn til tekst håndtering. Ikke gjør skriften for liten, og utvide linjeavstand for å gjøre store blokker med tekst mer lesbar. Store blokker med tekst vil bli vanskeligere å lese, bryte disse opp i mindre avsnitt i stedet.
4. 4
   Lag din hjemmeside universelt lesbar. Bruk standard HTML og unngå koder, funksjoner og plug-ins som kun er tilgjengelig for en merkevare eller versjon av en nettleser.
   • Selv om de fleste moderne nettlesere og datamaskiner kan håndtere komplekse bilder, vil alt være litt kjappere hvis holde bildene dine mindre i størrelse og optimalisert for web. Balansere ønsket om kvalitet mot behovet for fart.
5. 5
   Test din nettside. Sørg for at alle ledd fungerer som forventet, og at bildene vises riktig.
   • Det kan være lurt å gjennomføre noen usability tester ved å ha medlemmer i målgruppen teste klarhet og brukervennlighet av designen, og gi deg tilbakemelding på ditt nettsted.
6. 6
   Publisere ditt nettsted. Hvis du ikke allerede har gjort det, kjøpe et domenenavn. Sjekk linker jevne mellomrom for å sikre at de fortsatt eksisterer og lytte til forslag sendt til deg via nettstedet besøkende.