Final Crit for Website layout, aesthetic & interaction

Final Crit for Website layout, aesthetic & interaction 

What I developed on
Leading on from the last crit I addressed a certain few man aspects of the previous site (detail explained in development stage posts);

I scraped the whole scrolling site system presented previous, everything changed really but more is covered on that in the development posts.

I focused on a web safe font with free licensing that worked for legibility & readability, aswell as working alongside and strengthening the whole feeling of structure in the layout of the page content and the Japanese & automotive feel. The font I chose as mentioned in the development stage was Open Sans from font squirrel. 

I altered the type alignment of the navigation links at the top of the homepage making better use of the negative space and creating a more consistent structure and balance between white space, typography and focused presentation of imagery (main concept of the content presentation)

I thought of a name for the website "Tsukuba Motorsport" hinting at heritage through the birth place of the major Japanese automotive events coming from the Tsukuba Circuit. 

Consistently edited the images to a constant tonal range reducing saturation levels which avoids that garish and bold common aesthetic within motorsport photography alongside black and white photos for the interactive hover over transitions. It also keeps consistency throughout the site. 

Developed a consistent layout and aesthetic for the website to communicate Japanese aesthetics through the use of color and conceptual use of grid systems and typography design & animations. Kept everything stripped back and lots of white space to draw attention to the main focus of the site the images, it also fits with typical traditional Japanese aesthetics. 

What I presented in the crit
I used a 1024 x 768 resolution. 

Target market was fans of automotive events and Japanese cars who are after image content and little typography so a main focus on imagery was presented in the website. 

Color scheme and subtle use of circular red icons in navigation system have denotations of Japan. 

I used a grid system to produce the Japanese typographic logo translating to "Tsukuba Motorsport", the grid system derived from a grid I made from the angles and lines of the Tsukuba racetrack keeping a feeling of heritage within the logo due to this circuit been the birthplace for most Japanese motorsports. 

Using this same idea of relevant grid systems I created a grid based on the face of a clock and the Japanese Flag, the clock face denotes the concept behind Time Attack been based around racing against the clock and not opponents on track, the Japanese Flag links with the birth place of Time attack & Drifting and most other extreme automotive events. This grid was used for the motion path of the GIF animation on the home page and also hints at obvious movement and angles achieved within racing and drifting. 

Image heavy, minimal typography, lots of white space, minimal color palette, structured yet minimal layout all helps focus on image content the target markets original intention of viewing the site. 

The active page is highlighted in red along with active image on the interaction nav box to cycle through images, this theme follows throughout the website. 

To increase readability & legibility of the text and for quicker understanding and digestion of the short snippets of text when the mouse is hovered over the image the image transitions from color to black and white with a text box encasing the text leaving it feeling locked in not just floating about the page. Keeping that structured overall feel. 

What I'm not sure on is how I want my "how to" guides work in terms of the end users experience within the navigation of these step by step guides and run throughs on what makes a drift car & time attack car. 

The options are this system were the images have interactive text boxes that explain numbered points of what makes a drift car, this is done by a hover over and a transitional text box appears. 

 

Or the same system that the "about" page uses, with fixed large scale high quality images using the navigation system with circular icons, I think I prefer this method but will see what everyone else feedback says. 

The same navigation system is used here for the media pages, but a reverse of the transition interaction happens. The inactive images are B&W, hover over and they turn color, this avoids that usual garish and clashy aesthetic of lots of high impact images in one location like on other automotive and racing sites. 

The navigation system also helps achieve this stripped back order, having 4 visible images rather than a clash of images is a much more presentable way and pleasant user experience. The user can just select through the navigation system by clicking the circular nav icons saving on scrolling through large bodies of images. 

Feedback & Progression plan

Feedback on the website mockups and proposal was very positive, its clear Im pretty much there with how I want the website to work and interact with the end user and all points have been agreed upon by my peers.

The main bits of positive feedback were that people liked the aesthetic of the website as a whole, the layout and the balance of space and content was received well and agreed that it definitely had focus on the imagery which was my primary focus.

Will mentioned how he wasn't sure on the "Welcome To Tsukuba Motorsport" typography at the top of the page, I explained it was a constant translation of the Japanese type logo as the GIF animation translation is only on the home page. This made more sense to him but I may try remove it or alter the positioning. 

I received very positive reactions over the conceptual thinking and keeping relevance to the heritage and context of Japanese motorsport and events through the grid system within the design of the Japanese type (based on grid system deriving from Tsukuba circuit) & the motion path of the GIF (grid system deriving from Japanese Flag & Clock face). 

A definite sense of Japanese culture was received by everyone when it came to the aesthetic of the site, it definitely had a Japanese feel, I was concerned that this aesthetic went off course for what automotive target markets usually view (clashy,garish, bold colors, ugly in all honesty sites) but everyone said it fits perfectly and would be a welcome change to the norm. 

I wanted to know what style & layout best suited the "How to guide" pages, to achieve constancy and focus on high quality images I decided from feedback that the system and layout from the "About pages" will be the same system I follow for these how too guides. 

 

Alot of people had iconography links to external networks like Instragam and Facebook sites, due to the large amount of images I have I think making an Instgram account to hold all these images in one place will provide a potential viral aspect along with an easy access resource for all my images. I can use the grid systems used previously to create a unique icon (with conceptual relevance using these grids) for this Instagram link. 

Expanding from this collection of my large body of images I also want to create a traditional Japanese bound phonebook to collate all my images together into a nice tactile print outcome, giving opportunity to carry the website aesthetic and concept over into a different media. 

A point Simon made was to base my positioning of images around the motion path of my GIF, I will potentially experiment with this in the Photobook I produce as I feel everything in terms of layout is sorted for the website.