Har du en regelbok när det gäller webbdesign? Det finns några regler som gäller för nästan alla webbdesignprojekt, låt oss kalla dem "webdesign" -kommandon ?.
Oavsett hur stor eller liten webbplatsen, dessa regler är grunden för bra design. Om du följer med dessa grundläggande riktlinjer och gör dem till en del av ditt tänkande för varje projekt du börjar, kommer du att undvika många fallgropar som designers kan snubbla in!
1. Du kommer att vara konsekvent
Gör designen så enkelt som möjligt för användarna att interagera med Konsekvent design är lätt att använda och förstår design. Användarengagemang och åtgärder, såväl som visuella, borde vara likartade i utseende och användning under en enda design.
Det betyder att knappar har samma färg och använder samma svevertillstånd för att hjälpa användarna att veta hur man ska interagera, rubrikerna är lika stora och använda samma typsnitt i hela konstruktionen, och element som färger följer en palett som är identifierbar och associerad med varumärket.
Andra visuella element bör också följa en konsekvent stil med en stil och användningsplan för element som ikoner eller fotografi, video eller illustrationer. Designen ska ha en röst som används för kopieringsblock som matchar den övergripande estetiken.
Alla dessa konsekvenser bidrar till övergripande användbarhet, vilket gör utformningen så enkel som möjligt för användarna att interagera med.
2. Du ska använda Whitespace
Ytterligare utrymme runt element kan hjälpa till att skapa separation och göra dem enklare att läsa. Det finns ingen anledning att ställa in varje enskilt element i rymden ovanför rullningen. Använd whitespace för att skapa rytm och flöde, skapa visuell hierarki och hjälpa användarna att gå igenom designen.
Om innehållet är bra kommer de att rulla.
Och whitespace kan faktiskt bidra till att uppmuntra den användarens åtgärd genom att dra ögat ner på skärmen.
Whitespace är ännu viktigare eftersom skärmstorlekarna blir mindre. Ytterligare utrymme runt element kan hjälpa till att skapa separation och göra dem enklare att läsa. (Tänk på hur fördelaktigt lite extra utrymme kan vara när det gäller att knacka på knappar med lätthet.)
Är du osäker på var du ska inkludera blankutrymme i designen? Börja här:
- Runt knappar eller andra interaktiva element
- Som linjespacing mellan linjer av typ för att göra behandlingen lättare
- Mellan element så är tings öst för att skilja mellan varandra, som omslag på foton inbäddade i textblock
- I formulärfält så är de lätta att trycka på mobila skärmar
- Runt om något element som du vill att användarna ska fokusera på
3. Du ska använda ett rutnät
Ett nät är grunden för användarupplevelse. När du designar med ett rutnät, är den slutliga webbplatsen mer exakt, konsekvent och element placeras i en ordning som gör visuell känsla.
Raderna är både horisontella och vertikala, även om det mest kända webbdesignnätet kan vara kolonnens 12 kolonn för vertikala rutor för anpassning av element.
Rutenettet är något du bara ser i designprocessen och om du har problem med att hitta placeringar för element eller skapa en organiserad kontur, kan ett rutnät vara en total livräddare.
4. Du får inte glömma användarmönster
Användare gör saker på ett visst sätt och förväntar sig specifika saker från din design. För att få så mycket framgång som möjligt bör designen använda vanligt accepterade användarmönster (återkommande lösningar på designproblem) så att människor vet exakt hur designen fungerar.
Vanliga användarmönster inkluderar:
- Beställning av information i formulär, börjar med ett namn eller e-mail och slutar med? Skicka?
- Placering av navigeringsmenyer
- Plats och klickbar natur på kundvagnen ikonen för e-handel
- Hur meddelanden fungerar
- Ikoner för sökning och chatt, bland annat
UI Design Patterns har en lång lista över användarmönster för alla typer av konstruktionssituationer.
5. Du ska använda likhet i UI-åtgärder
Varje element i en webbdesign ska fungera som alla andra element av samma typ. Dessa element bör också ha en visuell identitet så att användarna vet vad de är och vad de gör på ett ögonkast.
Det finns så många användargränssnitt som kan byggas in i en design som följer med Gestalt-principen om likhet är ett måste. Gruppering av visuella element och åtgärder så att de är visuellt identifierbara hjälper till att skapa en bättre övergripande upplevelse för användarna.
6. Du ska använda typografi väl
Gå tillbaka från designen och se om bokstäverna är lätta att läsa från ett avstånd. Du behöver inte vara en master typograf, men det hjälper definitivt.
Så mycket av vad som utgör en bra design är förankrad i läsbarhet och läsbarhet. Och dessa begrepp beror på hur du väljer och använder teckensnitt.
När du är i tvivel, välj enkla typfältpar som serif och sans serif. Gå tillbaka från designen och se om bokstäverna är lätta att läsa från ett avstånd. Kolla sedan på bokstäverna på en liten duk, till exempel en telefonskärm för att säkerställa att det är lätt att läsa en blick också.
Försök använda typen i en miljö med hög kontrast, till exempel ljus typ på en mörk bakgrund eller mörktyp på en ljus bakgrund, så att varje ord är lätt att läsa.
7. Du ska inte glömma näthinnans skärmar
Även de minsta skärmarna kan göra element och bilder med nära pixel-perfektion.
Du måste överväga hur du hanterar bilder, ikoner och andra element så att allt gör vackert oavsett skärmstorlek. När det är möjligt kan ett vektorformat vara den perfekta lösningen, vilket är en orsak till att SVG växer i popularitet hela tiden.
Om du inte har en bild som har upplösningen att passa vanliga skärmstorlekar, använd inte den. Ingen bild alls är bättre än en dålig eller pixelbildad bild.
8. Du skall vara ärlig
Din design ska vara trogen för ditt småföretag, information eller varumärke och transparent i vad du gör.Stela inte en design eller bild, lägg inte till med falska nyckelord för att driva trafik och vara sant mot vem och vad ditt innehåll handlar om.
Med så mycket webbruta vill användarna interagera med autentiska mönster. Att lura användarna att göra något eller anmäla sig till en produkt eller tjänst eller bara vilseleda dem om ett ämne eller en information ska vara emot din personliga etiska kod. Ta inte på projekt som förväntar sig detta från designen.
9. Du kommer inte att ignorera tillgängligheten
Webben ska kunna användas av så många som möjligt. Och även om det kan vara svårt att se till att designen är tillgänglig är det inte så komplicerat som du kanske tror.
Google har en bra guide till webbplatsens tillgänglighet, som den definierar så här:
I stort sett menar vi att webbplatsens innehåll är tillgängligt när vi säger att en webbplats är tillgänglig, och dess funktionalitet kan drivas av bokstavligen någon. Som utvecklare är det lätt att anta att alla användare kan se och använda tangentbord, mus eller pekskärm och kan interagera med sidinnehållet på samma sätt som du gör. Detta kan leda till en upplevelse som fungerar bra för vissa människor, men skapar problem som sträcker sig från enkla irritationer till visstoppar för andra.
Tillgänglighet hänvisar då till användarnas erfarenhet som kan vara utanför det smala området för den typiska användaren, som kan komma åt eller interagera med saker annorlunda än vad man förväntar dig. Speciellt handlar det om användare som upplever någon typ av försämring eller funktionsnedsättning - och tänk på att den erfarenheten kan vara icke-fysisk eller tillfällig.
Många av principerna om bra design, såsom storlek, kontrast och utrymme, bidrar till övergripande tillgänglighet.
WebAIM har en checklista, liksom andra verktyg, för att hjälpa dig att avgöra om din design är tillgänglig. Checklistan täcker fyra områden som de avser tillgänglighet: Är designen uppfattningsbar, operativ, förståelig och robust?
10. Du kommer att vara responsiv
Det borde ganska mycket säga självklart år 2018, men din webbplats måste vara responsiv. Det inkluderar varje element, från text till bilder till knappar till den övergripande ramen.
Varje design måste fungera på alla enheter. Period.
Slutsats
En fast uppsättning regler kan hjälpa dig att komma in i ett designprojekt snabbare och arbeta mer konsekvent. Observera att inget av dessa bud säger dig hur ett projekt ska se ut; De är rotade i teorin om hur du skisserar och skapar varje webbplats.
Har du ytterligare webbdesignregler att lägga till i dessa bud? Låt oss veta vad de är på sociala medier. Var noga med att märka Design Shack!