10 webdesign regler som du kan bryte
Siden webdesign og design generelt har utviklet seg, har det blitt etablert regler for å sikre konsistente og brukbare design.
Noen av disse reglene ble opprettet bare fordi nettsiderne misbrukte visse prinsipper uten hensyn til brukerne.
Men disse reglene blir ikke håndhevet av noen, og bør brytes når det er nødvendig, spesielt når de bryter dem, vil det føre til et fantastisk design.
I denne artikkelen presenterer vi 10 regler som du kan bryte om det passer dine designbehov.
Regel nr. 1: Vis ikke den horisontale rullefeltet
Et betydelig antall mus har ikke et horisontalt mushjul. Dette gjør det vanskelig å bla til venstre eller høyre når en nettside innhold strekker seg forbi sidene av nettleseren.
Det kan være irriterende å ta med musemarkøren ned til bunnen av vinduet og dra rullefeltet over for å se et ord eller to som ligger utenfor det synlige området på siden. Når det er sagt, her er noen veldesignede nettsteder som gjør rullefeltet til å fungere på effektive måter.
Benek
Benek bruker JavaScript for å endre rulleretningen til mushjulet fra vertikal til horisontal. Hvert element i Beneks portefølje er delt inn i sin egen kolonne. Siden har en overraskende frisk følelse og flyter jevnt.
Sko Guru
Sko Guru kommer vekk med horisontal rulling fordi det drar nytte av måten folk ser på sko. Folk ser på de fleste produkter fra topp til bunn, men skoene er forskjellige. Folkets øyne beveger seg vanligvis over skoens lengde. Ved å bruke denne vanen til sin fordel, gjør Shoe Guru sin nettside designstrøm i samme retning, slik at bevegelsen føles naturlig.
Stephane Tartelin
Stephane Tartelin bruker den horisontale rullefeltet for å gjøre hans kunstverk ser ut som det er i et kunstgalleri. Selv om det vertikale mushjulet ikke fungerer som det gjør i eksemplene ovenfor, virker effekten overraskende bra. Du kan til og med hevde at effekten ville bli redusert dersom mushjulet ble omkodet for å rulle horisontalt.
Grafisk terapi
Samtidig som Grafisk terapi viser ikke en horisontal rullestang på siden, det tillater fortsatt horisontal rulling ved å klikke og dra rundt skjermen. Grafisk teori brukte horisontal navigasjon fordi alle bildene er i samme høyde, men ikke i samme bredde. Den horisontale navigasjonen hjelper nettstedet til å flyte jevnt.
Den horisontale måten
Den horisontale måten er et showcase av nettsteder som bruker horisontal rulling. Grungy-grafikken er vakker, og dette nettstedet er unikt så langt som CSS-gallerier går.
Regel # 2: Bruk et minimalt antall skriftfaser
For mange skrifttyper er vanligvis i konflikt med hverandre og overvelder seeren. Hver skrift har en personlighet, og for mange personligheter kan skape forstyrrelse.
For å effektivt bruke mer enn bare et par fonter, må et design være veldig tekstorientert, og resten av designet må være relativt stille. Her er noen eksempler på nettsteder som bruker denne følelsen av konflikt og forstyrrelse for å engasjere brukeren.
Lenker LA
Lenker LA bruker mange skrifter i et ikke-lineært layout for å skape en følelse av energi. Siden er vanskelig å lese raskt, men trekker brukeren inn. Det er også verdt å merke seg at ingen av skrifter er altfor dekorative; hvert ord er leselig, og holder designen skarp og ren.
Geo Elements Design Studio
Bruke en rekke skrifttyper gir vanligvis en følelse av energi og kaos, men Geo Elements Design Studio nettsiden er veldig åpen og ren. Hver skrift er gitt sin egen plass, slik at betrakteren ikke knytter den til en annen skrift. Bildet av himmelen i bakgrunnen bidrar til å styrke åpenhetsfølelsen.
Richard Stelmach
I motsetning til det siste eksempelet, Richard Stelmach skyver sine forskjellige skrifttyper tett sammen. Designet fungerer fordi bare en skrifttype ikke ser håndskrevet ut, og de to andre fungerer bra med illustrasjonen. Håndskrevne skrifttyper fungerer vanligvis godt sammen, selv om det er mange forskjellige skrifttyper.
Satsu
Satsu ser ut til å ha mange forskjellige skrifttyper, men har faktisk bare tre (ikke inkludert sportsrådets porteføljepost). Ved å adskille alt nøye, forbinder Satsu visse tekstlinjer med hverandre, selv om teksten kan være i forskjellige skrifttyper.
Logotypen er i en skrifttype, og de to undertitlene har hver sin egen skrift, men titteren grupperer disse tre teksten sammen. Satsu er i stand til å skape energi uten å overvelde siden med personligheter.
Regel # 3: Ikke bruk for mange farger
Frykten for å gå for langt med et design er det som skiller fagfolk fra rookies og rookies fra det uvitende. Den uvitende prøver å gjøre designene deres så ekstreme som mulig, med ord i brann, blinkende tekst, og så mange farger som mulig.
Rookies ønsker å holde designene deres subtile og enkle på øyet, men til slutt kan deres design se livløs ut. Følgende øye-behagelig design er av noen sanne fagfolk som skyver grenser.
Matt Mullenweg
Matt Mullenweg er vakkert farget design ser ut som et akvarellmaleri (siden har blitt oppdatert siden denne artikkelen ble skrevet). Alle fargene i bakgrunnen ville ta tak i alles oppmerksomhet.
Generelt vil gode design med massevis av farger ha disse fargene i bakgrunnen, med en enklere palett foran. Å lese tekst er svært vanskelig når det skjer for mange ting.
Travic Isaacs
Travis Isaacs design har en fargerik vertikal gradient i bakgrunnen som gjør designet til å virke fargerikt hele veien. Denne nettsiden har lys rosa som sin lenkefarge, noe som er et godt valg for designere som ønsker å skape en fargerik effekt.
James De Angelis
James De Angelis ' Nettstedet viser at teksten kan være fargerik uten å komme over som rookie-like. Designet er veldig ledig, og tagline er sikkert gitt midtveis.
Regel # 4: Gjør nettstedets mål åpenbart
Noe som virkelig blir proppet i ørene til unge designere er at et design burde umiddelbart fortelle seerne hva de ser på før de leser noen tekst.
Brandgjenkjenning er viktig for store selskaper, men noen ganger må de mindre gutta være litt mer kloge for å få betrakterens oppmerksomhet. Å holde tilbake informasjon kan intrigere betrakteren og "tette" folk inn i å ønske å lære mer.
Bruk av denne teknikken til webdesign kan i stor grad øke den tiden brukerne bor på nettstedet ditt.
Cetrotrees
På de fleste porteføljer i dag presenterer frilanseren eller firmaet seg selv og forklarer sitt arbeid. Cerotreees i stedet legger noen vaguelt merkede lenker til venstre og prøver av sitt arbeid til høyre, men ingenting forklarer ideen eller personen bak den.
Luften av mysterium rundt nettstedet lokker brukeren til å bli.
Den siste Mixtape
Den siste Mixtape er en annen portefølje som viser sitt arbeid og ingenting mer. Slike design utstråler en følelse av ekstrem tillit. De prøver aldri å selge seg selv; de forventer bare at brukeren blir blåst bort og kommer til å be om en kontrakt.
Peter Pearson
Å bruke en sprutskjerm er en god måte å redusere brukerens tankegangsprosess og inspirere dem til å grave dypere. Sprengingssiden har som mål å forklare nettstedet raskt med bilder eller en liten bit av tekst.
Men i Peter Pearson er saken er målet å fremkalle en følelse. Den store himmelen og splattered tekst-effekten gjør en god jobb for å fremkalle nysgjerrighet fordi disse tingene vanligvis ikke vises sammen. Dette nettstedet gjør også en god jobb for å fortsette følelsene som er skapt av splash-siden, i selve innholdet.
Sideskjermbevegelsen og animerte linjer som følger brukeren, er virkelig effektive.
Piepmatzel
En fin måte å komme seg rundt på språkbarrieren er å ikke bruke noen ord. Piepmatzel er et CSS-galleri, og folk som har sett et CSS-galleri før, vil trolig gjenkjenne det som en med en gang.
De som ikke kan være fascinert nok til å gi noen av miniatyrbildene et klikk i håp om å finne ut mønsteret. Den lille mengden av tekst nederst på siden hjelper med å sortere og er overflødig.
Regel # 5: Navigasjon bør være lett å finne ut
Navigasjon bør ikke være flaskehalsen på et nettsted. Brukere skal kunne finne det de vil ha raskt. Noen ganger kan det imidlertid være uintensivt, men engasjerende navigasjon, at brukeren føler seg koblet til nettstedet og hva det er fremme.
Alvin Tang
Som nevnt i forrige avsnitt, blir en luft av tillit formidlet når en portefølje ikke staver seg ut. Dette er tilfellet i Alvin Tangs fotografiportefølje. Når du først kommer på nettstedet, gjenkjenner brukeren ikke umiddelbart ordene de ser som lenker.
Denne usikkerheten bør bede dem om å stikke rundt litt. Flytter musen over et ord avslører at det faktisk er en lenke, og når du klikker på det, blir et nydelig bilde lastet. Bildet vil lokke brukerne til å fortsette å bla.
For å se flere bilder må brukerne klikke på "Tilbake" -knappen i nettleseren (noe de fleste forstår å gjøre) og deretter klikke på en annen lenke. Det er ingen håndholding i designet, og det virker veldig bra. Dette er ikke en konvensjonelt "nydelig design", men det leverer akkurat det den trenger.
Kasulo
Kasulo 's Navigasjon er ikke veldig vanskelig å finne ut, men den gjennomsnittlige brukeren kan ikke vite nøyaktig hva man skal gjøre ved å komme frem på nettstedet. Etter det første klikket blir alt tydelig.
Brukeren navigerer i porteføljestykkene i 3-D-stil, og de siste elementene vises nærmest begynnelsen. Bruk musen hjulet enda morsommere.
Marcio Kogan
Marcio Kogan er Nettstedet er et annet eksempel på flott navigasjon som ikke er umiddelbart åpenbar. Instruksjonen "Dra meg" er vanskelig å motstå, og når brukeren gjør det, er de på vei til cruising porteføljen. Mus-over forhåndsvisninger er en liten detalj, men virkelig imponerende.
Ceranco
Hvis en klient skulle spørre en designer for å lage sitt nettsted i 3-D, som et førstepersonsskytespill, ville de fleste designere stille le av seg selv, ta et dypt pust, og deretter sakte forklare hvorfor det ville være en dårlig idé .
Mens nettsiden for Ceranco er ikke akkurat en 3-D skytter, det kan lett bli forvirret for en slags indie dataspill. Nettsteder som dette er flotte på engasjerende brukere. Mens den lange belastningstiden og dårlig søkemotoroptimalisering gjør dette mindre enn ideelt for de fleste prosjekter, er det definitivt verdt en ekstra tanke.
Regel # 6: Bruk forskjellige farger for tekst og bakgrunn
Denne regelen er kanskje ikke skrevet over alt, men mange rookies er så redd for å lage tekst ulæselige at de ikke anser å bruke samme grunnfarge for både bakgrunnen og selve fonten. Du kan følge noen enkle teknikker for å få de samme fargene til å fungere.
Linksys
De Linksys Nettstedet er pent på grunn av hvordan det har en blå for alle sine koblinger, selv om bakgrunnsfargen er forskjellige nyanser av blått. Mens en risiko og kanskje ikke den største fargebeslutningen, fungerer det.
Brad Colbow
Brad Colbow's design ligner på Linksys 'på grunn av den blå teksten på blå bakgrunn. Blå på blå er vanskelig å trekke av pent, spesielt med så mange forskjellige blues gjennom hele siden.
Powerset
Så langt i denne delen har vi sett bare blå nettsteder, fordi blå tekst er vanskeligst for det menneskelige øyet å lese, og så lesbar blå type er alltid imponerende. Hvis en tekst-effekt virker i blått, vil det mest sannsynlig fungere i hvilken som helst farge.
Powerset bruker en letterpress-stil for sin skrifttype for å skape en 3-D-effekt som effektivt skiller teksten fra bakgrunnen.
Artist i design
Artist i design Ikke bare har grønn tekst på grønn bakgrunn og gul / beige tekst på gul bakgrunn, men har tekst direkte på toppen av et bilde.
Mens enkelte individuelle brev kan være vanskelig å lese, forblir ordene som helhet lesbare. Denne typen effekt bør nesten alltid være midt i et design.
Horacio Bella
Horacio Bella bruker en annen 3-D effekt på sin portefølje. I dette tilfellet ser bokstavene frem til å bli pusset innover. Uten denne effekten ville lesbarheten ha blitt sterkt redusert. En annen god effekt som brukes her er en stram kjerne av bokstaver, noe som forbedrer lesbarheten ytterligere.
Regel # 7: Ikke legg animasjon i veien for innholdet ditt
Seriøst, ikke pop opp små Flash-annonser hvor brukeren leser. Det samme gjelder for de undersøkelsesbokser som dukker opp når brukeren er midt i en setning. Brukerne liker ikke å være distrahert når de er halvveis gjennom en setning. Med mindre…
Det er veldig vanskelig å ikke bli begeistret av den lille edderkoppen på ABA s nettsted. Designet er rent, og selv om edderkoppen er en distraksjon, er det greit. Så langt, dette nettstedet jeg tror er det eneste unntaket til regelen.
Regel # 8: Hold deg til Web-Safe Fonts
Selv om skriftsykkelutskiftningsteknikker fortsatt er unge, gjør de allerede et stort sprut. sIFR var den første og nylig Cufon og Typefasce.js har dukket opp.
Diseñorama
På Diseñorama nettside, den røde "Recientemente" -teksten kan velges. En ulempe er at hvis nettstedet ikke lastes øyeblikkelig, vil brukeren se den opprinnelige enkle skrifttypen kort.
En annen ulempe er at hvis brukeren enten har JavaScript eller Flash deaktivert, vil de bare se den opprinnelige skrifttypen. Alt i betraktning er det fortsatt ganske kult. Forhåpentligvis er det en forhåndsvisning av hva som kommer i de neste årene.
Cactuslab
Cactuslab bruker også sIFR for de blå underhodene (for eksempel "Vinterarbeid"). Selv om sIFR er den mest kompliserte av skriftutskiftningsteknikkene, kan teksten kopieres og limes, noe som gir den en stor fordel i forhold til de to andre teknikkene.
Regel # 9: Har ikke en splash / destinasjonsside
Mange designere har hatt den samme gamle diskusjonen med sine kunder om hvorfor en splash-side ikke er en god ide. Google har en tendens til å rangere slike sider lavere, og de reduserer brukeren fra å få innholdet de er ute etter. Men de kan være utrolig vakre og inspirerende hvis det gjøres riktig.
Glans Postproduksjon
Formålet med porteføljeprøven som vises på splash-siden av Glans Postproduksjon Nettstedet er å fremkalle en følelsesmessig reaksjon fra brukeren.
Ved hvert besøk er et tilfeldig bilde fra porteføljen lastet. Ved å klikke på bildet skaleres det ned og legger det på plass blant de andre porteføljene på nettstedet. Skalering og bevegelseseffekt gir videreføring og bidrar til å overføre brukerens følelser til resten av selskapets arbeid.
Issa London
Når et nettsted er fullstendig ferdig i Flash, kan lastefeltet fungere som en splash-side. Når en bruker ser en lastelinje, vil de enten lukke siden og gå et annet sted eller bytte til en annen kategori og bla andre steder mens de venter.
Når siden laster, er det best å vente på at brukeren skal returnere før oppstart. I Issa London saken er porten en perfekt metafor for å si at nettstedet er klart og brukeren kan komme inn.
Når brukeren klikker på porten, åpnes porten og ulike illustrerte modeller vises. Ved hjelp av porten på strykesiden er det en god designidee fordi ved å skrive inn, føler brukeren seg engasjert.
Regel # 10: Ikke bruk tabeller
Enhver webdesigner som bruker bord i deres design, vil umiddelbart bli kalt en rookie av erfarne designere. Tabeller viser ikke det samme i alle nettlesere, og de kan gjøre kildekoden ser rotete ut, men i det minste vet du hva du får med dem. Her er noen eksempler på design som inneholder tabeller.
Dette bordet er litt vanskelig å se, men er gjemt der inne mellom de to stolene. Det er et fint lite sidebord, men dessverre bidrar det ikke mye til dette områdets design.
Tabeller er vei i bakgrunnen for denne designen på Arbeid på spill , men de holder arbeidernes bærbare datamaskiner og andre gjenstander innen rekkevidde. Uten disse tabellene ville rommet føles mye emptier, og bakgrunnsbildet ville ikke ha samme effekt.
Selv om dette designet hovedsakelig har stoler, vises et fint lite bord øverst til høyre på miniatyrbildet. Ser ut som en krukke sitter på den.
Så langt som design med bord går, er dette en av de beste. Med to tabeller omtalt i denne Flash-animasjonen, gir designen dem mye oppmerksomhet. Dette nettstedet skal være på hver designers liste over flotte design som bruker tabeller.
Bryte reglene!
Å bryte reglene er greit når et design krever det. Mange av designvalgene som ble vurdert her, ville ikke bli vurdert av den gjennomsnittlige designeren. Dette skiller store designere fra gjennomsnittlige.
De som er modige nok til å gå imot det de har blitt lært, skiller seg alltid ut.
Skrevet utelukkende for WDD bt Eli Penner. Han driver sin egen nettside på SleepyHero.com
Bryter du noen regler i dine webdesign? Hvorfor eller hvorfor ikke? Vennligst del dine synspunkter med oss ...