Before I share the details of my journey, I’d like to add that the two books mentioned above were annoyingly good. Annoying in the fact that after reading each page I had to put the book down and try out what I’d just read.

The Objective

I was getting tired of my old site. There was content and functionality on there that I didn’t like and my analytics suggested that users were not finding certain things useful either. As well as the obvious responsivness, I wanted to:

• Reduce HTTP requests
• Simplify core colour palette to use a single green colour and black
• Develop stronger visual identity
• Improve typographical hierarchy
• Reduce portfolio items to better demonstrate my competencies and skills
• Start to use HTML5 markup standards
• Improve mobile and tablet usabilty

Reducing HTTP requests

My old site had a bunch of plugins activated so I culled all but the ones that I really thought were essential. I was happy to see jQuery Colorbox go as it added a huge chunk of code to each of my pages and I didn’t feel that the functionality was needed any longer for my responsive site. I just removed image dimensions throughout and used:

img {
width: 100%;
height: 100%;
}

The CSS above allows my images to scale depending on the users screen resolution.

I also removed a lot of the single image files that were used in my CSS and combined to create sprites e.g. the icons I use for my social links are actually one file and the CSS positions it accordingly.

Sprite:

CSS example:

.social-linkedin a {
float:left;
display:block;
width: 36px;
height: 36px;
margin-right:8px;
padding:0px;
text-decoration: none;
background-image: url(images/social-sprites.png);
background-repeat: no-repeat;
background-position: -141px 0;
-moz-transition: all 0.2s ease-in 0s;
-webkit-transition: all 0.2s ease-in 0s;
opacity:0.6;
filter:alpha(opacity=60);
}

So you’ll notice that the class above will only show the LinkedIn icon due to the overall width and height and the background position of the image. My CSS uses a different class for each icon but each time the same ‘social-sprites.png’ is used.

For my existing video content I added the following CSS (found here):
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I then wrapped my video embed code like this:
<div class="video-container">
<iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
</div>

By deactivating lots of my previous plugins I’ve also managed to limit the number of CSS files used in my site. I can still reduce this down to one single file but at the moment, the plugin that creates my page numbers (on my blog list page and search results) also uses another CSS file.

I also removed lots of content from the sidebar (Facebook widget, generic text, blog categories) which has helped to removed page bloat.

Core colour palette and visual identity

My old site used multiple shades of green and I didn’t feel it was working very well. I’d also introduced a third purple colour but wasn’t happy with that.

For the new design I limited myself to a single green colour value (#6ECF50) and then solid black. This helped me create a stronger visual identity and also added more contrast which was one of my other objectives. My old site used more washed out greens and was a bit inconsistent.

I used the same colour values for my logo re-design and I wanted to create a logo that worked well as a central asset and was high contrast.

Improve typographical hierarchy

I’m a big fan of Typekit and I use their font service for my custom fonts. My H1 and H2 tag use League Gothic. I use H1 for all my page headings and H2 for sub headings. Any other heading that gets used in a page is simple wrapped with a tag. My body text is set at 14px and uses a font family or Helvetica, Arial, Lucida Grand and then sans-serif. I set the body text to a very dark grey (#333333) rather than black to help with readability – I just feel it reads better than using a solid black). I use a larger font for the date (18px) and lighter shade of grey again (#666666) to maintain the content hierarchy. For links I use my same green value (#6ECF50). By simplifying my font styles I hoped to meet the objective of improving my typographical hierarchy.

Your thoughts and ideas are so different to those of normal people that interaction in the form of conversation or debate with said normal people can be almost impossible. Sure, you do a good job of producing things for normal people but that doesn’t make you normal and the production line is far from easy. If you were normal, you’d have no idea what it was you were making or who it was for.”

Look what I’m making for you

I designed a logo for a client recently and I thought the idea I came up with was great. The design ticked all the right boxes (or so I thought) but what excited me most about it was it’s versatility. I could see parts of the logo that would really develop the clients visual identity and I felt it would work well across many mediums. The logo worked well big, small, reversed and in full colour. The icon used in the logo could be used on it’s own to enhance branding and create something which I felt was a modern and forward thinking design.

Great. Awesome. Cool. Whooppeedooo. These are the words I didn’t hear upon presenting the logo in it’s early stages. I don’t remember the exact words but the general feeling was fairly underwhelming, there was possibly the mention of not liking the colour but I don’t remember exactly. What I do remember was the client clearly not sharing my excitement and enthusiasm for the design.

What was I thinking?

See, I’d made a mistake with my design process as I wanted to make my client feel empowered and involved with what I was doing. I think this is normally good practice with larger projects that are slightly more evolved but when it comes to concepts and ideas it’s important to remember that you and I are abnormal. All those ideas and thoughts of clever logo usage and evolution of the clients visual identity are all well and good, but they are of no use to anyone except you whilst they bounce around your abnormal head. I un-fairly expected my client to share my design vision when showing them where I was at with their logo in it’s infancy – What was I thinking?

I should add that I don’t normally work like this. I think I must have read an article somewhere about involving clients in your design process and decided to give it a try. As I mentioned before I’ve no doubt this practice works in certain situations but don’t think for one minute other people will see what’s not there. I saw it, and I’m sure you would have seen it (at least I hope you would have) but we are a bit abnormal upstairs when it comes to this sort of thing remember.

Don’t fix it if it aint broken… oh wait, its broken

I’m going back to my tried and tested way of doing things, especially with logo design. Projects are like child births – the initial plan is pretty much the same but they all end up different in the end. I would suggest the following when it comes to presenting your ideas:

Keep certain stuff back from the client – they don’t need to see the nuts and bolts and it will probably have a negative impact on the whole project. Don’t forget that they are paying you to do something that they can’t do and by involving them too much might make them think they need to, or are being encouraged to chip in – even worse, they might think you are ballsing the whole thing up.

Now back to your felt-tips, weirdo…

There are times when straight up greys just aren’t working with a design and appear to making the layout flat and lifeless. If you reach this point then it might be worth introducing a very subtle tint of one of your other primary or secondary colours into the grey.

I use Photoshop to mock-up designs so the images below show how I use the eyedropper tool to select a colour value that shares the same contrast as my original grey but also includes a very subtle hint of my secondary colour (in this case green).

Original grey colours

These original greys appeared too flat and didn’t work well with the overall colour harmony.

Tinted grey colours

The new colour values share the contrast but have subtle hints of my secondary (green) colour.

Other sites using tinted greys

http://unfold.no

http://typekit.com/libraries/full (used in the dark font display menu bar)

http://www.egopop.net/

http://nizoapp.com/

Tips

– Keep the colour tints really subtle i.e. just about noticeable
– Technique works best for designs that only use a 2 or 3 colour hierarchy
– Experiment with the tint and keep reviewing the overall design
– A little bit of ‘noise’ texture on the greys can also help lift the design

I’m on the look-out for other sites that use greys well so if you know of any please do comment with a link below (thanks).

See full size on Flickr here

Structuring the guide

The guide was structured as follows:

• Anatomy
• Colour versions

How to use

• Spacing
• Sizing
• Background

File formats

• Supplied formats
• What should I use?
• How not to use the logo

Anatomy

This section breaks the logo down and details each part. Colour values for both print and screen (Pantone, CMYK, HEX and RGB) were included and in this case I also listed the fonts used in the logo.

Colour versions

For this particular logo design I provided 3 colour versions of the same logo design. The versions were full colour, black and reversed (white). For this section of the guide I illustrated these so that it was an easy reference for the client.

How to use

The how to use section details correct use of spacing, sizing and selecting the correct logo depending on the background.

Spacing
Here I detail what the minimum clearance should be from the edge of the logo to edge of the container it will be used in. I also suggest how the logo should be placed on a page or document.

Sizing
Details on the minimum size the logo should used at in both pixels and millimetres.

Background
When the logo will be used on a coloured background I suggest which version of the logo should be used. I also include examples.

File formats

The logo was supplied in a number of different file formats for web and print use. This page details the file names and also use thumbnails for easy reference.

What should I use?
To make it easy for the client to choose which file format should be used in certain situations, I included a page with examples.

How not to use the logo
To finish the document I included a page with some example thumbnails of how the logo shouldn’t be used. This included things like squashing the logo, using incorrect spacing or changing the logo colours.

Conclusion

Delivering these documents with your finished logo design can add a great deal of value for the client. When dealing with larger companies it can be handy for the client to make this document available internally to avoid mistakes being made.

View Larger Map

There has been a poster up recently which caught my eye. The poster is for a local Fruiterers and Florist called David Rhodes and David has a few outlets around Brighton including one on the street where I live. I know he sells good stuff as I’ve seen the quality of his stock, but if I didn’t know that and the poster was the first experience I’d had of his business, I wouldn’t get that message.

The poster is so overloaded with text content that it’s pretty hard to even see what it’s advertising. Even the web address forms a kind of optical illusion and makes reading it impossible because it’s so long.

Can the poster be improved?

So we have an idea of what’s wrong with the poster:

• Too much text content
• Too little emphasis on what is being advertised
• Incorrect importance given to key information
• Small images
• No directions to shops
• Hard to find contact details

The first thing I’m going to do is strip the text content right back. My new main text content will be as follows:

David Rhodes – Award winning Fruiterers and Florist
Supplying Sussex with Fruit, Vegetables and Flowers for nearly 30 years

The secondary ‘next step’ information will be as follows:
Drop in to your nearest store for a full range of fruit, vegetables, flowers and fresh organic produce (arrow right). 300 yards and second right on Preston Circus. Others stores on Portland Road and Western Road in Hove too.

I would word other contact information like this:
Shop online at drfruit.co.uk (new domain) or call 01273 325998. Wholesale to caterers also available.

Now that I have my first draft text written, I’d start to think about the design. I already know that I want to use much bigger and better quality photos. Close up professional photography of fruit and veg would make it much more obvious what was being advertised and get the message across quicker. With bigger budgets you can get your own photography commissioned which would probably produce really good results, but as this is a hypothetical experiment (I haven’t been commissioned by David Rhodes), lets head over to istockphoto.com and see what stock photography is available: http://www.istockphoto.com/search/text/fruit/source/basic/#/f40ac8

I’m happy with this photo. It shows a good range of fruit, looks fresh and has plenty of colour. I’m not going to worry too much about the flowers, nuts and garden centre items as I’d like to concentrate on the main aspect of David Rhodes’ business to keep the message clear.

The first draft of the new poster looks like this:

Conclusion

Most of the tweaks have come about from re-writing the copy. Whilst I’m not a marketing expert I did feel the original poster had too much copy. I also felt the the ‘next step’ or ‘call to action’ points were non existent or unclear in the original. The main problem though was the first visual experience of the original poster didn’t suggest what the advertisement was about. I’m hoping that by simply using a bigger image of the focus of the business, the poster has more impact.

Let me know what you think by commenting below.

In my experience attaching a few jpegs to an email with a short “here are my ideas…” message doesn’t normally cut it. You have spent time on your ideas and looked at various options and applications of the logo so it’s important that you communicate that information in a visual way.

I normally provide the client with a maximum of 3 ideas for their logo. I try to stick to a similar idea and colour scheme but make them different enough to show some exploration i.e. don’t just show a different font or colour scheme.

For the purpose of this blog post I’ll assume that you are presenting your ideas remotely in the form of a PDF but if you do have the opportunity to present face-to-face, still produce a PDF, but also make print outs of each page and mount them onto Foam Board at A3 size. You can email them the PDF after the presentation.

Layout of your PDF presentation

The first page in your PDF should be a plain black or white page with the project name, your clients name and the date.

Page 2: A simple paragraph of text summarising the brief

Page 3: Your prefered logo design (on the colour background you assume it will be used on most)

Page 4: Your second favourite design

Page 5: Your least favourite design

Page 6: Your preferred logo design in full colour, single colour and reversed out

Page 7: Your colour palette and perhaps some simple ideas behind the designs

Page 8: The logo mocked up in various applications. Be mindful of where you choose to mock the logo up and think about your clients business. No point in putting the logo onto a t-shirt if your client is a lawyer for example.

Page 9: Your contact details

The info on page 8 will be of great use to your client as it’s sometimes difficult for people that aren’t designers to visualise how and where the logo will be used. By spending a bit longer on this page you find yourself winning a little extra business in the longrun.

Putting your contact details on the last page is good practice as you never know where the PDF might end up. This might be another opportunity for promoting yourself to whoever your client chooses to share the PDF with. It might sound odd but I guarantee your client will share that PDF with their friends, family members and colleagues to canvas opinion.

Each scenario is different and this is just a suggested way of presenting but here are some brief tips:

Try not to

• present too many ideas, it will confuse the client
• although not presenting enough ideas with little backup info may lead your client to think you haven’t thought about the project
• Be too technical i.e. listing Pantone colours, HEX codes and dimensions should be left for the style guide

Try to

• be clear in your thought process
• support ideas with research
• explain colour choices
• show logos in use in relevant ways

Have you got any good tips for me? What works or doesn’t work for you? Please comment below.