multimedia expereince

Stimulant featured in Communication Arts

By | design, gergwerk, gui, multimedia expereince, portfolio, Stimulant, touch screen, Video | No Comments

I am very proud to say a handful of the projects I worked on over the last few years are being recognized in Communication Arts. Read the full eight-page article here: Stimulant: The San Francisco-based experimental studio brings dreams to life through digital interactions.

Here is sneak peak of the projects I worked on that are featured in the article:

MX: project two final

By | multimedia expereince, MX | 4 Comments

alas, working wire frame website.

you can view the image, or better yet, click for live site!

when thinking of the design for my site, I wanted the navigation minimal, very easy to understand, and be accessible at all times. the focus should be about my work, my achievements and information, not ornate elements that take away, or distract, from the them. one thing i am going to work on immediately is centering the content as apposed to having everything reside on the left side of the screen. during the process of making this site, i am most proud to remember how to build css document, and attach actionscript 3.0 to smoothly scroll through the images. i built this all myself! i had some help to figure out the scrolling images, thanks to josh, ian and michael dead man may. i struggled most with considering what i am capable of producing, and what i originally had planned the website functioning (keyboard functions that would toggle on and off navigation and flip through content). im not exactly sure what i learned through the process. it takes me a while to reflect upon experiences to pull out what i really learned…but if i had to say what i learned, it’s that everyone has their own way of building these things (websites through css and actionscript). nobody is wrong for building it differently, just find out what works best for you and use it to the best of your capability. apply what you know to anything, even if what you know is just a little.

MX: “the screen and the body” part IV

By | multimedia expereince, MX | No Comments

response to pp 103-115 the screen and the body

new concepts learned in the passage:
p 104.
“the body must be fixed in space if the viewer is to see the image at all. from renaissance monocular perspective to modern cinema, from kelpler’s camera obscura to nineteenth-century camera lucida, the body has to remain still.”
to really view an image, the user must be still. if someone is moving, they might catch a glimpse of the image

p 106.
“in one of the earliest depictions of the camera obscura (dark chamber), we see the subject enjoying the image inside a tiny room, oblivious to the fact that he has had to imprison himself inside this ‘dark chamber’ in order to see the image on the screen.”
a majority of the pages talk about how user is trapped by the devices she uses. in early photography, portrait shots took minutes to expose. Photographers used ‘various iron clamps, reminiscent of torture instruments, to hold the subject in place…a voluntary prisoner of the machine in order to see her own image’. in cinema, viewers sit in a dark room, face forward and cannot talk to enjoy the experience. we are restricted my sitting down and facing forward. you are not completely contained—you could walk out of the theater and miss the rest of the film. Virtual reality devices continue immobility by ‘fastening the body to a machine, while at the same time it creates an unprecedented new condition by requiring the viewer to move.’ it’s a very interesting contradiction. using virtual reality in order to have ‘user experience’, they must hook themselves to a machine, limiting mobility. in the device, the user is able to control camera angle and move through space as if they were walking. this, the most constricting device, allows for most user control in the experience. when designing websites, we as designers need to understand who our audience is and what kind of experience we are allowing them to have. a more exploratory site allows for more user freedom and should perhaps be more experimental with navigation or aesthetic. the opposite is said for a site where people know what information they are looking for. when reading a book, we think of the experience as linear, the author has control in pacing. in actuality, the reader is completely free to flip through pages, spend as much time on any page (pacing) or decide if they want to finish the story. On the other hand, film/motion prevents users from controlling these things because each scene and its pacing are already created for the user to sit back and reflect upon.

technology both hinders and facilitates freedom at the same time. although we sit at a desk in a particular room to use a computer, we are able to explore much more information quickly, as opposed to physically walking around in a library to search for specific books. In class, I’m able to sit at my desk and get the same, if not more, information from the internet than if i was walking through a library sifting through many books. although we are restricted by sitting at a table, the possibilities of communication can be as much or greater than ‘real life’. As a user, I am also able to stay in contact with people over long distances much easier with the aid of technology. not only are we being restricted by computer screens, but now smaller electronic devices such as mp3 players and cell phones. to contradict an above sentences, i am able to connect with users far away, but this makes me neglect the people around me. take for example, bus riders. they sit next to one another, but usually spend the bus ride home on their cell phones talking to others that aren’t there, or playing music on headphones that tune everyone around them out completely. perhaps we should choose a time and a place to use electronics for the advantages at the appropriate time. when someone is sitting next to you, why not talk to them? if you’re sitting home alone, that might be a more appropriate time to converse with someone on the computer or phone.

because of cell phones, we are able to ‘be in touch’ and always ‘plugged in’. it’s a good thing if i need someone right away, i know how to get in touch with them. on the other hand, if these technologies make it more difficult to enjoy a nice vacation. when i went on vacations with my family, my dad would always have to take calls from work. this didn’t allow him to relax, like he should of been on his time off. even these small gadgets restrict us.

MX: “the language of new media” part III

By | multimedia expereince, MX | One Comment

response to pp 94-103 the screen and the user, a screens’ genealogy

p 94. “a computer monitor connected to a network becomes a window through which we can enter places thousands of miles away. with the help of a mouse or a video camera, a computer can be transformed into an intelligent being capable of engaging us in dialogue…coupled with the computer, the screen is rapidly becoming the main means of accessing any kind of information, be it still images, moving images, or text. we are already using it to read the daily newspaper; to watch movies; to communicate with co-wrkers, relatives, and friends; and, most important, to work. we may debate whether our society is a society of spectacle or of simulation, but, undoubtedly, it is a society of a screen.”
no matter where i look, i’m confronted with a screen. cell phones, computers, car screens, electronic billboards, televisions, mp3 players, hand-held gaming devices, in grocery store isles, menus, and air port flight screens to name a few. I don’t think i’ve grown up without a screen ever. I remember having a dos laptop i could play wheel of fortune on. i sometimes won a boat.

p 96.“although the screen in reality is only a window of limited dimensions positioned inside the physical space of the viewer, the viewer is expected to concentrate completely on what she sees in this window, focusing her attention on the representation and disregarding the physical space outside. this viewing regime is made possible by the fact that the singular image, whether a painting, movie screen, or television screen, completely fills the screen. this is why we are so annoyed in a movie theater when the projected image does not precisely coincide with the screen’s boundaries: it disrupts the illusion, making us conscious of what exists outside the representation.”
futuristic films and gui prototypes (like the microsoft sustainability video) show the content being accessed from all sorts of surfaces. i’m not exactly sure if they intend to make every surface a screen, but it’s interesting to be able to move content from a monitor to a table top by motion of dragging. i believe that’s why movie theaters are completely dark, to minimize the area around the screen, so the user is able to have complete focus on the film. if someone’s cell phone rings, or we can see the cell phone illuminating, both our auditory and visual senses are pulled out of the ‘picture window’. so turn of your damn cell phones during a movie!

p 97. “no single window completely dominates the viewer’s attention. in this sense, the possibility of simultaneously observing a few images that co-exist within one screen can be compared with the phenomenon of zapping—the quick switching of television channels that allows the viewer to follow more than one program. in both instances, the viewer no longer concentrates on a single image.”
this is evident within my studio all the time. i walk by and see students working in photoshop, have their emails open and are watching a dvd, all at the same time. other students use the ‘spaces’ function, which allows them to toggle between screens on their computer. even when i have my internet browser open, i constantly switch between tabs and screens while other pages are loading. i guess my generation sure hates to wait.

p 98. “in 1882, unmanned photo balloons were already in the air; a little later, they were joined by photo rockets both in France and in Germany.”
interesting photography was used for such tasks!

p 99. “with radar, we see for the first time the mass employment (television is founded on the same principle but its mass employment comes later) of a fundamentally new type of screen, a screen that gradually comes to dominate modern visual culture—video monitor, computer screen, instrument display. what is new about such a screen is that its image can change in real time, reflecting changes in the referent, whether the position of an object in space (radar), any alteration in visible reality (live video) or changing data in computers memory (computer screen). What this means is that the image, in a traditional sense, no longer exists!”
i found this the most interesting tid-bit in the reading. i knew computers were being developed around the 50’s and 60’s, but i never applied the notion that radar was the first screen based object! niiiiiice. i then ask myself the question, “Are most technologies a product of fear/war?” history of internet.

desperate times call for desperate measures.

MX: design wireframes

By | multimedia expereince, MX, website, website design | No Comments

sketches, foo.





the problem i am facing deals with legibility between navigation and full size images. if i use a white box to place behind the nav but in front of the image, you loose a bit of the image. if i don’t, i loose the navigation if my image has a black background. it’s also hard to find images that are sized 1024 x 768 exactly. back to ze drawing boards.

MX: the interface, part I & II

By | multimedia expereince, MX | No Comments

PART I of the Interface, I found it hard to comprehend a lot of the writing because of the vocabulary they were using. i was able to find some very interesting ideas later in the reading.

p 65. “hierarchical file system assumes that the world can be organized in logical multilevel hierarchy. in contrast, a hypertext model of the world wide web arranges the world as a nonhierarchical system ruled by metonymy. the interface brings with it strong messages of its own. (cut and paste operation)”. p 77. “its more accurate to think of the new media culture as an infinite flat surface where individual texts are placed in no particular order. this implies a lack of hierarchy.”
this concept seems overlooked in all my years at the art institute. as designers we strive to create a visual hierarchy in any media we work in. The graphic user interface we encounter in the operating systems of our computer uses a great designed (mac at least) hierarchy structure to house our folders. On the other hand, the internet is in no way based on any hierarchical structure, but rather a free flowing entity of ideas and thoughts that can be called upon at any hour of the day. we as users make these topics more important to us based on what we look at on a normal basis. the funny thing to me is, in this non-hierarchical digital space, each page we look at (based on our own interests) is designed with hierarchy in mind. it would be very difficult to navigate through lets say, a news website (cnn), if it weren’t for the hierarchy used within the site itself. although someone might stumble onto my portfolio website in a ‘non-hierarchical’ way, the website that i have structured is indeed, designed with hierarchy in mind—for the user.

p 66. “the user performs all sorts of activities (trading stocks, searching the web, analyzing data, playing computer games) only using the same few tools and commands: a computer screen, a mouse, a web browser, a search engine, cut, paste, copy delete, and find commands.”
i sometimes think of this idea when i look at the vast amount of different things my friends all do with computers. it’s a tool that we all use differently. in desgin class, we use it as a tool for creating our ideas. friends from home use the computer to play video games and store music to play at parties. the computer is now used as device for the dj to store and play up to 50 times the normal songs they could bring to a party using vinyl records. it’s all according to context. each person uses the computer for their own personal reasons.

and something later in the article made me realize the computer is not just a tool for the things i mentioned above.

p 69. “by the end of the decade, as internet use became commonplace, the computer’s public image was no longer solely that of a tool but also a universal media machine, which could be used not only to author, but also store, distribute and access all media.”
people are able to access information worldwide, and save the things they are interested in to create their own ‘morgue’. we are also able to store ideas (word documents) and music onto our computers. we can then later call upon these files to refresh and distribute the ideas to other users or for personal contemplation or enjoyment. the things we collect might only seem like a folder of ‘cool stuff’, but are we really documenting and creating the culture of our times? based on the content i have saved in the past, and what i am currently saving, you can see a difference of information and stylization i chose to keep. this shows my documentation and evolution of culture through my eyes.


p 78. “the printed word tradition that initially dominated the language of cultural interfaces is becoming less important, while the part played by cinematic elements is becoming progressively stronger. this is consistent with a general trend in modern society toward presenting more and more information in the form of time-based audiovisual moving image sequences, rather than as text. as new generations of both computer users and computer designers grow up in a media rich environment dominated by television rather than printed texts, is not surprising that they favor cinematic language over the language of print.”
although films have been a famous past time for america and other parts of the world, my generation has always grown up with television and computers. i tend to think we are able to pack in more information and ideas into a time based event and let the viewer sit back and ponder these messages in a shorter time, as apposed to taking a large amount of time reading the same ideas in books. what happens when someone like myself is a slow reader? this kind of ‘entertainment’ can become very informative. i think images can transcend easier across language barriers as apposed to text as well. this is why there are icon systems being used for worldwide hubs (airports/olympics etc)

“p 80.
another feature of cinematic perception that persists in cultural interfaces is a rectangular framing of represented reality. cinema itself inherited this framing form western painting. since the renaissance, the frame has been acted as a window onto a larger space that is assumed to extend beyond the frame…p81. just as a rectangular frame in painting and photography presents a part of a larger space outside it, a window in HCI presents a partial view of a larger document. but if in painting (and later photography), the framing chosen by an artist is final, computer interface benefits from a new invention introduced by cinema—the mobility of the frame. …a computer user can scroll through a window’s contents.
p 83.
in video games, there are even cinematic cut scenes to set mood, establish a setting and introduce the narrative.
p84. this switch also made virtual words more cinematic, as characters could better visually integrated with their environments…the user can continuously adjust the position of the camera.”

new idea of cinema is now virtual reality games that users are able to explore within themselves, creating their own viewpoints and cinematic scenes through game-play. this further expresses the idea of the user vs. creator. the creator allows as much freedom as he/she wants for the user to participate in. depending on context and audience, sometimes the user is almost in complete control, within the restrictions of the creators code.

by using conventions of film from the 20th century, artists are able to create new worlds that users interact with. more and more emphasis is being placed on user interaction, as opposed to creating a semi-linear experience. as designers creating websites, there is a time and place to switch between a linear and non linear based interactions. those moments are decided when A. a user is able to go to any part of the website (nonlinear) and B. a user watches the order of images that I, as the artist, have placed in a particular spot on a timeline.

pg 90.
“a screen combines two distinct pictorial conventions—the older western tradition of pictorial illusionism in which a screen functions as a window into a virtual space, something for the viewer to look into but not act upon; and the more recent convention of graphical human-computer interfaces that devices the computer screen into a set of controls with clearly delineated functions, thereby essentially treating it as a virtual instrument panel. now it becomes a different number of definitions-opaqueness and transparency, image as illusionary space and image as instrument for action.”

picture plane vs picture window also exists within print media, not just the screen. paintings and photographs use transparency and opaqueness to look past the picture plane into the ‘window’ of the illusion of a greater space. anything that might be on the lens (a piece of dust) that was printed in the photo can pull you out of the window and make you look at the picture plane. a caption under the photograph or painting can also pull you out of the greater space (picture window). letting the user choose camera angle to explore the greater space not seen within a still painting or photograph is a great benefit how the screen functions as new convention.

one of the more interesting things I read:
pg 91.
consistency principle- dictates that menus, icons, dialogue boxes and other interface elements should be the same in different applications…in contrast, modern culture stresses originality: every cultural object is supposed to be different from the rest, and if it is quoting other objects, these quotes have to be defined as such. cultural interfaces try to accommodate both the demand for consistency and the demand for originality.”
this is very true for what we do in class. how different can we be but still use normal conventions not to confuse the user? as designers, we also have to decide when it is appropriate to use new conventions and when to use old ones. if the purpose of the site is to explore, perhaps using new methods and naming conventions would be ok. if we as designers are creating a site in which people know what they want, it’s best to use normal conventions to make their search easier.

I will leave you with two great quotes from the end of the passage.

pg 93.
“it is one thing to use a computer to control weapons or analyze statistical data, it is another to use it to represent cultural memories, values, and experiences.

p 93.“we are witnessing the emergence of a new cultural metalanguage, something that will be at least as significant as the printed word and cinema before it.”

MX: website idea wireframes

By | multimedia expereince, MX, portfolio, website, website design | No Comments

to begin, the first screen shows the navigation (info/work/resume/contact) – and a sub navigation (one/two/three) with the first ‘artwork’ (ein) in its rollover state.

the screen looks red. the red stands in as the work itself. use your imagination and pretend the red is my work of art. it’s a full screen image, thus maximizing viewing pleasure.

using keyboard commands, you are able to toggle on and off the navigation, leaving what’s important (the work) left full screened. you are then able to use the arrow keys to sift through the rest of the work (different documented angles) in that section (ein), without having to pull up the navigation.

two.simple navigation ribbons down. the work is shown as a full bleed image (shown as abstract color photo)

press “i” to get the information about the project shown. when the letter “i” is released the information box disappears.

MX_design directions

By | design, information architecture, multimedia expereince, MX, website | One Comment
process post so you people know i ain’t slackin’ foo! the goal is to come up with three variations of navigation, wire framing, and informational architecture that is unique but effective. i’d say we hit the nail on the head.
this wireframe depicts the way the recording device would work on the seed website. simple controls are used to start, stop, add tags, and publish your recording to your profile as well as the advice section of the site. what i was thinking could happen is the other users on the site could download the advice to their computer, or stream it straight to their smart phone (iphone for example) so they can hear the advice as they work in the garden. this saves you many trips to your computer and back outside. it is also a way for the content to be accessed to more than one platform (computer to phone).
wireframe for an ‘amount calculator’ for a smart phone. it allows you to predict how much of a material you will need for the space you have in your garden.

wireframe showing uploading images straight from your phone to your profile or uploading images through your camera to the website. it also shows up in the ‘recent picture’ section of the site automatically. you are encouraged to tag your images so others can narrow their search to more specific results.
this next device is a static camera you attach to your house and it takes a picture in the same spot at the same time every day. the image then is uploaded straight to the picture section in your web page that can be played out in a stop motion. you’re able to see your progress day after day in a quick movie. the more you work, the more people are able to see your achievements.
many iphone applications for the ‘on the go’ gardener. the wireframes show how the transitions from one screen to the next. the arrows indicate what your finger is ‘touching’ on.
after drawing these wireframes and giving the information architecture of the site some serious thought, i started planning how the content and information should be displayed for the users’ benefit. i thought about using the keyboard keys to retrieve navigation elements for the website. we use our keyboards so much, so why not integrate them into websites so we don’t have to use the mouse click. you could move seamlessly from typing a comment on someone’s page then straight to a different page on the website with a simple key command. it’s something i use every day when using photoshop, illustrator, indesign, and after effects. it saves so much time and you will become used to it with muscle memory. i also drew the beginning stages of having content inform the design as well as a customizable page that allows the user to change column width and content on their profile page.
as i was just saying, the user should be able to have (almost) complete control of the content as well as how they interact with the website. it’s going to be the wave of the future. i designed this infrastructure based on the idea that any column width and content box can be added, moved, sized and placed anywhere on the gardening website they want. some things should be kept constant, so the user knows they are still on the gardening site. some things to keep constant might be typefaces, icon system, and our seed logotype.
this sketch shows some different variations of different sections on the website.
here is what i designed based on those concepts. each white area is able to be scaled down or up, moved to areas of the page that are most important to the user. they would be able to create one, two or three column sections to hold the information.
what happens if a user wants to see advice about growing vegetables only? what’s great about this is the idea that different elements from different parts of the site (like this tips/advice section) could be added straight to your portion of your profile. now, instead of navigating to the tips section, they can add the vegetable tab straight to their profile. it’s constantly updating, so new information may seamlessly be streamed onto her profile, without having to go to the tip page. you are also able to move any section of the site up to the main nav bar, if you feel it most important.

a view of a ‘market’ page where users are able to search for supplies/plants/flowers and buy them from the site.

iphone app for layout (1)
wireframe for the iphone app. you drag the icon to the light colored area to activate it (as opposed to clicking it). this might be more natural for the user on the iphone, considering it’s a touch screen device.

the white bar indicates the hit state

another website layout is wire framed here.
the main point to this structure is to have the content of the site be the design. the main page consists of large ribbons tabs. each ribbon is a section of the site. what you see on each ribbon is the newest information (constantly updated by other users) for that portion of the site. for example, on the tips ‘ribbon’, you’re able to see the newest tips users like yourself are writing. they update in real time, which means when someone writes it, it appears on the main page. this allows the user to have an overview of what’s happening in each section of the site, without clicking through each page. what happens if you want to read more from the tips page? when the user wants more information, they can click on the big ribbon (or the links in the ribbon) which slides you to the tips page. the other main navigation remains as condensed ribbon/tabs on the left side of the page. this allows the user to navigate section to section without having to go back to the main page. after determining these rules, i asked my partner laura to design it. this is what it looks like after she added the ‘skin’.
effect of ‘sliding’ over from main page to the users profilepage.
the view of her profile page, with the navigation tabs on the left side of the screen (there will be titles on these tabs for updated versions).
and finally the tips and advice page.
it looks so great!
iphone app i designed for this structure.

white bar indicates hit state
last iphone design for concept three. laura designed everything about this version. can be seen in 1, 2 and 3.

view my partner laura’s process on her blog!

MX: final community gardening poster

By | design, gardening, multimedia expereince, poster | One Comment

here is the final output of the community poster. my teammate from Team Growin’ Together can be viewed here.

Here are some needs/solutions for the gardeners of the present and how our online gardening community will enhance their gardening experience.

need: how to connect gardeners from around the globe.

solution: we will host seasonal online growing competitions. they will be able to submit photos and video to the site to compete worldwide to see who has the best gardening capabilities. the winner circle then flies to a location in the world to celebrate together. each season the location will be changed. this will encourage gardeners to compete and stay connected with one another for growing tips.

need: what happens if i forget to properly ready my gardens for the different seasons?

solution: a phone service sends calls for seasonal changes. the message will leave them tips (trim your shrubs, save your summer bulbs, dry your flowers for the upcoming winter months) about what should be done to prepare them for the upcoming months. this way you can maintain a healthy garden year round. it will also give advice what can be grown during each season (did you know you can grow onions in the cold winter months?)

need: my garden looks fine, but how can i see what other people are doing?

solution: you are able to document the plants (and their sizes, how many times you water etc) in your garden from very specific to nothing at all. you’ll then be able to compare the ways people might grow their gardens. if you have the best stuff around, the other users on the community garden site will often visit your documentation to see useful ways to do what you do best. what about if you need help growing a particular green? no worries, you’ll find other users from around the globe who are growing the same thing, successfully or not. (based on a tagging system)

need: advice on how to save water.

solution: notifications can be sent to your phone with weather updates. it will show you the weeks forcast, and have prediction days when you should water, and when you can hold out. also allows you to purchase items, like a rain barrel, so you can use the (free) rain water to quench your gardens thirst.

need: help starting a compost

solution: advances with online mapping will allow you to see where to pick up free compost materials. the mapping will indicate where the businesses or homeowners live that hand out this useful material. you can then map that point on your phone to help you get there. did you know, companies like starbucks have free coffee grounds to use in your garden and compost?

need: help starting or growing a particular green in your garden.

solution: users can record their stories online about how they overcame a growing delimma. the audio or video file can then be downloaded or streamed through your computer, radio speakers and mp3 player. the person listening is able to look at their own lawn while hearing a persons voice advise them on how they succeeded with their garden. everyone loves a good story.

need: to know how much material to buy for the garden

solution: a calculator application for the phone will help find out how much of a particular material a person needs for the size of your garden. this might include how much mulch to buy, how big certain plants get after an extended period of time, what variety of plant is best for you in your climate or what tools a gardener need to use to successfully grow in their yard.