Curiosities in New Media Design

TyPoGrApHY.

Typography is one of the most fundamentally important aspects of any design (obviously not when no text is actually needed though).

Will Harris, who has written several books on the use of typography, says it is used to trigger subliminal emotions. For example, a Times New Roman font on a child's birthday card would not exactly be an appropriate use of type. A more playful and informal typeface would be best suited.

Appropriate or Inappropriate?

Designs of different natures require different typefaces. Formal or Informal is a good way of thinking (sort of a rule of thumb) for any designer to go by when choosing a font.

Will Harris makes a good point when saying that there are no good or bad fonts; only appropriate and inappropriate. There is a fantastic website that allows you to "filter out" an appropriate font by allowing you to choose a number of impressions and whether it is casual or formal such as:

Formal or Casual?

Traditional

Warm

Cool

Serious Friendly

Once you have chosen your set of impressions and appropriateness, the application returns with a list of fonts for you to choose from that would be useful for the "feel" of your design.

I find it quite ironic that it is a fantastic tool for helping you choose an appropriate font, the website designers could have made use of their own tool and chosen a better font themselves; especially the sort of dark gold on black colour scheme (Grumpy Criticism).

To see use this tool for yourself click here: http://www.esperfonto.com/

Examples of good and bad typography.

After researching a bit, I found that there is quite a passion for typography. There are websites dedicated to good and bad typography such as:

Bad

http://bancomicsans.com/main/

This website has a vendetta against the comic sans font which I agree is a very ugly font. It reminds me of credits off of a really bad cartoon or if a clown was typing, comic sans is what would appear on the screen. I actually used this in as my essay font back in 2003 when I was a sports coach and was condemned for it (and rightly so).

Although it is in my opinion a horrible font, this does not make it a bad font. It makes it inappropriate for formal things such as essays, letters or bank statements to name a few. It would perhaps be useful for such things as mentioned previously, cartoon credits or joke cards or things of such nature.

An example of comic sans is further up the page referring to the "beeping sound" sign.

Good

http://www.shauninman.com/pilation/

Not only is his use of font very effective and most importantly, appropriate his website is actually really cool as well. You will see what I mean when you click on the link. His home page is great because it gives you lots of choices in which to gain information plus the use of the old pix-elated icons of 20 years ago is, I think, really good.

Good and Bad? - Helvetica

Helvetica has to be one of the most widely used fonts in the world. It is used by many corporations to display their word marks. Such companies as:

3M, American Airlines,American Apparel, AT&T, BMW, Jeep, JCPenney, Lufthansa, Microsoft, Orange, Toyota, Panasonic,Motorola, Kawasaki and Verizon Wireless.^[14] Apple Inc (taken from wikipedia) all use this font. Apple even use it for their MAC operating systems.

An example of Microsoft's word mark made with Helvetica can be seen further up the page.

It is used on almost everything in Switzerland including all forms of tax letters. This is one reason why Will Harris says that in Switzerland, the use of Helvetica in an informal design or even a formal classy design would not be appropriate because it would have a negative effect on their subliminal emotions since they are used to seeing that type of font on things that they don't like reading such as tax forms.

However, Helvetica is very much the Marmite of the design world. You either love it or you hate it. I personally love it. I think it is just a really tidy font that can be used for a very large range of designs. It all depends on the design of course. I used it in my IAMCG designs as I thought it was appropriate for the design. It was suitable for making a formal statement as well as adding a simplistic sophistication to some of my images.

Some Videos on Helvetica. The first being from the documentary about... you guessed it; Helvetica.

Is this a propaganda video against Helvetica? 8>)

(bad joke... ahem moving on)

Designers that interest me.

Andre Beato

Andre Beato is a graphic designer and illustrator form Portugal. His work is dominantly black and white. He uses very little colour at all in most of his work. He focusses mostly on the use of typography which seems to be somewhat of a trend at the moment.

Sebastian Tudor

This image displays work from an artist called Sebastian Tudor who is based in Bucharest. I am really interested in his use of typography and layout. I especially like the CD covers and CDs. They made me stare at them to read all the text which I think is a very effective way of conveying information as it is laid out in a certain way that it makes you want to know what it says.

This particular artist is especially good at CD Covers. As shown above.

The EGO cover is my favourite design. It can be interpreted that the man is drenched in paint because he has over-indulged in his own creativity or in creativity itself.

Examples and Critique of Data Visualization Concepts and Applications.

My own idea

Graphical Data Visualization Without the use of Code.

I wanted to use this design to represent the BBC news home page and the links attached to it and then the links that were contained in that sub-page. However, I had some technical difficulties with Flash while trying to import objects form Illustrator in which the design was created. Even when trying import the j.peg instead of individual objects, Flash just closed with no error message or anything.

So instead, I used a much more simplistic idea representing the top 20 countries' international statistics which I cannot show on this Blog because you are not allowed to upload swf. files.

Examples.

This picture above shows the web trend map which has been highly popular.

It hangs in the head quarters of Google, Microsoft, facebook, Wordpress and Yahoo! Japan. Even the CERN in Geneva now has its own copy…

"The Web Trend Map plots the Internet’s leading names and domains onto the Tokyo Metro map. Domains and personalities are carefully selected through dialogue with map enthusiasts, and every domain is evaluated based on traffic, revenue, and character."

Although it is an innovative idea, it does not portray fully accurate information as it is based on dialogue and is in essence conceptual.

"We grouped together closely associated websites, ensuring that every domain is on an appropriate line. As a result, the map produces a web of associations: some provocative, some curious, others ironically accurate. "

It is very detailed however, as you can see in the image above, it is not clearly legible from even a short distance away. The person in the image above has to use a magnifying glass to clearly read the map.

Route Maps

The travel Dundee bus company has its own interactive bus route planner which is a practical way of finding out which buses go where. As shown above, they have designated colours for each route. It is in resemblance with the design of the the London tube system map which is another very effective use of data visualization. They both present a lot of information in an efficient way.

To see this application for yourself click on the following link and click on "Dundee route map".

http://www.traveldundee.co.uk/bus/index.asp#

Idea.

The above image was one of my own however, I could not make it interactive as flash would not let me import the objects that I had created in illustrator. This technical issue is ultimately the reason why my final data visualization application will look so simplistic.

relates to Childcare cases across Scotland. It is a hypothetical arrangement in terms of location. Each colour represents a referral or non referral (click the image to see the colour key). The number of "stars" represents the a percentage (1%). So if there are 73 blue stars, this means that it is 73% of for example, a case referral for child well being with the remaining 27 red stars making up the 27% of non-referral cases for child well being.

Python Programming by Kunal Anand

The above image is a mapping of the blogging activity across the globe. It is unclear how the author produced such images in terms of technical method.

"This graph shows another view of the core. Rather than require reciprocal links, I have simply pulled out the largest connected component formed by any directional link between blogs. The obvious insight here is the relationship between LiveJournal (blue) and the rest of the core.

28/6/2006, no reciprocal links, partition=1, min weight=1

nodes=52, 952, edges=199, 052"

This is his explanation as to how he managed to create the above image. I would imagine it has a lot to do with coding however.

The above example is a very interesting concept. It is made by a programmer called Kunal Anand who has little to no art experience. He has allowed others to use his software to create visual images of data such as Matt Haughey's image above.

"The looks del.icio.us project is my first attempt to combine graphics design with programming. The concept is to see how users develop and sustain their tagging methodologies on del.icio.us. I'm not a formal art student or have a computer science degree. I'm just curious."

He uses a programming code and creates a graphics library in python* and combines the two to create images such as the above.

*Python is a remarkably powerful dynamic programming language that is used in a wide variety of application domains. Python is often compared to Tcl, Perl, Ruby, Scheme or Java.

Examples and Critique of Data Visualization Multimedia Applications. This above image is DIGG's very cool multimedia application called "Swarm" that shows various digg users who are browsing the web. They may be reading news stories, blogs podcasts etc. If the user "diggs" the particular news story or website, their user name pops up on the screen along with an info bubble and begins to float around. This username or news bubble can be clicked to either see the users profile or to go to the particular "digged" (or dug?) subject.

To try it for yourself click here: http://labs.digg.com/swarm/

This above example is fantastic both in the way it looks and in the way it works. It is a multimedia application designed (no doubt using extensive coding/programming techniques) to help the user broaden their musical horizons and find similar movies that could be of interest from typing in the search bar, their own favorites.
For example, the above screenshot is my own search for one of my favorite bands, The Libertines.

Upon hitting the serch button, a flurry of bubbles spawn from the initial libertines bubble containing similar or related bands that I may like.

It is not only useful it is visually impressive too. I admire this peice of software as I understand what it must have taken to program something like this which would have been far and beyond my programming abilities as an artist/designer.

to try it yourself click here: http://www.liveplasma.com/

Above, is a similar application: LastFM's TuneGlue. It holds the same purpose as liveplasma.com with the exception that it allows for the user to search for a band and obtain extensive info on the SPECIFIC BAND unlike liveplasma.com that gives results based on RELATED BANDS there is a more refined search that allows the user to slowly expand each individual node rather than a screen full of nodes that may be a bit "busy" for some users. This application allows for more interaction albeit less data on the screen to begin with.

Both are similar in design and purpose but they are diffrent in principle.

To try this application and choose your opinion, click here: http://audiomap.tuneglue.net/

This above example is very effective as there are a great many number of core colours to identify what each one represents. This is a data visualization image to show the many different

tags that are associated with the CNN website. It uses branches to connect each related tag and shows you what each of those related tags are using a colour key.

This has convinced me that using branched images with colour coded shapes to show their connection, would be a very effective way to communicate a large amount of data.

My own Ideas

The below image is a still of an example animation using plain old circles branching out from each other, originating from the big black circle in the middle.

When you roll your mouse pointer over any individual circle, text appears at the bottom right hand corner displaying info or, in this case because it is only an example, same coloured text as also shown below.

The idea I have been thinking of for the above example is using the complete web design colour pallette using circles and make each coloured circle's size correspond to its importance, common use, or popularity within web design.

Click on all images to see them in their full sizes.
Data Visualization is a way of communicating large amounts of content (data) using means other than just text.
Traditional ways of doing this is by using graphs and charts.
I have been asked to build an interactive application that can offer a large amount of data in an interesting and innovative way such as using interactive images, anmiations etc.

This above image could be used to click on the circles to be redirected to relevant links.

I plan to use a complex image that, in specific areas, can be clicked on with a mouse to reveal more data/content to the user such as this example taken from webdesignerdepot.com.


For the above image I thought of using a timeline of perhaps a band(s), political figure, history of a certain subject.


Using the different colours to represent different aspects of a certain subject is another idea.
Annotating them with links that can be clicked on to be re-directed to relevant website containing information on the chosen subject is, i think, another interesting approach.


A bar graph to communicate information is fairly common however, producing unusual bar graphs could be a good a idea

Proverbs Project and Random Stuff

More Random Stuff






Proverbs Project

We had to visually communicate proverbs without using the actual phrase.

I dont like them but I had to show something!




Random Stuff

The fifth word - communication and other admirable arstists

Communication has a massive amount of different mediums. The obvious ones being speech, television, telephones, radio, signs such as road signs and fire escape signs, gestures, body lanuage etc.

One of the most interesting ways to communicate I think, is sign lanuage. Here I have basically used illustrator to draw the signs that spell out "communication".






Below is a little bit about Mario Hugo who was voted one of the top 100 media designers of the last ten years.

Google Mario Hugo to see his portfolio. His website is great by the way. It has been designed to look like HTML code.

The images below are a bit blurry and hard to read but you can click on them to enlarge them.