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)