Interface Design (Cont.)

Brief#4 -

Deadline: 13th & 14th November 2008

Create a map of a location, or an aspect of a location of your choice. The work should be manifested as a website comprising Flash and HTML/CSS, combining all of these elements. Now that you have the basics of Flash and HTML at your disposal, you have tool to integrate almost any kind of media you want into a web page. You are not limited to text and static images, you can use audio, animation, video etc.

Using your design skills, create an experience which is interesting and captivating. Create consistent considered navigation and information architecture (link styles etc). Show an understanding of accessibility issues, document your process and research in your blogs.

The map you create is your website content. Your website is a map of that content. Understanding the relationship between the chunks of content you create and presenting them in a way that makes them accessible and easily understandable and in a visually engaging way is central to this brief.

‘Location’ can be interpreted as broadly as, and in any way you like. Mapping a location or an action or journey or even – for example – your emotional response to any of these are all valid and interesting avenues for investigation. Be imaginative. Use a variety of media and processes to create your maps. You can work in extreme close up or zoom out as far as you like.

Working with Flash.

Getting acquainted with a new program is usually a difficult task when you are not familiar with the ins-and-outs of it. Most of the time without proper guidance, you will be spending time circling around a series of problems and hopefully finding a solution to that.

But just to get myself started, I have looked at various sites for few directions I could gear towards to. The few sites that I found to be particularly helpful and interesting was Tangozebra and Glue London. Both of them specializes in digital advertising; ad agencies in other words. Viral banners they have done is quite attractive and good, should definitely scroll through if you have the time.

Another really important site that I constantly referred to while working on the banners was a site called ‘Vectors for Flash‘. It is a really helpful and informative site that explains the physics aspect of Flash by introducing the use of vectors on a 2D/3D environment. In terms for designing for example games that requires movement, understanding how vector functions in Flash is really important. The text itself could get quite heavy at times but once you get the hang of it, it shouldn’t be that much of a problem.

Now, seeing how the task was to promote/using the font that was created in Brief#2 with the use of the Flash banners, producing the pieces itself might seem rather straightforward. It would be an easier task if the banners themselves were to be connected together with some kind of theme/style. And for this purpose I have narrowed down my focus point onto the phone cap (again) and instead of just having the banners animate, interaction with the banners would be a good idea…now, if only I could find a way to show the .swf banners here…

…nope, you can’t. I’ll try to figure out some other way for that.

Interface Design (Cont.)

Brief #3 -

Deadline: 22nd October 2008

Create a set of 4 flash banners ads using/promoting the Font that you created in Brief #2. Use the research you generated during the last 2 briefs as supporting materials if needed.

Create a blank HTML layout in which to place your finished banner adverts. The adverts should be placed in the correct context on the page.

Dimensions: (all dimensions in pixels)

Full banners – 468 by 60
Square Button – 125 by 125
Standard Skyscraper – 160 by 600
Micro-bar – 88 by 31

(For more information regarding the visual aspect of various web-banners, visit here.)

Better late than never…!

I am quite aware at the fact that the due for the second part of this module was due sometime back on 10th of October, it is a pity I never got around to upload the finished sets of typography but here it is:

702 - H&C

‘702 – (Handle and Cap)’ – The font is made out of the cap for which you speak into, screwed onto the receiver of the phone; along with the metallic handle in which could be found on the top of the phone itself.

AND…

702 - R&C

‘702 – (Receiver and Cord)’ – Self-explanatory, font made by arranging the telephone receiver and the cord into the alphabet itself.

Hardly a practical fonts but there you go, pieced out from the set guidelines from the brief.

Interface Design (Cont.)

Brief #2 -

Deadline: Friday 10th October

Disassemble the object you worked with in Brief #1 (if this is impractical for whatever reason choose a new one) by any means necessary. Document the process using words and images (photographs and/or illustrations).

Using the parts and pieces of your disassembled object, create a font or as much of one as possible using images (photographs and/or illustrations). If you encounter difficulties creating a full set of characters, work together with others.

The design aspect of your presentation is important, think about it. How does it relate to your object?

You will present your documentation and newly created font to the group.

Have fun!

Basic Field-Guide to Rotary Phone

Here is the finished field-guide to the selected object, as requested by the brief. The outcome of this field-guide is somewhat different to what was being planned earlier. But regardless, it is exactly what the title suggests – basic.

Field Guide to Rotary Phone

Rotary Dial Phone Schematic

As my research continues, I’ve came across this somewhat complicated schematic on the rotary dial telephone. Despite the illustration being simply line drawings, it is rather hard to understand what actually is going on. But I guess there is no harm including this to the list of research:

Rotary Dial Phone Schematic

( Image from The Free Information Society)

‘Evolution of the Dial Telephones’

An interesting site on the evolution of dial telephones invented in the 1920s to the arrival of the Touch Tone dialing.

Here’s the site: http://www.arctos.com/dial/

Bell System’s Rotary Phone Illustration

The following illustrations are from Bell System Memorial website:

Candlestick Rotary Phone

702BM Phones

Rotary Dial for the iPhone

iPhone Rotary Style Dial

“So, you’ve got a snazzy new iPhone. You like it alright, but wouldn’t it be better if Apple had just made dialing a number on the touchscreen really, really difficult?” - CrunchGear

This is a fun, little, yet not so practical, dial style for the iPhone.

Here is the link to the article.