Web Design Ethiopia

Following are design flaws and constraints frequently encountered in page layout:

• Misalignment for foreground and background images
• Changing gutter sizes at the left edge of the browser
• Overlapping foreground images not allowed (although there are several tricks to get around this, such as using an image as a table cell background, using style sheets, or drawing them as a single image)
• Font size differences from system to system, machine to machine, and browser to browser
• Dynamic restructuring of pages not thoroughly tested

When developing mockups for review, be sure to have comprehensive procedures in place to facilitate the process.

The following presents a set of procedures to promote communication, serve as a valuable reminder of areas for review, and promote the integration of feedback into the next stage of design.

Having a smooth-running method of review will enhance communication, reduce delays, and provide for a more thorough integration of both client and user comments.

Mockups can be created for either external review or review by the users and clients (whether they are external or within another or even the same division).

Far too often designers spend time refining the details of a page without first exploring the overall structure and layout.

If designers learn to spend more time in the initial investigation of content and structure rather than diving right in to the details of a page, their end product will be vastly superior.

Wait until the page requirements have been explored and rearranged before deciding to work on the visual details of the page.

This will allow you to support the individual page structure with visual deign rather than having the design determine the structure of the page.

There are some interesting differences among the perceptions conveyed via paper and digital mockups.

It’s better to use paper mockups early in the design cycle for one major reason: clients tend to view paper mockups as a conceptual rather than a finished product.

The strength of this cannot be overlooked. One of the biggest problems we’ve encountered with digital mockups is that clients tend to view them as final, unchangeable products.

Paper mockups are perceived as less polished and more conceptual. As such, they tend to provoke more comments and often lead to more engaging discussion.

Digital mockups are higher-quality rapidly rendered representations of major design decisions. They allow you to explore page layout and arrangements as well as more thorough investigations of color and palette choice.

For web design, digital mockups are the only accurate way to explore the color and contrast issues that might arise in an online environment.

They are often created in paint programs (e.g., Adobe Photoshop) or illustration programs (e.g., Adobe illustrator or Macromedia Freehand).

Typically, digital mockups present a level of refinement beyond that of the paper mockup. However, there are tradeoffs involved in the use of digital mockups.

Once you’ve developed a good set of thumbnails that interest you, you’re ready to take the next step. Paper mockups are slightly higher-quality (although still fairly rough in comparison to the end product), rapidly rendered representations of your major design decisions.

They allow you to explore page layout and arrangement as well as more aesthetically driven issues such as color palettes.

They are much larger than thumbnails (usually at least 8 x 10 inches and often larger) and are drawn in dimensions closer to the final design. This gives you a more realistic understanding of the limits of the page size and allows you more room to perform semidetailed investigations of the design space.

Thumbnail sketches are small, rapidly rendered sketches used to develop a broad spectrum of design ideas. Thumbnail sketches are typically used at the earliest stage of design, often before the requirements have been finalized.

The key to developing thumbnail sketches is quickness. Each sketch should only take 15 to 20 seconds.

This way, you can generate a lot of thumbnails in a very short time. You might wonder, What is the use of developing a bunch of quickly rendered sketches of designs that may never be used? Quite simply: idea generation.

Prototypes and mockups can vary from every coarse-grained, fuzzy layouts of the general page requirements done on paper (low-fidelity), to fine-grained, highly elaborate, and polished digital versions of the web site (high-fidelity).

This range provides the designer with levels of refinement useful for testing and exploring varying details of a given design. For instance, early paper mockups may be used to gather feedback on the basic functionality or visual layout in a quick and efficient way.

In contrast, fine-grained prototyping methods may be used to gather detailed information on the processes involved in traversing several pages, or a subset of tasks.

The web designer’s goal is to create a site that seamlessly integrates strong and effective visuals, clear and intuitive navigation, and exciting and useful content. All of this can be achieved through a set of well-integrated mockup and prototyping processes.

A successful approach to mockups and prototype can yield great benefits including getting everyone involved, exploring and defining the design space, and providing for early user testing, as well as cutting costs, reducing errors, and improving quality.

Get Everyone Involved
Designs and abstract ideas are difficult to talk about without tangible artifacts to represent the ideas. Concrete examples are useful for getting everyone involved and on the same page.

Quite simply, when graphics and layouts become cluttered or misaligned they unintentionally create complexity and additional visual features within the display.

Instead of providing structural support for the information and facilitating the users’ creation of mental model of the site, these problem become attention grabbing, competing with intentionally designed element in unpredictable ways.

From an efficiency standpoint, these additional features increase the time it takes a user to parse the screen.

In addition, they increase the probability that user will not be able to find the information they are seeking or will become confused. At the very least, they will make the display look excessively cluttered and unprofessional.