Share
Blog Action Day 2010 er over oss! I år blir Webdesigntuts + involvert i en spesialdesignet gjennomgang av en av våre favoritt vannbaserte veldedighetsorganisasjoner: charitywater.org. Vi vil utforske de viktigste elementene som gjør nettstedet til en slik suksess, og hvordan du kan låne samme designstrategier for dine egne prosjekter!
Til ære for årets Blog Action Day, tilbyr vi en grundig design gjennomgang av nettstedet, charitywater.org. "veldedighet: vann er et non-profit som gir rent og trygt drikkevann til folk i utviklingsland".
Nettsteder for veldedige organisasjoner er alltid interessante prosjekter fordi de trenger å engasjere besøkende til handling. Nettstedet overskrider det som du normalt ville forvente fra et non-profit skjønt; Den har solid design grunnleggende over hele linja og har noen få flotte design triks som gir det en følelse av karakter og raffinement som få non-profit nettsteder har. La oss grave rett inn!
Det første som du sannsynligvis vil legge merke til på veldedighet: vann nettsted er den disiplinert bruk av deres merkevare farge. Det som er unikt her er at de bruker farge på samme måte som et bedriftsmerke kan bruke farge. Legg merke til hvordan det blå ikke varierer fra en side til en annen - alt fra de typografiske høydepunktene til bakgrunnen og infografiske farger knytter "veldedighet: vannblå" tilbake til designet. Fargebruket er allestedsnærværende på tvers av siden; Så selv om layoutet endres fra en side til en annen, fungerer farge som det konstante samlende elementet ... som til slutt gir designeren litt mer frihet til å leke med.
... ved hjelp av kontrollert farge vil skape en profesjonell presentasjon som gir besøkende en følelse av at nettstedet er troverdig og pålitelig.
Hva gjør denne kontrollerte fargebruk til nettstedets estetikk? Det skaper en enhetlig, sammenhengende brukeropplevelse. Enda viktigere, ved å bruke konsistent farge vil besøkende gi en følelse av at nettstedet er troverdig og pålitelig; noe som er avgjørende for ikke-profitt som stadig må kjempe for tillit fra potensielle givere.
Typografi er en av de tingene som hver designer vet dypt ned ligger i hjertet av engasjerende besøkende, men det blir så ofte forsømt til fordel for status quo tekstformatering. Den veldedige veldedighetens nettsted utmerker seg ved å bruke typografi for å trekke brukeren inn og understreke de sentrale elementene som gjør denne spesielle krisen verdt å vite om.
Fra et teknisk synspunkt bruker typografien etablerte prinsipper for å lede øynene rundt: navigasjonen og merket er dempet, men lett å finne; "samtaler til handling" og andre viktige deler av informasjonen er dristige og enkle å skanne. Innen 10 sekunder etter å ha besøkt nettstedet, hadde du sannsynligvis en ganske god forståelse av meldingen bare ved å skanne de store overskriftene ... det er effektiv typografi! I stedet for å begrave viktige interessepunkter innen blokker av teksttekst, bringer nettstedet dem til forsiden av den besøkende.
Innen 10 sekunder etter å ha besøkt nettstedet, hadde du sannsynligvis en ganske god forståelse av meldingen bare ved å skanne de store overskriftene ... det er effektiv typografi!
Mens typografien på tvers av nettstedet føles vilt og nyskapende i ansiktet, bryter det aldri fra et kjernesett av regler: store overskrifter er satt i et blokk skrift som trekker øyeblikkelig oppmerksomhet, titler er satt i et serif skrift som føles verdig, og resten av teksten på siden er satt i en enkel sans-serif som er lett å lese. Bruk bare noen få enkle regler som dette kan bidra til å forene designet ditt selv om du vil være over hele linjen med layoutene dine og skriv inn bruken. La oss ta en rask titt på typen hierarki på nettstedet:
Jeg bør nevne en ting som veldedighet: vann gjør det ikke helt perfekt fra et teknisk synspunkt. Hvis du surfer på nettstedet nok, vil du legge merke til små steder her og der at de bryter sine egne regler. For eksempel, i enkelte tilfeller er paragrafteksten serif, hvor på hovedparten av nettstedet er det sans-serif. Resultatet er en liten pause i områdets sammenhengskraft. Disse inkonsekvensene er mindre på dette nettstedet, men det er viktig å huske på at hvis ditt eget design føler seg "scatterbrained", er det verdt å ta seg tid til å gå gjennom hver og en typestil for å redusere ulike stilarter du har brukt.
Jeg vil holde denne forklaringen kort og søt: hvis du har informasjon som er best representert som en grafikk, vis den som en grafikk! Folk er visuelle tenkere, ikke slå rundt bushen ved å prøve å forklare noe med ord som er lettere beskrevet med et visuelt.
Dette ligner den tredje strategien, men det garanterer at det er en egen kort forklaring. Ofte vil du prøve å designe en side for innhold som er så komplekst, så akademisk, så data-drevet at bare tekst eller infographic alene ikke vil levere meldingen effektivt. I disse tilfellene er det verdt å vurdere hvordan du kan sette sammen et bilde med tekst. Teksten er fortsatt der den raske informasjonen vil være, men bildet vil fungere som en "mykner", noe som gjør informasjonen enklere enn det egentlig er - som oppfordrer folk til å faktisk lese det!
Det er "One Trick Pony" av webdesign; Det organisatoriske paradigmet som du ser når du besøker de fleste nettsteder, er dette: 1 egendefinert hjemmeside, en handlingsside, og 1 mal for alt annet. Tanken om å bruke bare en mal for å håndtere flertallet av innholdet på et nettsted er kortfattet skjønt! Ved å bruke bare én mal bores besøkende når de forlater hjemmesiden ... i stedet for å fortsette den motiverende høye, disse "One Size fits All" maler inviterer brukere til å forlate nettstedet når de føler at de har fått hovedideen.
Hvor veldedighet: vann lykkes er at de bruker et bredt utvalg av oppsett på hele sitt nettsted. Resultatet: innholdet føles fersk på hver side. Besøkende oppfordres til å fortsette å klikke rundt nettstedet bare for å se hva som ligger rundt neste hjørne. Enda bedre, utformingen av hver side stemmer faktisk med innholdet på den siden (gal ide, va?). Mens du utvikler et bredt spekter av unike sideskjermer, kan det koste litt ekstra. Nettoeffekten er at nettstedet faktisk involverer besøkende og er mer sannsynlig å lykkes med å få besøkende involvert.
Det er viktig å merke seg at bruk av en rekke oppsett ikke alltid er den riktige løsningen. Når det gjelder veldedighet: vann, virker det fordi stedet har et stort nok mangfold av innhold som det faktisk gir mening å gi hver type innhold det er eget oppsett. På andre sider kan det imidlertid være radikalt forskjellige layouter fra en side til den neste, og ødelegge kontinuiteten i et design og faktisk fungere som en skade for nettstedserfaringen..
Det er ingen vanskelig regel for å avgjøre når en tilpasset sidemal er garantert skjønt, så du må bare bruke dine egne instinkter. Når du er i tvil, bruk en generisk sidemal - hvis generisk mal hindrer innholdet mer enn det hjelper det, bør du vurdere å opprette en tilpasset layout. Hvis du bestemmer deg for en tilpasset sidemal er nødvendig, pass på å beholde viktig informasjon (merke, navigasjon, kontoinformasjon, handlekurv, etc.) på samme sted på hver side.
La oss innse det: Hvis du jobber på en ideell nettside, kommer det til å være mange kjedelige informasjons sider som, mens det er viktig, ikke vil utløse inspirasjon. Hvilken veldedighet: Vann har gjort med disse informasjonssidene, er å vise dem i et unikt gridoppsett. Ved å bruke ikoner og bilder sammen med informasjonsblurbs, oppfordres de besøkende til å se seg rundt og finne noe av interesse for dem. Enda viktigere, det gjør disse ellers vanlige sidene ser «morsomme» ut, noe som gir en subtil melding til besøkende at selv de mest kjedelige delene av denne organisasjonens operasjon utføres med kreativitet og lidenskap.
Takeaway her er enkel: ikke ignorere vanlige innholdssider! Selv om disse sidene kan føle seg ubetydelige, er det en unik mulighet til å overraske besøkende ved å skape intelligente tilnærminger for å vise denne typen innhold.
Jeg liker veldedighet: vann nettsted ... Jeg virkelig gjør. Hver side føles frisk og det får meg til å bli involvert. Noen kan si at dette er tegn på en ekte årsak - en krise som er så viktig at folk enkelt blir trukket til å delta. Jeg kommer til å gå ut på en lemmer skjønt og si at effektiviteten til nettstedet har så mye å gjøre med designet som det gjør innholdet. Visst, hvis årsaken var "donere $ 5 til Steve Jobs", ville jeg egentlig ikke bry meg om det, uansett hvor godt utformet nettstedet var (noen kan være uenige med dette, haha!), Men dette er en av de fantastiske tider hvor design kan virkelig gjøre verden til et bedre sted.
Takk for at du leser årets Blog Action Day-innlegg! Slipp noen kommentarer nedenfor.
Accentsconagua