Share
Ziua de acțiune a blogului 2010 este peste noi! Anul acesta, Webdesigntuts + se implică într-o revizuire specială a designului uneia dintre cele mai bune organizații de caritate pe bază de apă: charitywater.org. Vom explora elementele cheie care fac succesul site-ului și cum puteți împrumuta aceleași strategii de proiectare pentru proiectele proprii!
În onoarea Zilei de acțiune a blogului din acest an, oferim o revizuire aprofundată a designului site-ului, charitywater.org. "caritate: apa este un non-profit care aduc apă potabilă curată și sigură oamenilor din țările în curs de dezvoltare".
Site-urile pentru organizațiile caritabile sunt întotdeauna de interesante proiecte, deoarece acestea necesită implicarea vizitatorilor în acțiune. Site-ul web depășește cu mult ceea ce vă așteptați în mod normal de la un non-profit; Acesta are fundamente solide de design peste bord și are câteva trucuri de proiectare excelente care îi conferă un sentiment de caracter și rafinament pe care puține site-uri web non-profit le au. Hai să ne grăbim!
Primul lucru pe care îl veți observa probabil pe site-ul de caritate: apă este folosirea disciplinată a culorii mărcii. Ceea ce este unic aici este faptul că folosesc culoarea în același mod în care o marcă corporativă ar putea folosi culoarea. Observați cum albastrul nu variază niciodată de la o pagină la alta - totul, de la culorile tipografice la fundal și culorile infografice, leagă "designul de caritate: albastru de apă" în design. Utilizarea culorilor este omniprezentă pe întregul site; Deci, chiar dacă aspectul se schimbă de la o pagină la alta, culoarea serveste ca element de unificare constantă ... care, în cele din urmă, oferă designerului o mai mică libertate de a juca cu.
... folosind culoarea controlată va crea o prezentare profesională care oferă vizitatorului un sentiment că site-ul este credibil și demn de încredere.
Ce face această utilizare a culorilor controlate la estetica site-ului? Creează o experiență unificată și coerentă a utilizatorului. Mai important, utilizarea unei culori consistente îi va da vizitatorului sentimentul că site-ul este credibil și demn de încredere; ceva vital pentru non-profit, care au nevoie constantă de luptă pentru încrederea potențialilor donatori.
Tipografia este una dintre acele lucruri pe care fiecare designer le are știe adânc în jos este în centrul de a angaja vizitatori, dar este atât de adesea neglijat în favoarea formatarea textului status quo. Site-ul de caritate: apă excelează la utilizarea tipografiei pentru a atrage utilizatorul și pentru a sublinia elementele cheie care fac ca această criză specifică să merite să știe despre.
Din punct de vedere tehnic, tipografia folosește principii stabilite pentru a ghida ochii în jurul valorii de: navigația și marca sunt supuse, dar ușor de localizat; "apeluri la acțiune" și alte informații-cheie sunt îndrăznețe și ușor de scanat. În termen de 10 secunde de la vizitarea site-ului, probabil că ați avut o înțelegere destul de bună a mesajului doar prin scanarea titlurilor majore ... aceasta este o tipografie eficientă! În loc de a îngropa puncte de interes majore în cadrul blocurilor de text paragraf, site-ul le aduce în fața atenției vizitatorului.
În termen de 10 secunde de la vizitarea site-ului, ați avut probabil o înțelegere destul de bună a mesajului doar prin scanarea titlurilor majore ... aceasta este o tipografie eficientă!
În timp ce tipografia de pe întregul site se simte sălbatică și inovatoare pe față, nu se rupe niciodată de la un set de reguli principale: titlurile majore sunt stabilite într-un bloc de caractere care atrage atenția instantanee, titlurile sunt stabilite într-un tip de serif care se simte demn și restul textului din pagină este setat într-un simplu sans-serif care este ușor de citit. Folosind doar câteva reguli simple, cum ar fi acest lucru, vă pot ajuta să vă unificați designul, chiar dacă doriți să fiți pe tot cuprinsul cu planurile și tipul de utilizare. Să aruncăm o privire rapidă asupra ierarhiei de tip a site-ului:
Ar trebui să menționez un lucru pe care caritatea: apa nu o face perfect din punct de vedere tehnic. Dacă răsfoiți suficient site-ul, veți observa puțin acolo unde și-ar rupe propriile reguli. De exemplu, în unele locuri, textul paragrafului este serif, unde în cea mai mare parte a site-ului este sans-serif. Rezultatul este o ușoară pauză în coerența site-ului ... aceste inconsecvențe sunt minore pe acest site, dar este important să rețineți că dacă design-ul dvs. se simte "scatterbrained", merită să luați timp pentru a trece prin fiecare pentru a reduce varietatea de stiluri pe care le utilizați.
Voi păstra această explicație scurtă și dulce: dacă aveți informații care sunt cel mai bine reprezentate ca un grafic, arătați-le ca un grafic! Oamenii sunt gânditori vizuali, nu bateți în jurul tufișului, încercând să explicați ceva cu cuvinte care sunt mai ușor descrise cu ajutorul unei vizuale.
Aceasta este similară celei de-a treia strategii, dar justifică o scurtă explicație proprie. De multe ori, veți încerca să creați o pagină pentru un conținut atât de complex, atât de academic, astfel încât datele bazate pe date, care utilizează doar textul sau informațiile infografice, să nu poată oferi mesajul în mod eficient. În aceste cazuri, merită să aveți în vedere modul în care puteți asocia o imagine cu text. Textul este încă acolo unde vor fi informațiile brute, dar imaginea va acționa ca un "balsam", făcând informațiile să pară mai simple decât este într-adevăr - ceea ce îi încurajează pe oameni să le citească!
Este "Poneiul One Trick" al designului web; Paradigma organizațională pe care o vedeți când vizitați majoritatea site-urilor este următoarea: 1 pagină personalizată concepută, 1 pagină de chemare la acțiune și 1 șablon pentru orice altceva. Noțiunea de a folosi doar un singur șablon pentru a gestiona majoritatea conținutului unui site este totuși scurt! Folosind un singur șablon, vizitatorii o dată ce părăsesc pagina de pornire ... în loc să continue acel motiv motivat, acele șabloane "unice pentru toate" îi invită pe utilizatori să părăsească site-ul odată ce simt că au ajuns ideea principală.
În cazul în care caritatea: succesul apei este că ei folosesc o mare varietate de machete pe întregul lor sit. Rezultatul: conținutul se simte proaspăt pe fiecare pagină. Vizitatorii sunt încurajați să continue să facă clic în jurul site-ului doar pentru a vedea ce se află în jurul colțului următor. Chiar mai bine, designul fiecărei pagini se potrivește de fapt cu conținutul de pe acea pagină (idee nebună, nu?). În timp ce dezvoltați o mare varietate de șabloane unice de pagină ar putea costa un pic mai mult, efectul net este acela că site-ul implică de fapt vizitatori și este mult mai probabil să reușească pentru a atrage vizitatorii.
Este important să rețineți că utilizarea unei varietăți de planuri nu este întotdeauna soluția potrivită. În cazul carității: apă, funcționează deoarece site-ul are o diversitate destul de mare de conținut, care are de fapt sens să ofere fiecărui tip de conținut propriul aspect. Cu toate acestea, în alte site-uri, utilizarea unor structuri radicale diferite de la o pagină la alta poate rupe continuitatea într-un design și poate funcționa ca o detrimentul experienței site-ului.
Nu există nicio regulă greșită pentru a decide când este garantat un șablon de pagină personalizat, deci trebuie să folosiți propriile dvs. instincte. Când aveți dubii, utilizați un șablon generic de pagină - dacă șablonul generic împiedică conținutul mai mult decât îl ajută, luați în considerare crearea unui aspect personalizat. Dacă decideți dacă este necesar un șablon de pagină personalizat, aveți grijă să păstrați informațiile de bază (marca, navigația, informațiile contului, coșul de cumpărături etc.) în același loc pe fiecare pagină.
Să recunoaștem: dacă lucrați pe un site web non-profit, vor exista multe pagini informative plictisitoare care, deși importante, nu vor da naștere la inspirație. Ce fel de caritate: apa a făcut cu aceste pagini de informații este afișarea lor într-un layout unic de rețea. Prin utilizarea icoanelor și a imaginilor împreună cu blurburile informaționale, vizitatorii sunt încurajați să se uite în jur și să găsească ceva interesant pentru ei. Mai important este ca aceste pagini, în mod obișnuit, să pară "distractive", ceea ce oferă un mesaj subtil vizitatorilor că și cele mai plictisitoare părți din operarea acestei organizații sunt executate cu creativitate și pasiune.
Tasta de aici este simplă: nu ignorați paginile cu conținut obișnuit! În timp ce aceste pagini s-ar putea simți neimportante, există o ocazie unică de a surprinde vizitatorii prin crearea de abordări inteligente pentru afișarea acestui tip de conținut.
Îmi place site-ul de caritate: apă ... chiar îmi place. Fiecare pagină se simte proaspătă și de fapt mă face să mă implic. Unii ar putea spune că acesta este semnul unei adevărate cauze - o criză atât de importantă încât oamenii sunt pur și simplu atrași să participe. O sa ies pe un membru si sa spun ca eficacitatea site-ului are atat de mult de-a face cu designul asa cum face si continutul. Sigur, dacă cauza ar fi "dona $ 5 lui Steve Jobs", nu mi-ar păsa cu adevărat, indiferent de cât de bine a fost proiectat site-ul (unii ar putea să nu fie de acord cu asta, haha!), Dar aceasta este una dintre momentele minunate în care designul poate transforma lumea într-un loc mai bun.
Vă mulțumim că ați citit postarea din acest an a Blogului de acțiune din acest an! Puneți niște comentarii mai jos.
Accentsconagua