Share
Blog Actiedag 2010 staat voor de deur! Dit jaar is Webdesigntuts + betrokken bij een speciale ontwerpherziening van een van onze favoriete liefdadigheidsinstellingen op het water: charitywater.org. We verkennen de belangrijkste elementen die de website tot een succes maken en hoe u dezelfde ontwerpstrategieën voor uw eigen projecten kunt lenen!
Ter ere van de Blogactiedag van dit jaar bieden we een diepgaande ontwerpbeoordeling van de website, charitywater.org. "liefdadigheid: water is een non-profitorganisatie die schoon en veilig drinkwater brengt voor mensen in ontwikkelingslanden".
Sites voor liefdadigheidsorganisaties zijn altijd interessante projecten omdat ze bezoekers moeten aanspreken op actie. De website overtreft veruit wat je normaal van een non-profit zou verwachten; Het beschikt over de hele linie over degelijke ontwerpfundamenten en heeft een paar geweldige designtrucs die hem een gevoel van karakter en verfijning geven dat maar weinig non-profitwebsites hebben. Laten we er gewoon in graven!
Het eerste dat u waarschijnlijk opmerkt bij het goede doel: waterwebsite is het gedisciplineerde gebruik van hun merkkleur. Wat hier uniek is, is dat ze kleur op dezelfde manier gebruiken als een bedrijfsmerk kleur zou kunnen gebruiken. Merk op hoe het blauw nooit van de ene pagina naar de andere varieert - alles van de typografische hooglichten tot de achtergrond en infographic kleuren verbinden het "goede doel: waterblauw" weer in het ontwerp. Het kleurgebruik is alomtegenwoordig op de site; Dus zelfs als de opmaak verandert van de ene pagina naar de andere, dient kleur als het constante verenigende element ... wat de ontwerper uiteindelijk een beetje meer vrijheid geeft om te spelen met.
... het gebruik van gecontroleerde kleuren creëert een professionele presentatie die de bezoeker het gevoel geeft dat de site geloofwaardig en betrouwbaar is.
Wat doet dit gecontroleerde kleurengebruik met de esthetiek van de site? Het creëert een uniforme, samenhangende gebruikerservaring. Nog belangrijker is dat het gebruik van consistente kleuren de bezoeker het gevoel geeft dat de site geloofwaardig en betrouwbaar is; iets dat van vitaal belang is voor non-profitorganisaties die voortdurend moeten strijden voor het vertrouwen van potentiële donoren.
Typografie is een van die dingen die elke ontwerper weet diep in het hart van het aantrekken van bezoekers, maar het wordt zo vaak verwaarloosd in het voordeel van de status quo tekstopmaak. De website liefdadigheid: water blinkt uit in het gebruik van typografie om de gebruiker te betrekken en benadrukt de belangrijkste elementen die deze specifieke crisis de moeite waard maken om te weten over.
Vanuit technisch oogpunt gebruikt de typografie vastgestelde principes om de ogen rond te leiden: de navigatie en het merk zijn ingetogen maar gemakkelijk te vinden; "calls to action" en andere belangrijke stukjes informatie zijn vet en gemakkelijk te scannen. Binnen 10 seconden na het bezoeken van de site had je waarschijnlijk een vrij goed begrip van de boodschap alleen maar door de belangrijkste koppen te scannen ... dat is effectieve typografie! In plaats van belangrijke punten te begraven in blokken van alinea-tekst, brengt de site ze onder de aandacht van de bezoeker.
Binnen 10 seconden na het bezoeken van de site had je waarschijnlijk een vrij goed begrip van de boodschap alleen door de belangrijkste koppen te scannen ... dat is effectieve typografie!
Hoewel de typografie op de site wild en innovatief is, breekt deze nooit af van een kern van regels: belangrijke koppen worden geplaatst in een bloksoort lettertype dat onmiddellijk aandacht trekt, titels worden geplaatst in een serif lettertype dat waardig aanvoelt, en de de rest van de tekst op de pagina is geplaatst in een eenvoudig schreefloos schrift dat gemakkelijk te lezen is. Als u slechts enkele eenvoudige regels zoals deze gebruikt, kunt u uw ontwerp verenigen, zelfs als u helemaal over de hele linie wilt zijn met uw lay-outs en het gebruik van het type. Laten we even kijken naar de typehiërarchie op de site:
Ik zou één ding moeten noemen dat liefdadigheid: water doet dat niet helemaal perfect is vanuit een technisch oogpunt. Als je genoeg door de site bladert, merk je hier en daar dat ze hun eigen regels overtreden. Op sommige plaatsen bijvoorbeeld is de alinea-tekst schreef, waarbij het grootste deel van de site schreefloos is. Het resultaat is een kleine breuk in de samenhang van de site ... deze inconsistenties zijn klein op deze site, maar het is belangrijk om in gedachten te houden dat als je je eigen ontwerp "verstrooid" voelt, het de moeite waard is om de tijd te nemen om alles door te nemen type-stijl om de verschillende stijlen die u gebruikt te verminderen.
Ik zal deze uitleg kort en krachtig houden: als je informatie hebt die het best wordt weergegeven als een afbeelding, toon het dan als een afbeelding! Mensen zijn visueel-denkers, klop niet in de war door iets te proberen uit te leggen met woorden die makkelijker te beschrijven zijn met een visuele.
Dit is vergelijkbaar met de derde strategie, maar het is een eigen korte uitleg. Vaak probeer je een pagina te ontwerpen voor inhoud die zo complex, zo academisch is, dus gegevensgestuurd dat alleen het gebruik van alleen tekst of een infographic de boodschap niet effectief zal overbrengen. In deze gevallen is het de moeite waard om te overwegen hoe u een afbeelding met tekst kunt koppelen. De tekst is nog steeds waar de onbewerkte informatie zal zijn, maar de afbeelding zal als een "verzachter" fungeren, waardoor de informatie eenvoudiger lijkt dan het in werkelijkheid is - wat mensen aanmoedigt om het echt te lezen!
Het is de "One Trick Pony" van webdesign; Het organisatorische paradigma dat u ziet wanneer u de meeste sites bezoekt, is dit: 1 op maat ontworpen startpagina, 1 call-to-action-pagina en 1 sjabloon voor al het andere. Het idee om slechts één sjabloon te gebruiken om het merendeel van de inhoud van een site te verwerken, is echter kortzichtig! Het gebruik van slechts één sjabloon verveelt bezoekers zodra ze de startpagina verlaten ... in plaats van door te gaan met die hoge motivatie, nodigen deze 'one size fits all'-sjablonen gebruikers uit om de site te verlaten zodra ze het idee hebben gehad.
Waar goed doel: water slaagt, is dat ze een breed scala aan lay-outs gebruiken op hun hele site. Het resultaat: inhoud voelt vers op elke pagina. Bezoekers worden aangemoedigd om rond de site te blijven klikken om te zien wat er in de buurt van de volgende hoek ligt. Sterker nog, het ontwerp van elke pagina komt precies overeen met de inhoud op die pagina (gek idee hè?). Hoewel het ontwikkelen van een grote verscheidenheid aan unieke paginasjablonen een beetje extra kan kosten, is het netto-effect dat de site bezoekers aanspreekt en meer kans heeft om bezoekers te betrekken..
Het is belangrijk op te merken dat het gebruik van verschillende lay-outs niet altijd de juiste oplossing is. In het geval van liefdadigheid: water, het werkt omdat de site een voldoende grote diversiteit aan inhoud heeft, dat het eigenlijk logisch is om elk type inhoud een eigen lay-out te geven. In andere sites kan het gebruik van radicaal verschillende lay-outs van de ene pagina naar de volgende de continuïteit in een ontwerp doorbreken en zelfs werken als een nadeel voor de site-ervaring.
Er is geen harde regel om te beslissen wanneer een aangepast paginasjabloon gerechtvaardigd is, dus je zult gewoon je eigen instincten moeten gebruiken. Gebruik bij twijfel een algemene paginasjabloon - als de generieke sjabloon de inhoud meer hindert dan het helpt, overweeg dan om een aangepaste opmaak te maken. Als u beslist dat een aangepaste paginasjabloon nodig is, moet u ervoor zorgen dat de vitale informatie (merk, navigatie, accountinformatie, winkelwagentje, enz.) Op elke pagina op dezelfde plaats staat.
Laten we eerlijk zijn: als u op een non-profit website werkt, zullen er heel wat saaie informatieve pagina's zijn die, hoewel belangrijk, de inspiratie niet zullen uitstralen. Wat een goed doel: water heeft gedaan met deze informatiepagina's is ze weergeven in een unieke rasterindeling. Door pictogrammen en afbeeldingen te gebruiken samen met de informele blurbs, worden de bezoekers aangemoedigd om rond te kijken en iets interessants voor hen te vinden. Wat nog belangrijker is, het maakt deze anders gewone pagina's er "leuk" uitzien, wat bezoekers een subtiel signaal geeft dat zelfs de meest saaie delen van de werking van deze organisatie worden uitgevoerd met creativiteit en passie..
De afhaalservice hier is eenvoudig: negeer de gewone inhoudspagina's niet! Hoewel deze pagina's misschien onbelangrijk aanvoelen, is er een unieke kans om bezoekers te verrassen door intelligente benaderingen te maken voor het weergeven van dit soort inhoud.
Ik hou van het goede doel: waterwebsite ... echt waar. Elke pagina voelt fris aan en ik word er echt bij betrokken. Sommigen zullen misschien zeggen dat dit het teken is van een echte oorzaak - een crisis die zo belangrijk is dat mensen gewoon worden aangetrokken om deel te nemen. Ik ga echter de draad op en beweer dat de effectiviteit van de site net zoveel te maken heeft met het ontwerp als met de inhoud. Zeker, als de oorzaak "$ 5 aan Steve Jobs zou schenken", zou ik er niet echt om geven, ongeacht hoe goed de site was ontworpen (sommigen zijn het hier misschien niet mee eens, haha!), Maar dit is een van die prachtige tijden waarin ontwerp kan de wereld echt een betere plek maken.
Bedankt voor het lezen van de Blog Action Day-post van dit jaar! Zet hieronder wat opmerkingen neer.
Accentsconagua