Lipstick Monkey Design
home - resources - help center - faqs - contact

Building a Web Site: Add Your Content and Images

Helpful tips for your content...

  • Write content that is easy to scan.
    Chances are that even you didn't read every word on this page. Web users are impatient. People tend to quickly scan over the content of a web site to decide if they want to read the rest. To help them determine what's on your page, use lots of headings, bulleted lists, and put your most important points in your headings and first sentences of paragraphs.
  • Use images to help bring across your point.
    Wise positioning of images can catch your user's attention and cause them to scan the text around or near the images.
  • Keep things short.
    People like looking at short, bulleted lists. Keep your sentences short, and keep your paragraphs short. Stay away from long blocks of text, unless it's some kind of technical article that you know people will want to read.
  • Remember your purpose and your audience.
    Look back at your answers to the questions in the first article about the purpose of your web site and your audience. Don't overwhelm your audience with things they don't need to know.
  • Call for action!
    What do you want your users to do? Buy something? Click on something for more information? Be sure to put things that you want your user to see and click on up front (not hidden four pages down), and use action words in your text and images so that your users know what to do.

Basics about web images...

There are two main file types for web images - .gif and .jpg. Most photo editors will have an interface that allows you to optimize for the web.

  • Save an image as a .gif if it has few colors (think a cartoon or a 'flat' logo) or if you want a part of the image to be transparent. The more colors a picture has, the larger file size it will be.
  • Save an image as a .jpg if there are many color gradients. There are different quality levels (compression levels) that you can choose. Twiddle with the settings until you find one that is a good compromise between file size and quality.

Helpful tips for using images...

Images can help to bring visual interest to your site, even if you don't have a need for diagrams or illustrations.

  • Graphic headings or titles
    Lots of site use graphics with text for headings or titles. While some web-purists will protest, this is definitely one way to make your site look a little more professional. Make sure that the font you use complements your logo as well as the other text on your site. You can make graphic headings in a photo editor and save as a .gif.
  • Use color wisely.
    For seamless integration, choose photographs that compliment the color scheme or motif of your site. For example, see how Microsoft matched the heading colors with the photos on their Windows XP info page.
  • "Clickable" areas
    You can often use images as a "clickable" area - almost like a button on the page. For example, look at our home page. The "favorites" and "product support" illustrations not only tell you what the section is about, but also allow you to click into those pages.
  • Make your point
    Use photos to illustrate a point or send a message. Integrate or place text on a photo with some kind of tagline.

Stock image resources

If you don't have your own photos to use, there are lots of places where you can find quality images online. Look for royalty free* images - they are generally cheaper and have a more flexible license. We've ordered these links in the order that we look for graphics.

*Note: What's the difference between "rights-managed" and "royalty-free" images?

Rights-managed photography is priced based on the buyer's intended use, as well as factors like the size of the photo, how long it will be used, and the distribution of the photo. The people who sell rights-managed photography track the usage so that they know how the photos are being used. Rights-managed photography is generally more expensive.

Royalty-free photography is purchased once by the buyer and can then be used multiple times, for multiple purposes. Licensing agreements may vary, so you should read the agreement carefully to see what you can or can't do with the image.

Next: Bells and Whistles

home - contact - policies