Must Design

Web Design Tips

Text is hard to do well. Images are hard to do well. Tex over images is impossible except when you follow the lead of other great designers and learn how and when text over images can work like these 19 great and inspirational examples of text over images.

Note the balance where neither image nor text dominates. This is the rub of text over image design. Too much image and the text goes away. Too much text and the image doesn't seem to make sense or contribute anything.

Follow these great examples and your text over images will look great and contribute to your website design.

Top 10 Minus 2
This is an excellent post, but I removed two of the top 10 tips. I removed #4 Type because it isn't clear. Unique type in an image is fine since you know how it will render. Unique type in body text can be a disaster because you don't know how it will render.

The Internet is a billion computers all with different setups for type. When you render an exotic type in HTML text the receiving computer must have that same exotic type or it renders as a more common type (Arial, Veranda).

Let's call this "type roulette" and it is to be avoided. Exotic type in .JPGs or .PNGs or .GIFs (best format for type only images) render exactly as you see them. Type in body text is dependent on the receiving device so I tend to use non-serif universal type (easier to read non-serif type online).

There are ways to select how your type will render when it isn't available on the receiving computer, but I don't like the variability of playing font roulette. Type plays an important but floating point role in website design. I pick a type that will WORK, look pretty much the same on all receiving computers and be easy to read. Don't play font roulette.

I also removed #6 - Drop In Full Screen Photos
Yes this idea can be done well, but your designer better be VERY good. I prefer lots of white space on a website design. White space creates spacing and so highlights design elements NEXT to it. Strange to think of creating highlights by using negative space, but if you think of every great picture or painting you love there is always the use of negative space.

Warhol was famous for using BLACK to create his negative space. Great photographers such as Annie Leibovitz frame negative space in like huge arrows getting your eyes to go where they want them.

You may be the one in 100 designer who can use full screen photos and still create design tension and navigational hierarchy, but odds are better to say USE WHITE SPACE than full screen photos.