ASP.NET Hosting

Prototyping a web application

When you need to create a mock-up for a web application, how do you choose to proceed?

This is an interesting question someone recently asked me. What's the best way to prototype a web application which will be implemented in ASP.NET in the end. Roughly I can think about two ways:

  • use plain HTML
  • use ASP.NET and ASPX files

The choice is not that easy to make because both options have pros and cons.
For example, using HTML is much easier for someone who masters it, while asking that same person to use Visual Studio and ASP.NET is not really possible because the learning curve is still too high.
The prototyping phase requires the developer to be responsive, as much exchanges with the client as possible, and to go back and forth between the development and the sketching board. I feel that asking the dev to prototype in Visual Studio may add an extra burden to him/her. However, an HTML mock-up is mostly disposable, because we cannot simply rename the .html files to .aspx. To convert an HTML mock-up into an ASP.NET app requires much more work than this. Almost all the tags need to be reviewed, except of course for everything which is pure design such as tables, divs and CSS. That last point being true of course if you use CSS at the prototyping level. Otherwise you'll also have to clean-up the style stuff from the HTML tags and move it to a clean CSS file.
This shows that the time we gain if we use HTML can be lost when the time to switch to ASP.NET comes. Mock-ups done in ASP.NET can be easily reused as a base for the real application's UI which makes that solution more valueable. Also you'd have better time using ASP.NET if you need to have at least a bit of dynamic data or dynamic behaviour. If you do that with HTML, you'd have to do a lot of tricks with Javascript which can pollute your markup a lot.
For someone who masters ASP.NET, coding the mock-up directly with Visual Studio seems to be the best choice.

How do YOU create your mock-ups? Who does it? Developers?

Maybe tools like Dreamweaver MX are a good compromise for a mix between HTML and ASPX. Some experiences this way?


  • Hi Fabrice... I tend to use Powerpoint or Visio to create mock-ups for "walk-throughs" of my apps.

  • Depends how early in the process...most of the time Paper Prototypes are the most useful - progressing to graphical then Html then ASP.NET...

    Paper is cool because it's way easier to make changes!

  • Hi Darren, you obviously cannot reuse pieces to start the dev of your application this way. Do you have hyperlinks or do you have text to describe how the navigation works?

    Do you have screens' content sketched in Powerpoint/Visio or just the navigation tree?

  • often I will do a *few* html pages from frontpage to get the customers take on general layout, colors, graphics, types (fonts not classes)

    but only a few pages.

    then I use them as "design guides" thru the rest of the first set of pages.... untill the site is in a "beta" state where we can then walk thru at least 75% of the site live and check how it's going. at that point it's real pages and using .aspx

  • It might sounds strange, but we use photoshop for showing the look and feel of various areas of the application. For functionality, they have a big design report about that and can request to see areas of that functionality in a 'pilot'. Our designs come with a full graph of where what information is to be found for which target audience group and where which functionality is located. This works well. You can spend a lot of time in a prototype, but it will never look like a real thing nor will it be able to mimic what a customer will get. Theoretical insights in what will be build together with overview graphs what is located where and WHY (very important) is what customers like more (our experience). But YMMV ofcourse :)

  • Scott, agreed. Paper can be useful at the very first step. It allows to go very fast and allows everyone around a table to see and react. (maybe tablet PCs will reduce the paper step in the future...)

    Then comes a time were clicking on hyperlinks is the only way to make sure thinks look as expected. You say that you then go to HTML and ASP.NET... Do you reuse what's being done in HTML in any way?

  • Yes I knew about Denim. I tried it a while ago, and I really really like it.

    From what I read here, the important thing seems more to be sketching the UI as drawings (hence Powerpoint, Photoshop...) than having a live prototype in hands. It seems Frans has a pretty normalized way to do this, with not just drawings or navigation trees, but also with textual details. It sounds like the right way to do it.

    I think that if enough time is given to us, every step can be valuable. If someone asks me the ultimate way, I would go from paper to live ASP.NET prototype, with steps in-between including navigation graphs, design drafts as pictures, design reports, etc.

    Unfortunately, we hardly have time to follow such a complete process...

  • Depends what you are trying to do:

    1) Site Structure. Most of the people here fall into two groups: paper (like me) or visio. Whatever one is more comfortable is probably the best, but in the end you might have to import into visio anyway to give the client something to look at.

    2) Design. Photoshop or Illustrator are the best tools here (Illustrator is suprisingly good at site design). Once you have a design, you can transition it to ASPX files, but designs can change drastically, so you might not even want to do this till the design is solid and set in stone.

    3) Functionality: ASPX pages. Start coding your app. Don't waste time writing code you can't reuse. Remember too, you can start with no header, no graphics, etc. and integrate the design at a later point if you want to work in parallel (heck, you can even create some bare templates, then hand the ASP files off to the design team to pretty up).

  • I typically do this by mocking up the template design in Photoshop/Illustrator, then slicing it up with ImageReady. From here I get a basic tables based layout with header, side nav, footer, and content areas split into seperate table cells.

    I can go back to ImageReady and create smaller templates for the top navigation and side navigation, and then drop these smaller tables into the larger tables.

    Once I get the HTML template complete in static form, I start integrating it into an ASP.NET site, creating header, footer, and navigation user controls, basically making all the static faked out stuff in the HTML template actually work.

  • My 2c:

    Usually a combination of lots:

    1. Photoshop for actual creative.

    2. Paper for basic layout (usually before #1 - go down to a cafe, with a notebook, and spend a few hours....)

    3. HTML for creative - just the template tho! (can't wait for master pages!!!)

    4. Visio for basic form layout - do the same for Windows Forms, too....

    Works for me. Works for Compact Framework, Full Framework etc apps, too.... :)

  • Hi Fabrice, I just caught up with this entry again...

    I use Photoshop/Visio in the same way that Nic Wise has mentioned, that is, for basic form layout.

    I use a separate document - Word/Notepad/etc - which described what each block or element on the form does and another diagram which displays all of the navigational possibilities between forms.

  • I must agree with the paper prototype. My development notebook is full of drawings of forms, menus, and other designes that end up being the final cut.

    For those that are graphically inclined I've seen Photoshop work real well.

  • The quickest way
    1) Flow : Create JPG files of every image and import it in HTML as full image. Later use tag to create links. -----this is most quickest of all.

    2) Functionality: give discription of functionality while showing the screenshot of that page in jpg format.

  • I start on paper and move to visio/html when a more more formal document is required.

    Tables in Visio are painful.

    If the interfaces are table oriented I prefer html.

Comments have been disabled for this content.