After our seminar with Chris and Nik where we discussed our individual major project ideas, they decided I should combine my first and second ideas together. This means I will be combining infographics about Dubai’s facts, motion typography infographics videos about Dubai’s top sightseeing spots and useful tips for people moving to or already living in Dubai as expats about the different places to go. At the minute I am not 100% sure how this will all come together but I will continue working on ideas for this to come up with a solid plan of action of how I am going to approach this.

Nicholas Felton

This week I decided to look at some infographic artists after Chris and Nik recommended a few. The first person I researched was Nicholas Felton. Nicholas now works for Facebook as a member of the product design team. It is clear what his role in the Facebook team is and why he was seen as a great new addition to the team. He specialises in infographics, specifically getting huge amounts of information into very small areas, while still making the information displayed easily understood and attractive.

This is a big thing with Facebook Timeline, when it was introduced everything changed. When Facebook moved to timeline it began to use a very modular based design, everything is quite well spaced out and when the user scrolls through the timeline the ajax loads automatically allowing the user to scroll endlessly. This creates a no barrier effect when using Facebook and it means I find myself happily spending time looking at previous posts and stuff that isn’t even relevant. It makes time go a lot quicker and you can waste hours on it, which isn’t necessarily a good thing if you have lots of University work to be doing. Facebook now has a much cleaner structure and the modules allow everything to be separated more; photos of certain events, individual Facebook posts, Spotify playlists etc. I believe Facebook timeline was built a lot more for apps, before the new timeline Facebook was just a stream so if someone did something in Farmville it would appear in the same feed on their homepage. Now the apps are in their own modules on a users timeline and it makes them more eye catching and makes you click them to see what they are, effectively spending more time on Facebook.

Cover photos on Facebook are another big thing with timeline. I like to keep my cover photo simple and relevant to my portfolio site.

This space was specifically designed with landscape photos in mind and there is nothing I hate more than seeing someone crop a cover photo and half their face is missing or it only has part of the words if its a quote. While on placement I designed a lot of cover photos for companies as part of our social media retainers. Most of the cover photos were relevant to the Facebook page and usually a more minimalistic version of the landing page of the Facebook game they currently had on their page. I’m really looking forward to seeing what else Felton and the team come up with to improve Facebook further.

I really love Feltons annual report on himself, it holds a colossal amount of data displayed beautifully and you don’t get bored looking at it. He has managed to turn boring data into a work of art.

Tiffany Farrant

Tiffany works at JESS3 as an information design director, they have had some really big clients such as Google, Microsoft and Samsung. I found Tiffany’s portfolio while researching infographics in a ‘Top 50’ all time infographics article. I was attracted to her choice of colours and the way she presents a lot of information using circles.

One of my favourite pieces of hers has to be linking chobani greek yogurt with the olympic teams in this way. It is both effective and a has lot of logic behind it, however after reading the infographic over and over again and seeing different sections appear each time , it makes sense why she took this approach to it. It still keeps the element of the Olympics while adding the calories burned into the equation to justify how the official yogurt sponsors comes into it. It also explains the goodness of the yogurt, main facts of why you should buy it etc. It’s useful in a very prominent position on the page and a yellow box however not taking away from the infographic itself or the stars of the USA Olympic team but still getting the message across.

This is something I need to think about in my project, I have certain facts to get across for example, the Palm Jumeirah was built using 210,000,000 m3 of rock, sand and limestone. However people are also interested in knowing what can I do on such an island, why would I visit, what’s available to do.

I also really love Tiffanys work on The Social Brandspere with Jess3, it is a beautiful set of visuals on the five different ways brands can engage with their customers through social media channels. It shows how each unique technique produces a wide range of possibilities for interaction and storytelling between people and brands.

Design by Soap

Design by Soap are a UK company that specialises in infographics & SEO (quite a strange combination). They have also had big clients such as Microsoft, Yahoo, NHS and Paypal. View full size Olympics infographic.

They also did an infographic for the Olympics 2012, however using a totally different approach to Tiffanys. They are reporting on the Olympics as a whole over the years of its duration. From how many golds, male or female percentage for each country, to random Olympic facts. However I love the simplicity of it – if we take for example the section “Olympic moments” we can see that all the artwork is simply the men and women illustrations you would find usually on a toilet door. There are then elements added according to their sports. It’s quite interesting how a simple shape can be manipulated slightly and yet display a totally different outcome. These icons are used throughout the infographic and in this case I find it definitely gives the user an easier, less distracting way of taking in the information as opposed to being attracted to a beautiful personalised illustration per sport.

Arabic Infographics / Typography

As I am basing my project on an Arab country I feel that it makes sense to possibly include 1 or 2 Arabic infographics in my project.  As a non speaker of Arabic I am totally reliant on a translation however luckily this should not be an issue as I have many friends that can assist with this.

Arabic is very different from English:

  1. First obvious one being that they read from right to left
  2. It as a language consists of 28 letters, 10 of which do not exist in English
  3. It differentiates between male and female in words, verbs and sentences

I found a really cool Arabic infographic online. Check out more of these infographics.

The main one I will need to watch out for when creating the infographic is the obvious right to left difference, my infographics will have to be reversed. I would love to make my site available in Arabic also, however I realise this is a big task trying to get fonts to work etc.

As from experience of designing in Arabic it is totally switching the design, however if I could do this I think it would be a great feature and widely used. It would increase hits from Arabic speaking neighbouring countries such as Jordan, Morocco, Syria etc.

Viewport Sized Typography

Chris Coyier talks about Viewport Sized Typography, this is something I was interested in doing in my portfolio website however couldn’t quite find out how it was done until the lecture last week – using CSS3 the user can then change the fonts of the typography from big to small (auto scaling) however until now this is still not a safe solution.

It works perfectly in Chrome, breaks in Safari and Firefox and you have no hope with IE10. You could always provide a fallback for that however, that it just displays normal font size or you can use fittext.js.

It does exactly this by using JavaScript which in this case (web design at present) is a much more reliable thing until CSS3 becomes more of a prominent and permanent solution.

Kinetic Typography

Since it’s the video / website combination I have chose to go forward with, I have started researching more into kinetic typography and found this video on YouTube:

It’s quite a simple video however the main thing I liked about it was the ending, how it all combines and ends up making the Facebook F. This is something which I think I could do within my videos, possibly getting them to finish off making the building structure which i’m talking about.

I am going to start learning Adobe After Effects this week and see from there where I end up.

So what is Adobe After Effects?

Adobe After Effects is a digital motion graphics and compositing software published by Adobe Systems. Its main purpose is for film and video post-production. en.wikipedia.org/wiki/After_Effects

After Effects I think in this case is the right solution for what I want to achieve, I have found many videos and tutorials, such as this one on Premium Beat. I think using an another Adobe product with having experience of Photoshop and Illustrator is the best choice for me as opposed to trying to learn motion from scratch.

I will start learning after effects using Lynda tutorials and then follow through them fully for roughly 2 weeks then start moving onto being creative and customising my own videos and effects. The thing I find appealing about learning After Effects is that I have always had a keen interest in video and YouTube, just like web design it is constantly changing and people are making a lot of money being involved in it.

For this I will need to storyboard and design first, I think the easier the better. I think I should start simply with a famous movie quote or line and then use one font (most likely a sans-serif font) and then this will give me the basics to start. I’ll wireframe rough sketches and then start into Photoshop.

Playing with Typography

I decided to practice my typography a bit just for fun using some Steve Jobs quotes. I give myself a set of limitations for each piece of typography, I would only use one font, either all uppercase or all lowercase and the same style.

“Sometimes when you innovate, you make mistakes. It is best to admit them quickly, and get on with improving your other innovations.”

Quality is more important than quantity. One home run is much better than two doubles.

Stay Hungry, Stay Foolish.

My Final Major Project

#DXB (codename until I have come up with a proper name)

My Final Major Project is an infographic website about Dubai with supporting feature motion typography videos. It will mainly be aimed at tourists and expats who are new to Dubai. The website will consist of infographics displaying the facts of the main tourist spots in Dubai, along with places to go in that area, recommended spots.

I will be making the videos using Adobe After Effects and building the website using HTML, CSS, PHP and JavaScript. The website will be built using Twitter Bootstrap and managed on WordPress meaning the website will be a fully customised WordPress site and it’ll be responsive.

Technologies & Purpose

The main purpose of this site is for people to look at the interesting facts of Dubai in a unique and fun way, while also providing additional information of what to do around the area. Extremely beneficial for tourists, those new to Dubai or people visiting family in Dubai.

User Journey

So I drew up a rough user journey in Illustrator of how I see the site in my head at this stage, although it is early days so this could change slightly. I imagine it is going to work in sections either by tourist attractions, malls, transport or just the main attractions like in the User Journey. Once you have clicked on the tourist attraction you are then brought into a page all about that particular thing. So for the Burj Khalifa page it will have infographic facts, location map, link to actual website where you can book tickets for “At the Top“, a motion typography video and some info on what’s actually inside the building.

I might have to do a few different versions of user journeys over the coming weeks until I decide 100% on what the website is going to be like.

TIL – Tropical Bamboo (something I didn’t know that I do know now)

We have been given an extra task of going and finding out some information about something we never knew about, it can be absolutely anything and doesn’t have to be relevant to our major projects or the course. So I went to the library in search of a book, I was trying to find one on architecture but ended up finding one on Bamboo. The book is ‘Tropical Bamboo’ by Marcelo Villegas. The book is actually about using Bamboo as a building tool.

At first you may think, how boring, but actually the contents of this book are rather interesting. It also makes me think of tropical countries and takes away from the fact i’m actually sitting in the University library watching it rain outside. Testing out the iPhone 5 panorama feature you can see this below, although you could be mistaken for thinking it actually looks sunny outside, but I’m pretty sure that’s just the contrast between the natural light outside and the fake light in the library.

What Amazon says about this book:

Recognizing bamboo as an ideal building material, both beautiful and functional, this guide fully explores the renewable resource known as “the poor man’s wood.” A highly valued tool for artists, designers, and architects in recent years, bamboo is elegantly featured through gorgeous photographs that reveal bamboo’s many innovative architectural uses and highlight its starring role in furniture, handcrafts, and sculpture by Colombian designers.

The introduction to this book claims that Guadua Bamboo is actually the most important element in the culture of the Old Caldas, the coffee growing region in Western Central Colombia. It does many things such as shape the landscape, carry water and gets used in construction. These are all facts I never knew before. Bamboo can actually grow up to one foot in one day! After planting it can be used just 3 to 6 years later in which time it reaches its maximum strength. There are many factors that make Bamboo desirable as a low cost building material such as:

  • low cost
  • ease of transport
  • shape
  • high resistance to tension, compression & flexion
  • antiseismic properties

So now moving on to Architecture and the Future of Bamboo. Bamboo is a material which suffers no change on being removed from where it is grown unlike normal plants, trees etc other than the minimal harm it may sustain when the prickles are removed. Bamboo looks smooth and varnished without any treatment and requires no intermediate processes and there is no waste through sawing or cutting. This makes bamboo a very eco friendly building material .

Fun Fact

“Its weight-resistance ratio is matched only by that of space age metal alloys.”

Marcello Villegas (2007). Tropical Bamboo. Villegas Editores.

Bamboo has many different uses in building, it can be used as structural supports due to the sheer strength of the material, as seen below.

It is used to make bridges. The bridges below are rudimentary bridges with a floor made of bamboo canes placed lengthwise, bamboo crosspieces and a bamboo handrail.

Bamboo aqueducts used to be very common but are eventually disappearing because they are not very efficient. They can carry water over large distances using split pieces of bamboo with the inside layer removed and are held up by forked supports.

I also looked at Bamboo hoppers, these are simple structure built on coffee farms. They are used to gather coffee and load it into vehicles. Hoppers are all built according to their different topical requirements.

I can safely say that I learnt many things about Bamboo plants which I never knew before. So if I’m ever in a pub quiz and there’s a question about Bamboo, I might be one of those random people that knows the answer to a question which leaves everyone else scratching their heads.