Designing title pages

progression title page

Designing the title slide, front cover or homepage is almost always the most important part of any job. And this particular area will rightly be where you and your client spend the most head-scratching time.

There was a good reason your mother always told you to tuck your shirt in, first impressions count.

It’s impossible to lay down rules of how to do this or even how to go about it but here, along with a title slide I designed recently for a big client’s important presentation (above), are a few pointers.

Keep the design simple

For example, I thought it would be a great idea to put a trendy Mac OS X desktop type background, a few nice opaque curves filled with gradients in the image. No it wasn’t. It was a stupid idea. It detracted from the message.

Try to add movement/dynamism

This isn’t always possible. But this particular example gives you one classic design trick. Notice how the running figure is on the left of the frame; she has somewhere to run to. This gives you the feeling of motion. There are many other ways you can do this, tight cropping being one of them.

Typography, colours and headings

Try to choose a typeface, colour scheme and heading that fits with your client, their message and the imagery. It may be that the heading has already been given to you by the client but that’s not the end of the story. Should it be title case, all upper case or all lower case? What looks best? Is the colour right? What mood does it convey? I usually try as many possibilities as possible. In this case the client wanted a modern, strident, “one step ahead” feel.

Execution

And now the most important part. Make sure, once the design’s been approved you don’t mess up at the final stage. Always get the size right. This was for a title slide of a Powerpoint presentation. The default presentation size is 25.4 cm by 19.05 cm so make your Photoshop document this size. Get the resolution right (I saved this at 150ppi as a JPEG with the maximum file size getting the most from the image whilst keeping it to a manageable size).

The running figure was set to Lighten as the Layer Blend Mode in Photoshop and it had Bevel and Emboss as well as Outer Glow Layer Styles. The background, as you can see, is just a radial blend between two blues.

Now it’s open to you. How do you think we did with this title slide?

You can subscribe to new posts via RSS or by email, or follow me on Twitter.

Related articles

Download free “How to Market Yourself Online” ebook
Discover the secrets behind building a better web presence

Everything you will need to know about self-marketing on the web, including:

  • Creating websites
  • Setting up WordPress
  • Writing blog posts
  • Getting links
  • Driving traffic to your site
  • Using social media
  • Offering RSS feeds and subscriptions
  • Getting found on Google
download icon
download button

21 Responses to “Designing title pages”

  1. Nice cover slide. Never knew it was such an analytical process but you’ve broken it down very well. What’s on the cover does matter in regards to text, text size, images, etc… I was getting like a 85% bounce rate and with a slight modification it was reduced to around 65% in one day.

    megan foxs last blog post..Megan Fox at FOX All-Star Party

  2. Thank you, Megan. The analysis is different each time, for example, I spoke more about movement for this image as it was pertinent to what the client wanted to express. But we try to analyse as much as possible as quickly as we can. Interesting point on your bounce rate. I wonder what the small modification was that cause those visitors to stay…

  3. Well that was a good explanation but it doesn’t really explain HOW to do it, I guess that is where creativity comes in. I am launching a new site and I have been racking my brain thinking about how to make the logo since the concept is kind of boring… its just basicall a directory of companies.

  4. Keeping the design simple is good sometimes but not all the time. If the company you are working for require a design that is going to far exceed the notion of simple then it will be hard to constrain your design. As for logos, I would definetly agree that keeping the design in vector and as simple as possible is the way forward!

  5. Simple is good but it dosen’t work everytime. To me, a very good simple design would actually be harder to finish than a complex one. Good tips by the way! Thanks!

  6. Some good tips here, especially as I’m thinking about re-designing my logo right now, and making it simpler.

    Regarding your slide, very nice and dynamic, although I’m not a fan of bevels. I think an italic font may also have lent more ‘movement’ to the design.

  7. Simple designs always tend to work better. As well as small logo headers.

  8. Great looking design indeed. I like the figure very much, it is really showing real progress. But somehow i don’t like how the text went off. The white color makes a big contrast with the color of figure. I would maybe make it same, with figure going also white. But that’s real not necessary.

  9. well keep always the front cover or homepage is almost always the most important part of any job.

  10. I would maybe make it same, with figure going also white. But that’s real not necessary.

  11. It’s good design and you provide good information also.

  12. Great tips, my co-workers always told me that animation/moving objects are just making the page to load slower. I like the idea of design trick which has a motion. Thanks.

  13. Thank you everyone for commenting. People have made good comments about how I may have been a bit to sweeping: it’s not always a good idea to keep it simple. Some don’t like the bevelling. I admit I maybe use bevels too much. And some people don’t like the type in white or think the difference is too great between the figure and the type and maybe they should be the same. All good points, thank you!

  14. great ideas.and i like your blog, as you said it’s very simple but good looking.

  15. I think the keeping it simple and clean is the hardest part for me. I seem to always want to add this then add that…aaaahhhh. Every thing has its place I suppose but I do agree that keeping it simple and not over thinking it works best.

  16. Thank you for the comments. Yes, Darrin Walton, we all have these issues. And sometimes the client can keep on wanting to add things. Sometimes it ain’t easy to keep it simple!

  17. Like most, I’m not a fan of the bevels (a bit early ’90s for me!), but the design certainly indicates motion to me.

  18. Very interesting.. This will make my work much more easier then before…Thanks a ton..!!

  19. Richard, I take your point on bevels – I use them too much, definitely.

    Thank you, .Net Projects Security, for your comment about the design.

  20. Simple is good but it dosen’t work everytime. To me, a very good simple design would actually be harder to finish than a complex one. Good tips by the way! Thanks!

  21. Thank you Dave on your take on the simple vs complex debate. I’m sure I was being too … simple! You make a good point.

Leave a Reply

Copyright © 2010 Rob Cubbon. Designed by Rob Cubbon Ltd, London. Powered by WordPress. Hosted by Dreamhost. Made with Love.