Visual Cues

Our lives are full of visual cues. Stop lights on the streets. Flashing lights on telephones. A web site’s page has cues, too. With 40-million web sites on the internet, there are thousands of cues to learn, figure out how to use, and remember. PixoBebo has a few visual cues that I’m proud to present.

The first visual cue isn’t really a cue, it’s a background. As I scoured the web looking for different features to incorporate into PixoBebo, one that caught my eye was that my favorite sites had a background and color scheme that was distinct, yet got out of the way of the information presented.

PixoBebo’s color scheme also happens to be a shade of my favorite color, lavender. On that backdrop of innocuous color is where content resides, and the various visual cues present themselves to the reader.

For example, most links on the home page and elsewhere have their own underlines to represent a link. There’s no magic in that. Early web page standards using basic HTML had color coded links that were underlined.

The problem back in the early and late 1990s was that those links were functional features yet ugly as sin. These days it isn’t so easy to determine what is a link and what is not.

Standards evolve. Notice the horizontal navigation bar below the PixoBebo logo. Those are buttons, links, which refer to different sections within the site, but don’t contain any underlines to signify they’re links, yet, by passing your mouse pointer over the button, you get a visual cue.

In the left column of each page is a vertical menu. Horizontal or vertical? Which is best? Why two when one will do? Actually, I’m just showing off a little, being new to the world of CSS.

Both the horizontal and vertical menus are designed using CSS, cascading style sheet elements, and don’t require Javascript. Yet, each button provides a little visual cue that something will happen when you click.

Breadcrumbs are a staple of many web sites these days. Breadcrumbs are the visual cue which tells you how far into a site you’ve navigated, according to page and section.

Again, notice the breadcrumb trail right below the horizontal menu bar above. There’s a link to my About page, though there’s no underline. Mouse over the words ‘Kate MacKenzie’ and the hover will change the names to white, indicating a link.

The same holds true for the Home link, the Category link, but not the title of the page, since that’s what you’re reading now. Those little visual cues helps us to navigate a web page, though the cues are often quite different site to site.

Back to the underlined link cue. Roll your mouse over a link with the article, such as this one, which links back to the home page. Notice that the background changes color, as does the bottom underline. That’s by design. Subtle, yet effective.

As I continue to develop the site I’ll offer additional tips and tricks and work toward maintaining a transparency between what I do to build the site and how the site is presented.

Yes, I’ll be happy to entertain suggestions.