Web Design Ethiopia

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