Care este legatura dintre web design si SEO?

De cele mai multe ori, incepatorii nu fac legatura intre partea de web design a site-ului
si partea de optimizare pentru motoarele de cautare, iar aceasta este o greseala
fundamentala care duce la un site de PROASTA CALITATE.
Trebuie spus de la inceput ca motoarele de cautare (din care ne intereseaza Google,
pentru ca acesta este motorul de cautare folosit de 85% dintre romani), pozitioneaza mai bine
siturile care pot fi accesate la fel de usor de pe orice tip de computer, orice fel de conexiune la
Internet, orice sistem de operare, adica site-urile CAT MAI APROPIATE DE HTML.
Deci, este bine ca situl sa fie in format HTML, si nu Flash.

A doua problema: vizitatorii si motoarele de cautare apreciaza site-urile care se incarca

foarte repede. Si aici sunt cazuri cand web designul trebuie sa se raporteze de la inceput la
regulile SEO. Adica, imaginile grafice nu vor fi foarte multe, si de o inalta rezolutie.
Pentru a verifica viteza de incarcare a oricarui site, putem accesa:www.verificare.seosite.ro/
Dati click la “web site speed test”, tastati url-ul site-ului si aflati viteza de incarcare a site-ului:
Load Time.

Prima intrebare la care trebuie sa raspundem cand incepem proiectarea de web design
este: ce promovam prin site. Poate fi un produs, un serviciu, un brand. Sa presupunem ca
dorim sa promovam produse cosmetice, ale unei firme nou aparuta pe piata romaneasca.

A doua intrebare: cui promovam, adica stabilirea pietei tinte.

Atentie: promovarea unui produs pe piata romaneasca nu prea respecta regulile aplicabile in
Occident. Vrem sau nu, suntem o tara in care scandalurile sunt mai mediatizate decat aparitia
unei carti bune, unde un spectacol al unui manelist cunoscut face mai multa valva decat un
concert al unui cunoscut vilonist.
Cum stabilim corect care este piatra tinta:
Se face in functie de mai multe carateristici.
Economic – adica puterea de cumparare a utilizatorilor site-ului. Vom vinde produse
persoanelor cu venituri sub medii, venituri medii sau venituri mari? Avand in vedere ca cei cu
venituri mari cumpara produse de firma, iar produsele firmei noastre sunt necunoscute,
rezulta ca ne vom adresa primelor 2 categorii. Din cele doua, baza o va reprezenta segmentul
cu venituri medii.
Al doilea aspect este aspectul pregatirii profesionale. Sunt trei segmente: persoane cu studii
minime, studii medii sau superioare. Ne vom adresa in cazul nostru tuturor celor 3 categorii,
insa prponderent persoanelor cu studii medii.
Al treilea aspect este varsta. Ne vom adresa persoanelor cu varste cuprinse intre 16 si 45 de
ani.
Ultimul aspect este sexul: in cazul nostru, vor cumpara atat femei, cat si barbati, cei din urma
pentru uz personal sau pentru cadouri, surprize facute sexului feminin.

In acest caz, vom alege 24 de persoane din cercul nostru de cunoscuti sau al prietenilor
nostri:
 12 persoane de sex feminin
 12 persoane de sex masculin
 24 de persoane cu venituri mici si medii, din care 18 persoane cu venituri medii si 6
persoane cu venit minim
 24 de persoane cu varste cuprinse intre 16 si 45 de ani, astfel: 12 persoane cu varste
cuprinse intre 25 si 35 de anu, 6 persoane cu varste cuprinse intre 16 si 25 ani, 6
persoane cu varste cuprinse intre 35 si 45 de ani.
La ce ne foloseste aceasta esantionare?
Intocmim un chestionar, cu intrebari simple si care admit raspunsuri de genul DA/NU.
Se vor nota raspunsurile pe o scara de la 1 la 10:
1. Este acest produs util pentru dvs?
2. Este ieftin in raport cu alte produse?
3. Este cunoscut pentru dvs?
4. Este usor de procurat?
Pe baza raspunsurilor primite, se va intocmi un clasament: daca produsul este ieftin pentru
utilizator, atunci in textul paginii se va insista pe acest lucru, daca utilizatorul nu
constientizeaza utilitatea lui, se va insista pe avantajele pe care le aduce folosirea lui, etc.

Care este concurenta noastra?

 Dupa o cautare pe Google, se stabilesc care vor fi competitorii nostri. Se noteaza din
siturile lor: lista de cuvinte cheie folosite, lista frazelor, se analizeaza frecventa cuvintelor
cheie.
Se poate folosi instrumentul de analiza de mai sus:
Dupa ce am “creionat” profilul utilizatorului, sa gasim culorile cele mai potrivite.
Din studiile efectuate la nivel mondial rezulta urmatoarele asocieri:

- rosu – pasionat , irascibil

- galben – posesiv, nesigur
- albastru – calm, perfectionist
- verde – prietenos, autoritar
- alb – inocent, simplu
- negru – sobru, serios
- violet – fantezist, fanatic
- portocaliu – sexualitate , caldura
- roz – tinerete , bucuria de a trai

In cazul grupului nostru tinta, vom alege culoare predominanta in background, roz/portocaliu,
impreuna cu tente de rosu/violet.

Alegem codul culorilor:

AntiqueWhite #FAEBD7

Aqua #00FFFF

Aquamarine #7FFFD4

Azure #F0FFFF

Beige #F5F5DC

Bisque #FFE4C4

Black #000000
BlanchedAlmond #FFEBCD

Blue #0000FF

BlueViolet #8A2BE2

Brown #A52A2A

BurlyWood #DEB887

CadetBlue #5F9EA0

Chartreuse #7FFF00

Chocolate #D2691E

Coral #FF7F50

CornflowerBlue #6495ED

Cornsilk #FFF8DC

Crimson #DC143C

Cyan #00FFFF

DarkBlue #00008B

DarkCyan #008B8B

DarkGoldenRod #B8860B

DarkGray #A9A9A9
 DarkGreen #006400

DarkKhaki #BDB76B

DarkMagenta #8B008B

DarkOliveGreen #556B2F

Darkorange #FF8C00

DarkOrchid #9932CC

DarkRed #8B0000

DarkSalmon #E9967A

DarkSeaGreen #8FBC8F

DarkSlateBlue #483D8B

DarkSlateGray #2F4F4F

DarkTurquoise #00CED1

DarkViolet #9400D3

DeepPink #FF1493

DeepSkyBlue #00BFFF

DimGray #696969

DodgerBlue #1E90FF
 Feldspar #D19275

FireBrick #B22222

FloralWhite #FFFAF0

ForestGreen #228B22

Fuchsia #FF00FF

Gainsboro #DCDCDC

GhostWhite #F8F8FF

Gold #FFD700

GoldenRod #DAA520

Gray #808080

Green #008000

GreenYellow #ADFF2F

HoneyDew #F0FFF0

HotPink #FF69B4

IndianRed #CD5C5C

Indigo #4B0082

Ivory #FFFFF0
 Khaki #F0E68C

Lavender #E6E6FA

LavenderBlush #FFF0F5

LawnGreen #7CFC00

LemonChiffon #FFFACD

LightBlue #ADD8E6

LightCoral #F08080

LightCyan #E0FFFF

LightGoldenRodYellow #FAFAD2

LightGrey #D3D3D3

LightGreen #90EE90

LightPink #FFB6C1

LightSalmon #FFA07A

LightSeaGreen #20B2AA

LightSkyBlue #87CEFA

LightSlateBlue #8470FF

LightSlateGray #778899
 LightSteelBlue #B0C4DE

LightYellow #FFFFE0

Lime #00FF00

LimeGreen #32CD32

Linen #FAF0E6

Magenta #FF00FF

Maroon #800000

MediumAquaMarine #66CDAA

MediumBlue #0000CD

MediumOrchid #BA55D3

MediumPurple #9370D8

MediumSeaGreen #3CB371

MediumSlateBlue #7B68EE

MediumSpringGreen #00FA9A

MediumTurquoise #48D1CC

MediumVioletRed #C71585

MidnightBlue #191970
 MintCream #F5FFFA

MistyRose #FFE4E1

Moccasin #FFE4B5

NavajoWhite #FFDEAD

Navy #000080

OldLace #FDF5E6

Olive #808000

OliveDrab #6B8E23

Orange #FFA500

OrangeRed #FF4500

Orchid #DA70D6

PaleGoldenRod #EEE8AA

PaleGreen #98FB98

PaleTurquoise #AFEEEE

PaleVioletRed #D87093

PapayaWhip #FFEFD5

PeachPuff #FFDAB9
 Peru #CD853F

Pink #FFC0CB

Plum #DDA0DD

PowderBlue #B0E0E6

Purple #800080

Red #FF0000

RosyBrown #BC8F8F

RoyalBlue #4169E1

SaddleBrown #8B4513

Salmon #FA8072

SandyBrown #F4A460

SeaGreen #2E8B57

SeaShell #FFF5EE

Sienna #A0522D

Silver #C0C0C0

SkyBlue #87CEEB

SlateBlue #6A5ACD
 SlateGray #708090

Snow #FFFAFA

SpringGreen #00FF7F

SteelBlue #4682B4

Tan #D2B48C

Teal #008080

Thistle #D8BFD8

Tomato #FF6347

Turquoise #40E0D0

Violet #EE82EE

VioletRed #D02090

Wheat #F5DEB3

White #FFFFFF

WhiteSmoke #F5F5F5

Yellow #FFFF00

YellowGreen #9ACD32

Dupa ce am ales codul culorilor care vor domina backgroundul, alegem contrastul , care este
foarte important intr-o pagina web.

Contrastul intr-o pagina web.

Din tabelul de mai jos, vom alege culorile cele mai potrivite pentru text.

Background
Ros Portocali Galbe Verd Albastr Negr
Violet Alb Gri
u u n e u u
Rosu Slab Bun Slab Slab Slab Bun Bun Slab
Portocali Sla
Slab Slab Slab Slab Slab Bun Slab
u b
Sla
Galben Bun Bun Slab Bun Slab Bun Bun
b

Prim Sla
Verde Slab Slab Slab Bun Slab Bun Bun
plan b
Albastru Slab Slab Bun Bun Slab Slab Bun Slab
Violet Slab Slab Bun Slab Slab Bun Bun Slab
Negru Slab Bun Bun Bun Slab Bun Bun Slab
Alb Bun Bun Slab Slab Bun Bun Bun Bun
Gri Slab Slab Bun Bun Slab Slab Slab Bun

Rezulta in cazul nostru ca cea mai buna culoare pentru text este culoarea alba.

Urmatoarea etapa este “sexualitatea” sitului, unde prin sexualitate nu se intelege in nici un
caz prezenta elementelor grafice erotice sau pornografice.. Ne place sau nu, sexualitatea ne
guverneaza psihicul. Despre acest subiect, s-au scrise mii de pagini si exista mii de studii.
Prin sexualitate noi vom intelege si linii, forme, culori cu tenta sexuala, pe care le vom
introduce pe site sub forma unor imagini ce “ating” subconstientul, asa numitele imagini
subliminale (despre crearea lor si exemple, in cursul 4).

Urmatoarea etapa: ce vocabular folosim? Avand in vedere piata noastra tinta, vom folosi un
limbaj de o complexitate medie, bazata pe fraze comune cu cei ce folosesc un vocabular
comun.

Urmatoarea etapa este modul de transmitere a mesajului: direct (produsul nostru este cel mai
ieftin- mai ieftin nu se poate!), semidirect (studiile de piata arata ca obtineti avantaje daca
folositi produsul nostru) si non direct (acestea sunt produsele noastre), Alegerea se va face in
functie de piata tinta si de rezultatele chestionarului. In cazul nostru am ales modul direct de
transmitere a mesajului.

Alegerea elementului “title”

Cum trebuie sa arate un element “title” corespunzator:
 trebuie sa contina primele doua cuvinte cheie
  trebuie sa faca referire la primele 5 cuvinte din site

Optimizarea imaginilor
Am vazut multe imagini postate chiar pe situri profesionale, dar neoptimizate atat din punct de
vedere al rezolutiei si al redimensionarii corecte, cat si tag-ului HTML folosit pentru
includerea imaginilor in pagina.
Un program free care are optiunile de mai sus, este RIOT (Radical Image Optimization Tool).
Nu este singurul free, dar este singurul care are optiunea “SaveForWeb”.

Adaugarea uni meta-tag corect

Se poate face din aceeasi resursa expusa inainte.
In continuare, derulam mai jos si facem setarile pentru limba si celelalte elemente: