Basix Vanlige feil i webdesign

Vi gjør alle feil. Det er menneskets natur. Men i webdesignindustrien kan mange elementer bli satt på plass galt med bare noen få tweaks som trengs for å gjøre dem sterkt. Disse spenner fra typografi til polstring, hvor et enkeltsiffer kan skade webdesignen din drastisk. Heldigvis, når du er i stand til å identifisere hva de vanligste feilene er, kan noen få klikk og noen få knapper på tastaturet redde et synkende design. I dag skal vi se på noen webdesign feil som alle designere bør passe på.


Vi gjør alle feil? Noen er messiere enn andre.

Om Basix

Våre Basix-innlegg handler om å komme i gang med webdesign. Enten du er helt ny for webdesign eller du har designet på nettet for en stund og er interessert i noen "formell" opplæring, er artiklene og veiledningene i dette biblioteket dedikert til å hjelpe deg med å få litt erfaring under deg belte slik at du kan begynne å rocke ut på vanskeligere prosjekter senere!


typografi

Typografi er en av de viktigste funksjonene i et design. I de fleste design dominerer teksten flertallet av siden, så ren, skreddersydd typografi kan være nøkkelen til å låse opp temaets potensial. Det er mange feil som nye eller erfarne designere kan gjøre som bare kan bryte ned den ellers attraktive appellen til en sides typografi.

Sans Serif vs Serif

For denne artiklens skyld antar jeg at leseren vet hva en serif skrifttype er. Det er en viss eleganse i seriffonter som brukes på en nettside, og en mer moderne følelse når en designer benytter det brede spekteret av sans-serif-fonter. Imidlertid blander disse to effektene seg ikke til å bli epitome av god typografi når de brukes samtidig. Faktisk kan blanding av de to under normale omstendigheter skape hybridresultater som, for å være ærlige, bare ikke se bra ut.

Det er ikke å si at blanding serif og sans-serif skrifttyper sammen aldri virker. Faktisk fungerer det i noen tilfeller ganske bra, spesielt når typene av skrifter brukes på forskjellige nivåer i et hierarki. For eksempel bruker A List Apart en serif font for en tittel, mens du bruker en sans-serif-skrift for hovedinnholdet.

Antall skrifter

En annen stor feil som noen designere går inn i, er å bruke mange forskjellige skriftfamilier, i stedet for et utvalgt par. Bruke flere skrifter kan resultere i en frakoblet design som forstyrrer lesbarheten av innholdet ditt. I stedet for innhold med flere skrifttyper skaper et forsøk på å bruke en skrifttypefamilie per tier av designens visuelle hierarki generelt en finere skrifttypeskjema som ser mye mer forent ut enn en rekke tilfeldige stiler her og der.

På samme måte kan for mye variasjon i skriftstørrelse og linje / brevavstand skape en frakoblet leseopplevelse og en samlet sluttbrukeropplevelse. Hold det konstant og kjent.

Mangel på kontrast

Et stort problem som kan presentere seg er mangel på kontrast mellom typografi og bakgrunn. Dette kan medføre reelle lesbarhetsproblemer som noen brukere vil finne det vanskelig å skille mellom de to settene med farge. Ta eksempelet før, for eksempel. Hvilken er lettere å lese, venstre eller høyre? Høyre, venstre!

Det er ikke en kompleks teori bak kontrast. Du ville ikke sette svart skrift på en svart bakgrunn fordi du ikke kan bestemme hva som skriver og hva er bakgrunnen. Det eneste forslaget er å få tekstfargen så nær motsatt ekstreme til bakgrunnen, uten å skade andre estetiske egenskaper, for å unngå frustrasjon på sluttbrukerens slutt. Ellipsis-temaet viser god kontrast i topptekstområdet. Ville en lyserød eller lilla jobbe der i stedet?


Padding, Margins and Spacing

Ikke lenger sliter vi på små skjermer (vi tenker hovedsakelig på desktop surfing her, ikke smarttelefon). I stedet lever vi på 21 "+ skjermbilder og surfer på oppløsninger høyere enn HD, noe som gir designere mye mer plass til å jobbe i. Derfor bør du ikke føle deg i det hele tatt squashed og bruke mer plass til polstring og marginer for å forbedre estetikken til ditt design. Ta for eksempel Apples design, det bruker mye hvitt mellomrom som konsentrerer all farge og handling på innholdet det bryr seg om. Det er ikke å si at du bør ha mye hvit plass, men designene dine kan ha nytte av å bli skilt fra hverandre, slik at de lett skiller seg fra hverandre.

Det er viktig å holde avstanden jevn og jevn over hele ditt design så godt som mulig i både intern utfylling og ytre marginer. For eksempel, se diagrammet nedenfor. Sistnevnte halvdel ser mye bedre ut fordi alle margene er de samme 18 px plass. Alt er tilpasset samme gridoppsett. Det er klart og hvert område skiller seg fra en annen, men det kaster ikke nødvendigvis bort noen plass.

Grid Systems

På samme måte er nettverket et viktig trekk ved de mest vellykkede webdesignerne. Ved hjelp av et rutenett holder alt i orden og rydder opp design med konsekvent renner for bruk. Gitterbasert design gjør alt så mye mer organisert. Denne delen er ikke i denne artikkelen fordi det er en feil å ikke bruke en, ved å vurdere det som en løsning hvis du føler at designene dine feiler i et område som det bidrar til.


Opprettholde gamle verdier

Næringen av webdesign er en rask tempo, med nye utviklinger som oppstår konsekvent. En av de verste ting som kan skade designen din, er å fortsette å utvikle og designe på måter som er populære år siden. I 2003 hadde Microsoft Frontpage et verktøy for "layouttabeller", men ingen god utvikler burde noensinne våge å åpne en bordtag i navnet på oppsettet. På samme måte er de fantastiske animerte GIF-ene og bakgrunnsmusikken av yester-tiåret en massiv nei-nei. Åh, og tenk ikke på å bruke rammer som en del av ditt webdesign. Alle disse nåværende brukervennlighet og andre problemer, og det er bare ikke hvordan vi gjør ting lenger.

Speider Schneider har en flott artikkel om "The Stone Age of Web Design" her på Tuts +. Pass på å sjekke det ut for en veiledning på hva nettstedet ditt bør ikke ser ut som.


Eldre teknikker som bruk av tabeller eller iFrames kan virke fristende, men det er ofte en mer grasiøs måte å få ting gjort hvis du ser deg rundt på mer moderne tilnærminger.

Proportjon og størrelse

Designene dine skal alltid holde seg til en slags hierarki som bidrar til størrelse og proporsjon. Enkelt sagt, dine viktigste elementer skal være de største og la dem redusere i størrelse mens du fortsetter. Det betyr ikke at det minst viktige elementet må være 4px høyt, men det bør være kjørekartet mot skalaen av elementer på en side. De bør fortsatt være i forhold til inngangsprecisjonen til hvilken enhet du designer for og lett nok til å se. Hvis de er der i det hele tatt, vil de være der for en grunn.

Alt dette kommer fra et brukbarhetsperspektiv som tyder på at alle elementene skal være lett tilgjengelige og ikke trenger noen rettferdighet: Ikke gjør brukeren noe ekstra enn bare se på noe. Ingen skrubbing, ingen zooming, ingen overdreven forsøk på å klikke på noe som er tynnere enn et gressblad.

Du har også sikkert hørt om guddommelig andel, eller "The Golden Ratio". Selv om ikke alle designene må følge dette prinsippet, bør de fleste standarddesign sannsynligvis prøve for enhver pris. Forholdet mellom 1 og 1,62 (i avrundet form) er vanligvis kjent som Golden Ratio, og brukes ikke bare i webdesign, selv om vi fortjener litt kreditt for å utnytte den.

The Golden Ratio presenterer balanse i et webdesign siden vi mennesker er vant til det; Forholdet mellom underarmen til hånden er 1 til 1,62 som det menneskelige smilet. Å finne noen attraktive kan også være basert på Golden Ratio, hvorfor vi føler at Golden Ratio er "naturlig". Å holde alt som nettopp balansert kan gjøre webdesign og lykke bedre, da det er mer naturlig for brukeren.

Du kan lese mer om Golden Ratio og hvordan matte påvirker webdesign her.


Glemmer hvorfor du gjør dette

Å glemme hovedformålet med designet er alltid dårlig. Hvis designen din for e-handel, og du har denne briljante ideen for en glidebryter som bare ikke passer inn i det nåværende prosjektet, må du ikke integrere det bare for det. På samme måte, hvis du har en vane med å bruke denne fantastiske rullegardinmenyen, brukte du utallige timer på, men det ødelegger bare bruken av det aktuelle nettstedet, ikke bruk det. Ikke bli distrahert av noe annet, annet enn hva ditt design til slutt vil bli brukt til. Gå tilbake med jevne mellomrom og vurder om målet samsvarer med dagens design og, hvis ikke, manipulere det for å gjøre det.


For ThemeForest Inclined

Selvfølgelig er det en større sjanse for at du kan være en ThemeForest forfatter hvis du leser denne artikkelen. Derfor har jeg noen få tips til å dele med deg, basert på de vanlige avslagsfaktorene som revisjonsgruppen regelmessig må kjempe med.

  • Linjehøyde - wikien antyder at mange innsendte designmaler mangler en god mengde linjehøyde og / eller avstand. Å ha en romslig linjehøyde på rundt 1,3-1,6em bidrar til designets bedre brukervennlighet, men gjør det også renere. Ved å bruke "em" -verdien for å måle linjens høyde, bidrar det også til å holde det i forhold til teksten.
  • Visuell hierarki - Som nevnt tidligere kan det også være fordelaktig å ha et sterkt synlig visuelt hierarki siden det hjelper brukeren med å bestemme hva de skal lese først og deretter la dem jobbe seg nedover nevnte hierarki. Dette kan være spesielt nyttig på nettsteder som ønsker å selge noe, da det bidrar til å tiltrekke leserens oppmerksomhet mot et bestemt element på siden, som de fantastiske tingene et produkt kan gjøre, eller det er nøye tatt i skudd, mens de mindre attraktive tingene holdes - som pris - litt mer skjult.
  • Nettleserkompatibilitet - En av de verste ting du kan gjøre er å fremmedgjøre en del av nettstedets potensielle publikum ved å gjøre et nettsted ikke fungerer på deres valgte nettleser. Sjansene er at brukeren vil forlate stedet i stedet for å bruke tid frustrert når de forsøker å utvikle seg gjennom designet. Å sørge for at alle de største nettleserne er dekket, er alltid tilrådelig, og riktig testing bør sikres. Hvis du ikke har en Mac, ta deg ned til en Apple Store og prøv nettstedet ditt der ute hvis det bidrar til ditt endelige design, ser bedre ut..

Forhåpentligvis har du litt mat til å tenke på hva du ikke bør gjøre. Nå, gå tilbake til hjemmesiden og oppdag hva du bør gjør det!