MCSHANNOCK

Interactive Multimedia Design Student with a passion for Graphic, Web and Multimedia Design.

[mcshannock]

DES310 Narrative & Storytelling - *Deliverables and Live Links*

DES310 Folder (Includes all module deliverables) -http://scm.ulster.ac.uk/~B00681193/des310_assignment%201/

Heroes & Villains Website -http://scm.ulster.ac.uk/~B00681193/des310_assignment%201/Heroes%20&%20Villains%20Website/

Takahe Bird Website -http://scm.ulster.ac.uk/~B00681193/des310_assignment%201/Bird%20Website/

Style Tile Folder -http://scm.ulster.ac.uk/~B00681193/des310_assignment%201/Style%20Tiles/

Moodboard Folder -http://scm.ulster.ac.uk/~B00681193/des310_assignment%201/Moodboards/

Typography -http://scm.ulster.ac.uk/~B00681193/des310_assignment%201/Typography/typography.html

***All other prototypes, research and relative material can be found on this Tumblr blog***

[mcshannock]

Prototype

Image section of Takahe Bird Website. Showing simple blockquote along with a responsive image grid layout. This image grid is similar to the one used in the Heroes & Villains website with micro-interactions as seen on the Dr. Orbell photograph. The caption area fades up from the bottom of the image. 

The yellow HR tag also fades in using animate.css

[mcshannock]

Prototype

Bird feet icon for Takahe Bird Website.

[mcshannock]

Prototype

Title area prototype for Takahe Bird Website.

[mcshannock]

Prototype

Blockquote prototype for the Takahe Bird Website. 

[mcshannock]

Responsive - Takahe Bird

Working on RWD using Media Queries. My Takahe Bird Website will respond in relation to any screen size, including mobile. 

As shown, I have dropped the navigation down in order for the links to fall under. I opted for this instead of the hamburger icon. 

[mcshannock]

Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.

Code used to enable active link in navigation menu to change on page scroll, as well as on click. 

[mcshannock]

Prototype Images with Micro-Interaction

Images of Characters for the Heroes & Villains website. Micro-interaction on rollover - name fades up from the bottom of the image, illustrated in the first image of Sherlock Holmes.

Also notice, that photographs for both Moriarty and Adler are darker than those of Sherlock and Watson. This is to portray evil. 

[mcshannock]

Prototype Title

Title for 221B Baker Street section of the Heroes & Villains website. Double border being used to represent a street sign. However, the same style of title will be used throughout. 

[mcshannock]

Prototype Landing Page

Opening title screen for Heroes & Villains website. Using a darkened London background which includes the iconic Big Ben.  Font used was sourced from Google fonts - Lovers Quarrel, which is a cursive font family. This font is different from the font used on my Heroes & Villains style tile, due to it not being on Google fonts.

[mcshannock]

Prototype Navigation 

Navigation menu for Heroes & Villains website. Active state changes from white to a grey colour. The navigation menu also changes on scroll, this is done using JavaScript. The active state will change dependent on which section of the website you are on.

[mcshannock]

Prototype Icon

Icon of Irene Adler - I will likely use this icon in her section of the Heroes & Villains website.

[mcshannock]

Prototype Icons

Footprints icon to represent Sherlock Holmes. These will be used in the Sherlock Holmes section of the website. 

[mcshannock]

Sketches - Heroes & Villains

Sketches for Heroes & Villains website, illustrating icons, titles, blockquotes, etc. The theme of this site will be based on victorian London and the 2009 Sherlock Holmes movie. 

[mcshannock]

Storyboard Sketch

Storyboard layout sketch for Heroes & Villains Website.  May use similar layout for Takahe Bird Website.

[mcshannock]

Prototype

Table for Takahe Bird Project. Using accent colour of yellow for my title, along with the greens for the background to keep in line with the style of the website. 

This table is also interactive - The background colour changes on hover, this makes it easier for the user to read the line of content. 

[mcshannock]

This is the live version of my Paul Rand typography quote

This is the live version of my Paul Rand typography quote