Archive for February, 2009

Iterative web design and web development process

Sunday, February 15th, 2009

Iterative web design and web development process
The process of web design and web development is anything but linear. Sometimes we might get confused because the term “workflow” seems to be a linear flow of process but throughout the life of a project, we all add value along the way. The process is organic and, most importantly, iterative. Workflow among team members is the most critical component for success on any project, and what facilitates a healthy team – is clear and effective communication with everyone involved.

Let’s explore what iterative process is exactly for developers and web designers.
First we collaboratively start with the basic building blocks: Where is the navigation? Where is the main content? Where do I put this function or that function in the application? These basic building blocks are the formation of the overall wireframe of the site — the architectural plan for the structure and methodology of how the end user will consume the site, application, or content. An iterative development strategy is defined as building functionality over time. An iterative design strategy evolves and moves the design idea further along through incremental steps, once the basic building blocks are in place.

This is the ultimate process, which greatly hinges on collaboration. How each individual piece interacts with everything else, will define whether the site has a cohesive and fluid user interface design. The web designers and the web developers must be open to flexibility in their work, and the work of others, so they can integrate the various components, designs, and code efficiently at the end.

Why do other processes too often fail?
In the old way of design and development, a web designer and developer start from a detailed specification and then go off on their own to begin the design and development process. Usually, the specification doesn’t accommodate all of the user cases of the design or functionality, so they adapt the functionality as they work to meet the requirements. The problem is that the design and development are happening separately — independently of one another — so when the design and functionality meet at the end, they are incompatible with one another and need to be updated to resolve the differences.

How do we do this effectively when we need a well-defined scope-of-work and an accurate budget?
This is where our “discovery” and “define” stages in the process are so important. If we effectively map out or main objectives and realize our strategy, we can therefore create a granular scope-of-work and estimate accordingly. Now it is up to us to find the most streamlined approach to make it come to life. Everything is an evolution, even our perception of what will be conceived in web design and web development. We create our functionality, based on our needs and objectives which were defined in the discovery stage. As functionality evolves, the future iterative steps can adapt to meet the updated requirements.

Trial and error will make this process, with your web design and web development team, flawless. The ultimate goal is to get your team to work well together — successful team communication and collaboration are what ultimately make your project a success.

Share and enjoy this web design link:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • NewsVine
  • Print this article!
  • Reddit
  • StumbleUpon
  • Technorati

Simplicity in web design No.2

Wednesday, February 4th, 2009

On this blog, you will see many posts about simplicity in web design. Simplicity is the first key to successful web designs.

Start by changing the way you think about the word “simple.” Simplicity is not easy. Simplicity is innovative. It is more challenging and takes more discipline than the “kitchen sink” theory of design. If applied correctly to your brand strategy, you can say more with less.

5 key advantages to simplicity in design and messaging.

1. It is easily recognizable.
2. It is memorable.
3. It reduces visual and emotional tension.
4. It is easy to understand.
5. It allows for a direct, coherent, consistent message across all brand channels.

Take advice from the experts.

Marissa Mayer, Google’s director of consumer Web products, sums the importance of design simplicity excellently:

“Google has the functionality of a really complicated Swiss Army knife, but the home page is our way of approaching it closed. It’s simple, it’s elegant, you can slip it in your pocket, but it’s got the great doodad when you need it. A lot of our competitors are like a Swiss Army knife open-and that can be intimidating and occasionally harmful.”

Google stays true to the equation: Robust Product + Simple, Direct Presentation = Success.

Test your web design by trying this below.

An easy way to evaluate the effectiveness of your marketing materials is to sit down and look at them briefly. Skim them. Don’t spend any more time than you would as a consumer looking at someone else’s materials for the first time. Now step away. Read a chapter in a book. Go on a walk. Do something distracting. Then sit down and think about your materials. What do you remember? Is you message clear? Is your web design consistent? If you have trouble remembering your colors, focus or message, others certainly will too.

Share and enjoy this web design link:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • NewsVine
  • Print this article!
  • Reddit
  • StumbleUpon
  • Technorati

Web writing – tips for interactive web designers and web writers

Wednesday, February 4th, 2009

In advertising a web designer or an interactive art director is usually paired up with an interactive writer. In the interest of keeping web designs clear and concise, there are a few principles that we should work toward together to acomplich successful web designs. Below are a few of those web writing principles that every web designer should know:

1. Put conclusions at the beginning
Think of an inverted pyramid when you write. Get to the point in the first paragraph, then expand upon it.
2. Write only one idea per paragraph
Web pages need to be concise and to-the-point. People don’t read Web pages, they scan them, so having short, meaty paragraphs is better than long rambling ones.
3. Use action words
Tell your readers what to do. Avoid the passive voice. Keep the flow of your pages moving.
4. Use lists instead of paragraphs
Lists are easier to scan than paragraphs, especially if you keep them short.
5. Limit list items to 7 words
Studies have shown that people can only reliably remember 7-10 things at a time. By keeping your list items short, it helps your readers remember them.
6. Write short sentences
Sentences should be as concise as you can make them. Use only the words you need to get the essential information across.
7. Include internal sub-headings
Sub-headings make the text more scannable. Your readers will move to the section of the document that is most useful for them, and internal cues make it easier for them to do this.

If we can weave these principles into our web designs, we can keep people on our web pages longer and be able to drive them to where they want to go faster and much more effectively.

Share and enjoy this web design link:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • NewsVine
  • Print this article!
  • Reddit
  • StumbleUpon
  • Technorati

web design and modal windows

Monday, February 2nd, 2009

When was the last time you saw a “resized-pop-up window” with full chrome ? Nowadays, everyone is using modal pop-up windows/pop-in windows/Div layers/modal windows…whatever you call them, they are much better for web designers and basic usability.

What about the basic features of these faux-windows ?

Drop shadows are not just for looks, they help the window stand out from the background by reinforcing it’s dimensions. They also block out the noise of the content beneath the window by darkening the area around it. The shadow in the web design help the user focus his attention on the appearing window.

Close buttons are a must. I have seen some inexperienced users wonder what to do to close the window, do I click on it? Where’s the close button…so make sure that button is super-clear.

Share and enjoy this web design link:
  • Digg
  • del.icio.us
  • Facebook
  • Google Bookmarks
  • NewsVine
  • Print this article!
  • Reddit
  • StumbleUpon
  • Technorati