How I learnt to love grids by ciro correia

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. Of course alternatively if you are building that email template or web page yourself  it's crucial to understand the units of measure used in html/css and how space is organised within a web page layout using css.

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.

Any designer working on layout in html/css knows how frustrating it can be to build a page or email to accurately reflect the grid or design you've lovingly crafted, understanding how layout works in CSS and how this relates to the html structure allows one to build anything you visualise in your design. However the CSS gods have smiled on us designers lately! CSS Grids brings the way graphic designers work with grids into the web/digital space. CSS grids works on graphic design terms and allows us to divide the webpage space easily in the same way we work with our designs - also making pages responsive is as easy as having a mobile version of the CSS activate on a media query.

I'm one happy designer. See my post on CSS grids.

Design Process: eShot images for campaign by ciro correia

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. 

Visual development via iteration by ciro correia

This post is mostly about how the creative process works. I was going to write about linear perspective too- perhaps another post. I think its true that most people misunderstand how creatives work, hopefully this post helps demystify the magic of creating something out of nothing. If I'm honest, this is the way I've always worked- it's always been this way, intuitive I guess. I've also seen this process and principle taught at tertiary level. I'm not sure if it's said implicitly or implied but iteration is always the key to conceptual development or any other illustration, design or art. Conceptual illustration tends to use iteration at a faster pace, trying not to linger on the details early on. This is the process I live by, whether I'm working on a design, illustration or concept art. My early sketches can't be interpreted by anyone but me so people don't often see them- they're thinking images in which I'm ironing out angles, shapes - compositional stuff. It's fast paced and many times ugly. The more I need to figure out- the 'uglier' the early sketches are. At times I have a clearer beginning idea for whatever reason so the thumbs will look nicer earlier on, because some basics are already sorted I can then I give more to artistic expression and other skill sets. I'm constantly trying to make this gap smaller, I want to get to the point where I have a clear composition or some solid elements to work with so I try produce as many thumbs as possible to iron out issues. Bottom right you'll see these rough sketches, almost doodles in nature. They're for me only, I'll never show these to clients.

Stage two is the point where clients begin seeing my work. They're still rough compositional thumbs but they have enough information to help me decide whether I want to take the image further or not. I choose from the first stage rough thumbs and begin expanding, I'm no longer working from nothing now- I have created my own reference points. The two images at the bottom on the right are expanded thumbs. Thumbs at this stage don't have to be as detailed as these two are but they can be. Out of dozens of 'first pass' rough thumbs I choose only a few which best fit my needs and expand them- meaning I redraw them as fast as I can with as much extra detail as I can on each iteration. Layer upon layer upon layer until I'm happy that I have enough information to use the sketch as reference for the final illustration or perhaps all the client wants are looser conceptual designs then I might not redraw and polish the image but rather take it to the point where the piece communicates enough information to be used as a concept asset. Usually there is a line, or point where the 'sketch' is abandoned and you switch into rendering. It's important to understand that 'sketch' and 'rendering' differ and the difference is in your approach- the difference between using predominately line or shape, tone and colour.

For those of us who create for a living hopefully this will help grow your own process or in the very least ring true. We're all refining and learning even after years of working professionally- so if you feel you have something to add to this topic please feel free to comment and add your viewpoint.