Oblikovanje spletišča

Pri oblikovanju spletišča si prizadevamo za jasno, pregledno in uporabniku prijazno oblikovno podobo. Dobro oblikovana spletna stran ni le estetska, ampak tudi funkcionalna, berljiva, odzivna in dostopna. Uporabnik mora hitro razumeti, kaj je pomembno, kako je vsebina razporejena in kako lahko uporablja posamezne dele strani.

Pri sodobnem oblikovanju spletišča so posebej pomembni:

pregledna postavitev elementov,
jasna vizualna hierarhija,
ustrezna tipografija in dobra berljivost,
smiselna izbira barv in zadosten kontrast,
odzivno prilagajanje različnim napravam,
dostopnost za čim širši krog uporabnikov,
doslednost oblikovnih pravil na vseh straneh spletišča.

Pomni: Oblikovanje spletišča ni samo izbira barv in pisav. Dobro oblikovanje podpira vsebino, usmerja uporabnika in omogoča lažje razumevanje strani.

Osnovna pravila oblikovanja spletišča

Pri oblikovanju najprej določimo, kaj mora uporabnik na strani najhitreje opaziti. Nato temu prilagodimo razporeditev, velikost naslovov, razmake, barve in poudarke. Stran mora biti pregledna tudi takrat, ko jo uporabnik pregleduje na manjšem zaslonu.

Področje	Priporočilo
Postavitev	Elementi naj bodo razporejeni logično in naj sledijo pomembnosti vsebine.
Tipografija	Pisava naj bo čitljiva, velikosti naslovov in besedila pa naj ustvarjajo jasno hierarhijo.
Barve	Barvna paleta naj bo omejena, dosledna in dovolj kontrastna.
Odzivnost	Stran naj se prilagodi telefonu, tablici in računalniku.
Dostopnost	Stran naj bo uporabna tudi s tipkovnico in naj ima dovolj jasno strukturo.

Pozor: Videz strani ne sme poslabšati uporabnosti. Če je besedilo težko berljivo, povezave niso jasno vidne ali elementi niso dostopni s tipkovnico, je oblikovanje neustrezno.

Tipi postavitev spletnih strani

Postavitve ločimo glede na to, kako se stran prilagaja širini zaslona in različnim napravam. V sodobnem spletu se najpogosteje uporablja odzivna postavitev, saj omogoča dober prikaz na telefonih, tablicah in večjih zaslonih.

Tip postavitve	Značilnost	Primernost danes
Statična oziroma fiksna postavitev	Uporablja vnaprej določeno širino, pogosto v pikslih.	Manj primerna za sodobni splet, ker se slabo prilagaja različnim zaslonom.
Fleksibilna postavitev	Uporablja relativne enote, na primer odstotke.	Uporabna, vendar lahko pri zelo ozkih ali zelo širokih zaslonih postane manj pregledna.
Prilagodljiva postavitev	Uporablja več vnaprej določenih različic postavitve pri izbranih prelomnih točkah.	Uporabna, kadar želimo natančno nadzorovati več različic prikaza.
Odzivna postavitev	Združuje relativne enote, prilagodljivo razporeditev in medijske poizvedbe.	Najprimernejša za večino sodobnih spletišč.

Pri odzivnem oblikovanju pogosto sledimo načelu mobile first. To pomeni, da najprej oblikujemo stran za manjše zaslone, nato pa jo z dodatnimi pravili razširimo za večje naprave.

Pomni: Pri odzivnem oblikovanju ne izdelujemo posebne strani za vsako napravo. Namesto tega oblikujemo postavitev, ki se smiselno prilagaja širini zaslona in vsebini.

Bootstrap

Za oblikovanje in postavitev spletnih strani lahko uporabimo odprtokodno ogrodje Bootstrap. Bootstrap omogoča hitrejšo izdelavo sodobnih in odzivnih spletišč, saj vsebuje pripravljen mrežni sistem, številne komponente ter uporabne pomožne razrede.

Bootstrap temelji na odzivnem mrežnem sistemu, ki uporablja vrstice in stolpce. S tem lahko vsebino pregledno razporedimo po strani in jo prilagajamo različnim širinam zaslona.

Primer osnovne Bootstrap mreže:

<div class="container">
   <div class="row">
      <div class="col-md-4">Prvi stolpec</div>
      <div class="col-md-4">Drugi stolpec</div>
      <div class="col-md-4">Tretji stolpec</div>
   </div>
</div>

V tem primeru se stolpci pri srednje velikih in večjih zaslonih razporedijo v tri enako široke dele. Na ožjih zaslonih se lahko postavijo drug pod drugega.

Bootstrap je uporaben takrat, ko želimo hitro izdelati odzivno postavitev in uporabiti že pripravljene komponente, na primer navigacijo, kartice, gumbe, obrazce, opozorila ali modalna okna.

Pozor: Bootstrap ne nadomesti razumevanja HTML in CSS. Čeprav ponuja veliko pripravljenih razredov, mora razvijalec še vedno razumeti strukturo dokumenta, odzivnost, semantiko in dostopnost.

Tipografija

Tipografija pomembno vpliva na berljivost in občutek urejenosti spletišča. Pisava mora biti čitljiva, velikosti besedila pa morajo jasno ločiti naslov, podnaslov, odstavek, opombo in druge dele vsebine.

Pri izbiri pisave lahko uporabimo spletne pisave, na primer prek storitve Google Fonts. Pri tem izberemo le tiste različice pisave, ki jih res potrebujemo, saj preveč različic lahko upočasni nalaganje strani.

Primer izdelave spletišča oblikovanje pisava

V vzorčnem Bootstrap spletišču uporabimo pisavo Roboto. To je sodobna in čitljiva pisava brez serifov, ki je primerna za naslove, navigacijo in besedilo v odstavkih.

Pisavo vključimo v dokument v razdelku <head>, nato pa jo določimo še v CSS kodi.

V glavo HTML dokumenta lahko vstavimo naslednjo povezavo:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">

V CSS kodi pa pisavo določimo na primer tako:

body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}

Priporočila za tipografijo

Za daljša besedila izberemo dobro čitljivo pisavo.
Ne uporabljamo preveč različnih pisav na isti strani.
Velikost osnovnega besedila naj bo dovolj velika za udobno branje.
Med vrsticami naj bo dovolj prostora, da besedilo ne deluje utesnjeno.
Naslovi naj jasno kažejo strukturo vsebine.

Barve

Barve pomagajo ustvariti prepoznavno podobo spletišča, poudariti pomembne elemente in ločiti posamezne vsebinske sklope. Pri izbiri barv moramo paziti, da barve ne zmanjšajo berljivosti.

Dobro je pripraviti osnovno barvno paleto, ki določa poudarno barvo, temnejšo poudarno barvo, nežno ozadje, osnovno barvo besedila in nevtralne barve.

Primer izdelave spletišča oblikovanje barve

V vzorčnem spletišču uporabimo umirjeno Bootstrap barvno paleto z vijoličnim poudarkom. Primer osnovnih barv:

Barva #7952b3 poudarna barva HEX: #7952b3

Barva #553c8b temnejša poudarna barva HEX: #553c8b

Barva #f4f1fa nežno vijolično ozadje HEX: #f4f1fa

Barva #ffffff bela HEX: #ffffff

Barva #2b2b2b osnovna barva besedila HEX: #2b2b2b

Barve lahko v CSS kodi shranimo tudi kot spremenljivke:

:root {
  --bs-accent: #7952b3;
  --bs-accent-dark: #553c8b;
  --bs-soft: #f4f1fa;
  --bs-text: #2b2b2b;
}

Uporaba CSS spremenljivk je koristna, ker omogoča enostavnejše vzdrževanje. Če želimo kasneje spremeniti poudarno barvo, jo spremenimo na enem mestu, nato pa se sprememba uporabi povsod, kjer je spremenljivka uporabljena.

.gumb-poudarek {
  background-color: var(--bs-accent);
  color: #ffffff;
}

.gumb-poudarek:hover {
  background-color: var(--bs-accent-dark);
}

Pozor: Informacije ne smejo biti odvisne samo od barve. Če je na primer napaka označena z rdečo barvo, naj bo dodano tudi besedilo, ikona ali drugo jasno pojasnilo.

Dostopnost pri oblikovanju

Pri oblikovanju ne smemo pozabiti na dostopnost. To pomeni, da mora biti stran uporabna tudi za ljudi z različnimi potrebami in omejitvami. Pomembni so jasni naslovi, dovolj velik kontrast, razumljiva struktura strani, ustrezne velikosti pisave in možnost uporabe strani tudi s tipkovnico.

Posebej pomembno je:

da je kontrast med besedilom in ozadjem dovolj velik,
da povezave niso prepoznavne samo po barvi,
da je fokus pri uporabi tipkovnice jasno viden,
da so naslovi zapisani v pravilnem zaporedju,
da imajo slike smiselno besedilo v atributu alt, kadar slika nosi vsebinski pomen.

a:focus-visible,
button:focus-visible {
  outline: 3px solid #7952b3;
  outline-offset: 3px;
}

Pomni: Dober kontrast, jasna struktura in viden fokus niso pomembni samo za uporabnike s posebnimi potrebami. Pomagajo vsem uporabnikom, tudi pri uporabi strani na telefonu, pri slabši svetlobi ali na manjšem zaslonu.

Priporočila za oblikovanje spletišča

Najprej določi namen strani in najpomembnejše vsebine.
Uporabi jasno vizualno hierarhijo naslovov, besedila in poudarkov.
Ohrani dosledno uporabo barv, pisav, razmikov in gumbov.
Pri odzivnem oblikovanju najprej preveri prikaz na manjših zaslonih.
Za postavitev uporabi sodobne pristope, kot so Bootstrap mreža, Flexbox ali Grid.
Pri barvah vedno preveri berljivost in kontrast.
Stran preizkusi tudi s tipkovnico.

Pogoste napake

Postavitev je oblikovana samo za velik zaslon in se slabo prilagaja telefonu.
Uporabljenih je preveč različnih pisav, velikosti in barv.
Kontrast med besedilom in ozadjem je prenizek.
Povezave in gumbi niso dovolj jasno prepoznavni.
Oblikovanje temelji samo na videzu, ne pa tudi na uporabnosti.
Fokus pri uporabi tipkovnice je odstranjen ali slabo viden.
Bootstrap razredi se uporabljajo brez razumevanja mrežnega sistema.

Nazaj

Naprej