Sticky by my orignal point

I still believe that this case study has been some what of an anomaly though. If you give clients several completely different iterations of a potential design more often than not you’ll be creating a rod for your own back. I’m still interested to know about any of your experiences, or whether you’ve been in the same or similar situation. Let me know in the comments.

The chosen design

Here is the chosen design. I’m really chuffed they went with this one. The others (althought great designs) were much more conservative and definitely sat on the fence.

Throughout the logo design phase of the project this client had always expressed a wish for something a little bit different. We did that with the custom typeface used in the logo and I think this layout will set them apart in their field. Its definitely them sticking their necks out a little bit and stepping away from the norm of a recruitment company’s website.

The projects progress…

The project is coming together nicely and as far as I know has been handed over to the developers to work their magic. Yes, we’re integrating our bespoke CMS which is tailored specifically towards recruitment companies.

I’ve also been working on other aspects of the branding, such as business cards and letterheads. Once they’re all finalised I’ll post them here to see what you guys think. Its my first full identity creation for a company so I’m really excited to see it all completed!

Different companies work differently

I’ve had a few jobs now since my first when I was fresh out of college, and since then I’ve realised different agencies do things differently. Some stick with the one design, send it over to the client, gather feedback and make amends till it meets the clients expectations. Whereas others produce 3, ping those over and then wait for all hell to break loose! You might be able to work out already which side of the fence I sit on this matter! Fear not though as this is not a bitch, just my observations about the subject.

A Real World Example

This very  situation I predict is about to happen at work in a few days time. We’ve got a client, quite particular about design, who shortly will be receiving four, yes thats right, four concepts.

I think anyone faced with a decision as big as finally deciding upon the look and feel of their most important piece of marketing material wouldn’t know what to do with four different designs thrust under their nose.

I will update the blog with the outcome of this project just to see how it turns out. The clients initial feedback has been great. They’re impressed with each of the designs, but I have a funny feeling all four designs will end up being merged together. We’ll have to wait and see!

So, why offer more than one design?

Its all about money and making the client feel like they’ve got more bang for their buck. When I look at it this way I can see why more than one concept seems like a good idea….. for a split second.

Why more than one concept isn’t a good idea

In my oppinion more than one concept isn’t a good idea. If you are going to do more than one though, stick to two at most! Any more than that just over complicates proceedings. You’ll be shooting yourself in the foot and making much more work for yourself in the wider scope of the project.

I think when you begin to offer more than one concept it seems like you as the designer or company feel unconfident in selling your work for £x,xxx. Its like you undervalue yourself and feel that you won’t be able to hit the brief bang on the head first time around. Sure there is usually more than just the one way to skin a cat, but showing the client every possiblility is just going to confuse them.

Imagine going for a haircut and the hairdresser goes through three practise runs, gets your feedback on how he/she did, and then gets to work cutting your hair. Probably not a great example, but hopefully you can see where I was going with that one.

You’re the design professional, you know what your doing and the client should respect that and trust you to do a good job. Just like you trust a hairdresser to do a good job cutting your hair.

Last but not least I believe it puts you on the backfoot from the outset of the project. Sure you want to make your client feel special, but you don’t necessarily want to appear to bow and scape to there every desire.

Over to you…

So what do you reckon? I put this question to my followers on Twitter and the answer that seemed to come back was that its dependant upon how much the client is paying you as to how many concepts they’ll receive.

Please let us know your experiences. Does a project run smoother the fewer concepts you produce? All I know is that in my three years working in the industry, the projects that flow better seem to be the ones where only one design was produced.

In this article I’m going to attempt to offer some help when it comes to you staring at a blank canvas in Photoshop/Illustrator, wondering what colour to add next, and share with you some tips on how I go about choosing colours for my designs. I’m no expert, but I hope you may find these insights and this article in general helpful.

Expose yourself to colours around you

This is really important as you can’t expect to be inspired if you don’t let yourself soak up the colours you see around you everyday.

When I say this, I don’t mean the grey from the pavement you walk to work on every morning, I mean design and life in general. Take a look at this fantastic photograph below (taken by nerboo on Flickr). Look at all the vibrant, fresh colours. Surely that inspires you?

You could even try walking into your local newsagent, picking up a copy of any magazine and you’ll be greeted with sources of colour inspiration. The same goes for watching television — most adverts these days are very creative and you can be sure to draw inspiration from these. Look out for colours that compliment each other. The more often you do this the easier it becomes and you’ll notice yourself picking up on more of the designs around you.

Complementary Shades - No more than 4 colours

When choosing colours, look for colours that complement each other. Often these can be slightly darker, or lighter shades of the same colour.

In my experience, designs that work best tend to have only 3 or 4 colours that make up their entire colour palette. I think sometimes designers use too few colours, and consequently run the risk of their designs looking boring and flat. Others try to over do it with 5 or 6 colours, making the design way too busy and distracting.

Heres an example of a lovely colour palette (all be it quite dark), consisting of 4 colours. The red and black dominate this palette with the two greys complementing them both perfectly. Try to bear this in mind when selecting your own colours as you don’t want to have them all fighting for attention.

Make your colours serve a purpose

Often it can be a good idea to use one particular colour from your overall palette for all the ‘Calls to Action’ on your site, and another for, lets say, the products. This type of consistency can really work well and will subconsciously help the users on your site recognize and distinguish between different areas and functions on your site.

So they have a logo already

The starting point for most web designers when it comes to a concept is the logo. If you’ve got a great logo to work with it can be brilliant and really get your imagination flowing, but equally painful if you’re working with something that looks like its just leap out of the 80’s! I’m sure you can relate.

I always tend to select my main colours from the company’s logo. After all its the main representation of their brand and needs to be carried right across all their marketing material. At the start of a project try to request all the companies printed material if you can, so you can get a good feel for their style, and also the colours they use.

How I chose the colour palette for Authentic Style

I thought using a case study might be a good idea, so using my portfolio somehow sprang to mind!

The colour palette Authentic Style uses is essentially pretty simple, and consists of brown, orange, black and a lighter, muted shade of white brown.

Brown was always going to be the dominant colour. I chose it as its unusual (although more and more brown websites are cropping up) and not a colour I had worked with much previously. I guess it usual strikes up quite negative connotations, but coupled with a vibrant orange  really works well I think.

If the orange had been left out I believe the design wouldn’t look half as good, just because the orange gives it that little injection of colour and really stands out against the brown background.

Finally I used black to help frame particular elements on the page. For example the featured work and work thumbnails, and also the links to view my work in the lightbox.

What techniques do you use?

If you’ve got any special techniques you use to select the colours for your designs please let us know in the comments below. It’s always interesting to find out how other designers work.

Helpful Colour Tools…

Here are a few of the tools I find most useful;

ColourZilla Firefox Add-On - Lets you use an eyedropper/colour picker tool in Firefox to grab colours on the fly.
ColourLovers - A fantastic site featuring fabulous colour schemes, and now even patterns to download.
ColourLovers Blog - A great blog about colour, and colour inspiration.
Colour Schemer Gallery - Another great colour scheme gallery for you to check out and be inspired by.

Setting up the background

1) Open up Photoshop and create a new document what ever size you like.

2) Fill the background colour with a nice dark blue. I have used #151719. If your not sure how to do this, simply go to ‘Layer > New Fill Layer’ in the menu at the top of your screen in Photoshop.

The Gradient

1) Grab the ‘Rectangular marquee tool’ and drag out a selection as wide as you want your content area to be.

2) Create a new layer, and set your foreground colour to white. If you didn’t know, pressing ‘D’ on your keyboard will reset your colours, and then pressing ‘X’ will reverse them, there for setting your foreground colour to white!

3) Take the gradient tool (making sure its set to ‘Linear Gradient’) and whilst holding shift click and drag downwards.

4) Now lets turn the opactity of this gradient layer down a little to make it more subtle. I’ve gone for 9%.

Adding the stroke

1) Take the ‘Rectangular Marquee’ tool and draw a selection the same width as your gradient layer, and slightly taller. It needs to be taller as we’ll feather this excess height away in the next steps.

2) Now create a new layer and at the top of the screen choose ‘Edit > Stroke’.

3) Set the stroke colour to white, and size to 1px.

4) Finally set the opacity of this layer to 8%. You should have something that looks like this:

Blending/Feathering the stroke

1) Select the ‘Rectangular Marquee’ and towards the top of your screen, set the ‘feather’ to 20px.

2) Now for the fun part! Draw out a selection with the ‘Rectangular Marquee’ that is wider than your content area. When you release the mouse you’ll notice that the edges of your selection have been softened - thats due to the 20px feather we’ve set.

3) Now press ‘Backspace’ or ‘Delete’ to blend the 1px white stroke we applied earlier.

We’re done! Almost…

Now all thats left if for you to add some content. You can see what I’ve done below…

So there we have it. A nice simple and stylish content area created in about 10 minutes! Please let me know what you thought of this tutorial in the comments below. I might try to write a few more over the coming weeks…

That was way back in December 07 and the new version has only just gone live. Crazy hey?! Thats part of the problem with updating your own website - finding the time to get on and do it. I’d got the design nailed pretty quickly to be honest - it was one of those layouts that just came together as soon as I got going. I think is because this time around I put much more thought into what I wanted the site to achieve.

Anyway, here are a few of my thoughts behind why I’ve done things how I have.

Everything on one page

I had thought about this possibility for a while and after much deliberation decided to keep everything on just the one page. When I stumbled across this excellent ‘smooth scroller‘ that pretty much sealed the deal.

I know optimisation wise I’m probably shooting myself in the foot, (hell, I even had a few comments over a CSS Drive saying that very same thing) but I think the site is going to be much easier for me to update this way. Also, I seem to be ranking quite well at the moment for my keyphrase of choice. If I decide to optimise for more key phrases, it will just be a case of creating some landing pages, so I think I’ve got most bases covered.

Layout

Although Authentic Style is pretty much a two column layout, I wanted to try something a little more adventurous by displaying sections which had a substantial amount of text in columns with some nicely styled headings. I’m really fond of designs that take elements from printed material, such as magazines and newspapers, so I thought I’d have a go at taking a tiny little bit of inspiration from those and introduce them into my design.

Having all the white space on the lefthand side underneath the title of each section was also something I had decided upon from the outset as well. I wanted to show off my examples of work and the use of space achieves this (i hope!). I remember a designer once telling me that white space creates confidence, and shows your not scared to give your design room to breathe.

Social Networking

Social Networking is really important these days. Up until a few months back I hadn’t really seen the benefit of it, but after using services like Twitter, LinkedIn and DeviantArt it is definitely beneficial to try and develop some contacts in a similar field to yourself.

Since my portfolio went live loads of people began to follow me on Twitter, and watch me on Deviant Art, so that can’t be a bad thing to get your name out ‘there’ a bit more. You just never know where it might lead, and following people on Twitter can be quite fun anyway, which is an added bonus.

Galleries and Traffic

If you haven’t read my post ‘Using CSS Galleries to your advantage‘ check it out! The gist of the article is that getting your site listed in a few galleries will send you a tonne of traffic!

This new version of Authentic Style got picked up by most of the major galleries, and its resulted in over 29,000 unique visitors and lots of enquiries for work (of which unfortunatly I cannot take any). Still, its always nice to receive a bit of recognition.

All in all, pretty chuffed…

I’ll be the first to admit that there were stages in the development of the new Authentic Style site where I wasn’t sure how it might be recieved. However, I’m really glad to say that overall the reaction has been very positive indeed and I’m chuffed to bits.

Designing your own portfolio is always a huge challenge, and one which every designer must face. I’d love to hear the problems you faced, or how you tacked the design and development of your own portfolio, so please leave your thoughts in the comments below.

What is del.icio.us

Del.icio.us is a social bookmarking site - thats all there is to it. People sign up for a free account and store all their bookmarks in one place, filed neatly under whats known as ‘tags’. Del.icio.us is soooo damn good because you can see what all the other millions and millions of users are bookmarking. If over 100 people have bookmarked something then you know it must be useful.

Sounds good, but why should I use it?

Well you can use del.icio.us in a few ways. You can use it to;

• Keep links to your favorite articles, blogs, music, reviews, recipes, and more, and access them from any computer on the web.
• Share favorites with friends, family, coworkers, and the del.icio.us community.
• Discover new things. Everything on del.icio.us is someone’s favorite — they’ve already done the work of finding it. So del.icio.us is full of bookmarks about technology, entertainment, useful information, and more.

How can it help me as a designer?

The best feature to take advantage of is the ability to ’search’.

Because Del.icio.us aggregates the most popular pages on the internet in one place (according to people like you and me, instead of Google, which just returns the best optimized pages, not the best pages content wise) you can quickly and easily find really invaluable resources.

As designers theres no question that we’re always on the look out for new resources. Whether it be fonts, brushes, inspiration or articles about web standards - the list goes on. Instead of rushing off to Google as so many people do, next time you find yourself trying to track down a stylish font or a free textures site, head over to Del.icio.us.

Give it a shot now. Try something like ‘free textures‘.

Basic Link Styling

We all know how to write the code for this, but its often handy to just paste it straight into your CSS file at the beginning of a project. If you didn’t know, the code below will style ALL of the links on your website, unless you otherwise specify styles for them.

a:link, a:visited, a:active {
color:#EAA423;
text-decoration:none;
}
a:hover {
color:#83CAF0;
text-decoration:underline;
}

Firefox Image Outline Fix

This little beauty does exactly what it says it does. If you weren’t aware, Firefox has a nasty little habit of adding ‘outlines’ to images that are links. This really bugs me on items in the main navigation of a website, but thanks to this handy piece of code you can say goodbye to these outlines forever!

A:focus, A:hover, A:active /* Firefox image outline fix */
{
outline: none}

IE6 Background Flicker Fix

You’ve probably noticed that in IE6 when you hover an image that has a linked background you get a very noticeable flicker as it jumps to the hovered background image. Well not any more! This is another really handy fix that I always implement these days. You can read more about it here.

html {
filter: expression(document.execCommand("BackgroundImageCache", false, true));
}

Header Tags

Another pretty basic one, but a real time saver to quickly paste into your code is the header tag. These bad boys should be a part of every web designers code toolkit. Headings are essential for search engine optimisation, and they also help keep you code semantic - meaningful and structured in other words.

h3 {
color:#fff;
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
font-weight:normal;
margin-top: 0px;
margin-left: 0;
margin-right: 0;
margin-bottom: 0;
line-height:140%;
padding-bottom:0px;
}


Absolutely Positioned Images

Its not a good idea to get into the habit of using this technique, but in some instances it can be particularly useful. One such instance happened to me a few weeks ago. Basically after a design had been built, the client wanted a badge to be added in a really awkward position overlapping the main banner and the edge of the actual website itself. The image wouldn’t have fitted nicely into the flow of the code, so I chose to absolutely position it using the code below.

All you need to do is change the ‘top’ and ‘left’ values and add the <div> below to your HTML

<div id=”namehere”></div>

#namehere{
background: url(../images/yourimagehere.jpg) no-repeat left top;
width: 26px;
height: 697px;
display: block;
overflow: hidden;
position: absolute;
top: 0px;
left: 184px;
}


Headers & Paragraphs Margin Reset

At the beginning of the development process its often a good idea to do a global reset of the margins on your header and paragraph tags, just to eliminate the possibility of any stray padding or margins creeping in when you progress further in the development.

h1, h2, h3, h4, h5, h6, p {
margin:0;
padding:0;
font-weight:normal;
}

Sliding Doors Navigation

This has to be the piece of code that gets re-used the most on any website.

The ‘Sliding Doors’ technique enables you to have all the images your planning to use for each section of your navigation in one image. You then use CSS to reposition that image to show the hovered state, and the ON state.

However, just to make things interesting, I use this technique a slightly different way. I do this by only including the first and second image together as one image, and then have the ON state as a completely seperate image. You can see the two seperate images below.

I then use the following CSS code below. The ‘ul’ section eliminates the padding and margins and the ‘#navigation’ part displays the items horizontally, rather than vertically. Ive also included some comments in the code below which help to explain whats going on.

ul {
margin:0;
padding:0;
}

#navigation li {
display:inline;
padding: 0px;
}

li#articles a {
text-indent: -1000em;
background:url(../images/articles.jpg) no-repeat left top;
width: 117px;
height: 68px; /* 68px is the height of the single button image */
display: block;
overflow: hidden;
position: absolute;
left: 15px;
top:169px;
}

li#articles a:hover {
background-position: 0px -68px; /* This adjusts background positioning so that only the bottom half of the image can be seen */
}

li#articlesON a {
text-indent: -1000em;
background:url(../images/articles_on.jpg) no-repeat left top;
width: 117px;
height: 68px;
display: block;
overflow: hidden;
position: absolute;
left: 15px;
top:169px;
}

To get this working on your site we need to add some HTML:

<ul id=“navigation”>

<li id=“articles”><a href=“articles.html” accesskey=“1″ title=“Articles”>Articles</a></li>

</ul>

Add your snippets of invaluable code!

I hope you might have found this article useful. Re-using pieces of code can really boost our productivity so you might want to create a file on your computer where you can quickly and easily grab essential pieces of code.

Now, what I’d really like to know is what snippets of CSS code do you use over and over? Share them with us all in the comments below!

A new job…

I forget now if I told you, but the job I left Giant Peach for at Redweb really didn’t work out. Obviously I can’t and won’t go into the details, but it just wasn’t what I was looking for, and it wasn’t keeping me motivated and upbeat. I left just before 3 months of service and took the whole of December out to freelance before my new job began in the new year. The freelancing went better than I could have imagined, which made me really chuffed. Its great to know that I could always go down that route if needs be.

Atelier Studios
Thankfully things are on the up. Im now working at Atelier Studios in Southampton and there’s more than enough creative work to whet my appetite here. Ive been at Atelier about two months now, but this really seems like an up and coming company. In my first month I turned out 3 logos, 8 layouts and built three sites - talk about productive! Ive even done some work for a huge Volkswagen Distributor and a potential concept for ITV. Anyway, the most important think is that I think I’ve got the feeling of wanting to work back.

Working on a new portfolio

Yep, this ones been keeping me really busy, but hopefully its going to be worth it. Ive been working on the next version of Authentic Style for a while now and Im just starting to build it. This versions going to go down a different route style wise than the current grungy one you seen now. I’m aiming for something simple that really focuses on what people want to see - my work.

Evoart Tidy Up

And lastly Im planning to give this site a bit of a spruce up when I next get some time. Ive toyed with the idea of a redesign, but I don’t think this site needs it. Sorry if I got you excited then. Thats just something that would create even more work for myself when I need to focus on creating some more quality content for you guys to enjoy. Evoart’s even been included in some more CSS galleries over February 08, so it can’t be looking too shabby yet!

Anyway, an extremely late happy new year to one and all. Hope your having a good one. You can hopefully look forward to this site coming back to life again soon. :D.

My professional background has its roots firmly planted within the hazy sphere of Product Design. I’ve spent many a fraught moment parked squarely in the position of professional gooseberry, caught in the middle of the catty relationship that so often exists between artist and engineer (one obsessed with how something looks, the other with how it works). The two don’t necessarily mix all too well, and that’s why a man-in-the-middle is needed. That was me, as a Product Designer.

Why do I mention this?

Well, many of the products and elements of design to which we today ascribe the label of ‘genius’ have been the result of collaboration, of great minds working together. Yet so often it seems much simpler to go things alone, particularly as designers who find it inherently painful to accept that someone else’s ideas and opinions might actually be more inspired than our own (sometimes). Yet, time and time again it has been proven that when individuals lay-down their pride (and insecurities) and work together as a team of complimentary skills and attitudes, there is brought forth a synergy that has potential to create brilliance.

But it’s never an easy ride; in fact it’s often quite the opposite, requiring patience, careful planning and considered forethought. I speak as one who holds particular value in the discipline of collaboration. It has been the making of me, and has taught me so much more than could ever have been attained through working alone, albeit steadfastly and after much learning and experience.

Could collaboration be the answer?

I recently read a book by Gerry McGovern called “Killer Web Content: Make the Sale, Deliver the Service, Build the Brand“. It makes an excellent read and talks a lot about the preconceived ideas we have as designers and marketers of content, which are so often misconceptions. We assume people will like this and understand that, particularly if presented in a specific way.

When working alone becomes the norm we can become stuck-in-a-rut, confused in our outlook and unsure or disillusioned as to the most efficient and effective way(s) to pursue our cause. We work long hours for little return and can’t understand why things aren’t working out the way we’d hoped they would.

Gerry suggests that collaboration could be the answer. Employing freelancers on a per-project basis is an effective way forward and is certainly a more financially viable way of drawing in external talent than employing full-time staff. But it can be a scary prospect, particularly if you’re used to working alone and don’t know how to best mange a team. And then there’s the outlay; so much to think about!

How about this – breathe new life back into your work and professional outlook by collaborating on a per project basis with other small companies or individuals. But how do you know who will be be the best choice, in terms of doing what they’re meant to do when they’re meant to do it, and all whilst getting along with everyone else in the studio? It really is no small task!

Gerry provides clear guidelines around this, and many other such subjects:

“Not all collaboration is good. Learn what to collaborate on and who to collaborate with. There are certain types of people you should be wary of when it comes to collaboration.
* Those who, in their hearts, are hoarders of knowledge.
* Those who won’t pull their weight. They like the idea of collaborating but they don’t want to put in the work.
* Those who don’t have the talent but will work very hard. They will be at every meeting, will write up long reports, and will waste a lot of time.
* Those who love to collaborate once everyone is collaborating on their terms. If they’re geniuses, you could still walk away with something worthwhile, but if they’re not, you should just walk away.”

He points out that it’s always important to have someone in charge, and references a quote from Warren Bennis in ‘Organizing Genius’:

“Great groups are inevitably forged by people unafraid of hiring people better than themselves.”

How does this relate to us?

How does this reflect on you (and me!)? Where are we each at in terms of our personal profitability? It’s worth considering — and then acting upon.

Collaboration is not as tough or threatening as it might seem, particularly given the software tools we have available to us today.

Skype is a great one, allowing you to talk, message (take minutes, save notes for reference etc) and conference online, all for free. And then there’s the all-important SVN repository — use a local subversion client and you can all collaborate to your hearts’ content, safe in the knowledge that your files will always stay current, accessible, and, if properly administered(!), backed-up.

Pick your partners carefully…

From my experience, the toughest part is definitely choosing the right team, one where all players know and appreciate their responsibilities, share a common vision and all work in equal measure towards a common goal. A tall order? Not necessarily. Just pick carefully.

To begin with, draw new people on board in a short-term capacity — make expectations clear and test the water. You’ll soon realise who will and won’t ‘work’. If someone doesn’t work you simply part company, but if they do produce the goods then you’ll find yourself on that exciting road towards producing something great, something you simply could not do on your own.

You can’t do everything yourself

When you’re self-employed and working alone you so often spend 20-40% of your time doing what you enjoy and are naturally skilled in and 60-80% of your time doing what you’re not naturally good at and don’t actually enjoy (but have to do to keep your business running). In full-time employment you’re employed for your strengths, and are normally called upon to operate solely in those areas.

Someone else is employed to do the things you’re not skilled in. Why not adopt this principle as a self-employed person? Why not collaborate with someone who’s great in the areas you’re not? Pick the right person/people and you’ll find that you’re surging forwards so much more quickly, alleviated of the frustration of being stuck in a rut and freed-up to operate in your area(s) of strength and natural gifting.

Go on, try it

I’m not writing this in an attempt to show you how to collaborate, rather as a means of encouraging you that it needn’t be tough (and that it can yield great results!). Look around you, check-out your local online freelance design community (Wired Sussex is mine) and tap into the wealth of available talent. People will always begin by pressing-home their strengths (which may initially leave you feeling inferior) but you’ll soon realise that they need you just as much as you need them — just take a little time to find out how.

Down both your pride and insecurities and prepare to push things forward. It’s time for a little sweat equity!

This article was written by Tim Jameson, director of Twill Media. Tim lives in Brighton, UK, with his wife and two children. Twill Media, are a digital creative company, specialising in online design and application development. If your a creative professional interested in writing for Evoart, please contact us.

What is ‘Readability’?

Heres a great way of explaining the term readability:

Readability is defined as reading ease. Extensive research has shown that easy-reading text improves comprehension, retention, reading speed, and reading persistence.

Why is readability important?

A website is a tool that provides information to a visitor. It tries to get them to buy in to something - a service, or a product. It might even act as a resource to inform and educate them. Obviously it depends what your sites about.

Either way, what we do know is that the main body text needs to be comfortable to read. Certain areas of your site need to attract more attention than others, as particular elements will be of more importance that others on the page. As designers we have to make sure that these don’t all compete with each other, and that the most important elements are clearly distinguishable over the rest.

5 simple techniques for increased readability

Below Ive outlined five really simple techniques you can use to increase readability.

Larger body copy

Although size 1.6em Arial doesn’t look fantastic as your site’s main body copy, there is no denying its very comfortable to read.

My personal opinion is that between 1.2 and 1.4em is the perfect size for main body copy. I don’t know about you guys, but when Im reading anything smaller it starts to become a bit of a struggle. Especially if the copy in question is a lengthy article. The next time you come to mock-up a design try stepping outside of your comfort zone and up the text size a little. Big fonts seem to be in right now anyway!

Clearly differentiate main content from your sidebar content

Content becomes very tough to read when it runs too close to the content in your neighboring sidebar. Its important to make sure theres enough padding between the two so that a visitors eye doesn’t dart from one to the other. Your article is what you want your visitors to read and padding acts as a sort of barrier between the two.

Applying a slight variation in colour to your sidebar can also help you establish a clearer barrier between the content and sidebar sections.

Think of it like the fence between you and your next door neighbor. You wouldn’t want that fence not to be there would you? If it wasn’t you’d loose your privacy and anyone could wander onto your land. I guess its the same idea with your content and sidebar area. You don’t want the readers eyes wandering across the two.

Enough whitespace between paragraphs

Whitespace is great. It helps designs ooze confidence and professionalism, if use in the right way.

Spacing your typography correctly is of crucial importance. I remember when I first started designing for the web I wouldn’t really pay much attention to mocking up the main body text in Photoshop. I’d always add it in, choose a colour, adjust the line height a little and leave it at that. As long as it looked good and complimented the rest of my design.

These days I spend much more time making sure the copy on sites I design is as readable as possible. Spacing between paragraphs for example is an important thing to consider. Too much and you haven’t provided the reader with something to easily move their eye onto without much effort (this is know as eyeflow). Too little and the sheer mass of content is likely to intimidate your reader.

‘Inverted Pyramid’ technique

The ‘Inverted Pyramid’ is a pretty well know technique you’ve probable heard of before. Imagine a Pyramid turned on its head.

Basically it suggests that your call to actions and most important features should be the largest on the page, then possibly the headlines, followed by your main content, and then the less important information. Everything should flow down the page. You get the idea!

Drop caps and Indentations

I recently discovered, after talking with someone heavily involved in testing the conversion rate of numerous web pages, that if you start the main sections of your copy with drop caps it increases readability. Why? Well it gives the eye something to latch on to and encourages the visitor to continue reading and making progress down an article.

Does increased readability compromise design?

I believe that sometimes we can get too caught up in making things look good. Its important to understand that although a website needs to look good, its main purpose it to provide information. As a web designer its your job to display this information in the most readable manner, and still make it look good. Sometimes this can be quite a challenge! However the importance of readability can also be taken to the other extreme when people start requesting 1.8em main body copy.

So its over to you guys. What have been your experiences with readability. Do you think it compromises design?