Keeping my eye in, quick speed paint. 1 or 2 hours.
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.
I wonder if anyone will get this un-intended joke in the title?
Did this pencil test a while ago for Monster Cup of Coffee, finished the final now. Assets created in Illustrator. Animated and coloured in Toonboom, composited in After Effects.
This is a 9 second clip from the animated storyboard for Episode 1. I've named the series: 'Tales from a Sunless Sea'.Read More
Screen capture of UX, taking user journey from home page through to the product page. A new project up on my Graphic Design portfolio. Graphic Design Portfolio
Anyone working on a prototype knows how Sketch has made things easier, workflow from research, design, prototype to handoff. I've been using Adobe XD recently which feels like Adobe is finally offering a great alternative to Sketch without the need for plugins to achieve a good working prototype. Granted, there is still some work to be done before XD gets on par with Sketch- but they're getting there fast. An obvious plus for XD is that Illustrator and Photoshop are part of the package, being part of the same software family. I'm looking for the ability to more easily integrate Photoshop and illustrator into my workflow if need be, without complicating XD's light-weight feel. Another handy thing that would be nice to see incorporated into XD is a hand-off with online style guide and inspector feature (apparently this is on the way). Prototyping feels sublime, I usually have one monitor open on design view and the other in preview mode. The experience is satisfying as you see things update in 'real-time'. More prototyping tools and functions would be a great addition as well, but I think most would agree that Adobe XD is on the right track.
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 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'.
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.