Eye catching & useful web slides - what are the do's and don'ts?

Question

I hope you don't mind a programmer barging in on the graphic design site....! I usually work with design agencies to turn their creative ideas into web-site reality. So I can appreciate a good looking website. When it comes to rebuilding my own site however, I don't get the luxury of being able to employ a designer and so I need to do it myself.

I've got the basic layout down and am pretty pleased with it - the main thing about the homepage is that it has a nice big navigation with a list of programming services, linked to a pretty large (at the moment 650 x 495) 'slideshow'. The idea is that the slideshow gives you enough further information at a glance on the selected item that you click through to that section to read more.

So the question - what makes a good slide? I see many great examples around the web and can say 'yep, that looks good!' but i'm finding it difficult to replicate anything that i'm pleased with.

Should it have a highly contrasting background or should it seamlessly connect with its surroundings (which are in this case just a white area)?

Should it have an extra large, simple message only? Or include more text?

Should it have a full background image, or just incorporate an image somewhere and leave the rest plain?

What are some good tips for ensuring I don't make a slide-related faux pas? (given the target market for the site is the design industry!).

Thanks :)

Answer 1

Best advice I can give you: Keep it simple. If your target market is designers, you absolutely do not want to give them the idea that you're a) trying to compete with them, or b) have delusions of grandeur about your design skills. This works in your favor, actually, since it means you don't have to jump through more than the required minimum of hoops. :-)

In this context, then, a good slide is simple, conveys a single message (a headline and a short paragraph or two in large type), and looks like it belongs on the site and belongs to a set.

Those last two points need a bit of expanding. These slides are part of your site information, but are really teasers to lead the visitor to the page where they get the real dope. Text on the slides should be in the same typeface as your site headlines -- variations of size and style are fine, just don't use a different face.

To make the slides hang together visually, there are some basic techniques:

1. Make a ghosted background image (a page of code probably works well here) that doesn't change, slide to slide. The busier the image, the more transparent you should make it, but try for something simple. Feather it off with a gradient mask where your "blurb" is going to go if it's at all busy.

2. You can change the background color(s) of each slide, to indicate it's a different subject. This could be as simple as having a Hue/Saturation layer set to "Color" or "Hue" blend mode in your Photoshop original, and changing the Hue value. If your site is brightly colored, make sure that some element on each slide is an exact match for one of your site colors. [If it's appropriate, you can use a photograph that shows the idea you're trying to convey. That's a bit riskier, but you can try it.]

3. Your headline on each slide should be in exactly the same place, same size, same font.

4. The short paragraph should be below and possibly to the right of the headline, and again should be in exactly the same spot.

I've used "the same" a lot. That's a simple design rule that can keep you out of a lot of trouble. Use few colors but make them the same everywhere they appear. Use the same typeface throughout. If a headline shows up in a particular spot, it should be in the same spot on every slide. If you use stock photography, get shots by the same photographer, or at least in closely matched styles, so they look like they were done as a set. You'd be amazed how you can lift the impact of any piece of design just by paying attention to this one point, and anyone can do it. You don't have to be a designer.

Hopefully this has given you some useful ideas. I deliberately didn't get too explicit on the visuals, because it's your site and you know your market better than I do. Best of luck!