Screen Design Grids Hogeschool Rotterdam Instituut voor Communicatie, Media & ICT Communication & Multimedia Design Jasper Schelling j.a.schelling@hr.nl docent.cmd.hro.nl/scjas
Vorige week, het Screen Design proces 1 Oriëntatie 2 Analyse 3 Structureren en Stroomlijnen 4 5 Categoriseren 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 kan geven. Dit hoorcollege is een wegwijzer in de wereld van de stille kennis Wim Crouwel Co-founder of Total Design Alias Gridnik
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 16:9 2:1 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