Phase III Presentation by Grey Vaisius and Justin Alm

1. PHASERS III
PRSENTATION

2. delight

3. A COLLECTION
OF IDEAS

4. LOOK AT LITTLE BITS
SEE THE BIGGER WHOLE

5. ,
NEW EXPERIENCES

6. DEVELOPMENT

7. BASE
LANGUAGE
CULTURE

8. 49
BASE LANGUAGE CULTURE
SERVERS—AS HARDWARE GENESIS—THE ARTIFICIAL(AMOEBA) TEXT—TWITTER (COMPRESSED)
SERVERS—AS LOCATION GENESIS—THE FLEXIBLE ABSTRACT(SEMANTICS) TEXT—FORUMS (ESSAYS)
CONNECTION—AS LINES/TRAIN/LIFE/THOUGHT SEARCH—HACKING (INSPECT ELEMENT) TEXT—FUNCTIONAL (EMAILS)
CONNECTION—AS DISTANCE SEARCH—READING&WRITING (BASE LANGUAGE) TEXT—IMAGES (ASCII)
CONNECTION—AS TIME SEARCH—PUBLISHING TOOLS (TEXT-EDITOR) IMAGE—EMOTIONAL (TEXT & IMAGE)
SCREENS—AS WINDOWS SCREENS—AS HARDWARE REPRESENTATION—IDENTITY (METADATA) IMAGE—STORIES (FACEBOOK)
SCREENS—ARE CHANGING REPRESENTATION—STRUCTURE (HTML/CSS) IMAGE—COLLECTIONS (FLICKR)
SCREENS—AS THE THE PAGE (THEY AREN’T) REPRESENTATION—IMAGE (HTML/CSS) IMAGE—CURATED (DESIGNSPIRATION)
SCREENS—AS OPAQUE/TRANSPARENT CODE—EXPERIENCE (CSS/JAVASCRIPT) IMAGE—UNREADABLE (BY MACHINE)
THE MOUSE—AS A GHOST HAND CODE—EFFICIENCY (PHP/XML) IDENTITY—IMAGERY
THE MOUSE—AS TRANSLATION CODE—EVOLUTION (SEMANTICS) IDENTITY—CONSTRUCTED (FACEBOOK)
THE KEYBOARD—AS RESTRAINT CODE—LIQUID (FLEXIBLE STRUCTURE) IDENTITY—YOU (BANKS, ETC)
IDEAS
THE KEYBOARD—AS A TOOL TOOL—AS ISSUE (TECHNICAL QUICKSAND) IDENTITY—ANONYMOUS
THE KEYBOARD—AS AN ABSTRACTION TOOL—AS HUMAN (MOCK–UPS) RELATIONSHIPS—ANONYMOUS
THE KEYBOARD—AS LANGUAGE TOOL—AS DIGITAL (HIDDEN WORDS=MEANING) RELATIONSHIPS—LIES
— NATURAL—THE COLLECTIVE (MEANINGFUL CODE) RELATIONSHIPS—TRUTH
16 — RELATIONSHIPS—LOOSE (NETWORKS&FACEBOOK)
16 —
17

9. IMAGERY

10. THE BASE1. servers-as hardwarea personal/public archive (The magic archiveServers are the bottom level infrastructure of the internet. The hardware stores data. In fact, the hardware stores all of the data you have ever accessed on the internet. Because of the structure of the internet servers act as a sort of magic archive, an
archive accessible from anywhere in the world.This idea completely changes the act of archiving. Instead of something that is orchestrated by a few individuals who then make decisions about what should be preserved, anyone can begin their own archive on a whim. In practice this is the most consistent recording of human
experience and emotion in history.2. connection-as lines/train/life/thoughtmicro to macro and our understanding of space (dust particle - the infinite of space)Inside usRomans built roads to connect people together, speed up the delivery of mail, and expand the reach of the empire. In the same way, the Internet has been
spread out before us as a vast system of fibre optic cables and satellite signals that bring us together. These lines of connectivity enable us to exchange ideas, money, build relationships, and connect with people we can’t see face to face. These lines of communications change our perspective on space and time.3. connection-as
timeteleportation and you (Spock from Star Trek fading into pixels)1000km in a secondTime is distorted. You can pay your bills, and in another second be looking at pictures by Fred Herzog, in the next heartbeat you’re virtually standing outside the Empire State building dragging the camera upwards. You can live out
½
several lives in the comfort of your basement. Or wait, is it the same?4. Screens-as hardwareSize does matter (visual idea - naked man with an iPad over his groin)You can’t trust your deviceThe pixel has always been the smallest unit in screen- based design. Because it’s been indivisible, it is the concrete unit of measurement
among screen-based designers. The phrase “a pixel is a pixel is a pixel” has been adopted to help print designers not used to fixed-screen density understand the concept. Because of this consistency, web designers have adopted pixels over points and other units to build websites.Now that hardware is changing and pixel
densities are growing, pixels are struggling to find relevance as the stable unit they once were. Browser zooming complicates the matter further. But what is a pixel on high resolution devices today? Why does the 640px × 960px iPhone 4 claim to be 320px × 480px in the browser? The truth is that there are two different
definitions of pixels: they can be the smallest unit a screen can support (a hardware pixel) or a pixel can be based on an optically consistent unit called a “reference pixel.”[When it comes to deliberate communication, how then do we craft our messages for a medium that liquifies content.]- adapted from Scott Kellum5.
Screens-as the page (they aren’t)If you’ve never watched early television programs, it’s instructive viewing. Television was at that time often referred to as “radio with pictures”, and that’s a pretty accurate description. Much of television followed the format of popular radio at that time. Indeed progra1⁄2ms like the Tonight
Show, with its variants found on virtually every channel in the world, featuring a band, the talk to the camera host, and seated guests, or the news, with the suited sober news readerremain as traces of the medium television grew out of....I’d like to consider the web as a publishing medium, and 1⁄compare it with the medium of
printing, whose skills, design language and conventions influence strongly those of the web page. I’m not arguing for a moment that we should abandon the lessons learnt from hundreds of years of printing and thousands of years of writing. But I’d like to consider which aspects of print publishing constrain web based
publishing for no good reason....What’s the difference?The difference between radio and television is simple to express, but its implications are far from trivi-al. The difference is moving images. The difference between the printed page and a web page is similarly simple to state: printed pages are static, web pages are fluid.
What implications flow from this seemingly simple difference? Many web designers treat the fluidity of web pages as a flaw.I can’t just assert thevalue of adaptability. And I don’t need to. First, though, let’s ask what value is there in a page that isn’t adaptable? Printed pages are only fixed because they physically must be. You
might argue that a designer has the expertise and education to ensure the best appearance and readability. And that is very often thecase. But does it cover the situation where a reader has different levels of ability from the norm? How well does the design cope with a reader whose vision is not as good as that of most readers?
Or who has difficulty distinguishing between certain colours? How well does this one size fits all design philosophywork when your reader is not using a PC and monitor, but is rather using a TV based web browser, or a handheld based device?These are important facts about web publication that adaptability addresses, but
which are often ignored. Adaptability is a fact of the web. It is a constraint, a flaw, a bug if you choose tosee it tht way, or, I would argue a feature, a strength of the medium. It won’t go away, and I believe it shouldn’t go away.- John Allsopp6. The mouse-as a ghost hand (visual idea - arm that has a mouse for a hand)Just as we
look to the pen, pencil, brush, clay, etc. to help us achieve our creative ends, we now havethis ghost hand of the mouse. People use mice but you don’t really notice the mouse but essentially what the mouse is performing something that your hand can do.7. The keyboard as a restraint (visual idea - Just as print doesn’t translate
perfectly to the online publishing world, so it is with the development ofthe computer. Within our current system of web design and development, the keyboard as a necessary tool for the production of web environments. In reality, the amount of time it takes for a person to learn how to type effectively is a feat in itself. To
further complicate the problem, the keyboard was a carryover from the typewriter. Thus, when writing language for publishing to the Internet, which is in a different syntax from web-languages, we need a keyboard that is customizable for this type of writing. There’s no way around the problem. If efficiency is paramount, we
need the to morph hardware for itsintended use. The keyboard is for typing English. We need a code board.8. The keyboard as an abstraction (visualized in models of keyboards and models of fashion)Our hardware is a reflection of the language it was based on. The keys we press, we press in trust that our keystrokes will
activate systems the waywe trust that they will. How have we come to this place where we accept our understanding of the material we interact with. Somehow, we trust that this device can be used for communication. We now understand and trust the keyboard as a communication tool. Why can’t we make the same leap
with otherobjects? Part of this has to do with the glorification of the keyboard. They have constantly evolved to become like models in our lives. Some our sexy, some are chunky, some have make us feel good about our selves, while others make us feel inadequate. All achieve the same goals while some do it with morestyle
and finesse than others.THE CULTURE9. text-twitter (compressed)How can you sum up your thinking in 140 characters? This is thee constraint of the dedicated Tweet writer. Must chop your thoughts. #twittertext-functional (emails) (the email When I first used email, my friends and I learned quicklythat conversation
could be conducted quickly. This excited us. We would get out of school, run home, stare at the monitors in our parent’s basements, tying up phone lines, slowly download music, and replies to emails from our friends – who were doing the same thing we were. We had a new way to relate bynot having to speak to each other.
What a great way to deal with the awkwardness of our adolescence.Over time, this constant exchange of emails became tiresome. Although we had so much, we needed more. This led to a slough of instant messenger programs (i.e. ICU, MSN Messenger, AIM). With theseprograms we still tied up the phone lines but didn’t
talk over them. With ease, we could send .mp3 files, writing for school, and pictures we had scanned from our latest roll over film for art class.11. image-emotional (text & image) (visual idea - putting text in interesting places)There is an inherent disconnectionon the Internet between the text and image. The structure of page
layouts make it easy for the designer and developer to divide content so that images and text exist in silos on the screen. Image goes -> hereText goes -> hereThis separation removes much of the emotional impact that the print publishing worldexploits for the cover of magazines, book covers, double page spreads, billboard
advertising, etc. In this sense, the separation of image and text existed in the print world but it was difficult for the designer or printmaker to bleed the two over. On the printing press, the image plate had to be set amongst the blocksof letterforms. If you wanted a text over image, it would require a second pass on the press.
These constraints were time consuming and more expensive. The development of publishing software enabled designers to put text over image with ease. Suddenly, there were no constraints in exploiting the tensionbetween image and text.In relation to publishing on the Internet, we are in a phase of designers and artists
working to push the connection between image and text. As webpages are composed of boxes, or silos, much like the page layouts done on the printing press, the most common strategy for the designer isto let the elements stack on top of each other like building blocks. The problem with this is that the page is built like a
brick wall. The structure is evident. It looks stable but the emotional impact is sacrificed. For tension to be developed, we need a mysterious marriage between the elements. A commitmentbetween the image and text that confronts the reader of the webpage. A composition that speaks, “This is something you have not seen
before!” This is a world of opportunity for all who want to design for the Internet.12. image-collections (flickr) (visual idea - photos in the water)Image collections are a big partof web culture. As the Internet moved from a space where people could quickly share textual ideas, systems have developed, which initially were
designed as image database on search engines, that enables a user to store, share, or access other images with relative ease. Flickr was Yahoo’s revolutionary response tothe photographer’s demand for presence on the Internet. With that service, they took communicating over the Internet into new territory. No long were
people following each other because of the words on a screen. Rather, they were following each other based on visual language detached from text.With‘favorite’ imagery and the producers of that imagery, people were free to develop their own image collections. Flickr played off the metaphor of the photo-album but in
actuality, the wealth of images began to function as a memory bank. People were able to wander through the world based on location, ideas thatwere tagged on the photos, or through their friend’s updates. The tomb of someone’s life began to represent something more current. Just as news reporters are looking for the most
current imagery of an event, Flickr was beginning to represent someone’s day to day experiences.With the introduction ofsmartphones, the increasing quality of images on those phones, and applications like Instagram that enable someone to publish to multiple spaces online at one time, the collection of images has begun to
breakdown to resemble a stream of imagery. As compression decreases the file size of video, we willeventually have the TiVo effect on someone’s life. You’ll be able to look back on their existence to see any place and any time. The question is, will anyone actually do that?image-unreadible (by machine) (visual idea - img001.
jpg Google search / what celebrity do you look like most websites)Images are notimages on the Internet. When people search for a visual representation of something, the only way for you to find an image is if that image has text attached to it that offers a representation of that image. In this sense, we cannot offer an image to
find an image on the Internet. This is different in the case ofpeople, if the police want to find a person, they can show an image of a missing person to a number of people in the community. The function of human memory to interpret images enables the person to say quickly, they have or have not seen that person. The
difference between the human ability to know therepresentation of an image and the article intelligence ability to interpret software is the human ability to look at an image and quickly break it down by shape, color, composition, into the textural details of the image. The way most search engines work is to scan the entire
database for files that have been taggedto represent an idea. In this sense, we have not modeled the Internet to represent our own intelligence. Instead, we have created a system that overworks to find the things that are important to our search. No one would go through their entire memory to remember one thing.
identity-constructed (Facebook)(image idea - criminal rap sheet)What you place on Facebook is structured in a way to represent you the way Facebook chooses to represent people. The images you choose to place in your ‘profile’ images will be cropped and placed in a way that Facebook predetermined. The options for text
to fill yourdescription are a select list of things that Facebook has chosen for you to fill in. What happens if I want to shape my identity based on some other criteria?Considering the layout of social networking sites, the information the site gathers from people to form their page, and the ‘wall’ that can be found underanyone’s
profile image, the database of people’s ‘profiles’ starts to resemble a police rap sheet or a doctors bed side clipboard with notes that have been left over the past few days. If identity is formed through the act of doing things, shouldn’t we be taking charge of the complete representation, color, composition,WORDStypography,
image treatments, and all? This is the draw back of much of the services we use to identify ourselves and connect our lives to the lives of others. We have been provided a service as the sacrifice of our intentions.identity-annonymous (visual idea - the unknown outlaw in town)If you should choose,WORDSyou can be online
without people knowing it. There are space you can communicate with people and not be traced. This is what we believe. The anonymity of the Internet really exists amognst the general public. The reality is, the authorities have ways they can find you. The beauty of this anonymity is, we cancommunicate and share interests
in ways we have never been able to before. In this sense, this is the Wild West of the 21st Century. There are laws to reign in the expanse of new web-spaces but for the most part, people are able to able to use services and stake their claim on server space. relationship-lies (visualidea - print facebook profile and spray glue it to
WORDS
illustration board, get photograph shaking hands with stranger)We can learn a lot about human interaction from the Internet. When we meet people in physical space, we present a certain persona of ourselves. We have a profile we wish to portray, presentinformation we believe is valuable to the development a new
relationship, and have a face. Online, we only present the things we want people to see. There is less opportunity for our true selves to revealed to people we meet. If only we could curate our physical lives to the same extend as our digital lives. Thedraw back is, it is the inconsistencies of our physical lives that make life
wonderful. The curated perfection of our digital personas become dull and uninteresting. We someone messes up that curation, we quickly work on rectifying the situation.relationship-loose (networks & Facebook) (visual idea – cupid.comflirting. Setup a date?)We can go across the ocean to meet new people through social
networks. We can see out friends from high school, past significant others, connect with strangers who have like interests, or find a date for Saturday night. All of these social connections hide behind login IDs and passwords. People trust the systems of the Internet and take advantage of the opportunities to meet new people.
This leads to a looser network of relationship that didn’t exist in the past. The opportunity to date several people in one week now exists. We come together online as a community of people that are cool with hooking up. Take for instance Fuckbook.THE LANGUAGEgenesis- the artificial (amoeba) (visual idea – the origin
of all things)The big bang, two come together, development, from two comes another, lines crossing, plugged in, we have life, when two become one, there is an genesis of movement, a genesis of existence, the beginning of what will be. Tim Berners-Lee the godfather of our new world order somehow only valued at
$50million dollars.tools-handling (inspect element) (visual idea – the dissected human body objectified and the dissection of the body of the Internet objectified on the table)We are able to peel off the skin of the Internet through inspection. Just as this book functions to give people an understanding of our wrestle with
digital culture by zooming featuring smaller aspects of the whole system, so can we dissect other systems to get a greater understanding of the whole. Understanding how all the elements connect gives us a better understanding of the whole. It is up to us to inspect each element. There is no pain in performing this task with
the Internet.tools-publishing tools (text-editor)Rough in plumbing (under foundation)Main frame of houseFoundation (poured/block?)RoofSidingWindows/doors installationSheetrockCeiling: tiles or sheetrockCeiling fan/lightsPlumbingElectricalWasher/Dryer hookups & outletsCarpet, linoleum, tiles, hardwood
floor (installation & preparation) etc...Walls: paint, wallpaper, etc..on roof, sewer ventvent for hot water heater & furnace.Central air/heat - - cement slab for unit, hookups & vents through house to each room.All the tools you need to build a house.Text-editorDomainServer spaceFtp clientAll you need to build a website.
representation-structure (HTML/CSS)Within our culture, we have placed a significant value on symbols that the general public are not aware of: < > / $ ‘ “ { } [ ] ( ) : ; . # * - . These symbols offer a structure for text that constructs our pages. Knowing the meaning of these symbols empowers the individual to express his or
her self on the Internet. These symbols are the punctuation of the web designer or developer. Just as the writer needs to hone their craft of punctuation in the English language, we need to hone our craft and understanding of these symbols in web-languages.code-experience (CSS/javascript)If HTML and CSS present
structure for a page, we can consider Javascript the language that offers movements, interactivity, liquidity to online experiences. These are the verbs in the paragraph of language. They offer movement on the page. A deep connection for a consumer. A complication for the developer. They offer experience that simulates life.
They are the inevitable extension of language. Just as everything becomes more liquid through text, the digital world, and the non-structure of the page, so should there be a sub-language written for the control of these movements. When javascript says go, the elements go.23. code-evolution (semantics)There are standards
for web languages that will change over time. Just as the spoken and written forms of any language change to adapt to the flux of culture, so does the language used to compose communications for the Internet. What is considered the ‘header’, the ‘footer’, or ‘article’ of the page, was once not collectively understood in the
same way. This language is evolving at a faster rate than written English because it is so closely tied to technology. As we understand the technology of the web more deeply, we gain clarity in how we should be using English to structure our pages. This is a case of technology influencing language and language feeding back on
culture. The printing press influenced the comprehension of written English and functioned to standardize the application of language in visual communications. The Internet functions in a similar way but the semantics and language that is behind much of what the world sees, is not popularly understood.24. tool-as issue
(technical quicksand)How much technical know-how and application is necessary to effectively communicate a message on the Internet? For the web-designer, minimizing the application of technological development without sacrificing communication is of the utmost importance. Getting too deep into the code of the
webpage is never a bad idea but once the technical pursuit takes over the pursuit of effective communication, you find yourself in the grip of technical quicksand. In a sense, this is the result of technology hindering communications. Just as email has enabled us to connect and communicate with efficiency that previous
generations have not had the luxury of, we now can find ourselves in communication overload. The efficiency is lost and we are hindered by something that was once considered a luxury.tool-as digital (hidden words=meaning)When choosing to use the Internet for expression, you have to become comfortable with the
unknown. Often, the meaning we seek is lost. It is hidden behind the facade of a perfectly orchestrated page. It is only when we remove the layers of the facade we can see the true structure of what the Internet. The meaning is in the hidden. Just as we struggle to find truth in the physical world around us, we need to struggle
to unearth the truth of the digital world. As the digital becomes more integrated into our lives, we need to consciously struggle to understand this language.

11. E
CONCEPT

12. THE SMALL

13. “EMAIL EFFECTIVELY
MAKES COMMUNICATION
BOTH INSTANTANEOUS
AND ALMOST ENTIRELY
DISPOSABLE.”

14. “SCREENS ARE AN OUTLET, A
VIEWPORT. THEY SHOW YOU
WHAT YOU WANT TO SEE, YOU
CHOOSE AND THEY DISPLAY.”

15. THE BIG
STUFF

18. TAKE ME HOME

19. FORM

20. DIGITAL & ANALOGUE

21. TEXTURE
& IMAGERY

22. LEGIBLE
READING
TEXT

23. TECHNICAL

24. WE’RE COLOSER
THEN YOU THINK
a penny for your thoughts
—
SNAIL MAIL
A letter sent by mail, dropped in a
box, carried by the postman, sorted
by the mail clerk, flown by airplane,
these are all the actions in takes to
A SIZE
traverse the real, physical distance
between you and another. The in-
ternet compresses this distance. An
internet signal will travel from one
side of North America to another
in under a tenth of a second. This
effectively makes communication
both instantaneous and almost
entirely disposable. How many
thoughts can you compose in a
tenth of a second?
<11> </11>

25. <w>
NAVIGATION

26. I HATE TYPOGRAPHY
I HATE TYPOGRAPHY
I HATE TYPOGRAPHY

27. THE BITS
OF A BOOK

28. QUESTIONS?