Elastic vs. Static Design

Posted on Apr 30, 2007 by Damien to Web Design

The debate continues as to whether or not to design/construct CSS based sites in a static or elastic width/height. To clarify I’ll first explain the two.

Elastic sites allow for varying column widths, graphic sizes, text length. Some if not all of the before mentioned items elastically adjusting according to the users browser size or screen size. The advantage of this is to appear custom to the users browser and fill all corners and spaces with as much content as possible. No “dead space” or white space on either side of the layout as the content fills in the gaps as the browser window expand.

Static sites as a contrast have a solid width that does not adjust as the browser size is changed. The design remains as it was intended, line widths are static and the designer maintains control of the layout and overall design.

As I’m sure you’re the idea now where I’m going with this. The downfalls of the elastic design are many but the benefits are as well. Downfalls include the sometimes unpredictable CSS elements that shift, move and disappear depending on the users browser size. Designing for this type of layout requires some skill and often some faith that the user won’t over-do the browser size. Another downfall is that some of the content becomes long in length and sometimes hard to read.

The static as a contrast is much easier to design and control. Size, shape, line length. Design remains intact but if the user is using a narrow browser there may be a horizontal scroll bar. If the user is using a wide browser your design may seem tall and narrow. The trick is finding the average width and starting from there.

In the end there’s no correct answer to this battle. Writers, corporations and bloggers often like the elastic as their content is put first and foremost yet the design is unpredictable and sometimes appears cramped or crowded. Most designers prefer the predictability and control they get when using static layouts. I know I do. Layouts don’t fall apart and design remains intact. Sometimes it’s best to apply a bit of both elastic and static to achieve an even handed layout expanding background elements while controlling column/text width, menu location and overall design concept.

User-centric?

Posted on Apr 19, 2007 by Jonathan to Web Design

User-centric?

It has a good sound to it – a term you might hear used by a technologist.

But what does it really mean?

User-centric is a philosophy that puts the users experience in front of all other goals. In other words, the sites design is a result of what works best for usability. This is opposed to a standard ‘design-centric’ approach, where the design is produced away from the user and then presented to them.

A User-centric design approach generally provides a much more functional website. The design is centered on what is going to work best. If things are being overlooked by the user or hard to find, the team goes back and changes the design accordingly.

On the other hand, user-centric design definitely adds extra steps which can in turn increase costs and development time.

Some things to consider:
- What works best for usability may not always be the best looking design.
- It can involve extra steps and extra rounds of revisions to get it right.
- In order to get the proper feedback , additional bodies are needed to test the site. Ideally these people have never used the site before.

If you have the time, patience and budget, it may make sense to try a user-centric approach on your next project.

Tags: user experience

Where Do You Find Your Inspiration?

Posted on Apr 19, 2007 by Damien to General

As a designer we’re constantly faced with the need for design inspiration. Sometimes we find it easily, sometimes it doesn’t come as quickly as we’d like. Design inspiration comes from the world around you as does any other kind of inspiration. Without it design becomes stagnant, outdated, irrelevant or completely off the mark. Finding inspiration is a challenge we all face as designers. Here are a few items that may help in that never ending search for inspiration:

Take a walk – sometimes it’s just that easy. Get up from your desk and change your surroundings.

Visit site gallery sites like FWA, Screenalicious and CoolHomePages – seeing how others have taken care of navigation issues, color issues and overall design concepts breeds more inspiration than you’d think.

Color inspiration also comes from browsing around the web. One site I find incredibly helpful is Colourlovers.com – a great color and color palette resource.

Go to a museum – art and/or history, it doesn’t matter. You can find inspiration in almost everything but museums have things you probably don’t see every day.

Go to the library or a public book store – there are so many books out there on design, theory, color, layout, print, web you can easily immerse yourself into a world of inspiration within minutes.

Fireworks Vs. Photoshop

Posted on Apr 13, 2007 by Damien to Web Design

Recently I’ve been giving Fireworks a run even though I’ve been using Photoshop for nearly 10 years and much to Neil’s credit, I’m starting to like it. Both applications have their strengths and both have their weaknesses. Though I’m excited to be learning and using a different application there are certain items that I’ll most certainly revert back to Photoshop to complete. For now it’s just another tool in my ever-growing graphic arsenal. Here are some of the strengths and weakness I’ve come across so far:

Fireworks: Strengths
1. It’s fast and optimizing graphics for web is extremely streamlined
2. Item manipulation as far as layout, graphic placement and overall use of the app for complex UI is very easy and intuitive, reminiscent of Illustrator or Flash.
3. Effect and tools are very similar to Photoshop so a lot of key commands are similar
4. It’s made for web graphics, gifs, jpgs, pngs and handles all very well

Fireworks Weaknesses (that I’ve encountered):
1. CMYK image conversion is awful – changes blues and greens like no other
2. Large files and multiple frame layouts slow the app down to a crawl
3. Limited filters, layer styles and effects
4. No sub category support in the layers menu
5. Awkward paint and draw tools even though they are similar to flash, they fall short in comparison to Photoshop
6. Masking effects are difficult to control or edit without full release of the mask and location
7. No “browse” images feature

I’m still a loyal Photoshop designer but Fireworks is slowly but surely winning me over with it’s shear speed and overall performance. The memory leak is very similar to Photoshop’s but not quite as severe. Photoshop will probably still remain my primary image manipulation app but when it comes to UI (user interface design) I’ll be moving to Fireworks.

Adobe’s new Creative Suite 3 is coming out soon and even though Fireworks was a solid Macromedia app I was surprised to see them keep it on the roster and not replace it with Image Ready. The future of Fireworks looks pretty bright, it looks like the app is here to stay.

Tags: fireworks, photoshop

Staying Current and Staying Relevant or How do I increase my Blog Traffic?

Posted on Apr 11, 2007 by Melanie to General

Let me just start by saying how much I dislike the term blogosphere or even the term blog, unfortunately I don’t have much of a say in calling it something else.
Online search is dominated by current events and entertainment. A look at Google Zeitgeist or the even more current Yahoo Buzz will give you a solid look as to what people are searching for on the web.
By using these topics as subject matter in your blog you open yourself to the opportunity of more visitors and increased exposure. Now I really have no interest in who Anna Nicole Smiths baby is or who the father is this week, but it is quite the hot topic out there, albeit irrelevant to SEO.

Or is it?

Personally I would like to know more about what pet foods have been recalled and what pet foods contain wheat gluten so I don’t feed it to my dog. Look 2 search terms in the same sentence; see what I’m getting at? Integrating current search phrases can be beneficial but it also needs to be relevant.
The remarks Don Imus made about the Rutgers Women’s Basketball team and the resulting media frenzy really have no business in this forum, but if you happen to run an entertainment oriented blog, jumping on items like this as soon as they break can shoot your ranking higher and give you the credibility to attract new visitors and retain them.

Speaking of breaking news, this morning Viacom and Yahoo announced an online advertising deal. Considering Viacoms billion dollar copyright infringement lawsuit against Google (mainly clips of their media showing up on YouTube and Google Video), Yahoo still has the number 2 spot in the search world.
Yahoo is also more user friendly and has an established community to a solid user experience and monetize traffic. Google on the other hand has recently taken up with the Time Warner ran AOL to integrate AdSense ads into AOL search queries. This little deal increased AOL ad revenue by 49 percent last quarter and will continue to see improvement as brand names invest in enhanced placement in AOL search.
Ever having another card up their sleeve, Google is also in the process of brokering a deal to run ads on DirectTV although details are few until an official announcement is made.

Now how many search phrases does my blog entry have?

Tags: blogging

GUI Tactics

Posted on Apr 9, 2007 by Jonathan to Web Design

Here are a few things to consider when setting out to build a site. Do not limit these principles to web sites, they also apply to any kind of visual design.

Simplicity
Your design should make simple, common tasks simple to do. Dont forget the original purpose of the site and dont detract from that by adding unnecessary clutter.

Structure
Your design should organize the user interface in ways that are apparent and recognizable to users, putting related things together and separating unrelated things.

Visibility
Good designs dont overwhelm users with too many alternatives or confuse them with unneeded information.

Reuse
Always reuse internal styles and colors. Dont deviate from the styles you establish. The reuse principal eliminates the need for users to rethink, and it makes a website easier to navigate.

Tags: gui

Usability is…

Posted on Apr 9, 2007 by Jonathan to Web Design

Usability is critical.

If a website is difficult to use, people leave. If the homepage doesn’t clearly state what a company offers, people leave. If users get lost, they leave. If the information cant be found easily, they leave.

Do you see a pattern here?

One thing to remember when designing for the web is that websurfers tend to have a very short attention span. There are plenty of other websites available and leaving is their first line of defense.

How can I prevent my customers from leaving? A great place to start is by improving the sites usability.

Usability is defined by five components:

LEARNABILITY: How easy is it for users to accomplish basic tasks the first time they encounter the design?
EFFICIENCY: Once users have learned the design, how quickly can they perform tasks?
MEMORABILITY: : When users return to the design after a period of not using it, how easily can they reestablish proficiency?
ERRORS: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
SATISFACTION: How pleasant is it to use the design?

If you are interested in learning more about usabilty- here is a good resource:

Tags: website usability