Interface Design Documentation


Getting the best experience through interface design documentation.

Part 3: UI Documentation

Continuing our series on information architecture, user experience, and user interface design, I will be providing an overview of the various UI documentation tactics that we use at Elevated Third. If you haven’t read part 1 on information architecture, it can be found here and part 2 on user experience can be found here. Interface design is the means by which the user interacts with technology to access and use your information or service.

Various products such as informational sites or mobile and web applications require different methods of interaction to fulfill user needs. The best way to build the proper interface for your needs is to have the right plan. We begin our prep work for interface designs by creating a sitemap.


Sitemaps are visual diagrams of the structure of a site or app. They help us identify the number of pages or page templates that are required as well as the topographical structure and connections of each page to each other. This insures that all of your required content and processes are accounted for.

In cases where the amount of pages fall into the thousands, we look for patterns in which to create categories or clusters of pages. An example would be employee profiles for a health center. Instead of listing dozens of pages on the sitemap, we would display one employee page profile template and keep an external reference of every profile through a separate document.


Having a detailed sitemap with supporting documents insures that your project is structured in a logical and appropriate format. Any out of place or missing pages are identified earlier in the process and can save time and money in the long run.

Content Layouts & Templates

Content layouts and templates are defined in detail in our strategic plan document which outlines our entire approach to a project. They allow us to not only identify the primary page types which differ on a project by project basis, but also to define the design look and feel as well as listing out all of the required content for these pages.

A troubling situation to deal with would be to be presented with a set of completed designs only to find that the interface is inappropriate for the intended product or that the final content is incompatible with the design. When needed we perform extended competitive analysis on interface designs for products which have a specific niche within a highly competitive market. This ensures that your product not only complies with industry best standards but also gives us the opportunity to strategically innovate a design which exceeds user expectations.

Wireframes and Prototypes

Wireframes and prototypes demonstrate the skeleton and functionality of any project. They are used to identify both the required components of a site or app as well as to simulate how they will work in terms of flow and interactions. The amount of resources dedicated to this stage of the process vary from project to project and can be as simple as sketches on a piece of paper to complex full HTML prototypes.

If your project is a simple marketing site under 100 pages, then static wireframes with minimal interactions will get the job done. However, if your project is an internal app which is used in driving your overall business objectives, then a refined interface based on prototyping and testing will help generate the most revenue.

The Overall Experience

Getting a fulfilling overall experience from your product requires a combination of strategic planning methods which are employed throughout the various stages of the production process. Every method that we have outlined in this series is not required for every project, however allocating the proper amount of resources when needed will provide for a better outcome.