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

Dynamic Font Sizes and Line Spacing
Keep in mind that in the development of a web page, the fonts displayed on the screen are dynamic: they have the ability to increase and decrease in size.

This can affect your layout, the spacing in between items, and line-spacing on the page. What looks nice on Netscape and the MacOS may look completely different on Internet Explorer and Microsoft Windows.

What about Whit Space?
Is white space useful or not? There are a few key ideas to keep in mind when thinking about whether or not to use white space within your page.

While white space can be wasted space, it can also effectively support and organize the structure of the elements within the page. For example, setting a “New” section apart from the rest of the page makes use of white space to support the user.

However, you’ll want to keep in mind that if you use line-spacing within your text, you run the risk of font changes multiplying the white space. While vertical white space can be useful for differentiation between content sections, horizontal space is at a premium – gratuitous use of horizontal white space is a no-no.

Report This Post

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).

Regardless of the target audience, mockups are designed to promote communication and understanding of implementation ideas.

The following materials are developed primarily for working with external audiences; however, with minor tweaking they can easily be adapted for use within the design team.

Developing a System of Multiple Drafts
Mockups are most useful when they are used in an iterative fashion to refine design ideas based on user testing and feedback.

Developing a system of multiple drafts that progressively refine the design lays the groundwork for such use. Form 7-2 presents a sample schedule for mockup development across several drafts. (Download from http://www.mkp.com/uew.)

The initial draft consists of three mockups that are fairly diverse in style and display a wide variety of solutions.

It is good practice at this stage to provide a combination of navigation and page layout alternative as well as a wide variety of stylistic choices (e.g., various colors and fonts).

However, be sure to explain that any combination of colors can be used with any of the structural designs.

In other words, you want to avoid the instance of a client or user really preferring the structure and layout of one option, but choosing another because of a color preference.

There are a few things that should be noted regarding the mockup development schedule. The number of mockup produced at each draft stage decreases as you get further into the process.

As you reduce the number of mockups, you should begin to refine the subset you are working with. The further along in the process you are, the more focused and refined your mockups should become.

When working with clients, be sure to establish a draft system beforehand. Describe the system to the clients, and be sure they understand the consequences of making changes, requesting additional drafts, and so forth.

This helps to prevent the seemingly infinite mockup cycles that are all too common when working with clients. It also helps to solidity the design and allows the clients an opportunity to feel involved in the development and design of the web site.

Mockup Review, Approval, and Sign-Off
It can often be very difficult to achieve closure with your client. Once iterations begin, the client can continue requesting alterations for what seems like an eternity.

One of the ways to circumvent this (and also help keep the developer on track) is to have a predetermined system of mockups and approval.

This doesn’t need to be set in stone; it only needs to appear to be set in stone! Have a preset number of drafts established up front. Make a preset agreement and stick to it as best as possible.

The mockup approval form shown in Form 7-3 can be used after each draft stage. (Download from http://www.mkp.com/uew.)

This serves as a gentle reminder that the iteration process cannot go on forever. As long as this has been explained up front, there should be no problems.

Making Use of the Mockup Style Review Form
By breaking down several of the categories in the review form, it helps to focus clients on what it is they may or may not like about a given design.

This also serves as a reminder to the reviewer to examine things like color, scale, and layout, as well as naming conventions. In addition, the form provides an area for the reviewer to write comments.

While the form itself is a useful tool for recording comments, it is perhaps even more useful in that it gets the reviewer to think about the design at a deeper level.

After the client has filled out this form, you should follow up with a phone conversation or meeting.

The form then serves as a device to clarify issues and concern, and will give the designer a grasp of the most critical areas to remedy in the next draft stage.

Tips for a Successful Mockup and Approval Process
Managing the mockup and approval process can be a difficult task. However, there are several things you can do to make this a more fluid process.

Presenting high-quality and accurate representations while keeping communication channels open will help to eliminate the majority of problems.

Make Mockups of Realistic Quality
To prepare for review, make sure that you mockup conforms to appropriate technical constraints and is realistic in its form. Ensure that the mockup’s overall quality does not exceed the potential quality of the final result.

You want to avoid producing a mockup that will have a higher resolution than the final web site, exceeds screen width limitations, or has text at a higher resolution than can be realistically achieved (e.g., don’t display anti-aliased body text when it will be aliased on the final web site).

Leave Out Bad Alternatives
People inevitably choose your least favorite design alternative. If you aren’t comfortable with a particular design you’ve generated, then throw it out. Design selections should only be made from among alternatives that solve the design problem well.

Keep Communication Channels Open
Let people know as soon as possible when snags are encountered. Some snags are expected, and if stakeholders are notified early on, they usually don’t cause large problems. It is usually the last-minute updates or unexpected problems that get you into trouble.

Be Explicit
Let everyone know up front what to expect. State the number of drafts, the number of mockups for each draft, and the general area of focus that the mockups will be examining (e.g. the home page and a product page).

Discuss Costs for Additional Work
Let those involved know up front that changes are costly. Not only do additional mockups cost more money, they may offset the original target dates (if you’ve built in some slack time to your processes, you should be able to give a little here).

Get a Signature
Be sure to get a signature from the responsible contact on the client side before proceeding with the next stage of work. While nobody likes to point fingers, it will help to protect you in case clients suddenly change their minds.
 

Report This Post

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.

Selecting Pages to Mock Up
Choosing which pages to mock up can vary depending on the stage of the mockups – that is, whether you are in the early stages of mockup creation or in the later refinement stages.

The goal of your mockups is also important. You may choose a slightly different subset depending on whether the mockups are primarily being used for internal development and user testing, or whether their main goal is to be used for client review and sign-off on the look and feel.

Choosing Pages for the Early Stages
In the early stages of mockup creation you’ll want to focus on pages that explore the most detailed and difficult design problems.

These are often pages that include vast amounts of data, are dynamically generated, or deviate significantly from the rest of the pages (e.g., order forms).

The goal here is to learn as much about the design space as possible, so you really want to push hard to explore and tackle some of the most difficult problems.

Choosing Pages for the Later Stages
Later in the refinement and review process you may be primarily using the mockups to get client approval on the look and feel.

If this is the case, you should try to choose a subset of pages that demonstrates the diversity of the design as well as pages that will be the most visible to visitors.

This often includes the home page, a detailed subpage (perhaps a favorite product of the company), and other pages that are more diverse in structure.

Choosing Pages for Internal Use
Pages selected for internal use should focus on those that provide the highest payoff – that is, the pages that will be visited most often by users or pages that are critical for achieving crucial processes such as product purchasing.

In addition, it is often useful from a design standpoint to tackle the most difficult (often the most content-rich) pages.

This will provide you with the knowledge that your design is flexible and scalable enough to handle pages deep in the hierarchy, or those with excessive amounts of content.

When choosing pages, you’ll want to ask yourself. Is this the most important page in the design? Is this where I want to focus my efforts? If the answer is no, then you may want to focus my efforts? If the answer is no, then you may want to look for a page that contributes more to the overall design.

Choosing Pages for Client Review
The goals change somewhat when you are choosing page for client review. While you still want to choose pages that allow you to learn about the design space and also enable user testing, you may need to be prepared to make some sacrifices in the name of salesmanship.

You should still keep as you goal choosing pages that are critical to the design; however, if your clients are at all interested in image and branding, they are going to want to see the home page.

Thus, when developing mockups for client review, choose a home page and some combination of subpages that includes those critical to learning about the design as well as some that represent the most highly trafficked areas.

Techniques
There are several techniques that can be used for developing mockups. The following presents a selection of shortcut techniques for representing common elements of web pages.

These techniques are quick, effective ways of simulating design elements and interactive areas of the display. However, the key to developing good solid technique is practice, practice, practice.

Greeking
Greeking refers to way of displaying an approximation of the text that will appear on your page.

It is a simple way of showing how much text will appear the designer to effectively envision the space occupied by text without worrying about the actual body text that will be inserted in the final site.

Shadows
Drop shadows can be useful to suggest elements that are interactive or “clickable”. A simple shadow on the lower right edge provides the viewer with the perception of a raised element, which can be used as a device for illustrating interactive objects in the mockup, even if they are not used in the final design.

Highlighting
Highlighting can be used to represent a selected item identify the current page in navigation, or announce an item currently in focus (i.e., in the range of the mouse pointer. Highlighting a particular object provides visual feedback to the user about the current state of the page or an event.

This is often a useful technique for demonstrating the current location within the larger site structure, or simply showing activation of a current setting or feature.

Outlining
Outlining provides a simple way to present an image in a low-resolution fashion. Instead of taking time to painstakingly get every detail right, outlining provides sufficient information for mockups, prototyping, and user testing.

Sketching
It is rarely worth the effort to make an illustration or photo final in an early prototype or mockup Sketching images into the mockups provides a placeholder for the image, preserving the scale and demonstrating the content.

It also provides a sufficient image for user testing. The key to sketching is practice. Round out the forms. Don’t worry about exact details, basic proportions and placement are more important than highly refined details.

Photo Placement
Photo placement can simply be indicated using a square with lines extending across opposite angles.

This is generally simpler than sketching or outlining and performs the useful task of indicating that a picture is supposed to be in a given area, along with presenting the basic dimensions of the image.

This is often quite useful for developing mockups of pages where there are several dynamically driven content pages with images embedded.

These techniques are but the tip of the iceberg. They are techniques we have found useful and employ most often. However, keep in mind that there are several other fantastic techniques waiting for your adoption and integration!

They key to developing good mockups and prototypes is to develop solid techniques and creative solutions through practice.

Step-by-Ste- Mockup Example
There are nine basic steps for creating a static paper mockup. These steps will take you to the final design.

1. Begin with thumbnails
Start by developing thumbnail sketches based on the basic requirements of the page. Don’t worry about the constraints – just draw! After you’ve developed several sketches, go back and examine which ideas might be feasible and spend a few minutes redrawing those that seem promising.

2. Create a more refined sketch of the chosen thumbnail
Once you’ve selected the most promising thumbnails, choose one for mocking up in more detail.

However, before starting on the mockup, you should sketch a slightly larger, more refined drawing with the elements you want in the display. This will be used as a reference drawing for the mockup.

3. Draw Page Boundaries
Begin by drawing the page boundaries in dimensions close to those you expect the final screen dimensions will be.

4. Rough the basic page elements and structure
Start by partitioning off the major elements of the screen: navigation areas, headers, footers, content area, and any others you may have.

5. Put in Key Graphics, Logos, Main Labels, and Titles
Once you’ve established the basic page boundaries, sketch in the major elements of the page.

This should include the navigation elements, the page titles, and major labels. You should attempt to sketch in the type at a size that closely approximates the final design specs. For example, make the page title slightly larger than the body text and make the font appear bold.

Don’t overdo the sketches, but take the time to get clean outlines that accurately reflect the final proportion.

For large text, such as titles, take the time to portray the actual font. This small amount of time will vastly improve the final look of the mockup and allow you to realistically understand how the design works.

6. Greek Body Text and Photo Placement
Once the basic page structure is there, you can approximate the page content with test greeking and image placement.

7. Refine with Details
Now that you have structured all the basic elements of the page, you can refine with details such as adding shadows and highlights, and touching up areas of the display.

This stage may require more or less time depending on the goal of the mockup. If it is an early mockup primarily for internal use, you may want to skip the step entirely.

However, if you are presenting this mockup to clients of a review committee, then you’ll want to spend some additional time here.

8. Check the Mockup for Missing Requirements
Once you’ve completed the mockup, make sure that all of the page elements are included by checking the guidelines in the Mockup Checklist (download from http://www.mkp.com/uew). Note that this checklist includes criteria for both paper and digital mockups.

This checklist can be used to ensure that your mockup is a suitable representation of the final product.

It’s good to have a checklist such as this to serve as a reminder of layout issues and to prevent proposing a mockup that is ultimately unusable.

You may want to customize this example checklist to your own design standards, individual guidelines may vary from project to project, but changes should e thoughtfully considered and explicitly documented.

9. Prepare for Client Presentation and Review
If you plan to present the mockup to clients, mat the mockup on a suitable mounting board.

This will make it easier to distribute, and you won’t have to worry about the page getting sullied. Paper mockups can also be digitally scanned for presentation online, which especially useful when the mockups will be reviewed by remote clients.

Report This Post

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.

Clients and users become more open in their suggestions for change and are more vocal in describing the perceived inadequacies of the design. In this way, paper mockups generate more useful feedback on broader design issues.

By contrast, clients viewing digital mockups tend to focus on the details of the layout and on issues such as font choice, exact spacing, label names, or colors.

While it is good to get this level of feedback, it is often a bit premature to receive this advice in the first round of mockups.

Thus, we tend to reserve digital mockups for later in the mockup process when we are nearing a final page design.
 

Report This Post

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.

Users, designers, and clients perceive digital mockups differently than they do paper mockups, so you should be careful about how early in the design process you choose to implement digital mockups.

For this reason, we tend to view digital mockups as useful in the later stages of design refinement.

Report This Post

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.

Paper mockups effectively envision the design space, identify potential difficulties early in the design process, and provide a device with which to begin user testing. Among designers, clients, and users, paper mockups quickly produce presentable ideas and facilitate communication.

Report This Post

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.

Imagine the following. If you produce one sketch per minute for 30 minutes, you will have a nice selection of ideas to work from.

It is likely that 15 of these sketches will be too similar and that 10 of them just won’t work. So half an hour’s work leaves you with 5 diverse sketches. But it buys you more than that.

It also gives you 10 or so ideas that you know won’t work, and you’ll know not to go down that road. Perhaps more important, it has enabled you to begin to envision the possibilities of the design space.

Thumbnail sketches allow quick explorations of the major design components and design space. They also allow you to develop a broad array of design idea, and to focus on the ideas, not the details of the display.

Report This Post

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 general rule, then, is that low-fidelity mockups are useful for discovering larger problems and are more suited for the early stages of design, whereas high-fidelity mockups are more useful for refining the details of the design and are thus more effective in the later stages.

It’s usually good to invest in several low-fidelity mockups early on, and use a high-fidelity mockup or prototype in the latter stages. However, don’t be afraid to mix both types at different times, as they reveal different types of problems.

Mockups
Mockups are primarily single-page, static representations of the design space. They are used to refine the visual design and facilitate communication among the design team (i.e., designers, users, and clients).

Mockups focus on the look and feel of the design while attempting to tackle the more complex page layout problems that might be encountered in a web page. In addition, mockups can be used for user testing.

Simple user testing can reveal whether users understand the basic page structure or whether they find icons or button labels straightforward and intuitive.
 

Report This Post

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.

Examples in the form of mockups or prototypes open communication channels and guide conversation toward explicit and useful comments and ideas.

In addition to providing the design team with a common artifact for discussion, mockups and prototypes also provide a more tangible product for clients to examine.

This makes the product “real” to clients and can be an effective way to win their involvement and support early in the process. (Early client involvement has some risks, however, see sidebar “Potential Pitfalls of Early Client Involvement.”)

Mockup and prototyping techniques help to increase involvement by providing common artifacts for examination, facilitating communication among the design team (users, clients, and designers) and fostering early client buy-into the project.

If your client is not accustomed to being involved early on in project development, you may experience some backlash in response to the “unprofessional” look and feel of early examples.

This can be easily diffused by describing (ahead of time) the procedures used and reassuring the client that these are tools to facilitate development.

Also, because mockups and prototypes are deliberately incomplete, clients can sometimes be distracted by the fact that they don’t fully implement every project requirement guessing perhaps that you’ve forgotten important elements.

Early on, stress to them that the purpose is to help them communicate and clarify their goals, and throughout the process, be sure to specify which aspects you’re prototyping and which aspects are being neglected.

For instance, an early mockup may be used to capture a visual style but not be intended to represent the final navigation labels or content.

Some clients like to ask that a mockup be correct in every detail. For some purposes, this may be useful, but in most cases, it is better to explain to them the cost tradeoffs involved and the logic of quickly iterating low-cost alternatives before building high-cost representations of the site.

Explore and Define the Design Space
Mockups and prototypes also provide an artifact that can help to define the limits of the design space within which you are working. Mockups and prototypes help by providing tests of feasibility and proof of concept, exploring various visual and structural arrangements, eliminating guesswork early on, and detecting errors at the earliest stage possible.

Provide For Early User Testing
Early and rough representation of content and functionality allow you to bring users into the design process in ways that traditional spec sheets and abstract definitions don’t. Providing a concrete example – even when not complete is more useful for examining how a user might react to a design. Mockups and prototypes provide a tool for early user testing, which in the long run will allow the site to be developed more quickly and cost effectively.

Mockups and prototypes provide a mechanism for gathering user data at the beginning of the design process, the means for gathering user feedback early in the design process, and a framework that allows user testing at the beginning of the design process.

Increase Quality, Cut Costs, and Reduce Errors
Design prototypes can provide you with early buy-in from your clients, a valuable user testing platform, a low-cost method for determining the feasibility of specific design ideas, and a method for catching errors early in the design cycle. The end result of all of this is quite simple: you’ll be designing user-centered, cost-effective, high-quality, successful designs.

Report This Post

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.

Developing a highly usable web site requires a thorough understanding of the design space.

This can only come from a persistent exploration of alternative designs and from early involvement of users in the design process. Refining the design across several stages will lead to a solution that is highly usable, cost-effective, and carefully matched to the project requirements.

Successfully envisioning the design space can be achieved using an iterative process of mockups and prototypes. Mockups provide visual representations of page structure often focused on creating effective visuals.

Prototypes explore both visual and interactive representations of page structure and site structure and focus more on content, architecture, and interactions.

Using a combination of mockups and prototypes allows you to get the design right the first time around when the cost of change is reasonable and a exploration of wide-ranging alternatives is possible, rather than repairing a design after the site has been fully implemented.

Report This Post