VICTORIANWEB PROJECT: Development of layout within Photoshop


I have created a viewing area (rather than an enclosed window) by only displaying two sides of inner shadow within a rectangle,  I like the minimalist design of this, but need to seek some feedback from other users to ensure that it doesn’t appear to be simply unfinished or unintentionally cut-off.

I have copied the links for the articles directly from the original website.  At the moment, they look jumbled, and it is not clear where one link ends and another begins.

In the next image, I have added some space between links and separated each one with a subtle line divider.


The idea is that the article titles in the sidebar would not be links to separate html pages.  Instead, clicking on an article title would result in the article displaying in the viewing window by using Javascript functions.  

This would be a major enhancement of functionality on the existing version of the site.  It is currently very difficult to just leisurely browse through articles as the user is constantly having to go forwards to articles, sometimes up two or three levels, then come back to the main category subject and remember where to continue from.

With this redesigned version, the user can easily click though the articles, expand any links that are actually to further folders, and easily keep track of progress through the site.

I next need to consider the following design challenges:

  1. An indicator to show which article is currently being viewed
  2. Consider how the viewing window and article sidebar would scroll independently, bearing in mind the overall page structure would be fixed.
  3. An indicator showing article links which are to sub-folders
  4. Reference to Main Category titles that contain articles relating to the article currently being viewed
  5. A logo
  6. A specific home page article that users will see when first opening the website
  7. A subtly coloured / textured background



Leave a Reply

Fill in your details below or click an icon to log in: 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