Deep Red http://deepred.posterous.com Posterous for all DRI teams posterous.com Thu, 23 Jun 2011 05:55:00 -0700 Exhibition Monet 2010 - RMN - Grand Palais - Paris http://deepred.posterous.com/exhibition-monet-2010-rmn-grand-palais-paris http://deepred.posterous.com/exhibition-monet-2010-rmn-grand-palais-paris

Amazing journey

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Wed, 01 Jun 2011 20:17:00 -0700 Plutchikfig6.gif (GIF Image, 494x526 pixels) http://deepred.posterous.com/plutchikfig6gif-gif-image-494x526-pixels http://deepred.posterous.com/plutchikfig6gif-gif-image-494x526-pixels
Media_httpwwwfractalo_ybpwg

better image for the emotion wheel

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 18:57:00 -0700 Optimizing Emotional Engagement In Web Design Through Metrics http://deepred.posterous.com/optimizing-emotional-engagement-in-web-design http://deepred.posterous.com/optimizing-emotional-engagement-in-web-design
Media_httpwwwsmashing_tebsc

A great new way to understand what emotional response communication may get, and plan our messaging with the right emotional tone

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 18:32:00 -0700 Don’t Reinvent the Wheel – 100+ Links of Design Elements and Resources http://deepred.posterous.com/dont-reinvent-the-wheel-100-links-of-design-e http://deepred.posterous.com/dont-reinvent-the-wheel-100-links-of-design-e
Media_httpcdn11stwebd_ktcsm

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 05:01:00 -0700 Five Simple Steps to designing with colour part 3: Colour combinations| Mark Boulton http://deepred.posterous.com/five-simple-steps-to-designing-with-colour-pa-0 http://deepred.posterous.com/five-simple-steps-to-designing-with-colour-pa-0
Media_httpwwwmarkboul_bqiii

Mark Boulton's awesome series on Design

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 05:01:00 -0700 Five Simple Steps to designing with colour part 2: A few basics| Mark Boulton http://deepred.posterous.com/five-simple-steps-to-designing-with-colour-pa http://deepred.posterous.com/five-simple-steps-to-designing-with-colour-pa
Media_httpwwwmarkboul_gamdn

Mark Boulton's awesome series on Design

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 05:00:00 -0700 Five Simple Steps to designing with colour| Mark Boulton http://deepred.posterous.com/five-simple-steps-to-designing-with-colour-ma http://deepred.posterous.com/five-simple-steps-to-designing-with-colour-ma
Media_httpwwwmarkboul_kpjcb

Mark Boulton's awesome series on Design

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 04:55:00 -0700 Five simple steps to designing grid systems – Preface| Mark Boulton http://deepred.posterous.com/five-simple-steps-to-designing-grid-systems-p http://deepred.posterous.com/five-simple-steps-to-designing-grid-systems-p

Five simple steps to designing grid systems – Preface

Following my article in Design in Flight I’ve received countless emails to elaborate, in some way, on how to correctly design grid systems. It’s quite a complicated field and so distilling it into ‘Five Simple Steps’ has proven to be quite tricky, so much so that I thought I needed to write some sort of preface before we get on to the first part.

What is a grid?

Before we even begin to tackle designing grid systems we need to have a basic understanding of what they are, why we use them and where they came from.

In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images. The grid is a child of Constructivist art and came into being through the same thought processes that gave rise to that art movement. Clear links can also be drawn between the Concrete-Geometrical art of the Zurich school in the 1930′s and several notable artists of this movement made important contributions to typography through their fine art.

It was around this period that the grid system moved from the domain of art and into one of typography and commercial design.

It’s about mathematics… mostly

First of all when talking about grid systems we have to mentally separate form and function. We have to think about aesthetics and proportions as a result of considered construction. This can be quite tricky for designers who have been schooled in the ‘you’ll know it’s right when it feels right’ school of composition. But as I’ve written about before, feel is an emotional reaction to construction, to mathematics.

Ratios and equations are everywhere in grid system design. Relational measurements are what defines most systems, from simple leaflet design to the complex of newspaper grids. To design a successful grid system you have to become familiar with these ratios and proportions, from rational, whole-number ratios such as 1:2, 2:3, 3:4 and those irrational proportions based on the construction of circles, such as the Golden Section 1:1.618 or the standard DIN sizes 1:1.4146.

These ratios are ubiquitous in modern society, from the buildings around us to patterns in nature. Using these ratios successfully in a grid system can be the deciding factor in whether or not a design, not only functions, but has aesthetic appeal too.

What is a grid system?

A grid system is a grid design which has been designed in such a way that it can be applied to several different uses without altering it’s form. An example of this would be a grid system for a book whereby you have many different page types – part-opening, title, half-title etc. – and would need only one grid to use on all the page types.

The danger with designing a system to cope with many different varients is complexity. When you add complexity, you decrease usability and there is a danger the grid would become so complex the designer can’t use it. This thought should always be running through your head when designing a grid system – keep it simple, but comprehensive.

Why design a grid system?

It is often said of grid systems that they limit the scope for creativity or leave no freedom. Karl Gerstner, one of Switzerland’s preeminent graphic designers, was aware of this conflict with the designers adoption of grid systems.

The typographic grid is a proportional regulator for type-matter, tables, pictures and so on. It is a priori programme for a content as yet unknown. The difficulty lies in finding the balance between maximum formality and maximum freedom, or in other words, the greatest number of constant factors combined with the greatest possible variability.

The grid is a regulatory system which pre-empts the basic formal decisions in the design process. it’s preconditions help in the structuring, division and ordering or content. I’m not saying a well designed grid will solve all of your compositional problems, far from it, but it goes some way in creating a coherent structure in design which in turn creates the aesthetic values all of us are after in our designs.

The Five Simple Steps

You should now have a clearer understanding of what grid systems are, where they came from and what they should do, if designed well. Within the next Five Simple Steps, I’ll go through the elements which make a successful grid system and how these elements can be brought together to create simple and complex systems which can be applied to a number of media outputs.

The first in the series will be ‘Combining Ratios’

  1. Subdividing ratios
  2. Ratios and complex grid systems
  3. Grid systems for web design: Part 1
  4. Grid systems for web design: Part 2 Fixed
  5. Grid systems for web design: Part 3 Fluid
This entry was posted in Articles, Design, Typography. Bookmark the permalink. on June 26, 2005

Mark Boulton's awesome series on Design - This article has links to others in the series

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 04:54:00 -0700 Five simple steps to better typography – Part 5| Mark Boulton http://deepred.posterous.com/five-simple-steps-to-better-typography-part-5 http://deepred.posterous.com/five-simple-steps-to-better-typography-part-5
Media_httpwwwmarkboul_zfmdn

Mark Boulton's awesome series on Design

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 04:54:00 -0700 Five simple steps to better typography – Part 4| Mark Boulton http://deepred.posterous.com/five-simple-steps-to-better-typography-part-4 http://deepred.posterous.com/five-simple-steps-to-better-typography-part-4
Media_httpwwwmarkboul_jqgyt

Mark Boulton's awesome series on Design

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 04:53:00 -0700 Five simple steps to better typography – Part 3| Mark Boulton http://deepred.posterous.com/five-simple-steps-to-better-typography-part-3 http://deepred.posterous.com/five-simple-steps-to-better-typography-part-3
Media_httpwwwmarkboul_sdchd

Mark Boulton's awesome series on Design

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 04:52:00 -0700 Five simple steps to better typography – Part 2| Mark Boulton http://deepred.posterous.com/five-simple-steps-to-better-typography-part-2 http://deepred.posterous.com/five-simple-steps-to-better-typography-part-2
Media_httpwwwmarkboul_zvemf

Mark Boulton's awesome series on Design

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 04:52:00 -0700 Five simple steps to better typography| Mark Boulton http://deepred.posterous.com/five-simple-steps-to-better-typography-mark-b http://deepred.posterous.com/five-simple-steps-to-better-typography-mark-b
Media_httpwwwmarkboul_iheih

Mark Boulton's awesome series on Design

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink
Fri, 20 May 2011 04:50:00 -0700 50 Graphic Design Theory Lessons – FREE! « Web Design Ideas http://deepred.posterous.com/50-graphic-design-theory-lessons-free-web-des http://deepred.posterous.com/50-graphic-design-theory-lessons-free-web-des
Media_httpwwwwebdesig_jljvg

A crash course in the most basic stuff you want to know about Graphic Design.

Permalink | Leave a comment  »

]]>
http://files.posterous.com/user_profile_pics/1306977/DRI_Twitter.jpg http://posterous.com/users/hesQVBOlkPOSC deepredink deepredink deepredink