Monday, 16 May 2011

Speaking from Experience - Icons & chosen colours

There's probably inevitably going to be more icons to design but these are what I have so far.

General icons (bottom row): 94% black
Studio icons (blue): CMYK = 57, 15, 5, 0, Hex = #66bld8

Digital print (green): CMYK = 51, 0, 87, 0
Screen print (purple): CMYK = 85, 66, 0, 0
Woodblock (orange): CMYK = 0, 45, 100, 0
Lino printing (red): CMYK = 0, 100, 100, 18
Mac suite (pink): CMYK = 0, 93, 53, 0





Edit: Okay these are the FINAL colours (maybe). The lino printing icon was created as I was originally going to focus on all the traditional printing methods. However, now that I am focusing more on a map and signage around college, I decided to encompass all other printing (bar screen print and woodblock/letterpress) using this icon. I also gave the library/lecture theatre icon a colour.



Edit 2 (23/05): Changed the lecture theatre icon to the library icon (in red) and created a new lecture theatre icon in the style of a video camera (teal).


Sunday, 15 May 2011

Speaking from Experience - Floor Plans

I will use these floor plans (or an aspect of them) as the basis of my maps. 

First floor



Second floor

Speaking from Experience - Progress Crit

The progress crit went well as everyone seemed to like the idea. However, it was suggested I could push the concept further, creating signage around the college. I originally planned on doing this but got sidetracked with the interactive website. I will need to choose a set colour palette as currently, I have one, individual colour per facility/resource. However, I decided in the crit to have all general resources i.e. Toilets, canteen, first aid, reception etc in dark grey and the main design facilities in their own unique colour. This will be referenced in the signage around the college in order to keep a consistent corporate identity.

I will now explore various design ideas for guides and signs to plaster all over college using the icons I have already produced and the same design aesthetics as the website.

Speaking from Experience - Web Design [2]

For this web design. I have focused moreso on the interactivity. The map has been enlarged in order to fit a larger scale floor plan and icons have all resources & facilities have been listed below - including the ones featured on the map. The map itself uses the same user interface as the previous design - the user hovers over a particular area, the background changes and once clicked, a pop up appears revealing more information.




Underneath the map, I have listed all the resources/facilities available in the college through their respective icons. The 3 which are present in the map are highlighted in colour whereas the others are light grey. 



When the user hovers over any icon, a tool tip appears above indicating what resource it is. The user can then click this, loading a new page showcasing where it can be found or simply indicate on the map where it is (if on the correct floor).


Speaking from Experience - Web Design

An interactive map of Leeds College of Art. This is one of the designs I mocked up in Photoshop using a limited colour palette (bar the icons) of grey and blue. I have used the Leeds college of Art logo to give a sense of corporate identity and so are users are familiar as to what this interactive site is in reference to. (The blue was infact taken from the logo itself). As you can see, the map takes up a large proportion of the site as this is the sites main focus.

The map is currently a very brief mock up of the lower ground but I will use existing floor maps of the college as a basis for my own. 




When the user hovers over a certain area of the map, the background changes colour according to which facility or resource is shown. For example, digital print is green (as shown in the icon to the left), whereas the computer/mac suite is magenta.





Once a user clicks on a certain area on a map (in this case, digital print), a pop up would appear with a brief introduction as to what the resource is along with any other important including price guides and opening times.



In the header, the user is able to change the campus/building using a simple 'change' button. This would then load a new page containing a different map. They are also able to change what floor map they'd like to see - lower ground is currently highlighted but this can be changed.



Alongside the map, I could have a brief introduction as to what can be found on that particular floor followed by the icons showing what facility or resource is available on the map.