Optimizacija web stranice (SEO)

Web dizajn (eng. web design) je proces stvaranja vizualnog izgleda web stranice. Glavni segmenti web dizajna su grafički web dizajn, dizajn korisničkog sučelja (UI dizajn), dizajn korisničkog iskustva (UX dizajn), itd. Cilj web dizajna je stvaranje estetski privlačnih, funkcionalnih i korisničko ugodnih web stranica. 

Povijest web dizajna

Prva web stranica i prva tražilica (1991-1994)

Prvu web stranicu stvorio je Tim Berners-Lee, u švicarskom istraživačkom centru CERN (Europska organizacija za nuklearna istraživanja), 6. kolovoza 1991 godine. Web-u se još uvijek može pristupiti, a poveznica do nje se nalazi na službenoj CERN-ovoj stranici.

Berners-Lee je također stvorio Hypertext Markup Language (HTML), pomoću kojeg je kodirao stranicu. Unatoč evoluciji interneta i pojavi novih tehnologija, HTML ostaje nezamjenjiv jezik za izradu web stranica. Kasnije će osnovati World Wide Web Consortium, koje i danas nadgleda razvoj web standarda.

U ranim danima web dizajna, HTML-ova funkcija <table> bila je jedini način organiziranja informacija dodjeljivanjem podataka stupcima i redovima. Nije bilo blokova boja, slika niti grafika, samo tekst.

World Wide Web nastavio se širiti, te samo 2 godine kasnije, nastao je prvi pretraživač na svijetu, ALIWEB (Archie Like Indexing for the Web). To je bila web stranica koja je organizirala sve veze u zadane kategorije (zabava, života, novac, itd.). ALIWEB je također koristio novu vrstu organizacije – boje. Žuta pozadina razdvajala je kategorije, čime je korisnicima bilo olakšano prepoznavanje onoga što traže. Kao i prva web stranica, ALIWEB se i danas može posjetiti. 

Web stranice su eksplodirale početkom 90-ih. Jedna stranica 1991. godine, a ukupno 2.738 1994. godine. Također je važno za napomenuti da je Jeff Bezos lansirao Amazon.com 1994. godine. 

Evolucija web dizajna (1995-2000)

U svijet web tehnologija došao je JavaScript. Ovim korakom se je dizajn počeo razlikovati, pošto je JavaScript bio prvi programski jezik pomoću kojeg su se mogli dodati razni interaktivni efekti i pokreti statičkim web stranicama.

HTML 2.0 počeo se je koristiti 1995. godine, te je podržavao obrasce, tablice i druge razne elemente.

Kako su alati za dizajn i razvoj postajali kompleksniji, korisnici su počeli imati veća očekivanja od web stranica. Kao rezultat toga, Apple je uveo pojam “User Experience”.

H4: Pojava CSS-a

1996. godine, nastao je stilski jezik CSS (Cascading Style Sheets). On je donio mogućnost preciznog definiranja boja, rasporeda i tipografije na web stranicama, pružajući dizajnerima veću kontrolu nad izgledom njihovih projekata. CSS je, u osnovi, jezik koji odvaja stil od sadržaja na web stranicama.

H4: Web animacije

Sljedeći korak u razvitku web dizajna bile su animacije, a Macromedia Flash 1.0 osvojila je web. Animacije su mogle raditi samo ako je web stranica bila opremljena Flash dodatkom, te bi inače animacija bila prazna. To je predstavljalo značajan problem za web stranice izrađene isključivo u Flashu. Osim toga, javlja se sporije učitavanje stranica, pošto su za razne animacije bile potrebne mnoge pozadinske operacije.

Unatoč manama, Flash je odigrao značajnu ulogu u povijesti web dizajna. Ona je ipak došla kraju 31. prosinca 2020., kada je Adobe prekinuo podršku za Flash, a Windows uklonio Flash iz svih preglednika.

H4: Pokretanje Google-a

1998. godine, Larry Page i Sergey Brin pokrenuli su Google Beta kao dio projekta koji istražuje indeksiranje rezultata stranica na temelju relevantnih pojmova pretrage. 

S odmicanjem vremena, web mogućnosti su rasle, a e-trgovina i online plaćanja omogućile su tvrtkama proširenje svog poslovanja i na online prostor. Paypal (koji je zapravo prvih dvije godine nosio naziv Confinity) pokrenut je 2000. i etablirao se kao lider u online transakcijama.

Početak responzivnog dizajna (2000 – 2010)

U početku, web stranice su bile dizajnirane i stvorene isključivo za desktop preglednike. 2000. godine, dizajneri su počeli stvarati više verzija web stranica koje su se mogle pregledavati na različitim preglednicima i uređajima. Iako je to tehnički funkcioniralo, bilo je vremenski zahtjevno i nepraktično. Uređaji i preglednici su se stalno razvijali, a imati više verzija značilo je da su ažuriranja morala biti izvršena zasebno – za stolna računala, tablete i mobilne uređaje. Trostruki napor, trostruko vrijeme.

2007. godine, Apple je objavio prvi iPhone i to je bio pravi preokret. Kada je Steve Jobs održao prezentaciju iPhonea, rekao je: “Prvi put donosimo probojni softver na mobilni uređaj,” te je objasnio da je Safari preglednik “prvi potpuno upotrebljivi HTML preglednik na telefonu”.

Dok se svijet fokusirao na web stranice prilagođene mobilnim telefonima,, responzivni web dizajn postao je neophodan. 2010.godine, web dizajner Ethan Marcotte objavio je članak pod nazivom “Responzivni web dizajn”, u kojem je opisao kako optimizirati sadržaj na temelju rezolucije ili veličine zaslona. Ovaj članak imao je ogroman utjecaj na web dizajn i sam razvoj web stranica.

H3: Prijelaz na jednostavni web dizajn (2010 – Sada)

Tijekom vremena, web dizajn se je prilagodio korisničkim potrebama. U 2010. godini, došlo je do promjene iz bogatog (sjene, dubina, bojne gradacije, teksture, upadljive animirane GIF-ove itd.) u jednostavni dizajn (čist, minimalistički, svijetle boje, 2D ikone, sans-serif tipografija itd.).

Karakteristike u bogatom dizajnu pružale su “stvarni” ili 3D dojam, ali dodatna kompleksnost dizajna značila je sporije vrijeme učitavanja. Prijelaz na jednostavni dizajn dao je prepoznatljiv “digitalni” dojam i pružio jasnije i učinkovitije korisničko iskustvo.

H2: Alati i tehnologije u web dizajnu

Web dizajn zbog svoje kompleksnosti zahtijeva upotrebu raznovrsnih alata i tehnologija kako bi se stvorila korisnički prijateljska i estetski privlačna web stranica. 

H3: Alati za UX/UI dizajn

Za stvaranje pozitivnog korisničkog iskustva (UX) i kreiranje vizualno privlačnog korisničkog interfejsa (UI), svakom web dizajneru potrebni su određeni alati, kako bi na što uspješniji i kvalitetniji način odradio ovaj proces. 

Moderni pristup dizajnu često se zasniva na upotrebi naprednih softverskih rešenja, a među najcenjenijim alatima u ovom području su Adobe XD, Sketch, Figma i InVision. Navedeni alati predstavljaju temelje modernog web dizajna, omogućujući dizajnerima testiranje i usavršavanje  svojih ideja prije nego što krenu u fazu razvoja.

Adobe XD jedan je od vodećih alata u navedenom polju. On omogućuje dizajnerima stvaranje interaktivnih prototipa,  simuliranje korisničkih iskustva, itd. Ovim načinom rada, dizajner može lakše i dublje razumjeti potrebe korisnika. 

Sketch je program fokusiran samo  na dizajniranju korisničkog interfejsa. On omogućuje brzo i precizno kreiranje UI elemenata.

Figma se izdvaja po svom cloud-based pristupu, pružajući dizajnerima mogućnost zajedničkog rada u realnom vremenu. Ovaj način ne samo da ubrzava proces izrade već i poboljšava timsku suradnju, čineći komunikaciju između dizajnera, programera i ostalih članova tima efikasnijom.

InVision omogućuje dizajnerima kreiranje interaktivnih prototipa bez pisanja koda. Ovaj alat podržava testiranje sa stvarnim korisnicima, čime se osigura da krajnji proizvod zadovoljava potrebe i očekivanja ciljne publike.

Okviri za responzivan dizajn web stranica

Web frameworkovi (hrv. okviri) bitni su alati u modernom web dizajnu i razvoju web stranica. Njihova svrha je pojednostaviti proces izrade web stranica, olakšati održavanje i osigurati da stranice budu prilagodljive za različite uređaje, tj. da budu responzivne.

Korištenje web frameworkova donosi brojne prednosti. Oni omogućuju konzistentan dizajn, s obzirom na mnoge unaprijed definirane komponente, stilove i pravila. Što znači da oni osiguravaju da sve stranice na web mjestu izgledaju i ponašaju se na isti način.

Drugo, frameworkovi olakšavaju responzivni dizajn. U svijetu gdje korisnici pristupaju web stranicama putem različitih uređaja, od računala do mobilnih telefona, responzivnost je ključan faktor.

Nadalje, frameworkovi ubrzavaju razvojni proces. Dizajneri i developeri mogu iskoristiti unaprijed definirane komponente i stilove, čime se smanjuje potreba za pisanjem koda “iz početka”. 

U nastavku su navedeni neki od najpopularnijih web frameworkova koji se koriste u web dizajnu:

1. Bootstrap
2. Foundation
3. Bulma
4. Semantic UI
5. Materialize
6. Tailwind CSS
7. UIKit
8. Skeleton
9. Pure.css
10. Spectre.css

H3: Alati za grafički dizajn

Estetika i vizualni identitet su temeljni čimbenici koji čine web stranicu privlačnom i prepoznatljivom. U kontekstu web dizajna, korištenje profesionalnih alata za grafički dizajn od ključne je važnosti za stvaranje vizualnih elemenata koji ispunjavaju visoke estetske standarde. Među najpoznatijim alatima ističu se Adobe Photoshop, Illustrator i Canva.

Adobe Photoshop je jedan od najpoznatijih i najkorištenijih alata za grafički dizajn. On omogućuje dizajnerima stvaranje i uređivanje fotografija, ilustracija i drugih vizualnih elemenata. Jedna od glavnih prednosti Photoshopa je njegova sposobnost za rad s više slojeva. Ovaj faktor omogućuje dizajnerima precizno kombiniranje i uređivanje različitih elemenata, ne narušavajući originalne slike. 

Adobe Illustrator se posebno ističe u kreiranju vektorskih grafika. Dizajneri ga koriste za stvaranje ikona, logotipa, infografika i drugih elemenata koji zahtijevaju skalabilnost. Vektori omogućuju precizno oblikovanje bez gubitka kvalitete, što je posebno važno za grafičke elemente na web stranicama.

Kao vodeći alat za vektorski dizajn, Adobe Illustrator pruža niz opcija za crtanje, manipulaciju oblicima i bojama te za precizno pozicioniranje elemenata. To čini softver idealnim za izradu logotipa i ikona koje moraju biti jasne i oštre bez obzira na veličinu na kojoj se prikazuju.

Canva je popularna zbog svoje jednostavnosti upotrebe, čime omogućuje i onima sa manje iskustva u dizajnu kreiranje vizualno privlačnih elemenata, od naslovnih slika do društvenih mrežnih postova.

Platforma pruža pristup bogatom asortimanu gotovih predložaka, grafičkih elemenata i fontova, omogućujući korisnicima mogućnost brze i jednostavne prilagodbe svojih projekata. Alati za uređivanje, poput povlačenja i ispuštanja (eng. drag and drop), omogućuju brzo postizanje željenih rezultata bez potrebe za dubokim poznavanjem dizajnerskog softvera.

Navedena pristupačnost i korisničko prijateljstvo, odveli su Canvu na put popularnosti, čineći je odličnim izborom za one koji žele brzo i efikasno stvarati atraktivan vizualni sadržaj.

H2: Elementi i tehnike web dizajna

//ima prostora za biti bolje

Web dizajn obuhvaća raznolike elemente i tehnike koji zajedno čine korisničko iskustvo (UI/UX) na internetu. Razumijevanje osnovnih elemenata i naprednih tehnika web dizajna neizostavno je za stvaranje funkcionalnih, estetski privlačnih i korisnički prijateljskih web stranica. 

—————————————

Web dizajn obuhvaća široki spektar elemenata i tehnika koji su usklađeni kako bi oblikovali korisničko iskustvo (UI/UX) na internetu. Temeljito poznavanje osnovnih strukturnih elemenata i naprednih strategija web dizajna ključno je za izradu web stranica koje ne samo da su funkcionalne, već i vizualno privlačne te prilagođene korisnicima. U ovom kontekstu, usmjerenost na estetiku, funkcionalnost i korisničku interakciju postaje presudna kako bi se stvorio web koji zadovoljava suvremene standarde i očekivanja posjetitelja na internetu.

H3: UI / UX

User Interface (Korisničko sučelje – UI)

UI se fokusira na dizajn elemenata s kojima korisnici izravno interagiraju na web stranici. To uključuje gumbe, izbornike, forme, ikone i druge vizualne elemente. Cilj UI-a je stvoriti sučelje koje je estetski privlačno, ali istovremeno funkcionalno i intuitivno za korištenje. UI dizajneri rade na postizanju optimalne kombinacije vizualne atraktivnosti i jednostavnosti upotrebe.

User Experience (Korisničko iskustvo – UX)

UX se odnosi na ukupno iskustvo koje korisnici dožive prilikom interakcije s web stranicom. To uključuje sve aspekte, od navigacije i brzine učitavanja do intuitivnosti i zadovoljstva korisnika. UX dizajneri nastoje stvoriti ugodno i učinkovito iskustvo koje odražava potrebe i očekivanja ciljane publike. Kroz razne analize i povratne informacije korisnika, UX dizajneri rade na poboljšanju korisničke interakcije.

H3: Izgled (Layout)

Izgled web stranice važan je u oblikovanju vizualnog dojma i funkcionalnosti. On se odnosi se na raspored, organizaciju i postavljanje elemenata poput teksta, slika,  i drugih komponenti na ekranu. Kvalitetan izgled doprinosi preglednosti, jednostavnosti korištenja te boljem ukupnom estetskom dojmu stranice.

H4: Struktura Izgleda

Struktura izgleda određuje kako su elementi postavljeni na stranici. To uključuje pozicioniranje glavnih i bočnih sekcija, podnožja i drugih dijelova. Dobro definirana struktura olakšava korisnicima snalaženje i pronalaženje željenih informacija.

H4: Vizualna Hijerarhija

Vizualna hijerarhija usmjerava korisnikovu pažnju prema važnim dijelovima stranice. Različitim veličinama, bojama i stilovima fontova naglašavamo dijelove web stranice za koje želimo da ih korisnik prvo uoči (npr. pozivi na akciju, ključne poruke, itd.). 

H4: Minimalizam i Estetika

Trendovi u web dizajnu često teže prema minimalizmu. Smanjenje nepotrebnih elemenata i čisti izgled stranice pridonosi lakšem usredotočavanju na ključne informacije. Estetski ugodan izgled često utječe na pozitivan dojam posjetitelja.

H3: Slike

Slike su neizostavan vizualni element u web dizajnu. Igraju ključnu ulogu u oblikovanju ne samo atraktivnih, već i informativnih korisničkih iskustava. Slike mogu prenijeti poruke, stvoriti atmosferu i privući pažnju posjetitelja. Kroz pažljiv odabir, postavljanje i stiliziranje, dizajneri imaju priliku dodatno obogatiti vizualni dojam stranice, poboljšavajući tako ukupnu interakciju korisnika sa sadržajem.

H4: Estetika i Emocionalni Utjecaj

Estetika slika doprinosi ukupnom dojmu web stranice. Pravilno odabrane slike mogu stvoriti emocionalnu povezanost s posjetiteljima, prenoseći atmosferu, ton ili brendiranu poruku. Boje, kompozicija i stil slika pridonose vizualnom identitetu stranice.

H4: Komunikacija Poruka

Fotografije, ilustracije ili grafike mogu dodatno pojasniti ili obogatiti tekstualni sadržaj. Pravilno usklađene slike pomažu korisnicima brže razumijevanje informacija i zadržavaju pažnju posjetitelja.

H4: Optimizacija za Brzinu

Optimizacija slika ključna je stavka koja utječe na brzinu učitavanja stranice. Smanjenje veličine datoteka, kompresija i pravilno formatiranje slika osigurat će da se web stranica brzo učitava, poboljšavajući time ukupno korisničko iskustvo. Brže učitavanje također ima pozitivan utjecaj na rangiranje stranice u tražilicama (SEO).

H3: Paleta Boja

H4: Paleta Boja u Stvaranju Identiteta Web Stranice

Paleta boja ima ulogu u oblikovanju prepoznatljivosti i identiteta web stranice. Odabir boja ne samo da utječe na estetiku stranice, već gradi prepoznatljivost brenda.

H4: Emocionalni Utjecaj Boja

Boje imaju moć izazivanja različitih emocija. Topli tonovi poput crvene mogu potaknuti strast i energiju, dok hladni tonovi poput plave mogu stvarati osjećaj smirenosti. Paleta boja može se prilagoditi kako bi odražavala ton stranice, usklađujući se s porukom koja se želi prenijeti. 

Usklađena kombinacija boja stvara ugodan vizualni dojam. Kroz ravnotežu toplih i hladnih tonova te kontrasta, dizajn postaje privlačan i lako čitljiv.

H4: Razmatranje Publike

Pri odabiru palete boja važno je razmotriti ciljanu publiku. Boje mogu imati kulturne konotacije i značenja koja se razlikuju ovisno o regiji ili demografskoj skupini. Prilagođavanje paleta boja prema preferencijama ciljane publike pomaže u izgradnji veze s korisnicima.

H3: Tipografija

//NEKI UVODNI TEKST

H4: Čitljivost i Prilagodba Sadržaju

Čitljivost je neophodan faktor u dizajniranju teksta na web stranicama. Odabir pravilnih fontova i prilagođavanje njihovih karakteristika sadržaju pomaže u stvaranju ugodnog iskustva za korisnike. Veličina, razmak između slova (kerning) i razmak između redaka (eng. line-height) ključni su u olakšavanju čitanja.

H4: Dodavanje Osobnosti i Naglašavanje

Različite vrste fontova mogu dodati osobnost i naglasiti važne informacije. Naslovi, podnaslovi i tijelo teksta (eng. body) mogu koristiti različite fontove kako bi se postigla hijerarhija informacija. Boldiranje, italicizing ili korištenje različitih stilova fontova za određene dijelove teksta pridonosi vizualnoj raznolikosti i naglašava bitne elemente.

H4: Stvaranje Identiteta

Tipografija je bitna u oblikovanju identiteta web stranice. Korištenjem unikatnih fontova i tipografskih elemenata, stranica može stvoriti određeni ton ili stil, što pomaže u usklađivanju s brendom ili temom. Konzistentna upotreba tipografije gradi prepoznatljivost.

H3: Navigacija

//NEKI UVODNI TEKST

H4: Jasna i Intuitivna Navigacija

Korisnici trebaju brzo i jednostavno pronaći ono što traže. Jasna i intuitivna  navigacija ključna je za postizanje korisničkog zadovoljstva. Upotreba jednostavnih izbornika, logično organizirane kategorije i vidljive poveznice pridonose lakšem traženju željenih informacija.

H4: Iterativno Poboljšanje

Praćenje analitike i povratnih informacija korisnika omogućava iterativno poboljšanje navigacije. Ažuriranje i prilagodba prema potrebama korisnika često vodi do uspješnijeg korisničkog iskustva.

H2: Responzivan web dizajn

Responzivan web dizajn omogućuje da se svaka web stranica prilagodi različitim uređajima, tj. različitim veličinama ekrana. Što znači, ako korisnik otvori responzivnu web stranicu na radnoj površini i promijeni veličinu prozora preglednika, sadržaj će se dinamički preurediti i prilagoditi manjoj rezoluciji, kako bi bio lakše čitljiv i prilagođen korisniku. 

H3: Media Query

Media queries su ključni dio modernog web dizajna jer omogućuju prilagodbu izgleda i stilova web stranice ovisno o rezolucijama ekrana. 

Kada korisnici posjećuju web stranicu, njihovi uređaji imaju različite veličine ekrana. Media query-ji omogućuju web dizajnerima postavljanje određenih stilova i rasporeda koji će se primijeniti samo kad su ispunjeni određeni uvjeti. Na primjer, može se definirati specifičan stil za uređaje s malim ekranima, poput pametnih telefona, kako bi osigurali da se sadržaj pravilno prikazuje na manjem prostoru.

Jedan od uobičajenih primera media query-ja je prilagođavanje veličine teksta ili skrivanje određenih elemenata kada korisnik koristi uređaj s manjim ekranom. Također, pomoću media query-ja možemo prilagoditi raspored elemenata ili promijeniti boje kako bismo poboljšali čitljivost na različitim uređajima.

H3: Javascript

Jedan od važnijih aspekata u responzivnom web dizajnu jest integracija JavaScripta. On se često koristi kao rezervna opcija za uređaje koji nisu u mogućnosti podržati sve značajke CSS3 media upita. 

JavaScript pruža mogućnost dinamičkih promjena i interakcija koje mogu nadopuniti responzivnost postignutu putem CSS-a. Ova kombinacija omogućuje još veću prilagodljivost, što je od suštinskog značaja za pružanje optimalnog korisničkog iskustva na širokom spektru uređaja, od računala do pametnih telefona i tableta.

JavaScript se također može primijeniti u poboljšanju performansi i optimizaciji učitavanja stranice na mobilnim uređajima. U praksi se koristi za dinamičko učitavanje ili isključivanje određenih elemenata. 

H3: Prikaz ili skrivanje sadržaja

U responzivnom web dizajnu, prilagođavanje prikaza ili skrivanje određenog sadržaja ključno je u pružanju optimalnog korisničkog iskustva na različitim uređajima. Kada se radi o manjim ekranima, poput mobilnih uređaja, prilagođavanje prikaza nužno je kako bi se očuvala preglednost i funkcionalnost. Skrivanje određenih elemenata može omogućiti bolju fokusiranost na ključne informacije, čineći iskustvo pregledavanja učinkovitijim. S druge strane, na većim ekranima, cilj je često prikazati sve relevantne informacije bez potrebe za skrivanjem. To može pridonijeti potpunijem dojmu o sadržaju i omogućiti korisnicima lakše istraživanje stranice.

H2: Uloge tijekom izrade web stranice

Postoje dvije ključne uloge u stvaranju web stranice: web dizajner i web developer, koji često surađuju na projektu. Web dizajneri su odgovorni za vizualni aspekt stranice, uključujući raspored, boje i tipografiju. 

U nastavku su navedeni neki od bitnijih zadataka i aktivnosti koje obavlja web dizajner:

1. **Dizajniranje korisničkog sučelja (UI):** Web dizajner stvara korisničko sučelje koje je intuitivno za korisnike. To uključuje dizajniranje elemenata poput gumba, izbornika, formi i ostalih interaktivnih komponenti.

2. **Razvijanje vizualnog stila:** Definira vizualni identitet web stranice, uključujući odabir boja, tipografije, ikona i grafičkih elemenata. Cilj je stvoriti dosljedan i prepoznatljiv izgled koji odražava brend.

3. **Izrada prototipova i wireframing:** Prema zahtjevima klijenta, web dizajner izrađuje prototipove ili wireframe-ove koji prikazuju raspored elemenata na stranici. To pomaže u vizualizaciji konačnog produkta prije njegove implementacije.

4. **Optimizacija za mobilne uređaje:** S obzirom na raznolikost uređaja, web dizajner osigurava da dizajn bude prilagođen za različite veličine ekrana i uređaje, posebno mobilne telefone i tablete.

5. **Korištenje grafičkih alata:** Web dizajner koristi različite grafičke alate i softvere, poput Adobe Photoshopa ili Sketcha, kako bi stvorio grafičke elemente potrebne za web stranicu.