Try a search using these terms: html wireframe design
That will help you research design methodologies. I'll give you a bit
of personal insight and observation based on several years of
designing and building web applications:
When I've had to build web applications in the past, I was always very
happy to see a client show up with wireframes in their
design/specification documents. In fact, wireframe designs are often
built in HTML, even when the application itself is not going to be
based on an HTML presentation.
I've even seen web application prototypes that were put together by
folks that were more graphic artist than web designer. These designs
paint the entire page as an image and then use hotspots on the images
to simulate links. This allows the prototype to display on the
client's browser during a sales presentation and ensures that cross
platform issues do not arise becuase the client has some funky weird
species of browser. Usually the hotspots are highlighted in the
images to make them easier to find.
The wireframes plus their accompanying narratives create an
application storyboard that is much easier to follow than a flowchart
or UML diagram or other technical specification. Those sort of
technical specification are great for explaining algorithms or code
internals, but it sounds like you are trying to focus on what the user
sees and how the user interaction flows.
If you can, create a document that can (even roughly) map each HTML
form element (i.e. INPUT, SELECT, TEXT tag) with its corresponding
database field. This will also be a great help to the programmer.
Ask your programmer to consistently apply CLASS attributes to each tag
in the pages and use linked stylesheets so you can worry about the
markup (shading, borders, fontstyles, etc.) separately from
functionality. Sometimes markup and design get intermixed during
discussions and evaluation. It will be problematic for you to be
fretting over color schemes while the programmer is just trying to get
the pages to run right. |
