Web Page Mock Ups
"It's all Greek to me!...........or is it Latin"?
Website design and construction needs careful planning. And just like
designing conventional brochures or literature, it pays to sketch out your
ideas before you actually start creating the individual elements of the
project. The overall site map can be simply roughed out on paper, or if you
need a more professional looking document, prepared in a "flow chart" style
presentation package. Some HTML editing software, such as Golive 6 actually
provide this facility, with the added bonus of being able to convert the
page icons in your layout into "real" ones once you have finalised your
design.
Having established the overall site plan, it is time to look at the design
and content of the individual pages. And here, rather than start laying out
your web pages immediately in your favourite web page editor, it is often
easier to prepare your basic layouts in an image editing program such as
Photoshop. In my experience, no matter how carefully you think through the
design, there are invariably elements you'll want to change or modify as the
project and your ideas develop.
In this respect, even though they are just "visuals" it helps if the web
pages appear to be as realistic as possible. One way of doing this is to use
a short text file which I fondly refer to as "Lorem Ipsum" to simulate body
text wthin the documents. This text is used extensively in the desktop
publishing industry, and, although it is complete "goble de gook" , is
has been very carefully contructed. You might think that just typing a
random set of letters to indicate areas of "proper" text to be inserted
later would be sufficient. However, just try it and you'll soon realise it
is remarkably difficult to make it look convincing!!.
In my own design work, I add a further touch of realism by placing "real"
text in the opening paragraphs of my documents. I then simply flow in the
text file afterwards, to make up the necessary "body text" to complete the
section. When viewing any document initially, our eyes rarely "see" much
beyond those first few lines, and so we hardly notice the transition to the
"Lorum ipsum" text. As you can see in the accompanying home page "mock up"
for a new web site project of mine, the result, is extremely convincing.
To see a large version in its own window click here
Sample of Lorem Ipsum Text:
Lorem ipsum dolor sit amet, selit tred diam nonummy nibh euismod tincidunt ut laoreet dolore magna
aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci. Tation ullam corper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate. Stelit esse molestie consequat, vel illum
dolore eu feugiat nulla. Facilisis at vero eros et accumsan et iusto odio dignissim qui. Blandit praesent
luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Des diam nonummy nibh euismod tincidunt ut
laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud. Exerci tation ullamcorper suscipit lobortis nisl ut aliquip
ex eaco modo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
consequat, vel illum dolore eu feugiat nulla facilisis at vero eroset accu msan et iusto odio. Blandit
praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
To down-load a text file of the sample above click here
Written By Peter Phelan
|