Web design

Tipuri de site-uri:
1. Landing – reclama directa
2. Multipage – SEO (blog, articole)
3. Content – SEO, organica
4. Internet-magazine – Reclama directa si SEO
5. SaaS – product design. Software, aplicatii – Functie (produs) lucru asupra produsului
6. Mobile first – mai intai se face versiunea mobile si apoi cea de desktop – Reclama directa
Fiecare trecere pe site trebuie sa se transforme in bani pentru proprietarul acestuia si sa aduca
profit. Adica eu creez ceva ce trebuie sa genereze bani pentru client. Trebuie sa ma intreb – cum
designul meu va ajuta sa aduca mai multi bani clientului? Cum sa fac asa ca cat mai multi
vizitatori sa lase datele? Anume asa gandire, asa intrebari ma ajuta sa cresc in design. Sa analizez
cu clientul despre pravki care vrem sa le facem – cum anume aceasta pravka va aduce mai multi
bani? In primul rand e eficienta si apoi frumusetea.

Algoritmul de creare a designului:

1. Sarcina – ce fac eu? Pentru cine fac siteul, ce domeniu?
2. Cercetarea – cercetez piata, concurentii. Sa ma pot baza pe ceva! Sa vad plusuri,
minusuri.
3. Prototipul – conceptia siteului, blocuri, unde va fi textul, repejor daca e posibil de facut si
de aratat clientului, sa fie clar cam cum va arata siteul.
4. Design – completare cu font, culori, imagini text, redactarea
5. Front-end – scrierea codului.

Ce trebuie să fie pe site? – trebuie sa inteleg despre ce vrea sa povesteasca, ce vrea sa

transmita clientul prin site-ul sau?
Harta siteului – descrierea ierarhica a paginilor si blocurilor
Paginile cheie (sensurile cheie)
1. Descrierea produsului/serviciului
2. Prețurile – tarife, descarcare price, lasarea contactelor, completarea formularului etc
3. Contactele – cum cumpara, unde se adreseaza – formular de comanda etc
Pagini/sensuri suplimentare
1. Articole
2. Catalog
 3. Testimoniale
4. Echipa
5. …
Pagina principala – punctul de acces spre paginile chee interne

Elementele paginii
1. Logotipul și denumirea companiei
2. Headerul cu navigare, contacte
3. Corpul paginii cu content
4. Footer cu linkuri secundare

Atomii design-ului
1. Atomii informatiei – transmitem anumite sensuri: prin text si prin imagini
2. Atomii atentiei – pentru a atrage atentia, a concentra pe vizitator la ceva: forma și contur
– de asemenea impart spatiul; culoare: ton, contrast, luminozitate; Marime; Font si
nacertania; animatia.
Design-ul microformatelor (elemente UI):
1. Primul ecran – trebuie sa fie cea mai importanta informatie, clara, concreta sa incapa
ilustratia, banerul, preturile totul ce e importa pentru a atrage vizitatorul, sal fac sa dea
scroll sa ramana si sa studieze siteul. (intri deodata pe primul ecran, vezi si produsul si
preturile ca sa inteleaga ca e magazin).
2. Iconita + text – sa nu fie cercul in afara iconitei, doar iconita sa fie mare.
3. Meniu
4. Tarife
5. Sens: text + vizualizare – textul ce vreau sa transmit si adaug o imagine ce explica asta,
demonstreaza. Pentru a adauga desing, trebuie sa ma gandesc ce sensuri transmit si
sa aleg acea imagine care ma ajuta sa transmit acest sens. Poate fi o metafora,
aisberg spre exemplu, o vizualizare mai complexa, interesanta, creative, originala.
In primul rand sa ma gandesc ce vreau sa transmit si in al doilea rand sa ma
gandesc cum sa vizualizez asta si sa ajut omul sa inteleaga asta. Desingul frumos se
deosebeste de cel plictisitor prin vizualizare interesanta, diferita, metaforica.
6. Galerie – sa fie spatiu destul, sa nu se lipeasca elementele, sa arat in primul rand
contentul, nu sa desenez design-ul, ci ceea ce transmit in primul rand si apoi vizualizarea
asta.
7. Cartonase ale blocurilor – sa fie un text contrastant, citet pe imagine, pot intuneca putin
zona textului, sa adaptez ca textul sa se vada si sa se citeasca bine. Gruparea vizuala a
informatiei in cartonase informationale prin umbra, contur, rame
 8. Testimoniale – textul trebuie sa predomine, fiind ca oamenii chiar il citesc, sal prezint in
marime mare si clara.
9. Introducere date – sa fie o consecutivitatea, de sus in jus, ceea ce e necesar, sa nu fie prea
multe. Calculator, polzunki (pentru a elinia o micro actiune sai fie mai usoara experienta
userului)
10. Baner – vizualizare, text si CTA
11. Forma de comanda – trebuie sa le fac interesante, sa fie creative sa nu fie obisnuite,
plictisitoare, mai adaug un bonus ceva, iconita, vizualizare, fon, contur etc
12. Reprezentare date – nu sa transmit pur si simplu cifre, dar sa le vizualizez prin diagrame,
tabele, grafice, dinamica preturilor, calendarul platilor etc – date importante care trebuie
transmise sa le reprezint frumos, usor si clar

Inca 3 conceptii pentru microformate

1. Conceptul ecranelor si straturilor – cand creez design sa gandesc in categoria ecranelor si
straturilor – in acest ecran transmit asa sensuri si acest ecran incape intreg pe monitor.
Dau scroll mai departe si vad urmatorul bloc, si el tot se vede intreg. Straturile, blocurile
sunt fixate, se vede totul deodata
2. Conceptul fixarii privirii – trebuie sa grupez informatia, sensurile, elementele sa fie
impreuna, sa nu alearga privirea vizitatorului fiind ca el priveste intro directive
3. Conceptul simplitatii:
1. In primul rand ma gandesc la sensul ce vreau sa arat, sa povestesc
2. Apoi la metodele de accidentie – ca sa nu se amestece toate elementele (text,
imagine) sa nu fie in haos – ma gandesc ce sa accentuez, ce culoare sa pun, ce sa
evidentiez, ce sa umbresc, sa fac mai putin transparent etc
3. Nu adaug ceea ce e in plus. Nu trebuie sa fac design pentru design. Fiecare element
trebuie sa fie motivata, sa fie clar de ce folosesc imaginea, evidentierea ceea etc.

Momente tehnice
1. Pe un domen pot face asa ca sa fie site multifunctional, sa aiba format diferit a paginilor –
blogul sa fie pe wordpress spre exemplu, pentru comoditate de plasare a anunturilor si
citire.
2. Marimea machetului:
1. Marimea frame-ului mai mult de 576px – suprafata de lucru 540px
2. Marimea frame-ului mai mult de 768px – suprafata de lucru 720px
3. Marimea frame-ului mai mult de 992px – suprafata de lucru 960px
4. Marimea frame-ului mai mult de 1200px – suprafata de lucru 1140px
 Landing Page

Landing page – site dintr-o pagina care maxim raspunde la cererea vizitatorului si-l convinge sa
faca o anumita actiune.

3 etape de creare a landing-ului perfect

1. Etapa de sens. Sarcina: de gasit si de formulat numarul maxim de fapte/date unice si
importante despre companie si oferta clara pentru vizitatorii site-ului. (brief). Pentru a fi
un design unic, sa aiba sensuri unice, ca sa nu para un design de sablon. Anume sensurile
il fac pe om sa inteleaga ce presupune acest site si ce actiune trebuie sa faca.

Unde iau sensurile?

1. Date importante despre companie, artefacte (documente, certificate etc), cifre
2. Triggere (autoritatea, limitarea, urgenta)
3. Intrebarile si obiectiile clientilor
4. Ramurile cuvintelor-cheie wordstat.yandex.ru
5. Beneficiile vizitatorului

Sa descifrez sensurile, sa nu le scriu abstract, sablonic.

Sensul = Cuvant + Vizualizare

2. Etapa vizuala. Sarcina: vizualizarea clara faptelor, plasarea corecta a accentelor cu

ajutorul tipografiei si graficei.
Nu se primeste designul fiind ca formulez niste sensuri sablonice si le vizualizez tot
sablonic. Odata ce e un sensbine descifrat si vizualizarea va fi una mai deosebita, unica.
Trebuie sa vizualizez sensul, interiorul ca sa creez ceva viu, ceva ce atrage. Nu pur si
simplu desen. Primar e sensul, continutul – si apoi design-ul!

Sarcina siteului e sa arate expertiza, profesionalismul companiei si sa creeze

incredere. Extrag faptele despre companie care vor arata acest professionalism sis a
creeze incredere (testimoniale, triggere, design calitativ)

3. Etapa tehnica. Sarcina: afisarea corecta in browsere, adaptarea mobila, viteza maxima
de incarcare a siteului.
Acum e concurenta mare. Mai inainte se putea de facut cumva asa. Dar acum trebuie de facut
foarte bine siteul, si e mai bun decat cel in constructore. Constructore pentru o solutie rapida,
simpla. Daca siteul trebuie sa fie promovat pe SEO, sa se evidentieze pe piata – trebuie un site
profesionst.

Valoarea lending-ului se determina in procentul de apeluri, formulare completate, in

vinzari, in bani. Prin formulare corecta si vizualizarea clara a sensurilor, pot creste
conversia lendingului, si profitul clientului. Site-ul nu trebuie sa fie doar frumos, nu are
sens ca e frumos daca el nu aduce bani. Trebuie sa fie un landing care aduce rezultat.

Mai intai scriu toate sensurile in text, doar dupa asta trec la design.

Nu conteaza daca design-ul ne place sau nu – ci anume cifrele ce spun conteaza.

In realitate, clientul nu intelege ce doreste si nu e predispus sa comunice. Si comanda

landing de la designer.

Checklist de creare a landing-ului:

1. Analiza pietei si cererilor pe google/yandex
 Mai intai caut si ma uit la site-urile din nisa, nu ma bag pe behance, pe dribble dar in nisa
ma uit ce este, ce siteuri sunt pe primele pozitii din google. Sa trec prin mine experienta
existena a siteurilor din domeniu, sa am pe ce sa ma bazez, formulez anumite tendinte si
legitati care se repeta la fiecare site practic.
 Ma uit la cererile in direct (wordstat.yande.ru) – ma uit ce se cere pe piata, si in baza la
aceste cereri pot formula anumite sensuri, care vor raspunde acestor cereri. Pot combina
cumva aceste sensuri, in dependenta de cate cereri sunt pe piata, cat e de cautat.
 Sa inteleg contextul utilizarii – daca oamenii stau pe mob, in primul rand fac pentru mob
etc, sau pentru email marketing. Cel mai des, landing-ul e pentru a trimite reclama
contextuala google/yandex
 Inspiratie. Behance, pinterest, alte siteuri.

2. Offer
 Ce vindem.
3. Sensuri
4. Blocuri: de baza + unice
5. Titluri si texturi
6. Vizualizarea