Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Prototyping is the future: Definitions

Parent Feed: 

Instead of picking up right where we left off, for clarity's sake, let's review some definitions of the terms I’ll be referring to throughout this series.

Mockup

A mockup is an interchangeable word that refers to any visual depiction of the application. Graphic design comps as well as wireframes can be considered mockups.

Wireframe

A wireframe is a visual depiction of the functionality and basic layout of a software application. My favorite analogy, while it isn't perfect, is the blueprint of a house. Much like a blueprint, a wireframe depicts the the structure of the application and describes its functionality, but it is not used to describe the look and feel of the software application. While in a blueprint it matters where the sinks are located within your house, with wireframes, even layout to a certain extent is not as a part of the wireframe deliverable.

Static Wireframe

A static wireframe is a document created on paper or through the use of tools like Photoshop, or Omnigraffle, that visually describes the functionality and layout of a software application. These documents are static, meaning that there is no interactivity or behavior feedback when a user clicks, touches or otherwise interacts with the document. It is looked at and consumed, but not engaged with. Wireframes are often accompanied by a written document describing the implied behavior in the document. Graphic design comps are also static in most cases.

In-browser Wireframe

An in-browser wireframe is exactly as you would think. A wireframe that is rendered in the browser (Chrome, Safari, Firefox, etc) using HTML or other tools that can be opened by a browser. Why is this desirable? This way, the wireframe lives within the context in which the end-product will actually be used. It's similar to listening to a demo tape of your music on the sound systems your audience uses to make sure it's still a quality experience and still intuitive.

To be clear, images or anything else not “read” by the browser that is opened in a browser, don’t count as an in browser wireframe. To render a static wireframe in-browser misses the point entirely of what the browser is for-- interactivity. So, by this definition, static wireframes are not and should not be in-browser.

Prototype

A prototype takes the concept of a static mock up one step further, by offering the interactivity that is so noticeably missing in the static deliverable. A prototype is a fragile-state piece of code. It is not to be used by any client, and in most cases cannot be tampered with by clients who have no code experience. By default, a prototype is not necessarily in-browser, however, as the most basic and fundamental web tools (HTML, CSS, Javascript) are rendered in the browser naturally, prototypes are generally created for in-browser review.

Some would say that prototyping is orthogonal to wireframing. Especially with Drupal’s modular approach, it is easy to add functionality. Some also separate the two by stating prototype explores engineering, and wireframes/traditional mockups explore presentation and experience.

Hadron

To give you a visual to aid for the spoken definition for prototype, check out the brief click-through demo of Hadron, our prototyping tool at OpenSourcery. You can clone and fork it off of github. Hadron is based on Serve, which is a small Rack-based web server, and Foundation by Zurb, which is mixed in to have some default CSS to pretty up the wireframe a bit and offer responsive layouts out-of-the-box.

In the video to the left, you’ll notice the prototype is much like an actual website. It's interactive, much more so than your typical sheet-linking wireframes. In this instance, we have a basic page, a login page, a blog page, a blog detail page and a homepage. Right here, you've got a super simple brochureware site wired out, and coupled with version control, can be used time and time again at the drop of a hat.

Hadron and other prototyping engines are a huge departure from what are traditionally thought of as wireframes. However, they still function as wireframes-- the prototype depicts functionality (and actually more comprehensive functionality than its static sister), and basic layout. The main difference is that instead of needing to describe interaction and user experience using annotations or any words at all, we can now describe it visually.


In the next post, we’ll examine how this difference impacts a development project.

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web