Student Photoshop Page Mockups

Ben Davies

Click to enlarge.

Live working preview: www.creativeben.co.uk/hurd/

Influence of visual style:
I would say my primary influence was primarily from the sort of material I saw there on my visit to the Herd library. The thing that caught my eye were the vast numbers of old style books, I then made some very generic associations with lead me down the road of things like, creaky wooden floors, candlelight etc. Then I simply used my imagination with regards to the era and historical context ensuring the design was going to be suitable and in some way unique"

Navigation: 
Many considerations went through my mind at very early stages - It was either going to be the buttons themselves to be visually stimulating or the context in which they were placed. What i didn't want was to hide the navigation beyond amongst the design - this would conflict with usability.

In the end, I decided to use a more simple and organised approach, much like the books i saw on my visit. There were many versions of how this was going to look - but i think now i'm settled on how the navigation is going to perform when all the pages are up and running."

Grids and Columns
In my opinion columns are a very useful weapon in web design. They can create order and clarity when used alongside negative space - learning when and where to use them is perhaps the tricky part. Some content works better in a larger space - It is important to remember to make multiple styles for your main content area. This way if you need to have a large image which will take up a width larger than your specified column width, you can simply style a new container div to accommodate for the picture.

I tend to do rough grids in my mind rather than visually on the page - I learnt to design by eye and i think sub-consciously I picked up the laws and rules of how to use them. Admittedly sometimes i use grids - they can be very useful guides and sometimes I can get it wrong and think that i should have planned my grids before hand but i think it is important to have the sense of freedom and not think inside the box as they can be very restricting.

Andy - Some refined visuals here Ben - well done. I realise that you're ahead of many students as you've done much freelance too. It's good to hear your comments and thoughts here though and useful for your peers to look these over and consider them in light of their own designs. Especially so the idea of incorporating columns and grids into the designs.

I think the screenshot is actually a little darker than when we last saw it on screen but I like the way that your screen is easily partitioned into sections i.e: Header/ID, navigation and content area [much as we'd experimented with on the 'Duck' PSD task I guess]. It's clear, logical and legible [if not a little dark in this example] - the wood paneling is [I'm guessing] the inspiration for the general feel of things?

Rachel Comments:
Re Ben's - I rather like the mysterious atmosphere created by this rather sinsiter dark approach but am alittle concerned about the red text on the left side. Red is notoriously bad for access on any background and especially difficult for partially sighted. Having said that I think this page would definitely entice me in to find out more.

Dom Gambetta

Click to enlarge.

1. What influenced your visual style[s?]

http://www.ilove2design.at/index.html was a major influence on layout, I really liked the way the text sit and the legibility of it all. However I adapted the style to suit the Hurd Library much more, changing fonts and the navigation.

2. What consids did you have navigation-wise at Photoshop visuals stage?
I had to consider the target audience, I thought to myself "How can I make this website really functional, and add quite a few links inkeeping with the design?" The simplest solution was to add a line of text links, that will remain in the same place throughout the different web pages.

3. Do you use a 'grid' or columns system and if 'yes' then what benefits does this bring with page layout?
For this particular page (the home page), I have used a 3 column grid in the lower section - this is to ease the legibility and bring the viewer in to some short interesting paragraphs where they can opt to read more, this keeps the user more interested as there's not too much text (which can be off-putting for a website). I'm going to be varying the grid systems throughout the web pages, but make sure there is continuity with all of the text so that it still feels like the same website.

Andy - again, simple but effective layout with a clear grid involved and some nice play on typographical lines/angles here. The red aspect seems to put across some kind of 'luxury' element - possibly like velvet maybe - which seems strangely in synch with the library and the feel of it - maybe it's something symbolic or possibly semiotic that's doing that? I guess poss the only comment I'd make at this early stage is that it's an almost youthful look for a very old library/institution which has so many historical refs - I wonder if something subtle needs adding in ref to the historical side [although the formal fonts used do help convey this to a certain extent].

Rachel Comments:

Dom - I note Andy's comment re 'youthful look'. I don't see this as a bad thing since we want the Hurd Library to be perceived as a living working research library as opposed to a 'museum' type perception. Again, the text/background contrast could be greater.

Vicky Harris

Click to enlarge.

Andy - I know that this isn't anything like worked-out yet Vicky but I really like the angle you've taken. The library had so many classical refs in there - old paintings, busts of famous individuals etc - it's totally fair game to try and utilise some of these visual refs in your webpage/mockups. I wonder looking at the above though if they're going to act as some form of navigation or maybe they'll do something multimedia-wise when rolled-over/off in the future? Clear and consistent main navigation and I can see the footer too could contain supporting info/secondary navigation etc if required. Keep up the good work - I'm keen to see this idea progress and be refined..

Rachel Comments:

Vicky - a totally different approach which is jumping out as saying 'I am interactive play with me'. Even in the early stages this design elicits excitement. I wondered (just wondered) whether so many pictures this might be a 'one click in' rather than all on home page.

Chris Comments:
I am impressed by the richness and general design of the first two but the third looks a little cold I thought [although this only a very quick message and I'll think further in January].  I agree about the red text on Ben's.