Grow – Illustration Concepts
As the Grow website is at the minute very text heavy, I’ve decided to experiment with illustrations in order to break up the content. This post will look at the steps I have taken in designing the Grow Characters from Scratch.
Stage One: Sketching
First I do some rough sketching in order to get a feel for the shape, size and features of the characters. This illustration will encompass the notion of multi-ethnicity and sense of community, which are some of Grow’s goals.
As you can see from the sketch below, I’m striving for a heavily stylised and quite abstract cartoon character. I believe this is inkeeping with Grow’s informal and fun attitude.
Stage Two: Mapping out and drawing in Illustrator
In stage I map out the basic shapes in illustrator. In order to keep the charcters as simple as possible, I tend to construct them out of either rectangles or circles. I then customise these shapes by adding or taking away points with the pen tool and reshaping the curves.
More shapes are built up until the basic look of the characters is complete. At this stage I may also add in some simplistic shading and highlighting.
Final Stage: Photoshop
As you can see the characters are quite flat and uninspiring when they come out of Illustrator. I like to use photoshop for colour correction and to add subtle light and shadow to give a sense of depth.
I accomplish this by using the ‘Magic Wand’ tool to select the large blocks of colour in turn. I then use the ‘Burn’ to add in the shadows in the relevant areas. I recommend you use this tool at a low exposure setting around 10 or 20, above this the shadows can start to look a bit harsh. It is best to build the shadows up in layers.
Here’s the final result.
Grow – Email Template Sample
To show how the new ‘Grow’ website will influence other media such as HTML email I have designed a sample.
While social media such as Twitter and Facebook as rocketed in the last couple years I feel there is still a place for promotional newsletters. There is the “emails should be text only” camp and there is the “emails should be just as pretty as the website” camp. I belong to the latter. I’m not alone, quite a few web design heavyweights have recently been involved in creating a range of templates for MailChimp. Showing the good old HTML email isn’t dead yet.
Marking Up and Styling a HTML Email
A different approach has to be taken when coding a HTML email from coding a web side. You can forget all about semantic markup, and all that fancy CSS shizzle is out to. When taking on an HTML email you have to code like it’s 1999.
It all stems from the sheer number of email clients we use, each with their own little quirks. CSS support can vary wildly among the different clients. It’s generally not a good idea to position structural elements with floats, Outlook the most widely use email client doesn’t like them. It’s a lot safer to go old skool and use HTML tables.
It’s not all bad news, most of the text formatting elements of the CSS2 spec is widely supported among clients.
When approaching a HTML email keep in mind it has to work without images. Most clients hide images by default until their explicitly told otherwise, it’s therefore not a good idea to put all your text in one massive image. Apart from risk of the client opening a seemly empty email, the email may never reach the client, getting blocked by spam filters on it’s way in.
Legal Issues
To comply with the Can-Spam Act 2010 your email must contain an unsubscribe link, company email address, telephone number and a reference to when and how the customer signed up to the email. If your business email doesn’t contain these things it’s technically breaking the law.
Using Mailchimp
Mailchimp is great way to have all that legal jargon handled automatically so you can get on with the task of designing the emails. I’ve used it with Artsekta and other businesses in the past. Even the most computer illiterate individual can use Mailchimp. Mailchimp also has the bonus of automatically posting to Twitter and Facebook, saving your client time.
The analytics Mailchimp provides after each email has been sent can be really valuable.
Grow Template
Here’s a screenshot of my ‘Grow’ template, if you want to see the markup have a look here
Grow – Wireframing
In order to sort out the mounds of content provided for the Grow Website, the time has come for a spot of wireframing.
In the past have taken the trouble in drawing out wireframes in Fireworks or Photoshop. As these wireframes don’t need to be presented to anyone and are just a reference for myself I have decided to sketch them out. Here is just a sampling of the many iterations I carried out. I’ll defiantly work with just a Sharpie and sheet of paper again as I found the workflow not only rapid but by thinking was a lot more fluid and structured.
The Home Page
About Us
Learn
The Gardens
Get Involved
News Page
Contact Us Page
Grow Logo – Further Refinement
In this post I will documenting the step by step process of designing the Grow logo from concept to final product.
Step 1. Leaf Construction
This first step took many iterations to get right, both on paper and in Illustrator. I found the most reliable way to draw the leaf was to take a circle shape and fashion it from that. I tried to stick with just four anchor points, any more that this and the leaf lost it’s simplicity and punch.
Step 2. Getting the Stem right
You’ll notice that I decided to shorten the leaf steam, this was because the illusion of the leaf tip curving under was spoiled by the stem going all the way to the top of the leaf. The shortened steam also works best when the image is minimized as it removed visual noise from the leaf tip.
At this juncture I also experimented with the gradient mesh to give the illusion of a three-dimensional shape.
Step 3. Yin and Yang
My intention at this stage was to work on the Yin and Yang theme I had explored earlier in the concept sketches. However, the more I played about with this idea the more I realised it wasn’t working as well as I’d hoped. The leaves appeared too disjointed.
Step 4. Concept Complete
It was at this stage I further explored an idea I’d had in my concept sketches; leaves forming a cycle. This cycle represents among other things, the changing of the season and sustainability. The circle it forms symbolises, the family circle i.e. the community, nurturing and inclusion. The image above shows a very early stage of this concept.
Step 5. Typeface Decision
I then started thinking of typefaces. After a long process of trial and error I discovered Slab-Serifs seemed to fit with the aesthetic I was looking for. I was torn between two in particular, Archer and Museo Slab. What eventually swayed it in favour of Archer was the little terminal on the tail of the ‘g’ and the arm of the ‘r’. To me it looks almost bud like and so is perfectly in-keeping with the logo theme. Because of Museo Slab’s inclusion in Typekit, I’m seeing it everywhere and beginning to tire of it.
The above image shows the planning of how the leaves may replace the O. This took quite a bit of tinkering with the leave sizes and the space between each leaf.
Step 6. Adding detail to the leaves
You’ll notice two things at this stage; I’ve taken the weight down of the typeface and I’ve added shadows to the leaves. I’m now using Archer Extra Light instead of Archer Light. I find that the balance between the leaves and the type is better this way.
Step 7. Removing Detail
I soon discovered legibility issues in the leaves at smaller sizes. Here I’ve simplified the leaves by removing the gradient and shadow. The colours have also be inverted so the stem stakes the higher contrasting colour.
Step 8. Testing in monotone
Here I tried a few tests in a monotone colour and tried to simplify the leaves even further. I got rid of the separate stem colour. With each leaf a solid colour it took the finesse out of the mark. I then hit upon the idea of using a knock out to imply where the stem intercepts the leaf.
Step 9. The final Product in brand colours
here’s the finished logo. I’ve refined the stem knockout so it sits a little better at smaller sizes.
Grow Logo – Early Concepts
Over the last few days I’ve been feverishly drawing Grow, Logo concepts. Here’s a few selected pages straight from the Moleskine.
On this page I have hit upon a couple of different themes you will see reoccurring throughout this series of sketches. The first is the leaf. The leaf in my opinion is the epitome of Grow. The particular leaf shape I have chosen to draw is reminiscent of a heart, symbolising, love, compassion and respect. This page mostly focuses on getting the shape of the leaf just right.
On this page I’ve played with the idea of forming the letter ‘w’ into the shape of a leaf. You’ll notice the cursive style of the lettering, this is something I’m very interesting in pursuing as it represents, friendliness and informality.
Another concept I’ve been playing with is the idea of a circle being formed from leaves. This conjures ideas of the family circle, nurturing and inclusion.
In the top page you’ll see more evidence of the circular theme. Here it has evolved into the leaves forming a ‘Yin and Yang’ shape, this furthers the metaphor; each person in ‘Grow’ comes together to form the whole (community). I’ve also done a quick study of leaf veins.
Grow – Paper Protoyping
In order to get myself started on the ‘Grow’ live project, I’ve decided to partake in a bit of the old paper-prototyping.
Here is a series of mindmaps exploring different parts of Grow. I’m looking for words or ideas that that will lead to great concepts for the branding or Website.
Grow Community Gardens Mindmap
The purpose of this mindmap was to familiarise myself with Grow as an organisation. I’ve brainstormed words and phrases that I think help to describe the ethos of Grow.
I especially like “you don’t have to be Alan Tischmarsh”, punk ethics and get stuck in. These are ideas that I will pursue.
Growing…
Here I set myself the challenge of adding words after the word “growing”, that were in-keeping with the sentiments of Grow.
Organic Gardening
This mindmap was for solely to get me thinking of elements that I could use within the logo. I’m looking for something that is the epitome of Grow.
Grow – Why I’ll submit for consideration
My thoughts on the why spec work is not ‘all bad’ and why I’ll be submitting the ‘Grow’ live project for client consideration.
Over the last few day’s there has been quite a bit of debate among final year IMD students about whether our Live Project is Speculative Work. Module coordinator, Chris Murphy has given us the freedom to decide whether we submit our product for client consideration.
The talented Mr Shearer has put together a poll that highlights the proportion of students which will be submitting and those that won’t. At the time of writing, out of the total number of students that have taken part, approximately will not be submitting.
I just want to put down a few reasons why I don’t see this sort of ‘spec work’ as a bad thing and why I’ll be submitting the finished product for client consideration. It may help those of you that are still on the fence.
‘Grow’ is a non-profit organisation.
A couple of years ago, I had a hand in founding, Glasgow PodcART a non-profit organisation set up to promote grass roots music. From that experience I know how difficult it is to secure funding for even day to day running. The fact is, many small non-profit organisations do not have budgets for extensive branding and web solutions. Many heavily rely upon donations and volunteers.
Would you be happy to donate to a charity if you found out they had used a substantial part of previous donations to pay a creative agency? I know I wouldn’t.
As designers I think it is our civic duty to use our talents for the ‘greater good’ from time to time. Think of your work as a donation.
It’s an Investment
In the current economic climate jobs for graduates in the design industry are few and far between. Often experience is worth a lot more than a first in a degree. Employers are looking for designers, this means they need to see not only how well you can communicate visually but how well you can work with a client.
It’s an open brief
From the first client meeting on Thursday it looks like we have a complete creative control over the branding and web solution. This clean slate gives us a great chance to showcase our talents, without the hassle of sticking to rigid ‘guidelines’. This is a very rare opportunity.
Competition is healthy
I’m a very competitive when it comes to things I enjoy doing. The fact we are all competing for consideration has made me think more deeply about my concepts. I’m being far more critical with concepts rejecting those outright that seem too obvious. I’m looking for something which is going to stand out against 80 other designer’s solutions. This so far has led to some great ideas.
I think it’s also important to remember that competition is a fact of life especially in the creative industry. We are hired and fired based on how well our work stands up against others.
Summing Up
In conclusion I just want to say that I’m against spec work but only up to a point. Each case has to be considered individually. If a multi-million dollar company issued a spec brief, it is unjust and wrong. For small not for profit organisations spec and pro bono work is the only option. It just matter of weighing up how much you believe in their cause.
Grow – Live Project
Today we received this semester’s Live Project. We will be branding and creating a website for ‘Grow Community Garden’
Today we meet Siobhan Craig, the client for this semester’s live project. Siobhan is a representative from Grow Community Gardening Charity. Grow’s mission is to build community by increasing and enhancing community gardening and greening across Northern Ireland.
We’ve been asked to provide branding and ultimately a website with a fully functioning backend. Here’s my notes from the lecture.
Arse hairs courtesy of Mr Tommy Palmer.