Screen Design Grids
Hogeschool Rotterdam Instituut voor Communicatie, Media & ICT Communication & Multimedia Design
Jasper Schelling
[email protected] docent.cmd.hro.nl/scjas
Vorige week, het Screen Design proces
1
Oriëntatie
2
Analyse
3
Structureren en Stroomlijnen
4
Categoriseren
5
Visualiseren
Communication & Multimedia Design — Screen Design
Jasper Schelling
2
Deze week Grids! Grids, in het Nederlands ook wel stramien(en), zijn een veelbesproken onderwerp, maar voor we beginnen, een kleine quiz!
Communication & Multimedia Design — Screen Design
Jasper Schelling
3
Wim Crouwel Alias ‘Gridnik’
Co-founder of Total Design, ‘godfather’ of Dutch Design. Very well known of his functional approach and his grid based designs.
Er zijn boekenkasten vol geschreven over typografie.
Echter… er is niemand die je een formule of vast recept kanWim geven. Crouwel Co-founder of Total Design Alias ‘Gridnik’ Dit hoorcollege is een wegwijzer in de wereld van de ‘stille kennis’
Communication & Multimedia Design — Screen Design
Jasper Schelling
11
Communication & Multimedia Design — Screen Design
Jasper Schelling
12
Maar kolommen en basislijnen zijn veel ouder
zoals bijvoorbeeld bij deze Lutherse bijbel uit 1517. Communication & Multimedia Design — Screen Design
Jasper Schelling
13
Moderne Held
Khoi Vinh - Design Director NY Times Online (2006 — 2010) Communication & Multimedia Design — Screen Design
Jasper Schelling
14
Grids zijn er niet alleen voor Grafisch Ontwerp
Communication & Multimedia Design — Screen Design
Jasper Schelling
17
Communication & Multimedia Design — Screen Design
Jasper Schelling
23
Stramien in identity
“Het gebruik van het stramien is verplicht en het waarborgt de uitstraling van de huisstijl. Het maakt Rotterdam herkenbaar en uniek.” www.rotterdam.nl/rotterdamhuisstijl/ Communication & Multimedia Design — Screen Design
Jasper Schelling
25
Grids op het Web
Communication & Multimedia Design — Screen Design
Jasper Schelling
26
Grid Basics
Communication & Multimedia Design — Screen Design
Jasper Schelling
36
Grids & Verhoudingen 1,6181:1
√2:1
16:9
4:3
1,5:1
Vaak zul je te maken hebben met de bovenstaande verhoudingen Communication & Multimedia Design — Screen Design
Jasper Schelling
37
Magische Getallen Uit hoeveel kolommen bestaat een goed grid? Wat moet de breedte zijn van de units? Hoe past beeld in het grid?
Communication & Multimedia Design — Screen Design
Jasper Schelling
38
Twaalf, het Tovergetal.
Vuistregel, goeie grids bestaan in veelvouden van drie of vier. Twaalf is ideaal, omdat het een vermenigvuldiging van drie en vier is. Communication & Multimedia Design — Screen Design
Jasper Schelling
39
Twaalf, het Tovergetal.
Bijvoorbeeld, drie kolommen van vier units.
Communication & Multimedia Design — Screen Design
Jasper Schelling
40
Twaalf, het Tovergetal.
Twee kolommen van zes units Communication & Multimedia Design — Screen Design
Jasper Schelling
41
Twaalf, het Tovergetal.
Vier kolommen van drie units. Communication & Multimedia Design — Screen Design
Jasper Schelling
42
Twaalf, het Tovergetal.
Zes kolommen van twee units. Communication & Multimedia Design — Screen Design
Jasper Schelling
43
Twaalf, het Tovergetal.
En zo kun je eindeloos variëren. Communication & Multimedia Design — Screen Design
Jasper Schelling
44
Grid Resources
Communication & Multimedia Design — Screen Design
Jasper Schelling
45
Maar eerst, een eigen grid
Communication & Multimedia Design — Screen Design
Jasper Schelling
52
Hoe maak je je eigen grid? Stap 1: Units vaststellen Stap 2: Baseline vaststellen Stap 3: Fields (velden) vaststellen Stap 4: Kolommen bepalen Stap 5: Regions (gebieden) bepalen
Communication & Multimedia Design — Screen Design
Jasper Schelling
53
Gridlingo: • Unit • Columns • Regions • Fields • Baseline
Grid
• Gutter • Margin • Padding • Element • Modules
Communication & Multimedia Design — Screen Design
Jasper Schelling
54
Units Units zijn het kleinste verticale deel van de pagina (oftwel, units meet je in de breedte), waarop de kolommen in de pagina gebouwd zijn. Units zijn meestal te smal om text in te passen.
Communication & Multimedia Design — Screen Design
Jasper Schelling
55
Columns (Kolommen) Kolommen zijn groepen van units, gecombineerd zodat er werkbare gebieden ontstaan voor de presentatie van inhoud. De meeste textkolommen, hebben bijvoorbeeld twee units of meer nodig om te kunnen gebruiken. Een gridsystem met zestien units kun je combineren tot acht kolommen van twee units, of vier kolommen van vier units, enzovoorts.
Communication & Multimedia Design — Screen Design
Jasper Schelling
57
Baseline Grid
Communication & Multimedia Design — Screen Design
Jasper Schelling
59
Fields (velden) Velden zijn horizontale verdelingen van de pagina, (oftewel, je meet ze in de hoogte). Velden helpen je als ontwerper om elementen op de Y-as te plaatsen. Je kunt ze op vele manieren uitrekenen, maar de meest effectieve methode is gewoon de gulden snede.
Communication & Multimedia Design — Screen Design
Jasper Schelling
61
Vervolgens verdeel je met de regel van derden
Communication & Multimedia Design — Screen Design
Jasper Schelling
63
Regions (Gebieden) Regions zijn gebieden van gelijksoortige kolommen die de onderdelen van de pagina vormen. Bijvoorbeeld, de eerste vier kolommen van een pagina worden gebruikt om inhoud weer te geven, en de andere kolommen worden gebruikt voor navigatie, instellingen, etc.
Communication & Multimedia Design — Screen Design
Jasper Schelling
66
Gutter Gutters zijn de lege ruimtes tussen de units en de kolommen. Als je units combineerd tot kolommen absorberen ze de tussenliggende gutters, maar niet de ruimte links van de meest linkse unit, of de ruimte rechts van de meest rechtse unit.
Communication & Multimedia Design — Screen Design
Jasper Schelling
68
Margin & Padding Margins zijn de ruimtes buiten een unit of een column, Padding is ruimte binnen een column. Margins worden meestal gebruikt om gutters te maken, terwijl padding vaak gebruikt wordt om een kleine, zichtbare inset te maken bij een blok text, of een beeld in een column.
Communication & Multimedia Design — Screen Design
Jasper Schelling
70
Playing with the system
Communication & Multimedia Design — Screen Design
Jasper Schelling
71
Grids zijn een speelveld, geen gevangenis!
Communication & Multimedia Design — Screen Design
Jasper Schelling
72
“The grid system is an aid, not a guarantee.”
Josef Müller-Brockmann Communication & Multimedia Design — Screen Design
Jasper Schelling
75
“The grid system is a game, not a dogma.”
Bas Leurs Communication & Multimedia Design — Screen Design
Jasper Schelling
76
