Rapid Prototyping, the MVC Working Model

If you've ever had to build a working model from scratch, or produce a quick prototype for something, you know it's trickier than it sounds. Thankfully, Ed Charbeneau shows us the tools he uses to make it both quick and easy to produce fantastic (and fantastic-looking) working prototypes in ASP.NET MVC.

In just about every industry, rapid prototyping is described as “A group of techniques used to quickly produce a working model“, and web development should be no different. Rapid prototyping allows developers to quickly communicate and collaborate on the product they are creating while investing minimal resources. When used effectively, a prototype can provide structure to a project, ensuring that the development team and the customer are working towards the same vision and goal.

Tools of the trade

Rapid prototyping in web development is a swiftly growing practice. Developers and designers are utilizing techniques such as wire framing, story boarding, and mood boards to communicate the user experience to their audience and clients. As a result, specialty prototyping tools have become integrated into design process.

Of course, prototyping tools don’t have to be hi-tech; they range from the simplistic pen and stencil wire-frame to dedicated software like SketchFlow, and Balsamiq mockups. Regardless of their sophistication, these tools effectively produce visuals for team and customer collaboration, but which exist outside of the native environment of the web.

Incomplete experiences

Simple wireframes are a great start, and while more advanced tools like SketchFlow provide additional user interactivity, they don’t necessarily produce a true “working model”. The web and it’s multitude of viewing devices is a highly versatile and quickly evolving platform, and attempting to provide a working model from mockups or wireframes is a significant challenge.

Traditional wireframes fail to communicate several key experiences including:

  • Device rotation & multiple device resolutions and snap. Experiences created for responsive design would require numerous wireframes.
  • User context; experiences will vary from large to small displays.
  • Input capabilities, which can vary from desktop to mobile.
  • Application flow, which not all prototyping tools can simulate.

Coded Wireframes with ASP.NET MVC

Coded wireframes can solve many of the issues with traditional wireframes. Using ASP.NET MVC and a few open source frameworks, we can achieve our goal of a working model that is displayed natively in the browser. While ASP.NET MVC probably isn’t the first tool that jumps to mind when considering a prototyping toolset, it is actually ideal for coded wireframes; it is extremely flexible (thanks to NuGet package manager), and also gives us full control over the HTML rendered.

With that in mind, let’s look at a few tools that, when combined with ASP.NET MVC, allow us to easily create rich, functional prototypes.

Generating placeholder content

To start with, we should discuss Prototyping for MVC – an open source tool that I created specifically for rapid prototyping with ASP.NET MVC. Prototyping for MVC is a collection of HTML helpers that rely on the NLIpsum generator to create Lorem Ipsum (a Latin placeholder text). These Lorem Ipsum strings can either be generated with or without surrounding HTML tags and are highly configurable via fluent API. In addition to Lorem Ipsum, the HTML helpers can also create placeholder images via the Placehold.it web service, using a wrapper which calls the URL needed to generate the placeholder image. By combining these fantastic resources into a tool that organizes their API calls as a simple set of HTML helper methods, prototyping in MVC feels like a natural part of ASP.NET MVC development.

Installing Prototyping for MVC is done by adding the Prototyping_MVC package from the NuGet package manager or command line.

Generating text

Once the package has been installed, add a reference to the top of any view with a “using” directive:

  • //Lorem Ipsum helpers
  • @using Prototyping.Ipsum
  • @using Prototyping.Placeholdit

The HTML helper is given a new set of extension methods for generating Lorem Ipsum. The methods represent the tag that the placeholder text will be contained in: “h1”, “h2”, “p”, “ul” and more. Additional methods for creating just text are included for when surrounding tags are not required: “Words” and “Paragraphs”. Each method is fully configurable by passing parameters, and full method chaining is also supported for creating sequences of elements off of one method call:

Generating Images

The “Placehold” method generates placeholder images of custom dimension, color and overlay text. The method calls the Placehold.it service, which accepts a URL like “http://placehold.it/300×400” and unsurprisingly, returns an image with the dimensions 300 x 400 pixels. To even further simplify the usage of this service the method wraps it all nicely into an HTML helper with parameters for customization. For example:

1541-placeholdit-39ce54fe-5ae2-44e8-bc79

Image placeholders

Generating Wireframes

Next, Foundation Framework is a CSS and HTML responsive design framework built by Zurb, and it provides a great wire framing platform. Foundation was designed for HTML wireframes, and so its sketch-like styling conveys the sense that what you are creating is a prototype, while it’s completely customizable CSS overrides make it easy to convert to production-ready designs. Foundation includes all of the basic elements for websites and applications: tabs, modal dialogs, and image slider, buttons, form elements and more. As I’m sure you can imagine, a powerful framework such as Foundation not only aides the prototyping process, but also makes the transition from wireframe to finished product a snap.

Foundation is an open source project that aims to be platform independent, and while it can be downloaded as plain HTML, CSS and JavaScript, platform-specific versions are also available for Ruby, WordPress, and ASP.NET MVC. I’ve taken the responsibility of packaging the ASP.NET MVC port of Foundation, and it i shared on NuGet for easy installation.

A full write up and tutorial of Responsive Design using Foundation with Asp.Net MVC can be found here on Simple-Talk.

Foundation in Action

Foundation’s responsive grid makes short work of difficult layouts that will work across a wide scope of devices and, for fined grained control, the grid supports nesting, mobile visibility classes, and source ordering. These features will ensure that your wireframe is functional and presentable on most, if not all devices.

The example below shows a two column page with left navigation, placeholders fill out the wireframe:

Foundation also supports mobile wireframes via mobile-specific CSS classes. By default the grid will stack vertically on mobile devices but, for cases where a grid on mobile is needed, a four column grid is available. In the spirit of responsive design, the mobile grid classes are added to already existing elements and will simply take effect at mobile resolutions.

The example below shows a grid layout of three / nine on the desktop and a one / three layout on mobile:

In addition to a mobile grid, visibility classes are provided for controlling the display of particular elements at specific resolutions, or based on device capability. For example, we can show or hide different navigation types depending on the user’s context. Visibility classes give a great starting point for targeting specific resolutions, and more targeted media-queries can be developed as the design is tested and iterated through:

1541-nav-example-543ed12a-b66e-4699-9d06

Desktop navigation

1541-nav-example-mobile-94bf960b-a624-4d

Mobile Navigation

Putting it all together

These tools are powerful in their own right, but combining Prototyping for MVC and Foundation provides a fairly complete platform for the working model. Prototyping for MVC’s methods streamline the creation of placeholder text and images, and Foundation’s highly organized grid increases code readability, making layouts easy to manipulate. Sections of layout can even be moved via drag and drop or cut and paste without the worry of leaving improper HTML markup.

Some examples:

Left navigation:

Right navigation:

Element widths can also be changed with ease by changing the CSS class of an element.

Two elements of equal width:

Two elements golden ratio:

Since the process of making changes to the prototype is greatly simplified, faster iteration is possible. Customers are then able to see a prototype working in its native environment, make suggestions, and see results much quicker. In addition, since we are dealing with a working model, application flow is also clearly understood, allowing user experience problems to be identified and dealt with early on.

The images below show an example of application flow using rapid prototyping:

1541-appFlow-1-5840ea80-7843-489f-bf0f-f

Application home – RSVP App.

1541-appFlow-2-logon-ff049280-8a95-41f7-

Log On Modal

1541-appFlow-3-4e921644-258b-4b48-80b8-c

Details View

1541-appFlow-4-a5d6ec13-5bde-45a7-9d1a-4

RSVP Success

Conclusion

Rapid prototyping can and should be an essential part of the development process; with just a few NuGet packages, ASP.NET MVC is transformed into a powerful rapid prototyping tool. Prototyping for MVC’s condensed markup combined with the organized grid system of Foundation simplifies the process, allowing us to iterate faster and more effectively.

By moving the prototype into its intended native environment we can communicate a working model that is far more representative of the final product and relevant on all devices, and thus more valuable to you.

Examples

A Visual Studio project containing all of the examples outlined in this article can be downloaded from GitHub.