Crearea unui Mockup


Instrumentele minime de care aveţi nevoie pentru a realiza un site sau un mockup sunt, in esenta, urmatoarele: un editor de text, un browser si unul sau mai multe editoare grafice.
Mockup-ul resprezinta aspectul pe care il va avea siteul dupa ultima parte si anume codarea. Termenul mockup este asociat de foarte multe ori cu „template-ul” sau cum multora le place sa zica: „prototipul”. Sunt de parere, ca multi altii, ca nu se poate incepe codarea unui site atata timp cat nu se stie cum are trebuii sa arate site-ul respectiv, ce elemente vor fi puse in interiorul sau, etc.

Editorul de text
Editorul poate fi si notepad-ul din cadrul windows-ului pentru crearea fisierelor sursa. Pentru o mai buna acomodare cu acest instrument de tortura, voi prezenta cateva editoare de text in mare, nu foarte detaliat.
  1. Brackets este, din punctul meu de vedere, cel mai bun editor de text pentru realizarea fisierelor sursa. Permite instalarea diferitelor plugin-uri foarte utile. De la iconitele fisierelor pentru o recunoastere rapida pana la corectarea codului javascript. Este creat de o echipa din cadrul firmei adobe. Interfata este foarte primitoare chiar si cu incepatorii, teme diversificate, functii complexe, conectarea la adobe creative cloud, etc.
  2. Sublime este asemanator lui brackets cu deosebirea ca pentru functii mult mai complexe trebuie sa cumperi licenta chiar daca el este un program gratis. Din cautarile mele, licenta lui nu este foarte scumpa dar sunt de parere ca nu te ajuta cu nimic cand exista alte programe mult mai bune si in plus sunt gratis.
  3. Notepad++ este un editor destul de capabil, multi il folosesc deoarece recunoaste o gama mare de fisiere. De la fisiere html la fisiere in limbaje de programare precum: java, php, C, perl, python, pascal, etc. Ceea ce mi-a placut la acest editor este faptul ca nu conteaza fisierul pe care vrei sa il faca, va recunoaste sintaxa limbajului si v-a inchide parantezele si alte lucrui care din diverse mofive: graba, neatentie, etc. se pot pierde.
Multi vor spune sa folositi programul dreamviewer de la adobe dar, eu nu vi-l recomand deoarece este un program in care daca se trage un element se genereaza automat codul sau si astfel, cunostintele nu se pot fixa prin scrierea manuala a codului. Un exemplu fiabil il reprezinta un interviu pe parte de web designer. Daca raspundeti la intrebarea: „Ce editor folosesti” cu „Folosesc Dreamviewer” , angajatorul v-a avea o retinere deoarece nu stie sigur cat de bine stiti codurile. Alta sta treaba cand spuneti ca, scrieti manual codurile si verificati sintaxa in acelasi timp.

Editoare grafice
Editorul grafic este esential atat in web design si web development din punctul meu de vedere dar, ii gasesc o intrebuintare mult mai buna pentru web design. De la imagini de funal la bannere, afise, logouri, etc.
Cele mai populare si complexe programe de editare grafica sunt: adobe photoshop, adobe illustrator, corel draw, corel paintshop. Eu recomant a se utiliza programele de la adobe deoare permita foarte usor interschimbabilitatea fisierelor, de la illustrator la photoshop si invers.

Browser
Despre browser, toti stim cate ceva dar eu va recomand ca atunci cand lucrati la site-uri si template-uri sa utilizati si instrumentele de dezvoltator pentru a gasi mai repede informatii de care aveti nevoie si a le modifica.

Concluzie:
Sunt de parere ca, web design-ul este mai diversificat si nu apare o rutina asa de vizibila. Nu trebuie sa faci doar site-uri web pe parte de aspect si codare. Poti face si diverse elemente de grafica precum: carti de vizita, afise, brosuri, pancarde, reziste si cataloage. Aceste intra in categoria print design dar le poate face oricine stie sa foloseasca programele de editare grafica de la adobe. Programul de realizare al revistelor, cataloagelor si brosurilor se numeste adobe InDesign si, la fel ca illustrator si photoshop, permite adaugarea de fisiere .ps si .ai.

Comentarii