DESIGN IDEA #3 – DEVELOPMENT IN PHOTOSHOP

First I created the basic shape for the cardboard document wallet, and then in Illustrator created a logo that had an incorporated navigation section (though it is now evident that having navigation in the logo isn’t clear enough:

Image

Image

I then started to play around with adding file tabs for category headers and navigation but soon realised that the page getting too cluttered.  I therefore scrapped the idea of adding additional scuomorphic elements and add the category headers as simple text with ‘>’ symbols to indicate links to content.  This works well because the arrows also point to are that the content will appear.

Image

To unclutter the left hand side where the navigation will be based, I decided to move the logo to the background of the content area.  This works really well because it serves as focus for the landing page (before any documents/content has been selected).  I may consider adding a tagline/description to the logo later.

You can see that the tips of the content pages are visible.  When a category is selected (from the UL nav list on left hand side) a yellow ‘legal pad’ style sheet will slide from left to content area.  This yellow sheet will contain the lists of links to individual articles.  When an individual article is selected, this will slide from bottom to centre of content area.  When an article is closed, it will slide back down, re-revealing the original category page.  This will be a huge improvement on the original site in terms of recognising whether you are viewing an article or a content index page.

Here is a shot of how the category content will look when it has been selected:

Image

And now with a sample article select (would have slid from bottom to centre):

Image

 

I next need to work on the following considerations:

  • Main Navigation
  • Consistent Content and Article headers / titles
  • Body background image/texture

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s