Wireframes

At this stage of concept development things can get a bit tricky. Usually there is a diverse group of stakeholders involved in the process; executives, strategists, designers, and developers. We need to engage each of these people comfortably into the architectural experience. Done well, wireframes can take a project from idea to development quickly and cost effectively.

Not all wireframes are the same. In fact, there are probably as many types of wireframes as there are people. It’s important to note that the wireframes alone, are not enough. They are just a small part of a much larger process. Every user experience professional has their own workflow, like any artist, they have tools and the way they use those tools creates their style. We’ve tried many different tools, and have created our own style. Our process is proprietary and extremely refined. Here is a small preview of some of our work.

The following are three basic wireframe examples.

Interactive Wireframe Example

Basic Wireframe Example

Sign Up Wireframe Example

User Flows

These are the nitty-gritty, down and dirty part of building the user experience. User-flows are the logic, they validate whether or not an interaction is complete. You’ve probably had that experience before, where you do something on a site, and you don’t know how to get back, or where to go, and it seems like the company built a room without a door.

The internet is a task-based environment, and we respect that. That is why we spend most of our time planning the user-flows, and testing them, before we start drawing up the wireframes.

The following are two simple examples of typical user-flows.

User-flow Example

Login User-flow Example

Best Practices

One of our favorite things to do is research and define best practices. It helps us stay on top of user-interaction trends, and focus our work efforts to that end. It is also an exciting challenge for us, if we can define a best practice, then the next question is how can we improve it?

The following are some examples taken from pages of a best practices deliverable.

Adding Content to Social Networks

Featured Artist Page

Creating a Profile on a Social Network

Sitemaps

Where would we be without sitemaps? These provide the visual aide to quickly access content. But what you didn’t know about sitemaps, is in the process of creating them you determine what is actually important. We follow simple usability guidelines which allow us to fulfill on the needs of your core audience: Use simple language, follow the rule of 7 plus or minus 2, test the three-click rule.

We have many different styles of sitemaps, depending on the breadth and depth of your project. So as not to reveal our “secret recipe” we cannot divulge that information here. However, if you are interested in seeing more, just contact us and we would gladly show you more examples.

The following is an example of a basic sitemap for a section of a website.

Basic Sitemap Example