Showing posts with label OUGD405. Show all posts
Showing posts with label OUGD405. Show all posts

Monday, 20 January 2014

Research Evaluation

Research Evaluation 

For this project I had the word Calendar given to me. I wasn't happy with this at first compared to other peoples words did didn't seem to have much scope so initially I was struggling how to turn this word into an interesting body of research based on the concept off 100 or the combination off; 20 images, 20 facts, 20 statistics, 20 opinions & 20 words. It needed to be engaging so how was I going to entertain myself and audience over something so bland?

The suggestions I put forward in the interim crit were off a lateral investigation into Calendar as its own umber all of things, like how calendars can be interactive. The only aspect that went forward after the crit was the element of Eras's, this element of Eras would form the base off my timeline off F1 from the 1950s to now. 

The interim crit made some good suggestions but the one I took forward was the Lunar calendar aspect, I had a back burner idea inspired by the suggestion of looking into things with moving parts. This linked with my initial thoughts off sports calendars and I linked this to F1 and its season, this was then linked with the Era's of 1950's to now and this is were it all sparked off. So i overcome a boring brief and turned it into something more interesting with a bit off out of the box thinking derived from crit feedback. 

From here I hit more problems, gathering imagery into Formula 1 was difficult if I was to collect it personally so imagery had to be collected from internet sources. Facts and statistics were easy enough to find, words I stemmed from common connotations and word association from peoples opinions. 

I enjoyed the brief once I got going finding out some interesting facts into the history of F1 and a new found interest into the engineering side. I loved the complexity off the construction of an F1 car and the fact that if under 1% off a F1 car is out of place then the car won't work whatsoever. This sense off accuracy is something I want to emulate in my design work. 

If i was to do this brief again I would have looked deeper into the engineering side and gathered more physical research, theres accurate model car kits you can buy and build your own engine kits that I could have played about with to provide myself with some interesting imagery. Presented in my research is the works off Fabian Oefner, I could have created something like he did only with an engine been deconstructed and blown up. 

Friday, 17 January 2014

Personal Brief for OUGD405 Communicate

Personal Brief 

I have created myself a brief to give me direction on creating my digital smartphone app.

The app will be created for F1 fans, specifically the fans that have an interest in Formula 1 engineering. The purpose off the App is to inform and educate the user into the technical sides of F1 cars that they may not know about.  
They will access the app for an interactive experience into the technical details off a current leading car the Mercedes Mclaren MP4-28. If they download the App they clearly have an interest in engineering or little or no knowledge on it so they will want to see easy to digest information on the engineering aspects of a Formula 1 car in a simple easy to use App.

Type and image will help explain these aspects, use of image will be inspired by blueprint style drawings to show detail and technical parts of the car in a legible easy to understand manner. Type will work alongside this imagery in a simple, clear and concise application.

I will communicate this through an interactive onscreen App that can be downloaded onto most smartphones and tablets, the App will work as a point and click interactive system. Pointing and clicking on elements of an F1 car they want to find out about and expand upon into a separate visual image of the element with accompanying information.

The App as mentioned will be an interactive collection off informative drawings and bodies off text and will use technical language but still remain understandable through simple easy to digest snippets of information. Complex enough to inform them and keep them satisfied with what there digesting, but not too complex were they begin to get bored or confused. So the tone of voice needs to be very clear yet technical in its language. 

Monday, 13 January 2014

App navigation & Layout inspiration

App navigation & Layout inspiration

Bellow is a rough map on how the app would behave and navigate. 
The starting point would be the Image off the Mclaren Mercedes MP4-28, the way in which you navigate would be by clicking on the part off the car you want to find more about, a new page would then display a cropped and focused image off the element in question, a second click would add text to the image, a 3rd click would take you back too the main image off the car in most cases.

On the survival cell, engine. and wheels the user can go deeper into the deconstruction and explantations of the elements of the race car so corresponding clicks off the element would load another image and so on and so forth. 

To highlight elements that could be zoomed into and focused on for information expansion I will do something similar to the game Forza for the Xbox360. Display a little icon highlighting areas for interaction. 

To help inspire my layout I have included a selection of simple layout examples with basic use of type & image. I have also included a selection off illustration examples to inspire my image making element off the design process. The images off the F1 car will be illustrated by me, initial thoughts at this stage are to create drawings with simple lines to emulate a very mechanical feel that also simulates blueprint instructions. This is very fitting giving the app is for describing technical details and elements off the car. 

The app needs to be very easy to navigate with no distractions so I looked at a few blogs for inspiration as I feel there minimalism within the layouts is perfect inspiration for my app through there ease of use and focus on the designs/images they present and promote. Both these blogs, typetoken and newgrids follow a generic black and white scheme throughout with the navigation bars contrasting the vast white layouts with black boxes to highlight the selection. This use off black and white and  feelings off clarity and crispness is something I am going to use through my design process. I will probably use a sans serif typeface to maintain this crispness and with it been on screen I feel sans serif outweighs the legibility and readability off serifs due to the resolutions on varying phones been higher or lower than others things need to be kept crisp, clean and simple. 


This example of branding found on AisleOne.com by swedish designer Joakim Jannsson is a beautiful example of how centre aligned typesetting can work perfectly giving the right frame and type editing. This will be the starting point for the orientation on my app, or there about and will inspire my type layout, the spacing off the lines and the combination of tight and wide tracking creates interesting contrasts through a design that initially looks simple and minimal but has many fine little details in there once admired and examined. This is something I would like to do. Theres also an interesting combination off different fonts and uppercase and lowercase glyphs but I will maintain consistency and just stick to one typeface family. Again the black and white scheme displays clarity and crispness. I also love the vector logo, the combination off a circular element with very linear and angular type elements again creates a nice contrast and in terms of hierarchy draws your eye right into the logo which would have been the intention due to the logo been what the viewer remembers the most. The use of line art will be a main inspiration in the illustrations to keep with this blueprint influence within the composition   

Bellow is an example of Valentin Breynes branding off The Museum of European and Mediterranean Civilizations  and is how I plan on creating my imagery, it looks like a very accurate pencil drawing. Ignoring the type and layout on this design and focus on the image, this is were I want my main focus to be until the type is brought in through the interaction of the user. To recreate accuracy like this i plan on making pencil drawings and using fine liners and keeping everything greyscale but maybe experiment with one single element off color throughout the whole design on each page.

Saturday, 11 January 2014

Initial concept idea

Initial concept idea

In preparation for my interim crit, I created a mind map on what problems I found within my body of research on Formula 1 Eras. The main 2 I found that I could produce visual concepts from were the issue off peoples lack off Knowledge on the KERS system thats been recently introduced into F1 regulations. The other issue I found when actually researching into F1 was the lack off information on F1 engineering due to secrecy within manufacture teams like Ferrari and Mercedes not wanting to release engineering specs out into the public. So producing some kind of informative and educational system that could be presented to the public on engineering aspects within F1 would be good. 

Here is the sum up off the Background and Considerations behind the whole concept. 

Who needs to know?
Formula 1 fans, ones who are interested in the technical side of the sport.
What/ why do they need to know?
Information on KERS system and regulations and why its used. Or if i go with the engineering aspect they will need to know about technical statistics of individual engineering elements.
How will you tell them?

I will Educate & Explain through the presentation of type and image to inform and educate on KERS system. Or I will Educate & Inform on engineering aspects through this same use of type and image and statistics and technical date on these engineering elements.

You must identify whether you are trying to EXPLAIN, INFORM, INSTRUCT or EDUCATE the audience?

Educate & Explain for the KERS system. Educate & Inform for the engineering elements.

What will the audience respond to, where will they look? How will they need to interact with it? How will you know it is working?
The audience will respond too informative explanations to educate them of a new technical side to F1 (KERS) Interaction will be through the presentation of type & image in a physical printed outcome. Final feedback from peers will prove if the outcome is understandable and clear through the presentation of information for education and explanation purposes. 
Will it be a; collection of, a presentation of or instructions to.
A presentation of type & image used in a way in which to educate & explain or educate & inform the viewer. The presentation will be a physical printed outcome.
What is the tone of voice? It must be appropriate to your subject, audience and method of delivery.
Clear and Technical, I need to be technical in the information i present due to the complex nature of engineering and KERS system but the information needs to be clear and legible in a way in which the audience can easily understand the content they are taking in.

Bellow is a mind map to help me think into how I will present and deliver my concept idea. 

So far I'm thinking either a magazine article, or a sort of Top Trumps game.

Top trumps would be best use with the presentation of engineering elements for example I could create top trumps on how important certain aspects off the car are. Like the brakes, the engine, the safety systems etc.
or
F1 cars over the Eras and presentation of there stats on speed, race wins, safety ratings etc. 
or 
Drivers over the Era's
This could provide a nice interactive way off producing an information system and could cover more target markets this way and introduce technical aspects to the younger generations. 

The presentation of the KERS system information would be good in a magazine spread found in a magazine on F1.

Both methods will give me a chance to experiment with type, image, color and layout design etc. I have initial thoughts at the moment of creating traditional analogue images (pencil drawings, watercolors etc) for the diagram style drawings that I am initially thinking off. 

Feedback from the crit will help me decide if one of these concepts has sufficient substance and will provide for an effective visual outcome. 

Friday, 10 January 2014

Concept workshop & Task

Concept workshop & Task

To help us think more into concepts we have been given a task within a small group to help us think more conceptually, we have been asked to think of a concept idea and produce a small presentation on this. The concept our group has come up with is the planning of a bar called Perspective.

The name of the bar encases the whole concept, the bar will be wholly inspired by Perspective and from discussion we felt targeting it at 18-25 year olds would prove most successful.

To arrive at this task though we went through a few trial and error ideas. These were the following.

Open a bar in urban paris inspired by Art and create an artistic twist on the traditional wine bar.

We then though of the idea of creating a sports bar inspired by Art in Barcelona but this was too generic and didn't differ much from the previous idea and didn't really have a concept we could build on.

The 3rd idea and is what brought us to the perspective idea was creating a bar on the concept off color theory, the interior and the items within would work in context with each other to create different feelings and emotions through color. A very retro idea that I personally liked.

To look into the idea of Perspective some more we split into categories on what we were too research. 
We originated out own ideas based on the word perspective and will go forward with gathering information around this, Mine was the idea of Mirror tricks or trickery within the eye and how things can look different by viewing things at different angles as shown in Holbein's painting of the Ambassadors. Initial thoughts off this was to place the painting behind the bar and it would provide a great visual talking point for people waiting for a drink. When viewed at a certain angle a distorted shape turns into a skull.


Other subjects within the concept perspective were the idea of coasters and glasses interacting together like when you look through a kaleidoscope and the color changes as you play with the rotation. This idea of interaction with perspective is a cool idea.

Color and perspective colour theory deriving from our original thoughts of creating a concept based entirely on color theory.

The final one is the perspective of interior elements and how they could appear different depending on your positioning in the room. 


To begin with I found a definition of the word Perspective. 
The main definition point I am going off is the "view off prospect" and the "a picture drawn in perspective, esp. one appearing to enlarge or extend the actual space or give the effect of distance". This strengthens my initial knowledge on the term that was basically depending on how you view an item the appearance extends or decreased and this is the element I want to play on by looking into subject matters that follow this concept. 

After looking into how perspective can change the visuals off something I came up with 2 main elements, mirror tricks and perspective art work. Both these elements could be used in the Bar itself. Drinking itself is a way in which your perspective can be changed so combining this with the elements of Mirror tricks and perspective artworks will prove to be an interesting experience, a psychedelic twist on the everyday bar.

After looking into the Ambassadors painting I found out that the category of artwork style it sits under was anamorphic perspective "Anamorphosis is a distorted projection or perspective requiring the viewer to use special devices or occupy a specific vantage point to reconstitute the image".

After doing some research into other examples off this kind of work I found lots of cool pieces that could be included in the bar. 

This drawing by Istvan Orosz is an example of how mirrors could be used to change the perspective of abstract artworks. Something like this could be used in conjunction with Beermats and reflective ideas, an interesting interaction off 2 commonly boring elements off your typical bar. 

In 1976 musical artist Rick Wakeman added interactivity to there No earthly connection vinyl covers, included in the vinyl was a mirror sheet that was made into a circular shape to view the altered image in its correct form. 

Andrea Pozzo's painting on the ceiling in the Church of St. Ignazio could only be viewed correctly when viewers admired the piece from directly bellow. Something like this would create an amazing high impact element upon entry to the bar as the punters looked up. 

3D street art seen in big urban cites is something that like the above celling painting would provide a high impact entrance too the bar, a clever optical illusion that simulates large 3D scenes and can create abstract  representations of holes in the ground. 

The final high impact element that could be used in the bar would be how artwork on the walls could add depth on flat surfaces like walls. Damien Gilley, Portland based multi disciplinary designer creates such works as this like the bellow. 

Now I have included all the optical illusions of art work and interactive elements into the bar I will describe how the final interactive element could be incorporated into the Bar. The idea off mirror tricks. Like the first example off the pencil drawing by Istvan Orosz perspective can be changed massively through the use off mirrors. My idea is to include mirrors around the interior off the bar that will change the perspective view off the Bar itself and the viewer looking into the mirror. This is inspired by the "House of mirrors" found in theme parks that included mirrors that made you appear distorted in very abstract ways. Adding these types off mirrors in corridors that people would normally just blank out when walking past would add an interesting journey to rooms within the bar. I thought about putting them in the bathroom but that might be a little bit weird as people will want an accurate representation of them not an optical illusion presented back to them.

The other idea would be to create an actually room based on these "House of mirrors", a room full off Mirrors were the customers of the bar can go in and experience yet another perspective changing interactivity within the Bar.


After looking into perspective and its use in Art & Design I feel like I could create interesting links into my own work with aspects of perspective so this is going to be put on the back burner for further individual research for future projects and briefs. 

Design Process Communicate

Design Process Communicate

We received our final brief for the module today and a really exciting one and very open brief in terms of what we can produce. 

Its the final brief within 3 linking briefs based on Collecting, Categorizing and Communicating. 
The collecting was based on my word Calendar which brought me too the gathering off research on Formula 1 season over the eras. 
Categorizing was the production of layouts inspired by Formula 1 and the categories we collected research within. 
And now the communication brief, its basically the need to identify a problem within our research and provide an answer for it. The resolution needs to be engaging and related to a specific audience. In this case people who are interested in F1 and the history and technical side off it.

We need to consider the following:
Who needs to know?
What/Why do they need to know it?
How will we tell them?
We need to chose whether we are explaining, informing, instructing or educating the audience. 
What will the audience respond to, where will they look? How will they need to interact with it? How will I know if its working?

What is the tone of voice? It must be appropriate to my subject, audience and method of delivering the resolution.

A 2 minute presentation will round off my resolutions.

Initial thoughts at the moment although vague as I haven't looked into it deeper yet are the creation of a typeface based on F1 engineering, Branding for F1, Poster design or a Booklet. I will be picking key things out from my research project in which to base the generation of a concept around. 

Monday, 6 January 2014

Design Process Page Layout

Design Process Page Layout

Based on the research I have gathered on the Formula 1 season and its history and development I am to create 5 double page spreads. One for each of the 5 areas I researched. The techniques and basics I learn in the Indesign workshop will inform the production off my page layouts.

Each page should be B5 paper size (250mm x 176mm). 
The double page spread should be printed on A3 paper (420mm x 297mm)
20 Facts
20 Opinions
20 Words
20 Statistics
20 Photographs

The layout off these pages needs to be informed by the subject matter.
To inspire layout ideas I will create rough sketches off layouts influenced by gathered existing layout design and grid systems. 

Initial thoughts are to create a representation of traditional aspects with contrasting modern elements. This will display the journey of eras from the origins in the 1950's (Traditional) and the modern Formula 1 aspects to date been the contrasting element. 

Simplicity and accuracy is going to be a main part through the whole layout due to the accurate needed in the engineering within F1. This will include the use of certain typefaces and fonts. 

A mechanical style through the layout will emulate the engineering techniques within Formula 1. 

Basic thinking into use of colour to denote the idea of traditional and modern elements throughout all the layouts. 

Found on Newgrids.fr by Tobias Frere-Jones
Grid used: Looks to be a single column grid as the positioning off the elements are random and some images bleed off the page with some looking like they follow margin guidelines. Good example off deconstructing the regular grid without loosing legibility. 
I like this for the simple greyscale color scheme with the addition of red and blue hues. The idea of creating a greyscale image and monotones creates nice contrast and would emulate my traditional and modern idea I want to present. I like the random layout of the elements through there sizing and positioning and the vertical orientation of the uppercase centre justified sans serif typeface. Its quite long and condensed in its glyphs which flows well with the rectangular images it sits with. 

Love the simplicity and use of space here by overlapping 2 pages and images and bleeding off the edge of the paper. Creates a sense of motion but doesn't cause confusion at the same time. 

Simon Beattie catalogue found on ItsNiceThat.com
Grid used: modular grid due to the many image elements. This idea off mass use of image will help me position and layout my image spread the use off color element keeps the eye moving about the page as well  which creates motion wich would work well as I'm doing Formula 1 and its very fast paced.

Layouts by D8 in Glasgow. Found on typetoken.com 
Grid used: Single column grid for image side or maybe a column grid like the type side only the image spans over all the columns. I like the border left around the image that takes up the whole first page, but what draws me in the most is the body text page, the simple columns are framed up nicely with block color lines that contrast green and black with other type elements and line elements in the layout. This use off bold lines top and bottom creates structure and solidifies the positioning of the body text whole the elements of color keep the eye moving about the design and avoid the whole piece looking too glum. The images are very light in there tonal and saturation values so this element of green really does stand out. 

Grid used: Could be a simple column grid or a single column with the 1797 type been centered to the layout and the header at the top been positioned right in the corner of the margin. For simple use of type this is probably my favorite, the opening page could contain this simple centre aligned typesetting could contain my header and the facing page after could contain the main body text. The contrast of the serif type and sans serif type is perfect for my concept of emulating modern and traditional this is a main aspect I will take forward into development. Im also finding that the designs with little color are most common and don't cause too much distraction and confusion which is important in the presentation of information. Very mechanically accurate as well which is what i need to emulate too. 

Grid used: Most probably a column grid. 
I like the colors used in this design it creates high impact but the actual layout is very simplistic and doesn't have many elements within it. The boldness of the circle in the yellow page is what creates this contrast off high impact and subtleness and is the main element that drew me in. This could again work well with the idea of traditional contrasting with modern. I don't really like the yellow type though it creates bad readability and legibility of the glyphs. 

Layouts created by Studio 8. Found on typetoken.com
Grid used: Modular with 3 columns and 6 rows. The image makes use off all these and goes over the margin to fill the whole page and past the bleed for accurate trimming. 

Grid & Layout basics
To inform my layout ideas and development I will look into grid basics and the basic types of grid design and what its used for. 

In an introduction to Adobe Indesign I learnt basic methods off creating a document ready for layout design as well as how to put elements of text and image into a layout.
Bleed (Red line)
This is used in printing and is content that goes beyond the edge of the sheet. Its basically a little extra for trimming purposes ensuring that there are no unprinted edges after the piece is trimmed. 
Standard bleed is 3mm
Slug
Slug is what goes beyond the bleed and usually contains elements like printing marks and registration marks to help guide the trimming process.
20-25mm Average.
Columns 
The vertical guides used too line up type and image elements in a layout. Rows can also be added to create different grid types.
Gutter
Is the width between each column.
Margin (Purpe line)
Is the bounding box in which the columns are encased in, the outer would be blank space  forming a border around the type and image. Its important to keep good balance of white space so information can be communicated legibly, too much clutter and confusion is caused, too minimal and things go un noticed due to low impact. 

If images are used there are 2 programs that can be used to prepare images ready for placing into layout. Illustrator or Photoshop.
Use .tif or.psd files never JPEG with Photoshop files in indesign. 
300dpi resolution.
CMYK or greyscale colour mode. 

Its also possible to copy and past images from adobe illustrator to indesign. This maintains vector quality. 

Basic grid types. 

Bellow are examples of basic grid designs. 
To begin with I will discuss the theory of the golden section. The golden section is a ratio used in western art & architecture cultures for the past 2000 years. The formula for the golden section is a : b = b : (a+b).
What this means is that the smaller of the two elements for example the shorter sides of a rectangle, relate to the larger element in the way in which the larger element relates too the combination of the above mentioned parts. 

For example, side A is to side B as side B is to sum up both sides. The numerical ratio would be 1:1.618. 

Single column grid. 
This is the simplest type of grid and consists of a single column encased inside a given margin dimension. 
There are two methods in which to set this grid up, by working outside in by setting the margins in fixed dimensions or by working inside out and opening a blank document with no margins and setting the margin guides yourself.

Multi column grid.
Single column grids work best with simple documents like letters. Multicolumn grids allow flexibility in publications that need to use hierarchies and the combination of type and image. 
To create a more flexible grid simply create more columns, this way hierarchy of the publication can be altered for example type could take up one column with an image underneath taking up two. 

As well as the guides in a vertical format the page can also be divided horizontally. As presented bellow were the space is used for images and headers forcing the body copy to be suspended underneath. This suspension of body copy is called a hang line, and in architecture a horizontal reference point is called a datum.

Modular grid. 
This style of grid is an adaptation of the column grid with additions of consistent horizontal lines from the top of the layout to the bottom. These grids are good for the placement of cropped pictures as well as type. The 1950s and 1960s saw Graphic designs like Gerstner, Ruder and Muller-Brockmann devise grid systems like the one shown below. 

Baseline grids.
These grids are create by adding more horizontal guidelines to a modular grid. These horizontal guides been the baseline of the whole document and anchor all layout into a set rhythm to maintain consistency. 

Tuesday, 31 December 2013

Calendar design

Calendar design

Here is a few examples of how diverse calendar design can be found on the blog:

It shows how a simple everyday thing can be made interactive and can follow many different design styles ranging from minimal to very illustrative. One color schemes, monotone schemes, tri color schemes simple greyscale schemes all sorts of examples are displayed bellow. Hand drawn typography, digital typography sans serif and serif in a variety of weights and sizes uppercase and lowercase, 3D constructions, landscape orientations portrait orientations etc.


























Bellow is examples I have taken off your normal everyday calendars. Absolutely awful and no originality and cheesy design making me realize the gap in the maker for more interactive and original well designed calendars. 






A more interactive Calendar found on my iPhone.



Interactive calendar found on my macbook.