Proiectarea grafică a site-ului web? La sigur cunoști multe programe pentru grafică și proiectare. Mulți designe-ri UX folosesc aceste programe – atât acele care funcționează online cât și cele instalate pe calculator.
Programele pentru proiectarea designului, permit la fel să creezi site-uri web – fără ca să fie necesară scrierea codurilor HTML, CSS, JS … În acest mod macheta ordonează conținutul pe site și aspectul grafic general.
Un proiect al site-ului de acest gen este doar începutul creării site-ului web propriu. La fel proiectanții colaborează foarte mult cu programatorii. În final cineva trebuie se ocupe de transferarea machetei online.
Proiectanții de site-uri răspund de machetă, iar programatorii de transferul site-ului online (nu trebuie să-i numești informaticieni, pentru că se supără).
Dar mai există și o altă modalitate. Și anume modalitatea de a proiecta grafică a site-ului, care este mult mai simplă. Ținând cont de noile cerințe Google referitoare la comportamentul utilizatorilor pe site și influența acestora asupra poziției site-ului în rezultatele căutărilor Google, ajungem la concluzia că crearea unui site bun devine din ce în ce mai important.
Deci, ajungem la întrebarea dacă un specialist în grafică poate crea un site eficient și perfect funcțional?
Proiectarea grafică a site-ului sau specialistul UX se apucă de treabă
Specialiștii UX – specialiștii pentru crearea interfeței și a site-urilor optimizate pentru utilizatori de obicei, cunosc bine procesul de creare a site-ului – cel puțin proiectarea acestora.
Începând de la schița site-ului și structura acesteia pe foaie, prin crearea unei interfețe și a navigări ușor de folosit, până la ordonarea conținutului și prezentarea atractivă a acestora.
Designerii UX lucrează de cele mai multe ori cu programe pentru crearea schițelor, machetelor. Aici apar primele forme și scheme ale viitoarelor pagini web, care apoi sunt dezvoltate până la versiunea finală.
Majoritatea proiectelor bune ale site-urilor au început de la o foaie de hârtie. Din această cauză majoritatea proiectanților încep munca de la o foaie și un creion. Această abordare s-a adeverit a fi una din cele mai eficiente, pentru că permite modificarea și prezentarea simplă a proiectului, iar ulterior discutarea acestuia.
Multe agenții de marketing sau de promovare lucrează în acest mod. Mai întâi creează o schiță a structurii conținutului. Iar apoi se apucă de aranjarea elementelor pe site – în continuare pe foaie.
Doar atunci când proiectul este bine discutat, și finisat are loc proiectarea acestuia în cadrul unui program grafic. Datorită acestuia, site-ul arată ca un site, chiar și în prima versiune a proiectului grafic
Care sunt cele mai bune platforme pentru creare site? Vezi rankingul nostru!
Unde sunt create machetele și schițele site-urilor web.
Instrumente pentru crearea schițelor și a machetelor sunt destule.
Acum câțiva ani, cel mai popular program era Photoshop, pentru că permitea crearea ușoară a proiectului site-ului – transferul acestuia de pe hârtie pe ecranul calculatorului.
Cea mai mare problemă a acestui program este faptul că funcționează în baza proiectării de tip rast și nu a celei vectoriale (pixeli în loc de curbe).
Aceasta înseamnă că elementele machetei pot și mărite până la un anumite nivel, pentru că au o rezoluție prestabilită. La depășirea acestei rezoluții elementele grafice nu mai sunt clare.
Aceasta este o problemă majoră atunci când proiectul nostru include multe obiecte și mai puține poze.
Aceasta este motivul pentru care specialiștii UX folosesc așa de mult programele grafice unde este folosit principiul vectorial pentru proiectarea elementelor. Programe de genu Sketch (doar pentru Maca), Adobe XD sau programul open source Pencil Project.
Este foarte important că am ajuns la aceste programe vectoriale, care ne permite să lansăm site-urile online. Vom reveni la acest capitol mai târziu.
De ce merită să te apuci de proiectarea site-urilor cu ajutorul programelor de creare a machetelor (în baza metodei vectoriale)
Crearea site-urilor bazate pe elemente vectoriale este importantă din cauza următoarelor trei motive:
- Elementele grafice vectoriale (care sunt create cu ajutorul formatului .svg) necesită puțin spațiu de stocare.
- Sunt perfecte pentru crearea unor site-uri responsive
- Pot fi mărite la infinite, fără a pierde din calitate.
Aceste trei motive determină alegerea utilizării obiectelor vectoriale pentru proiectarea site-urilor, în special atunci când partea grafică a acestuia este ”încărcată”.
Proiectele create cu ajutorul programelor grafice pot fi exportate ca fișiere de tip rast sau vector. Schimbarea fișierelor care conțin curbe în fișiere care conțin pixeli nu are nici o logică, în special în situația când formatul .svg nu reprezintă nimic exotic. (Deși WordPress-ul în continuare nu oferă suport pentru acest gen fișiere. Este nevoie să instalăm un plugin special, care la rândul său trebuie să fie atent selectat pentru a avea mai puține probleme de compatibilitate și erori software)
Browserele nu manifestă nici o dificultate în afișarea obiectelor vectoriale pe site-uri, deci … de ce să nu le folosim pe site-rile noastre? În special în cazul obiectelor sau ornamentelor, acest format se comportă perfect.
Un alt avantaj al programelor pentru proiectarea machetelor este faptul că permite ordonarea ușoară a proiectului site-ului. Aceasta este un avantaj major în special atunci când aspectul grafic al site-ului este important.
Transferul proiectului grafic al site-ului în rețea (cum transform macheta într-un site adevărat)
Duetul proiectant (specialist UX) – programator au fost descris mai sus. Cunosc personal multe team-uri de acest gen (din două sau mai multe persoane). Proiectantul cunoaște exact care sunt posibilitățile unui program concret în care lucrează programatorul. Programatorul nu este surprins de proiecte desfășurate și dificile (sau imposibile) de implementat.
Acest gen de simbioză funcționează cel mai bine
Însă mulți graficieni funcționează singuri. Uneori lucrează cu programe deja bine cunoscute, de exemplu WordPress și Elementor sau un alt plugin drag-and-drop pentru WordPress.
Aceste soluții lasă de dorit, în special atunci când apare necesitatea unei optimizări ulterioare a site-ului. Interfața, la fel este … nu prea. Dintr-o parte, poți lucra în blocuri, adăuga elemente și așa mai departe, dar în continuare ai de a face cu WordPress care este un program … cu propriile limitări. Și mai trebuie să ții cont de posibilitatea de a ”prăbușire” la conexiunile plugin-CMS-sitemaker. Aceste conexiuni generează probleme greu de identificat – deci este bine să fim atenți la ele.
Am scris deja despre programe perfecte pentru graficieni. Însă trebuie să mai descriem anumite aspect
Care sunt cele mai bune platforme pentru creare site? Vezi rankingul nostru!
Proiectarea grafică a site-ului, sau cum putem transfera proiectul unui site în rețea, (chiar și fără scrierea codurilor sau administrarea serverelor FTP).
Dacă lucrezi în unul din programele de creare a machetelor și dorești să transferi online acest proiect exact așa cum a fost proiectat, vei înțelege că ai nevoie să accepți anumite compromisuri.
Este vorba de compromisuri cantitative (nu totul vei putea transfera online) și calitative (nu totul va arăta / va funcționa așa cum ai proiectat) și de timp.
Desigur, ideal ar fi ca proiectul să poată fi transferat prin magie online, exact așa cum este proiectat.
Adevărul este că așa ceva nu este imposibil.
Pentru ca să poți realiza întregul proces, de la proiectarea site-ului până la lansarea site-ului, trebuie să atragi atenție la câteva aspecte ale programelor pentru creare site-uri. Mai exact, trebuie să știi dacă aceste programe permit
- Lucrul cu elementele grafice vectoriale și amplasarea lor pe site, în special cu ajutorul formatului .svg
- Lucrul cu straturile (lucrând cu straturile permite crearea mult mai simplă a site-urilor și mutarea elementelor în cadrul acestuia)
- Simplifică optimizarea site-ului
Adevărul este însă că posibilitățile programelor site-maker enumerate mai sus nu sunt fără cusur.
Multe programe site-maker permit folosirea fișierelor vectoriale, însă lucrul cu straturile este mult mai rar întâlnită. Situația devine mai veselă atunci când ajungem la lucrările ulterioare cu site-ul. Deseori site-urile proiectate grafic sunt forate greu de optimizat și accelerat.
Alte surprize sunt legate de creșterea prețurilor, sau de necesitatea de a actualiza permanent programul (ca în cazul programelor site-maker care funcționează pe platforma WordPress). WebWave permite lucrul cu straturile și obiectele vectoriale – este într-adevăr un avantaj major. Wix și Webnode permit doar utilizarea formatului .svg
Trage cu ochiul desigur la ranking-ul nostru celor mai bune programe pentru creare site-uri.