Share
Blog Action Day 2010 är över oss! I år blir Webdesigntuts + involverad i en speciell designöversikt av en av våra favoritvattenbaserade välgörenhetsorganisationer: charitywater.org. Vi undersöker de viktigaste elementen som gör webbplatsen till en sådan framgång och hur du kan låna samma designstrategier för dina egna projekt!
För att hedra årets Blog Action Day, erbjuder vi en djupgående designöversikt av webbplatsen, charitywater.org. "välgörenhet: vatten är en ideell förening som ger rent och säkert dricksvatten till människor i utvecklingsländer".
Webbplatser för välgörenhetsorganisationer är alltid intressanta projekt eftersom de behöver engagera besökare till handling. Webbplatsen överstiger vad du normalt förväntar dig från en ideell vinst; Den har storslagna solida grundprinciper över hela linjen och har några bra designtrådar som ger en känsla av karaktär och förfining som några ideella webbplatser har. Låt oss gräva rätt in!
Det första som du kommer att märka på välgörenhetsorganisationen: Vattenwebbplats är den disciplinerade användningen av deras varumärkesfärg. Det som är unikt här är att de använder färg på samma sätt som ett företags varumärke kan använda färg. Lägg märke till hur det blåa aldrig varierar från en sida till en annan - allt från de typografiska höjdpunkterna till bakgrunden och infografiska färger knyter "välgörenhet: vattenblå" tillbaka till designen. Färganvändningen är allestädes närvarande över hela webbplatsen; Så även om layouten ändras från en sida till en annan, fungerar färgen som det konstanta samlingselementet ... vilket i slutändan ger designern lite mer frihet att leka med.
... med kontrollerad färg skapas en professionell presentation som ger besökaren en känsla av att webbplatsen är trovärdig och pålitlig.
Vad gör den här kontrollerade färganvändningen till webbplatsens estetik? Det skapar en enhetlig, sammanhängande användarupplevelse. Viktigare är att med konsekvent färg får besökaren en känsla av att webbplatsen är trovärdig och pålitlig; något som är avgörande för ideella vinster som ständigt behöver kämpa för potentiella givares förtroende.
Typografi är en av de saker som varje designer vet djupt ner ligger i hjärtat av att engagera besökare, men det är så ofta försummat för status quo-textformatering. Välgörenhetsorganisationen: Vattenwebbplatsen utmärker sig genom att använda typografi för att dra användaren in och betona de nyckelelement som gör den här specifika krisen värd att veta om.
Tekniskt sett använder typografi de etablerade principerna för att styra ögonen runt: navigeringen och varumärket är dämpade men lätta att lokalisera; "samtal till handling" och andra viktiga uppgifter är djärva och enkla att skanna. Inom 10 sekunder efter att du besökt webbplatsen hade du förmodligen en ganska bra grepp om meddelandet bara genom att skanna de stora rubrikerna ... det är effektiv typografi! I stället för att begrava viktiga intressanta platser i block av texttext, tar platsen dem framåt av besökarens uppmärksamhet.
Inom 10 sekunder efter att du besökt webbplatsen hade du förmodligen en ganska bra grepp om meddelandet bara genom att skanna de stora rubrikerna ... det är effektiv typografi!
Medan typografi på webbplatsen känns vild och innovativ i ansiktet, bryts det aldrig från en grundläggande uppsättning regler: stora rubriker ställs in i ett block typsnitt som drar omedelbar uppmärksamhet, titlar sätts i ett serif typsnitt som känns värdigt och resten av texten på sidan sätts i en enkel sans-serif som är lätt att läsa. Att använda bara några enkla regler som detta kan hjälpa till att förena din design även om du vill vara över hela linjen med dina layouter och typ användning. Låt oss ta en titt på typhierarkin på webbplatsen:
Jag bör nämna en sak som välgörenhet: vatten gör det inte helt perfekt ur teknisk synvinkel. Om du surfar på platsen så märker du små ställen här och där att de bryter mot sina egna regler. Till exempel, på vissa ställen är stycke text serif, där på huvuddelen av webbplatsen är det sans-serif. Resultatet är ett litet brott i webbplatsens sammanhållning ... dessa inkonsekvenser är mindre på den här sidan, men det är viktigt att komma ihåg att om din egen design känns "scatterbrained", är det värt att ta sig tid att gå igenom var och en typ-stil för att minska de olika stilar som du har använt.
Jag kommer att hålla denna förklaring kort och söt: om du har information som är bäst representerad som en grafik, visa den som en grafik! Människor är visuella tänkare, slå inte runt busken genom att försöka förklara något med ord som är enklare att beskriva med en visuell.
Detta liknar den tredje strategin, men det garanterar att det är en egen kort förklaring. Ofta ska du försöka skapa en sida för innehåll som är så komplicerat, så akademiskt, så data-driven att det bara använder text eller en infografisk enhet inte kommer att leverera meddelandet effektivt. I dessa fall är det värt att överväga hur du kan para en bild med text. Texten är fortfarande där den råa informationen kommer att vara, men bilden kommer att fungera som en "mjukgörare", vilket gör informationen enklare än den verkligen är - vilket uppmuntrar folk att faktiskt läsa det!
Det är "One Trick Pony" av webbdesign; Det organisatoriska paradigmet som du ser när du besöker de flesta webbplatser är det här: 1 anpassad hemsida, en sida för action-action och 1 mall för allt annat. Tanken att bara använda en mall för att hantera majoriteten av en webbplats innehåll är kortfattad men! Med bara en mall boras besökare när de lämnar hemsidan ... i stället för att fortsätta den motiverande höga, dessa "en storlek passar alla" mallar bjuder användare att lämna webbplatsen när de känner att de har fått huvudidén.
Där välgörenhet: vatten lyckas är att de använder en mängd olika layouter över hela sin webbplats. Resultatet: innehållet känns färsk på varje sida. Besökare uppmanas att fortsätta klicka på webbplatsen för att se vad som ligger i nästa hörn. Ännu bättre matchar utformningen av varje sida faktiskt innehållet på den sidan (galen idé va?). Medan du utvecklar en mängd olika unika sidmallar kan kosta lite extra, är nettoeffekten att webbplatsen faktiskt engagerar besökare och är mer sannolikt att lyckas att få besökare inblandade.
Det är viktigt att notera att det inte alltid är rätt lösning att använda en mängd olika layouter. När det gäller välgörenhet: vatten fungerar det eftersom webbplatsen har en tillräckligt stor mångfald av innehåll som det verkligen är meningsfullt att ge varje typ av innehåll en egen layout. På andra platser kan dock radikalt olika layouter från en sida till nästa bryta kontinuiteten i en design och faktiskt fungera som en nackdel för webbplatsens upplevelse.
Det finns ingen hård regel för att bestämma när en anpassad sidmall är motiverad, så du behöver bara använda dina egna instinkter. När du är i tvivel, använd en generisk sidmall - om den generiska mallen hindrar innehållet mer än det hjälper det, överväg att skapa en anpassad layout. Om du bestämmer en anpassad sidmall är nödvändig, var noga med att behålla den viktigaste informationen (varumärke, navigering, kontoinformation, kundvagn etc.) på samma plats på varje sida.
Låt oss möta det: om du jobbar på en ideell webbplats kommer det att bli en massa tråkiga informationssidor som, men viktiga, inte kommer att oroa inspiration. Vilken välgörenhet: Vattnet har gjort med dessa informationssidor visar dem i en unik gridlayout. Genom att använda ikoner och bilder tillsammans med informativa blurbs uppmuntras besökarna att leta och hitta något av intresse för dem. Ännu viktigare, det gör dessa annars vanliga sidor ser "roliga" ut, vilket ger ett subtilt meddelande till besökare att även de mest tråkiga delarna av denna organisations operation utförs med kreativitet och passion.
Takeaway här är enkelt: ignorera inte de vanliga innehållssidorna! Även om dessa sidor kan vara obetydliga, finns det en unik möjlighet att överraska besökare genom att skapa intelligenta metoder för att visa denna typ av innehåll.
Jag gillar välgörenhetsorganisationen: vattenwebbplats ... jag gör verkligen. Varje sida känns frisk och det gör att jag vill bli involverad. Vissa kan säga att det här är tecknet på en verklig sak - en kris så viktig att folk helt enkelt dras för att delta. Jag ska gå ut på en lem men och säga att webbplatsens effektivitet har lika mycket att göra med designen som det gör innehållet. Visst, om orsaken var "donera $ 5 till Steve Jobs", skulle jag verkligen inte bryr mig om det oavsett hur väl utformad webbplatsen var (vissa kanske inte håller med det här, haha!), Men det här är en av de underbara tiderna där designen kan verkligen göra världen till en bättre plats.
Tack för att du läste årets blogginsatsdagpost! Släpp några kommentarer nedanför.
Accentsconagua