Positioning Instagram icon & change of plan for website

Positioning Instagram icon & change of plan for website

I needed to see if the icon I made fit in with the layout and aesthetic of the website so this was the first point of call. 

First tried out how it worked in terms of weight and impact when positioning within the layout, it was clear from the outset even with small scale the bolder icon stood out a little too much.

 

Scaled the icon down a little more so it fit and felt balanced within the typography sizing, it was important to maintain balance between all the content on the site, I already have a contrast of small typography and large image that works I don't want to interrupt this so making the icon work with the size of the type is the best way to go. 

Tried a few variations of positioning the icon but was struggling to make it feel like it belonged in the vast amount of negative space, it felt quite lost.

 

Tried scaling the icon up and positioning it so it felt like it locked in within the spacial region of the imagery but it still felt lost.

  

A more central alignment of the icon helped create balance and a sense of proportion and structure within the already structured and minimalist layout. The content all feels locked into place within the websites negative space its important the icon does too. 

  

Here is the final positioning of the icon, the bottom of the page is often a common place for web designers to place external links & iconography, in terms of hierarchy it works too as well as not been distracting, the user digests all the imagery and the supporting text then their eye finally arrives at the bottom of the page were they can have the option to access the external link for a gathered body of images on the Instagram account (end users main intention is for lots of image content) 

Also shows the transition of outline to block color when the end user hovers over highlighting the link is selected ready to access the external Instagram account. 

 

Important website change
After having a chat with Tom about coding and java script I came to the conclusion the navigation system using the circular icons to navigate through the images wouldn't be feasible, the actual navigation system wouldn't be a major problem just having the transition of color image to B&W image (on a hover over interaction) for every image within the library would be difficult without looking into complex javascript coding. As I'm a beginning for web coding I definitely don't want to get into that right now!

So the new idea comes from my original proposal (in first crit with digital mockups) of vertical scrolling images, only this time not all the images will be completely visible, there will be an invisible frame around the images, creating a focus point on the image through a "view finder", and the text box that appears on the B&W image from the color to B&W transition (hover over interaction) will move positions, this movment of the text box around the images will provide a feeling of motion inspired by the motion & angles/pivot points from Drifting & Time Attack Racing. Also links back to the moment in the GIF, may try replicate the movement or a similar movement based around the grid I used for this GIF. 

All the pages will now follow this same system, even the media page, this keeps the user experience consistent and easy for me to code as I will have a set system to follow, I would have liked to create the interactive navigation system within the photo gallery's but I need to be realistic in terms of my coding skills. 

 

 

Images prepared

Placed all the images into easy to recognize file names and organized folders for there correct page placement, this will help file management and keeping everything organized when it comes to coding and dreamweaver usage. 

 

Lowered all the saturation levels to keep the images on a constant tonal range so they all feel consistent and work within a set of images. This also works with the subtle and minimalist aesthetic of the whole site and keeps with the traditional Japanese use of muted tones. 

As mentioned in previous points its also refreshing for the user not to see bold and horribly bright toned images often seen in automotive websites, it saves the strain on the eye and achieves a more pleasant user experience allowing them to appreciate the detail within the images. 

Plan from here

All thats left to do now before coding is to create the content in terms of supporting text for the imagery, I have all my images prepared for placing in the website. I think Im going to place the text box within the B&W image rather than play about with coding for the text box to come in within the color to B&W transition from the user hovering over the imagery. Alot of this textual information will come from or derive from my summer brief work.