June 23, 2005

A Matter Of Style

Here's a design-related topic. Oh boy!

Recently I was involved in discussing a redesign for a given web page. We picked an element that would be used (several times) on the page. It consists of a left-floating image of some type that shares space with a paragraph or two of text. The paragraph would specifically mention different areas of the website with the relevant text within the paragraph pointing to the specified website. The idea here is that this element is better than providing just a list of links, which is what the pages being updated currently are like.

Of all the things to get hung up on, I focus in on the image being used. There will be several of these elements grouped together on the page. The theory (mine anyways) is that you provide an image, a small image no more than 100x100 pixels, that can quickly convey the basic subject area that the paragraph will discuss and provide links to.

So a technology element would have maybe a picture of a computer. An athletics section might show someone playing baseball... and so on.

The example images used in the demo that was put together covered a wide area. Basically, a normal picture just shrunk down to 100x100. My feeling is that doing this puts way too much information into such a small space. The subject matter could become clouded, and the image itself a bit blurry and perhaps not very "readable".

My solution would be to use a cropped portion of the image that had only a couple objects in it. That way the elements in the image of easy to distinguish and, by being more simple in subject matter, easier for the user to associate and remember the association of that image to the subject matter at hand.

Here's an example of the image covering a large area (with junk text so don't bother clicking on the links):

Lorem Ipsum

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

And now the same example but with the close-up image I was talking about:

Lorem Ipsum

The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum" by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.

To me, the close-up is a lot simpler, a lot easier on the eyes, doesn't create an overly-busy area, and pages the page and information a lot easier to digest. With fewer, more pronounced shapes and colors it is easier for the image to become a symbol of the text it is to represent.

So what do you think? I'd like to hear from you guys. If you have any links on this subject, I'd like to see them as well. I've been trying to research this specific issue, but really haven't found anything. I've found a bit about symbols and some references to icons with simple subjects make better icons, but even that might be a bit of a loose interpretation.

Thoughts or ideas or any rambles are greatly welcomed.

Posted by Ruthsarian at 04:47 PM | Comments (4)

Comments

I agree with you wholeheartedly. I work at a hosting company and I've seen my fair share of layouts. I've done my design reading, my own design work and have seen hundred of templates online. I'm not a design expert but I know enough about design to know what makes a good symbol or logo is something simple and right to the point. You don't want to much because then it defeats the purpose of that symbol or logo. You want the symbol to be unique, appealing and at the same time simple so it flows with the rest of the site and does not bother the user. I like your second block as it looks a lot better. If you look at any other professional templates they all do the same. They zoom in to a specific portion of the image, as the original would have been to zoomed out. Posted by: Javier at June 24, 2005 12:41 AM
I'm going to agree with you on this one. The second example will be far easier for a mind to digest if it's going to be listed with others. You mentioned using an image that fits the theme of the page it's linked to, with athletics and technology that's easy but sometimes those themes are pretty tricky to pin down with a single simple image, so you might want to think about this, you could use a cropped portion of a "parent" image the user will be seeing if they follow an associated link. I think this is a pretty effective way of improving users retention of what they need to click to get to where they need to go, because these links will probably be getting revisits. Just a thought. Posted by: Adam at June 24, 2005 10:03 AM
I too believe the second image with the close crop is more effective. I was able to spot the brand name on the laptop in the picture. You might want to patch that up. Also, since you are shrinking down such a large image, the unsharp mask feature in photoshop would come in handy to clear up the details. If you don't know what I'm talking about, just google it. Posted by: Marcus at July 23, 2005 04:16 AM
Excellent demonstration. Some of us get so hung up on the code that we forget to look at the whole, the trees and not the forest. Your example is a good lesson in simplicity. Posted by: meg at July 23, 2005 12:58 PM

Post a comment










Code:
Type Code:

Remember personal info?