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.
July 23rd, 2005 at 6:33 am
Hrm… could you give an example? From what I understand, you’re talking about something similar to a `proper’ xhtml/css page with the styles turned off.
Something that could be helpful with doing design is putting all layout rules in one css file, which is linked from another one that has all the fancy colour, font, &c. rules. That way, you could make a specialised file that gives all elements an outline, which would help in that respect.
In other words:
style links layout -or-
outlines link layout
July 23rd, 2005 at 10:05 pm
My main case for making an html wireframe is the actual outline. Technically, it’s a pre-html document. Like a “before you begin” type dealio.
Inside Microsoft word, there are header tags available to use as well as bullet points and of course normal paragraph text. Now, don’t get confused, I would not recommend hitting the ’save as web page’ feature (which really shouldn’t be called a feature). But that could be used to copy and paste into your actual development editor where you can add the proper tags yourself.
Another way to make one of these types of wireframes would be to develop the page without even using <div> tags. Thus it would really force one to search for the correct tags to use for every bit of information.
July 24th, 2005 at 11:33 am
Ah, I gotcha.
I still like my idea… I may implement that. My layout isn’t particularly complex (at all), but it still would simplify things for explanation purposes.
July 29th, 2005 at 8:45 am
That’s an interesting idea - layout your pages with semantic markup first, then apply the styles - sort of like you’d do if you were designing a CSS Zen Garden entry. You focus first on the content, then fit the design to to match the content rather than the other way around.
July 29th, 2005 at 8:57 am
Hep Jay, that’s pretty much exactly it. It forces the developing teach to actually separate your content layer from the style. Of course, that’s old news to everyone else, but actually making a wireframe out of it…I don’t believe anyone has done.
August 5th, 2005 at 9:49 pm
[...] my website. Use semantic markup Write Good titles – and put them in your title tag make an HTML wireframe for your website Yep. Just those th [...]
August 5th, 2005 at 9:49 pm
[...] my website. Use semantic markup Write Good titles – and put them in your title tag make an HTML wireframe for your website Yep. Just those th [...]
May 16th, 2006 at 4:16 pm
I know this is an ancient post, but because it was recently linked from Blue Flavor it might get a few new views. Therefore, I thought I’d add a comment on a killer tool for developing these outlines–Dreamweaver.
As long as you don’t try to do anything fancy, the newest versions of Dreamweaver produce rock-solid markup. It has all the right features, too. Shortcut keys for various heading levels (control+1-6,) easy bulleted lists (it even produces compliant multi-tiered lists,) and other basic word-processing functions are all there. The best part is that when you’re done building your page or site outline, the markup is already created for you. Add a couple of ids and maybe a container or two, and you’re done with that part of it. You can then move on to css editing or whatever in code view.
Your HTML wireframe idea is a great idea (people are still talking about it a year later, after all) and Dreamweaver is really a perfect tool for it. In a smart developer’s hands, it can do great things.
September 29th, 2006 at 8:58 am
Thats a cool idea of creating a wireframe. The designers as well as the clients also can get an idea from the very begining.
April 3rd, 2008 at 2:27 pm
What about using css to add content before or after a piece of text in the outline, then color that label in red. So after a paragraph of text, it would say or ‘paragraph’.