1. Am fost lasat de capul meu dpdv creativ;
2. Clientu’ a fost incantat

So, there u have it – brief, concept, structurare vizuala & layout.

Briefu’
Niciun proiect nu poate incepe fara brief.
Nu, nu exista exceptii. Briefu’ e ca gravitatia, fara el esti cu totu-n aer. Cu cat e mai bine scris, cu-atat ne atingem targetul mai eficient. In mare, ni s-a cerut sa facem o comunitate online, orientata pe dating si care se adreseaza tinerilor  cu varste 18-24, de toate felurile si categoriile. Deci, incepand de la emo pana la rockeri, de la clubberi pana la skateri, de la goth pana la hiphop, de la punk pana la manele trebuie sa-i multumesti pe toti. Nu este usor, varietatea de gusturi la aceasta varsta este maaaaaaaare de tot.

Ce au cu totii in comun? Poate ca muzica, modernul si socializarea sunt un inceput
Conceptul e simplu si frumos: un sarut poate apropia pe oricine de oricine, indiferent de diferentele de caracter – apropiere fara limite

Structura
Cand vine vorba de structurarea informatiei intr-un site tre’ sa tii cont de urmatoarele:

• usability;
• accesability;
• comunicare;
• continuitate.

Cu cat respect mai bine aceste 4 categorii mari si late, cu-atat site-ul meu isi capata atributul de user friendly. So, ce e de facut? Se iau urmatoarele functionalitati si se organizeaza vizual in ordinea importantei:

1. cautare de profiluri [cautare dupa mai multe criterii populare: sex, varsta, poze etc.]
2. profilul tau [login + inregistrare]
3. socializare [ evenimente, muzica etc.]
4. tehnici de comunicare [tips'n'tricks de agatat, sfaturi]

Pe langa ele mai adaug un header unde, saptamanal sau lunar, scoatem in evidenta ce e mai important pe site. Structura e simpla, eficienta iar skeletul ei arata cam asa:

Nu, acesta nu este vizualul. Da, exista oameni in acest domeniu carora trebuie sa le subliniezi acest lucru.
Dupa ce m-am jucat cu rasucit / skimbat / adaugat / scos boxuri de informatie si call to action in functie de gradele de importanta, am zis sa ma duc sa validez acest wireframe si cu baietii de pe la strategie. Toata lumea e ok, asadar de-abia acum urmeaza partea juicy:

Incadrare in browser

Eh, undeva la granita dintre layout si structura se mai afla incadrarea in browser. Aici ar fi un punct de placare daca vrei sa intelegi diferenta [dpdv vizual] dintre un layout web si un layout de print. Daca majoritatea userilor de internet folosesc rezolutia 1024×768, asta inseamna ca vizualul nostru nu trebuie sa sara de 980px latime [+scroll] iar cele mai importante elemente din site trebuie sa fie afisate in primii 550px din lungimea site-ului. Personal, prefer latimea de 960px, caci sunt un mare fan al backgroundului iar in cazul de fata nu e necesar un display de 100% al layoutului pe browser. Vizualul nostru ar trebui sa se incadreze cam asa:

Layout

Eh, si iata ca a sosit momentul mult asteptat, moment in care nu mai trebuie sa-ti faci griji pt spatieri, incadrari, organizare, usability si alte nebunii [ce sunt deja marcata pe canvasul tau prin rulers si guidelines].
Layoutul are si el, dragutul, o serie de constrangeri, reguli, sugestii… care pana la urma urmei nu fac decat sa-ti inlesneasca munca, daca tii cont de ele. Deci, e bine sa tii cont de:

1. outline
2. cromatica
3. content
4. animatie
5. SEO
6. implementare

Outline-ul este o buna metoda de a verifica cantitatea vizuala a layoutului, ce nu tre’ sa fie nici prea plin [obositor] dar nici prea slab [unappealing] si functioneaza cam asa: de-ndata ce elimini cromatica din site, poti observa mai usor aglomerarile inutile de sectiuni, de obicei exprimate prin linii, curbe etc.
Ok, hai sa-ti dau un exemplu: sa presupunem ca avem cateva boxuri de informatie, evidentiate prin backgrounduri diferite. In acest caz evidentierea cromatica este sufiecienta, nu mai e nevoie de ‘ingrosare’ prin diverse outline-uri [simple is better]. Cec aut dis vijual:

Cromatica - pentru ca un site sa fie spectaculos, nu tre sa aiba multe culori, ci sa distribuie corect 3-4 culori, in functie de necesitati. Asadar, pe langa clasicul alb/negru [inkis/deskis] am adaugat albastru si portocaliu, culori complementare a caror combinatie e vie, e funky fresh si ma ajuta sa ierarhizez vizual informatia din site.
Blocurile de suport ale contentului sunt albe pe negru [negru in cazul nostru este albastru marin inkis si sters], iar linia de design este oarecum ‘rebela’ pt. un bloc de content [analizandu-le insumat], atat cat sa sparga clasicul box cu colturi rotunjite, dar nu atat cat sa incurce si sa de dea furca implementarii. Nu uita, aceste este totusi un site de content, un portal de dating [adica tre sa faciliteze afisarea informatiei in detrimentul spectaculozitatii vizuale].

Avand in vedere ca ApropiereFaraLimite.ro este un site de content [text + poze], acestea trebuie scoase in evidenta ierarhic; avem albastru si portocaliu, asadar, portocaliu il voi folosi in titluri, caci automat fontul va fi mai mare, deci trebuie sa fie luminos, iar albastru pt content [text simplu] si subtitluri:

Animatia o pastrez in punctele cheie: header, call to action si bannere; de obicei acestea 3 au o cantitate de text mica, deci te poti juca cu ea in animatii [flash].
Nu, n-am uitat! Foarte important baaaah >> SEO, adicatalea Search Engine Optimization. Degeaba desenezi ce desenezi, daca dupa implementare, vecinu’ gugle nu stie sa citeasca la tine in site. So, ai grija, nu sacrifica mecanisme de SEO de dragul frumusetii inutile.

Eh, ajuns la final, vizualul meu arata cam asa:

Se serveste fierbinte, dupa preferinta; Enjoy