Screen Design Grids. Jasper Schelling docent.cmd.hro.nl/scjas

Transcriptie

1 Screen Design Grids Hogeschool Rotterdam Instituut voor Communicatie, Media & ICT Communication & Multimedia Design Jasper Schelling docent.cmd.hro.nl/scjas

2 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

3 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

4

5

6

7

8

9 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.

10 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

11 Communication & Multimedia Design Screen Design Jasper Schelling 11

12 Communication & Multimedia Design Screen Design Jasper Schelling 12

13 Maar kolommen en basislijnen zijn veel ouder zoals bijvoorbeeld bij deze Lutherse bijbel uit Communication & Multimedia Design Screen Design Jasper Schelling 13

14 Moderne Held Khoi Vinh - Design Director NY Times Online ( ) Communication & Multimedia Design Screen Design Jasper Schelling 14

15

16

17 Grids zijn er niet alleen voor Grafisch Ontwerp Communication & Multimedia Design Screen Design Jasper Schelling 17

18

19

20

21

22

23 Communication & Multimedia Design Screen Design Jasper Schelling 23

24

25 Stramien in identity Het gebruik van het stramien is verplicht en het waarborgt de uitstraling van de huisstijl. Het maakt Rotterdam herkenbaar en uniek. Communication & Multimedia Design Screen Design Jasper Schelling 25

26 Grids op het Web Communication & Multimedia Design Screen Design Jasper Schelling 26

27

28

29

30

31

32

33

34

35

36 Grid Basics Communication & Multimedia Design Screen Design Jasper Schelling 36

37 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

38 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

39 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

40 Twaalf, het Tovergetal. Bijvoorbeeld, drie kolommen van vier units. Communication & Multimedia Design Screen Design Jasper Schelling 40

41 Twaalf, het Tovergetal. Twee kolommen van zes units Communication & Multimedia Design Screen Design Jasper Schelling 41

42 Twaalf, het Tovergetal. Vier kolommen van drie units. Communication & Multimedia Design Screen Design Jasper Schelling 42

43 Twaalf, het Tovergetal. Zes kolommen van twee units. Communication & Multimedia Design Screen Design Jasper Schelling 43

44 Twaalf, het Tovergetal. En zo kun je eindeloos variëren. Communication & Multimedia Design Screen Design Jasper Schelling 44

45 Grid Resources Communication & Multimedia Design Screen Design Jasper Schelling 45

46

47

48

49

50

51

52 Maar eerst, een eigen grid Communication & Multimedia Design Screen Design Jasper Schelling 52

53 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

54 Gridlingo: Unit Columns Regions Fields Baseline Grid Gutter Margin Padding Element Modules Communication & Multimedia Design Screen Design Jasper Schelling 54

55 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

56

57 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

58

59 Baseline Grid Communication & Multimedia Design Screen Design Jasper Schelling 59

60

61 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

62

63 Vervolgens verdeel je met de regel van derden Communication & Multimedia Design Screen Design Jasper Schelling 63

64

65

66 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

67

68 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

69

70 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

71 Playing with the system Communication & Multimedia Design Screen Design Jasper Schelling 71

72 Grids zijn een speelveld, geen gevangenis! Communication & Multimedia Design Screen Design Jasper Schelling 72

73

74

75 The grid system is an aid, not a guarantee. Josef Müller-Brockmann Communication & Multimedia Design Screen Design Jasper Schelling 75

76 The grid system is a game, not a dogma. Bas Leurs Communication & Multimedia Design Screen Design Jasper Schelling 76