Posts Tagged web design

Clear calls to action

After redesigning a couple websites recently, I’ve run across a common mistake that I see frequently: missing calls to action on key pages.

Read the rest of this entry ›

Effective “About us” page tips, best practices, and guidelines

I scoured the Web for examples and best practices for About Us pages on websites. I compiled an article with tips, best practices, and guidelines for creating an effective About Us page in the Playbook.

Topics covered in the article:

Read the rest of this entry ›

Design trend: list view icons

It seems that web designers are starting to standardize on list-view-switcher icons in their web applications. There are usually icons for some combination of these list views:

The following are some examples that I’ve noticed.

Read the rest of this entry ›

Website design should be like Mario’s nose

You can’t get from Donkey Kong to Mario Sunshine in one project, nor should you try. You should be building and maintaining your website in an iterative manner. Read on to see why website design should be like Mario’s nose.

Read the rest of this entry ›

Companies that show, not just tell

I wrote last week about showing, not telling. But I didn’t give any examples. Well, here you go.

1. Silverback by Clearleft

They give us a sentence, 6 bullet points, and a dead-simple diagram showing what it does. They even show us a video demo that was created using the product itself. Brilliant.

Silverback Diagram

Read on for 2 more examples.

Read the rest of this entry ›

Page heading at end of breadcrumbs

I’ve become a fan lately of a small trend in breadcrumb design. Some sites are starting to put the page’s header (in <h1>) at the end of the list of breadcrumbs. It’s an interesting way to show how the site’s hierarchy leads up to the current page.

On Adobe’s site:

Adobe Breadcrumbs

Read on for a couple more examples.

Read the rest of this entry ›

Creating great web pages

This simple chart by Jessica Hagy is perfect when you think about web pages:

Little information leads to confusion. Too much information leads to confusion. Somewhere in between leads to the least confusion.

A single web page addresses a single topic. As the amount of information on your site grows, each page’s ability to walk this fine line grows more important.

Include the right amount of information—no more—and give the visitor a clear set of next steps. (You may have heard of these next steps referred to as “calls to action.”)

Even as a writer, you are also a designer.

Read the rest of this entry ›

Designing navigation for web applications

I’m working on a web-based administrative application where you can install remote applications. The goal is to have a platform that provides a consistent UI, somewhat like SharePoint. But less assy in general and more flexible than what most portlet servers allow. Thinking about the way that applications work on Facebook is a good way to think about it.

Read the rest of this entry ›

When using no stock photo is better

I’ve been ripping on other sites lately, but I’ve just been overly amused lately at the poor quality of these scammers’ sites.

Take a look at the primary photo used on the home page of BackLinkPageRank, a link exchange service.

Free Link Exchange, Link Swap and Link Trade Directory

What the hell does that photo have to do with their service? Are free link exchanges fun for the whole family? Will your little girl laugh with glee as you gain low-quality links back to your site?

I’m hoping that the designer of this site thought, “Well, it’s better than empty space.” Then they would have at least a little saving grace.

But in this case, a better choice would have been leaving the space empty.

Read the rest of this entry ›

What else does your message say?

I submitted a support ticket on behalf of a client today in their e-commerce system. After filling in the fields and submitting the form, I got this message:

In very alerting red text: "Your support request has been submitted."

At first, I thought I had made a mistake. An exclamation point icon? Bold red text? All of these visual cues tell a completely different story than what the message says.

What do your messages really say in context with visuals? And do you really want for your message to make someone feel undeserved panic, even if it’s just for a couple seconds?

Read the rest of this entry ›