RSS Design

Category "Design"

 

"Above the Fold" and Designing for the Web

By Nathan Moore
July 26, 2008
 

I think too much attention is given to the concept of “above the fold,” especially in regards to web design. This concept was borrowed from older print design, and more specifically, newspaper design - Old media.

These days, many old-minded people still assign an unreasonable amount of value to “above the fold” on the web - or as it is now commonly referred to as… “above the scroll.” This is the portion of the page that a user will see without having to scroll down for more content.

1. The “Above the Scroll” area is important.

Don’t get me wrong. The top portion of the page is important. There is no doubt about that. However, the major problem is that the first reaction to the sense of “valuable real estate” is to try to cram as much information in the “above the scroll” area as possible. This is just wrong. Prioritize the information and have a keen editor’s eye.

2. User screen resolutions are different.

The days of 99% of users having a 800x600 screen resolution are over. Screen resolutions are so diverse now that it is difficult to tell exactly where the scroll line occurs. Because of this, the thought of defining the line becomes extremely vague.

3. Users know how to scroll.

For goodness sake, most mice now have scroll wheels. I think that many designers disregard the fact that users can scroll down for more content. In fact, most users scroll the entire page even if they do not read it… It is called skimming and users probably do it on your website more than you think. Learn to work with conventions, not against them.

When having a site designed for you, make sure the space at the top of your pages is used wisely, but do not overdo it. Define a list of the most important things on your site or page and use that as a guide to arrange the content effectively.

 
 

Spice Up Your Web. Try a Pattern.


July 07, 2008
 

[by Katie Laxton]

Some of my favorite blogs have one thing common. Sure the content is great but with all the blogs available to read, great content isn’t too hard to come by. No, my favorite blogs are like my favorite men…they are all quite easy on the eye! They not only inspire me with their wealth of information but with their wonderful graphic content as well. I mean, is having both too much to ask for? A teacher of mine once spent an entire class period talking about the fact that humans do not think with words, they think with images. I am seeing examples of this in new ways everyday. Today in particular, I notice it through background patterns.

Since web design is no exception when it comes to following optimal column width and with computer screens forever getting bigger, browser windows often leave plenty of blank background space. While it is important not to distract the viewer from the information your site is trying to get across, it never hurts to spice things up a little. Sure, backgrounds are neutral for a reason but that doesn’t mean you have to use a solid color or, for the more adventurous, a gradient. Patterns aren’t just for fabric and bad 70’s wallpaper any more! There are some great sites out there that provide some wonderful (and some not so wonderful) background patterns free of charge. Just to name a few of my favorite…

http://www.k10k.net/pixelpatterns
http://www.squidfingers.com/patterns/
http://citrusmoon.typepad.com/citrusmoon/
http://www.noqta.it/dromoscopio/
http://playground.everydayicons.jp/

Just be sure to choose wisely. Some of the patterns are so creative and vivid they may be the only thing a visitor sees on you site. Enjoy!

tags:  backgrounds  Design  patterns  visual  Web Design  website 
categories:  Design 
 
 

Information Architecture: Evaluate, Decipher, and Organize


June 17, 2008
 

There are many times in our lives that we look around and find ourselves overwhelmed. Occasionally those moments for me are when I am confronted with a lot of information at once. When these moments happen I tend to be reading directions or filling out forms.

Businesses spend so much of their focus on getting people to purchase their products but drop the ball when it comes to helping those customers use their products. Directions seems to be only an afterthought or at the most, minimally considered. There has to be a meeting of minds between businesses and designers about who needs to structure this information. While business should always keep their bottom line in mind, it benefits them to know their limitations. A good designer should be able to evaluate information given to them and decipher how to organize it so that users can follow it with ease.

We, as designers, need to remember that while creating posters and cd covers may be more fun than designing forms and directions, we have an opportunity to change tasks as frustrating as filling out forms and assembling furniture into an easy experience that people can walk away from with a smile. The tasks of a designer are expanding now more than ever. There needs to be an emphasis of the fact that the most successful designs are created with the smallest details in mind and to accomplish that you need a designer.

 
 

The “Click Here” Disease: Click Here to Read More

By Nathan Moore
May 13, 2008
 

You should never use the words “Click Here” in a text link. And just to be clear - the title of this post should be characterized as ironic.

The “Click Here” text is one of the key signs of unprofessionalism on a website, and here is the conceptual equation to prove it: “Click Here” != Professionalism

(It should also be noted that there is a positive correlation between frequency of “Click Here” links and really, really bad design, but that is not the point here.)

The web has conventions. Conventions exist for a reason. Strategic developers and designers know how to utilize conventions to cut out excess fat, which ultimately leads to more elegant and more effective communication.

CONVENTION: Links are underlined and usually a different color.

Anyone that has used the Internet understands that when words are underlined, they posses the ability to be clicked. The action of clicking will deliver a new page or other expected feedback to the user. When the text “Click Here” is used, the understood link convention is not being utilized.

23121985.jpg

When I was brushing my teeth the other day, I noticed that the cap on the toothpaste did not read “Twist Here To Open Toothpaste.” There is an understood convention by anyone that has opened a tube of toothpaste that to open, one must twist the cap. However, some futuristic toothpaste tubes (you know, the ones that stand on their own) often have flip-caps. These flip-caps usually have some sort of text or graphic to cue the user to flip the cap in order to open. The convention for the toothpaste tube interface (twisting the cap) is in violation of the actual interface in the case (flipping the cap), thus a cue needs to be present to increase usability. (However, the flip-cap is becoming used more often and consumers will eventually adopt the flip-cap as being a common convention - at which point, no cue will be needed).

On the web, it is very easy to cue the user that a link exists: links are underlined and colored. If this is true, no further cues need to exist. Any text that follows this convention will be understood to be a link. Thus, the “Click Here” text is not necessary.

Consider the following examples:

Old: Click here to watch a video of my son golfing.
New: Watch my son play golf
Or: My son and I golfed on Tuesday (watch the video)

Old: Click here to register.
New: Join the Community

Old: Click here to sign up for the email list.
New: Sign Up for the email list

Using web conventions to help your text links rather than adding excess text will help your website usability, and the world will be a happier place.

It should also be noted that users expect your links to be underlined and in a different color from the normal copy, otherwise the convention breaks and usability is tossed out the window.

Subscribe to the Anthology Creative blog to catch future articles about web design, development, and common sense.

 
 

Building Websites with Effective Communication

By Nathan Moore
April 08, 2008
 

“The problem with communication… is the illusion that it has been accomplished.” -George Bernard Shaw

Communication is essentially what Anthology does. Sure, at the surface, we create some really nice designs and we develop functional websites - but websites function as communicative devices - and as I explored in The Anatomy of Great Design Part 01, great design starts with effective communication. So, the goal at the core of all of this is to communicate to your audience.

As simple as this concept may seem, it is overlooked far too often.

Let’s take websites for example. As companies explore building a website, the natural tendency is to make an attempt to impress potential customers. Too many times, the requests are filled with desires to hijack the user experience (not intentionally), create menus that move and sparkle, and bring attention to non-important items. These requests have the same goal as an executive that purchases a flashy sports car just to “show off” when meeting clients. At the end of the day, the car may be impressive, but whether the job is done effectively is what ultimately matters to the client.

When this tendency to impress is extended into web development, it cripples the ability to communicate effectively. Flashy design, gimmicky features, and unnecessary copy cloud the ultimate goals of the site. And, unfortunately, too many times, the web developer has to lay down and submit to the clients requests - and when that happens, the job is not being completed with excellence.

The problem is that when the site is finished and everyone has gone home, the company may be thrilled with the impressive new website, but if it does not communicate effectively and meet the needs of the users, it is ultimately a failure - it is the illusion that communication has been accomplished.

The next time you are building a new site for your company, keep these things in mind:

1. Deny The Desire To Impress - Users will only be impressed the first time they visit your site. After that, the only thing that keeps them coming back is functionality and ease of use. If you can say “that is coooooool,” it probably is doing more harm than good.

2. Develop A Site For Your Client, Not Yourself - Keep the user in mind when determining how you site will look and how it will function. The site may be about you, but it is more about your user.

3. Determine The Key Goals - And do not add anything to the site that does not directly or indirectly encourage the success of these goals. Stay focused.

Agree? Disagree? Feel free to be heard in the comments section. And as always, remember to subscribe to the RSS for future posts on design, web development, and online marketing.