Grafički i programski alati u web dizajnu

Grafički i programski alati u web dizajnu

Kolegij: Web dizajnStudent: Mihael MiklošićNositelj kolegija: doc.dr.sc. Mario TomišaVoditelj vježbi: mag.ing. Marko Čačić

Koprivnica, Listopad 2013.

Medijsko SveučilišteOdjel Medijski dizajn

Seminarski rad

Sadržaj

1.2.2.1.3.3.1.3.2.3.3.3.4.3.5.3.6.4.4.1.4.2.4.3.5.6.

1

UvodWeb dizajn kao disciplinaKratka povijest web dizajnaGrafički alati u web dizajnuPiksel i vektorska grafikaKorištenje piksel i vektorske grafike na webuAdobe PhotoshopAdobe IllustratorAdobe FireworksAdobe FlashProgramski alati u web dizajnuHTML i CSSAdobe DreamweaverMicrosoft Expression WebZaključakLiteratura

23355678910121112131415

1. Uvod

Ovaj seminar podijelit ću na tri glavna dijela. Prvi dio seminara bavit će se poviješću oblikovanja web stranica i samom strukom jednog web dizajnera. Koje su bile limitacije web dizajnera u počecima weba kakvim ga danas poznajemo.

Drugi dio bavit će se grafičkim alatima koji se koriste kod oblikova-nja web mjesta. Nastojat ću objasniti razliku između piksel i vektorske grafike u kontekstu web dizajna i njihovog korištenja na web stranica-ma. Također ću se osvrnuti na alate koji su standardni u dizajnerskoj industriji, odnosno alate tvrtke Adobe Systems koje koristi većina web dizajnera. Besplatne alate ću izostaviti jer se baziraju na komercijalnim alatima, a uglavnom imaju veoma slične funkcionalnosti kao i komer-cijalni.

U trećem dijelu osvrnut ću se na programski dio izrade jednog web mjesta. Koji se programski i markup jezici koriste za izradu web mjesta, koje su razlike između frontend i backend developmenta. Osvrnut ću se i na dva osnovna jezika koja koristimo — HTML i CSS. Na kraju ću napraviti pregled najpoznatijih industrijskih alata za pisanje i provjeru koda.

2

2. Web dizajn kao disciplina

Prije upuštanja u definiranje web dizajna, valja definirati sam dizajn kao disciplinu. Definicija dizajna prema Feđi Vukiću glasi:

Dizajn je interdisciplinarna djelatnost koja povezuje društvene, hu-manističke i tehničke znanost s kreativno-umjetničkom sastavnicom. Dizajn (engl.design) se prakticira i promovira kao djelatnost koja je posrednik između korisnika i predmeta te između pojedinca i zajedni-ce, a ujedno i kao spoznajna tehnika u odnosu korisnika i predmeta. U kontekstu suvremenih društava koja funkcioniraju u sklopu ideje masovne proizvodnje i potrošnje te globalne razmjene kapitala i rada, dizajn bi se najlakše mogao definirati kao intelektualna i kreativna interdisciplinarna djelatnost koja funkcionira unutar društva koje ima potrebu materijalizirati mitove kako bi u sklopu kulturalnog sustava poticala posredovanje identiteta pojedinca u zajednici ali i identifikaciju pojedinca sa zajednicom. 1

2.1. Kratka povijest web dizajnaWeb dizajn je prvenstveno grafička djelatnost koja se bavi izradom i oblikovanjem web mjesta. Web dizajn nije samo krajnji proizvod od-nosno web stranica, već cijeli proces od planiranja do realizacije. Web dizajnom se najčešće bave grafički dizajneri, no postoje i dizajneri spe-cijalizirani isključivo za web. Osoba koja se bavi izradom web stranica osim što mora poznavati principe samog dizajna, mora poznavati treba imati i određen set tehničkih vještina i znanja kako bi sam vizualni dio napravila funkcionalnim.

Iako internet postoji više od 50 godina, web kakvim ga danas poznajemo postoji nešto više od 20 godina. Sve je započelo kada je znanstvenik Tim Berners-Lee, znanstvenik u CERN-u, napravio pro-tokol WWW koji je osnova svakog današnjeg weba. Protokol, zajedno s HTML (Hyper Text Markup Language) markup jezikom zamišljen je za standardizaciju komunikacije između znanstvenika diljem svijeta. Ideja weba za širu upotrebu bila je tek u povojimak, a web dizajn kao samostalna disciplina vjerojatno je bilo nešto nezamislivo.

Tek negdje 1993. pojavio se web preglednik Mozaik koji je imao neke naprednije funkcionalnosti, a 1995. javlja se Netscape Navigator koji je uvelike zaslužan za web dizajn kao disciplinu. Ono što je bilo ključno jest mogućnost korištenja tablica što je prvim dizajnerima weba omo-gućilo smislenije smještanje elemenata na web stranicama. Ponudio je i promjenu boje pozadine u tablicama i na samim stranicama. Ubrzo je i Microsoft ponudio svoj preglednik Internet Explorer te je počeo takozvani rat među preglednicima.

Korištene informaci-je na ovoj stranici preuzete su, citirane i interpretirane sa slijedećih izvora:

1 Feđa Vukić; Teorija i povijest dizajna; Golden Marketing; Zagreb 2012

A Brief History of the World Wide Web

http://webdesign.tutsplus.com/articles/industry-trends/a-brief-history-of-the-world-wide-web/

Pronalazak 26.10.2013.

3

U to vrijeme javio se i jezik za stiliziranje HTML tagova, pod imenom CSS. On je u svojoj prvoj verziji omogućio mnogo oblikovnih moguć-nosti kao što je promjena fonta, korištenje lista, poravnanje teksta, rubovi, razmak između riječi. Kad se pojavio, bio je nnekompatibilan s velikim brojem tadašnjih preglednika i tek ga je Internet Explorer u svojoj verziji 5.0 iz 2000. godine u potpunosti implementirao.

Iz gore navedenog može se zaključiti da web dizajneri u početku nisu imali toliko mogućnosti kao što je to slučaj danas. Osim limitacija koje je postavljala sama tehnologija kodiranja i izrade, grafičke mo-gućnosti također su bile ograničene. Prvenstveno zbog sporih internet veza,grafika nije mogla biti velike veličine datoteka pa tako puni poten-cijal nije mogao biti ostvaren. S pojavom brzih internet konekcija kao što je ADSL, web dizajn ostvaruje svoj puni potencijal. Veliki faktor koji utječe na web dizajn kakvim ga danas poznajemo jest i pojava tako-zvanog Weba 2.0 ili društvenog weba. Do tog trenutka, komunikacija na webu je bila statična i jednosmjerna, korisnik je dolazio na internet i pregledavao stranice bez mogućnosti da sudjeluje u kreiranju sadržaja. Društvene mreže kao što je MySpace ili Facebook omogućile su dvo-smjernu komunikaciju između korisnika, administratora web stranica, a sami korisnici počinju sudjelovati u stvaranju samog sadržaja web stranice. Tada su se javile i mnoge nove vještine koje web dizajner treba posjedovati. Javljaju se i pojmovi odnosno zanimanja kao što je dizajn interakcija koji se bavi komunikacijom i interakcijom ljudi s uređajima ali i ljudi međusobno u kontekstu korištenja dizajnerskih proizvoda.


CSS1

http://www.w3.org/TR/REC-


4

3. Grafički alati u web dizajnu

Grafičkim alatima kod izrade weba najčešće se koristi osoba koja po-stavlja osnovni dizajn web mjesta—web ili grafički dizajner. Najčešće korišteni alati, odnosno industrijski standard, danas su oni tvrtke Ado-be. To uključuje Adobe Photoshop, Adobe Illustrator, Adobe Fireworks, a prije se češće koristio i Adobe Flash. Od mnogobrojnih besplatnih ala-ta, valja spomenuti GIMP i Inkscape koji su trenutno vodeći besplatni grafički alati na tržištu.

Adobe Photoshop je alat za obradu piksel grafike. Adobe Illustrator koristi se za vektorsku grafiku. Adobe Flash bazira se na vektorskoj gra-fici, no osim za izradu web stranica, služi i za izradu animacija. Adobe Fireworks je alat namijenjen isključivo izradi web grafike i može raditi s vektorskom i piksel grafikom istovremeno. Gimp je besplatan alat koji omogućuje manipulaciju piksel grafikom. Često se naziva i besplatnom alternativom Photoshopu.Inkscape je besplatna alternativa Illustra-toru i prvenstveno je alat za obradu vektor grafike.

3.1. Piksel i vektorska grafika

Razlikujemo dvije vrste grafike koje koristimo za ekranski prikaz. To su piksel grafika, bazirana na pikselima i vektorska grafika, bazirana na krivuljama i matematičkim formulama. Piksel i vektorsku grafiku definirao je doc.dr.sc. Mario Tomiša u svojoj knjizi Grafički dizajn i ko-munikacija.

Piksel grafika (ili pikselska grafika, a ponekad se koristi i izraz bitmap grafika) sadržava nizove različito obojenih piksela koji zajedno čine sli-ku. U svom najjednostavnijem obliku jednobitne bitmape imaju samo dvije boje, svaki je piksel ili crni ili bijeli. Povećanjem stupnja složenosti slika može sadržavati više boja, a slika fotografske kvalitete i milijune. Primjeri bitmap formata uključuju GIF, JPEG, PNG, TIFF, XBM, BMP, PCX te također bitmap (odnosno ekranske fontove).Vektorska grafika, poznata i kao objektno orijentirana grafika, sastoji se od matematičkih formula koje opisuju oblike i njihove pozicije. Umjesto redova piksela, kod vektorske grafike nalazimo forme, krivulje, linije i tekst koji zajedno tvore sliku. Bitmap slika sadržava informacije o boji i poziciji svakog piksela, a vek-torska grafika upute o tome gdje smjestiti svaku komponentu. Primjeri formata vektorske grafike su AI, CDR, CNV, PICT, EPS I VMF, a vektorski definirani fontovi su Postscript i TrueType.2

5


2 Mario Tomiša, Marin Milković; Grafički dizajn i komunikacija; Veleučilište u Varaždi-nu; Varaždin 2013

6


4 Ways to Convert Your Site to Retina

http://www.sitepoint.com/7-reasons-to-con-sider-svgs-instead-of-canvas/

Pronalazak 27.10.2013.Gornji primjer (Slika 1.) prikazuje uvećanje jednake slike, odnosno slov-nih znakova MD. Lijevi set znakova je uvećana bitmap odnosno piksel grafika, a kod desne se radi o vektorskoj grafici. Vrlo jasno se vidi da je bitmap grafika svojim uvećanjem izgubila na kvaliteti dok je vektorska grafika ostala jednake kvalitete neovisno o uvećanju.

3.2. Korištenje piksel i vektorske grafike na webu

Iako je tehnologija za korištenje vektora na webu dostupna, praksa korištenja piksel grafike je još uvijek češća. Piksel grafika koristi se za ra prikaze logoa, razne pozadine web stranice i izbornika, za prikaz fotografija na web stranicama itd. Vektori se zapravo već dugo koriste kod web dizajna ako sve sagledavamo sa strane tipografije, odnosno fontova koji su gotovo uvijek u vektorskom formatu.

Ono što je novitet posljednjih nekoliko godina jest mogućnost kori-štenja SVG ili Scalable Vector Graphics formata unutar web stranice. Radi se o formatu kojeg mogu izvoziti alati poput Adobe Illustratora ili Inkscapea. SVG je zapravo grafika kodirana pomoću XML standarda.

S pojavom takozvanih retina ekrana čije rezolucije često prelaze standardnu 1920x1080 HD veličinu, javlja se još veća potreba za prila-gođavanjem web stranica responzivnim standardnima. Problem koji se javlja je da se sad postojeće stranice ne trebaju više samo smanjivati da se prilagode uređajima poput tableta ili pametnih telefona, već se moraju i uvećavati da se prilagode uređajima poput Apple računala koja posjeduju navedene ekrane. Tu bi odličnu primjenu mogao pronaći SVG format jer se može skalirati neograničeno, pritom ne gubeći na kvali-teti. Jedini nedostatak je nemogućnost korištenja SVG-a za fotografije i druge kompleksne slikovne zapise.

Slika 1. — Usporedba piksel i vektorske grafike

3.3. Adobe Photoshop

Photoshop je alat tvrtke Adobe Systems koji se prvi puta pojavljuje 1990. godine ekskluzivno za Apple računala. Ovaj alat za obradu pik-sel grafike postavio je novi standard u obradi računalne grafike jer je prvi predstavio slojeve (layere). Slojevi omogućuju da se određeni dio grafike uređuje neovisno o nekom drugom djelu. Trenutno aktualna inačica je četrnaesta reinkarnacija alata, pod nazivom Adobe Photos-hop Creative Cloud.

Glavni format datoteka u Photoshopu je .PSD, a ostali formati u koje može izvoziti su .JPEG, .PNG, .GIF, .PDF te većina drugih standardnih formata piksel grafike. U kontekstu web dizajna, Photoshop se koristi prvenstveno za koncipiranje prijeloma web stranice, odnosno wirefra-ming. Koristi se i za izradu određenih grafičkih elemenata. Do prije ne-koliko godina, elementi kao što su gradijenti, sjene i obli pravokutnici nisu mogli biti generirani unutar web preglednika već su se za tu svrhu koristio najviše Photoshop.

7


Photoshop’s role in web design

http://psd.tutsplus.com/articles/tools/photoshop-role-in-web-design/


Adobe Photoshop

http://en.wikipedia.org/wiki/Adobe_Pho-toshop


Slika 2. — Sučelje Adobe Photoshopa CS6 usred rada na web stranici

Photoshop ima i mogućnost rezanja web stranice (slice) na manje ko-made i njihovo automatsko kodiranje u HTML i CSS kod, no ta metoda se najčešće više ne koristi jer je zastarjela i sam kod koji izlazi iz ovog pristupa nije sukladan vremenu, a takvim korištenjem mogućnost res-ponzivnog i dinamičnog web dizajna ne dolazi u obzir.

Alati unutar Photoshopa koje najčešće koristimo za oblikovanje weba su Pen tool, Shape tool, Color picker i Type tool, te naravno mo-gućnost Layera.

3.4. Adobe Illustrator

Illustrator je baš kao i Photoshop, prvenstveno razvijen za Apple Mac. Alat se pojavio nešto ranije, oko 1986. i njegova namjena i do danas je ostala obrada vektorske grafike. Trenutna inačica je Illustrator CC i to je sedamnaesta inkarnacija alata. Glavni format datoteka koji koristi je .AI, a može izvoziti i u sve piksel grafika formate kao i sve popularne vektorske formate.

Illustrator nije popularan izbor kod izrade web stranica kao što je to recimo Photoshop, no dakako nije manje sposoban za većinu toga što je moguće i u Photoshopu te sličnim alatima. Illustrator je idealan za izradu wireframeova i gridova za web stranicu. Prvenstveno zbog odličnog Shape toola koji radi na višoj razini nego onaj Photoshopov ali i zbog puno boljih tipografskih mogućnosti. Osim toga, ako se rade wireframeovi i layoutovi, pomoću artboard opcije, svaka od stranica može se spremiti u jedan PDF i tako poslati klijentu te ga lakše uključiti u proces.

8


Illustrator’s role in web design workflow

http://vector.tutsplus.com/articles/theory/adobe-illustrators-role-in-a-web-design-workflow/


Adobe Illustrator

http://en.wikipedia.org/wiki/Adobe_Illus-trator


Slika 3. — Sučelje Adobe Illustratora CS6 usred rada na web stranici

Illustrator također omogućuje i direktni izvoz grafičkih elemenata u SVG format o čemu govori i odjeljak 3.2. Korištenje piksel i vektorske gra-fike na webu. Illustrator tako uvelike olakšava korištenje vektorske gra-fike na webu i njene izrade jer nije potrebno znanje XML jezika kojim se ovakva grafika za korištenje na webu inače kodira.

3.5. Adobe Fireworks

Fireworks je alat namijenjen uglavnom web grafici. Zadnja verzija koju je Adobe razvio je CS6 te s početkom Creative Cloud paketa, prestaje razvoj alata. Fireworks može raditi i s vektorskom i piksel grafikom, odnosno podržava izvoz u formate obje vrste. Alat se najlakše može opisati kao kombinacija Photoshopovih i Illustratorovih alata za web.

Od bitmap alata sadrži Brush tool, Clone stamp tool, Pencil tool, Smudge tool. Od vektorskih alata sadrži Pen tool, Shape tool, Type tool, Freeform tool i Knife tool. Po mnogima, najveća prednost Fireworksa nad Photoshopom kod web dizajna jest upravo njegova jednostavnost i direktna ciljana grupa korisnika—web dizajneri. Također sadrži i neke dodatne opcije poput unutarnjeg spajanja dijelova dizajna što može odlično poslužiti kod izvoza kompletnih web sučelja van iz alata.

9


The Web Designer’s Guide to Comparing Photoshop and Fire-works

http://webdesign.tutsplus.com/articles/general/the-web-de-signers-guide-to-com-paring-photoshop-and-fireworks/


Adobe Fireworks

http://en.wikipedia.org/wiki/Adobe_Fire-works


Slika 4. — Sučelje Adobe Fireworksa CS6 usred rada na web stranici

Još jedna prednost Fireworksa nad Photoshopom je bolja optimizacija slika kod izvoza datoteka. Glavni format s kojim Fireworks radi je PNG te slikovne datoteke koje izlaze iz ovog alata često rezultiraju manjom veličinom datoteke nego što je to slučaj kod Photoshopa ili drugih slič-nih alata.

3.6. Adobe Flash

Flash je Adobeov alat koji se koristi za vektorsku grafiku, animacije, igre ali i za izradu web stranica i aplikacija. Alat radi s vektorskom i piksel grafikom istovremeno, a glavna datoteka izvoza je .SWF.

Dugi niz godina Flash je bio korišten za izradu weba zbog mnogo na-prednijih mogućnosti koje tadašnje verzije HTML-a i CSS-a nisu omo-gućavale. Neke od tih mogućnosti su glatki prijelazi između stranica, animirani izbornici, razni interaktivni elementi i efekti. Flash neke web stranice koriste i danas no on polako postaje tehnologija nekog proš-log vremena, barem što se tog aspekta njegove uporabe tiče. Primjer stranice koja koristi Flash je portal Hrvatskog Dizajnerskog Društva (dizajn.hr).

Veliki nedostatak Flasha je nekompatibilnost s velikim brojem mo-bilnih i prijenosnih uređaja. Osim toga, za njegov prikaz potrebno je imati instalirani Flash player dodatak koji nije dobro ili uopće nije ra-zvijen za neke od postojećih platformi.

10


Adobe Flash

http://en.wikipedia.org/wiki/Adobe_Flash


Slika 5. — Sučelje Adobe Flasha CS6

Flash je ipak imao još jednu veliku prednost svojedobno, a to je po-sebno razvijeni skriptni jezik za dodavanje naprednih funkcionalnosti — ActionScript. Flash se koristi danas i kod raznih video playera na stranicama poput YouTubea, no i u tom aspektu ga polako zamjenjuju tehnologije kao što je HTML5, CSS3 i razne dinamične biblioteke po-put jQueryja. Praktički da ne postoji opcija u Flashu koja se danas ne može izvesti pomoću programiranja. Jedna od tvrtki koja je gotovo u potpunosti izbacila Flash sa svojih proizvoda je Apple.

4. Programski alati u web dizajnu

Sve faze izrade web stranice koje uključuju neko kodiranje možemo svrstati na dvije osnovne kategorije. Frontend development i backend development.

Frontend kod, odnosno frontend razvoj web stranica bavi se pr-venstveno kodiranjem izgleda stranice i nekih osnovnih površinskih funkcionalnosti. Frontend jezici, poput HTML-a, CSS-a i Javascripta interpretiraju se direktno unutar web preglednika, odnosno stranica ne mora biti postavljena na server kako bi prikazala ovakve funkcio-nalnosti. Frontend kod obično piše i osoba koja dizajnira samo grafičko sučelje web mjesta.

Backend kod, odnosno backend razvoj web stranica bavi se prven-stveno kodiranjem nekih naprednih funkcionalnosti same stranice, kao što su naprimjer registracija, kontakt forme, forme za unos sadržaja i tako dalje. Backend kod obično piše programer specijaliziran za web razvoj. Neki od popularnih backend jezika su PHP, ASP i Python.

Univerzalan alat koji najčešće koristimo, bilo za frontend ili bac-kend razvoj, jest Adobe Dreamweaver. Odlična alternativa je Microsoft Expression web koji je od nedavno besplatan. Vrijedi spomenuti i alat Notepad++.

4.1. HTML i CSS

HTML i CSS su dva osnovna jezika koja koristimo kod oblikovanja web mjesta. Pomoću njih grafičko sučelje izrađeno u nekom od grafičkih alata pretvaramo u statičnu web stranicu.

HTML je markup jezik koji se bazira na tagovima, a služi za slaganje elemenata na web stranicama. Naprimjer, HTML označava naslove, paragrafe, a CSS te naslove stilizira bojama, fontovima i veličinama. Trenutno aktualna verzija je 5, a omogućuje mnoge napredne funkci-onalnosti poput reprodukcije multimedijalnih materijala direktno na stranici. Također novitet je i tag canvas koji služi za stvaranje raznih sadržaja poput igara i animacija.

CSS je stilski jezik koji služi za oblikovanje i stiliziranje HTML tago-va. Naprimjer, pomoću CSS-a možemo mijenjati stil, veličinu i prored teksta na web stranici. Trenutna aktualna verzija je CSS3 koja omo-gućuje mnoge funkcionalnosti poput animacija, napredan rad s fon-tovima, uvođenje oblih rubova, sjena, gradijenata. Dakle, ova verzija donijela je mnoge funkcionalnosti koje su kao što je već navedeno, do tada mogle biti izvedene isključivo pomoću alata poput Photoshopa.

11


Frontend vs. Backend

http://blog.teamtree-house.com/i-dont-speak-your-language-frontend-vs-backend


HTML, CSS

http://www.w3schools.com


4.2. Adobe Dreamweaver

Dreamweaver je Adobeov alat za kodiranje web stranica, čija je tre-nutna aktualna inačica 13.0 ili Adobe Dreamweaver CC. Alat podržava sljedeće jezike: HTML, CSS, XML, Javascript, PHP, ASP, ColdFusion, Visual Basic, Java, WML. Ono što izdvaja ovaj alat je da kod frontend razvoja web stranica (HTML/CSS/Javascript), direktno prikazuje pro-mjene koje se dogode u kodu. Radi se o takozvanom What You See Is What You Get sistemu. Alat je dostupan za Windows i OSX platformu.

12


Benefits of using Dreamweaver

http://mobiforge.com/forum/developing/content-management/the-benefits-us-ing-dreamweaver


Adobe Dreamweaver

http://en.wikipedia.org/wiki/Adobe_Dreamweaver


Slika 6. — Sučelje Adobe Dreamweavera CS6 usred rada na web stranici

Dreamweaver također istovremeno prilikom pisanja koda, provjerava njegovu sintaksu te naglašava greške i time omogućava rješavanje pro-blema u samom korijenu. Osim toga, sam zatvara HTML tagove koji ostaju otvoreni te sugerira moguće podopcije stilova kod CSS-a.

4.3. Microsoft Expression Web

Expression Web je Microsoftov alat za kodiranje web stranica. Posje-duje gotovo identične funkcionalnosti Adobeovom Dreamweaveru.

Expression web je dio kompanijinog Expression paketa programskih alata koji je bio zamišljen kao direktna konkurencija Adobe Creative Suite-u no kompanija je prestala s razvojem paketa 2012. godine te je omogućila besplatno preuzimanje. Razvoj je došao do verzije 4.0.

13


Microsoft Expression Web

http://en.wikipedia.org/wiki/Microsoft_Ex-pression_Web


Slika 6. — Sučelje Expression Weba 4.0 usred rada na web stranici

Ono što mnogi zamjeraju ovom alatu je prikaz direktnih izmjena u kodu, zbog toga što se prikaz bazira na Internet Exploreru koji često slovi kao nepouzdan i neusklađen s današnjim standardima. No ako to izuzmemo, alat može odlično poslužiti kao besplatna alternativa Dreamweaveru

5. Zaključak

Web dizajn je relativno mlada grana grafičkog dizajna i disciplina koja postoji tek oko 20 godina. U počecima weba, dizajneri nisu imali toliku ulogu u oblikovanju web stranica niti je postojalo posebno zvanje web dizajner.

Razvoj tehnologije i grana web dizajna nalaze se u korelaciji, a alati koju su razvijeni omogućuju današnjem dizajneru da s lakoćom ovla-da oblikovanjem web stranica. Granica između alata koji se koriste za tiskane i online medije postaje sve tanja.

Po mojem mišljenju, jedan dizajner se ne bi trebao limitirati na odre-đeni medij već bi trebao biti multidisciplinaran i razmišljati o dizajnu kao o širokom pojmu. Oni koji su specijalizirani za rad u tiskanim medi-jima trebali bi shvaćati barem osnove rada s online medijima i suprot-no. Sa sadašnjom dostupnošću tehnologije i alata, to ne bi trebao biti nikakav problem, a pojedincu bi donio mnogo veće kompetencije i veću mogućnost dobivanja raznih klijenata i projekata.

Valja napomenuti da su alati i dalje samo alati. Glavni alat u web dizajnu je svakako ljudski um i kreativnost. Alati su tu samo da nam pomognu u lakšem realiziranju naših ideja i njihove verzije će dolaziti i odlaziti, no univerzalni principi dizajna uvijek će ostati isti.

14

6. Literatura

Knjige

Feđa Vukić; Teorija i povijest dizajna; Golden Marketing; Zagreb 2012

Mario Tomiša, Marin Milković; Grafički dizajn i komunikacija; Veleu-čilište u Varaždinu; 2013

Web (Pronalazak 26.10. i 27.10. 2013.)

A Brief History of the World Wide Web http://webdesign.tutsplus.com/articles/industry-trends/a-brief-history-of-the-world-wide-web/

CSS1http://www.w3.org/TR/REC-

4 Ways to Convert Your Site to Retinahttp://www.sitepoint.com/7-reasons-to-consider-svgs-instead-of-canvas/

Photoshop’s role in web designhttp://psd.tutsplus.com/articles/tools/photoshop-role-in-web-design/

Illustrator’s role in web design workflowhttp://vector.tutsplus.com/articles/theory/adobe-illustrators-ro-le-in-a-web-design-workflow/

Adobe Photoshop, Flash, Illustrator, Fireworkshttp://en.wikipedia.org/wiki/Adobe_Systems i podlinkovi

Microsoft Expression Webhttp://en.wikipedia.org/wiki/Microsoft_Expression_Web

15

Documents

Grafički i programski alati u web dizajnu