Jump to content

.London Domains - £4
Photo

5 common design errors that will ruin your copy


  • Please log in to reply
11 replies to this topic

#1 Notbanksys Copy Shoppe

Notbanksys Copy Shoppe
  • Global Mod
  • Word Nerd
  • 1,186 posts

Posted 01 July 2014 - 20:04

*
POPULAR

You know what amazes me? When people pay good money for great sales copy, and then ruin it with poor design and presentation.

 

What the flock is going on with that?

 

So, in case you're one of those pushers of pretty pixels who doesn't understand the importance of presentation when it comes to your sales message, here's a quick crib sheet.

 

And if you're a perpetrator of one of these heinous crimes against profitability, consider yourself duly reprimanded. Say 5 Hail Marys and read anything by David Ogilvy as penance.

 

Wait. You don't know who David Ogilvy is? You need to get hip, bro. He's the patron saint of using words and images to sell products and services. In other words advertising.

 

Yep - advertising. Because guess what? If you're a web designer, that's your job dude. If you don't know how to make people act, then you're doin' it wrong...

 

So without further ado or sanctimony, here are the 5 deadly sins of typographic design:

 

1. Hard-to-read type. For some reason, many web designers don't seem to consider readability when they set type. Maybe it's because they are too concerned with bevelling the shit out of everything in photoshop? Whatever. Here's the plain truth. Font choice matters. Leading matters. Contrast matters. Justification matters. And if you don't believe me, just visit any newspaper site and tell me what their typography has in common.

 

Alright then, I'll do it for you! Here's what you'll notice. Serif fonts - and lots of them! Why? Because, they're easier to read. With one exception (and no I'm not talking about Windows XP). You'll probably notice they use sans serif below a certain size, because serifs don't translate well on the screen if they're too small, and end up hindering reading.

 

You'll also notice plenty of leading (or line-spacing if you're only familiar with how CSS describes it), short line lengths, lots of contrast and left-justified text. I can't emphasise this point enough. If you want body text to be read, justify to the left column only.

 

2. Defiling the sacred left margin. You'd think this one would be obvious, but I see violations all the time. In an ideal world, your body copy should have its left margin on the left of your site. Because we read from left to right, so you want to put your copy where the visitor's eye lands, right? Ok, but even if there's a left column and then your body copy, there's one rule you must never break.

Do not interrupt the left margin. That means floating images and other 'break-out' content on the left. The only exception is bullet points, which readers are used to breaking a left margin slightly.

 

If you need to include a relevant picture, it's ok to place it against the left margin so long as you don't float text to the right. Make your picture wide enough to have a place of its own between paragraphs.

 

3. Wimpy headings. Your headings need contrast like you need money. They won't work without it. Not just black-on-white contrast. I'm talking contrast with the rest of your copy. Ideally, at least 50'% bigger than the body copy, in a bold/ slab/ high-impact face and with an accent colour maybe.

 

4. Claustrophobic copy. Words need space to breathe. Correct use of a grid is paramount if you want your copy to be read - and acted upon. Make sure there's plenty of padding around your text, so that it doesn't feel hemmed in. Peoples eyes jar against other elements that get too close, so the more space the better. A minimum of 1em should be observed at all times. Likewise, when padding between paragraphs I recommend 1em, although you may get away with .5em. Just. Don't tab indent paragraphs. It may look cute, but it's hard to read, okay?

 

5. Bloody interruptions! I don't care how creative you are - the only thing you're going to create by shoving random 'design' elements in among the copy is a lower conversion rate. If you've got some pretty pictures you want to use to decorate your site, do not put them in with the copy - unless - they directly support the copy. In which case, knock yourself out. Everything else is an invitation to stop reading. Which means fewer conversions. You know, the reason you created your website.

 

Now you're hip to that, all you have left to do is make sure you have some engaging and persuasive copy that's written to help you achieve your business goals.

 

If you need help with that, hit me up at tony [at] copyshoppe.co.uk


  • 10

Git up offa that thang: Copy Clinic #7: Write copy like a sex machine
 

The Brand New Copy Shoppe is now open for business!

 

Bounce rate higher than a kangaroo's trampoline party? Email me at tony [at] copyshoppe.co.uk

 


#2 historygirllfc

historygirllfc
  • Hefty Member
  • Advanced Member
  • 643 posts

Posted 01 July 2014 - 20:46

As always a great read full of tips


  • 0

YNWA

 

 


#3 Gibson

Gibson
  • Hefty Member
  • Flogging Gibbo
  • 1,814 posts

Posted 01 July 2014 - 21:44

No. 1 really fucks me off when I get psd to html jobs.

 

What, the client really signed off that 8pt copy size? Let me get my magnifying glass.

 

But hey it looks neat right, bugger the fact that no one can read it, so long as we can fit 3 paragraphs into that 3cm by 3cm box.....


  • 3

#4 Paul_likes_the_ocean

Paul_likes_the_ocean
  • Hefty Member
  • Sausage Pants
  • 2,612 posts

Posted 01 July 2014 - 22:02

No. 1 really fucks me off when I get psd to html jobs.

 

What, the client really signed off that 8pt copy size? Let me get my magnifying glass.

 

But hey it looks neat right, bugger the fact that no one can read it, so long as we can fit 3 paragraphs into that 3cm by 3cm box.....

Lets face it, the client gets what they want...who gives a dam about what the people actually using the site want right???


  • 0

“I have enough unknowns in my surfing life and my oracle life without you adding a whole ‘nother life” Olaf 

www.simpler-life.com


#5 danners2003

danners2003
  • Member
  • Standard Member
  • 427 posts

Posted 02 July 2014 - 15:11

Good stuff mate, thank you


  • 0

#6 Gibson

Gibson
  • Hefty Member
  • Flogging Gibbo
  • 1,814 posts

Posted 02 July 2014 - 16:04

I guess clients think that text that looks like this is really neat, oooo look it all fits really well into this little box tc. etc. not realising that no one can read it, because either them or the designer has 20 20 vision and it has not occured to them that some of the viewers of the site may not be so lucky.


  • 2

#7 Jheg

Jheg
  • Overlord
  • Mandard Stember
  • 1,632 posts

Posted 02 July 2014 - 20:43

Excellent as always Mr !b 


  • 0

Learning Ruby http://jheg.github.io/

ToDo App - www.gottodo.co.uk


#8 lakey

lakey
  • Supporter
  • Standard Member
  • 267 posts

Posted 02 July 2014 - 21:33

Very good read *Starts editing the site I'm designing*
  • 1

#9 MikeChipshop

MikeChipshop
  • Overlord
  • Mini Member
  • 4,693 posts

Posted 03 July 2014 - 08:56

I've noticed a lot more of these rules being adhered to in PSD's that are handed over to me for development.

 

Copy size had got ludicrous, peaking at about 10px i think but it's steadily climbing and i'm actually seeing some text that even with my shitty eyes, i can read!


  • 0

#10 AlmostOldman

AlmostOldman
  • Member
  • Newbie
  • 8 posts

Posted 04 March 2016 - 01:41

That's a very good and informative post.

You're right at most of the points.

Thank you :ok:


  • 0

#11 Notbanksys Copy Shoppe

Notbanksys Copy Shoppe
  • Global Mod
  • Word Nerd
  • 1,186 posts

Posted 05 March 2016 - 20:39

You're right at most of the points.

 

Most of?!

 

I think you meant to say all of... ;)


  • 0

Git up offa that thang: Copy Clinic #7: Write copy like a sex machine
 

The Brand New Copy Shoppe is now open for business!

 

Bounce rate higher than a kangaroo's trampoline party? Email me at tony [at] copyshoppe.co.uk

 


#12 AlbertDavid

AlbertDavid
  • Member
  • Newbie
  • 13 posts

Posted 01 August 2019 - 05:33

Great tips. Points to be followed by everyone. Another thing in the interruptions department that annoys me are the ad sections which pop up in between the paragraphs. Seriously irritating.


  • 0




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users