Instagram, Desktop, phone & tablet website final's & evaluation

Instagram, Desktop, phone & tablet website final's & evaluation

Concept & Delivery

Here are my final website designs aimed at a Motorsport enthusiast target audience, in this specialising on Japanese Motorsport & Engineering. 

The website name Tsukuba Motorsport takes its influence from the famous Tsukuba circuit in Japan were internationally renowned events Drifting & Time Attack originated from. The Japanese logotype is Tsukuba Motorsport in Japanese, the glyphs where designed around a grid system I created from an outline of the Tsukuba Circuit and the Japanese flag to keep things relevant to the origins of Japanese Motorsport. 

I created a supporting GIF animation translating this Japanese logotype for the home page, the motion path the animation follows is based around a grid system that came from a Clock face and the european flag, the idea of using the clock face comes from the main concept of Time Attack been a race against the clock, the idea of using the european flag shows unity through the nations that helped make these Japanese Motorsport's internationally recognized. 

The main focus of the site was to present high quality images of various aspects of Japanese motorsport to meet the end users main desire to view lots of image content. 

This was carried out through a website aesthetic inspired by traditional Japanese artwork in its aesthetic and color combination. The structure and layout of the site & content took a minimalist and structured format inspired by the technical innovation, attention to detail and accuracy seen in Japanese car engineering. This was achieved through the contrast of a clean small pt sans serif typeface and large high quality imagery within the vast amount of white space while maintaining an element of structure within the placement of the website content, this in combination with short snappy elements of typography and a limited color palette kept focus on the imagery with no visual distractions within the hierarchy of the site. 

Reference for text content
My main points of reference for textual content came from as used in previous stages of my process:

www.driftingstreet.com

www.worldtimeattack.com

 

Desktop GIF Simulation

Website optimized for desktop output & tablet output on a 1024 x 768 resolution at 96dpi, decided on this to allow better resolution and quality of the images as 72dpi is a little outdated.

Main interactions on the site:

The typeface would be uploaded to the website server through CSS fontface so the end user can appreciate the site with the correct font choice. 

Vertical scroll of image's. 

Hover over transition turning color images B&W with text boxes where available and turning B&W images to color. This would be controlled by a transition effect within a div element enclosed within the embedded images through the websites coding structure using CSS. 

Navigation bar links will have this same transition effect when inactive links are hovered over they will turn to the red color code #cc0000 used throughout the site. The navigation bar would be coded using <ul> and <li> elements. This transition of a change of color would be controlled by CSS again. In addition to this when these inactive links are hovered over the active link would turn back black to avoid confusion through two links been highlighted red. This would be controlled by javascript commands. 

The Japanese logo type will be an active link taking the user back to the homepage. 

The Instagram icon will follow the same transition effect from outline to black icon, and also act as an external link to the Instagram account. 

The circular cursor that emulates the Japanese flag is a replacement of the standard arrow cursor. This would be  achieved through javascript or jquery within the whole html container of the page structure. 

To keep things clean in the website aesthetics I would hide the scroll bars through overflow: hidden within the body tags. 

Phone GIF simulation

A redesigned site best suited to mobile phone web access, 710 x 1067 at 160dpi is the resolution due to the high quality screens on phones these days, the higher resolution and dpi allows smaller text to be displayed in a crisp way leading to better readability & legibility.

Works on a continuous vertical scroll through a touchscreen interaction. No transitions on images are used to keep thing fluid with the interaction method of a finger rather than a mouse curser, text is displayed within the alignments of the grid system. 

Instagram account

To act as an extension of the large amount of visual content I gathered and to satisfy the persona that wants to see even more image content with very little textual information (in this case non) I have created an Instagram account that can be accessed from the websites through the Instagram icon I created. This will in turn also help achieve off page SEO and more external recognition for the site, something relevant for an upcoming project which is based on extending on the current website. 

Japanese logotype used solo, the account name Tsukuba Motorsport acts as a translation. 500px x 500px PNG 220dpi file resolution for optimum phone screen output. 

Hoping to go a little viral with this if possible, would be good external recognition for the Tsukuba Motorsport main website. 

 

This Instagram account will be carried on and added to as I have an interest in car shows and photography, could always go towards supporting PPP too!.

In context of iPad, iPhone, Macbook and iMac

The browser on the iPad site would detect that it's a mobile touch screen device so the cursor would be disabled and a vertical scroll achieved through touch screen user interaction, the hover over capabilities will be controlled by a single touch of the image to create the transition, and the "hover over" transition on inactive links as seen on the desktop site disabled with only active links using the red color #cc0000.

Application of study tasks

To create a considered and thought through website I applied aspects iv learnt from the study tasks based on aspects of User Experience design, using style sheets to help aid the production of the website, considering SEO (search engine optimisation), considering the target audience and persona. These were all applied along with all other considerations of web design throughout the whole project. This is just a brief outline on how it helped, more detail found on the actual study task posts.

User Experience Design 

This exercise helped me understand how to outline a target audience/persona so I could create a website specifically aimed at them. In this case an image strong website with concise text as the end user is interested in lots of image content. 

Style sheets

These are used to act as guidelines to follow when coding the website, they help speed the design process up by having all important information in-front of you like dimensions of content, color codes, positioning of layouts,  typography choices, how the website interacts etc.

SEO

By following the points in the study task I would achieve a website that reached out to more audiences through external site recognition and higher ranked search's. 

Site map

Evaluation

The project has come along way since the summer brief presentation, I had no real direction when presenting my content as all it really contained was a mass recording of imagery, some interviews, a few view points and some technical personal investigation I carried out into building a drift/time attack car. It needed more direction, a purpose for all/some of the content I have as the images I gathered were of high quality and covered a range of possible areas within automotive culture.

Overall I am very happy with how my website turned out, although unfortunate I couldn't get the website coded I did learn a fair amount about web considerations in terms of use of type, color limitations, ideal screen sizes, basic coding for HTML & CSS, how to plan layouts and position content in a site and even started to look at how javascript can be used. 

The aesthetics, layout and simulated interaction of how the site would appear if used on desktop, laptop and mobile devices I'm happy with though. I feel the prediction's I made on the target persona were considered through the production of the website, the content it shows, how its presented and how the website interacts. I felt the user wanted to see lots of image content with very little textual content, so the textual content I presented within the high quality images was concise and easily digested by the end user. The high quality image content was presented in a refreshing way, within a simple, clean, structured and minamilistic website compared to the busy, crowded and garish sites the end user is used to seeing which caused obvious distraction away from image content. 

The concept of the website and how it was carried out in aesthetics and layout alongside content like the GIF and logotype was relevant to the intended subject I was communicating to the end user. Although its something they wouldn't really notice its good practice to create conceptual relevant work even in the subtlest areas. 

This conceptual consideration allowed me to create considered design work, as shown in the development stages taking influence in how typography, vector imagery/icons and animations are made through the use of guidelines and grids influenced by relevant concept ideas. 

The quality of the website is of a very high standard, I wanted to create a minimalist website with lots of white space but a focus for large images so this was going to be difficult to achieve balance between textual content and imagery but I managed to make all the content feel locked into place and structured within its space, this feeling of structure and accuracy reflected Japanese engineering, something I mentioned in my initial concept idea. Aesthetically I'm pleased with it, I'm really happy with how all the images I took turned out after alot of narrowing down from the 500+ I had to go through, the edited very well and the slight desaturation in tone made them work perfect within focus on imagery with no distractions (bright tones would be distracting and hard on the eye), I feel the black and white inactive photos on the media page helped this also. The B&W to color hover over transition on the desktop site helped keep focus on the image the viewer was looking at, with the surrounding images been B&W there was no risk of distraction leaving the end user to enjoy the quality of the image there viewing. 

Commercially I feel what I have at present in terms of content, plans on interaction elements of the site, knowledge of web limitations & coding and the organization of positioning and layout aspects of the site I feel this site & plan could very well be passed on to a front end web developer to create with ease. And in terms of target audience I feel as mentioned they were considered throughout so it has definite potential to receive positive reaction from automotive fans worldwide. 

Improvements that could be made are obviously the fact that I didn't code the website, throughout the development of the whole brief I was creating plans and concepts for websites that would be easy for me to code, but due to a change of requirements we no longer needed to code the website. If I knew this I would have carried on working on suggesting my more ambitious website ideas, but these ideas are something I can take forward into later projects. I learnt from one of last years students now at Numiko that its not even needed for a designer to touch coding, just understand how it works and I feel I understand it a fair bit now. 

A small but nice touch would be for me to expand the external recognition of the site to achieve better SEO, I created an instagram account but a Twitter and Facebook account would have worked in favor of the sites SEO. It would have also give me the opportunity to design more iconography, something I enjoyed alot and something I want to develop further in my skill set. The Instagram account was a good vehicle in which to contain a large amount of the photos I have, it was a shame I couldn't have included them all in the website with a little more time management I could have edited and selected a larger selection. 

Time wise I feel I managed it well, but it could have been alot better, I spent alot of time teaching myself about basics of web design and limitation as it was something completely new to me so this couldn't be helped. I did a  great deal of design development that derived from an initial idea I came up with but I could have tried thinking off more rough initial ideas in the first stages. Although I feel I did enough to create a fully considered website. 

I enjoyed the process involved in creating a website from start to finish, it gave me different problems to overcome in terms of print based media. Im not really used to digital design never mind web design so everything was new to me. But I feel I learnt alot and have alot to take forward and maybe investigate further in my own time as I feel digital design & web design is a skill needed in the upcoming digital age, but its important not to forget print media and how print and digital work together and look forward to experimenting with these relationships in further work. Especially the upcoming augmented design brief.