FINAL PIECE #3 – VICTORIANWEB.ORG – SKEUOMORPHIC STYLE

Image

Image

Image

The sliding content effect can be seen on the online version at http://www.onebigegg.com/college/victorianweb.html  (note: the links on the category headers don’t actually initiate the sliding content/articles – instead the 2 buttons at the bottom of the list need to be used on this prototype version).

Reflection:

The Skeuomorphic version of the site is based around a central viewing ‘folder’ that all content and article pages are delivered to.

This is an improvement on the original site for the following reasons:

·         Now visually interesting

·         Improved user experience – appealing to use.

·         Easier navigation between categories and articles.

·         Content page behind article page serves as visual breadcrumb trail back to source of article being viewed

·         Separation of main site navigation (about / links / contact) from content, and ‘Home’ link available at all times

·         Message and Twitter feeds encourage communication by users regarding site (should serve to advertise site to wider field therefore increasing hits, and also the content of the messages themselves should serve as quality content in themselves (users leaving posts relating to query, analysis, referrals and recommendations) and also helps to make the site feel active and live as opposed to static data.  I will particularly please with the headers for the Message and Twitter feeds.  The Twitter logo was grabbed from the internet, but I custom made the Message one using the Twitter logo as a template.  I ‘filled in’ the Twitter ‘T’ so that I effectively had a blank template logo, then created the speech bubble inside.  A CSS3 transform-rotate function was used to have them sit at an angle,

If this were a real project to be seen through to completion, I would need to address the following considerations:

·         The prototype I’ve designed loads separate pages for each content and article page.  This creates a lag in the sliding effect as each of the images that make up the cardboard folder reload.  By the time all have reloaded, the content / article page is already in place.  Ideally I would like to have the site operate as a single page where all content is loaded though Javascript.  I have developed something along these lines when digitising my Grandfather’s war diaries (www.dunfordandwest.co.uk/diaries).  However, that site loads content into the main page from a single page of javascript arrays.  I would need to figure out a way of loading text from individual javascript pages (a javascript page per article), and for the links within the text to contain links to further javascript pages in themselves.  If this were achievable, the content would then be able to move fluidly left>right and bottom>top. I updated the page 08/12/13 so that a jquery command is now used on the landing page to slide in the content and article.  The initial loading page is very slow though.  In a real life project I would see if I can get the speed down by optimizing the images further, and maybe consider introducing an interesting loading graphic (as the slow load period would onlt be experienced the first time that the site is loaded).

·         There is some overspill of content on the content and article pages before they have loaded.  This is a result of the margin around the div area to allow the drop shadow to show.  This would need to be overcome if the project was to be delivered to an actual client.

·         The current prototype does not consider how articles will be viewed when the height is greater than the viewing pane.  I would consider either adding a down arrow to scroll down to remaining content, or a ‘curled page’ in bottom corner to indicate that page should be turned.

·         A responsive version of the site should be created as the sliding folder format would not work well when viewed on mobile devices.  A much simpler version would need to be delivered where the content/article pages are the main feature (rather than the visual folder).

·         In my original analysis of the original website, I mentioned that a feature to view a random article would be very beneficial to this site, and this is something I would definitely add were this a real life project.  This would probably be a tab to the left of the ‘Home’ tab but separated by 10 pixels or so, and in a completely different primary colour (red?) – it could be called ‘Lucky Dip’ as everyone recognises the meaning of this phrase.

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