1

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 :)

Improve this question

1 Answer 1

Reset to default
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!

Improve this answer
5
  • Great advice, i've been spending my afternoon adjusting my site - I had a big issue with backgrounds, everyone has them - they look great, but on my design - they were lost and unconnected to anything. Now that i've tightened everything up so it fits snugly together - the slides are starting to look much better.... now i'm going to need to do something about the plain white site background too, hah :)
    – Codecraft
    Jun 23, 2011 at 18:38
  • And as for not competing with designers - truly a tricky one, although that is the case - does a designer want to see an attractive site to prove that we can indeed put an attractive site together? (We're trying to differentiate by including some interactivity on the homepage to show off our skills!)
    – Codecraft
    Jun 23, 2011 at 18:40
  • You can show portfolio examples of sites that you've enabled, and testimonials from ecstatic art directors whose bacon you have saved. What I'd be trying for on a project like this is a clean, professional look overall, especially on the home page. I'd have pages with a few "wow!" demos of technology in action in a few realistic situations, and I'd want to show some client sites that show off successful work.
    – Alan Gilbertson
    Jun 23, 2011 at 19:07
  • Yep, we call it 'case studies' as opposed to portfolio since we don't do the designs. While we can definately point to a few we're proud of, oftentimes there either isn't the budget to add some really cool functionality, or the designers aren't aware of the sort of really cool functionality that we can add!
    – Codecraft
    Jun 23, 2011 at 19:24
  • Makes sense. It won't hurt to throw in a few examples of Really Cool Stuff, based on some of the things you wish you could have done if the client had had the budget. :)
    – Alan Gilbertson
    Jun 23, 2011 at 19:29

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.