3. Osnovna vizualna pravila

1. Jednostavnost

Manje je više. Ne pretrpavajte stranice suvišnim elementima, animacijama ili ukrasima koji ne doprinose razumijevanju sadržaja. Svaki element na stranici trebao bi imati svrhu. Ostavite dovoljno praznog prostora (white space) kako bi sadržaj bio pregledan i lakše čitljiv (Clark & Mayer, 2016).

2. Hijerarhija

S pomoću vizualnih elemenata, kao što su veličina fonta, boje, debljina linija ili isticanje tekstova, jasno pokažite što je važno, a što sporedno. Naslovi, podnaslovi i tijelo teksta trebaju biti vizualno različiti kako bi studenti lakše pratili strukturu sadržaja.

3. Kontrast

Kontrast pomaže da se bitne informacije istaknu. Tekst treba biti dovoljno različit od pozadine (npr. crni tekst na bijeloj podlozi) kako bi bio lako čitljiv. Izbjegavajte kombinacije boja s niskim kontrastom, npr. svijetlosiva na bijeloj podlozi (W3C, 2024).

4. Dosljednost

Koristite se istim bojama , tipografijom, ikonama i stilovima kroz cijeli materijal. Dosljedan dizajn omogućuje studentima da se usmjere na sadržaj, a ne na prilagodbu različitim stilovima (Clark & Mayer, 2016).

5. Tipografija

Izaberite jednostavne, čitljive fontove. Preporučuje se koristiti najviše dva različita fonta u jednom materijalu – jedan za naslove, drugi za tijelo teksta. Izbjegavajte previše stilizirane ili ukrasne fontove koji otežavaju čitanje.

6. Boje

Boje mogu privući pažnju, prenositi emocije i pomoći u organizaciji informacija.

Koristite ih pažljivo:

  • birajte ograničenu paletu (2 - 4 boje) - kao pomoć možete s e koristiti alatima za generiranje estetski ugodnih kombinacija poput Coolors, Adobe Color ili Canva Color Palette Generator,
  • pazite na kontrast radi čitljivosti - provjerite ga s pomoću alata poput WebAIM Contrast Checker 
  • izbjegavajte prenaglašene ili prenapadne kombinacije
  • pazite na osobe s poremećajem vida boja (npr. daltonizam) – koristite se i drugim signalima osim bojama (ikonice, uzorke) (W3C, 2024).

7. Slike i grafike

Slike trebaju biti kvalitetne, relevantne i povezane s temom. Izbjegavajte generičke ilustracije koje ne donose dodatnu vrijednost. Dobro odabrane slike mogu razbiti monotoniju teksta, povećati angažman i olakšati pamćenje, ali uvijek trebaju biti u funkciji razumijevanja nastavnog sadržaja. 
Kod grafova i tablica nastojte:

  • pojednostaviti prikaz
  • koristiti se jasnim oznakama legende
  • ne pretrpavati ih podatcima (Mayer, 2021).
Accessibility

Boja pozadine Boja pozadine

Font Font

Veličina fonta Veličina fonta

1

Boja teksta Boja teksta

Font Kerning Font Kerning

Image Visibility Image Visibility

Letter Spacing Letter Spacing

0

Line Height Line Height

1.2

Link Highlight Link Highlight