VICTORIANWEB PROJECT: Research into existing Victorian themed websites

My previous redesign of the victorianweb.org site contrasted content, which was purely of a Victorian nature, with a clean modern design that concentrated on up to date viewing functionality.

For the next version, I plan to implement a more contemporary design.  I want to create a design that will result in the viewer instantly recognising that the site is relating to the Victorian era.  However, I want to try to avoid the site looking too over the top with it’s theme.

There are a number of sites on the internet that are Victorian themed.  I felt that many of them were quite lazy.  For example, this one has simply used fonts that are evocative of Victorian signwriting, a subdued colour scheme, and a number of victorian related elements (photograph corner holders, classic pointing finger etc.  However, little effort seems to have gone into the composition or execution;

Image

The following website looks incredibly authentic, but the newspaper layout style wouldn’t really work for the huge content of victorianweb.org, but could definitely offer some inspiring direction in terms of layout and use of fonts:

Image

Sadly, the following site no longer exists in the same design shown, but I really like ostentatious appearance.  The curtains and the horse made me consider looking into using images of Victorian (and older) stone carvings and adding a colour blend :

Image

Finally, the site for Ilkley Brewery in Yorkshire has exactly the balance between Victorian and modern in its design that I would love to achieve for victorianweb.org.:

ImageImageImageImage

This is a really beautiful site.  The landing page is visually very appealing, perfectly representing quintissential Victorian whimsy / eccentricity and entices the user further into the site.  It has a nicely designed logo that sits neatly in an attractive navigation bar.  The whole site is responsive, and it’s great fun just to spend a while resizing the browser window on the ‘Our Beers’ page to watch the brand icons adjusting positions.  The news page is very well balanced and looks authentic and modern at the same time, Also, the footer has some really nice design details that I will take inspiration from.

 

 

Development log – Photoshop tools and techniques

  • To go back into edit mode on Shape (rectangle, ellipse etc), hold control and click on the layer icon – this will bring the marching ants back.
  • Layer Groups can be colour coded (to help with category/type separation) by right clicking over the eye symbol and selecting the desired colour
  • .Image
  • To sharpen an image, duplicate the layer, select Filter > Other > High Pass, then add a Overlay, Hard Light or Soft Light blend and Hey Presto – the image is sharpened.  This really works – and the temptation is to now go into ALL of my scanned images of old family photos and sharpen them up!

Research – Flat design for websites

I have been looking into flat web design, which I think would strike an interesting balance with the VIctorian subject matter, and research functionality of the website being redesigned.

I found this interesting article that has 12 interesting examples of flat design:  https://creativemarket.com/blog/2013/07/31/12-creative-examples-of-flat-web-design

Some great flat-style infographic sites can be seen at  http://blog.karachicorner.com/2013/05/best-flat-ui-kits-for-web-and-app-ui-design/

Palace http://palace.co/ are a design agency based in Bristol who are creating some really inspiring responsive ‘flat-style’ web sites.

I hope to make the content the main focus of attention on the victoriaweb.org site by employing this type of design.

However, I may find that the modern design contrasts too heavily with the subject matter when it comes to actually viewing the articles on the redesigned site.  I may be able reduce the sense of juxtaposition by introducing additional Victorian references.

VICTORIAWEB PROJECT: Research

I performed some research into the appearance and functionality of some websites that could be considered to be in the same category as victoriaweb.org (i.e. Historical, Archive, Heritage)

1) http://www.postalheritage.org.uk/

  1. Clean, clear design (I particularly like the cartridge paper textured background)
  2. Effective use of tiles for subject categories in History section (good and consistent use of images and white space on each tile)
  3. “In This Section” side panel gives easy access to other subjects to save going back main section content page
  4. Nice simple element separator (dashed line – evocative of perforated stamps)
  5. Not too keen on the fact that the header changes colour for each page –  I feel it’s a bit unnecessary compromises a sense of consistency though-out the site.
  6. The double row of links on the navigation bar is a little jumbled, and the serif font looks a little cheap/out of context,
  7. No image in header
  8. Header in and nav bar row extends to entire screen when viewed on widescreen monitor, which doesn’t look too great

Image

2) http://www.nationalarchives.gov.uk/default.htm

  1. modern flat design – extensive use of illustrated images.  Bold tiles and ‘ribbon’ title banners
  2. Responsive design (sections collapse to one category width when viewed on smaller devices and call to action buttons repositioned.
  3. Superb hidden menu system.  Clear, central call to action button to reveal extensive menu.  Menu items Initially hidden away allowing for uncluttered default home page.  Great solution for responsive design (this way menu system is unchanged regardless of viewing device size).

Image

Overall I like the clean, modern appearance of this site, but feel that it would have benefited from better use of white space.  There’s not a lot of space between the various elements, and I feel that this is needed to separate such bold elements.