Levi Freeman's blog

The future of user interface part2.

Levi Freeman — Thu, 10 Jun 2010 12:10:07 +0000

This general consumer project your about to see is coming to stores this autumn/winter believe it or not. This is what minority report inspired. Microsoft currently calls this Project Natal, however in the next few weeks the name will be revealed. This device recognises gestures, movements and voice without the user needing to hold or wield a device.

Here is one of the ways it has been used.

How my format project started to take shape

Levi Freeman — Thu, 10 Jun 2010 10:48:00 +0000

It wasn’t long after I did some research that I remembered seeing a video last year that was up on youtube showing how a website was being manipulated by tilting the laptop. When i remembered the video a lightbulb lit up, could I actually make this, can it become tangible? Having just bought a new macbook pro, my first ever mac computer and finding out thanks to an app called macsaber, that the mackbook has an accelerometer made me naive in thinking that the video i saw last year of a laptop being able to control the website via motion should be possible with my macbook. Well that naivety paid off. I eventually found the video in question, the laptop was indeed a macbook pro.

From there i found myself looking at the firefox developer page and the mention of an api that “listens” to an onboard accelerometer in a device.

window.addEventListener("MozOrientation", function(e) {
                        /* 3 values: e.x, e.y, e.z */
                        }, true);

I don’t code, im a designer, i had no idea what to do with this. so i dug deeper, clicking on links, reading more blog posts and i came across some demos.

The awesome demo: https://people.mozilla.com/~dolske/tmp/awesome.html by justin dolske

The spirit level demo: http://disruptive-innovations.com/zoo/accel/orient.html by Daniel Glazman

These demos formed the basis of my project. It took me a good couple of weeks to understand the code that enabled me to manipulate how onscreen elements would react to my physical motion.

I created a few demos myself and presented this at my crit review at LCC:

http://www.levifreeman.com/screen/page2.html

http://www.levifreeman.com/screen/page3.html

http://www.levifreeman.com/screen/page4.html (adapted glazmans demo)

People were amazed, so then i went to work at creating the final peice.

The future of user interface part1.

Levi Freeman — Thu, 10 Jun 2010 09:57:17 +0000

As part of my research into this project that started from my concept challenge of how we interact with websites, i embarked on researching emerging technologies and examples. I came across a whole raft of information and products (one of which i will purchase soon). Here is one of the videos i have been intrigued by.

It is a talk at TED by John Underkoffler who was the Minority report science advisor and inventor.

Researching and collecting imagery for format

Levi Freeman — Thu, 10 Jun 2010 09:44:28 +0000

I have begun steps to finalise the visual look of my interactive web experience by collecting imagery from various sites such as: Visuelle, typographyserved, ffffound and more sites.

I collected imagery based on my goal for a simplistic, clean, yet striking look. Here are a bunch of imagery i collected.

Make A triangle using CSS

Levi Freeman — Tue, 25 May 2010 23:56:25 +0000

I just wan’t to share this technique I have discovered. Creating a A triangle using only CSS.

Works for all modern browsers like Safari and Chrome. This works in IE8 and possibly IE7 as well.

#triangle {

width: 0;

border-top: 500px solid #000000;

border-left: 300px solid #ffffff;

border-right: 300px solid #ffffff;

}

Where you see #ffffff you should make this the same colour as your background colour and thats it! That is how you create a Triangle purely in CSS and HTML. No image files needed.

I will be using this in my format project.

points to remember:

For all sides of the triangle to be equal they must have the same value. i.e all 300px
the left and right borders should match the background colour
border-top determines the colour of the triangle

FireFox Nightly, save the day.

Levi Freeman — Tue, 25 May 2010 09:01:53 +0000

I have usually been quite used to Safari with its webkit engine. It allows CSS Transitions. Chrome runs webkit aswell, unfortunately gecko, FireFox’s engine, doesnt. Thats been abit of a problem. I had wanted a lovely website that comes alive with subtle animations, this is only acheived through webkit browsers…well not any more.

Firefox has released a Nightly build that allows some css transition abilities. So expect, at my demo, to have a more exciting website and interactive experience.

POWER OF TEN Night Photos

Levi Freeman — Thu, 20 May 2010 19:00:10 +0000

Last night, after a mammoth session in the library doing some research as I was leaving the building the big bright storage containers that make up the power of ten exhibition was lit up and alive in the night. The containers had lights that faded from colour to colour and luckily I had my camera on hand to photograph it all.

read on to see the photos.

click the photos to see them on flickr.

VCT Essay, websites, format, history, future

Levi Freeman — Thu, 20 May 2010 18:39:00 +0000

My VCT Essay is currently in the works. The essay greatly benifits my format project because what is written in the essay could also appear on the interactive experience.

My essay will talk about the history of the web, Tim Berners Lee’s instrumental part, how today it is part of our everyday life. I will also explore the devices that access and deliver the internet to us. I will analyse how certain things we do such as shopping, communication or consuming news has been altered by the internet and where it is for the best or for worse.

In the essay, I hope i can find the space to also discuss the aesthetics and design of websites, and how consortiums and conferences debate the way forward in terms of being able to style websites. I want to explore how gradually the level of control that we have with print is appearing in the process and markup language that designers use to build websites.

A key aspect is user input. How we interact. For years its been the keyboard and mouse but today we are seeing new ways such as project natal which is a form of Natural User Interface.

From the library I picked up a number of books:

New Media Old Media
The Future of the Printed World
interactive
Weaving the Web
Guidelines for online success

No text website.

Levi Freeman — Thu, 20 May 2010 09:47:41 +0000

A fellow friend and designer Stan Diers, wrote a blog post about a website he came across. It intrigued me since my format focuses on websites. Here the concept challenge was to create a website that challenged the concept of a normal website; taking away what we are used to seeing on screen, the familiar fundamental part of a website which is text. Text is what we read, what we click on what we process. However, what print can’t do websites can and that is to produce sound and a moving image so why not take away the text element and place the focus on sound.

Stan explains that the people at Frasier Muggeridge Studio in order to make “it possible they still had to find a way to utilise the space as any website do, so the idea was to visualise the sound of the speech text as coloured bars. Like this it shows the users the length of the speech/text as well as give colours and visuals to the pages.”

You can view the website here at http://buildingsound.org/

Stan goes on to analyse some of the problems that may arise by such a concept but also to appreciate the uniqueness of it, read more of Stan’s post here

Navigation

Levi Freeman — Mon, 17 May 2010 15:07:47 +0000

I don’t believe I have fully explained what I intend to create. Put simply, it will be a website or more accurately, an interactive experience that informs the view about screen based design and especially website design. The experience will centre on reading and understanding what is being told via movement of the screen.

Thus far, my idea has one major stumbling block. Navigation. My interactive experience as it stands gets interrupted my the need to put the screen down, click on the next link conventionally and then pickup the device again to physically interact with the next page.

While i am a designer, not a JavaScript coder, I have not found a way to leverage the orientation of the screen to trigger a navigational link to the next page.

In the meantime, I have come up with an idea that at least makes going to the next page more natural and interactive and doesn’t deject from the experience but rather extending it.

I will create a demo page as explaining it could be a little bit difficult. Essentially the user will have to rotate the screen to reveal what link to click on to proceed to the next page. So it is a puzzle! The way it reveals will be to do with colour and angle.

Stay tuned to see how this works.