i am dustin diaz

Make an HTML Wireframe

When I hear the term mock-up I think of several different things. Before I begin html development, I receive a mock-up. When I am finished developing, I have then created a second mock-up. In between those two stages, there is a wireframe flow which presents layout, but not design. By this time I am ready to either take the bits and pieces of html and plug it into a well crafted & engineered program, or pass it on to another programmer to finish it off with other backend development. Which part am I mostly concerned through these few steps? To be concise: the transition between a graphical demo which shows layout and design (which is usually represented as an image file - eg. .psd, .png, .jpeg) — to its actual developed self in html. For what I do, I am most likely never the one who designs. I am not a quote-un-quote Web Designer. I do programming and development. So, if you too, are a developer, this article might concern you and how it can benefit the communication barrier between you and your local Interaction Designer.

Think Outline

When viewing a proper layout using semantic markup without style, it should look like an outline. If yours does not, you should probably be learning other things right now. Otherwise I will assume everyone knows what I'm talking about. So, making an html wireframe I believe will involve education your designer a bit on how content and presentation works. This shouldn't, in my own opinion, involve that the designer learn html (even though it's easy).

The problem

Often when I receive a visual mock-up it instantly becomes a guessing game. The first things that usually come to mind are:

Where do I put this content? What comes first? Am I reading from left to right or from top to bottom? Does the navigation come first or does the company header take presendence?

Granted, you could say it's part of a web developers job to figure this stuff out...but I'd like to make a case for it to at least be a separate task. This is the very break-down that occurs between a designer and a frontend developer and it needs to be resolved better. Thus, I propose html wireframes.

What is an html wireframe?

Not like your typical wireframe which illustrates layout without design, but rather an outline written in plain text describing the hierarchy of elements and sections of a webpage. Something like this can be written in a simple rich text editor like Wordpad or MS word or pretty much an editor that will allow one to manipulate text to different sizes and hopefully one that can insert bullets to make lists. The point of the matter is to have something that can produce a similar effect to that of an unstyled webpage. Thus by having such a document at-hand a developer can streamline the process of plugging in the correct tags and dividing up the document in a much more efficient manner.

Is anyone doing this?

Not that I know of. But I can honestly say that for how long I've been doing this, having an outlined document of a webpage would save a ton of time and will help aid in practicing standard compliant design. Also adding a step like this to a typical workflow I believe will save more time than the amount it takes to implement the practice. Typically when vaugue requirements are handed to a developer (or any part of the web development process) — the total amount of time is increased due to more bug fixing and more change requests. But hey, this isn't rocket science. Whether your company implements a practice like this or not, you should always be communicating with your project co-workers.