Anatomia unui site web

Multi oameni isi imagineaza cu greu un website ca fiind mai mult decat un sac de continut. Acest fapt face ca explicarea combinatiei de limbaje si a felului in care totul functioneaza sa fie o sarcina dificila. Deoarece ceea ce cuprinde un website poate avea legatura cu fiziologia corpului uman, aceasta comparatie poate ajuta clientii si incepatorii deopotriva sa inteleaga natura complexa a crearii si componentelor unui site.

ADN de designer: Scheme si DTD

adn_webdesign

Oamenii au caracteristici stabilite pentru felul in care arata. Aceste cuburi de construit viata ne sunt transmise pe cale genetica, si atunci cand sunt aranjate corect, ne dau aspectul nostru unic. Acest proces de evolutie are nevoie de milioane de ani pentru a se adapta la schimbarile de mediu si cu siguranta joaca un anumit rol in limitarea atat a aspectului nostru structural, cat si al celui vizual.

Cat despre Web, regulatorii de cod “genetic” sunt numiti de obicei Scheme (probabil stiti de aceste mecanisme din DTD). Desigur, desi procesul de creare a unei scheme nu dureaza milioane de ani, dureaza un anumit timp ca noile limbaje sa apara si sa fie adoptate pe scara larga, de unde apar cuburile de construire a website-ului. Asadar, siteurile pot arata diferit, dar putem fi siguri ca utilizeaza numai una din familiile de limbaje structurale care definesc multe din caracteristicile lor, si ceea ce obti va avea elemente comune cu multe alte milioane de site-uri.

Bonus: Simpla includere a unui DTD in documentul tau poate stabili standarde pentru cod si poate evita neclaritatile pe care elementele intamplatoare le pot aduce in. De aceea, avand acest ADN, care descrie limbajul folosit, poate fi benefic in mostenirea standardelor Web.

Structura scheletului: Mark-up structural

shelet_webdesign

Structura corpului uman este alcatuita din oase care definesc forma de baza – acelasi lucru este valabil si pentru documentele web, in sensul ca acestea sunt formate din diferite elemente interconectate, care alcatuiesc coloana vertebrala a site-ului web. Majoritatea documentelor unui site web sunt formate din limbaje care descriu structura scheletului documentului, cum ar fi HTML si PHP. Fara aceste limbaje esentiale, site-ul nu ar putea sa-si mentina forma de prezentare.

Desi fiecare os din corpul uman serveste unui anumit scop, grupuri intregi de oase pot servi unei singure actiuni, cum ar fi coastele (fiecare protejeaza plamanii) sau oasele degetelor de la mana care ajuta la apucarea obiectelor. Deoarece aceste scopuri repetate exista in corpul unui site, pot fi distinse prin atasarea de conventii cum ar fi microformatele, care dau caracteristici semantice si valoari suplimentare, dincolo de ceea ce ar oferi un element “generic” sau reutilizat, actionand ca un punct de recunoastere.

Bonus: Microformatele sunt elemente descriptive (de obicei valori de clasa sau ID) care dau structurii unele valori semantice recognoscibile – acest lucru seamana cu recunosterea fiecarui os de deget dupa aspect si caracteristici unice. Este vorba de etichetarea anatomiei pentru referinta.

Muschii mecanici: Partitura clientului

muschi web design

Capacitatea de a te misca iti permite sa interactionezi cu oamenii pe care ii intalnesti. Fara muschi, nu putem sa transformam gandurile in reactii. Deoarece oamenii asteapta un anumit tip de implicare pe site, daca nu exista destula interactivitate site-ul poate parea lipsit de emotii. Muschii lucreaza bine intre piele si oase, pentru a permite ambelor sa joace un rol in interactiune. Acelasi lucru este valabil si pentru un site web, unde comportamentul identifica stilul si structura acestora ca “flexibil” doar cand este necesara interactiunea.

Partitura clientului este componenta musculara a unui site web. Limbajele cum ar fi JavaScript permit interactiunea cand vizitatorii dau click, misca mouse-ul, apasa o tasta sau fac orice alt gest observabil. Acest mecanism de raspuns functioneaza la fel ca si corpul, prin aceea ca reactioneaza pe baza mediului inconjurator. Pe scurt, “muschii” actioneaza ca o modalitate de interactiune si fac schimbari observabile in structura (se ridica in loc sa se aseze) sau aspect (zambeste in loc sa se incrunte).

Bonus: La fel cum oamenii au multiple metode de contributie (cum ar fi mecanismele senzoriale ca simtul tactil, gustul, vederea, mirosul si auzul), JavaScript si alte limbaje de partituri pentru clienti pot interactiona si reactiona pe baza propriilor metode de contributie cum ar fi atingerea, vorbirea, actiunile automate si miscarea.

Reactiile nervilor: Browserul Web

nervi web design

Cu partitura inclusa in site vine si nevoia de a trimite si primi informatii care actioneaza asupra interactiunii ce apare in design. Intr-un website mecanismul de comunicare al acestor semnale apartine agentului utilizator sau serverului care manevreaza cererile si reflecta acele cereri pentru a actiona intr-un mecanism care este vizibil la utilizator. Pe scurt: browserul dicteaza actiunea.

In corpul uman, aceste cereri sunt trimise ca semnale electrice, care trec prin diferite organe si transmit executarea actiunii determinate de receptor, cum ar fi senzatia de durere. Pe un website, desi nu exista durere (decat atunci cand un utilizator intalneste un element de interfata inutilizabil cum ar fi o forma web deficitara) codul trage semnale catre browser cand se face examinarea si atrage reactii de structura, stil sau comportament.

Bonus: Motorul de redare al unui browser face totul de la afisarea corecta a “corpului” (siteului) si pana la reactia de interactiune.

Inima: Continut si comunitate

heart web design
Inima unui site web este continutul. In cazul inimii umane, o sursa constanta de oxigen trebuie sa fie pompata in corp catre organele vitale – altfel apar daune pe termen lung. Acelasi lucru este valabil si pentru site-ul web, cand apare o lipsa de continut de calitate updatat regulat, acesta va deveni ineficient in gasirea de vizitatori si va suferi de foame (deoarece este abandonat), dand astfel o lovitura fatala corpului sau.


Cu cat adaugi mai multe pagini, cu atat mai puternica va deveni structura, atat cea interna cat si cea externa a site-ului web. In consecinta, va deveni mai rezistenta la bolile care apar. Dovada este site-ul W3Schools care desi depasit ca design si functionalitati este vizitat permanent. Balanta in obtinerea de vizitatori (sange) in corpul site-ului va depinde de cata adancime si energie se pune in continutul website-ului.

Bonus: In vreme ce prea putini vizitatori pot lasa inima fara oxigen, prea multi vizitatori pot avea acelasi efect. La fel ca atunci cand inima lucreaza prea mult, un varf brusc de trafic poate face ca serverul unde este localizat siteul sa cada sub presiune, ca un atac de cord!

Vasele de sange: Arhitectura informatiei

sistem sanguin

Abilitatea de a aduce oamenii in locurile unde au nevoie sa ajunga (sa alimenteze popularitatea si arhitectura site-ului) este unul dintre elementele cheie in construirea unui website. Calea pe care o ia site-ul pentru a interconecta toate elementele corpului care il alcatuiesc este denumita de obicei arhitectura informatiei.

Aceasta – in termeni simpli – este modul in care noi organizam, structuram si legam paginile unui website si felul in care fiecare pagina este structurata. Aceasta metoda bine organizata de interconectare a nevoilor diferitelor componente ale unui website poate fi usor recunoscuta in corpul uman ca si vase de sange. Asa cum am descris mai sus, daca vizitatorii sunt sangele datator de viata al unui website, vasele de sange ar fi modul in care legam paginile, capacitatea de gasire a informatiei si modul in care fisierele se conecteaza pentru a se hrani unul pe celalalt. Asa cum sangele curge prin corp, oamenii ar trebui sa treaca prin pagini si sectiuni – adica cu usurinta.

Bonus: Utilitatea si accesibilitatea isi au locul lor in aceasta analiza. Cand apar linkuri moarte sau navigare slaba, daunele cauzate pot duce la hemoragia de vizitatori pe masura ce acestia parasesc site-ul.

Piele sexy: Estetica design-ului web

sking web deisgn

Ce face ca oamenii sa arate umani? In parte sunt trasaturile cum ar fi ochii, nasul si gura, dar pielea lor si aspectul joaca un rol important. Fie ca suntem inalti sau scunzi, fie grasi sau slabi, pielea stabileste forma, fiind elastica si flexibila in felul in care acopera toate structurile corpului. Pentru ca vrei ca pielea site-ului sa arate frumos, deoarece design-ul este la fel de relevant ca frumusetea umana, ai grija ca nimic sa nu “atarne”, sa arate urat sau nelalocul lui!

In termeni de design, limbajul primar care se ocupa de stilul unui website este CSS-ul. Acesta se ataseaza la structura de baza si formeaza straturi de elemente si stil, care dau aspectul fizic si vizibil dorit. Daca vrei ca pielea site-ului sa fie verde neon sau roz tipator, desi nu recomand, este absolut posibil! La fel ca si pielea oamenilor, la site look-ul este pur si simplu un strat exterior care lucreaza cu elementele din interior dar are propria metoda unica de influentare a modului in care influenteaza vizitatorul.

Bonus: Spre deosebire de oameni, un design de website poate sa isi modifice propriul aspect fizic in mod dinamic.Tehnicile includ utilizarea comportamentului cum ar fi JavaScript sau PHP, pentru a modifica stilul la cerere. Acesta da site-urilor o calitate de cameleon, deoarece se pot adapta la conditii si fundal.

Detinatorul de creier: Partitura serverului si DBMS

anatomie web design

Materia din cap care iti permite sa gandesti, sa iti amintesti, sa te comporti in functie de situatie si imprejurari este cel mai apropiat lucru de un computer. Creierul permite luarea deciziilor – cea mai buna metoda de a raspunde la situatii complexe. Cum se aplica acest lucru la un site web ?

Sunt trei elemente care trebuie luate in considerare si care se aplica direct la anatomia oamenilor si website-urilor. Acestea sunt denumite ca acte de comportament, memorare si identificare. Cand vorbim de comportamentul unui creier, ne referim la lucrurile pe care ne gandim sa le facem si pentru care ulterior blocam comenzile corpului, cum ar fi situatia in care dai comanda corpului tau sa loveasca pe cineva (dupa care se duce la indeplinire actiunea de a lovi). Am mentionat deja comportamentul referitor la muschi, dar trebuie sa retineti ca nu ne gandim (activ) la actiunea de a respira sau a merge – noi parcurgem o metodologie de stimuli si raspunsuri (iar creierul controleaza reactiile care apar).

Partitura serverului pentru website-urile dinamice prezinta creierul unui site in actiune, aceea de a permite site-ului sa ia decizii pe baza unei situatii sau a cunostintelor anterioare stocate si apoi sa actioneze in consecinta, si nu sa faca o actiune in mod automat, asa cum fac muschii.

Creierul are abilitatea de a-si aminti multe mii de lucruri, iar computerele la fel. Cand stochezi informatii intr-o baza de date, aceasta retine informatiile pana cand sunt cerute, sterse sau distruse, functioneaza la fel ca memoria pe termen lung a oamenilor. Informatiile sunt de obicei organizate in functie de tipul lor, si trebuie sa fie usor gasite sau accesate fara a se manifesta amnezie digitala. Desigur cu totii avem si memorie pe termen scurt: Atat cookies – care retin date cu stimul specific cum ar fi numele utilizatorului si parolele cat si cachingul de browser – care contine stimuli mai generici si reutilizabili – cum ar fi imaginile si partiturile clientilor au scopul de a stoca mici informatii pentru o perioada limitata de timp.

Cu memorie de lunga si de scurta durata, care poate fi extrasa si utilizata pana cand este stearsa sau inclusa intr-o forma de memorie permanenta si sigura, este usor sa vedem asemanarea cu sistemul uman. Desigur, creierul uman este mult mai puternic decat sistemele actuale de computere, dar diversitatea de management al informatiei, memorare si organizare da computerelor un avantaj.

Ultima este actiunea de identificare: sa fii in stare sa stii cine, ce si de ce esti.

personalitate

Cu totii avem personalitati diferite si de obicei le luam ca atare, dar site-urile pot avea propriul simt al identitatii sub forma de metadate. Acestea sunt retinute in capul (sau cum i se mai spune in codul “ganditor”) al fiecarei pagini, care nu sunt vizibile utilizatorilor dar care explica motoarelor de cautare, browserelor sau aplicatiilor care vor sa dea continuturilor valoare contextuala sau semantica, la fel ca la cataloagele din biblioteci.

Bonus: Daca identitatea unui site poate fi produsa de titlu sau metainformatie, informatia reala si abilitatile pe care le contine un website sunt cele care determina adevarata natura a acelui website, cam la fel cum oamenii au personalitati care se reflecta in felul cum arata.

Natura versus Hrana

website dezvoltare

Ca si oamenii, un site web poate avea imperfectiuni. Unele pot fi depasite, unele nu (fara o refacere totala a design-ului), de aceea trebuie acordata grija si atentie la depasirea problemelor importante. Evolutia unui website poate in aceeasi masura sa fie redusa la o combinatie de natura si hrana, ambele fiind importante si nu trebuie ignorate.

Supravietuirea unui website depinde de multe lucruri care sa fie perfect sincronizate. Cred ca multi dintre noi subestimam complexitatea alcatuirii unui website. Testari frecvente pot depista probleme chiar de la inceput. Dar cel mai important lucru de luat in considerare este acela ca website-urile (ca si oamenii) sunt formate din mai multe straturi, toate interactionand impreuna, la care trebuie sa aplici dupa nevoie (fara sa faci site-ul obez). Gandeste-te la site web ca la un copil, nu il hranesti o singura data si apoi il abandonezi. Copilul cere timp, bani, effort, grija si atentie pentru a fi sanatos si a deveni adult.


Articol scris de Simona Gabriela Buzatu – Strategist de brand – fondatorul Artvisiona – studio de branding de la A-Z.

Intra in conversatie ! Poti participa activ la temele dezbatute pe blog. Lasa un comentariu la acest articol sau propune o tema despre care ti-ar placea sa citesti. Cele mai interesante vor fi dezvoltate in cadrul unui clip video.

Nu mai este suficient sa fii bun, trebuie sa fii unic !

Aici este locul unde gasesti totul despre branding, strategie, psihologie si ponturi care-ti lumineaza drumul catre succes.

Te mai asteptam !




Comentariul tau

Your email address will not be published. Required fields are marked *