Standarde web 2.0

Probabil ca mai toti designer-ii au auzit sau practica standardele web 2.0. … Citind despre web2.0 am gasit interesanta afirmatia lui Andrew Keen din 2006(cei drept cam veche dar probabil inca o sustine): Web 2.0 ” The second generation of the Internet has arrived. It’s worse than you think. “

Un alt cunoscator al domeniului, Tim O’Reilly facea deosebirea in 2005 intre web 2.0 si web1.0

Web 1.0 –> Web 2.0
DoubleClick –> Google AdSense
Ofoto –> Flickr
Akamai –> BitTorrent
mp3.com –> Napster
Britannica Online –> Wikipedia
website personal –> bloguire
evite –> upcoming.org and EVDB
speculatii legate de domeniu –> optimizare web
page views –> cost per click
screen scraping –> servicii web
publicare –> participare
content management systems –> wikis
directoare (taxonomy) –> taguri (”folksonomy”)
stickiness –> syndication

Eu nu sunt o personalitate in domeniu insa practic standardele web 2.0. Si prin urmare m-am gandit sa va evidentiez cateva lucruri despre stilul designului web 2.0. Explicatiile sau tutorialul urmator este doar un sumar si nicidecum o lectie completa!

Cateva dintre caracteristicile stilului web 2.0

• Simplitate
• Layout centrat
• Coloane mai putine
• Meniu de navigare mai simplu
• Top section – header-separat
• Arii solide-compacte
• Logo-uri boldate
• Text cu font size mare
• Introduceri in text cu text ingrosat- bold
• Culori puternice
• Folosirea efectului Gradient si a reflexiei-reflectare
• Suprafeti bogate – cu efecte
• Iconite dragute
• Folosirea stelutelor-insignelor

Simplitate

Web 2.0 este axat pe simplitate si claritate, dar asta nu inseamna ca este un stil elementar sau modest si nici bombastic.  Ci doar sunt folosite acele trasaturi/caracteristici stric necesare pentru a se indeplini scopul design-ului.Am sa va dau cateva exemple ca sa intelegeti mai bine la ce ma refer cand spun simplitate. Atentie trebuie sa va uitati la content(continut).

      Â

Â

Cand sa folosim design-ul cu cerinta de simplitate? MEREU ! Cum? Prin inlaturarea componentelor ce nu sunt necesare si incercati solutii alternative alegand calea cea mai simpla. Nu incarcati o partea a designului cu imagini/iconite/text care nu sunt strict necesare si care vor distrage atentia de la coninutul principal si meniul web site-ului. Folositi linii, cuvinte, forme, colori pentru a comunica informatia nu doar pentru a decora designul.

Simplu nu inseamna mai putin impact vizual scazut!

Layout Centrat

Layout-urile cele mai folosite acum sunt cele centrate in fereastra browser-ului. Nu foarte multe sunt full-screen (liquid) sau aliniate la stanga – in comparatie de cum erau acum cativa ani in urma. Centrarea design-ului pe mijlocul paginii da un aspect mai ordonat si organizat.

Coloane putine

Web desiger-ii mai in varsta-sa spunem- stiu ca site-urile cu 3 coloane erau ca sio norma iar site-urile cu 4 coloane erau vazute ca ceva iesit din comun. Acum sunt la moda site-urile cu 2 coloane iar cele cu 3 sunt folosite doar cand sunt foarte multe informatii si multe link-uri in site.

Vizitati Apple si veti vedea liderul in eleganta simpla! Are un gen de layout care se potriveste si e user-friendly(nu din pct de vedere seo vorbim acum ci de interfata).

Va recomand sa nu folositi mai mult de 3 coloane, simplu pentru ca nu ar trebui sa bagati in site mai mult decat aveti nevoie.Hmm…. evident ca exceptii exista dar daca vreti sa faceti parte din “exceptia de la regula” atentie cum folositi acest design. Aruncati o privire peste Popurls care contine informatii bogate – insa tot se mentine in regula 3 coloane pentru blocurile principale din design. Pana si Amazon foloseste 3 coloane de baza .

Meniu de navigare simplu

 Meniul care apare pe fiecare pagina-meniul principal ar trebui safie simplu si clar. Navigatorul site-ului trebuie sa intelega clar unde duce un buton sau altul. Stilul web 2.0 foloseste meniul principal ingrosat, clar, evident si mare-larg. Link-urile din text (inline links)sunt de obicei evidentiate de textul normal.

 

 Â

Â

Â

Deci utilizatorii trebuie sa poata identifica din meniu unde sunt, unde se mai pot duce, si ce optiuni au daca fac x sau y . Incercati sa pozitionati meniul clar, sa nu para doar niste link-uri in continutul website-ului. Meniul trebuie sa fie clar diferit de ce e meniu. Folositi culori diferite, tab-urile sa fie mai mari, colorare; folositi-va de anumite efecte precum glossy. Link-urile  din text trebuie si ele sa fie diferite de textul site-ului, fie folositi culoare diferita sau background diferit. Pe site-uri precum Protolize.org sau .tradingeye.com puteti vedea clar la ce ma refer.

Top section

La aceasta parte ma reder in special la partea ce contine brand-ul (logo) si meniu plrincipal de navigare. Aceasta parte trebuie sa fie vizual distincta fata de restul paginii – continutului. Nu e chiar ceva nou aceasta abordare insa este o abordare tot mai mult folosita si da cele mai bune rezultate. Unul dintre site-urile pe care le indragesc la design web 2.0 este website-ul francez  alsacreations.fr. Respecta efectiv toare regulile web 2.0 – header distinct, meniu de nabigare distinct si mare -link-uri sub meniu in site scoase in evidenta, iconite dragute etc.

Ca si reguli sau sfaturi pentru header:

• plasati logo la dreapta sus iar meniul principal de navigare sa-l urmeze ca o completare
• evidentiati, reliefati, distingeti clar headerul fata de restul paginii folosindu-va de contrastul culorilor sau de blocuri solide sau folosirea scrisului ingrosat- sunt multe alternative – folositi-le!

Â

Â

Arii Solide

Web 2.0 scoate in evidenta anumite arii si le evidentiaza vizual fata de restul paginii. Ariile carora trebuie sa le dati atentie sunt: meniul de navigare, fundalul site-ului, continutul principal, cross-links. Cel mai bine ca sa scoateti aceste arii in evidenta este sa va ajutati de culori – sau de spatiu (alb in general) – vezi apple sau imeem.

Logo

Partea aceasta a design-ului e foarte sensibila avand in vedere ca de multe ori clientul impune regulile si de multe ori clientul nu este un cunoscator al graphic design-ului. Consider totusi ca uneori putem indrepta clientul catre ceea ce este mai reprezentativ din pct de vedere al designului pentru compania acestuia.

Logo-ul este precum vocea companiei; da prima impresie si ar trebui sa exprime atitudine. Intr-un design web 2.0 logo-ul trebuie sa fie in marimi mai mari si evident. – vezi mozilla, wufoo, feedburner sau cakephp etc.

Text mare

O multime de site-uri web 2.0 au font size mare. Nu ma refer neaparat la continutul site-ului ci la acel text catre trebuie sa capteze atentia. Textul mare si chiar boldat il putem interpreta precum un tipat, o atentionare, o rugaminte – la modul pozitiv. Vezi browsehapp.com (btw frumos logo), vezi 43things (locul 1 la web 2.0 stil oferit de catre seomoz pentru categoria Lists and Polls), vezi http://answers.yahoo.com/ – foarte bun model de text mare si ingrosat acolo unde este necesar…ca doar nu facem tot site-ul cu font size de 20px ). Prin urmare nu uitati ca trebuie sa aveti nevoie de un motiv pentru a ingrosa si a mari font size la text.

Text ingrosat in introduceri

Textul – cuvinte care introduc un text mai lung tind sa fie ingrosate, sa aiba aerul mai mult a fi grafica decat text normal, unele site-uri chiar folosesc heading 1!  Ca si mai sus – folositi aceasta metoda doar daca aveti motiv, daca aveti ceva important a spune si trebuie sa atrageti atentia.

Culori puternice

Culori deschide sau puternice care sa atraga si sa placa vizual. Folosit culorile chiar pentru a imparti sau organiza pagina in sectiuni clar definite si pentru a scoate in evidenta anumite elemente. http://www.colorschemer.com/ – exemplu foarte bun! sau http://www.goowy.com/. Atentie nu incercati sa atrageti atentia la tot ce contine pagina- ca daca totul este impartit in blocuri colorate riscam sa cadem im plasa – site sorcova !

Gradients si Reflections

Folositi cat puteti de mult dar cu masura aceste 2 efecte.Dau senzatia de profesonalism si fac si site-ul placut -frumos vizual, evident daca stiti sa folositi aceste efecte.  Exemple de site-uri ce folosesc aceste efecte sunt nenumarate, dar cel ce-mi place cel mai mult este apple( http://www.apple.com/macosx/overview/aquauserinterface.htm – vezi aici ambele efecte). Iar va recomand si va trimit sa cautati despre aqua  si aero style.

 

Suprafete bogate

Majoritatea website-urilor cu stil web 2.0 folosesc subtil efecte 3d, umbre, bevel effect si/sau emboss. Evident ca regula de aur este a folosi aceste efecte cu GRIJA! si nu abuzati !

Iconite

Iconitele sunt o parte importanta a stilului web 2.0. Iconitele sunt folosite pentru ca sunt usor de recunoscut si poarte un inteles evident. Iconitele pot varia de la simple si clare (vezi a dooua poza din articolul acesta la simplitate), dragute si rotunde, pana la iconite foarte detaliate inspirate din Mac OSX vezi EnhancedLabs.

Stelutele si Insignele

Sunt si acestea destul de folosite precum iconitele, acestea anunta de obicei ceva fie news, fie oferta, chiar si reduceri sau anunturi de ultima ora. E recomandabil de a folosi o singura iconita pe pagina si de a l face dragute. O stea-insigna de genul acesta care este chiar legat de subiectul discutat poate fi vizualizata la seomoz .

Si cam atat pentru moment legat de stilul web 2.0.