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. 

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. 

Iconography visual research, Plan of action, Grid choice & Production

Iconography visual research, Plan of action, Grid choice & Production

I suggested a plan for creating an Instagram account to support the Tsukuba motorsport website, a location or a resource to store the large body of my image's that didn't make it onto the website, this external resource showing all the photos will also provide external recognition through the end user of Instagram who's interested in cars coming across my Instagram account and accessing the link to the Tsukuba Motorsport website within the Instagram accounts description. 

These external links from other sites can also enhance off site SEO optimization and provide a potential viral recognition of the site through the common method of hash-tagging keywords within Instagram. 

The grid I am choosing for the iconography is the one deriving from the European flag and the Circular element taking from the Japanese flag to emulate a sense of unity between the country where everything began (Japan) and the european nation that helped create an international craze of Drifting & Time attack.

It also handily has a certain similarity of a camera to the shape of the grid, obviously relevant to the common camera icons seen for Instagram icon's. 

 

Similar shape to an old SLR camera (Use these for source images, gather Japanese brands to keep things more relevant in a purist sense, obviously only a subtle thing but it all ties in with Japanese technical innovation) 

 

  

  

Main visual concept for the icon.

I want the icon to be inspired by the traditional Japanese aesthetic seen in the logotype I created.

But it also needs to fit with the overall aesthetic and layout of the site, stripped back, minimalistic, contrast (large image & small pt size type), and an idea of focus (the focus on imagery within the website) & structure so mirroring these in the icon will be important for consistency through the site and making it feel like it belongs within the sites aesthetic and layout.

Needs to be precise and concise in its communication of being an icon for Instagram, obvious connotation been a camera. 

Visual inspiration 
Like the use of color to give the simple lines used in iconography a little extra impact, not sure if impact is what Im going for in my icons but it's a consideration if I want to make my icon stand out within the vast amount of white space on my website. 

I like the idea of line only icons but its also worth considering using block color icons to maybe create impact and make the icon more noticeable. 

I found some brand guidelines of a Google project on bechance, this is just to show how using a set shape and grid system can help create consistency within the icons making them work as a set, it also helps achieve accuracy and scalability for the icons.

Gustav Karlson from Sweden presented a branding project on bechance with a style of iconography different to the norm, typical iconography has a infinite scalable geometry too it, absolute accuracy within the use of lines and shapes but these icons have a more hand made feel, very organic. Very relevant for the subject matter of the project been a craft beer shop helping emulate that feeling of craft through the icons. 

I like the detail within these icons, with my website been about Japanese motorsport and some of the aesthetics and concepts in the website been inspired by there technical innovation within there engineering emulating this kind of detail in a stripped back and simplistic icon would be beneficial to maintaining a constant consideration to all variables within the whole website. 

 

Hosted Design studio created a rebrand for a Melbourne hotel called the Water Rat, I like the idea of using the brand color in a variety of tones and I like the balance between the image and glyphs, similar to something I wanted to go with in terms of the contrast of small pt size text and focused large images in my website. 

So considering this balance between the icon and how it interacts with the image, space and type is important not only in the icons design but its placement and sizing within the website space.

Last years graduates Hungry Sandwich Club demonstrate how you can use a grid system to create a consistent set of icons that work together as a set through aesthetically pleasing and geometric design.

This use of a geometric grid system shows how something can look very simplistic from its outset but in actual fact has geometric and mathematical consideration to create a stripped back and minimalistic aesthetic, something I like to consider within my design process and especially in this project. 

 

 

Contrasting from the detailed iconography showed previously is this set of icons that is very basic, simplistic delicate lines and minimal use of complex angles creates a simple yet structured icon set. 

I wanted a stripped back, minimalistic yet structured aesthetic through the layout and aesthetic of my website so this is an icon set I could learn from to achieve something similar.

What I'm taking from these examples.

The main points I want to work on deriving from these examples of icons to develop an Instagram icon that fits within the current aesthetic, concept and layout of the website are:

The use of a grid to keep the icon's aesthetic and structure inline and in context with the existing GIF animation and Japanese Logotype. In this case the European flag & Japanese flag to add relevance based on the idea of unity between the European nation (all the countries that made the sport international known) and the birth place of all Japanese motorsport in this case a focus on Drifting & Time Attack

Consider creating detailed icons through the use of geometric shapes and angular linear elements to emulate Japanese innovation within there engineering of cars and also the idea of angles and motion within the Drifting motorsport.

Or (experiment with above and bellow points)

Create an extremely stripped back and simplistic icon to flow with the whole minimalist and stripped back aesthetic of the website. 

Make the icon feel like it fits within its position & scale on the website while also feeling in balance within the contrasting small pt typography & large focus on image, its important for the icon not to feel lost within the space but it also needs to be recognized for the end user to access the external instagram account providing them with even more image content (the main focus of the website)

Play around with outline icons and filled/block color icons to achieve this balance and impact within the space of the webpage. 

Use source images along side set grid to develop iconography for Instagram. 

Development 

Using the source images to inform my sketches, taking visual points from different parts of different source images to create an overall informed scamp to work into a digital format. 

Started off producing a few rough scamps to get some quick ideas down about how much detail or how little detail I can get away with, without it not represent a camera anymore or been too high impact which would cause an in-balance and draw focus away from the images. 

Played briefly within filling some elements of the scamps to create a little more impact and weight to balance within the negative space of the websites layout. 

 

Took forward the more stripped back and simple line style from the scamps, took the sketches into the Europe & Japan hybrid grid and created a focus on a square camera icon in the central portion of the grid. This was inspired by the central focus of the images on the website as well as familiarity of Instagram icons been square rather than rectangular. 

The angular corners emulate & visualize focus points of a camera viewfinder. I like the idea of these points to create this connotation and visualization of focus (for relevance of focus on imagery on the website) but at the moment it looks like some kind of washing machine.

I tried to round off the edges and create a smaller lense, this sort of helped but sill didnt resemble a camera as much as I would like. 

Took the tapered shape off the top and added a "shoot" button to make it look more like a camera, getting somewhere now but it looks very basic and more like a toy camera, the softness and roundness of the edges doesn't help this but I don't want sharp edges and angles a lot of the source images had quite rounded edges. 

Added the tapered shape back as this is often used as a view finder on cameras (back of the camera) so it was required when making a detailed representation of a camera, also added a "flash bulb" (not sure on camera anatomy terms!) through the representation of a small square along a horizontal vertical of the main square body of the camera. 

Brought these "focus points" back into the iconography to strengthen the concept of image focus through the icon I created, the balance wasn't right though at first so I had to alter the sizing of the focus points within the lens. 

Achieved balance and structure within the focus points on the lens by using the grid system to centralize it and create a balance of size and spacial usage within the sense, as you see here the grid really helped create a geometrically accurate icon that will definitely fit in with the whole stripped back, minimalistic, structured and image focused website aesthetic & layout. 

I played around with adding weight to the icons, the icon needs to feel like it belongs within the layout of the website so I can't make it too delicate and light so it feels lost. On the other end of the scale I don't want it feeling to high impact so it draws attention away from the main focus of the website, the images as bold vector imagery can easily distract the end user when placed within lots of white space, regardless of scale of the icon. 

Achieving a balance in the use of black was important here to achieve balance, here are the development icons ranging from light to high impact, the second to last was the one that had the best balance of weight so should hopefully not draw attention away from the imagery but also feel like it belonged within the negative space & minimalist aesthetic and also felt structured and locked into the layout like all the other website content does. 

I have 2 icons now, a nice lightweight one that has a nice detailed feel too it (Relevant to the idea of emulating technical innovation and attention to detail in Japanese car engineering & traditional Japanese art & design as mentioned in previous points in this post) and also fits with the whole minimalistic and vast use of white space within the website aesthetic. 

And a heavy weight icon that will transition from the lightweight one when the user hovers over the icon, it doesn't matter at this point wether attention is distracted away from the imagery as they have already viewed them if there about to interact with this link. It shows the link is about to be activated. 

The use of a grid system and vector imagery allowed an icon that is equally in proportion and balanced as well as been aesthetically pleasing regardless of scale, giving versatility within its possible use (through consideration of scale & position to achieve balance and feel like the icon belongs within the negative space of the website)