How I learnt to love grids

I had a love/hate relationship with grids during my Graphic Design/Art studies, I wasn't the only one. Nowadays my relationship with grids is much more love than hate. A grid of course is just a tool, and learning not to be robotic and mixing things up takes time when working a layout with a grid in mind. Grids are extremely flexible but because they can technically impose order, they can feel like they hamper the freedom of creative flow. This however is only a perception, grids are not meant to be a rigid formulaic mill-stone around your neck but can allow an infinite amount of creative expression when used as a tool. It's that age old maxim: Learn the 'rules' before you are allowed to break them. There's another reason I like working with grids, it's one of my only opportunities to use those Math skills I spent all that time learning over my school career. I find it refreshing to use Math skills in design. The only way to get grids to work for you has very much to do with getting the numbers right, and make sure that the developer you're handing over to understands the dimensions or ratios you have built your design on.

There are many different kinds of grids: single-column, multiple column, modular and Hierarchical grids. They all have contexts where one is better suited to a design than the others. They can be used in almost any project from posters, books, exhibition graphics to websites. So whether in print or on screen, grids are awesomely helpful in creating order and Unity. I've placed the grid and high fidelity design side by side for a proper look at the two. After orientation, research and analysis - as always I begin a design, illustration or animation on paper, thumbnails and sketches. After this conceptual stage, visual designs begin their digital life in their primary transition off of the paper page as a wireframe or low-fidelity version of the design. Iteration towards a high-fidelity design and hand-off depends on what kind of workflow I'm involved in, but the usual deliverables are often involved. Style sheets, marked up designs or elements in a pattern library.

The landing page below is a hierarchical or horizontal grid with the hierarchical groupings in a multicolumn or modular arrangement. If you know what you're looking for you can see the underlying structure. Designers are aware of these tell-tale signs, but most users experience the page sub-consciously, being led or disrupted by the designer's cues. Check out the screen capture to see the page elements up close.

Design Process: eShot images for campaign

Here's a 'behind the scenes' look into creating eShot images for an email campaign. The images were meant to convey the idea that a set of 'new micro sites' were available for viewing across different platforms, from web to mobile. Thus the image was to play an important part in aiding the launch of these 'micro sites' aimed at niche markets. Once initial analysis of the information and parameters of the project is done I'll move onto rapid thumb-nailing and 'form storming'. I'll settle on the most effective thumbs and begin building roughs, collecting possible assets bringing the design to the point where I can start work on the final image. I worked alone on this one, but the process is pretty much similar in a team - only there' a lot more communication, feedback and collaboration. It's fun to work with others, but working alone also has it's pluses.

The process I prefer and always use as my own has a feedback/review stage. This is largely a learning stage for me, I can evaluate my thoughts and processes - think about outcomes and whether I achieved goals, etc. 

The first one of the final images for an email campaign. The image has been 'frankensteined' together as planned from the idea to thumb sketch to final. The images below show some of the elements I 'frankenstiened' aka composited together

The images above show the starting point once I was happy to move forward from thumb and rough -  a white page with a photo of a desktop computer, a screenshot of the web asset, photo stock of company assets to be included within the image, 3d objects of different closures to add to the context of the image, and a WIP (work in progress) shot of the image as I built it from 'scratch'.

The second final image for an email campaign. Same style and treatment.

Again, once I'm happy with the planning and thumb composition I move on to creating the image. The images in the carousel above shows the starting point for the final image - a white page with a photo of a desktop computer, a screenshot of the web asset, I went into the photo studio to take very quick photo assets of crimps and wires, carefully setting them up for the final shot. 

Application of the design process varies depending on what I'm trying achieve, media and format but the principles are always the same.