Concept Development

 

Based on my sketches I chose to create icons of all the tourist attractions I wanted to talk about and lay them out in a grid based design resembling an infographic type guide. To maintain the simplified style of the spread I used block colours and a limited colour scheme of just pink for the background and white for the monuments. I chose pink as I wanted something that portrayed a vibrant and modern take on the city, much like the olympic branding for London 2012 which uses lots of vibrant block colours, particularly pink for the logo. In this way I hoped to make the branding of London in my spread consistent with existing branding of the city which is very contemporary.

 

The typeface I used for the header was Bebaus Neue, a typeface that can be found on dafont.com. I chose it because of its resemblance to Din and its bold condensed styling which I think carries connotations of an informative piece. Using this style of san serif typeface in infographic design seems to be popular at the moment as it appears in many existing designs.

  

The left page features two enlarged vector graphics of Big Ben and The London Eye. This was to add visual interest to the look of the spread and make the first page eye-catching enough to draw the reader in. It's also used to break up the more rigid grid based design of the opposite page, giving some of the attracts a bit more freedom visually which should help maintain a more light-hearted feel to the spread. They're both accompanied by a description like the rest which makes them fully functional promotional pieces like the smaller icons.

 

In order to start designing the finished version of this spread in InDesign I had to create quite a complicated grid layout to ensure everything lined up properly and looked in order. This was important as the structure is noticeably grid based. The left page uses a basic 8 column grid. This was to aid me in creating the proportions of the header and aligning the larger objects around the edge of the page to balance it out. The right page, however, is based on a 3 column grid for the articles with a 9 block modular grid over the top for the imagery. This creates a designated area for text and imagery to be placed in which is aligned and balanced across the page. Some of the vectors had to be moved slightly to improve the overall look of the page as some didn't appear to be aligned in the right places.

But once the grid was in place it was fairly easy and straight-forward to import the type and imagery. 

Show Me How

 

This is a book I bought from work which I found really interesting. It's made up of lots of double page spreads which are guides on how to do things in everyday life. I really like the stylized style of the book, it gives the feel of an infographic and comes across quite quirky in it's design. 

Im thinking about designing my London guide based on this style or similar. I think I could use the iconic landscapes of London and simplify them into illustrations like these ones to make something really modern and fresh looking whilst still being informative. And I might be able to project a sense of fun into the spread in the same way the designers of this book have with their instructions and diagrams.

I've also decided to use the same dimensions for my spread, since the design will be inspired by this book.

Practicality of Touring London

I think it's important to consider the practicality of visiting all these sites in one day. If tourists were to use my guide to famous sites it should be laid out in a way that allows them to get from one to another easily. I think it's fairly easy to get from point A (the London Eye) to point H (The Tower of London). Google maps says it's an hour and a half of walking, which I think is reasonable for a tour of London.

For this plan I chose the attractions that are all located in the center of London (mostly around Westminster). From A - H it goes:

• London Eye
• Big Ben
• Buckingham Palace
• Picadilly Circus
• Trafalgar Square
• St Pauls Cathedral (via Embankment)
• Tower of London
• Tower Bridge 

If You Come To London, You Must See..

After experimenting with some layout ideas for the Tunbridge Wells guide I've started to lose a bit of interest in the concept. Partly because the tourist attractions in Tunbridge Wells aren't very strong once you've done the three main ones (The Pantiles, The High Rocks and the Spa Valley Railway). Even with 5 attractions I feel like I'm clutching at straws a bit with things like the shopping center and the museum.

So I've opted for a change of location to somewhere with much more tourist appeal: London. London has a ton of well known, interesting tourist attractions and iconic monuments. I think I could have more fun designing something based around this ideas as I could experiment with the iconography and get some really good photos.

Possible Places to Include:

• Big Ben
• London Eye
• Buckingham Palace
• Tower Bridge
• Tower of London
• Piccadilly Circus
• Trafalgar Square
• St Paul's Cathedral
• The Gerkin
• Shakespeare Globe
• Marble Arch
• Golden Hinde 

I'd quite like to make a spread that focuses on all the 'must see' famous buildings in London that tourists would be interested in. Basically the top sites from that list.

This is a layout idea I was quite interested in. Taking all the iconic sights of London and creating like a collage across the spread with short discriptions next to each image like labels. I think this would be more visually interesting than just having photos in boxes and a less formal approach which should attract a wider audience. I also think it could add a sense of fun into seeing the sights if arranged in the right way.

Further Alterations (Game Review)

I made some further alterations to the previous spread I designed featuring a game review. On closer inspection I noticed that the scaling of the images was a bit off. When printed, they looked over-sized compared to the ones found in other magazines I looked at. I realized I hadn't judged the size of the spread properly because I'd spent all the time looking at it on screen which isn't to scale.

This was a problem when it came to adding finishing touches like a header and footer. There was no room for a header without obscuring the imagery. So I scaled down much of the design elements in the spread and reshuffled parts to allow space for a header. All the spreads I'd looked at from similar magazines used headers to tell the reader what type of spread it was (e.g. - review, timeline, coming soon etc).

I feel I've significantly improved the overall design. The proportions look better and the header and I think the header and footer add a professional feel to the spread. They also give the reader useful information. However the only problem is that I can't find space for the fact file about the game which has vital information such as it's name, price and availability. I need to keep working at it to get this feature into the spread.

5 Things To Do in Tunbridge Wells

I've decided to cut the tourist attractions down to 5 as I've actually found it quite hard to find 10 good tourist attractions, in town, that I can write a decent amount of information for. This might actually give me a bit more freedom when it comes to laying out images and text, but the basic concept remains the same.

 

These are some initial ideas I had for possible layouts. I want to create something less wordy and more image based as a way of capturing the interest of tourists. Plus, I want to sell the attractions to tourists but obviously they have to go and find things out themselves when they visit. So I don't want to ramble on about any of it, I'd rather have smaller, easy to digest chunks of information. 

 

10 Things To Do in Tunbridge Wells

This is my idea for the 4th spread. A tourist based guide to attractions in Royal Tunbridge Wells. It could be part of a travel guide type magazine (possibly based in Kent or the South). I think this would be a good opportunity for me to include some more of my own imagery and it's convenient as I live in Tunbridge Wells.

I'm interested in doing a spread that's a bit less formulaic in terms of the article structure. This spread might be a good time to experiment with modular grids instead of just column grids that I've been using so far as I will have lots of distinct chunks of information to include. All I have to do is think of 10 things to do in Tunbridge Wells.

To find out I had a look at Tunbridge Wells' tourist website http://www.visittunbridgewells.com/ . This gave me some ideas of what to include for this spread.

Things to Do:

• The Pantiles
• High Rocks
• Spa Valley Railway
• Victoria Place Shopping Centre
• Museum

Further Development

  

Once happy with the overall design I imported it from Illustrator into Indesign to start working with the article and page layout. To create the columns that appear at an angle I first had to draw text boxes based on the 5 column grid structure I had laid out. I then grouped the text boxes together and rotated them at a 25 degree angle so that they both aligned with each other and the rest of the design.

I chose to set the design at a 25 degree angle, as apposed to other angles, because I found out that the stem of the A in Futura (and other letters) sits at a 25 degree angle. I wanted to emphasize this by rotating the design so that the A on the right hand page sits at a 90 degree angle with the page, showing a relationship between the orientation of the design and the typeface.

This is an experiment I did using the existing design. I wanted to see how the spread would look if I filled the space at the top with another geometric form (this time the O) and I also added "Geometric Typeface" as a piece of extra information and a way for the user to see more aspects of the typeface.

I don't think the O is an improvement on the design. It's hard to place in black or red without making either colour seem overpowering. And setting it in a lighter colour breaks the established colour scheme. It also doesn't really align to anything and generally looks out of place. I think the design is better with the white space, which allows the design each page to breath (since they are quite busy in their own right but seperated by white space).

However I do think the "Geometric Typeface" I added works with the design and has more functionality. It also sits well with the lines and squares that surround it on the right hand page.

As a finishing touch I added some information in the footer. A title for the magazine / feature and a page number on the opposite page. I wanted the footer to correlate with the overall design (that's why I used the same colour scheme and typeface) and not impose on it. I tried to keep the information in the footer to a minimum (only using one page number for example) in order to keep the look of the spread as clean and as free of unnecessary objects as possible, thus reflecting the design and ideas behind Futura.

Alterations

I felt this design didn't emphasize the geometric style of Futura enough. I experimented with adding more shapes, lines and letters that showcase these characteristics. I also felt that some of the text (such as Paul Renner) felt like it was a bit disconnected from the design so I rearranged them to align with different design features more clearly.

Made "1927" in Futura Bold and aligned it to black line to give it some consistency within the design. Alteration of the A in the corner design, drawing from a previous idea I had in my sketchbook. I prefer the previous version, this one looks too gothic and doesn't really say 'simple' geometic shapes. But the setting of '1927' is an improvement.

Developing some Ideas

I decided to take a pick a few ideas I was most interested in and developing them further by mocking them up in Adobe Illustrator. Illustrator proved to be a useful tool when it comes to manipulating type and vector graphics together. For the finals I will be transfering the design, somehow, into InDesign. For both designs I substituted the article with lorem ipsum just to see how it would look overall.

 For this design I started with the large 'f' and expanded the design from there with vertical and horizontal lines leading off from the word 'futura'. I experimented with rotating the design at different angles. I have to be careful not to make reading the article too difficult as rotating too much would mean people would have to physically turn the magazine just to read it, which wouldn't be good. I went for a red black and white colour scheme as these are some of the colours that particularly stood out to me when looking at inspiration like the moodboard. Red is also a very bold and alerting colour, which reflects Futura's popularity as display type thoughout the 20th century. Red and black seems to have been a popular colour scheme for advertising in the 1920s and 30s from what I've seen.

This design is based on another idea I sketched. It's much more simplistic and straight-forward. I think it conveys the idea that Futura is based on geometric shapes really well but might be limited as it doesn't really show any other weights or symbols found in the typeface. I like how it turned out though, I think it would jump out at the reader if they opened the spread to this page, in a similar way that Futura has been used to demand attention since its creation.

I'll develop them further experimenting with alterations in content, compostion and colour scheme to see if I can improve the designs.

Initial Sketches

Some ideas for the typographic spread I've come up with so far, scanned in from my sketchbook. I annoted some of the designs I thought were significant or possible choices for development.

Paul Renner

I thought it'd be a worthwhile idea to research the designer of Futura in some more depth as this could be useful when deciding what to write about in the article. This is an article I found on Typophile.com about his life:

Paul Friedrich August Renner was born in Wernigerode, Germany on August 9th, 1878. Growing up into his teenage years he studied Greek and Latin for 9 years, and then moved on to study art at a higher level, finishing his formal education in 1900. Following this Renner became involved with design and became concerned with typeface and book design.

During the summer of 1924, Renner started to work on what would become a typeface called Futura, his most well-known work. Futura was a very important type of the time, especially in Germany, as it was a movement towards the modern roman letter and a departure from the Blackletter. Renner's Futura has also become the inspiration and foundation for many geometric types to date, and for that alone he deserves mention. During his career he designed two other typefaces, Plak and Tasse, which like Futura are also commercially available.

Furthermore, throughout his time, he wrote a number of books; Typographie als Kunst (Typography as Art), Die Kunst der Typographie (The Art of Typography) and Color Order And Harmony to name a few. After a long career at the age of 78, Paul Renner died on April 25th, 1956 in Hödingen, Germany.

"Boycott Futura Extra Bold Condensed"

 

This was a reaction to the use of Futura Extra Bold Condensed in movie advertising, created by Jerry Ketel in 1992. It reads:

“It’s time for Art Directors the world over to boycott the use of Futura Extra Bold Condensed – the most over-used typeface in advertising history. Destroy the Great Satan of clichés and the Little Satan of convenience, and rally to the cause of a better type selection.
Please fill out the enclosed petition and mail it to our headquarters. It will be used to sway the opinion-makers of our industry toward our just and worthy cause.
Together, we can whip this mother.”

I think it's interesting that the popularity of the typeface caused this kind of stir amongst designers. It shows how useful Futura has been since its creation, especially in commanding the attention of large audiences as seen in movie posters. It was clearly a popular trend in the 80s and 90s.

Extract from CreativePro.com

This is an extract from an article on Paul Renner I found on CreativePro.com which explains some of the impact futura had on graphic design at the time of its release:

"It is based on geometric shapes which became representative visual elements of the Bauhaus design style of 1919-1933. Futura was commercially released in 1927-1930 and it became a cornerstone of the 'New Typography' classified as Geometrical Modernism. Form follows function became the key words and careful reasoning constrained all the character shapes to their utmost functional simplicity. With Futura, in typographical terms, the industrial revolution had reached its logical conclusion.


Initially, Futura was issued by the Bauer Foundry in six weights, a condensed version in three weights, and an Inline. Renner's typeface family provided the right typographical tool for the professional designer and it became a popular choice for text and display composition. Even today, advertising typographers often use the combination of Futura Light/Book and Futura Extra Bold because of the design's stylish elegance and commanding visual power."


Notes:

• Form follows function
• Character shapes were constrained to their utmost functional simplicity
• The right tool for the professional designer
• Start of geometric Modernism and the cornerstone of "New Typography"

Futura in use

This is a plaque from the Apollo space mission to the moon in 1969. I noticed they used Futura for the message. This shows how Futura expresses a modern feel as it has been associated with new ideas like space travel.

Volkswagen also use Futura for their logo typeface. The style of the typeface reflects many things that are also associated with the Volkswagen brand such as efficiency, functionality and being forward thinking.

Futura makes frequent appearances in the animated TV show Futurama which parodies old science-fiction depictions of the future.

Futura was Stanley Kubrick's favourite typeface (particularly Futura Extra Bold) and he used it in various movies he made. He used Futura for the title of 2001: A Space Odyssey and I think it's very appropriate as the typeface has proven to be as timeless as the film itself, even though it was used in 1968. In that sense Futura is a suitable typeface for a film predicting what the future will be like in 2001.

Moodboard

For this project I decided to create a moodboard based on what I think of when I see the Futura typeface and its design. Hopefully this will help me generate some ideas when it comes to the design stage.

Things I associate with Futura:

• Retro-futuristic designs
• Bauhaus
• Art Deco patterns
• Streamlining
• Bold primary colours (also quite earthy colours)
• Sharp defined lines
• Aspirational designs
• Technology
• Efficiency

Futura

For this spread I've decided to use Futura as the topic. I'm quite interested in the style and I know there's quite alot of history behind it. This will give me more information to talk about in the article.

 

A Summary from Wikipedia: "Futura is a geometric sans-serif typeface designed in 1927 by Paul Renner. It is based on geometric shapes that became representative visual elements of the Bauhaus design style of 1919–1933.[1] Commissioned by the Bauer Type Foundry, in reaction to Ludwig & Mayer's seminal Erbar of 1922, Futura was commercially released in 1927.

The family was originally cast in Light, Medium, Bold, and Bold Oblique fonts in 1928. Light Oblique, Medium Oblique, Demibold, and Demibold Oblique fonts were later released in 1930. Book font was released in 1932. Book Oblique font was released in 1939. Extra Bold font was designed by Edwin W. Shaar in 1952. Extra Bold Italic font was designed in 1955 by Edwin W. Shaar and Tommy Thompson. Matrices for machine composition were made by Intertype.

Although Renner was not associated with the Bauhaus, he shared many of its idioms and believed that a modern typeface should express modern models, rather than be a revival of a previous design. Renner's initial design included several geometrically constructed alternative characters and ranging (old-style) figures, which can be found in the typeface Architype Renner.

Futura has an appearance of efficiency and forwardness. The typeface is derived from simple geometric forms (near-perfect circles, triangles and squares) and is based on strokes of near-even weight, which are low in contrast. This is most visible in the almost perfectly round stroke of the o, which is nonetheless slightly ovoid. In designing Futura, Renner avoided the decorative, eliminating non-essential elements. The lowercase has tall ascenders, which rise above the cap line. The uppercase characters present proportions similar to those of classical Roman capitals."

Notes: 

• Based on geometric shapes
• Designed by Paul Renner between 1927 and 1930
• Influenced by Bauhaus ideals
• Communicates efficiency and forwardness
• Still modern looking
• Used frequently today 

More Typographic Spreads

 

 I thought this spread was really interesting. I like the way the designer has used the typeface to create an image out of the letters. I also noticed that they have used different weights of the font which shows the reader more styles of the typeface.

 

In this spread the designer emphasizes the typeface's heavy weight by setting the letters really big and fitting them together like blocks. The layout of the article reflects this as they have used two wide columns with no line breaks which form two large blocks of colour on the page. I thought this was interesting as I hadn't considered using the article to also show characteristics of the typeface.

Even though type is used in these spreads there is no clear grid apart from the main article. The visual arrangement of type that accompanies it is often free to be placed wherever the designer wants. Although in most spreads it is clear that the designer has chosen to position all the type in a way that balances the spread nicely.

Typographic Spreads

For this brief I'm keen on doing a typographic piece. I'd like to choose a typeface and write an article about it whilst displaying it in an interesting way that highlights it's characteristics.

 

This is one example of a typographic article. The way the designer has rearranged Rockwell in this spread reminds me of an avalanche or a rocky mountain. I'm not sure if that was what is supposed to be implied. I have noticed however that the designer has grouped letters together in a way that highlights aspects of the shape of the letters, e.g. - the O and the C together highlight the circular shape that they're both based on. Additionally the K and W are connected via their serifs which highlights Rockwell's chunky slab serif design.

I thought this design was interesting. By setting on letter really large across the spread the reader can see the style of the typeface in greater detail. I think it highlights the shapes that make up the letter, especially through the way the W appears trail from the bottom corner of the page which angle in which the letter sits at. It also makes the overall design more visually interesting and, I think, emphasizes the contrast between the thick stem and the thin serif.

The article itself is quite short but I think the designer has made good use of white space with this more minimal approach. 

Further Development of the Spread

 

I added the background I'd created in Photoshop to the spread and this was the result. I think it works amazingly with the characters standing in the middle. I really adds atmosphere to the design and now the characters look like they have a reason for standing there. It also adds dimensionality to the spread as the characters appear to stand in front of both the background and the text & imagery, making them more eye-catching. Not to mention it successfully makes the spread look like part of the Back to the Future brand using similar colours, themes and further iconography to appeal to it's target audience.

I changed the colour scheme of the type to white as this worked better against the now darker background. The actual background image was placed in a text box that covered the whole spread but was cropped in a way that the objects in the background didn't interfere with the text. I really feel this is a vast improvement on the design as a whole. Everything seems to be more unified under a central theme.

Final touches include adding captions and little design cues to help the reader follow the spread. e.g.- little arrows at the start of captions which subtly point to the image they're referring to. 

Creating a Background

After creating most of the spread I noticed it seemed quite bland, or just not very 'Back to the Future'-esque. I think this is because of the amount of white space in the background. The characters are posing but don't look like they're in any sort of situation.

Like the previous articles I'd looked at I wanted to immerse the article in the style and themes of the film, so I had an idea to create a background for the spread that would add a clearly defined Back to the Future feel to the spread.

 

On the official website I noticed the game designers have created a poster for the game that is a throwback to the original theatrical posters for the film. This gave me a good idea for a background. I decided to recreate the background featured in these posters for my spread. Not only is it visually iconic to fans of the series but it's vibrant and not too busy because of the way it's quite stylized. Thus it would probably work well as a background for the article as text should be legible.

 

I started off with a stock image of a cloudy night sky. I chose one I thought had a similar look to the one in the poster. I put this into Photoshop. 

I made the blue of the sky more vibrant like the poster using the brightness, hue and contrast tools.

 Then I darkened the top of the image to make it look like it was fading darkness. This was done using a layer ontop that was all black and then faded out using a layer mask.

 The sunset effect was created using the gradient tool and another layer mask ontop of that to recreate the orange fading into the blue. Lots of movies use the mixture of blue and orange in their posters as they compliment each other and suggest action danger and suspence. They also suggest the clashing of two worlds or ideals when placed directly next to each other.

 The shining light from the car was created by drawing triangles emanating from the corner of the frame. Then a slight blur and lighting effects were added to enhance the shining appearance. I chose to keep this confined to the corner and without the car because I feel this would make the background too busy to lay type over. The rest of the background is dark and so a large white area would heavily contrast and mean the text would have to be different colours to be legible.

Finally the road and horizon were created using a shape tool and noticable film grain was added over the whole image (as is the style of the posters). I chose to set the road and mountains lower down than the posters actually depict them as I didn't want them to cut through the article half way down the page. The article should fit nicely in the area where the sky is.

Building the Grid / Creating the Spread

 

To start creating my spread in InDesign I set about building the grid first before dropping in any images or text. However for this design I was basing a lot of the layout around the postion of the cut-outs in the center. I decided to start off by getting the position of these images right before I put anything else in. I also tried to leave enough space between them so that not much information would be lost in the fold, but keeping them relatively close.

 

I created the columns and image boxes next. I experimented with lots of different column grids but I settled on an 8 column grid as this allowed me to create 4 medium sized article columns that would text wrap nicely around the images whilst leaving equal space on either side because of the equal number of columns. This helps maintain the centralized design of the layout. This column size also best fitted the length of the article I was using.

 

Next stage was importing the actual article and creating the header. The article title I chose was "Blast from the past" - I didn't want to use the title of the game because that would have been more boring. Article looking at existing magazines they often have an interesting title that graps the readers' interest.

 For the header style I found a typeface called Ozda hosted on dafont.com. I wanted something that had a distinct science-fiction feel to it and also quite retro as this would tie-in with the style of the film. Additionally I chose this typeface because it was very bold similar to the logo of the film. In this way I hoped to bring some character into the article using type and not just images.

The reason I didn't just go for the Back to the Future logo typeface was because I wanted something that reminded readers' of the film but wasn't just a straight rip from it. In this way the magazine can be more creative and create it's own style whilst clearly showing inspirations from it's subject matter. I also found this typeface to be much more versatile and easier to use with a grid. The name and postioning of the words was inspired by the Back to the Future title.

 

I then imported all the other images I wanted for the spread and created the pull quote and final verdict. I specifically chose images that would best fit the shape of the image boxes I had. For example the image of young Doc on the far right was a portrait image so it best fitted that particular image box. I also chose to use close-up shots as the image space I had was quite small and this would best balance the larger images of the characters in the center.