Quick Website Prototyping

At this last IndyNDA’s ASP.NET special interest group, we discussed a way to quickly prototype a website.  This is one step past creating a quick sketch of a website on paper.  This will let you layout and give basic style to a website design.  We will utilize openly available web tools to help us.  I assume you have some basic web design skills with both HTML and CSS.

Step 1: Easy page layout and structure.

I picked Twitter as a web app that I would like to mimic.  I will call it pitter.  How would I create a web app that looks like Twitter.  I have created a sketch of how I want the website to look (see below.)

A great resource to create a basic website structure is to use 960 Grid System.  This web resource will give you the CSS framework to quickly create a web structure.  In addition to using it for our prototype, it is strong enough to follow us all the way to a finished product also.  960 GS breaks a webpage down into columns and rows.

I used the “Custom CSS Generator” link on the 960 GS website.  This allows me to pick the number of columns and column widths of my layout.  Since the real Twitter has a small content area (approx 800px) I chose a column count of 12, a column width of 50px, and a gutter (between columns) of 20px.  I can download the “grid.css” file by clicking on the “Download CSS File” on the page.  I link this to a basic HTML file.

Step 2: Setting up the HTML to utilize 960 GS.

The 960 GS website is a little weak on letting you know how to structure the HTML on the page to utilize the new “grid.css” framework.  The best way to learn is to click on the “Preview” link on the generation page.  This will bring up a page with different ways to structure the rows and columns on a page.  Just view the source of this page and you should have just about everything you need to structure a basic page.  I even just copied and  pasted the source of the preview page into my basic HTML page as a starting point.

By just using what we have now, plus adding background colors we now have a website that is starting to look closer to what we are thinking (see below.)

As you can see, we have the basic building blocks of our website and we can now start adding a little detail to the site.

Step 3: If you need to mockup images, make them basic without detail.

If your site requires images, now is not the time to start worrying over specific images and their look.  I suggest creating basic square or rectangular images that will act as fillers.  Use different color fills to give different looks to two images.  You can use a basic program such as Microsoft Paint or an advanced program such as Adobe Photoshop to create the images.  The one thing you might want to keep in mind when selecting a image program is being able to control the size of the image.

On our pitter website, the only images I needed to add were to represent the avatar images of each user’s post.  I just used basic 48px by 48px fill images (see below.)

Another resource you could use the Dynamic Dummy Image Generator.  You give it the details of your image and the background color and it will give you an image such as the one below.

Step 4: Create each element groups individually.

A website is basically a collection of groups of related elements.  For example for our pitter app, a single post by a user is a collection of an avatar, username, post text, and post date and time.  I suggest you break down your website into those individual groups.  The design each group individually until each is completed.

When we look at the individual user posts that get displayed, we see that each is designed in a similar way, and then that group is repeated down the page (example below.)

We take this group and then create the basic HTML that represents each of the data elements in the group.

<div>
   <img src="avatar1.png" />
   <h2><a href="/Profiles/TopHat3">TopHat3</a></h2>
   <p>RT <a href="/Profiles/JohnDoe">@JohnDoe</a> Listening to good songs on the radio.
      But there are too many ads on the radio today.</p>
   <p>34 minutes ago via Web</p>
</div>

Once you have the basic elements created for a group, you can then move on to creating the elements for each of the groups on the page.  The main menu, the sidebar, the header, and the footer.  Remember the key is not to worry about style yet, just getting the basic HTML elements created.

Step 5: Creating the Style

Once you have each of the element groups created, you can start to style each of them to move closer to the design that you are shooting for.  Remember, try not to spend to much time on one specific element.  If you know how to do something now that might not be “proper coding technique” just add a quick comment that you will need to spend more time on that element in the future.  Right now we put time above correctness.

In our example above, I have made some changes to the group of elements that make up a user post to get things to align correctly.  Not exactly ideal, but I am going to for quickness not correctness right now.

<div class="userpost" style="background: transparent url('../../Content/images/unknown1.png') no-repeat 0px 10px">
   <a href="/Account/Index/TopHat3">TopHat3</a>
   <p>RT <a href="/Account/Index/BillSmith/2345">@JohnDoe</a> Listening to good songs on the radio.
      But there are too many ads on the radio today.</p>
   <p class="timestamp">34 minutes ago via Web</p>
</div>

As you can see I removed the image tag and added it as a background to the overall div tag (this was a quick fix to make sure the avatar aligned to the left.)  If I proceeded to production with this code, I might change this to make sure I do not have any style elements in my HTML (to comply with Web Standards.)  I also added some classes to the base HTML elements that will allow me to style these elements with CSS.  Below is the CSS that gate the elements the style needed to get my post look.

.userpost { padding: 10px 0px 5px 55px; border-bottom: 1px solid #eee; }
.userpost p { padding: 0px; margin: 0px; }
.userpost .timestamp { font-size: small; color: #aaa; }

As you can see we can use just a little CSS and very simple HTML to create a decent mockup of a website.

Conclusion

The goal of this exercise was to give you the confidence that you can create decent website prototypes that give the freedom to see a design in a real browser.  From this point, once you have the prototype it would be very easy to start driving deeper into the application if you decide to go further with production.  You can start adding dynamic elements using programming languages such as PHP or ASP.NET to give the website a more dynamic feel.  But also if you decide that the website just is not worth pursuing, you have only lost an hour of coding but gained an hour in experience.