10 webbdesignelement som du inte bör förbise
När det gäller att designa och bygga webbplatser verkar det aldrig hända tillräckligt snabbt.
Med tanke på denna snabba takt är många små detaljer som slutligen krävs för att bygga webbplatsen ofta borta från designprocessen. Medan dessa detaljer kan vara mindre, de är vad som tar en webbplats från trevligt till riktigt fantastiskt.
Dessa detaljer är ofta lätt att missa eftersom de inte driver den övergripande utseendet på webbplatsen. Problemet är att när ditt utvecklingsteam arbetar genom designen kommer det att vara nödvändigt att designa och skapa dessa element för dig ändå.
Du kan justera produktionscykeln så att utvecklarna har tid att returnera dessa tillgångar till dig, men varför inte bara göra allt gjort upp framför så att processen är så mycket renare?
Ännu värre kan utvecklingsgruppen bestämma sig för att gå vidare och bara skapa tillgångarna när de går.
Medan många utvecklare har ett starkt öga för design, bör kreatören som är ansvarig för utformningen av webbplatsen i sista hand vara den som planerar för dessa element. Planering framåt för de finaste nyanserna kan ha en djupgående inverkan på slutproduktens kvalitet.
Varje element som omfattas av denna artikel härrör från en fråga som en utvecklare skulle fråga designern om ett element saknades från designen.
Låt oss gräva i de 10 nyckelelementen för att komma ihåg när du polerar din webbplats.
1. Länkar
Medan styling är de olika delarna av en länk faktiskt ganska grundläggande, kan du bli förvånad över hur ofta alla extra detaljer är förbisedda. Inkludera följande tillstånd för alla länkar på sidan:
- Vanligt
Detta är standardläget för en länk; det vill säga en som inte svävar över eller klickas eller pekar på en webbadress som användaren redan har besökt. Det här är länkformatet som de flesta designers alltid täcker. - Besökt
Detta är en länk som inte svävar över eller klickas men vars mål har besökts av användaren. - Aktiva
En aktiv länk är en som just nu klickas av användaren. De flesta utvecklare kommer att replikera svävarstaten här om en stil inte ges till dem. - Sväva
Slutligen är hover-tillståndet vad länken ser ut när användaren musar över den. Detta och de normala tillstånden är de som de flesta designers förbereder sig för.
En detalj som ofta förbises är att dessa olika stater måste planeras för alla regioner på en webbplats. Till exempel har många webbplatser mörk kroppskopia mot en ljus bakgrund, men kontrasten är omvänd i sidfoten. Du måste planera för alla olika sammanhang av länkar som finns på hela sidan.
På Full Moon BBQ , till exempel ser vi grundläggande röda länkar i innehållsregionen och grundläggande vita länkar i sidfoten nedan. Återigen, en liten detalj men viktigt ändå.
2. Blanketter
För många designers är utformningen av formulär kritisk och omöjlig att förbise. Men för många andra verkar det som en avlägsen eftertanke.
Problemet med den senare inställningen är att former ofta utgör det enda riktiga sättet att konvertera besökare till kunder. Och utan ordentlig planering och design kan användbarheten av dessa former falla i plattform och försvagas den enda konverteringspunkten på webbplatsen. Att förbereda dessa element är viktigt, även om de verkar mycket mindre pressande för kunder än färg, varumärke och bilder.
Två av de viktigaste övervägandena när man lägger ut en blankett är:
- Formulär
Forms samlar vanligtvis personuppgifter som användare är ovilliga att ge ut. Som sådan är det klokt att informera användarna om formulärets exakta syfte. - Inmatningsfält och etiketter
För det andra, planera för hur inmatningsfälten i formuläret kommer att läggas ut på sidan och hur etiketterna för dessa fält kommer att utformas och orienteras i förhållande till fälten.
När de lämnas till standardinställningarna kan blanketter se obekvämt ut. Men med rätt förberedelse kommer webbplatsen se seamless och vara mycket effektivare. Låt oss titta på ett bra exempel som måste ha börjat med bra planering:
Denna affärskritiska form på Grymt bra var tydligt väl genomtänkt. Hela uppdraget och syftet med sidan har noggrant övervägts. Från formuläret och introduktionen till layouten för varje uppsättning fält, med deras etiketter och kontrollstilar, är denna form en modell för planering.
Planering för formulär leder oss faktiskt till flera andra överväganden ...
3. Knapp beteende
Knappar kan användas på en webbplats för olika ändamål, men de verkar också ofta försummas, liksom de olika knapptryckarna. De fyra tillstånden på en knapp är:
- Standard
Detta är standardstatus för en knapp och väntar på att klickas. De flesta designers täcker den här men saknar de andra. - Sväva
Huver-tillståndet ses när användaren musar över knappen. Detta tillstånd är till hjälp för att indikera för användaren att knappen är ett handlingsbart objekt. - Klick
När användaren klickar på knappen indikerar det här tillståndet visuellt att de har klickat på det. Att tillhandahålla denna visuella cue kan hjälpa till att minimera användarnas frustration. - Inaktiverad
Den funktionshindrade knappen är kanske den minst använda men kan vara till stor hjälp för utvecklare. Sällan är detta tillstånd planerat om inte formgivaren har utarbetat en valideringsprocess för formuläret (se nästa avsnitt).
På samma sätt som de olika länkarna, var noga med att beakta de olika tillstånden för knapparna som används på din webbplats. Från popup-inloggningsformulär för att söka fält till anmälningsblanketter för nyhetsbrev, kommer alla dessa knappar att behöva motsvarande stilar.
4. Form validering
En viktig relaterad detalj är formvalidering. Detta är den kritiska punkten där webbplatsen kommunicerar användarens krav och fel i en blankett. Det finns tre grundläggande saker att tänka på:
- Obligatoriska fält
Alla obligatoriska fält ska anges. Oftast görs detta med en asterisk, som ses på Vänligen börja från början :
- Validering i realtid
Vissa valideringar kan göras i realtid då användaren fyller i formuläret. Denna typ av validering informerar användaren så snabbt som möjligt om eventuella problem med de data de har inmatat. Detta kan uppnås mycket bra med detta jQuery-validering plug-in :
- Validering efter bakåt
Denna typ av validering sker efter att användaren har lämnat in formuläret. Stilen som används för validering i realtid upprepas ofta här, men ett annat alternativ är att gruppera alla fel i ett enda meddelande, vilket ses på Mu :
5. Statusmeddelanden: Fel, varningar, bekräftelser etc.
Användare behöver vanligtvis någon typ av feedback efter att ha utfört en åtgärd på din webbplats. Det mest sannolika scenariot är efter att ha skickat ett formulär, men det kan också hända att många andra händelser inträffar. Noggrant överväga din webbplats och de åtgärder som användare kan ta och planera för de meddelanden som webbplatsen behöver kommunicera.
På Livet idag , vi ser ett valideringsmeddelande som enkelt kan fungera som en global stil för felmeddelanden. Och med en liten ändring i färger och ikoner kan den också användas för subtilare varning eller till och med bekräftelsemeddelanden:
6. Utöka bakgrunden på större skärmar
Beroende på webbplatsens stil kan bakgrundselementen vara ett problem för dina utvecklare. De flesta bakgrunder är enkla och kräver inte mycket förberedelse, men vissa är komplicerade av gradienter, mönster och bilder.
Med tanke på att stora skärmar blir allt vanligare och att de flesta mönster planeras för en 960 pixel bred baslinje, är mycket skärm fastigheter kvar. Om din bakgrund innehåller något fjärrkomplicerat, måste du planera hur det kommer att sträcka sig för att fylla större skärmar.
I exemplet som jag byggde under fick jag ta emot en trästruktur som sträckte sig i alla riktningar. Inte den typ av sak du vill ha en tunghänt utvecklare tacklar.
7. Basera HTML-element
För kopiera tunga webbplatser är utformningen och utformningen av grundläggande HTML-element grundläggande och bör inte förbises. Men på många marknadsinriktade webbplatser som har en upptagen layout och en distinkt visuell stil glömmas grundelementen. Och självklart kommer utvecklaren aldrig långt ifrån att skapa en webbplats innan han måste skapa en vanlig sidmall ändå.
Här är grundelementen att alltid planera för: stycken, rubrikerna 1 till 6, oordnade och beställda listor, tabelldata, formulärfält, bilder och fet och kursiv text.
På många webbplatser jobbar jag med, jag sammanställer en stilguide för att hjälpa utvecklarna, något som detta:
8. Webbsida e-post
En sak som jag inte ser någon designplan för är webbplatsgenererade e-postmeddelanden. Ett sådant grundläggande element är lätt att missa eftersom det inte är typiskt kärnfokus på webbplatsen. Och ändå är e-post ett kraftfullt verktyg som kan främja och utöka en tjänst.
Mitt förslag är att noga granska innehållet på webbplatsen i planeringsstadiet för att leta efter eventuella e-postmeddelanden som kan skickas. Några av de vanligaste är:
- Registreringsbekräftelse för brevlistor,
- Registreringsbekräftelse,
- Bekräftelse på formulärtillägg (t.ex. för en kontaktformulär),
- Orderbekräftelse efter ett köp.
Om du verkligen vill blåsa tankarna hos dina kunder och utvecklare, förbereda också en e-postmarknadsmall för webbplatsen. Du ger användarna en smidig övergång från webbplatsen till inkorgen, och du behåller noggrann kontroll över varumärket i olika former.
9. Sidsträckning
Frågan om hur en design kommer att sträcka sig för att anpassa innehållet ändras också sällan men kan vara kritiskt beroende på webbplatsens stil. Låt oss titta på ett exempel där det här kunde ha blivit upprustade:
Full Moon BBQ har en tight hemsida. Denna design tillåter inte mycket rörelse eller förändring i innehållet. Allt har en viss storlek och placering. Så vad händer om ägarna bestämmer sig för att verkligen förlänga välkomstmeddelandet eller lägga till en bild? Lyckligtvis har de planerat för detta. Som du kan se i denna mock-up, har jag redigerat sidan för att inkludera dubbla texten. Sidan sträcker sig perfekt och rymmer för den:
Att förbereda alternativa versioner av en layout med mycket mer innehåll kan vara mycket användbara för att visa hur man planerar för ett sådant scenario.
10. Animationer: popup-fönster, verktygstips, övergångar etc.
På en vanlig HTML- och CSS-webbplats (dvs utan Flash) är animeringar och övergångar så lätt att förbise. Och när de förbises, kommer de ofta inte ens att hysas alls. Så, om animationer är kritiska, är din bästa satsning att ge utvecklare ett exempel på hur de ska fungera så att produkten fungerar som den ska.
Några av de vanligaste platserna animationer uppväxt är i:
- verktygstips
De små popup-fönster när användare mus över element. - Bildrotorer
Startsidan bildspel är allt raseri, och ett brett utbud av alternativ är tillgängliga för övergångar och stilar. - Ljuslåda
Du kan ställa inte bara ljusboxen själv, men också övergången till den.
Var och en av dessa animerade element har en distinkt visuell stil som måste vara inrymd på egen hand.
Varför skulle jag bry mig?
Många av de element som presenteras här tycks vara mer användbara för utvecklarna än konstruktörerna. För att vara rättvis är detta delvis sant: om du förbereder alla dessa element i förväg, kommer utvecklarna att älska dig. Det här är de saker som utvecklare blir trött på att be om eller att behöva räkna ut på egen hand.
Men genom att göra allt detta arbete i förväg, behåller du utvecklare från att gissa, och du behåller således kontrollen över designen. Och genom att behålla kontrollen över designen har du en mycket större chans att kunna lägga till den typ av polska som blir en vanlig webbplats till en enastående. Vissa designers hänvisar till detta som den hemliga såsen som gör sina mönster synliga.
Och om det inte är tillräckligt med motivation, överväg det här. Designers som planerar det här bra och levererar ett komplett paket är helt enkelt mer värdefulla. De skapar inte bara en högkvalitativ produkt, men de minskar också produktionskostnaden. Det betyder att det finns mer utrymme för vinst, vilket givetvis gör alla lyckliga.
Så håll alla dessa finare detaljer i åtanke och ha det roligt att planera din webbplats. Uppriktigt sagt är dessa detaljer halva roliga för att designa för webben, det ständigt föränderliga mediet som rymmer användarinteraktion och byte av innehåll.
Patrick McNeil är frilansskribent, utvecklare och designer. Han älskar särskilt att skriva om webbdesign, utbilda människor i webbutveckling och bygga webbplatser. Patrick senaste bokprojekt är Designerens webbhandbok ; den innehåller många fler ämnen i enlighet med denna artikel. Du kan läsa mer om det på TheWebDesignersIdeaBook.com . Följ Patrick på Twitter @designmeltdown .
Vad designar du för att alla andra verkar glömma? Har du någonsin lagt till sådana extra till dina kunder? Vilken typ av sak tycker du om att utvecklare alltid ber dig att lägga till en design?