WEB_2: Interface Design and Minimizing Complexity

Interface Design: Login/SignUp (post your top 3 and why) and Minimizing Complexity In User Interfaces by Tyler Tate


Random bits: Google Barcode, Email Etiquiette, Die Electric, Mutantrumpet, and Google Timeline

1. Today’s Google logo is hilarious. Check out the gallery for more wackiness.

2. This great article on email etiquette might just save your job one day.

3. A dielectric is an insulating material. It does not conduct electricity. The “Die Electric” experiment by Scott Amron makes use of AC power plugs and sockets less the flow of electricity. Finally, the “keybrid” below.

Picture 6

Picture 5


4. Palladio, an interactive, playable movie based on the novel by Jonathan Dee, is created by Ben Neill (on mutantrumpet) and visual artist Bill Jones. In their performances together, both VJ and trumpeter control music and video as a single hybrid form; a live duet of images and sound.

5. Google Timeline creates a visualization based on information it finds around the dates.


WEB_2: PHP Machine

Our use of the internet is increasingly enhanced by online applications that reenact offline scenarios; sharing a video or photographs with friends, doing research by looking-up terms, keeping a log of your activities. The interaction is not new, only the context.

In this project you will be challenged to recreate a modest online app that mimics a real-world machine or activity. Create a web page or series of pages that mimics the function (or disfunction) of a machine either explicitly or through the use of metaphor. The machine you choose can be as simple or as complex as you like, but should be able to receive input, capable of acting on that input, and showing output or action. The more extraordinary the result the better. You will be graded on form AND function.

Machine Concept

Create an HTML page (linked from your profile page) containing the following information:

  1. Select your machine (or multiple if you like)
    1. Research its history. What can you use about past context(s) to influence your project?
    2. Find related imagery. Seriously, visit a library if you have to.
    3. Be ready to report your object(s) in class
  2. Create a step-by-step drawing of the processes of your machine mash-up
    1. Make notes about design, interface, code, etc.
    2. Present your drawing and research in class
  1. At least three sketches (pencil/photoshop) of machine drawings
  1. Notes and research about the machine you have chosen for the PHP Machine Assignment

Machine Prototype

At this point you should have a functioning prototype of your PHP Machine. Create an HTML page (linked from your profile page) containing the following information:

  1. A link to the original concept
  2. A link to a functioning prototype or separate parts of PHP Machine
  3. Images of preliminary designs for the interface to the PHP Machine
  4. Other notes and research about your project

FINAL: Present Your Machine

The project should:

  1. Use one or more PHP pages as well as web forms that allow users to input data or make selections.
  2. Your page should be elegant and well-considered in its layout. Use images and CSS to define and position type and form elements.
  3. Your page(s) can be as creative as you like. The design and images you use should be related to the concept of your artwork.

  1. Examples
    1. Historical examples and archives of machines
      1. The IBM Archive Inspiring machines from the history of the IBM
      2. Wired.com search for “machines”
    2. Formal disfunction
      1. Glitches
        1. 404, asdfg (careful), and wwwwwwwww by jodi.org
        2. Form Art by Alexei Shulgin
        3. Choose
        4. Going down (2002) by Claude Closky
        5. scrollbar (2002) by Jan Robert Leegte
        6. untitled scroll #2 (2007) by Chris Collins
        7. Scrollbars (2009) by Andrey Yazev
      2. Viruses
        1. Text Squeezer, Misspeller by John Maeda
        2. degenerative by Eugenio Tisselli
        3. Generation Loss by hadto
      3. Bots and automation
        1. theBot (Shockwave plugin required) by Amy Alexander
        2. Eliza
        3. doctor Emacs Terminal psychotherapist
    1. Physical machines
      1. Life Writer by Christa Sommerer and Laurent Mignonneau
      2. Dupage and Department of Rhythmanalysis: On Location by Kevin Hamilton
      3. Alan Storey
      4. Arthur Ganson
    2. Functional online applications
      1. Visualizations and aesthetic representations
        1. Money Counter by John Maeda
        2. Eternal Sunset
        3. String Art Generator by Alexander Henken
        4. wordle.net
        5. Many Eyes
      1. Social networking
        1. I’m a Designer And…
        2. Anycast Thought Stream
        3. http://twitter.com/
      2. Tools
        1. Stickyscreen
        2. Right Now, What Are You Doing?
        3. Internet censorship in China: greatfirewallofchina.org and Website test
        4. Favicon Maker and Pixel Maker by Shahee Ilyas
      3. Conceptual and one-offs
        1. Subservient Chicken
        2. SurvivaBall by The Yes Men
        3. Augmented Reality Smart Grid and Threadless proposition
    1. Examples by Owen Mundy
      1. Keyword Intervention
      2. You Never Close Your Eyes Anymore
      3. Automata