Spatiul alb este spatiul dintre diferite elemente de pe o pagina - zona cuprinsa intre text, imagini, link-uri, spatiul dintre liniile unui paragraf, etc. Acesta separa vizual elementele de design.

Spatiul alb permite mai usor “scanarea” unei pagini. Este curat, arata profesional, iar atunci cand este folosit in mod corect ofera site-ului un look fresh si permite transmiterea mai usoara a mesajului catre utilizator.

Din pacate, spatiul alb este unul din elementele cele mai subestimate elemente dintr-un design. Doar pentru ca nu este lucios sau face blink nu inseamna ca nu este important sau esential pentru un site.

Pentru a intelege mai bine ce vreau sa va explic, haideti sa aruncam o privire la cateva site-uri care folosesc in mod eficient spatiul alb.

Motorul de cautare Google

Google este cel mai vizitat site din lume. Pe pagina lor de start au doar cateva elemente: logo, un formular de cautare si o selectie rapida a limbii. La miscarea mouse-ului apar si alte elemente, dar asta este o alta discutie.

GrooveShark

Spatiul alb nu inseamna literalmente ca este “alb”. De exemplu grooveshark.com. Cu formular de cautare albastru, pe fundal albastru, reuseste sa focalizeze atentia pe acest formular. De asemenea meniul pe fundal alb este usor de observat.

Apple.com

Nu puteam sa trec cu vederea peste Apple, care inspira pe multi designeri. Pe pagina de start isi promoveaza, de obicei, un singur produs. In exemplu de jos sunt folosite nuante neutre: negru, gri si alb. Focalizarea pe produs este obiectivul principal in acest caz.

Cum se utilizeaza spatiul alb eficient

Utilizand spatiul alb in mod eficient poate fi dificil. Iata cateva sfaturi inainte de a incepe sa-l folosesti:

Spatierea dintre linii

Line spacing sau spatierea dintre liniile intr-un paragraf face diferenta cand vine vorba de lizibilitate si usurinta de citire pe o pagina web:

In cazul in care liniile sunt prea apropriate sau inexistente textul devine foarte greu de citit:

In cazul in care liniile sunt raspandinte prea departe unul de altul cuvintele incep sa “pluteasca” si nu se mai realizeaza conectarea de la una la alta:

Margini

Marginile sunt spatiile in jurul unui anumit element intr-un design. Marginile folosite in CSS sunt o modalitate foarte buna de a controla acest spatiu in avantajul tau. Atunci cand lucrezi cu margini, retine cateva lucruri:

1. Consecventa. Pastreaza o coerenta in intreg aspectul, astfel vei obtine un design mai organizat si va arata mai profesionist.

2. Nu prea mult. Nu face marginile prea mari. Separarea prea mare poate crea o senzatie de deconectare dintre elemente, asa cum am explicat mai sus la spatierea dintre liniile unui paragraf.

3. Nu prea putin. Adu-ti aminte ca discutam despre spatiul alb, deci asigura-te ca acesta exista. Arata urat daca lipesti textul langa imagine, meniu, logo sau oricare alt element. Lasa-le utilizatorilor spatiu sa respire.

Design minimalist nu inseamna spatiu alb

Una dintre greselile frecvente este sa punem semnul egalitatii intre spatiu alb si minimalistic. Este gresit. Un site poate fi incarcat cu mult continut, dar sa fie usor de parcurs cu o utilizare corecta a spatiului alb.

De exemplu Smashing Magazine. Este un site cu continut bogat, dar au reusit sa faca site-ul usor de “scanat” si citit. Ei realizeaza acest lucru printr-o selectie atenta de culori, marimi de text si bineinteles spatiu alb.

In incheiere, tine minte: White space is good space.

Ti-a placut articolul? Ai completari? Scrie un comentariu mai jos

Inainte sa creezi documentul, asigura-te ca Foreground Color este alb si Background Color este negru. Daca nu sunt setate culorile implicite, reseteaza-le apasand tasta “D” apoi tasta “X”. Exemplu mai jos.

Creaza un document nou. File > New. Scrie la Width 600 si Height 800 px. Selecteaza Background Color de la optiunea Background Contents, ca in imaginea de mai jos.

Imaginea

Importa imaginea de mai jos in documentul creat.

Acum, trebuie sa inlaturam background-ul galben. Aici exista mai multe tehnici. Se pot aplica decupaje, masti (mask) etc. Nu am sa intru in detaliu. Daca nu te descurici, arunca o privire aici.

Modificarea imaginii

Dupa ce ai inlaturat background-ul galben, din meniul cu unelte selecteaza Marquee Tool. Asigura-te ca ai setarile ca in imaginea de mai jos: Feather 35px, optiunea Anti-alias activata si Style Normal.

Selectia ar trebui sa arate cam asa:

Selecteaza din meniu: Selection>Refine Edge. Aceasta comanda ne permite sa facem niste setari cool cum ar fi feaher, smooth, contrast si altele Introdu setarile de mai jos:

In cazul in care marginile mai sunt vizibile, schimba procentul de la Contract/Expand. Cand ai terminat apasa pe OK si selecteaza din meniu: Layer>Layer Mask>Reveal Selection.

Marim putin contrastul imaginii. Selecteaza din meniu: Image>Adjustments>Brightness/Contrast, apoi introdu setarile de mai jos.

Mai imbunatatim putin imaginea adaugand noise. Selecteaza din meniu: Filter>Noise>Add Noise.

Asa ar trebui sa arate acum imaginea:

Efecte speciale

Cloneaza layer-ul cu imaginea. Click dreapta pe layer si selecteaza Duplicate Layer (CTRL+J).

Selecteaza primul layer cu imaginea, cel de jos, iar din meniu: Filter>Blur>Motion Blur. Introdu setarile de mai jos:

Pentru urmatorul pas trebuie sa downloadezi gradient style-ul acesta: spectrums. Salveaza-l si dublu click pe fisier. Se instaleaza automat. In cazul in care Windows-ul nu recunoaste tipul de fisier, selecteaza Photoshop la Open With.

Selecteaza layer-ul cu efectul Motion Blur, cel de jos. Click dreapta pe layer si selecteaza Blending Options. Se va deschide o fereasta. Selecteaza din stanga Gradient Overlay. Click pe Gradient si introdu setarile ca in imaginea de mai jos:

Sa mai adaugam putine elemente cool Am ales cateva cuvinte: fell act desire si creating dream touch contrast motion. Selecteaza din meniul cu unelte Horizontal Type Tool (T).

Scrie primul grup de cuvinte: fell act desire. Apasa CTRL+T. Apoi de sub meniul principal, rotim textul cu -60°:

Acum asigura-te ca textul este de culoare neagra. Click dreapta pe layer-ul cu textul si selecteaza Convert to Smart Object, apoi din meniu: Filter>Distort>Wave si introdu valorile de mai jos:

Click dreapta pe layer-ul cu textul si selecteaza Blending Options. Se va deschide o fereastra, exact ca mai sus. Descarca stilul de gradient Transparent Rainbow. Selecteaza Gradient Overlay si selectezi stilul predefinit pe care tocmai l-ai descarcat, Transparent Rainbow, apoi introdu seteaza procentul de opacitate (Opacity) la 50%. Selecteaza layer-ul si seteaza opacitatea lui la 80%.

Aplica pe acest layer filtrul Motion Blur, iar la optiunea Distance, introdu valorea 10 px. Vezi mai sus, primul pas din efecte speciale.

Cu al doilea grup de cuvinte, creating dream touch contrast motion, repeta actiunile de mai sus, de la primul grup de cuvinte.

In sfarsit, ultimul pas

Pentru ca imaginea sa arate si mai bine, mai modificam putin luminozitatea si contrastul cu valorile: Brightness +10 si Contrast +60. Gata. Imaginea ta ar trebui sa arate asa:

Dupa controversata “schimbare la fata” a celor de la Pepsi, cei de la Citroen intra si ei in hora facand un pas spre viitor cu noul logo.

Ce putem observa la noul logo:

• pastreaza aceleasi structura (simbol sus, text jos)
• font customizat
• simbolul mai rotunjit, putin exagerat cu efectele aplicate (cromat/shine)
• nu au renuntat la rosu, chiar daca au facut swich intre simbol si text
• pe ansamblu, o tenta futuristica

In urma unui sondaj pe photoshopromania.ro am aflat ca cea mai utilizata versiune de Photoshop este CS3. Oarecum de asteptat, fiind cea mai mediatizata si bine inchegata versiune, in care isi faceau pentru prima data aparitia Smart Object si editarea 3D. Interfata noua, modificata radical fata de CS2, i-a oferit acestuia un plus de imagine si promovare. Viteza mult imbunatatita si abundenta de tutoriale specifice acestei versiuni au creat o adevarata isterie asupra CS3. Din totalul de 710 voturi, CS3 a primit 352 de voturi, adica 50% din selectiile votantilor.

Sursa: photoshopromania.ro

Primul

Al doilea

Asta se intampla cand faci o campanie “pe fuga”. Oricum, tot respectul pentru videoclip. A iesit bine!

Functionarii publici din Senatul Romaniei s-au gandit sa munceasca si ei ceva la site-ul oficial al Institutiei. Zis si facut. Au schimbat design-ul (oribil) si soft-ul (asta macar merge si pe alt browser decat Internet Explorer).

Nu intram foarte mult in detalii ca ne pierdem timpul degeaba. Fac o lista scurta cu ce mi-a atras atentia:

• design: 0 (zero!) - pare facut in Paint sau in Microsoft Word
• user-usability - 0 (zero!)
• foloseste iframe ca in anii ‘90
• apeleaza enorm de multe fisiere css si clase/id care se anuleaza una pe alta
• mult prea mult JavaScript folosit fara cap si inutil
• revin la user-usability: e aproape imposibil sa navighezi prin meniu

Sa facem o comparatie intre senat.ro si whitehouse.gov. Si ei au schimbat design-ul cand s-a schimbat “managerul”, dupa sistemul “se schimba managerul, se schimba si design-ul” Da, stiu, sunt americani! E vorba de Casa Alba… Si ce daca? Eu zic ca se poate si la noi!

P.S.: Sunt curios ce buget s-a alocat pentru “facelift-ul” asta (senat.ro)!

Setarea fonturilor

Sa presupunem ca vrei sa setezi fontul Helvetica la toti selectorii headings. Pentru a face asta, scrie (in <style> sau in fisierul css):

h1, h2, h3, h4, h5, h6 {font-family: Helvetica;}

Ok, toate bune si frumoase, dar… nu toti utilizatorii au instalat fontul Helvetica. Este recomandat sa folosim de fiecare data o familie de fonturi - font-family. Astfel, browser-ul va atibui textului primul font disponibil. In cazul nostru, folosim urmatoarea familie:

h1, h2, h3, h4, h5, h6 {font-family: Helvetica, Arial, Geneva;}

Astfel, dupa cum spuneam mai sus, browser-ul va verifica fonturile disponibile in ordinea care sunt scrise. Adica, Helvetica, Arial, Geneva si va atribui textului primul font disponibil.

Familii generice

Exista cazuri in care lista de mai sus nu este de ajuns. Ce se intampla daca un browser nu are acces la niciunul dintre fonturile listate? Browser-ul va atribui fontul implicit, cu exceptia cazului in care oferi un nume generic de familie pentru a suplimenta mecanismul de rezerva. De exemplu, in cazul nostru, fonturile alese fac parte din familia generica sans-serif. Codul nostru va arata astfel:

h1, h2, h3, h4, h5, h6 {font-family: Helvetica, Arial, Geneva, sans-serif;}

Atribuirea familiei generice sans-serif, comunica browser-ului sa foloseasca orice font sans-serif, in cazul in care niciunul din cele enumerate nu este disponibil.

Exista cinci familii de font-uri generice, cu toate ca doua dintre ele nu prea sunt utile folosite:

• Serif: fonturi, cum ar fi Times, New Century Schoolbook, şi Garamond.
• Sans-Serif: fonturi, cum ar fi Geneva, Helvetica si Arial.
• Monospace: courier este cel mai frecvent font monospace utilizat. Retine ca fonturile monospace pot fi, de asemenea, fie Serif sau Sans-Serif. Courier este un font Serif, de exemplu.
• Cursiv: fonturi care emuleaza scrisul de mana. Fonturile cursiv sunt, de obicei, destul de greu de citit pe ecran, astfel folosirea lor este descurajata. Unele browsere nu pot folosi fonturi cursiv.
• Fantasy: fonturi care nu se incadreaza in ultimele patru familii, cum ar fi Zapf Dingbats, aerisi sau Klingon. Pentru ca este un mix din toate familiile, este definit mai mult de ceea ce nu este (cu alte patru familii de font) decat ceea ce este

Este posibil, de asemenea, pur si simplu sa declari un font generic de familie, fara niciun font anume. De exemplu:

h1, h2, h3, h4, h5, h6 {font-family: sans-serif;}

Asocierea fonturilor intre Macintosh si Windows

* instalat odata cu Internet Explorer (unele sisteme de operare nu au instalat acest browser)

Informatii generale despre webdesign si development.

2. Pattern Tap

Colectii de elemente pentru site-uri. O sursa buna pentru inspiratii

3. Webdesigner Depot

Exemple de tehnici si practici in webdesign.

4. Web Designer Wall

Idei, tutoriale si discutii despre tentintele in web design.

5. Logo Designer Blog

Branding, logo & identity design.

6. LogoPond

Logo-uri, logo-uri si iar logo-uri

7. Logo of The Day

Logo-uri interesante zi de zi.