10 bud om nettdesign for hvert prosjekt

Har du en regelbok når det gjelder design av nettsteder? Det er noen regler som gjelder for stort sett alle webdesignprosjekter - la oss kalle dem “webdesignbudene”.

Uansett hvor stort eller lite nettstedet er, er disse reglene grunnlaget for god design. Hvis du følger disse grunnleggende retningslinjene, og gjør dem til en del av tanken din for hvert prosjekt du starter, unngår du mange av fallgruvene som designere kan snuble i!

1. Du skal være konsekvent

Gjør designen så enkel som mulig for brukere å samhandle med

Konsistent design er enkel å bruke og forstå design. Brukerengasjementer og handlinger, så vel som visuelle bilder, skal være like i utseende og bruk gjennom en enkelt design.

Dette betyr at knapper har samme farge og bruker de samme svevetilstandene for å hjelpe brukere å vite hvordan de skal samhandle, overskrifter er i samme størrelse og bruker samme skrifttype gjennom hele designen, og elementer som farger følger en palett som kan identifiseres og assosieres med merket.

Andre visuelle elementer bør også følge en konsistent stil, i tillegg til en stil og bruksplan for elementer som ikoner eller fotografering, video eller illustrasjoner. Designet skal ha en stemme som brukes til kopiblokker som samsvarer med den generelle estetikken.

Alle disse elementene av konsistens bidrar til generell brukbarhet, noe som gjør designet så enkelt som mulig for brukere å samhandle med.

2. Du skal bruke Whitespace

Ekstra plass rundt elementer kan bidra til å skape separasjon og gjøre dem lettere å lese.

Det er ingen grunn til å stappe hvert eneste element i rommet over rullen. Bruk et mellomrom for å etablere rytme og flyt, lage visuelt hierarki og hjelpe brukere å bevege seg gjennom designen.

Hvis innholdet er bra, vil de bla.

Og mellomrom kan faktisk bidra til å oppmuntre til brukerens handling ved å trekke øyet ned på skjermen.

Whitespace er enda viktigere etter hvert som skjermstørrelsene blir mindre. Ekstra plass rundt elementer kan bidra til å skape separasjon og gjøre dem lettere å lese. (Tenk på hvor gunstig litt ekstra plass kan være når det kommer til å tappe knapper med letthet.)

Er du usikker på hvor du skal inkludere hvitrom i designen? Start her:

• Rundt knapper eller andre interaktive elementer
• Som linjeavstand mellom linjene av typen for å gjøre lesingen enklere
• Mellom elementer slik at tings er øst for å skille fra hverandre, for eksempel innpakning på bilder innebygd i tekstblokker
• I skjemafelt slik at de er enkle å tappe på mobilskjermer
• Rundt alle elementer du vil at brukerne skal fokusere på

3. Du skal bruke et rutenett

Et rutenett er grunnlaget for brukeropplevelse. Når du designer med et rutenett, er den endelige nettsiden mer presis, konsistent og elementer plasseres i en rekkefølge som gir visuell mening.

Rutenett er både horisontalt og vertikalt, selv om det mest kjente nettdesignnettet kan være det 12 kolonnes vertikale rutenettet med kolonner for å justere elementer.

Rutenettet er noe du bare ser i designprosessen, og hvis du har problemer med å finne plasseringer for elementer eller lage en organisert disposisjon, kan et rutenett være en total livredder.

4. Du skal ikke glemme brukermønstre

Brukere gjør ting på en bestemt måte og forventer spesifikke ting fra designet ditt. For å få mest mulig suksess, bør designen bruke ofte aksepterte brukermønstre (tilbakevendende løsninger på designproblemer) slik at folk vet nøyaktig hvordan designet fungerer.

Vanlige brukermønstre inkluderer:

• Rekkefølgen av informasjon i skjemaer, starter med navn eller e-post og slutter med "send"
• Plassering av navigasjonsmenyer
• Plassering og klikkbar karakter av handlekurvikonet for netthandel
• Hvordan varsler fungerer
• Ikoner for blant annet søk og chat

UI Design Patterns har en lang liste over brukermønstre for alle typer designsituasjoner.

5. Du skal bruke likhet i UI-handlinger

Hvert element i et nettsteddesign skal fungere som alle andre elementer av samme type. Disse elementene skal også ha en visuell identitet slik at brukerne vet hva de er og hva de gjør på et øyeblikk.

Det er så mange brukergrensesnitthandlinger som kan bygges inn i en design at overholdelse av Gestalt-prinsippet om likhet er et must. Gruppering av visuelle elementer og handlinger slik at de er visuelt identifiserbare vil bidra til å skape en bedre totalopplevelse for brukerne.

6. Du skal bruke typografi godt

Gå tilbake fra designet og se om bokstaven er lett å lese på avstand.

Du trenger ikke å være en master typograf, men det hjelper definitivt.

Så mye av det som utgjør god design, er forankret i lesbarhet og lesbarhet. Og disse konseptene avhenger av hvordan du velger og bruker skrifter.

Hvis du er i tvil, velger du enkle skrifttypar som en serif og sans serif. Gå tilbake fra designet og se om bokstaven er lett å lese på avstand. Så kan du se på bokstavene på et lite lerret, for eksempel en telefonskjerm for å sikre at det er enkelt å lese med et øyeblikk der også.

Forsøk å bruke typen i et miljø med høy kontrast, for eksempel lys type på en mørk bakgrunn eller mørk type på en lys bakgrunn, slik at hvert ord er lettlest.

7. Du skal ikke glemme netthinneskjermer

Selv de minste skjermene kan gjengi elementer og bilder med nær pixel-perfeksjon.

Du må vurdere hvordan du håndterer bilder, ikoner og andre elementer, slik at alt blir vakkert uavhengig av skjermstørrelse. Når det er mulig, kan bruk av vektorformat være den ideelle løsningen, noe som er en grunn til at SVG vokser i popularitet hele tiden.

Hvis du ikke har et bilde som har oppløsningen som passer til vanlige skjermstørrelser, ikke bruk det. Ingen bilder i det hele tatt er bedre enn et dårlig eller pikselert bilde.

8. Du skal være ærlig

Designet ditt skal være tro mot småbedrifter, informasjon eller merkevare og gjennomsiktig i det du gjør. Ikke stjel design eller bilde, ikke fyll med falske nøkkelord for å drive trafikk og være tro mot hvem og hva innholdet ditt handler om.

Med så mye web-rot ønsker brukere å samhandle med design som er autentiske. Å lure brukere til å gjøre noe eller registrere seg for et produkt eller en tjeneste eller bare villede dem om et emne eller informasjon, bør være i strid med din personlige etiske retningslinjer. Ikke ta på deg prosjekter som forventer dette fra designen.

9. Du skal ikke se bort fra tilgjengeligheten

Internett skal kunne brukes av så mange mennesker som mulig. Og selv om det kan høres vanskelig ut til å sikre at designen er tilgjengelig, er den ikke så komplisert som du kanskje tror.

Google har en flott guide til tilgjengelighet på nettsteder, som den definerer slik:

I det store og hele, når vi sier at et nettsted er tilgjengelig, mener vi at nettstedets innhold er tilgjengelig, og at dets funksjonalitet kan betjenes av bokstavelig talt hvem som helst. Som utviklere er det lett å anta at alle brukere kan se og bruke et tastatur, mus eller berøringsskjerm, og kan samhandle med sideinnholdet ditt på samme måte som du gjør. Dette kan føre til en opplevelse som fungerer bra for noen mennesker, men skaper problemer som spenner fra enkle irritasjoner til show-stoppere for andre.

Tilgjengelighet henviser da til opplevelsen fra brukere som kan være utenfor det smale området for den 'typiske' brukeren, som kan få tilgang til eller samhandle med ting på en annen måte enn du forventer. Konkret angår det brukere som opplever en form for svekkelse eller funksjonshemming - og husk at den opplevelsen kan være ikke-fysisk eller midlertidig.

Mange av prinsippene for god design, som størrelse, kontrast og plass, bidrar til den generelle tilgjengeligheten.

WebAIM har en sjekkliste, så vel som andre verktøy, for å hjelpe deg med å finne ut om designen din er tilgjengelig. Sjekklisten dekker fire områder når det gjelder tilgjengelighet: Er utformingen oppfattelig, brukbar, forståelig og robust?

10. Du skal være lydhør

Det skal ganske mye være en selvfølge i 2018, men nettstedet ditt må være responsivt. Som inkluderer hvert element, fra tekst til bilder til knapper til det generelle rammeverket.

Hver design må fungere på hver enhet. Periode.

Konklusjon

Et solid regelverk kan hjelpe deg med å komme raskere inn i et designprosjekt og jobbe mer konsekvent. Legg merke til at ingen av disse budene forteller deg hvordan et prosjekt skal se ut; de er forankret i teorien om hvordan du skisserer og oppretter hvert nettsted.

Har du tilleggsregler for webdesign å legge til i disse budene? La oss få vite hva de er på sosiale medier. Bare sørg for å merke Design Shack!