Designing your web page



I apologise to all the web design students for neglecting them these past weeks. Hope that this post will go some way to alleviating your isolation.

One of you had asked me how to transfer a print grid to an online page. Not knowing if there was a way to do this, I did some investigating.

I think that you need to think about your web and print pages as siblings, they may share some similar traits (hair, nose, eyes, typeface), but they may be very different in other ways, like how they behave.

You should design your print pages to take advantage of the print medium. Print is a tactile media – you can flick pages, you can unfold them, you can rub your hands all over them and smell the ink (not too much though!).

Web pages on the other hand, are in no way tactile. For me, one of the advantages that web has over print is immediacy. You can post a story on the web as soon as it happens, so your readers can always be in touch with what’s going on.

The networks and links which can be set up easily through the web are one of its greatest advantages. The way that MySpace and YouTube have taken over means the old media houses are having to play catch up (Rupert Murdoch does own MySpace now though!). These user-contributed content sites are definitely going to lead the web for a few years, especially in this age of individualism where people want to be able to “choose” the way that they get their news and information.

Web design these days is about building event-driven experiences, rather than sites. Instead of designing your web pages as static documents, you should consider the way in which people will move through your site.
• What will they get there and will they stay?
• Why would they come back and who would they introduce to it?
• Can they contibute to it so that they feel as though they are part of a community?
• Can they personalise the site to make it more their own?
This is all Web 2.0 stuff, with which you should all be familiar. Here’s an article about it. Or you can read the Wiki definition.

For those who are creating both a web page and a print publication, you’ll need to offer your readers some visual connections for them to make the link between the online and the print. The typography that you use for your main navigation will provide most of the connections. The use of colour and the style of imagery you choose will be the next most important link.

For all web designs, you should consider what makes a good web page. Think about the pages that you most like going to.
• Do they have a lot of text?
• Do you need to click or scroll to read long articles, and which of these do you prefer?
• Is the text large or small, is it readable?
• Is there enough contrast between the text and the background so that reading is easier?
There is an interesting list here of common web design mistakes that may interest you.

Some other links from this Alertbox site:
The use of scrollbars
The design of websites for teenagers
Why web design standards help readers
The design of links

Mark Boulton has an interesting article on his site about designing the pages that are printed out from the Guardian online. He talks briefly about making the page appear to be linked to the design of the printed paper. There is another story on his site where he explains how he creates grids for the web. You can read it here.

So in answer to the question of transferring a print grid to an online envionment I would say – don’t do it! You should design the grid for your web page as separate to your print publication, keeping in mind how people will read your site.


No Responses Yet to “Designing your web page”

  1. Leave a Comment

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: