Initial scamps for website & Crit feedback and progression plan

Initial scamps for website & Crit feedback and progression plan

Plan to work towards

After proposing a website idea forward regarding concept and content of the site in a previous crit I am taking forward the idea of a website based around Japanese Motorsport specifically informing the end user on the history and basic information on Drifting and Time attack with supporting pages providing in an informative guide on how to get into the two sports.

Supporting these informative aspects will be a media only page with a large range of the images I collected over the summer as my target audience is interested in heavy image content so a media specific page is the way forward. 

There will be 5 pages.

About Drifting (History, about the sport, images) Informative, Descriptive, Casual presentation of media and text)

About Time Attack (History, about the sport, images) (Informative, Descriptive, Casual presentation of media and text)

How to get into Time Attack (Clear, Concise, Instructional, Formal)

How to get into Drifting (Clear, Concise, Instructional, Formal)

Media (Images & Video) (Entertainment)

Grid Systems used
Deriving from the cannons and grid sessions as previously presented I brought in digitized versions of the grids I made in the session for me to work my scamps around to give me a structured system to work against for placing my text and image within the spacial areas of the web page.

I created a variation of the Van Da graaf by simply removing the double page spread aspect and creating a 2:3 ratio to work for for these initial scamps. It will work for basic rough versions but I need to do the next ratio for the grids around the common screen ratio of 16:9/16:10. 

I like the perfect proportions and positioning of the content offset to the top of the screen giving a nice sense of balance and focus on the desired presented content. 

A method of centralizing the grid guidelines through the de vina proportions coming from the golden ratio and golden section techniques we learnt. 

A modular grid, a Van Da Graaf variation with a modular grid, a column grid and a baseline and column grid inspired by Numiko's grid to work my scamps from. All ways of achieving structure within my positioning of content. 

Initial Scamps & Aims
I began by trying to figure out a number of unique methods of creating potential layouts with image heavy content in a structured, clear and interactive way where the end user can have a sense of control over what content they view as this is something thats lacking in other automotive websites as its just a large overwhelming mash of information presented in a garish and clashy way with no real organization.

So stripping it back and presenting image heavy content in a clear, simple, concise way with interactive elements will give a better user experience and more control over the site. 

Idea here was to have all the content on one page, a mash up of content but in a more structured way as opposed to other automotive sites that display it in a confusing and illegible way. 

The images would be framed by color boxes, when clicked would transition into a color box over the images displaying typography giving an interactive element to the site. 

Modular grid allowed a nice structure and interlocking of images and shapes that frame the images. 

Positive: Interactive, Refreshing aesthetic compared to typical automative sites, image heavy, high impact, structured.

Negative: Coding skills aren't great so working out how to do this idea would be a potential problem, slightly unfamiliar aesthetic and interaction to what the typical end user is used too so may cause initial bad first impressions, could be perceived as confusing. 

This concept was a little more conceptual, abstract and complex maybe a little too confusing for the end user. More suited to someone who appreciates design and art. The idea was to display the web page links in an abstract arrangement across the page.

2 options were available for the content page both with interactivity between the image libraries, an arrow navigation system on horizontal transitions (top right)

Or a smaller more abstract representation with the webpage name always been the centre point of the page with the interactive image system and typography positioned around this centre point (with navigation through circular icons links) (bottom left)

 

Modular grid made these abstract positioning of content balanced within the negative space rather than feeling lost within the space. 

Positive: Good use of space & nice abstract aesthetic, potential for good presentation of image content in large scale format, refreshing aesthetic compared to usual race or automotive sites. 

Negative: Abstract aesthetic and interaction system not relevant or familiar to target audience, again coding this idea I want to portray maybe difficult, image size may be too small to appreciate high detail images (bottom left)

Another abstract alignment with a series of full bleed images as the main background of the page with a number of abstract aligned color text boxes positioned around the page. These text boxes interact and change with the full bleed image that is selected at the time through a click anywhere navigation system. (Top scamp)

The bottom scamp is a more simplified minimal idea drawing central focus in through the grid I created with a continuous vertical cycle of images with fixed textual information giving a brief overview of the website positioned in the top left corner. Each image will have a transition option when you hover over an opaque color text box overlays the image giving brief pieces of information. 

The central vertical spine allowed a nice focus point for the eyes to taper into for the images while providing a nice spacial area for a long continuos scroll while leaving lots of negative space to place text within. No distractions just well presented images and brief textual information. 

 

Positive: Nice focus in on the centre of the screen providing a structured feel within a minimal and spacious layout presenting image with no distraction. Good for the target audience who is after image content with little textual content and refreshing compared to the visual clash typically seen in current racing/automotive sites. 

Negative: The above scamp with the alternating text box alignment over the full bleed image may end up hindering the viewing experience of the image, something I want to obviously avoid as the image content is the main focus of the site. 

These 3 websites followed a similar large scale image presentation based on a fixed page website deriving from  a column grid and Van Da Graaf inspired grid I created. 

These allow a good presentation of the image elements with easy to interact links for specific website pages with more content and information, my particular favorite is the top right for its interact element within the image library navigation clicking the circular icons to view different images. 

The top left is a little unrealistic as I have incorporated a scroll element to choose the images and Im sure this needs javascript coding wich is something we don't learn or really have time for but would be good for future experimentations. 

Modular grid allows a large image surface area and balanced out hyper links within the negative space, lots of fine tuning capabilities through these guidelines. 

Positive: Good presentation of large scale images satisfying end users purpose of viewing of the site, potentially easy to use interaction system's between the image selection, simple and structured layouts with minimal distractions allowing better focus on the images. 

Negative: Some aspects like the scrolling selection of the photos may not be achievable through my coding skill set, opacity text box over the image maybe seen as districting but this can't be ruled out until mockups with the physical images are made. 

This idea is simple enough in aesthetics but not sure about achievability with my coding ability's not been great due to it been new to me. 

The grid system I created allowed a focus within the central image and a guideline along the horizontal spine, good spacial balance is achieved through this golden ratio inspired grid layout so this minimal layout presents the images in a clear way which is good for the intended target audience.

The scrolling system cycles through the images horizontally zooming in on the central image which serves as a hyperlink for selecting that particular content page. 

 

Positive: Image only content giving a good first impression for the end user who is after lots of image content, nice interactive system of image selection. 

Negative: No support for these images explaining what content pages they can take me too, potential confusion of the end user thinking its just a continuous presentation of images with no further website content. As with the rest coding this cycle & zoom navigation of the image maybe a problem. 

These design scamps allowed me to use both the modular grid and column grid to allow more flexibility in the positioning of content on the page and a better organization and structure to the aesthetics and usability of the page for a better user experience.  

 

This was my favored scamp from these versatile scamps, although they look simplistic the consideration that went into the layouts gives a nice presentation of the content in an aesthetically pleasing and spacial balanced output. 

The Idea is for a single page website but on a horizontal scroll navigation, the homepage name will be at the bottom and the end user will able to scroll across to access more content giving an interactive user experience.

The interactive system is carried out even more through the navigation system between the images on each section, supporting text on the colored boxes gives short snappy snippets of information on imagery and the context of that particular section i.e. History of drifting. 

Positive: Good to have all the different pages content in one place giving a nice continuous flow of the browsing of the website which would be beneficial for the end user as they are more just casually browsing rather than been after specific information they just want to see a range of media with simple annotations. Nice sense of interaction and gives the end user a sense of control over what there viewing. 

Negative: The navigation of these images is achievable but the scrolling of the images through the homepage title may be difficult. 

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

Final Proposals 
I chose these 3 scamps to present forward in the crit for the variation between them in there interactivity systems and there aesthetic but the main concept been heavy image content with short snippets of informative and clear information as the end user is ideally wanting to see lots of images with only brief pieces of texts. 

I took forward this horizontal cycle and zoom scroll navigation for its clean and minimal initial presentation of image content giving the end user a positive first impressions as there intentions for the site was to view image content. The large amount of white space and central focus on the image is also refreshing for the end user as usual automotive websites are quite the opposite, usually just a mash up of busy images, color and texts creating a confusing eye sore. This idea is straight to the point. 

 

This clean presentation of structure is carried onto content pages with large images that take up the majority of the page, the grid used is the one deriving from the Van Da Graff for optimum positioning of the main body of content on the page creating a nice balance of space and pleasing aesthetic. 

The user then has short snippets of information presented on colored semi opaque text boxes for each image which they can cycle through with a simple to use navigation system of clicking circular icons to cycle through the library of images available. 

I like how the text box alters positioning to give that feeling of motion which is obviously relevant to automotive and racing inspired design outputs. 

Website navigation map

Took this idea forward for the final proposals due to the originality of it, it's a refreshing change to the usual automotive/racing websites with a more art & design inspired aesthetic but with the theme been "Japanese motorsport" this structured layout, interactivity and technical aesthetic can be a benefit to denote there innovation and technical engineering they portray in the cars they produce. 

The only problem here is my coding capabilities as Im not sure I can pull off the horizontal sliding element of the main content, the interactive images shouldn't be a problem though as they should just work as hyperlinks linked to the icons the user interacts with to click and change the image. 

 

Website navigation map

The final idea is something new I came up with taking bits and pieces from my initial rough scamps, its probably the most achievable in terms of my abilities of coding at the moment. The main page will consist of a preview of a number of images to give a first impression to the end user and a taster of the images and content available, these images will work on a vertical scroll with the links to the content pages and homepage header remaining fixed so these links can always be accessed for an easy navigation system.

The idea takes forward a previous mention of transitioning a shape or a full colored text box overlayed on the large scale images when the mouse is hovered over. The interactive images will be displayed on the content page and also share the same navigation system of clicking icons to cycle through the image library. 

 

Website navigation map

Plan I presented, Feedback and progression plan

I presented forward the idea of a Japanese motorsport website with an aim of been informative in some aspects while been also a resource for entertainment.

To do this informative language would be used but sparingly and in a concise and precise manner, so I don't bore the viewer as the typical end user who engages with these sites is after more media based content hence the proposal of a media only page with a large body of images and videos. 

Pages

5 pages would be presented -

About Time Attack 

About Drifting

How to get into Drifting

How to get into Time Attack

Media page. 

Feedback overall for all the scamps I presented was positive both for aesthetics, layout and content and upon discussion with a few peers I came to the conclusion I was been to ambitious in terms of the coding and interactive systems I had scamped out. The ideas were good just not very realistic with my skill set and time frame which I understand. 

The aspects that are realistic are the hover over elements and the interactive navigation system wich is based on clicking image icons so this will be the interaction systems I consider. 

Feedback from Danny suggested color was important to communicate to the intended audience, I suggested color choice of oranges and greens to give the end user a sense of familiarity from other automotive and race site that share these colors, although I would be using them in a more muted and toned down aesthetic as current racing websites are too bold and garish. 

To avoid this in your face garish asthetic I presented forward the stripped back and structured styles which communicated the content to the user in a concise and precise way and the use of negative space gave opportunity for images and snippets of text to breath and be appreciated. This was the most positively received proposal. 

Progression from here

Idea 3 is what I came to the conclusion was more realistic so I will begin developing more consider wire frames for this, proportioned sketches with all measurements and content worked out ready for placing into dreamweaver's coding system. 

Look into source codes of websites that share some of these suggested interaction systems (Hover over transition's, scrolling images with fixed links, interactive icon links to cycle through images) to help me learn how to emulate these interactions within my website. 

Look into color schemes to communicate racing, automotive elements and Japanese motorsport as a whole while keeping familiarity for the end user.

Begin editing and selecting the 500+ images I have as this is going to be difficult, edit them all appear consistent in there lighting, tonal ranges, highlights etc. 

Create a definite grid system to work too based on 16:9/10 ratio. 

Consider how videos will be input, use javascript or embed through youtube or vimeo to save hassle.