Osnove interaktivnih med a

P1

ij
• Artboards
• Grid
• Tipografska skala
• Stilovi
Artboards
 To understand arboards…
you need to understand devices.
To understand arboards…
iPhone: 5px Android: 4px
Tipografska skala
Screen fonts
Print vs Screen
Material design typographic scale

Tester
Line height
Figma Stilovi
Color style Component Component
Master Child

Button Button

Button

Button
Color style Component Component
Master Child

Button Button

Button

Button
Color style Component Component
Master Child

Button Button

Button

Button
Typography Component Component
style Master Child

Button Button Button

Button

Button
Typography Component Component
style Master Child

Button Button Button

Button

Button
Typography Component Component
style Master Child

Button Button Button

Button

Button
 Boje
Tipogra ja
Fill
Outline
Efekti
fi
Zadatak
P1
Zadatak
P1
• Napraviti artboard za vaš mobilni uređaj, tablet i desktop verz u
• Na kreirane artboarde prim eniti odgovarajući grid
• Pripremiti tipografsku skalu
• Kreirati stil za tipogra ju i grid
fi
ij
ij
Protips
Artboard
Radite artboard za vaš uređaj ili kao safe opc u odaberite:
iPhone 11 Pro: 375 x 812
Android: 360 x 800

Tablet: 768 x 1024

Desktop: 1440 x 1024 ij
Protips
Grid
Desktop Mobile
Columns count: 12 Columns count: 4
Column width: 75 Column width: 75
Gutter: 24 Gutter: 16
Protips
Tipografska skala
Header
Title
Subtitle
Body Big
Body Regular
Caption
Button
 Pitanja?

Emil Flatz
e atz@arhitekt.hr

Luka Perić
lperic@arhitekt.hr

Kat a Malešević
kmalesevic@arhitekt.hr
fl
ij