Visualization of orbital paths and polar coordinates

A-Trak & Lex Luger deranged city

A travel to a deranged city. A city immersed in chaos, bad publicity and broken souls. Directed by Nathaniel Brown & Gustavo Torres. 2014.

Interactive Kinect Videowall

Interactive Kinect Videowall made for CUBO (Unipol). People can interact just with movements. fuse* interactive.

Generative appearance for the Cape Europe

Generative appearance for the Cape Europe. The result is a generative appearance that not only brings movement into the control system of the building, but also online, offline, cinematically occurs at the opening of the house and as an interactive surface in the dialogue with the user.

Strukt was commissioned to design and program an interactive folio for the „Space“ exhibition at the Technical Museum in Vienna (technischesmuseum.at/ausstellung/space). Baroque engravings showing historical representations of the Earth and the solar system were used as source materials. These engravings represented a mix of scientific facts known at the time, mythical creatures and an all-powerful God presiding over it all. The folio was part of an elaborate exhibition, which dedicated more than 600 m² to the subject of space in all its facets. Visitors of the exhibition can browse through the pages via a gesture-based interface and get information on the different engravings and their authors. Hotspots hovering on the left side of the page can be triggered to zoom in on a specific spot on the engraving. This way the visitor can experience the whole richness of details of the engravings. The description of the selected area and its historical and thematic significance are displayed on the right side of the folio. The digital folio is bilingual, easily upgradeable and content can quickly be changed. Source

Motion Ui Design Principles

This blog is a quick look at some simple Ui motion design principles.  There isn’t too much documented about this area of mobile ui design and I thought there would be some value in expressing my views.   From what is documented already I urge anyone interested in ui motion to check out Pasquale D’Silva http://psql.me/ and Johannes Tonollo’s meaningful transitions http://www.ui-transitions.com/#home.  

Also make sure you bookmark http://littlebigdetails.com and http://capptivate.co.  (A special thank you to Capptivate.co who allowed me to use their captures below).   

These basic principles I’ve outlined focus more on the what and why, rather than the how to of motion / animation.  With the increasing emphasis on motion (largely thanks to the more paired back design of iOS 7) its important that it is implemented with the same integrity and purpose as all the other aspects of Ui design.  With the exclusion of skeuomorphic design there is now a freedom for content to behave in an unrestricted manner.  Gone are the awkward and sometimes absurd transitions that appeared to break all laws of their pre-defined physical environment.  Now the space has opened for there to be a much richer identity and defined language or landscape to mobile Ui and motion is very much an integral part of that.

Personality.

The most obvious principle is that any motion or animation should be of the highest standard possible.  Apps should look at going beyond “out of the box” motion solutions and making something bespoke and truly engaging.  Within the app the motion should convey a distinct character, whilst keeping a clear consistency throughout. Behaving in an expected manner will help maintain a stable relationship with the user keeping them engaged with experience.  

 http://capptivate.co. https://twitter.com/CapptivateCo

Paper Makes use of a scale overshoot through out the app, giving it a clear and distinct character. 

 http://capptivate.co. https://twitter.com/CapptivateCo

Dots carries through a very relaxing inertia which is prevalent through all aspects of the Ui.  Again making it definable against other apps.  

Orientation.  

Motion should help ease the user through the experience.   It should establish the “physical space” of the app by the way objects come on and off the screen or into focus. It should aid the flow of actions, giving clear guidance before, during and after.  It should serve as a guide, keeping the user orientated and preventing them from feeling lost, reducing the need for additional graphics explaining where they are or have been.

 http://capptivate.co. https://twitter.com/CapptivateCo

Yelp shows a great example of drawing focus with a intelligent and well crafted animation.

Making keeps the user orientated when drilling down into a category with a simply elegant transition.

National Geographic keeps the user aware of where they are and have been with a good use of 3d perspective. 

Context.

Motion should give context to the content on screen by detailing the physical state of those assets and the environment they reside in.  Without the restrictions of skeuomorphism the ui is free to behave in any manner with out seeming contradictory to its pre defined environment.   Adding a stretch or deform to an object or applying inertia to a simple list scroll can make the experience much more playful and engaging.  

 http://capptivate.co. https://twitter.com/CapptivateCo

Responsive.

Motion should be responsive and intuitive.  It should react in a way that reassures the user, rather than surprises or confusess them.   The reaction of the ui, to a users actions, should be complementary and comprehensible.

 http://capptivate.co. https://twitter.com/CapptivateCo

Emotive

It should evoke a positive emotional response, whether that be comfort from a smooth scroll or excitement because of a well executed animation transition.

 http://capptivate.co. https://twitter.com/CapptivateCo

Restraint.

Steer clear of distracting or even confusing the user with too much animation, Subtlety is key.  It should be used to maintain or help focus.  Not take it away.  Also don’t over elaborate aspects such as screen transitions. This becomes increasingly frustrating to the user over time.  Or if they are simply left waiting for what seems like “forever”. (there are no examples of this as its a not to do - and i’m not in the habit of kicking peoples work in the nuts)

Source

Boris Chimp 504 work in progress. Exploring Leap Motion as an audiovisual instrument. Leap data captured in Max with “aka.leapmotion” (github.com/akamatsu/aka.leapmotion). Source

IBIZIOUS ENERGY DRINK. Amnesia is a nightclub on Ibiza, Spain, an island famed for its colossal seasonal techno clubs. Amnesia will open for the season on June 15 and is promoting that fact with this bizarre — and hilarious — launch video that employs every 1980s advertising cliche ever seen. It’s all knowingly done, of course — there’s a reveal at the end. But still, kudos to ad agency Limon Estudios. Perfectly executed. Source