LFM Blog

Here you could perhaps write a short paragraph about yourself or the brilliance expressed through your writing. Doesn't have to be anything long but it should be exciting!

The future of user interface part2.

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

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.

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

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

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