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.

FINAL PIECE #2 – VICTORIANWEB.ORG – DATABASE STYLE

Image

Image

Reflection:

I designed this one early on in the project, and intentionally started on the content page first as I knew that the rest of the site (including the landing page) would have to be based around the design concept for the content viewing pane.

However, when it came to working back to the landing page, I could not think of a design solution that sat comfortably within the viewing pane format, so scrapped the right hand side bar for the landing page.

This opened the page up visually, and gave me the opportunity to start thinking of landing graphics & text that will greet the user to the page.

Using the fantastic marketing campaign for Babingtons Tea Rooms in Rome as inspiration (http://2012.effectivedesign.org.uk/corporate_brand/babingtons.php), I created a Vector mascot of a man on a penny farthing.  I wanted to inject some of the daft/eccentric imagery used so effectively by Babingtons, and  a man on a penny farthing never fails to look ridiculous, while perfecting conveying the Victorian theme at the same time.

For the text, I wanted to achieve an effect often seen in newspaper & magazine advertisements from the 1960’s and 1970’s where a short, direct statement is placed either centrally or in a visually compelling location in relation to the image / page.  I had a clear image in my head of how these adverts looked, yet found it surprisingly hard to find examples on the internet.  In my mind they usually consisted of phrasing that spoke directly to the viewer – like “Because he knows time is an asset.”  Or “Go on. Make someone proud today. ”

Having placed the mascot in a visually interesting location (tight in the bottom-right of page), I decided to place the text off-centre  and in good balance to the mascot.  I have chosen a serif font because I think this gives the text a sense of authority and class, again evocative of the adverts from 60’s and 70’s.

If this were a real life project, I would consider developing this landing page further by hiding away the category navigation boxes into a collapsed header or footer, and have this hero image & slogan text fill the whole page.  It would also be interesting to see if I could come up with a number of different slogans that are informative yet slightly ridiculous (in a similar vain to Babington’s Teas). A different slogan would be displayed each time the landing page is opened.

In a real life project, I would also want to add social media feeds as I do believe that this would be a welcome addition to the site.

Final Piece #1 – victorianweb.org – Flat Design

Image

Image

Image

Image

Image

Image

Image

Image

Reflection:

The background image to the header on this site has had a blur effect added.  If I were to develop this into a fully functioning site I would gather more images from the Victorian era and have a variety load into the header – either alternating each time the page is loaded or fading from one to another as the page is viewed.

Much like the skeuermorphic site, the real benefit of this redesign is ease of navigation between the categories.  All of the main categories are always accessible at the top of the page (the reduced header/navigation area and footer would be ‘fixed’ and therefore always showing.  The clutter of about/contact/link have been removed to the footer as these are only likely to be referred to once by the viewer.  There is no need for a link to home as all categories are always available to click on anyway.

The articles ‘pop up’ and appear in front of the main content and appears in a viewing window that is visually suggestive of an ipad.  The colour theme of viewing window border and article header is consistent with the category selected.  When an article is being viewed, the main content behind has significant opacity added to mimic the appearance of an overlay / lightbox.

The beauty of a flat design like this is how easily adaptable it is when creating a responsive version – the creation of which would be a very interesting project in itself.