Hvordan til at designe en hjemmeside

De 3 grundregler

1. 1
   Regel # 1: Lyt til din klient. Du kan designe "verdens bedste hjemmeside nogensinde i universets historie og videre," med rige sorte, sofistikerede skrifttyper og fed, kunstneriske farver for et websted, der skriger "udforske mig nu!" Desværre din klient ønskede en orange menulinje med chunky pink og orange type. Du er fyret, og din bedste website stadigt at kunden ejer rettighederne til-vansmægter på deres backup harddisk eller andet sted, at aldrig blive set af dødelige mennesker.
   • Undersøgelse din klients corporate identity. Har kunden vise dig nogle hjemmesider, at de virkelig gerne. Dette vil ikke kun cue dig ind på, hvad kriller deres fancy, vil det også give dig nogle design ideer, som du måske ikke har overvejet.
   • Hvis du troede, at vi var kidding om den orange og pink website, bare forestille sig, at fedeste nogensinde sofistikerede hjemmeside fremme dette produkt:
     
2. 2
   Regel # 2: Kend din målgruppe og hvad de leder efter, og design i overensstemmelse hermed. Grunden mennesker har hjemmesider, fordi de ønsker, at andre mennesker til at se dem. Det kan være oplysende, eller det kan være kommercielle, eller det kan være til underholdning gearet til en bestemt demografisk. Dit job som designer, er at vide, hvem du designe for, og til at holde dem på siden, når de lander der.
   • Du tror måske, "Hvis det ser godt ud, vil de blive." Men dette er ikke nødvendigvis tilfældet. Overvej fast ejendom, for eksempel. Her er et websted, der indeholder en ren, sjovt design. Det har masser af hvidt rum, der åbner tingene op, dristige farver og en meget moderne leder widescreen format med links fremtrædende plads:
     
   • Nu overveje denne tilgang til salg af fast ejendom i det samme område: Det er rodet og meget travlt, skrigende farver og slathered med annoncer.
     
   • Gæt hvilken man faktisk fungerer bedre for folk på udkig efter hjem? Det er rigtigt, den ene, der rent faktisk viser hjem! Når folk søger efter "boliger til salg i Santa Monica," de ikke bekymre sig om æstetik af sitet. De ønsker ikke at vide noget om ejendomsmægleren eller se smukke billeder af byen. De ønsker at se hjem.
3. 3
   Regel # 3: Lyt til dig selv. Du forstår, hvad kunden kan lide, og du ved, hvad dit marked søger efter. Endelig er det tid til at være opmærksom på dig, designeren!
   • Opbygge en skabelon i grafikprogram efter eget valg. På separate lag (så du kan ændre ting senere uden at ødelægge den overordnede skabelon) at skabe de elementer, der går ind i din side. Disse elementer kan omfatte:
     • Header. Dette er et element, der vil være fælles for hver side på dit websted. Overskriften består af titlen og logoet af hjemmesiden, samt links til de øvrige undersektioner af hjemmesiden (ex. About, Contact, etc.). Visuelt og praktisk, vil dette binde det hele sammen. Det er god praksis at gøre den første knap på en menulinje link tilbage til startsiden.
     • Lad os se på Apple, for eksempel:
       
     • Som med de fleste alt Apple, har deres hjemmeside en meget ren, overskueligt design. Læg mærke til menulinjen øverst med logiske emner for hver knap, plus et søgefelt-altid et nice touch, hvis dit websted understøtter det. Lad os nu se en landing page for en af ​​knapperne, iPad, og lad os tage et kig på et par af de elementer:
       
     • Menulinjen skifter kun mørkere iPad knappen.
     • Emnet for landing page er i store sorte bogstaver i øverste venstre hjørne.
     • En ny sub-menulinjen vises, så du kan lære mere om produktet. Hvis du klikker på hvert af disse undermenu overskrifter, vil du se hver enkelt side vil tilbyde nyt emne-relevant indhold, men vil være identiske i layout og design.
     • Mange gange, hver hovedoverskrift i menulinjen vil multiple underoverskrifter, som du har brug for at redegøre for. I stedet for at skabe en sekundær menu bar, kan du bruge popup menuer som dette eksempel fra Musikerpris ven:
       
     • Side bar. Dette vil være fælles om mange sider på dit websted, men ikke nødvendigvis alle - kontekst er konge. Men det er et meget vigtigt element, og skal omhyggeligt designet til at være intuitiv og unødigt rodet. I modsætning til menulinjen, kan indholdet af en side bar være meget dynamisk. Overvej disse to sidebars fra fast ejendom marketingmedarbejder Trulia Den første er for købere:
       
     • Og den anden er for lejere. Bemærk den helt anden fokus meget lignende information, og det ser ud på nøjagtigt samme sted på side bar:
       
     • Krop. Det er her det hele sker, og er den mest variable del af dit design. Hvis du designer en e-handel site, for eksempel, kan en side have et produkt gennemgang i kroppen, mens den næste har 20 emner til salg. Dit job er at binde de to sammen, så de ikke ser usammenhængende, visuelt. Brug lignende farver, skrifttyper og interface elementer til at trække det hele sammen.
     • Footer. Det er noget, ikke alle steder har eller behov. Det er ofte brugt til ting, der kan overfylde en ellers ren grænseflade, eller give adgang til dele af webstedet, der ikke er webstedets primære fokus. Her er et eksempel fra Groupon:
       

Retningslinjer

1. 1
   Øv god brugergrænseflade design. Placering af de forskellige elementer af hjemmesiden, såsom titel, sidebars, logoer, grafik og tekst i de samme steder på hver side, vil gøre dit websted sejlbar og intuitiv.
   • Hold den samme header øverst på hver side. Hvorvidt indholdet på dit websted egner sig til mange gentagne elementer, og sørg for, at toppen af ​​hver side, er identisk, er et must.
   • Brug logik i dit design. Elementerne på en enkelt side skal bestilles logisk efter vigtighed eller efter emne, de forskellige sider på webstedet bør gøre det samme.
2. 2
   Skabe et sammenhængende stil. Mens layoutet bør give dit websted strukturel sammenhæng bør den stil giver den tematiske harmoni.
   • Stick med to eller tre vigtigste farver og sørg for de harmonisere godt.
   • Undgå at bruge alt for mange skrifttyper eller størrelser, hvis du har planer om at veksle mellem et par, sørg for at bruge dem på samme måde på hver side.
   • Brug Cascading style sheets (CSS) til at administrere en ensartet stil, og gøre det lettere at ændre elementer på tværs af en hel hjemmeside uden at skulle gå til hver enkelt side.
3. 3
   Maksimer læsbarheden. For at gøre din tekst lettere at læse, bryde det op i mindre sektioner.
   • Brug underoverskrifter og passende afstand til at adskille de enkelte sektioner.
   • Brug fed eller en anden størrelse skrifttyper for at vise hierarkiet og vigtigheden af ​​de emner.
   • Vær opmærksom på tekst håndtering. Må ikke gøre skrifttypen for lille, og udvide linjeafstanden til at foretage store tekstblokke mere læsevenlig. Store blokke af tekst vil være sværere at læse, bryde disse op i mindre stykker i stedet.
4. 4
   Gør din hjemmeside universelt læsbar. Brug standard HTML og undgå tags, funktioner og plug-ins, der er kun tilgængelige for et mærke eller version af en browser.
   • Selv om de fleste moderne browsere og computere kan håndtere komplekse billeder, vil alt være lidt snappier hvis din holde dine billeder mindre i størrelse og optimeret til nettet. Balance ønsket om kvalitet i forhold til behovet for hastighed.
5. 5
   Test din hjemmeside. Sørg for, at hvert link fungerer som du forventer, og at billederne vises korrekt.
   • Du ønsker måske at foretage nogle usability tests ved at have medlemmer af din målgruppe teste klarhed og brugervenligheden af ​​dit design, og giver dig feedback på din hjemmeside.
6. 6
   Udgiv din hjemmeside. Hvis du ikke allerede har gjort det, købe et domænenavn. Tjek links jævne mellemrum for at sikre, at de stadig eksisterer og lytte til forslag, e-mailet til dig af besøgende.