I Was Framed!

A wrongly convicted prisoner and a website under development have something in common: they both were framed.

Just as drawing a storyboard helps to create a movie, drawing a wireframe mockup is the first step in laying out your website. The mockup depicts how your website pages will be organized, determining where to put the many elements that make up even the simplest web page. Creating a high-performance website requires starting out with a wireframe mockup.

The Navigation Bar

This is primary tool for getting around your website. Its placement is critical to users sticking around your website and finding the pages they want. It must be prominent so that its readily available without distracting from the information found on each page.


Banners spread across the page horizontally or vertically and feature illustrations, catchphrases, highlighted information and especially advertising. When they feature advertisements for other websites you want them to be prominent without distracting from your own offerings.


A good logo leaves a lasting impression on the viewer and ideally conveys a message about your company and the nature of your business. Its regular use and location should reinforce the customer connection with your site and services while providing reassurance that online users are “in the right place.”

Text Layout

Content is why people come to your website in this first place. Even if your primary content is lists, sales items or photos and illustrations, well-written and displayed text attracts search engines and guides the user to realize why the page is useful and meets their need. Pages dominated by text run the risk of looking like encyclopedia entries. Pages featuring text in a poor layout are annoying and lead people to search elsewhere for information or services.


Sliders are sections of a page with an animated slideshow featuring images and text that illustrate your offerings. They maximize the use of space by allowing you to present a number of illustrations in the area set aside for just one. Sliders increase the likelihood that a user is going to see exactly what they’re after without having to travel to a number of different pages.

Calls to Action

A call to action is a button that encourages the viewer to do something. Usually a click on a call to action means you’re making a sale, a contact or a download. Their placement on the page, the space separating them from other elements and their relative size are all important factors involved in making them effective.

Static Images

Some photos or illustrations are important to the page, but shouldn’t be cycled like the images in a slider. Determining their placement and relative size are essential to creating a well-balanced design. Like the Old Masters of painting, we create web pages that encourage the eye to move through all its different elements. This enhances stickiness and makes the users experience with your website pleasant.

Using the resulting mockup as a guide, we write the rules built into your website that determine just how all this content gets displayed. If you want a responsive website, the mockup helps us go one step further by making it easier to decide when and how to alter the layout if your pages are viewed by smart phones or large-screen monitors.

The next step involves adding color, text, backgrounds and images in a design mockup, the final stage before creating your actual website.