10 webdesignelementer, som du ikke bør overse
Når det kommer til at designe og opbygge hjemmesider, ser det aldrig ud til at ske hurtigt nok.
I betragtning af dette hurtige tempo er mange små detaljer, der til sidst kræves for at opbygge hjemmesiden, ofte ude af designprocessen. Mens disse detaljer kan være mindre, er de hvad der tager en hjemmeside fra dejligt til virkelig fantastisk.
Disse detaljer er ofte lette at savne, fordi de ikke kører webstedets overordnede udseende. Problemet er, at som dit udviklingshold arbejder gennem designet, vil det blive tvunget til at designe og skabe disse elementer til dig alligevel.
Du kan tilpasse produktionscyklussen, så udviklerne har tid til at returnere disse aktiver til dig, men hvorfor ikke bare få det hele gjort op foran, så processen er så meget renere?
Endnu værre kan udviklingsholdet beslutte at forfølge og bare oprette aktiverne, når de går.
Selv om mange udviklere har et kæmpe øje med design, skal den kreative, der er ansvarlig for designen af hjemmesiden, i sidste ende være den, der planlægger disse elementer. Planlægning forud for de mest subtile nuancer kan have en dybtgående indvirkning på kvaliteten af det endelige produkt.
Hvert element omfattet af denne artikel stammer fra et spørgsmål, som en udvikler ville bede designeren, hvis et element manglede fra designet.
Lad os grave i de 10 nøgleelementer, der skal tages i betragtning, når du polerer dit websted.
1. Links
Mens styling er de forskellige tilstander af et link faktisk ret grundlæggende, kan du blive overrasket over, hvor ofte alle de ekstra detaljer overses. Inkluder følgende stater for alle links på siden:
- Normal
Dette er standardtilstanden for et link; dvs. en, der ikke svæver over eller bliver klikket eller peger på en webadresse, som brugeren allerede har besøgt. Dette er det linkformat, som de fleste designere altid dækker. - besøgte
Dette er et link, der ikke hoveres over eller klikkes, men hvis mål er blevet besøgt af brugeren. - Aktiv
Et aktivt link er et, der for øjeblikket bliver klikket af brugeren. De fleste udviklere vil kopiere hover-tilstanden her, hvis en stil ikke leveres til dem. - Hover
Endelig er hover-tilstanden, hvad linket ligner, når brugeren musker over det. Dette og de normale stater er dem, de fleste designere forbereder sig på.
En detalje, der ofte overses, er, at disse forskellige stater skal planlægges for alle regioner på et websted. For eksempel har mange hjemmesider mørk krops kopi mod en lys baggrund, men kontrast er omvendt i sidefoden. Du skal planlægge for alle de forskellige sammenhænge af links, der findes på hele siden.
På Full Moon BBQ , for eksempel ser vi grundlæggende røde links inde i indholdsregionen og de grundlæggende hvide links i nedenstående footer. Igen, en lille detalje, men vigtigt alligevel.
2. Formularer
For mange designere er formularens konfiguration kritisk og umulig at overse. Men for mange andre synes det at komme som en fjern eftertanke.
Problemet med sidstnævnte holdning er, at formularer ofte repræsenterer den eneste rigtige måde at konvertere besøgende til kunder. Og uden ordentlig planlægning og design kunne anvendeligheden af disse former falde fladt og forblive det eneste konverteringssted på hjemmesiden. Forberedelse af disse elementer er afgørende, selvom de synes meget mindre presserende til kunder end farve, branding og billeder.
To af de vigtigste overvejelser ved udarbejdelse af en formular er:
- Formlabel
Former indsamler typisk personlige data, som brugere er tilbageholdende med at give ud. Som sådan er det klogt at informere brugerne om formularens nøjagtige formål. - Indtastningsfelter og etiketter
For det andet planlægge, hvordan formularens inputfelter vil blive lagt ud på siden og hvordan etiketterne for disse felter vil blive stylet og orienteret i forhold til felterne.
Når de vender tilbage til deres standardindstillinger, kan formularerne se ubehageligt ud. Men med korrekt forberedelse vil hjemmesiden se sømløs ud og være meget mere effektiv. Lad os se på et godt eksempel, der skal have startet med god planlægning:
Denne forretningskritiske form på fantastisk var klart gennemtænkt. Hele mission og formål med siden er nøje overvejet. Fra formlen og introduktionen til layoutet af hvert sæt felter, med deres etiketter og kontrolformater, er denne form en model for planlægning.
Planlægning af formularer fører os faktisk til flere andre overvejelser ...
3. Knap adfærd
Knapper kan bruges over hele en hjemmeside til forskellige formål, men også de synes ofte at blive forsømt, ligesom de forskellige knapper på en knap. De fire tilstande af en knap er:
- Standard
Dette er standardtilstanden for en knap og venter på at blive klikket. De fleste designere dækker dette, men savner de andre. - Hover
Hovtilstanden ses, når brugeren musker over knappen. Denne tilstand er nyttigt at angive til brugeren, at knappen er en handling, der kan aktiveres. - Klik
Når brugeren klikker på knappen, angiver denne tilstand visuelt dem, at de har klikket på den. At give denne visuelle cue kan hjælpe med at minimere brugerens frustration. - handicappet
Den handicappede tilstand på en knap er måske den mindst anvendte, men kan være meget nyttig for udviklere. Sjældent er denne tilstand planlagt, medmindre designeren har udarbejdet en valideringsproces for formularen (se næste afsnit).
Ligesom de forskellige tilstande af links, skal du huske at overveje de forskellige tilstander af de knapper, der bruges i hele dit website. Fra pop-up log-in formularer til søgning felter til tilmeldingsformularer til nyhedsbrev, vil alle disse knapper have brug for tilsvarende stilarter.
4. Form validering
En vigtig relateret detalje er form validering. Dette er det kritiske punkt, hvor hjemmesiden kommunikerer brugerens krav og fejl i en formular. Der er tre centrale ting at overveje:
- Krævede felter
Alle obligatoriske felter skal angives. Ofte er dette gjort med en stjerne, som set på Venligst start fra begyndelsen :
- Validering i realtid
Nogle validering kan ske i realtid, da brugeren udfylder formularen. Denne form for validering informerer brugeren hurtigst muligt om eventuelle problemer med de data, de har indlæst. Dette kan udføres meget godt med dette jQuery validering plug-in :
- Validering efter tilbagevenden
Denne form for validering sker, efter at brugeren har indsendt formularen. Den stil, der anvendes til validering i realtid, gentages ofte her, men en anden mulighed er at gruppere alle fejl i en enkelt besked, som det ses på moo :
5. Statusmeddelelser: Fejl, advarsler, bekræftelser mv.
Brugere vil normalt have brug for en slags feedback efter at have udført en handling på din hjemmeside. Det mest sandsynlige scenario er efter indgivelse af en formular, men også mange andre begivenheder kan forekomme. Overvej omhyggeligt din hjemmeside og de handlinger, som brugerne måtte tage, og planlægge for de meddelelser, som hjemmesiden skal kommunikere.
På Livet i dag , vi ser en valideringsmeddelelse, der let kan fungere som en global stil til fejlmeddelelser. Og med en lille ændring i farver og ikoner kan den også bruges til mindre advarsler eller endda bekræftelsesmeddelelser:
6. Udvidelse af baggrunden på større skærme
Afhængigt af stilen på hjemmesiden kan baggrundselementerne være et problem for dine udviklere. De fleste baggrunde er enkle og kræver ikke meget forberedelse, men nogle er komplicerede af gradienter, mønstre og billeder.
I betragtning af at store skærme bliver mere og mere almindelige, og at de fleste designs er planlagt til en 960 pixel bred basislinje, er meget skærm fast ejendom åben. Hvis din baggrund indeholder noget fjernt kompliceret, behøver det dig at planlægge, hvordan det vil udvide til at fylde større skærme.
I eksemplet, som jeg byggede nedenfor, var jeg nødt til at rumme en træstruktur, der udvidede i alle retninger. Ikke den slags ting, du vil have en heavy-handed udvikler tackling.
7. Basis HTML-elementer
For kopi-tunge websites er design og styling af basis-HTML-elementer grundlæggende og bør ikke overses. Men på mange marketingorienterede hjemmesider, der har et travlt layout og en tydelig visuel stil, glemmes basiselementerne. Og selvfølgelig bliver udvikleren aldrig langt i at skabe et websted, før han alligevel må lave en standard side skabelon.
Her skal basiselementerne altid planlægges for: afsnit, overskrifter 1 til 6, uordnede og ordnede lister, tabeldata, formularfelter, billeder og fed og kursiv tekst.
På mange hjemmesider jeg arbejder på, sætter jeg sammen en stilguide til at hjælpe udviklerne, sådan som sådan:
8. Website e-mails
Én ting jeg ikke ser nogen designplan for er webstedsgenererede e-mails. Et sådant grundlæggende element er let at savne, fordi det ikke er typisk kernefokus på hjemmesiden. Og alligevel er e-mail et kraftfuldt værktøj, som kan fremme og udvide en service.
Mit forslag er omhyggeligt at gennemgå indholdet af hjemmesiden på planlægningsstadiet for at søge efter e-mails, der måtte sendes. Nogle af de mest almindelige er:
- Bekræftelse af bekræftelse af postliste,
- Registreringsbekræftelse,
- Formularudfyldelsesbekræftelse (f.eks. For en kontaktformular)
- Ordrebekræftelse efter et køb.
Hvis du virkelig ønsker at blæse dine kunders og udviklers sind, skal du også udarbejde en e-mail marketing skabelon til hjemmesiden. Du vil give brugerne en sømløs overgang fra hjemmesiden til indbakken, og du vil opretholde omhyggelig kontrol over branding i forskellige former.
9. Sidestrækning
Spørgsmålet om, hvordan et design vil strække sig for at imødekomme skiftende indhold, behandles sjældent, men kan være kritisk, afhængigt af webstedets stil. Lad os se på et eksempel, hvor dette kunne have været rodet op:
Full Moon BBQ har en stram startside. Dette design tillader ikke meget bevægelse eller ændring i indholdet. Alt har en bestemt størrelse og placering. Så hvad sker der, hvis ejerne beslutter sig for virkelig at forlænge velkomstmeddelelsen eller tilføje et billede? Heldigvis har de planlagt dette. Som du kan se i denne mock-up, har jeg redigeret siden for at inkludere dobbelt teksten. Siden udvider perfekt og rummer den:
Forberedelse af alternative versioner af et layout med meget mere indhold kan være yderst hjælpsomme til at demonstrere, hvordan man planlægger et sådant scenario.
10. Animationer: pop-ups, værktøjstips, overgange mv.
På en standard HTML og CSS hjemmeside (dvs. uden Flash), er animationer og overgange så let at overse. Og når de overses, vil de ofte ikke engang blive indkvarteret overhovedet. Så hvis animationer er kritiske, er din bedste chance at give udviklere en prøve af, hvordan de skal fungere, så produktet fungerer som det skal.
Nogle af de mest almindelige steder animationer opdræt er i:
- værktøjsvink
De små pop-ups, når brugere muserer over elementer. - Billedrotatorer
Hjemmeside diasshow er alle raseri, og en bred vifte af muligheder er tilgængelige for overgange og stilarter. - Lyskasse
Du kan style ikke kun lysboksen selv, men også overgangen til den.
Hvert af disse animerede elementer har en tydelig visuel stil, der skal indpasses alene.
Hvorfor skal jeg passe?
Mange af de elementer, der præsenteres her, synes mere nyttigt for udviklerne end designerne. For at være retfærdig er dette delvist sandt: Hvis du forbereder alle disse elementer i forvejen, vil udviklerne elske dig. Det er de slags ting, som udviklere bliver trætte af at bede om eller af at skulle regne ud alene.
Men ved at gøre alt dette arbejde i forvejen holder du udviklere gætte, og du bevarer dermed kontrollen med designet. Og ved at opretholde kontrollen over designet har du en langt større chance for at kunne tilføje den slags polsk, der bliver en almindelig hjemmeside til en enestående. Nogle designere henviser til dette som den hemmelige sauce, der gør deres designs synge.
Og hvis det ikke er motiverende nok, overvej det her. Designere, der planlægger det her godt og leverer en pakke, denne komplette er bare fundamentalt mere værdifuld. De skaber ikke kun et produkt af højere kvalitet, men de reducerer også produktionsomkostningerne. Det betyder, at der er mere plads til overskud, hvilket selvfølgelig gør alle glade.
Så husk alle disse finere detaljer og have det sjovt at planlægge dit website. Helt ærligt er disse detaljer halve sjov for at designe for nettet, det stadigt skiftende medium, der rummer brugerens interaktion og skiftende indhold.
Patrick McNeil er freelance skribent, udvikler og designer. Han elsker især at skrive om webdesign, uddanne folk i webudvikling og opbygge hjemmesider. Patricks seneste bogprojekt er Designerens Webhåndbog ; den indeholder mange flere emner i overensstemmelse med denne artikel. Du kan finde ud af mere om det på TheWebDesignersIdeaBook.com . Følg Patrick på Twitter @designmeltdown .
Hvad designer du for at alle andre synes at glemme? Har du nogensinde præsenteret ekstramateriale som disse til dine kunder? Hvilke slags ting finder du udviklere, der altid beder dig om at tilføje til et design?