Mājas lapas IZKĀRTOJUMS no pamatiem
Šī programma pēta, kā lapas struktūra ietekmē uztveri — kur acu ceļš apstājas, kur tas turpinās, kā elementi elpot kopā.
Programmas saturs
Struktūra kas strādā
Izkārtojums nav dekorācija — tas ir loģika, kas nosaka, ko lietotājs pamana pirmais un ko aizmirst. Šeit mācāmies to lasīt un veidot.
SazinātiesVizuālā hierarhija
Kā lielums, kontrasts un pozīcija veido lasīšanas kārtību.
Telpiskums
Atstarpes kā aktīvs dizaina elements.
Adaptīvais režģis
Izkārtojums, kas nezaudē loģiku nevienā ekrāna izmērā.
Izkārtojuma domāšana
3 lekcijasPirms pirmās rindkopas — kādēļ lapas struktūra veidojas tieši tā, kā tā veidojas. Šeit iepazīstamies ar Gestalt principiem un to, kā smadzenes interpretē telpisko sakārtojumu.
- Gestalt principi vizuālajā uztvērumā
- Redzes kustības ceļi: F-modelis un Z-modelis
- Atstarpe kā komunikācijas rīks
CSS Grid un Flexbox dziļumā
5 lekcijasTehniskie pamati, ko bieži māca nepareizi — šeit tos aplūkojam caur reālu lappušu piemēriem, nevis abstraktām shēmām.
- Grid areas un nosaukumu sistēma
- Flexbox: wrap, grow, shrink scenāriji
- Ligzdošana bez haosa
- Kļūdas, kas parādās tikai mobilajā skatā
Tipogrāfijas izkārtojums
4 lekcijasTeksts nav tikai saturs — tas ir forma. Šajā modulī strādājam ar rindu garumu, burtu atstarpi un rindstarpu kā vizuāliem lielumiem.
- Optimāls rindu garums dažādiem ekrāniem
- Tipogrāfiskā skala: kā izvēlēties izmērus
- Virsrakstu un pamatteksta kontrasts
Komponentu sistēmas
4 lekcijasKā veidot atkārtoti lietojamus izkārtojuma blokus, kas saglabā vizuālo loģiku pat tad, kad saturs mainās.
- Kartes, saraksti, tabulas — izkārtojuma varianti
- Spacing sistēma ar skaitliskiem ierobežojumiem
- Responsīvie breakpointi ar jēgu
Projekts: pilnīga lapa
8 lekcijasNoslēguma daļā katrs students izveido vienu pilnīgu lapas izkārtojumu — no sākotnējā zīmējuma līdz pabeigtam HTML/CSS kodam.
- Wireframe uz koda pārnešanas process
- Pārskatīšana un kritika grupā
- Pieejamības pārbaude ar reāliem rīkiem
- Dokumentācija un nodošana