insight

August Flash User Group Meeting Hosted at Springbox

by Tom Hudson August 26, 2010

In July, I attended the Austin Flash User Group monthly meeting. About 20 people were in attendance, a mix of designers who have never used Flash to hardcore Flash enthusiasts. I met a lot of great people and enjoyed hearing about interesting projects at different companies.

Unfortunately, the Flash User Group has been lacking in leadership and low attendance. There wasn’t much substance to the meeting when it came to Adobe Flash. I’m usually really good a complaining when something isn’t right, much better than actively participating to fix it! Frankly, I’m tired of playing that card. Feeling it was time to jump in feet first, I volunteered to do my own presentation to the group and host the next meeting at Springbox. I had no idea what I got myself into.

I decided to speak about HTML5 and Flash. This topic interests me mainly because of the hype generated by Steve Jobs and his refusal to allow Flash on the iDevice. I thought this would be a good topic for the Flash community since a lot of people, like me, are concerned about how this might change the future of Flash.

Last night was the presentation. The attendance was a record-breaking 45! I say record-breaking, but really I have no idea. It was definitely more people than usual. We started out with my presentation about HTML5 and Flash. Next up was Steve Shipman, an employee at Motive, who gave a talk about a Flash code library he created for face detection. Very cool stuff! Overall, the meeting was a huge success. I met a lot of people who work in Flash as a full-time job. Everyone is hungry for a local community in which they can participate and share knowledge. Honestly, I couldn’t have asked for anything more out of the meeting. As a user group, we’re on our way to rebuilding a strong sense of community in Austin, and I’m sure in the future the meetings will get even bigger and better.

 

Digital Experiences in Public Spaces

by Gerren Lamson June 7, 2010

Over the last month or so, I've worked on a kiosk project, watched Apple release the iPad and ate a couple of breakfast tacos. And I can't help but wonder: What's it going to be like when our physical environments become even more digital? Will we eventually live in the Minority Report?

The digital invasion of public spaces has been in motion for years. We've got CoinStar to help us make change on the fly, RedBox to spit out DVDs and bank ATMs to grab some cash without a teller. Don’t forget the growing world of digital signage, too. As the technology becomes more cost-effective, I think we can expect to see big brands create custom, brand-centric interactive environments—ones that harvest useful data from the public and enchant all five senses. (Sample perfume fragrances via kiosk or get a whiff of an "unidentifiable asian food dish" at the mall).

So, here's a peek at a few ways the digital world is currently permeating the physical world:

Innovative Touch Surfaces
Apple's iPad: With its release in April 2010, the public can fill their growing appetite for touch technology — everywhere they go.
Jeff Han on TED: A must-see demo from the pioneer of multi-touch technology. Check out his Perceptive Pixel, too.
Microsoft Surface: One of the major players of touch technology in recent years.
CNN's Magic Wall: Provides nightly interactive infographics and content during news coverage.
Reactable: Brought interactive tabletop gaming and live electronic music to the public's attention.
Inamo: View the live chef cam, place an order or check out nearby movie theaters on your dining table.
iBar: Playful light surface to complement your beverage of choice.

Interactive Walls, Floors and Projections
Apple's Hyper Wall at WWDC 2009: A 20-screen display showed the 20,000 most popular iPhone apps and highlighted real-time downloads, at 3,000 per minute.
Multi-Toe Touch Floor: Tap, step and stomp to control the floor. It's probably fitting to also mention the Wii Balance Board here, too.
IBM's Smarter Planet Interactive Billboard: Color-sensitive cameras change the screen color based on each consumer's shirt as they stand in front of it.
CNN Hologram Interview: See Anderson Cooper interview musician Will.I.Am via a Star Wars-style hologram.
Diesel's Interactive Storefront: Cue the rock band when you pass by this fashion store façade.
3D Live Video Mapping: Playful video on buildings has been happening for a while now, and it's still pretty neat. Check out this AC/DC exhibition, too.
Dell Children's Interactive Donor Wall: A cool way to engage the kids and display donors to the public.
Interactive Rear Windows: Watch ads in the traffic in front of you, or on digital billboards.

Next-Level Self Service
Jack in the Box Ordering Kiosk: Get your burger without speaking to anybody. Or your taco combo, if you prefer Taco Bell.
Best Buy Mini-Store: Get your electronic fix wherever you can find one (usually an airport).
Hospital Check-In: Get in line for the doctor by using a kiosk.
Coke's Touch Vending: Uses a touch interface to make purchasing a soft drink more interesting.
Wonder Pizza: Prepares and cooks a pizza in 3 minutes using infrared, for better or worse.
Zugara's Webcam Social Shopper: Try on new outfits from the comfort of your home.

Going Forward
While we might not live in Minority Report just yet, out-of-home digital experiences are here to stay. Here are three trends to keep an eye on going forward: 

  1. Designers and developers need to keep their thinking fresh and innovative in how to approach user interfaces and digital experiences that will be placed in public spaces.
  2. The public’s appetite for sleek interfaces and interactive experiences is growing, and they’re becoming more savvy and educated with a variety of technologies and products.
  3. Brands have the opportunity to be creative with their experiences and win over our hearts and minds with innovative engagements.

 

A World Without Rollovers: Multi-Touch Design for the Web

by Chris Mayfield May 26, 2010

The mobile computing revolution has produced a multitude of products and new ideas about how we interact with these devices. I’ve explored many of these approaches from stylus to rollerball to touch-screen functionality. Of all of these approaches, multi-touch functionality is the most powerful, and I think the most likely to become the standard for mobile interaction and beyond.

I was recently tasked with creating iPad desktop icons for some of our clients’ websites and began to wonder how this type of device — and multi-touch in general — would impact web design in the future.

Up until now, website navigation has been done exclusively with a mouse. As users explore a site with a mouse, we look for clues to determine their intention and then provide content or interactive events to help them to navigate. Designing for such interactions has produced a library of elements such as rollovers, dropdown menus, underline text links, tool tips, etc.

How will these behaviors transfer to multi-touch? And how will user experience diagramming (wireframes) adjust to handle it?

Some interactions such as two-finger scrolling or two-finger pinch-zoom are fairly intuitive and have been widely adopted on mobile devices; however, without the mouse, we more or less lose the concept of intent as a “trigger” for interaction events. We can still utilize richer and more elaborate interactions, but must create a type of standardized iconography, which details the type of interaction necessary.

Take for example a tool tip or a hover-state event. You could approach this by forcing someone to call the tool tip with a touch (but not revealing a call to action until the additional content is presented). Repeat visitors may find this inefficient or annoying. You could also approach it with a secondary button for more information. Or you could utilize multi-touch by allowing the user to see additional content with a two finger reverse pinch to “open” the content. You could identify this action with some iconography in the corner of the element.

I’ve also considered global navigation, which previously has been the dominant element at the top of every website. A nav being a utility to access content, I always strive for ways to minimize its presence and give content the spotlight. For multi-touch, I considered the option of accessing a nav from anywhere on the site through a single global gesture such as a three-finger reverse pinch. Make the gesture and your options are available to you at the location of the gesture.

From a UX perspective, I’ve thought of iconography that could be used in wireframing to create a shorthand for these multi-touch gestures: simply a number representing the number of digits with directional information about the motion involved for the gesture (see image above). I feel this could be used to outline functionality and could be included in final design elements as well.

These points are by no means meant to be final solutions for multi-touch interaction, but are food for thought and discussion. I personally find this to be a very exciting change in interaction design and look forward to the challenge of taking it on.

 

Visual Arts Center: Brand Identity Development

by Springbox March 29, 2010
 Springbox recently had the opportunity to collaborate with the University of Texas at Austin’s Visual Arts Center. In the final stages of unveiling new facilities, the Visual Arts Center (VAC) was looking for a new brand identity system. Four Springbox teams presented logos and directions to the VAC. Here’s a rundown of the teams’ efforts. 
 

We were excited by the new space. The inspiration behind our logo was the concept of Open Source Art. By tearing down old walls, the Visual Arts Center has built a new forum for art expression, experimentation and collaboration — a place where students, faculty and visiting artists can pursue their passion for art. Our logo features simple letterforms, taking cues from the idea that anyone can participate in the artistic process. Doing so also enables the logo to frame different pieces of art, becoming a window through which the public can discover and appreciate art. A window that’s always changing, evolving — just like the VAC.
 
 
The client was passionate about drawing together a uniquely diverse arts community. Students, alumnae, faculty, guest artists and creative voices from around the world will converge at the Visual Arts Center, each bringing a unique perspective. We were inspired by the gallery — with its airy hall, collegial gathering area and inspiring exhibits — as the new mental and emotional center of a dynamic community. Suggesting experimentation and the intersection of ideas, we developed a mark that captures the energy of the space, and seems to call the viewer to action: Become part of this community. Fill this space with your ideas. See what happens.

 
In his SXSWi 2010 keynote address, Twitter CEO Evan Williams spoke of openness as “a survival technique” that extends beyond technology. We couldn’t agree more. Our concept for the UT VAC brand identity taps into the belief that openness fosters innovation, enabling ideas to evolve and thrive across disciplines and media. The team collaborated to create assets that brought this concept to life, from a tagline that functions as both statement and directive to logos that embody the notion of institution as incubator. Our efforts resulted in a collection of branded assets that convey to students, faculty and artists of every persuasion the fact that the UT VAC is not only open to ideas, but will help individuals open their ideas to limitless possibilities.

  
After taking the tour of the new VAC facility, we decided to focus on the one aspect of the architecture that stuck with us most, the barrel roll ceiling in the main gallery. By focusing on the visual structure of the Visual Arts Center, we were able to incorporate a goal of the VAC — to be a haven of inspiration — into both their brand and the building itself.  Turning the outline of the ceiling into linked VAC lettering, allowed us to define the space as somewhere students, faculty, artists and the community can come together and connect.

 

Utilizing a Single Smart Object Throughout Multiple PSDs

by Jonathan Bowden March 17, 2010

Working on web-based projects over the years, there have been many times that I wanted the capability of using a single linked file throughout multiple PSD documents, much in the same way Adobe's InDesign has this function for large multiple page documents. This would have saved untold hours of mundane and repetitive work, as a simple copy change such as "Main" to "Home" in a large site's navigation would require only one file to be changed, instead of every single page. Unfortunately though, this was merely a dream until a discovery I had a few weeks back.

Recently, a large non-profit came to Springbox to redesign their site, a digital treasure chest of information and opportunities on a specific topic affecting millions. As you might imagine, the breadth of the content on the site was huge, with a rough estimate of more than 300+ pages.

Having worked on a large redesign recently, I had a strong desire to find a new system to allow quick updates to commonly used elements throughout the site, such as the header, the footer, a general tout layout and the styling of a call-to-action arrow. As these elements are used virtually on every page — particularly with the arrow being used 10+ times on multiple pages, changing these individual items can literally take up hours of time — even on only a handful of pages.

At this point, I must admit my great love for a half-solve to this issue — the introduction of smart objects in Photoshop. If you have not worked with smart objects, or just want a great refresher on the subject, go check out Viget Lab's great article.

Moving along, I say that smart objects are half-solve because these embedded linked files are only applicable to one page. For example, make a custom arrow, turn it into a smart object, then make copies of this smart object and distribute them to the rest of the page. A few days later the client wants to change it, just go in, change the smart object once and it will automatically change this for all instances of the smart object on the rest of the page. Magic! I love smart objects. I really do. So now we just needed to expand this functionality to reach 300 or 5,100 pages.

At this point, I did the obvious: I fired up Google to see what the internets had to offer on the subject. I found others were searching for a solution as well. All of this searching led me to the work of Mike Hale and Jeff Transberry who wrote a script to do just what I was looking for.

So here's the new workflow for a sample project, Goodness Inc., after downloading the script and installing it via the Adobe Extension Manager:

Example Site Layout and Content



Step 1  

Design the homepage with folder groupings for Header, Hero Area, Footer, etc.




Step 2

Select the Header folder in the Photoshop layers palette and choose "Convert to Smart Object."




Step 3

Double click the icon for the Smart Object in the Layer Palette, thus opening up the Smart Object as a separate document.




Dialog Box for editing a Smart Object as a separate document:





Content of Header Smart Object:





Folder Panel content of Header Smart Object:



 

Step 4

Save the Smart Object in a new folder within the project file, which I label "Universal Elements" or whatever is easiest for you to distinguish.





Step 5

When I am ready to bring in the header for a new page on the site, I go to File --> Place --> then browse to the "Universal Elements" folder and select the file.

 

Step 6

I now open up the Window pallete options, and pull up the "Links" window. I see that this Smart Object is actually a linked object. From this "Links" window, I have a few options: I can refresh the panel to get the latest link info, re-link the object, or I can edit the original.

 



The Window > Links panel, as relative to the selected layer, in this case being the "Header" smart object.

 



I then repeat the process of placing the element in all pages that need it.

Follow-Up Steps

If a week later, the nav copy needs to change from "HOME" to "MAIN," I can now edit the single source file "Header.psd" located in the "Universal Elements" folder, edit the file and save it. Then I will need to open each unique page's PSD, open the links panel, and refresh the links to see that the new element is present. Lastly, I can now save all the updated jpegs.

Not a one-step magic fix, but a timesaver nonetheless.

I do hope that in CS5, Adobe steps up their game and makes an integrated solution for this, as well as a "Character / Paragraph Style  //  CSS for multiple PSD documents" solution, but that's a different conversation.

In the meantime, a huge thanks to the great work by Mike Hale and Jeff Transberry!! This has saved me hours and hours of frustrating, repetitive and mundane copy changes. Thanks guys!

And as always, if you find an even better way to use / tweak the insights I have shared here, I'd love to hear them!

Lastly, there are rumblings of Illustrator being able to do a lot of similar things (symbols, multiple art board documents, xml-driven text fields), some of which you might soon find in a follow-up article here on the Insight blog.

DISCLAIMER: I can only verify that this works on Macs, running CS4.


The way we see it, people who share insight with each other innovate, grow and succeed together.

Subscribe

Log in

The opinions contained in these pages do not necessarily reflect those of Springbox or its parent company, DG FastChannel.