Rise of the doodle

Companies are increasingly discovering the power that small illustrations add to their efforts in enhancing their brand messages through creative storytelling. Whether on their websites or through their social media efforts these visual expressions of an idea add a great and unparalleled value. They say a lot about the company using them as well as adding a magical ‘pulling’ power to their blog posts, articles or other marketing efforts.

There are so many different ways of serving up an extra punch to your brand building efforts through storytelling. Illustrations can take on so many forms and so easily conform to brand guidelines such as colour palette and so on - I love creating vector style illustrations with interesting little complexities like texture or lighting or simplified shapes organised in an unexpected way; but the magic of this media is that there are innumerable styles the designer/illustrator can pursue to tell the story. Visit the illustration segment of my portfolio for a peek into vector styles or pen and ink styles. There are so many more ways to create images and I plan on posting up some more variants as I go - so keep an eye for my work. Here, in this post, I've got some doodles that I did recently.

The theme/brief for these ‘doodles’ was ‘Let’s make cloudy magic!’ and is meant to occupy an ambiguous space that encourages teamwork in work tasks and creative or inspired work in the field of cloud computing. They’re meant to be little ‘soundbites’ made to make you smile or to add inspiration when buying into that blog message you’re reading.

One of the magical elements of these kinds of illustrations, and what I mean is these illustrations being increasingly used by companies to tell a story — is that they can be either static or animated. Movement can be subtle or a little more developed. This kind of ‘fun’ will add to your brand message - no doubt about it.

Journey begins with exploring ideas in my sketchbook. I work in a very rough and basic way - just getting the idea down. Refining these ideas into better sketches can happen later, but I just focus on plucking these ideas out of my head and onto paper. As many as I can put down.

sketchbook-doodles.jpg

I then choose the ones I want to take forward and develop, I sketch these ideas directly into photoshop with my Wacom pen using the sketchbook as reference.

sketches-preview.jpg

For these doodles I chose to stay in Photoshop, I digitally inked the sketches and produced variants of the doodle. From plain ‘pen and ink’ to coloured variants. Here are the doodles for ‘Let’s make cloudy magic’:

 Build the cloud together

Build the cloud together

magic-carpet.jpg
 I created this animated sequence in Aftereffects using the photoshop file I created for the static illustration. During the photoshop phase I was sure to put the file together in such a way that I could use it in Aftereffects as an animation.

I created this animated sequence in Aftereffects using the photoshop file I created for the static illustration. During the photoshop phase I was sure to put the file together in such a way that I could use it in Aftereffects as an animation.

I AM the city

Final of ‘I AM the city’. I wanted to combine techniques, to merge images into a kind of parallax, a play between figure and ground and back again. I started painting, rendering her in greys with a singular brush. Allowing my brush strokes to been seen at times. In Taiwan I learnt that temples reflect that the Dragon is on the left and the Tiger is on the right. The centre door is the god’s entrance, while the door on the left is the dragon door and the door on the right is the tiger door. Something I learnt a little too late and got myself a dragon tattooed on my right arm - I guess I could say that I’m always going in. Anyway, I painted a dragon rising out of her jacket, as if the motif were coming alive. It’s smoky and ethereal. The tiger is on the right and still static, maybe it’ll jump into life soon. Colour is worked into the image and the city has been played on top and under the painted base. I’ve painted in defining lines over the top most layer for some definition.

 I AM the city - original illustration

I AM the city - original illustration

 Album cover

Album cover

 m

m

 Base painting illustration and playful variation of colour version

Base painting illustration and playful variation of colour version

WIP - I AM the city

Work in progress for new illustration, hoping to have the final variations up soonish. Still rendering and painting her, she’ll form the base over which I’ll continue to work over. I’ve included a video snippet of the paint process on her face.

I-am-the-city-WIP.jpg

CSS Grids - Web layout moves closer to how a Graphic Designer does grids.

I don't think I've ever spoken to a designer or developer who loves how CSS manages layout issues, we understand it and manipulate CSS to obey us but I think we all dislike how it works. BUT WAIT! The CSS gods have heard our cries, tada! CSS Grids are now gaining widespread support in most if not all browsers - of course I suppose we'll still have to use HTML tables to craft our emails cause email apps are sadly stuck in the dark ages but maybe one day that'll change too. 

Using CSS grids closely resembles how graphic designers approach grids, this means creating layouts are not only easier in HTML/CSS but also mirror how a designer thinks about working with space. All that frustration when building a webpage layout flies out of the window, we can easily port over that mathematical structure you lovingly crafted in your visual design. Here's the HTML I created for a basic structure - bear in mind this was using columns and rows similar to any grid structure I might have built in any other creative app and without manipulating floats or absolute/relative positioning in any way.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
<title>CSS Grids</title>
</head>
<body>
<div class="container">
    <div class="grid header">header</div>
    <div class="grid sidebar">sidebar</div>
    <div class="grid content">content</div>
    <div class="grid extra">extra</div>
    <div class="grid footer">footer</div>
</div>
</head>
</html>

The divs are in a nested structure, the container div will be declared as a grid within the CSS. The classes define the layout for each grid div. The external CSS file uses CSS grids, here is the CSS file content:

.container {
    display: grid;
    grid-template-columns: 1fr 3fr;
        grid-column-gap: 10px;
        grid-row-gap: 15px;
    }
    
.grid {
    background-color: #DC7633;
    color: #fff;
    padding: 25px;
    font-size: 3rem;
     }
     
.header {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 1;
    grid-row-end: 2;
    }
    
.sidebar {
    grid-column-start: 1;
    grid-coumn-end: 2;
    grid-row-start: 2;
    grid-row-end: 4;
    background: #A3E4D7;
    }
    
.content {
    grid-column-start: 2;
    grid-coumn-end: 3;
    grid-row-start: 2;
    grid-row-end: 3;
    background: #a0c273;
    height: 400px;
    }
    
.extra {
    grid-column-start: 2;
    grid-coumn-end: 3;
    grid-row-start: 3;
    grid-row-end: 4;
    background: #D98880;
    }
    
.footer {
    grid-column-start: 1;
    grid-column-end: 3;
    grid-row-start: 4;
    grid-row-end: 5;
    background: #2471A3;
    }

If you copy and paste the two different portions into a .html and styles.css file respectively and then open up the html file in a browser you'll be able to see how I put together a basic structure with CSS grids. Simply.

Read me wax lyrical about grids.

Cool resource on CSS Grids.

Speed sketch, Underpass Taiwan

You would have had to have been to Taiwan to understand how nostalgic highway underpasses make me feel. They're very specific and exploring the length and breadth of the island you go under many of these. They look like the ones in this rough sketch. I used to ride along under one almost everyday. Fond memories of Formosa.

taiwan-highway.png