Development & production for Tsukuba Motorsport augmented campaign

Development & production for Tsukuba Motorsport augmented campaign

Plan of action

Although all the stages presented here look quite intense, the initial aesthetic, colour scheme and overall requirements of this campaign were decided on. Layout and use of grid was strongly influenced by the content of the website. 

Moving on from the previous idea generation stage I came to the conclusion the plan for this advertising campaign was to take influence from Japanese engineering, Japanese craft techniques when it came to the use of material and construction techniques. 

The aesthetic and layout of the collateral would be closely influenced by the websites multi column baseline grid system which allowed fine tuning of content within vast amounts of negative space.

Creating Icons and positioning images will follow guidelines similar to the website content again, the GIF animation and the iconography in the website used grid systems from the Japanese flag, a clock face and a grid system made from the layout of the Tsukuba motorsport track. Same will apply here.

Advertising poster development

As mentioned previous posters are an excellent way of promoting companies or events, these would be placed within garages, car shops, car show rooms, car events, racing events etc to reach out to more potential target audiences. So the key here was high impact and instant recognition of what services Tsukuba Motorsport offered. 

A focus on imagery and positioning of imagery was the key thing I took forward from the thumb nailing. 

Before starting anything I needed to create a colour pallet library to use for all the brand collateral whatever program I used. Using the style guide I created for the website I transferred all the color codes into the swatch library and saved it as an ASE to be used across all adobe programs and if needed handed to an external printer. 

  

 

Starting out with a fluid motion of large Japanese glyphs and typography taking similiar influence from the GIF animation but with more subtle typographic additions. The impact was OK but not high enough, the large red glyphs achieved impact but the small contrasting type didn't work as well as it did in conjunction with imagery on the website. 

   

To fix this problem I started adding imagery and increase the size of the typography, the weight of the header "Tsukuba Motorsport" was heavy and high impact enough at that type size so this familiarity of small type in large white space remains. 

 

The use of image works perfect, it doesn't work without the Japanese glyphs though so they need to come back. To keep things balanced as well I changed the photos to greyscale, this flows better with the whole layout and tonal range of the poster and also extends from the grey scale images in the website. 

With the typography been in quite a lot of white space I thought I would enhance the legibility of individual characters to maintain overall readability from a distance as this is how posters are most commonly viewed. A tracking increase aided this. 

Keyring development

Choosing to make key rings seemed a perfect advertising medium and well suited to my target persona's needs and wants. And the fact that the promotion of the website will be on the key ring and the vibrant red (that is associated with the Tsukuba Motorsport brand image) is very eye catching means good external recognition as the item will always be carried about by the end user. Commercially key rings dont tend to be expensive either, I payed £5 for an A2 sheet or red acrylic and £1.50 for 30 keyring chains so good profits could be made selling these cheap. 

The only problem been laser cutting services can be quite expensive, but a lot of key-rings can be produced on one large sheet of acrylic and laser cutters make short work of acrylic so it requires little energy to cut through so costs may not be that high. 

Source imagery, most of it from my own photography.

Thumb nailing is how I prefer to develop rough initial ideas rather than jumping straight to the MAC, it allowed me to simplify down the images into simple shapes and lines as complex detail wouldn't be required for key rings as they are quite small it would go un-noticed. 

 

To keep that feeling of accuracy to emulate engineering everything needed to be very geometric and precise. 

The initial plan was to use the grid systems of the Race track or the Japanese flag but I decided to adapt on the past used clock face grid used for the motion path of the animation on the website and focus on a central point with extending visual elements coming off at units of the clock face. This kept everything accurate and in line with past used concepts for imagery. 

 

I found out when I got to the laser cutter that how I set up my files were wrong, I wanted to raster what was in black. I wanted them to be coloured in and engraved by the laser, but the way i set up the paths meant that it didn't recognise enclosed elements of the shape, it just read the outside path of the shape and disregarded everything inside so I had to settle for engraving instead. 

Using the laser cutter offered incredible accuracy which allowed conceptual emulation of the idea of Japanese engineering and the accuracy they are known for within there car mechanics. 

This was tedious and I imagine externally these finishing off parts of the job would add money to the production of these items! 

The first attempt failed, not sure what happened maybe I didn't focus the laser enough but it didnt cut through enough. 

Stamp development

Like the key rings I had trouble with how I set up the file, from the guidance notes in the laser cut booklet I was under the impression that an enclosed shape would raster. 

I expanded the logo so it was made of parallel lines rather than a path with a stroke. 

 

Neatened it up to speed up work flow for the laser by creating a neat outline. 

 

 

But again it didn't work out when it came too laser cutting, how I set up the file meant it would just cut a large rectangle out and ignore the Japanese logo in the middle. So I had to JPEG it.

  

It turns out JPEG files read at a maximum of 150dpi or there abouts I saved my JPEG at 2000 for overkill resolution, turns out it was a waste of time and the  quality came out terrible.

 

Due to the fine weight of the strokes of the logo when I cleaned the stamp it all snapped off. 


 I created a wood version in a second laser session I booked, this links back to Japanese wood block printing a method I mentioned I was going to use to keep things influenced by Japanese craft. 

After playing around with size variations it turns out the larger stamp had more detail and accuracy and the durability through the use of wood improved. 

Commercially this wouldn't be very cost effective to reproduce, its a little unnecessary to create a traditional Japanese woodblock stamp for an automotive company but for my purposes it fit my concept well and allowed me to use modern technology to create material I could use with traditional print methods. 

The intended use of the stamp was to print the paper I was going to wrap the prints I sell up in, turns out the wood I used and the ink pad I chose didnt pair well together, the ink didnt transfer at all really. Maybe something a little more dense and oil based would have worked better rather than an stamp pad. 

Sticker production

These were easy enough to create as I already had the vector files there, stickers are an excellent way for promoting business's externally. And automotive fans love stickers and the fact that there on cars would mean that the external recognition would be great. A very cost effective solution as sticker printing externally is very cheap. 

Business card production & development

Business cards are a very cost effective and easy to distribute marketing method, bulk amounts can be printed cheaply from most commercial printers, the ones I produced dont use fancy print methods just digital laser print but the triplex paper stocks I used would add the price up a little bit.

I started out with initial thumbnail sketches to figure out the initial arrangement of the content, content was potentially limited to the logo type and company name on the front cover with basic information on the back so the balance of used and negative space was similar to the website.

The purpose of the brief was to extend on the website while promoting it so keeping the website structure and layout would link well with this and keep familiarity with the customer base. 

 

One idea I wanted to try out was the idea of interlocking patterns, I wanted the business card to be an item that ties everything in together. Little bits of all the brand collateral elements all tied into one package so i though about linking visuals through all the items to create a jigsaw like puzzle. This would also link well with engineering and mechanics. 

 

It also give me opportunity to use the grid systems again. But I wasn't keen on the aesthetics, it was bringing a whole new style of imagery into everything there was no need for it and it would lose the familiarity of the brand image wich was clean, minimal and structured design without the need of garish distractions like other automotive websites. 


Using a tight modular grid with lots of horizontal divides to emulate the grid used in the website, I had success using this it allowed absolute accuracy wich was needed in achieving balance and structure in the vast amount of negative space. 

After playing around with some sketches (Above) I decided I could keep the theme of visual elements flowing from one business card to another in a more motion influenced way which links nicely with the GIF animation I made for the homepage.

The animation made use of moving type as it was translating the Japanese glyphs, I tried replicating this over the business cards but it seemed like a constant position for the "TSUKUBA MOTORSPORT" was needed to maintain that structure and balance I required, the Japanese glyphs could emulate the motion the "TSUKUBA MOTORSPORT" helped maintain structure and a central focus point as this was the company name so was important to be noticed. 

I didn't really want to replicate the website layout for typography as it would look like a miniature replica of the website I wanted it to be influenced by it not copied so I tried lots of alternative methods that maintained the use of lots of white space like the website. I just couldnt get it all to feel structured and interlocked though.

I eventually achieved this interlocked structure to keep that engineering/accuracy feel and link with the website structure through a simplistic  layout that incorporated type over two columns with fine tuning when it came to leading and paragraph spacing. 

To satisfy my wants to tie everything together as mentioned previous I chose the paper stock based on the color palette of the website. Triplexing all the stocks together to incorporate all the elements of the website into one simple marketing & promotion medium. 

 

After double siding the sections I clamped them up for an hour to secure them properly, commercially this would be done on a large scale the paper would be pressed together with much more suitibale adhesive. GF smith do duplexi/triplex etc services I will be giving them a try in later projects. 

Photo Book production & development

The main focus for these initial sketches and idea generation was based on construction methods. I wanted to emulate Japanese engineering ane Japanese traditional craft. I saw the photobook as a perfect oppportunity to emulate this mixture of traditional and modern mediums. 

To keep with the theme of engineering I chose a bolt bind to experiment with, to keep with the idea of Japanese craft I wanted to incorporate a Japanese stab bind in this product or a later product. 

 

As the main focus of the website was high quality image with little distraction I saw the photo-book as an opportunity to expand on this even more. Creating a layout and construction with little or no distraction was my focus no unwanted visuals just simple clean presentation of high end imagery in a tactile product. 

After thinking about how to arrange the images I arrived back at the idea of using the clock face guideline used for the GIF animation on the website. 

A sense of motion will be achieved through the users progression through the book as they flick through the images and they rotate around a central pivot point but still interlock within the accurate modular grid system. 

To keep things consistent and maintain accuracy and minimal distraction I desaturated the images like in the website. Some images like this were also lightened in tone a little to allow a better sense of detail as the end user wants high quality imagery and printing will offer a more hands on appreciation of this detail so the quality needs to be perfect. 

To keep structure images were straightened were needed, this helped them feel more locked into place within all the negative space. 

Allowance for the bolt bind was made when setting up the documents margins and guidelines. 

To keep things consistent I imported my color swatch palette I created, ASE swatch palletes transfer over all adobe software. I erased all un used colours to neaten up the final file package for completion and packaging up for external printing. 

 

Again it was important to keep consistency within the current brand collateral I had as well as the website so incorporating visual and structural elements from both were played around with. 

Bringing in the GIF animation influence and use of movement here. Didnt work within all that space though the glyphs felt lost.

The result was an inverted variation of the website, the central alignment of the Japanese logo type with typography flush to both edges of the leaf/page margin. 

Large bodies of text wasn't an issue on the website but it was important to make a point of welcoming the reader/viewer through a friendly tone of voice and also explaining the book and its concept and content. So making use of the typography within the white space was a bit of a challenge without photography to support the layout and structure. 

I settled on spreading the header and body copy out across 3 columns though, it made nice use of the space and maintained structure, the way it stepped down also had a nice flow to it in terms of hierachy. 

The position of the QR code for the app was simple enough following from what I already had, just the sizing of the QR code was the problem it was too big and distracted all attention away from the important information, there was also widows and orphans in the body copy that needed emending through subtle kerning and tracking. 

The positioning of the imagery was simple enough from here as I had a layout plan to follow, just imagine I was following a hand round a clock as the images rotate around the interlocking grid system. 

Influenced by the GIF animation again but in a more structured way this word search like arrangement of logo glyphs and type follow the intersecting lines of the grid for structure and offer a nice little translation of the Japanese logo in a structure that fits the rest of the photo book. Doing a layout like the animation would be too fluid and loose for this book.

Small addition of type, the website to add that extra bit of promotion as this is the purpose of the photobook. 

Next came construction, I bought the bolts and measured them up. 

Trimmed the book down with the multi page guillotine down at vernon street, all the pages are nice and flush and squared off, i need this sense of accuracy to maintain the whole structured feel through both layout and construction of the book. 

This was the daunting bit, drilling through 30 odd pages! I made a template with a piece of thick card, this stopped the paper fraying when the drill bit went through. 

I decided at this point I was going to mix traditional and modern in together and Japanese bind and bolt bind the book. Giving influences of Japanese engineering and craft in an aesthetically pleasing outcome. So another template was made for the 5 holes for sewing.

The paper stock choice for the front cover was the next to chose, I want to keep it clean and familiar with the website for the target audience's sake so I went with white and a contrasting pale blue (Azure blue daller rowland paper) for the inner introduction leafs. 

Sewn up and bolted up, I wanted to hide the stitching at the front of the book so I left the front cover unstitched and bolted this on last, this kept everything subtle and clean and nothing too garish which was something I avoided all the way through the web brief as its a current problem with current automotive sites. 

Various methods for preparing for commercial print.

Packaging a document for print is best for more large commercial jobs, it encloses all the date into a file. This included fonts, color swatch libarys and images.

The font I used was Open sans in the same variations of the site to keep things consistent and it is a royalty free font.

As I was printing in house I packaged it as a PDF, this embeds everything together but means you cant edit it any further. A lot of external printers accept PDF's now too and its a much more efficient way in my eyes. 

Commercially this book wouldnt be very cost effective as it would need to be hand bound. Printing the actual pages wouldnt be a problem but the phsyical production of the book would. The initial idea for the book concept was it to come in a kit form for the end user to construct themselves. This interactivity links perfectly with engineering and mechanics and meets the target persona's needs.

I didnt create it in kit form in the end though, I wanted to create two books one hand made and one kit form but It cost over £25 for all the Brand material printing so I wasnt keen on spending anymore just for a kit version, but the concept still applies and fits perfect. 

Introduced more Japanese craft with traditional watercoloring the logo, this gives every book a hand made feel and makes the item seem more of a collectors piece. Also aids tactile qualities. 

Leaflet production & development

Using existing aesthetics, constructions and layouts from previous material it wasn't hard to plan out the Leaflet.

I decided to create a leaflet book. This meant all the leaflets were compiled together meaning easy distribution when it came to handing out the flyers at car events and races. A perforated print finish would aid this tearing process. 

The size and dimension of the leaflet was taken from a race ticket I had, keeping things subtlety conceptually relevant. 

 

Going through the same process with the addition of a vertical alignment of the logo. This looks nice but it doesn't remain constant with the rest of the collateral

So back to the central alignment of the logotype keeping interlocked on a central pivot. A translation wasn't needed here as it was just a cover for the leaflet book. 

Playing around with type alignments from the posters and business cards. 

As it was photography the website offered I felt it may be good to keep with the theme but the small size didn't quite allow good photograph positioning within the space. 

 

Settled on a variation of the word search structure and translation of the logotype. This is also quite high impact, this is important when it comes to promotional material it needs to stand out to get the end users attention. Printing this on different coloured stock will maintain this impact and keep within the brand colour scheme. 
 

Another template made and drilled through, not as many pages here but its a pretty efficient way of preparing for the Japanese stab bind. Also brings in modern methods to a traditional Japanese craft again keeping with the combination of modern and traditional methods. 

A bind taken from this great resource that lead me through the standard Japanese stab bind I used for the photo book


The "account book" looked like a good book to influence the bind on my small leaflet book.

It kept the pages locked together well and was very minimal in the space it took up along the edge of the pages, keeping things clean looking.

Too add extra visual flair to the minimal cover I had a look to see if any book cloth would look nice on the edging, it looks completely out of place though and wouldn't remain consistent with the other advertising campaign products. 

Like the photo book these leaflets would have to be hand bound, the singe pages would be cheap enough to print though so for commercial large volume purposes the bind could be scrapped and single pages printed and distributed. The book offers a nice method of holding them all together and easy distribution. 

Print poster development 

The website is an automotive blog focusing on high end imagery, so the obvious focus here was large scale imagery. I chose to design print posters because the end user will be viewing the blog for there photographic needs, so why not offer them the opportunity to purchase there favourite images in large A3 formats. 

A packaging method that I never got to explore due to no time left was the scroll, this would have been a nice way of packaging the prints. 

 

Layout wise the structure was heavily influenced by the website, central position of a large scale image with small contrasting typography. 

  

Even with minimal textual information as I found out before its hard to maintain structure and balance within the page layout. 

The end result takes influence from the business card positioning of text, with the central negative space taken up by a large high quality car image. 

Bringing in the subtle use of lines from the website, this helps separate the subhead from the content without the need for larger type sizes, the semi bold open sans helped strengthen this hierarchy a little more though. 

These would be a great promotion method and merchandise product due to reltivley cheap printing, simple A3 digital printing, no fancy print finishes required, well in the budget of a small automtove blog. 

Iphone app development

Looking into interactivity digital interactivity I began developing an iPhone app to interact with the photo-book in an augmented reality way. 

The main purpose of the app was to provide statistics for cars like the website did in precise and concise tones of voice,  the method I settled on through these thumbnails was using the icon systems of car parts to create a bar chart emulation of statistics. 

Each icon represents a certain statistic. How it will work is when the phone is hovered over the image interaction points will appear click these interaction points to find out more. 

 

The home page will be purely entertainment based, the end user can move icons and images about on screen making arraignments and patterns. Purely aesthetic until they acess the applications true function, they can click the icons at any time to take them to certain parts of the Tsukuba Motorsport website offering fantastic off page SEO and recognition. 

  

As I was designing for screen i needed to work in RGB mode, I also needed to input a screen resolution. I chose the iPhone 4s as this as a mediocre smart phone a few years old so hopefully my target market will have this phone, it will be compatible on other devices but resolution wise its based around a 4S. 

COLORS WERE TAKEN FROM WEB STYLE SHEET AS ITS FOR SCREEN USE.

The way in which type was arranged and enclosed comes from the website, I tried semi opaque boxes again but legibility was an issue still. 

The dark grey solid box helped achieve better legibility, an obvious important factor when considering design for screen due to small px size text. 

Trying to achieve balance in the weight of the circles, red was the choice here due to impact through contrast of tone with the images. Its also synonymous to the brand image, the red represents the Tsukuba Motorsport brand and Japanese heritage. 

Settled on a weight for the circles and a balance of size and position for the icons and statistics;
The steering wheel represents handling
The Tyre and wheel represents grip
The brake disk represents braking
The turbo represents speed

An idea of how the icons can be played around with, the grey icons are fixed to the lines the glyphs within the parallel lines offering interaction with each other. 

Me physically producing this wouldn't be realistic, interactive javascript, objective C and Swift are apparently the coding needed for iphone apps, so commercially this would be expensive as a coding professional would need to be employed. Probably a little pricey for a small automotive blog!