10 webdesignelementer som du ikke bør overse
Når det kommer til å designe og bygge nettsteder, ser det aldri ut til å skje raskt nok.
Gitt dette raske tempoet, blir mange små detaljer som til slutt kreves for å bygge nettstedet, ofte utelatt av designprosessen. Mens disse detaljene kan være små, er de det som tar et nettsted fra hyggelig til virkelig fantastisk.
Disse detaljene er ofte enkle å savne fordi de ikke kjører det generelle utseendet på nettstedet. Problemet er at når utviklingslaget ditt arbeider gjennom designet, vil det bli tvunget til å designe og lage disse elementene for deg uansett.
Du kan justere produksjons syklusen slik at utviklerne har tid til å returnere disse eiendelene til deg, men hvorfor ikke bare få alt gjort opp foran, slik at prosessen er så mye renere?
Enda verre, utviklingslaget kan bestemme seg for å gå videre og bare skape eiendelene etter hvert som de går.
Selv om mange utviklere har et sterkt øye med design, bør den kreative som er ansvarlig for utformingen av nettstedet, i siste instans være den som planlegger disse elementene. Planlegging fremover for de fineste nyansene kan ha en dyp innvirkning på kvaliteten på sluttproduktet.
Hvert element som dekkes av denne artikkelen stammer fra et spørsmål som en utvikler ville spørre designeren om et element manglet fra designet.
La oss grave inn i de 10 nøkkelelementene å huske på når du polerer nettstedet ditt.
1. Lenker
Mens styling er de ulike tilstandene til en lenke, er det ganske grunnleggende, kan du bli overrasket over hvor ofte alle de ekstra detaljene overses. Inkluder følgende stater for alle koblinger på siden:
- Normal
Dette er standardtilstanden til en lenke; dvs. en som ikke hovered over eller blir klikket eller peker på en URL som brukeren allerede har besøkt. Dette er koblingsformatet som de fleste designere alltid dekker. - Besøkte
Dette er en lenke som ikke hovered over eller klikket, men hvis mål har blitt besøkt av brukeren. - Aktiv
En aktiv link er en som nå klikkes av brukeren. De fleste utviklere vil kopiere hoverstaten her hvis en stil ikke er gitt til dem. - Sveve
Til slutt er hover-tilstanden hva koblingen ser ut når brukeren musker over den. Dette og de vanlige statene er de de fleste designere forbereder seg på.
En detalj som ofte overses er at disse ulike statene må planlegges for alle regioner på et nettsted. For eksempel har mange nettsteder mørk kroppskopi mot en lys bakgrunn, men kontrasten er reversert i bunnteksten. Du må planlegge for alle de ulike sammenhenger av lenker som finnes over hele siden.
På Full Moon BBQ , for eksempel ser vi grunnleggende røde lenker i innholdsregionen og grunnleggende hvite koblinger i bunnteksten under. Igjen, en liten detalj, men viktig likevel.
2. Skjemaer
For mange designere er konfigurasjonen av skjemaer kritisk og umulig å overse. Likevel, for mange andre, synes det å komme som en fjern ettertanke.
Problemet med sistnevnte holdning er at skjemaer ofte representerer den eneste virkelige måten å konvertere besøkende til kunder. Og uten ordentlig planlegging og design, kan brukbarheten til disse skjemaene falle flat, kremering det eneste konverteringspunktet på nettstedet. Forberedelse for disse elementene er viktig, selv om de virker mye mindre presserende til kunder enn farge, merkevarebygging og bilder.
To av de viktigste hensynene når du legger ut et skjema er:
- Skjemaetikett
Skjemaer samler vanligvis inn personopplysninger som brukere er uvillige til å gi ut. Som sådan er det klokt å informere brukerne om det eksakte formålet med skjemaet. - Inngang felt og etiketter
For det andre, planlegger hvordan inntaksfeltene i skjemaet blir lagt ut på siden og hvordan etikettene for disse feltene vil bli stylet og orientert i forhold til feltene.
Når de går til standardinnstillingene, kan skjemaene se vanskelig ut. Men med riktig forberedelse vil nettsiden se sømløs ut og være mye mer effektiv. La oss se på et godt eksempel som må ha startet med god planlegging:
Denne forretningskritiske formen på Rått var tydelig gjennomtenkt. Hele oppdraget og hensikten med siden har blitt nøye vurdert. Fra tittelen og introduksjonen til utformingen av hvert sett med felt, med deres etiketter og kontrollstiler, er dette skjemaet en modell for planlegging.
Planlegging for skjema fører oss faktisk til flere andre hensyn ...
3. Knappadferd
Knapper kan brukes på en nettside for ulike formål, men de ser også ut til å bli ofte forsømt, som gjør de forskjellige knappene på en knapp. De fire tilstandene på en knapp er:
- Misligholde
Dette er standardstatus for en knapp, og venter på å bli klikket. De fleste designere dekker denne, men savner de andre. - Sveve
Hover-tilstanden er sett når brukeren musker over knappen. Denne tilstanden er nyttig for å indikere for brukeren at knappen er et handlingbart element. - Klikk
Når brukeren klikker på knappen, indikerer denne tilstanden visuelt at de har klikket på den. Å gi denne visuelle cue kan bidra til å minimere brukerens frustrasjon. - Funksjonshemmet
Den deaktiverte tilstanden til en knapp er kanskje den minst brukte, men kan være svært nyttig for utviklere. Sjelden er denne tilstanden planlagt med mindre designeren har utarbeidet en valideringsprosess for skjemaet (se neste avsnitt).
I likhet med de ulike tilstandene av koblinger, sørg for å vurdere de forskjellige tilstandene til knappene som brukes på hele nettstedet ditt. Fra popup-påloggingsskjemaer for å søke felt til nyhetsbrev påmeldingsskjemaer, vil alle disse knappene trenge tilsvarende stiler.
4. Form validering
En viktig detaljert detalj er form validering. Dette er det kritiske punktet hvor nettstedet kommuniserer brukerens krav og feil i et skjema. Det er tre kjerne ting å vurdere:
- Obligatoriske felt
Alle obligatoriske felt skal angis. Ofte er dette gjort med en stjerne, sett på Vennligst start fra begynnelsen :
- Real-time validering
Enkelte valideringer kan gjøres i sanntid da brukeren fullfører skjemaet. Denne typen validering informerer brukeren så raskt som mulig om eventuelle problemer med dataene de har innført. Dette kan oppnås veldig bra med dette jQuery validering plug-in :
- Validering etter tilbakebetaling
Denne typen validering skjer etter at brukeren har sendt inn skjemaet. Stilen som brukes for sanntids validering gjentas ofte her, men et annet alternativ er å gruppere alle feilene i en enkelt melding, sett på moo :
5. Statusmeldinger: Feil, advarsler, bekreftelser, etc.
Brukere vil vanligvis trenge en slags tilbakemelding etter å ha utført en handling på nettstedet ditt. Det mest sannsynlige scenariet er etter at du har sendt inn et skjema, men det kan også forekomme mange andre hendelser. Ta nøye med på nettstedet ditt og handlingene som brukerne kan ta, og planlegg meldingene som nettstedet må kommunisere.
På Livet i dag , vi ser en valideringsmelding som lett kan fungere som en global stil for feilmeldinger. Og med en liten endring i farger og ikoner, kan den også brukes til mindre advarsel eller til og med bekreftelsesmeldinger:
6. Utvide bakgrunnen på større skjermer
Avhengig av stilen på nettstedet, kan bakgrunnselementene være et problemfelt for utviklerne dine. De fleste bakgrunner er enkle og krever ikke mye forberedelse, men noen er kompliserte av gradienter, mønstre og bilder.
Med tanke på at store skjermer blir stadig mer vanlige, og at de fleste designene er planlagt for en 960-piksel bred basislinje, er mange skjermeiere åpen. Hvis bakgrunnen din inneholder noe eksternt komplisert, behøver det deg å planlegge hvordan det vil strekke seg til å fylle større skjermer.
I eksemplet som jeg bygget under, måtte jeg ta imot en trestruktur som utvidet i alle retninger. Ikke den typen ting du vil ha en tøffhendt utvikler takling.
7. Baser HTML-elementer
For kopi-tunge nettsteder er utformingen og utformingen av grunnleggende HTML-elementer grunnleggende og bør ikke overses. Men på mange markedsføringsorienterte nettsteder som har et opptatt layout og en distinkt visuell stil, blir basiselementene glemt. Og selvfølgelig blir utvikleren aldri langt i å skape et nettsted før han må produsere en standard side mal uansett.
Her er basiselementene til å alltid planlegge for: avsnitt, overskrift 1 til 6, uordnede og bestilte lister, tabelldata, skjemafelt, bilder og fet og kursiv tekst.
På mange nettsteder jeg jobber med, legger jeg sammen en stilguide for å hjelpe utviklerne, noe som dette:
8. Nettsted e-post
En ting jeg ikke ser noen designplan for, er nettside-genererte e-poster. Et slikt grunnleggende element er lett å savne fordi det ikke er vanligvis kjernefokuset på nettstedet. Og likevel er e-post et kraftig verktøy som kan fremme og utvide en tjeneste.
Mitt forslag er å nøye gjennomgå innholdet på nettstedet i planleggingsstadiet for å se etter e-postmeldinger som kan sendes. Noen av de vanligste er:
- Registreringsbekreftelse for postliste,
- Registreringsbekreftelse,
- Bekreftelse av skjemaformulering (for eksempel for et kontaktskjema),
- Ordrebekreftelse etter et kjøp.
Hvis du virkelig vil blåse tankene til dine kunder og utviklere, må du også lage en e-postmarkedsmal for nettstedet. Du vil gi brukerne en sømløs overgang fra nettsiden til innboksen, og du opprettholder nøye kontroll over merkevaren i ulike former.
9. Side strekk
Spørsmålet om hvordan et design vil strekke for å imøtekomme endring av innhold, blir også sjelden håndtert, men kan være kritisk, avhengig av stilen på nettstedet. La oss se på et eksempel der dette kunne ha blitt ødelagt:
Full Moon BBQ har en stram hjemmeside. Denne utformingen tillater ikke mye bevegelse eller endring i innholdet. Alt har en bestemt størrelse og plassering. Så hva skjer hvis eierne bestemmer seg for å virkelig lengre velkomstmeldingen eller legge til et bilde? Heldigvis har de planlagt for dette. Som du kan se i denne mock-up, har jeg redigert siden for å inkludere dobbelt tekst. Siden strekker seg perfekt og passer til den:
Å forberede alternative versjoner av en layout med mye mer innhold kan være svært nyttig for å demonstrere hvordan du skal planlegge for et slikt scenario.
10. Animasjoner: popup-vinduer, verktøytips, overganger, etc.
På en vanlig HTML- og CSS-nettside (dvs. uten Flash), er animasjoner og overganger så enkelt å overse. Og når de blir oversett, blir de ofte ikke engang innkvartert i det hele tatt. Så hvis animasjoner er kritiske, er det beste alternativet å gi utviklere et utvalg av hvordan de skal fungere slik at produktet fungerer som det skal.
Noen av de vanligste stedene som animasjonene kaster opp er i:
- Verktøytips
De små popup-vinduene når brukere musen over elementene. - Bilde rotatorer
Hjemmeside lysbildefremvisninger er alle raseri, og et bredt utvalg av alternativer er tilgjengelig for overganger og stiler. - Lysboks
Du kan utforme ikke bare lysboksen selv, men også overgangen til den.
Hvert av disse animerte elementene har en tydelig visuell stil som må innkvarteres alt i seg selv.
Hvorfor skal jeg bry meg?
Mange av elementene som presenteres her virker mer nyttige for utviklerne enn designerne. For å være rettferdig, er dette delvis sant: Hvis du forbereder alle disse elementene på forhånd, vil utviklerne elske deg. Dette er typer ting som utviklere blir lei av å spørre om eller av å finne ut på egen hånd.
Likevel, ved å gjøre alt dette arbeidet på forhånd, holder du utviklere gjetning, og du opprettholder dermed kontroll over designen. Og ved å opprettholde kontrollen over designen, har du en mye større sjanse til å kunne legge til en slags polsk som gjør et vanlig nettsted til en enestående. Noen designere refererer til dette som den hemmelige sausen som gjør at designene synger.
Og hvis det ikke er motivasjon nok, bør du vurdere dette. Designere som planlegger dette godt og leverer en pakke denne komplette er bare fundamentalt mer verdifull. De lager ikke bare et produkt av høyere kvalitet, men reduserer også produksjonskostnadene. Dette betyr at det er mer plass for profitt, noe som selvfølgelig gjør alle lykkelige.
Så hold alle disse finere detaljene i tankene, og ha det gøy å planlegge nettstedet ditt. Helt ærlig er disse detaljene halve moroa med å designe for nettet, det stadig skiftende mediet som imøtekommer brukerinteraksjon og endring av innhold.
Patrick McNeil er frilansskribent, utvikler og designer. Spesielt elsker han å skrive om webdesign, trene folk i webutvikling og bygge nettsteder. Patricks siste bokprosjekt er Designerens netthåndbok ; den inneholder mange flere emner i tråd med denne artikkelen. Du kan finne ut mer om det på TheWebDesignersIdeaBook.com . Følg Patrick på Twitter @designmeltdown .
Hva designer du for at alle andre synes å glemme? Har du noen gang lagt fram tilleggsstoffer som disse til dine kunder? Hva slags ting finner du utviklere som alltid ber deg om å legge til et design?