Antenna Updates

Gavin Coyle

noreply@blogger.com (-) — Fri, 08 Apr 2011 14:10:00 +0000

• Workshop case study

http://gavincoyle.co.uk

WZO-049

02-2011

Wallzo (Darren Wall) is one of the few art directors still taking neo-modernism to the next level. If you lived in London during 2008 you are probably familiar with his designs; The Hot Chip Made in the Dark artwork decorated many a wall and tube station, a cut above the standard dreck.

So it was a pleasure to collaborate with Wallzo on a new site for the furniture designer Gavin Coyle.

The treatment is quite simple - a straightforward showcase of Gavin’s work (as it should be) - but this ostensible simplicity exists due to Darren's careful and skillful consideration of many details…

The site has been engineered in a thoroughly modern manner and works happily across a broad range of platforms from old (IE7) to new (iOS, Android). The biggest challenge was making use of the @font-face type system, a nascent evolving web standard which is still patchily implemented by some browsers. But it was worth persevering with; we like to think the clean Century Gothic typeface brought the design one step closer to a print-style standard of execution.

[~A] April 2011

AD: Gavin Coyle (Great Britain)
DIR/DES: Wallzo (Great Britain)
DEV: ~Antenna (Great Britain)

UI Paradigms

Sliding panels

Lightbox

Schematic

See more case studies
Next case study: Museum Studio

Browser Burn

noreply@blogger.com (-) — Tue, 15 Mar 2011 15:36:00 +0000

Antenna Research Fclty.

• Report (draft)

03-2011

“Some people just want to watch the browser burn”

Before

After

Wario Land YouTube viral marketing, 2008

Google Gravity - Mr.Doob / HiReS!, 2009

Katamari Hack - Alex Leone, David Nufer, and David Truong, 2011

Infinite Scroll

noreply@blogger.com (-) — Thu, 10 Mar 2011 14:11:00 +0000

• Report (Draft)

Antenna Research Fclty.

03-2011

Infinite Scroll

Scrolling - it's the modern pastime - We are all cyber-flâneurs* in the broadband age. It would be an interesting statistic to know how far a day one scrolls (perhaps an idea for a browser plugin or Daytum).

Infinite scroll is the web design practice of loading more content into the bottom of a page, so that an entire site can be viewed simply by stroking the mousewheel – the opposite approach to advert-heavy sites who split a short article across numerous pages to increase traffic.

Infinitely scrolling visual data dumps proliferate - Does it Float being a positive example, aswell as a number of Ffffound clones and its popularity in the galaxy of Tumblrs. Perhaps the mother of all scrolls is Google Reader, which turns any number of sites into one unending information superhighway.

How this simple mechanic affects the relationship between viewer and viewed is subtle. It's possible to consume huge amounts of imagery in a short space of time, like a whale feeding on plankton or Johnny-5 reading a book [00:55], deep in a twilight semi-conscious revery- internet addiction is a topic all of its own.

Arguably viewing content in this way is a cheap, throwaway experience, stripped of all context and rationale- but it’s also relentlessly modern, the closest thing to a Matrix-style brainpatch we have.

And this takes place within a wider arc; the transition from longer form blogging to tumble-logging, in turn replaced by Tweeting, is a somewhat frightening progression - the Antenna proposes Twitter's replacement to have a 5 word limit (140 characters being too long-winded), and this to be superceded by the one-word Twitter in a few years/months/hours time, whatever the current attention span is.

The web remains a frontier - unlike television there is no recognised code of transmission standards such as strobing effects or subliminal advertising, so innovators are free to invent new, marginally hazardous forms of consumption; Zap reading being a prime example. Perhaps one day scrolling could be regulated as detrimental to your family's health - take a stroll instead.

1. Scrollable Landscape (Jürg Lehni?)
2. Build studio's Tumblr

* from the French for “to stroll” - there's a pleasant resonance between 'scroll' and 'stroll'

Focus fade

noreply@blogger.com (-) — Wed, 09 Mar 2011 20:15:00 +0000

• Report (draft)

Antenna Research Fclty.

09-03-2011

Focus fade

A transition effect aimed at drawing all focus onto a hero graphic. Similar in implementation to a lightbox, it requires careful alignment of two layers to achieve a seamless crossfade.

The effect works in both directions; to pan out to reveal a whole page, or to zero in. The latter is hijack-like, and as with all floating panels or modal dialogs that overlay the page, should be used with extreme caution.

Apple.com (fade out)

MoneySavingExpert.com (fade in)

Museum Studio

noreply@blogger.com (-) — Thu, 13 Jan 2011 08:00:00 +0000

• Workshop case study

http://www.museumstudio.se

MUS-042

02-2011

Considering the population of Sweden is less than 10 million, the nation's cultural output far outways its size. Scandinavian design features a unique aesthetic; clean and simple, but too colourful and organic to be considered minimal.

From this mystical land comes Museum Studio. We’ve admired Anders Jander’s work (and curation at Temple of Light) ever since seeing a copy of his Museum Paper zine imprint, so were honoured to work on a new homesite.

The UI concepts evolved naturally through discussion and evaluation of the previous site, which also featured image-stacks, albeit static ones. The pop-open transition was quite tricky to develop but hopefully adds more character than a stock lightbox effect. The ’snake‘ layout of the opened projects also took a lot of careful tweaking to achieve the right amount of vertical space.

Despite the apparent simplicity of the engine, the image zooming coupled with CSS dropshadows pushed the limits of HTML's capabilities, so a fair amount of optimisation was required.

A simplified mobile version was created too.

Keeping the graphic treatment to a minimum has left the site open for restyling – watch out for new developments.
[~A] Feb 2011

AD: Museum Studio (Sweden)
DIR/DES: Museum Studio
UX/DEV: Antenna (Great Britain)

Mobile version

Background tile (magnified)

Key UI paradigms

Stacks

“Snake” layout

Lightbox

Accordion

See more case studies
Prior case study: Gavin Coyle
Next case study: Build

Build

noreply@blogger.com (-) — Wed, 12 Jan 2011 08:00:00 +0000

• Workshop case study

http://wearebuild.com

BLD-040

07-2010

Michael C. Place – the closest our generation has to a Müller-Brockmann figure? Build should need no introduction to anyone involved in the graphic design industry, so it was our distinct pleasure to work on the studio's homesite.

Conceptually the site platform began with the simplest of ideas: backdrop images, scaled to fill the window, with information text overlaid. But as is often the case with HTML the devil is in the details. Tints, window scrollbars, click events and element clipping/resizing all needed careful attention to function harmoniously.

And that is only the technical side of things; the simpler a design is the more attention to detail is needed – Build's skillful direction teased out the maximum potential from the medium.

Beyond the main gallery mechanic a few extra pieces of UI polish were incorporated – keyboard controls for navigating the images and a collapsible/filterable index page.

After the desktop version was in place all that was left to do was give the site a clean bill of mobile health - it now functions happily on iPhone & iPad.

All in all a very satisfying project to be involved with.
[~A] Feb 2011

AD: Build (Great Britain)
DIR/DES: Build
DEV: Antenna (Great Britain)

Project page with overlay

Project page, overlay toggled off

Mobile version

Key UI paradigms

Overlay/HUD

Full-bleed BG

Collapsible index

See more case studies
Previous: Museum Studio
Next: Timothy Saccenti

Crashhaus

noreply@blogger.com (-) — Tue, 11 Jan 2011 08:00:00 +0000

• Research Fclty. > Lab

lab.theantenna.net/crashhaus

06-2010

Crash-
haus

Iconic, universal, like atomic elements of graphic design - the perennially popular shapes of the Bauhaus. We created a small crash-testing app to examine them colliding in slow motion.

Box2D is a physics library that has been ported to numerous platforms, most recently Javascript (by Jonas Wagner and Ando Yasushi). This enables its use in the browser without plugins. Here the shapes are rendered to an HTML canvas tag (performance may vary, try Safari or Chrome for best results).
[~A] Feb 2011

Static

Stressed

Bones

Timothy Saccenti

noreply@blogger.com (-) — Mon, 10 Jan 2011 08:00:00 +0000

• Workshop case study

http://timothysaccenti.com

TMS-032

03-2010

TimothySaccenti.com

Photo reel with list nav

Photo reel, slide nav

Full screen

For fans of Warp Records, Timothy Saccenti’s imagery should be well known. The iconic LA-based photographer / director has worked with some of the label’s most popular artists like Battles (the Mirrored artwork being arguably one of the key images of 2007) and more recently the unstoppable Flying Lotus.

Being a self-professed Warp fanboy meant that working with Tim was an opportunity not to be missed, especially with Build directing. The design plans detailed a site that until recently might only have been attempted with Flash, but it being 2010 (and the iPad just around the corner) we set out to push the boundaries of HTML.

Cufon type substitution, custom slide/reel mechanics (including mousewheel control), a bespoke media player and fullscreen image viewer all added up to a thoroughly modern website. If you find it a little uncompromising well this was mostly the Antenna's doing - Tim trusted us to go beyond a ’safe‘ experience, and as the artist’s work is anything but plain vanilla the interface followed suit. [~A] Feb 2011

UI Paradigms

Reels

Lightbox

AD: Timothy Saccenti (USA)
DIR/DES: Build (Great Britain)
DEV/UX: Antenna (Great Britain)

See more case studies
Previous: Build

Case Studies

noreply@blogger.com (-) — Sat, 01 Jan 2011 08:00:00 +0000

Gavin Coyle

Museum Studio

Build

Timothy Saccenti

Antenna Updates

Gavin Coyle

Browser Burn

“Some people just want to watch the browser burn”

Infinite Scroll

Infinite Scroll

Focus fade

Focus fade

Museum Studio

Key UI paradigms

Build

Crashhaus

Crash- haus

Timothy Saccenti

TimothySaccenti.com

Case Studies

Crash-
haus