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.

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 download a text file of the sample above click here