That’s what it’s all about in Web design. I suppose you could argue that it’s true in print as well, but on the Web in particular, we designers have to pay close attention to the interplay of color, font, and texture across a large number of pages, sections, and divisions. If you’re a designer, you probably think that’s a blinding flash of the obvious, but it’s actually shocking how many sites out there seem to pay little heed to any kind of coherence in these areas. That may be due to a site evolving over time (I’m sure work I’ve done isn’t perfect), or perhaps more than one designer was involved in different stages.

Some Examples:

You’re on Page 1 of a site and all the action buttons are blue. You go to Page 2 of a site, and all of a sudden there are action buttons that are green. Why blue on one page and green on the other?

You’re looking at a diagram that puts a metallic sheen on the elements. Then you go look at some similar graphical elements further down the page and they look plastic and glossy. Why are there two different textures on one page?

The headline font is Helvetica on the blog home page and then it’s Georgia on the individual post pages. Should all headlines across a site be uniform?

Now let me say this: I don’t think it’s bad to have a little variation. Variety is the spice of life. Sometimes you may want to consciously use a different headline font in a particular case for a different emphasis or emotion. Sometimes you may want to use a secondary texture on some elements to make them stand out. All I’m saying is: THINK! Use your head and really think through why you’re picking a certain color, font, or texture. Is it because it looks “cool” to you at the time or is it because of a specific reason that is consistent and integrous with the overall design of the project?

Pay attention.

Awesome must read article by a master on user interactions and software design. It’s amazing to me how often this rule is violated. I’m actually going to comb through our own site and see if there are any missed applications of this important principle.

“Even though it’s an ancient insight and is covered in countless books and courses, we frequently see users overlook features because layouts violate the closeness rule. When buttons, drop-downs, checkboxes, or other actionable GUI elements are too far away from the objects they act on, people don’t see them. Often, users don’t realize what they’re missing and simply assume the features aren’t available.”

I was just looking at some impressive screenshots and videos of potential user interface interactions for Microsoft’s Courier, a double-page concept tablet with both touch and pen-based input geared towards e-books and creative/productivity applications.

It raised some thoughts for me regarding interface discoverability. When approaching computer interface design, whether for Web sites or applications, it’s not enough to create something that looks cool and works well. You have to make your experience discoverable. If a certain gesture across the screen activates new functionality, how will users know that? If a click or a swipe on an object makes it do something different, or a menu pops up when holding a device a certain way, or data is transformed by moving a pointer or pen around it, how on earth will anyone find that out? Will users be trained ahead of time to use your software or device effectively? Of course not! I know people that have used computers for years and don’t even realize you can use Command/Ctrl-C for copy and Command/Ctrl-V for paste. It’s unrealistic to think that people will somehow figure out how to do something that isn’t extremely obvious and begging for attention.

I’m not dumping on Microsoft here. Apple is not immune from such criticism either. How many people know you can shake your iPhone to undo something? I forget all the time. And it took me forever to figure out how to stop my home screen icons from doing the shaking dance when I was moving app icons around. Now I know I need to press the home button again, but, geez, how was I supposed to know that? Also, why do most apps have their settings available from within the app itself, but meanwhile the system-wide Settings app also has app-specific settings? Two locations…redundant. I seriously doubt most people will think to look in Settings for something specific to an individual app.

I remember a long time ago, I was developing an e-commerce site for a maker of Celtic crafts and clipart, and for the navigational element at the top of each page that would bring up the customer’s shopping cart, I created a very simple cart icon. It looked exactly like a shopping cart. Guess what? Nobody knew they needed to click on it to get to their shopping cart. So I added the text “Shopping Cart” next to the icon. That worked.

I learned a valuable lesson that day. Just because YOU know how something works that you’ve just designed, doesn’t mean anyone else is going to know how it works. Make it discoverable. Make it obvious. Then make it more obvious. Assuming users need to learn new tricks in order to work with your interface is debatable at best and hubris at worst. The more you can spell out in simple visual ways (and even, gasp!, help text) how something is to be operated, the better your UI will be.

As a Web site designer, I’ve spent many years looking at many sites ranging from gorgeous and engaging to annoying and frustrating. Through experience as well as personal trial and error, I’ve developed an intuitive sense of some key elements that can make or break a Web site. Recently, as I was contemplating a couple of business presentations looming, it dawned on me that I should take some of the knowledge I’ve gained over time and apply it to a fictional makeover of a Web site, showing how to go from ugly to beautiful as well as from ineffective to highly functional in a way that benefits the business needs of the client.

In the blogging tradition of writing up design showcases, I will now present an A/B comparison of a fictional company based in the North Bay Area in California called Brighton Stone & Tile. In this imaginary scenario, they’ve been in business for over 20 years and are well respected in the local area. They want to take that respect, experience, and knowledge and translate it to the online world.

The “Before” Critique

I began my experiment by firing up Photoshop and creating what is probably the ugliest home page I’ve ever designed (if you can call it that) in my entire life. I broke every good rule in the book and implemented some elements similar to poorly-done Web sites I’ve seen in real life. Let me now walk you through some of the reasons why this home page looks so awful.

Hover over the image to see the callouts

As you can see, the color scheme chosen here is unattractive, and there is little thought given to a pleasing grid-based layout. The flow of the content is vague and unsettling, and it’s not immediately obvious what a visitor should do next. Here are descriptions of the main areas referenced in the hover-state image above.

Poor Logo Typography

The font used for creating a logo needs to be bold, timeless, and evocative. The font you see here is very flimsy in appearance, and the spacing between the lines is far too small. It also seems to be stretched horizontally. In a setting such as a comic, a font like this might be appropriate, but not for a retail company selling tile. Also, the way the lines of the text are centered gives it an odd top-heavy feel.

Incorrect Header Graphic Placement

Putting a tile graphic in this corner of the screen does very little to provide an eye-catching showcase of tile design. It takes up too much space, and the color of the tile is too similar to the background shade. That criticism also applies to the slogan underneath, which looks bad as the text is not anti-aliased and, again, the choice of font is questionable.

Unclear Navigation

The most essential part of navigation is to direct people to what they’re looking for. The secondary function is to invite people to learn about additional details. In this case, the navigation is far too vague. Our Products — does that mean products that Brighton makes, or products that Brighton sells? What kind of products are they? What categories are available? Can they be searched? In addition, the alignment of the images is off, and the font color for the links is almost the same as the background requiring garish drop shadows to make them stand out.

Page Copy Needs Help

The main text shown on the home page contains common typos and is hard to read. The copy isn’t horrible, but it needs improvement. Two major issues are: what does it mean to be #1? #1 in sales? #1 in influence? #1 in longevity? Also, this is not the right place for contact info. That should be highlighted in its own area.

Latest Special Formatting Way Off

In this area, three main problems are evident: the text wrapping around the product image looks weird, the product image size is too small, and the “Click Here” link doesn’t provide a compelling call to action.

Unnecessary Gimmicks in the Footer

Though this practice is going out of fashion, I still see it a lot. The footer, instead of containing useful and relevant information, contains self-congradulatory info that just looks cheesy. The ranking of Brighton on a site the visitor has likely never heard of is unimportant, as is the page’s hit count and what browsers you like. What’s really important is why someone should stick around and give Brighton’s Web site more of their valuable time.

The “After” Critique

Once I had lost my appetite for simulating ugliness, I turned my attention towards crafting an eye-catching, professional, and genuinely useful home page for Brighton that would do justice to their standing in the local community and attract new customers online.

Hover over the image to see the callouts

To begin with, this packs far more of a visual punch. There’s a well-defined and tasteful color scheme, and the design style features subtle shading and the appropriate use of light and dark hues for contrast. There’s a sense that the layout is based on a grid paradigm, which allows the eye to scan through the content more effectively. There’s more thought given to what each element on the page will be used for and how to display it in a pleasing manner.

Good Typography and Contact Info for the Header

The typeface used for the logo, sporting all-capital letters with serifs, evokes a classic feeling appropriate for a company selling tile, a building material with thousands of years of tradition. The change of font size between “Brighton” and “Stone & Tile” draws the eye’s attention to what matters most. The addition of small tiles placed in a 3D fan to the left of the company name helps reinforce the nature of the business. Also, the header is completed by the address and phone number of the company making it very obvious where their warehouse is located and how to reach them.

More Useful Navigation

What is someone who goes to an online tile retailer looking for? Most likely tile for a specific area of their house or garden. Therefore, several main categories are displayed up front to make navigation through Brighton’s product catalog very clear. A few extra links appear below the main bar, and a search field rounds out the navigation area. Good use of links should not overwhelm or confuse a site visitor, but should engage and invite them to explore further.

Attractive Graphics and Copy Make the Home Page Appealing

Nothing catches the eye more than tasteful, creative use of product photography. So what better way to sell a tile retailer’s products than showcasing how beautiful tile can look when installed? Whether static or animated, the bar going across displaying different styles and places where tile can be used is a great way to keep people on the Brighton site. A bonus would be to link to different areas of an expanded photo gallery when the visitor clicks on the bar.

In the main text area, three guidelines drove the style of the content. First, it had to give a concise history of the company to establish credibility and explain the site’s demographic. Second, it had to appeal to select local audiences (in awareness as well as search engine traffic). Thirdly, it had to feature a catchy headline that made sense. Remember the critique of “#1 tile company” for the Before design? In this case, “Most Respected Tile Supplier” was chosen because respect cannot be measured in numbers but in influence, reputation, quality, and longevity — all factors Brighton wants to convey on its home page.

Attention-grabbing Latest Specials Spotlight

With a larger thumbnail of the product photo, an easy-to-spot price, a better description, and buttons and links to buy the product or find out more, this is a far more effective shopping experience. In a live home page, there would likely be additional specials in that sidebar and possibly in a separate region below the main content.

A Footer That Works and Drives Traffic

In the useful tradition of “fat footers” whereby detailed navigation (in a sitemap-like format) and contact information is presented, this footer will drive traffic to other areas of the Brighton site and help answer visitors’ pressing questions in a way the Before version of the footer never could. As the site evolves and changes, the footer can be easily updated to support new pages and areas of content. In thinking about the footer of an online retailer, an important question must always be: how can the footer enhance the shopping experience for customers?

And there you have it. A fast-paced exposé on some key aspects of effective and attractive Web site design we as designers must always keep in the forefront of our minds. As I work with clients to refine a mockup and polish initial content, I’m constantly trying to remember to ask important questions both from a visual standpoint as well as from the visitor’s perspective so that the final site enhances the service, reputation, and ultimate success of the business or organization.

I hope you found this article helpful, and if you have any questions or suggestions, please let me know in the comments area below. Thank you!

Jared White is Creative Director at Siteshine, a Web design and social media company based in Santa Rosa, CA. Jared is passionate about user experience and making complex technology seem simple. When he’s not wearing his Web designer hat, Jared enjoys composing and listening to music, reading books on spirituality, and spending time at home with his wife and his cat, Tiger.

A bit of a humorous look from Chris Coyier at all the different skills, tools, and techniques designers need to know. I fear it’s only going to get more complex from here on out!

Designers These Days…
… have a good design sense and understand the fundamentals / design principals.
… know all the major design software including the entire Adobe Creative Suite.
… have some basic video editing skills.
… know HTML, CSS, and JavaScript.
… know enough about server-side languages (PHP, ASP, Ruby, Python, etc) to understand how they work, what they do, and the possibilities of their use.
… know about servers, hosting, domain registrants, DNS, etc. Setting it up, and fixing it when it breaks.
… know OS X really well (and enough Windows to get by) or know Windows really well (and enough OS X to get by) and know a huge variety of utility software that goes with.
… are good photographers.
… can color correct photos and work in RAW.
… can cut clipping paths or otherwise extract objects from photos.
… have a killer online portfolio.
… are a personable, nice people that are good with clients.

Hat Tip: @smashingmag

Happy New Year! It’s 2010, wow, a whole new decade.

I just read a very practical opinion piece by photographer Scott Bourne. I thought it was quite relevant to the type of creative work we do as Web designers. Money quote:

Ahh pictures – you know, the things that come out of the camera? Some photographers spend WAAAAAY too much time thinking about gear and process. David duChemin’s tag line is “Gear is good – vision is better.” Well I think I might adopt a tag line of my own. “Process is good – but pictures are what matter.”

In all the years I’ve been selling images, not one (non-photographer) client has asked me what f-stop or Photoshop filter – or RAW converter I used. The clients just care about the end result – the photographs.

Yes, and our clients don’t really care what language I prefer writing code in or how awesome my image slicing skills are or how beautiful my CSS selectors are constructed under the hood. They just care about about the end result – an attractive, usable, and effective Web site.

The New York Times just launched a new Web site of sorts called the Times Skimmer geared toward making it easier and more fun (and little more print-like) to find and read stories. This got me thinking: what makes a Web page a Web page? The Skimmer is hardly your typical home page. It feels more like you’re using a device, like you’re interacting with a multimedia application. And the design is very different from the usual fare on Web sites. I noticed they’re making good use of custom font faces via TypeKit, and when you click to read a story from their regular Web site, it appears within an iframe. Funny — are frames back in vogue?

I’ll tell you one thing. Though I personally am not a regular reader of the Times, an interactive reader like the Skimmer just might convert me. And that little “Presented by Blackberry” ad on the top-right is a far more effective advertisement in my opinion than most ads. It’s just simple enough that I actually looked at it and appreciated its simplicity. Most Web ads I’ve grown accustomed to ignoring!

What do you think? Would you read the New York Times regularly using an interface such as the Times Skimmer?

Hat tip: ReadWriteWeb