They had an outdated logo that was a very detailed drawing of a building crane and wanted something much simpler. They had lots of high quality photographs of men on the job, and the sheer size of the pipes they installed dwarfed the men inside them. If a pipe were to burst under the freeway, this is the company the city calls to fix it.

So I’m thinking: Big. Pipes. Underground. Drilling. Water. Construction.

They tell me the only caveat is that orange should be in the color palette as they already had this color on much of their equipment. The logo should be readable really small and also really big. On the side of the freeway big. I rolled up my sleeves and started drawing.

Here is a selection of some of the designs I presented.

This first design really spells out that this company drills holes in the ground, and makes use of the type itself. The next design is more abstract, and could give the feeling of being either below the surface, in a trench, or in a dugout area.

This design drew heavily on a pattern that I saw on the front of one of the drills I photographed. Though abstract, it conveys a sense of strength and toughness.

This logo takes a bird’s eye view of a pipe, and the outer shape was taken directly from a pipe I saw in one of their photographs. The configuration with the logo in the center of the type gives it a more formal appearance.

This version takes a more illustrative approach, giving a three-quarter view of a pipe. I’ve also utilized gradients, which is a less traditional, but very contemporary approach.

This next logo is my personal favorite, as it is involves simple shapes, but gives a sense of perspective and also of equipment/construction. The client liked it, but wanted something simpler still.

I took it one step further toward simplicity, and gave the orange more priority.

In the end, the client opted for the utmost in simplicity, a drilling down of sorts in their quest for visual representation of their field, and asked for a plain circle. They liked their previous typeface, Bauhaus, but wanted an update, so I chose Utopy, which is very similar to Bauhaus, but has breaks in the letterforms. The lowercase “b” feels somewhat pipelike, and they were very happy with the finished mark.

1. Use high-quality images. Studies have shown the people like to look at good quality photographs or illustrations on a page. Unless your design sensibility is based on a “low rez” aesthetic, you are better off using the sharpest clearest image you can take, hire or purchase—and, the bigger the better. Just think HDTV. People love those 50″ HD televisions, and people love IMAX. But, you are dealing with variable screen sizes, so you must compromise and think about who your viewers might be. Will they be looking at your site on an iPhone or a netbook? If so, you might want to rethink this strategy. If they will likely be using a larger screen, you will still need to consider download time, so you will need to become familiar with image optimization techniques.
2. Generous White Space. One of the simplest things you can do on a website to make it more pleasing to the eye is to make sure your boxes have a generous amount of white space around the text blocks. This makes it easier for the eye to rest on a particular image or passage. The opposite of this scenario is when you see type running almost to the edge of its containers. This makes the whole page look “gray” and the eye has no place to rest. When I see pages like this I automatically know the creator has had no design training. As you can see from the example below, with such tight margins and no hierarchy, the eye has no place to land and so just gives up.
3. Typography.What is the point of paying attention to typography? The same principle applies here, too. Your goal is to make the content as easily digestible as possible. This can be achieved with type. If you have two words together—for example, READ THIS—you may decide to make one of them bold to create interest: READ THIS. Good typography helps guide the reader to the important places on your page, and makes the words and letters pleasing to the eye. Knowing the difference between a hyphen, an “en-dash” (width of an “n”) and an “em-dash” (width of an “m”) will help your type look correct. A brief explanation is that hyphens are used to hyphenate words, en-dashes are used when you are defining “from” something “to” something else, like 9 a.m.–5 p.m., and em-dashes are used to set off a phrase in a sentence (see READ THIS example above).Some other tips: always use curly quotes (rather than inch marks) for quoting, an ellipsis rather than 3 periods, and utilize capitalization and small caps for titling.
4. Hierarchy. All the points I am making in this list are designed to help you create a hierarchy of information on your page. Think about it. Your reader has to start somewhere, and is relying on you to let them know what is most important to read first. Newspapers do this really well. The story that the editor feels is the most newsworthy will have the largest type size and be placed highest on the page. Whether you choose to read it is up to you, but it grabs your eye first. Where will your eye wander next? Likely to a large photographic image, or a bright color or the headline that is the next size down. Also, Western readers have been trained from a young age to read from left to right, and from top to bottom. Work with what the eye does naturally, and put items in the eye’s path that you want to receive attention.
5. Pull Quotes and Blockquotes. Two under-utilized tools available to draw attention to a line or paragraph of text are pull quotes and block quotes. Pull quotes are frequently used by magazine layout designers as a way of grabbing the reader’s attention quickly, as they only have a few seconds before people may close the magazine. If you can find a juicy phrase in your content and set it off in a box at a much larger size the chances of your page getting read go way up. Blockquotes serve a similar purpose but are more often used when quoting content from another source. If you don’t ever quote from other sources, you might come up with another use for your blockquote designation, and style it for the purposes of creating a small sidebar or a long pull quote.
6. Color. Color is an extremely powerful attention getter, and a page designer has to be careful not to go overboard. Certain colors, like bright red or green, are very effective in small doses, and off-putting if used over too broad an area. Think of it like house painting. What works in large areas on a house will likely do the same on a page. One of my own pet-peeves (but I’m sure there will be many people who disagree) is white text on a black page. There may be certain reasons why you would want to send a particular “rock-n-roll” message with this color scheme, but it is very difficult to read text like this, especially on a monitor. I find myself navigating away from all pages designed like this for this reason only. This does not mean that you cannot reverse type out on a dark background successfully. You just have to be careful about not using too much contrast. Both too much and too little contrast will make a page hard to read. Remember, the easier a page is to read, the more time people will spend reading, as long as you know how to craft a sentence.
7. Writing. Writing is perhaps the most overlooked aspect of creating a compelling website. Once you’ve designed everything so it will make people really want to read your content, you had better have something to say. Because of the large amount of effort required in building a site, people often run out of steam when it comes to assembling content, and they end up with the dreaded and entirely lame “this page is under construction” phrase. Fer cryin’ out loud, don’t let yourself do it. Don’t announce to the world you have a website, get people to come in and click on stuff and then present them with the “under construction” message. Doesn’t matter if you found a really cutesy blinking animation of a man with his trousers down, people aren’t going to like it any better, and likely they won’t be back.
8. Motion. Motion is similar to color as far as powers of seduction are concerned. Just think about those annoying mortgage banner ads with bad animations of 3D people dancing and gyrating. We can’t help but look no matter how hard we try not to. And—advertisers wouldn’t use motion if it didn’t work. The good news is that both you and I know better, and would only use it for good. So get people’s attention with motion and give them information relevent to what they are seeking. The bad news is that as of this writing the iPhone still won’t allow Flash, and if you want to appeal to the mobile market, you might as well use still imagery. That said, however, there are still all the people visiting  your site from a computer, and they might find some animation appealing. Make sure that your site has the Flash degrade gracefully so that those that don’t have it are served up a nice static image instead. You may also want to utilize more subtle motion on your site, in the form of AJAX-powered sliding menus. If I’ve learned anything from working on the web, is that there is always more than one way to achieve your goal.