Proiectarea web este procesul de creare a site-urilor web. Inglobeaza mai multe aspecte diferite, inclusiv aspectul paginii web, productia de continut si designul grafic. In timp ce termenii design web si dezvoltare web sunt adesea folositi in mod interschimbabil, designul web este, din punct de vedere tehnic, un subset al categoriei mai largi de dezvoltare web.
Site-urile web sunt create folosind un limbaj de marcare numit HTML. Designerii web construiesc pagini web folosind etichete HTML care definesc continutul si metadatele fiecarei pagini. Aspectul elementelor din cadrul unei pagini web este de obicei definit folosind CSS sau foile de stil in cascada. Prin urmare, majoritatea site-urilor web includ o combinatie de HTML si CSS care defineste modul in care fiecare pagina va aparea intr-un browser.
Unii designeri web prefera sa predea paginile de cod (tastand HTML si CSS de la zero), in timp ce altii folosesc un editor „ WYSIWYG ” precum Adobe Dreamweaver. Acest tip de editor ofera o interfata vizuala pentru proiectarea machetei paginii web, iar software – ul genereaza automat codul HTML si CSS corespunzator.
Un alt mod popular de proiectare a site-urilor web este cu un sistem de gestionare a continutului precum WordPress sau Joomla. Aceste servicii ofera diferite sabloane de site- uri care pot fi utilizate ca punct de plecare pentru un nou site web. Administratorii web pot apoi sa adauge continut si sa personalizeze aspectul utilizand o interfata bazata pe web.
In timp ce HTML si CSS sunt utilizate pentru a proiecta aspectul unui site web, imaginile trebuie create separat. Prin urmare, designul grafic se poate suprapune cu designul web, deoarece designerii grafici creeaza adesea imagini pentru utilizare pe Web. Unele programe grafice precum Adobe Photoshop includ chiar si o optiune „ Salvati pentru web… ” care ofera o modalitate usoara de a exporta imagini intr-un format optimizat pentru publicarea pe web .
Tipuri de design de site-uri web
Desi s-ar putea sa intalniti articole online de la DroidWebDesign, care vorbesc despre o multime de stiluri de design de site-uri web (fixe, statice, fluide etc.), in prima lume mobila de azi, exista doar doua moduri de a proiecta corect un site web: site-uri web adaptive si responsive.
Site-uri web adaptive
Designul web adaptiv foloseste doua sau mai multe versiuni ale unui site web care sunt personalizate pentru dimensiuni de ecran diferite. Site-urile adaptive pot fi impartite in doua categorii principale, in functie de modul in care site-ul detecteaza ce „versiune” trebuie afisata.
Se adapteaza in functie de tipul dispozitivului
Cand browserul dvs. se conecteaza la un site web, cererea HTTP va include un camp numit „user-agent” care informeaza serverul despre tipul de dispozitiv care incearca sa vizualizeze pagina.
Practic, acest lucru inseamna ca site-ul stie ce versiune are de afisat (ex: desktop sau mobil). Singura problema cu aceasta abordare este ca, daca micsorati fereastra browserului pe un desktop, pagina nu se va adapta, deoarece continua sa afiseze „versiunea desktop” completa.
Adaptari bazate pe latimea browserului
In loc sa foloseasca „user-agent”, site-ul web foloseste interogari media si puncte de intrerupere pentru a comuta intre versiuni. Deci, in loc sa aveti versiuni pentru desktop, tableta si mobil, ar trebui sa aveti versiuni de 1080px, 768px si 480px. Pe langa faptul ca ofera mai multa flexibilitate la proiectare, aceasta abordare ofera un aspect mai „sensibil” la schimbarea dimensiunii browserului pe un ecran mare.
Site-uri web responsive
Site-urile responsive utilizeaza o combinatie de grile flexibile (bazate pe procente) cu puncte de intrerupere (folosind interogari media) pentru a crea un aspect personalizat la fiecare dimensiune a ecranului. Spre deosebire de site-urile adaptive care se adapteaza doar atunci cand ating un punct de intrerupere, site-urile responsive se schimba in mod constant in functie de dimensiunea ecranului.
