Sarcinile Web-designer-ului:

1. Proiectarea interfaței (mai întâi funcțiile site-ului și apoi aspectului exterior)

2. Cunoașterea programelor Figma, XD, Photoshop
3. Abilitatea de a lucra în stilistici contemporane
4. Abilitatea de a lucra cu teoria culorilor, compoziția și tipografia
5. Lucrul cu soft util: Moqup, Marvel, Invision, Principle, After Efects etc.
6. Înțelegerea front-end-ului și interacțiunii cu front-end developer
7. Căutarea clienților și lucrul pe freelance
Trebuie mereu să urmăresc trendurile web-design, să văd exemple de site-uri
contemporane, să compar, să văd ce e frumos și ce nu, ce e funcțional și ce nu.
Zero UI – focus pe web-design bazat pe content și text, minimalizez utilizarea graficei și
fotografiei.
Site-urile trebuie să aibă:
1. Interface ușor, laconic și minimalistic
2. Flat-ul nu mai este la modă (fără umbră, fără 3-d, fără poze, culori înțepătoare)
3. Tipografie contemporană și abilitatea de a lucra cu literele și fonturile, cum să le
combin cu imaginile ca să transmit un mesaj, o idee, o emoție
4. Un mic detaliu (unghiuri, linie, un accent pe culoare, ceva mic ce creează o imagine
atrăgătoare și deosebită)

Cel mai bine să fac site în următoarele dimensiuni:

1. 1600px lungime
2. 1900px lungime
Grafica vectorială nu-și modifică calitatea, ele pot avea dimensiuni infinite
Grafica de tip raster are dimensiuni exacte, fixe (imagini, poze) își pierd calitatatea dacă
modifici dimensiunile.
 Interfața Figma și elementele UI
Apăs Ctrl+0 – pentru a vedea dimensiunea reală în Figma
Apăs Ctrl+Shift+\ - pentru a elimina coloana cu layers
Apăs Ctrl+\ - pentru a elimina toată interfața UI
Ctrl+D pentru a duplica elementul.
Shift+A autolayout.
Să nu aleg culori din pătratul din dreapta extremă. Așa mai moi culori.
Sa nu folosesc Regular, să folosesc ceva diferit de textul obișnuit.
Formular de completare
Cîmpurile pentru completarea info sunt albe de obicei (daca fonul e negru si invers).
Textul din caseta de completare să fie Regular, dimensiunea 14-15 px, transparență 50% -
fiind că nu e text de bază.
Pentru butoane să se înceapă textul cu verb. Black e bine pentru titluri și pentru butoane.
Textul din buton să fie mai mare un pic - 16px spre exemplu.
Dacă fonul e întunecat – textul e deschis și invers. Mereu să analizez cum e elementul
întunecat sau nu și să aleg culoarea elementului de asupra pentru a fi vizibil.
Daca textul e mic, butonul (dreptunghiul) sa fie proportional (nu prea mare)
Butonul cu colț rotunjit – 5-15px (rotunjirea) Dacă titlul e cu litere mari, și textul din buton
să fie cu litere mari. Umbra să fie ori în culoarea butonului, ori neagră, dar mai transparent,
puțin de tot să se vadă.
Logotipul
Logotipul trebuie să fie compact, nu este identic cu alte elemente fiind că nu e atât de
important. Logotipul nu trebuie să fie încărcat, să fie simplu, minimalistic, abstract, comod.
Pot face rapid conceptul unui logotip. Direcția gradientului linear din stânga sus spre
dreapta jos. Culoarea din dreapta are 100% culoare și mai închis, iar cel din stânga mai
deschis și mai transparent un pic.
Lettering – logotip baza pe scrierea literelor. Laconic, simplu – mai ușor de aplicat pe urmă
pe cărți de vizită, materiale promoționale.
Fac shrift 17, thin, roboto si spațiul între litere 22% Sa ma inspir din alte logotipuri,
exemple!
Navigarea Meniul sa-l scriu totul intr-un bloc de text, cu spatii egale prin backspace pentru
a fi mai usor de redactat.
Când fac navigarea, trebuie mereu să arăt cum arată un element activ al meniului (spre
exemplu acasă să fie cu extrabold). Fac diverse accenturi (meniu cu spațiu mai larg între
litere, evidențiere prin culoare și linie jos)
Triggere Textul să fie totul într-un stil și grosime (titlurile).
Textul paragraf să fie 13-15 px, cel mai des regular, nu se fac bold.
Amplasarea textului, aranjarea lui e frumoasa cand e sub forma de piramida intoarsa
Triggerul e format din iconiță (poză) titlu și paragraph
Cand creez ceva, sa ma intreb ce distanta este intre elementele create, pentru a fi
considerate comune, impreuna sau separate.
Cartonașe Il fac alb, si il evidentiez fie prin alt fon, fie ii adaug o umbra usoara, fara
contur! Distanta intre poza si cartonas sa fie nu mica, 15-20px, poate poza sa fie orientata
spre stanga doar. Textul sa aiba culoare intre albastru si sur.
Inputs Pentru inputuri pot folosi contur usor, moale, slab sau umbra. Pot rotunji, doar daca
am designul in general rotunjit. Pot face conturul rosu la inputuri si la text incorrect pus si
verde la cel corect scris (email spre exemplu)
Cel mai bine de lucrat pentru fon culorile închise (negru, albastru, violet, roz, roșu) în
cadranul culorilor să nu folosesc primul din stânga și nici cele care stau la hotar cu cadrul
stâng. Oranjul, verde să nu-l folosesc pentru fon. Pentru text culaorea neagra alba, sau
aproape de intunecat (albastru intunecat, albastru sur), sa dea un accent interesant.
Dimensiunea optimală pentru textul care nu e titlu e 13-15 px
Titlurile. Titlurile trebuie sa aiba acelasi stil, sa fie de diferite nivele dar de acelasi stil
(daca e bold cel mai mare titlu, celelalte tot sunt bold). Trebuie sa am cateva marimi de
titluri h1,h2,h3,h4 etc.
Sa respect ideea generala, in text, srift, culori, spatii, forme ascutite/ondulate etc Sectiunile
siteului trebuie sa fie intro idee, intrun concept, sa nu se deosebeasca dupa marimea
textului, dupa culori etc Subtitlul il pot pune deasupra titlului, si ca sa fie in contrast cu
titlul, il fac light sau regular si 15-17 px marimea.
Paragrafele. De obicei 13-15 px, sa fie in acelasi srift ca si celelalte texte, dar niciodata nu
se fac black, bold. Cel mai des regular, light, dar mai bine regular! Spatiu intre randuri nu
tare mari, cum sunt pe siteuri sa ma uit – 140-150%. Cel mai corect e sa fie alineat pe
stanga. Cel mai bine functioneaza si arata paragraful din 3-4 randuri. Sa am grija sa arate
bine paragraful, anume lungimea randurilor. Primul rand e cel mai mare, pe urma oleaca
mai mic, si cel mai mic. Sa arate frumos, usor. Nici prea mic rand, optim sa fie.
Gradiente. Utilizez cel linear, din coltul stang de sus spre cel drept de jos. Sa nu aleg
culorile extremale gen verde deschis spre albastu. Cel mai bine albastru, galben, rosu, oranj.
Primul patrat din stanga aleg culoare albastra spre exemplu, iar celalalt patrat spre ce
culoare vreau sa mearga (violet) si pun 100% la transparenta. Gradientele le fac in culori
vecine, care sunt in acelasi diapason, alaturea, care sunt cat mai aproape. Albastru cu rosu
spre exemplu. Optimal aceste culori din gradient, sa fie nuantele aceleasi culori, sa fie
alaturi!
Construcția Offerului. Oferta unica de vanzare sa fie formulata intrun concept scurt, de
doua randuri maxim. De obicei se afla pe primul ecran, pentru a descrie sensul primului
ecran, sa spuna ce va fi mai departe pe ecran si sa atraga atentia persoanei. Offerul e format
din titlu, text si buton. Important sa fie toate alaturea, la aceeasi distanta, sa fie percepute ca
un intreg.
Fonturile. fonts.googl.com Pentru titlu pot folosi fonturi deosebite, nestandarte, care sa
atraga atentia, fiind ca e putin text. Pacifico (foarte rar in web) , amatic, oswald spre
exemplu (lobster sa nu mai folosesc). Perechea font cand titlul e intrun font, paragraful e in
altul. Paragraful pot sal fac in roboto, open sans, tahoma, arial, pt sans, mono sans. Ma uit la
nisa pentru care fac site, in ce domeniu – ca sa vad daca se potriveste fontul sau nu. Daca
fac site pentru biblioteca, pentru jurnal de moda, legat de arta – pot folosi font с засечками
(serif), adica indoituri la capatul literelor, mai artistic, dar unora poate sa le placa, unora nu.
Fara serif – e un font mai digital, mai comun si folosit la general, ca sa fie maxim simplu in
interface. Handwriting foarte rar de folosit (pacifico cel mai bine). Display tare rar utilizat
in web. Monospace e interesant pentru un design anumit.
Indentarea – explica compozitia. Compozitia e arta de a plasa elementul necesar in locul
necesar. Spatiile intre elemente, dimensiunile totul trebuie sa fie aranjat si plasat corect.
Daca am 4 elemente de aceeasi culoare, le pun impreuna sa fie un intreg, toate la aceeasi
distanta una de alta si alineate in dependenta de contextul. Daca aranjarea elementelor e pe
stanga, le aranjez si pe acestea pe stanga etc. Sarcina mea e sa fac un design liber, unde
elementele nu sunt in conflict cu altele, unde se completeaza usor, unde este destul spatiu, e
larg, e liber, e o imagine usoara.
 Prototiparea în Figma
Etapele creării web designului:
1. Ideea
2. Sketching
3. Prototiparea (moqup)
4. Design
5. Adaptarea
6. Animația
7. Rezultatul final

Important:
1. Prototipul - nu e design. Gradarea surului.
2. Spații. Regula ”intern și extern”
3. Ierarhia titlului încă nu e anulată.
4. Layout grid e obligatoriu.
5. Înălțimea header-ului apr. 80 px și contentul dinăuntru să fie alineat în centru pe
verticală.
6. Înălțimea primul ecran cu header – 650-700 px.
7. Toate titlurile cu bold/black
8. Textul din butoane CTA cu bold/black
9. Construcția offer – distanță egală
10. Offer să aibă până la 6 coloane dimensiune
11. Ierarhia titlurilor aceleași dimensiuni ale titlurilor secțiunilor.
12. Distanța de la limita de sus și de jos a secțiunii până la content apr. 70-100 px
13. Nicio distanță în interiorul secțiunii nu poate fi mai mare decât cea principală.
14. Textul din paragrafe până la 15 px doar regular.

Layout grid 12 coloane, witdh 70, glutter 30, Centru.

Folosesc în prototip de la alb până la negru, doar capătul stâng, fără nuanțe!
Dacă elementul e mai important îl fac mai întunecat, dacă mai puțin important – mai
luminos.
Important să determin câte coloane ocupă un element, mai ușor pentru front-end. Elementul
trebuie să înceapă cu partea stângă a coloanei. Pot face excepție, dar să fie pe coloană, nu în
gutter!
In internet magazin, textul de sus poate avea 12px, ca e mult content.
Mereu să aliniez pe stânga textul, ca să fie mai comod.
Primul ecran – cel mai important ecran, el arata ce va fi mai departe pe site. Trebuie
sa fie bine si clar redata informatia, sa fie atragator!
Trebuie să văd deodată, fără să dau scroll contentul primului ecran! 650-700 px să fie
înălțimea primului ecran împreună cu header-ul.
Offerul să fie scurt, concret. Fontul 15 px cel mai bine la descriptor. La titlu 32 px e ok cel
mai mare. Pentru internet magazin pot crea offer nu atât de agresiv, mai simplu. Nu trebuie
sa depaseasca 6 coloane (adica sa nu depaseasca jumatate din suprafata de lucru) pentru a
nu fi prea incarcata partea stanga. Titlul din primul ecran e cel mai mare și e unic! Textul
din CTA, din buton sa fie la fel de gros ca si cel din titlu!
Sa aleg o ilustratie vesela, fericita cu care vizitatorul se va asocia.
Vreau sa arat desktop ceva, iau mockup psd spre exemplu.
Poza daca o fac rotunjita cu 6, la restul tot asa fac.
Am folosit pentru triggere titlu, sa nu compun altul pentru alta sectiune, las tot aceeasi
dimensiune si grosime.
Al doilea ecran
Respect ierarhia titlurilor. Același stil, font. Titlurile secțiunilor au aceeași dimensiuni, font,
stil. Sagetile pot sa se afle in afara layoutului. Folosesc aceleași culori pentru placeholder.
Distanta intre elementele sectiunii nu poate fi mai mare decat distanta intre sectiuni.
Important ca fiecare sectiune sa fie in marime de ecran, pana la 700 px, sa nu faca scroll
persoana.
In footer textul trebuie sa fie cel mai mic, 13px e ok.
Textul link sub el sa fac o linie usor transparenta.
Design-ul adaptiv
Eu acumulez idei, exemple in urma privirii reclamei de afara, tv, internet, siteuri despre
design si astfel formez o biblioteca de idei, concepte care le pot aplica ulterior. Analizez,
compar siteurile, interpretez si in asa fel cresc, dezvolt ideile de a crea site.
De pe behance pot sa ma inspir ceea ce tine de compozitie, culori, forme, sectiuni,
tipografica etc.
Cel mai bun lucru in invatarea mea e sa copii de pe behance exemple de butoane, forme de
introducere culori cu minime modificari, anume asa ma dezvolt, ma invat.
Cum determin cu ce culori lucrez?
Prima culoarea care o determin e culoarea fonului (in internet-magazine cel mai des e cel
alb). A doua culoare, a temei e cea care predomina in toate elementele site-ului. Si a treia
culoare – cea care face accent/contrast pentru butoane CTA de obicei. Culoare contrast
trebuie maxim sa se deosebeasca de culoarea temei.
Pentru tema siteului pot folosi albastru deschis.
Nu trebuie sa creez logo de la zero, pot lua de pe flaticon - iconita. Sa nu aleg iconite
colorate, ele vor ucide designul, arata copilareste. Sa aleg unul monocrom si cu minime
linii.
Culoarea titlului principal sa nu-l fac tot albastru ca culoarea temei, dar nici prea negru daca
e albastru culoarea temei, sa fac titlu in culoarea negru spre albastru.
Primul ecran formeaza ideea generala care o multiplic pe celelalte sectiuni ale siteului.
Nu trebuie sa aleg verde, galben pana la capatul palitrei in partea dreapta, e prea aprins! Sa
nu aleg albastru cu galben sau verde, prea vesel.
Pentru culoarea accentului merge ceva roșu, roz.
Fotografiile tot pot depasi limita layoutului, chiar formeaza un efect wow.
Elementele din cartonașul produsului (titlu, descriere, preț) au sensuri diferite și trebuie să
arate diferit! Titlul e bold, 15px nivelul 5, descrierea 12px, prețul 13px. Fonul cartonașului
il pot face in culoarea temei sur spre albastru spre exemplu.
Cand caut poza in google, pun la instrumente, transparente si marimea deja.
Am pus poza fara umbra, inseamna ca celelalte poze tot sa fie fara umbre (produsele fara
umbra).
Cand fac designul mereu sa pun alte poze, sa nu le repet, pentru ca clientul sa vada designul
si compozitia foarte bine. Sa scriu caracteristicile sa arate corect si profesional!
Mereu sa vad cum arata elementul (cartonasul spre exemplu) cu mai putin text, cu mai mult,
sa vad daca arata bine sau nu.
Sa folosesc un detaliu, un accent in design-ul nostru, care ne fac unici – un patrat, un plus,
un cerc intro parte.
Am terminat prima varianta de design, sa analizez machetul, sa vad daca respect ideea
patratelor cu colturi sau cu rotunjiri spre exemplu, e asa peste tot? Ce sa mai detalizez, ce sa
mai adaug? Totul e bine, e aranjat corect?
Pentru versiunea de desktop – containerul e de 1170 px, suprafata de lucru nu conteaza.

Versiunea de tableta – suprafata de lucru 768px (asa e pentru tablete) , containerul

presupune spatiu din stanga si dreapta a cate 15 px. Layout grid 6 coloane, gutter 30px,
margin 15, type stretch (se intinde pe tableta).
Trebuie sa vad cum formez, stucturez, aranjez informatia pentru versiunea tableta, ca sa fie
cele mai importante elemtente (meniul se transforma in hamburgher de unde si poate selecta
vizitatorul meniul). Tranformarea presupune simplificarea si eliberarea spatiului pentru
elemente mai importante.
Textul il intind de pe prima pana la ultima coloana.
Trebuie sa adaptez designul pentru tableta, asa ca sa incapa si sa arate simplu.
In foarte rare cazuri schimb marimea textului, mai bine il las asa.
Mai intai merge blocul cu titlu apoi imaginea. Fiind ca in design totul se citeste de la stanga
la dreapta.
Nu am nevoie de sagetile pentru navigare pe tableta si telefon, Navigarea se face prin scroll
cu degetul.
Pot forma navigarea prin produse in doua moduri – pun produsele intro linie si persoana
face scroll doar sau pun cate doua produse pe rand (daca as avea doar 4 produse – 2 sus si 2
jos) dar acolo unde sunt mai mult produse, mai bine de facut scroll in dreapta.
Pot micsora fotografiile, chenarele pentru a nu fi prea mari pe tableta/mobil.
Detach distance – daca vreau sa pot redacta elementul copiat de la componentul tatăl.
Versiunea Mobile. 320 px suprafata de lucru si containerul presupune spatiu din stanga si
dreapta a cate 15 px. 2 coloane layout, 30px gutter, stretch,15 px margin.
Pot face sa fie diferite tipuri de navigare, sa arat doar un element, dar pot si inca o parte din
urmatorul, sa se vada ca se poate de facut scroll.
Meniul pentru mobil de facut in patrat negru, transparenta 85%
 Photoshop
Cand creez un nou frame pentru site – 1600 pe 900 px, resolution 72, culori rgb.
Ctrl+; - ascunderea liniilor de directie.
Ctrl+H alinierea
Am pus dimensiunea intre litere de 60 la titlu, pun si la celelalte titluri!
In photoshop – descarc iconite in png format, e ok.
In meniul Abzaț, să scot bifa de pe переносы. Să nu fie problema pentru front-end.
Ierarhia straturilor in photoshop, sa fie de jos in sus.
Pe primul loc e cum sunt eu, ce hobby am, calatoresc sau nu, arata ce calitati sunt, cum sunt
ca om. Clientul cauta om nu serviciu!
Cu penita in photoshop, de facut fonul intunecat, pentru o citire mai usoara.

Freelance
Sa cunoasca toti din jur, cu care interactionez ca sunt web designer, ca pot crea site etc. Sa
comunic, sa tin legatura cu oamenii, sa ma promovez.
Cumpara nu de la portofoliu, nu serviciul – ci de la om. Cumpara de la mine, fiind am reusit
sa conving clientul ca e convenabil, comfortabil si corect sa lucreze cu mine. Trebuie sa ma
invat sa formez relatii cu clientii, modul cum incep convorbirea, prin primul meu raspuns la
proiect! Asta conteaza in primul rand, nu calitatea serviciului meu!
Imi vor da proiectul, doar daca voi arata si va fi clar ca am nevoie de el! Sa raspund adecvat
la oferte, sa arat interesul meu, sa nu dau raspuns aiurea, simplu, superficial. Trebuie sa ma
evidentiez pe freelance, prin factor uman, prin comportament, omenie.
Despre mine sa scriu ceva ce va ramane in memorie, ce atrage, cu umor ceva, sa ma
evidentiez. Cand nu am testimoniale, tot acentul e pe portofoliu si pe descrierea mea. De aia
trebuie sa o fac foarte interesanta, atractiva si convingatoare. Omul vrea sa ma cunoasca
mai bine pe mine, de aia sa fiu activ pe social media, sa ma impart cu ceva bun, sa aiba
credibilitate si incredere mai mare in mine, ca sa fie in rezonanta cu mine. Profilul meu
trebuie sa spuna ca sunt gata si vreau sa lucrez, sa nu fie plictisitor, sa fie intereasant.
5 siteuri sa fac. Preview-urile sa fie atragatoare, interesante, ca la ele se uit clientii. Primul
ecran trebuie sa fie bun, sa atraga!
Chiar si acum, sa raspund la oferte, chiar si la acelea care nu stiu ce de facut, cum – anume
asa inteleg concret, nu abstract ce sa invat, ce sa mai dezvolt! In dependenta de oferte, vad
ca da, trebuie sa invat Wordpress, front-end si anume asa cresc! Sa incep acum cu ceea ce
stiu si sa ma dezvolt zilnic, zilnic sa trimit oferte.
E un proiect care nu-l stiu, sa-l fac impreuna cu cineva care stie.
Daca m-am oprit, nu inseamna ca nu mi s-a primit, asta inseamna ca nu am ajuns, nu am
mers pana la capat. Sa nu ma opresc!
Clientii au nevoie de design, pentru a avea vanzari, pentru business. Si trebuie anume in asa
mod sa discut cu clientii, sa vada ca eu inteleg, ca scopul meu e sa le ajut businessul sa faca
bani. Sa fiu deschis, adecvat, sa arat ca sunt interesat si dornic de colaborare.

In sectiunea despre mine, scriu cum anume voi ajuta clientul, nu ma laud etc.
Sa creez ceva conceptul, ceva mai diferit, simplu dar si unic, alineat altfel elementul etc.
Font – merryweather pentru titluri, CTA

La descrierea lucrarii, chiar si cele create de mine, sa descriu ce am practicat, ce

am incercat sa fac etc. Sa fie mai individual!
Cand propun pretul meu, sa vad care este mediu si sa pun putin mai putin, pentru a
fi mai atractiv.
Sa ma adresez la bolile si necesitatile clientului. Sa ma evidentiez prin empatie,
umanitatea, sa fiu uman si sa comunic interesant.
Nu trebuie sa arat niciun gram de neincredere in ceea ce scriu clientului. Trebuie sa
iau totul in mainele mele, sunt gata, haideti sa ne sunam, sa discutam pe skype.
Sa fiu linstit, pozitiv, increzut in ceea ce fac, sa se simta asta, sa transmit asta prin
comunicarea mea.
Sa ma vand, sa ma impachetez, pretul, seviciul meu ca sa fiu convingator si sa
atrag clientul.
Sa nu scriu complicat, ci simplu, clar pentru oamenii care nu se pricep asa bine in
design. Добрый день, Светлана. Имею огромный опыт в создании сайтов.
Создам вам сайт качественно, для компютера и смартфона, сайт будет
оптимизирован (быстро открываться) и в любом браузере. Можете показать
сайты которые вам нравиться? Есть у вас техническое задание? Fără emoji!

Nu trebuie sa lucrez fara avans. Am primit avans, atunci incep sa lucrez, macar
10%.
Lucrez paralel la 3 proiecte minim. Castiga cel mai mult cel care cunoaste cel mai
mult si care poate vinde.
Nu intreb pe front-end developer, cat ar aprecia proiectul, la ce suma – ci sai spun,
sunt 2000 de ruble – faci sau nu?
Pe urma sa formez echipa cu designer, front-end, back-end si sa conduc totul.

Cand scriu raspuns la oferta, ma adresez pe nume.

Приветствую Андрей.
Очень хочется поработать с вами.
Смогу сделать максимально быстро (за 30 мин) 3 варианта логотипа и
подобрать шрифты, цвета для вашего профиля.
Подскажите ссылочку на профиль?
Буду ждать ваш ответ.
Работаю до полного подверждения.
Web design Soldatkin
 Exemple de site-uri:
1. http://demo2.drfuri.com/baroque/
2. https://anfalova.art/maks-angels-model-agency-landing-page