1. Refactoring UI - Introductie
Starten van nul
Wanneer je begint met een design van een Je start met de features
site, waar start je dan?
Je hebt een feature in gedachten, wat doe je Ruwweg schetsen hoe de feature eruit gaat
als volgende? zien
Details komen later: lettertypes, schaduwen,
iconen,... zijn secundair en komen later
- Wacht met kleur: laat grootte,
witruimtegebruik en contrast het
werk doen!
Wanneer schakel je van wireframing naar Van zodra het idee helder genoeg is.
designen?
“Be a pessimist”
“Design the smallest useful version you can
ship”
“Nice to haves” kunnen later volgen, begin
met essentie
- Kies een persoonlijkheid voor je
design: font, kleur, border
radius/afgeronde hoeken, taal
Beperk je keuzes: er bestaat een
gigantisch spectrum aan mogelijkheden
in ieder deelbeslissing bij het designen
- Definieer een systeem: font size, font
weight, line height, color, margin,
padding, width, height, box shadows,
border radius, opacity,...
Hiërarchie bepaalt alles
Visuele hiërarchie
Hoe belangrijk de elementen in een interface eruit zien in verhouding, hoe belangrijk ze werkelijk
zijn. Op welke manier kunnen we iets laten opvallen?:
- Hiërarchie grootte is niet alles - Hiërarchie labels zijn de laatste
(pas ook de weight aan) oplossing
Soms zijn labels verwerkbaar tot
leestekst
Voor specsheets zijn ze wel OK
- Hiërarchie de-emphasizing
, Wat is visueel het belangrijkste? Wat is inhoudelijk het belangrijkste?
- Hiërarchie semantiek is secundair - Hiërarchie primair, secundair en
(Het is belangrijker dat dingen duidelijk tertiair knop
en visueel logisch zijn, dan dat ze
Save Save Safe
officieel perfect correct benoemd zijn)
Starten van nul
Wanneer je begint met een design van een Je start met de features
site, waar start je dan?
Je hebt een feature in gedachten, wat doe je Ruwweg schetsen hoe de feature eruit gaat
als volgende? zien
Details komen later: lettertypes, schaduwen,
iconen,... zijn secundair en komen later
- Wacht met kleur: laat grootte,
witruimtegebruik en contrast het
werk doen!
Wanneer schakel je van wireframing naar Van zodra het idee helder genoeg is.
designen?
“Be a pessimist”
“Design the smallest useful version you can
ship”
“Nice to haves” kunnen later volgen, begin
met essentie
- Kies een persoonlijkheid voor je
design: font, kleur, border
radius/afgeronde hoeken, taal
Beperk je keuzes: er bestaat een
gigantisch spectrum aan mogelijkheden
in ieder deelbeslissing bij het designen
- Definieer een systeem: font size, font
weight, line height, color, margin,
padding, width, height, box shadows,
border radius, opacity,...
Hiërarchie bepaalt alles
Visuele hiërarchie
Hoe belangrijk de elementen in een interface eruit zien in verhouding, hoe belangrijk ze werkelijk
zijn. Op welke manier kunnen we iets laten opvallen?:
- Hiërarchie grootte is niet alles - Hiërarchie labels zijn de laatste
(pas ook de weight aan) oplossing
Soms zijn labels verwerkbaar tot
leestekst
Voor specsheets zijn ze wel OK
- Hiërarchie de-emphasizing
, Wat is visueel het belangrijkste? Wat is inhoudelijk het belangrijkste?
- Hiërarchie semantiek is secundair - Hiërarchie primair, secundair en
(Het is belangrijker dat dingen duidelijk tertiair knop
en visueel logisch zijn, dan dat ze
Save Save Safe
officieel perfect correct benoemd zijn)
