With the Google+ Hangouts API out of preview, Google asked us to take a look and see what we can hack together. What excites us is the possibility of building games and toys on top of a baked-in social platform with multi-user videochat.

In this two week sprint, we’ve tasked ourselves with translating the classic game of treasure hunt into a fun, fast-paced social experience mashing-up Google Street View and Google+ Hangouts.

The idea is to drop the members of a hangout in to an exciting location somewhere in the world, for example, the Palace of Versailles. The location data is served up via Google Maps Street View, which now takes you inside some of the most famous buildings in the world.

Once everyone is on location, they’ll be asked to locate a unique piece of art or object as quickly as possible. Clues along the way will give everyone an idea of where to head next. The first person to virtually locate the piece of art or object inside that location wins!

Technically speaking, it’s a beast to develop a game in two weeks. The team of developers at Use All Five have to write all the game logic (who’s present, who left, everyones map location, etc.), as well as synchronize data between Hangout members.

If time permits, we have a few tricks up our sleeve and hope to include them.

Follow us on Google+ (or Twitter or Facebook) for up-to-date progress reports and blog posts detailing our process and solutions. We plan on posting code snippets and demos as we go, and would love to have you join in.

My typical process involves creating a new file—one equal in size to the document I’m working on—and then dragging all the selected layers over. Afterwards, I go through a handful of more time-consuming steps to crop it to the contents.

Thankfully, after some research, I was able to streamline the process. I recorded a Photoshop action to accomplish the task in a single click!

May 14th Update: Now includes an additional action that exports guides to the new file.

Install the Action

Download:

New File From Selected Layer529 bytes

First Step: Select Your Layers

In this case, I want to grab the red shape and the “Flying Standby” logotype.

Second Step: Run the Action

Select the “New File From Selected Layers” action, press the play button.

Voilà!

The layers open up in a new file, cropped to fit around the layers.

HTML5, like it’s predecessor HTML4, is a markup language that provides instructions to web browsers for displaying content. HTML5 contains an assortment of new “tags” or features that browsers can choose to implement. The lauded features are the video and audio tags, and also the support for vector graphics and animations. In theory, these new tags aim to supplant the need for Flash.

Flash developers appear to be making the switch to Javascript and HTML. Although I definitely agree this HTML5 switch is a great thing, there is a need for Flash on the web. I’ve compiled a list of when it’s good practice to use Flash.

Here’s when it’s OK to use Flash:

1. Video

   Flash soars with video because of hardware acceleration and active streaming, two features the HTML5 video tag does not support natively. Hardware acceleration allows Flash to take advantage of additional computing power for smooth video playback and streaming allows for selective playback and browsing in video. Lastly, while Flash works the same cross browser; the HTML5 video tag only excels in Safari and is limited in other browsers implementations.

   

   Anonymous Content - uses Flash 10 video, and HTML5 video for the iPhone/iPad.

2. Microsites

   Brands, creative agencies and movie/television promotions use microsites to create fully immersive experiences for users. Flash is the preferred medium as most of these sites are multimedia heavy and require game-like interactivity. Lastly, due to the inherent nature of Flash as graphic drawing tool, these sites allow for “boundless” design without concern for the technical limitations of HTML5 and CSS3.

   

   The Morphosis Architects microsite is the front-facing companion to their sister site, Morphopedia, which is an HTML archive of all of the studio's work.

3. Infographics

   Nearly anything designed in Photoshop can be achieved in Flash; stackable vectors, knocked-out typography, and simultaneous 2D/3D support. While the HTML5 Canvas tag and SVG libraries are powerful there are many shortcomings. For instance, layering various tag content is extremely difficult in HTML5 with limited computability cross browser (notably Internet Explorer).

   

   The Together Counts homepage uses Flash to the display recent activity of people using the site.

4. Interactive Banner Ads

   Though annoying for some, Flash ads subsidize the cost of “free” content on most websites. Ads must be eye-catching with animation and motion is a critical part of that. Flash is the best tool for this, and digital content publishers are guaranteed 99.6% of users on a desktop will see them.

   

   The Vanguard ads use algorithms in Flash to animate the datasets of the various packages.

5. Desktop Applications

   With Adobe Air and Flash, developers can build applications that run in operating systems (OS X, Windows 7, Ubuntu) without the need for a browser. Certain products that require heavy file transfer (like FTP) perform better outside of a browser, Flash with Air does this quickly and effectively. Lastly, with Air, developers have access to hard components (audio/video devices, drives and inputs) that would be out of reach within a HTML5 browser.

   

   Built with Flash, our clients can use an Adobe Air app to batch upload to their CMS.

6. Multimedia and Audio

   Flash supports both webcam and microphone access, as well as manipulation of the two. An example of this functionality in production is a multitrack audio recorder. A user records music while simultaneously listening to the playback, which demonstrates the power of Flash’s input/output functionality.

   

   My Song To You utilizes the Audio Capabilities of Flash 10.1

7. Games

   Some criticism of Flash games is that the browser was never meant to be a gaming platform—however, there are countless successful games to emerge from world of Flash: Bejeweled, Canabalt, Farmville to name a few. Flash games also have the ability to reach an unprecedented amount of users as a result of social gaming through Facebook.

8. Special UI Elements

   There will always be circumstances where HTML/Javascript won’t cut it. With the recent emergence of game mechanics on the web, certain websites will need to have effects and an animation throughout. When these effects are translated into UI elements, it’s sometimes not feasible to create complex keyframe animations and sound-playback with Javascript. Flash makes it simple for developers to rapidly build out UI elements and be confident that those elements are cross-browser compatible.

   

   Together Counts uses Flash for custom UI

The Grey Area: Full Flash Websites

Most websites don’t need to be entirely Flash. Occasionally, there will be the branded experience that needs to resonate emotionally with users. With the current state of HTML/CSS/Javascript, the technology is limited in what can be built with it. Sometimes these limitations can only be overcome by Flash.

There are still some great and innovative uses of Flash websites on the FWA, but even entries on there are moving to HTML/Javascript. Right now the features in HTML5 are too young to do everything that Flash does, and if web designers aren’t willing to budge and embrace the limitations of HTML5, Flash websites won’t be going anywhere any time soon.

This is the second year in which we (Use All Five) have participated in this event, so it’s extremely rewarding to see the growth and shifts in students from one year to the next.

The first thing that struck me about these students, compared to last year, was the passion and fire for programming. These kids knew how to develop and program in Javascript, Processing, CSS, HTML, Unity, and PHP. If they didn’t know how to program yet, or they felt weak in their programming skills, they said they were going to push themselves harder in their free time to master it.

On top of this passion for programming, most of the kids were fluent in another creative talent. I saw beautiful photography, funny/quirky videos with perfect lighting and beautiful cinematography, as well as illustrations that made me smile.

Of course, both last year and this year, the kids had a very strong design background: typography skills, understanding of form, layouts, colors and more. I’m impressed and amazed with where Casey Reas, Chandler McWilliams, and chair Henri Lucas are taking the department. It’s extraordinary and groundbreaking, compared to the other design and art schools around the country.

What’s being created at UCLA DMA are the perfect creatives. You have students who can design and program a website or a mobile app, but also design and compile a book of your writings. This high level of creative prowess and concepting, with an extreme knowledge of digital possibilities, will serve large dividends to these future students.

They’re not perfect yet. They still have a lack in selling themselves and their ideas, but that doesn’t scare me, they’ll learn that the hard way – by joining the real world and being forced to fight. I hope I see some of these individuals launch their own start-ups or agencies, like we did when we graduated 5 years ago.

Keep up the great work everybody!

I recently found an article floating around in the design community titled “Why wireframes can hurt your project“. It’s by Sacha Greif, who lists a handful of reasons why the common web designer shouldn’t worry about creating wireframes. To sum it up, he basically states not only do wireframes waste time, they also can negatively affect the designer’s ability to make revisions, therefore hurting the website.

Greif goes on to state that there are new technologies and movements that push wireframes into irrelevancy. He explains that with jQuery, the lean startup movement, and 37Signals, it isn’t necessary anymore to wireframe. What this means is, you should jump into developing and worry about problems when they arise, because you can’t predict how people will be using your website or app. Fair enough, but I still disagree.

When you wireframe before delving into the design, you can quickly map out your website, pages, and pieces of functionality. It ends up being the blueprint. At Use All Five, every project begins with building wireframes. It’s the easiest way to set expectations with the client. Wireframes also allow our development team to commence work before a design is in place.

If we were to jump into design phase immediately, trivial things such as color can hold up the entire process from being signed off by the client. The wireframe brings focus to the functionality, without having to worry about design. The whole idea is to remove subjectivity completely while mapping out the site—we tend to keep design separate from the wireframe phase.

Wireframes give you a clear focus and vision. It’s a manifesto and a todo-list. It can be tempting to dive into a project immediately, but without a clear definition of what the website is, it can end up in production purgatory, with no end in sight.

You shouldn’t also base your website off of a specific technology, it should be designed around an idea. If you use JQuery or Rails without any sort of plan, you’re going to work your design around what technologies can do, rather than finding what technologies will work best for your idea.

Greif’s wireframe alternative is to create a bulleted site map. I think this is an OK idea, but the depth we put into the functionality, page-flow and navigation is worth the extra hours.

Don’t be lazy, plan your website out fully, wireframe, and then get to the fun stuff.

11 Ways to Visualize Changes Over Time – A Guide
January 7, 2010
Deal with data? No doubt you’ve come across the time-based variety.

Great products are triumphs of taste
February 1, 2010
You need to understand what “great” means in a big picture sense, not just in your chosen field.

Sunk Costs: An invisible, pervasive peril
February 15, 2010
Many of my mistakes can be traced back to a failure to recognize and appreciate “sunk cost.”

Mike Maples Talks Venture Capital And Thunder Lizards
February 21, 2010
Small startups can be hugely disruptive, and have proportionally huge exits.

Theory of Change
March 14, 2010
A blog post on the importance of working backwards.

Native App Or In-Browser Website: Which Is Right For Your Brand?
April 6, 2010
This is still a huge debate for brands and websites, even as we enter 2011.

The Secret to Designing an Intuitive UX
April 8, 2010
A look at matching the mental model to the conceptual model.

Online & Real Life Social Networks
April 11, 2010
Paul Adams presented Google’s research on the differences between online and real-world social networks

Attention Brands: It’s Not What You Say, It’s What You Build
May 10, 2010
Today the product itself has become the primary advertising channel — it convinces people based on its utility to them.

Why Creatives Are Confused
May 28, 2010
If they weren’t confused they’d be crazy.

(Video) Skills Of The Rockstar Planner: Intuitive Problem Solving Share
June 14, 2010
The often amorphous practice of intuitive problem solving is defined and examined by leading voices within the planning community.

John Sculley On Steve Jobs, The Full Interview Transcript
October 14, 2010
An interesting, and thorough, interview with John Sculley on the subject of Steve Jobs.

Nike Turns London Into a Game Board to Get People Running
October 29, 2010
Nike asked Wieden+Kennedy to get young people excited about running. W+K said forget ads, let’s make a game.

6 Predictions for Digital Advertising in 2011
December 22, 2010
Six predictions for digital advertising in 2011.

A big advantage of the web world is experimenting, testing, and changing little things in order to achieve better results. It’s not a pretty process, with a lot of messes spreader across the Internet, but it works.

For example, the Atlantic has their main website at TheAtlantic.com, but they also have an active Twitter, Tumblr, and Facebook with unique methods at each designations for communicating to their audiences. It’s a matter of preference. I’m a follower of their Facebook page because of their clear, quick links to news that matters, plus interesting commentary by other followers.

However, it’s their Tumblr that excites me the most. They took an easy risk of launching a stripped down, ad-free version of their site to give readers a streamlined news source with powerful quotes, stories, images, videos and discussion points that differ mightily from their Twitter and Facebook.

On top of that, they have thought-provoking writers with their own min-blogs, Twitter accounts, and Facebook pages. I’m a huge fan of Andrew Sullivan, who has been killing it as a blogger for The Atlantic with his own unique point of view and constant quality posts.

These tentacles reach across the internet and net The Atlantic a cool 100,000+ dedicated individuals who are interested in what The Atlantic says and links too. They can continue to feed this audience their news and links to the Atlantic website, which drive bigger page view numbers and advertising profits.

They built their following with a confident, experimental approach that more publications and firms should be mimicking in order to build an audience, as well as profit.

Happy Holidays from Use All Five.

Photo credit: YoVenice Flickr

If there’s one thing we do all day long here (besides work), it’s listen to music. Copious amounts of music. So much music it will make your head spin. Anyone who’s ever been to the studio knows the music is playing all day long.

In our annual tradition, we compile a list of SFW tracks for our clients as a way to make them feel part of the studio. Usually it’s a collection of music we’ve been listening to over the past year, that’s not only great but great to work to. This year we decided to take it one step further and post our mix for all our friends and followers.

This mix goes up, down, left, right and finishes strong at just shy of 2 and a half hours. Plenty of time to get started on a project, dig in, revise and wrap it up nicely. Or hit repeat and pull an all-nighter.

1. Jamaica – Jericho
2. The Drums – Let’s Go Surfing
3. El Guincho – Bombay
4. Harlem – Beautiful & Very Smart
5. Games – Strawberry Skies
6. Groove Armada – Not Forgotten
7. Fake Blood - I Think I Like It
8. Miami Horror – Holidays
9. Maximum Balloon – Groove Me (feat. Theophilus London) (Jneiro Jarel Remix)
10. Matthew Dear – I Can’t Feel
11. Menomena – TAOS
12. Bikini – Acheerlaeder
13. Yeasayer – ONE
14. Kisses – Lovers
15. HEALTH – Before Tigers (Cfcf Rmx)
16. Suckers – You Can Keep Me Runnin’ Around
17. The Soft Pack – C’mon
18. Surfer Blood – Swim
19. Hot Chip – One Pure Thought
20. Holy Ghost! - Say My Name
21. Diamond Rings – Wait And See
22. Kids Of 88 – Just A Little Bit
23. Kanye West - Christian Dior Denim Flow (feat. Kid Cudi, Pusha T, John Legend, Lloyd Banks & Ryan Leslie)
24. Sleigh Bells – Rill Rill
25. LCD Soundsystem – Drunk Girls (Holy Ghost! Remix)
26. Bag Raiders – Shooting Stars
27. K-X-P - Pockets (Annie Vocal Mix)
28. Robyn – Dancing On My Own
29. The xx - VCR (Matthew Dear Remix)
30. The Naked And Famous – Punching In A Dream
31. Cut Copy – Take Me Over
32. Delorean – Endless Sunset
33. Mansions on the Moon – She Makes Me Feel
34. Solid Gold – Danger Zone

While we can’t directly link to it, we did see it floating around here. We hope you guys enjoy it as much as we did.

Dan Mall from A List Apart wrote a wonderful post that explains the differences between design and art direction. He gives a clear definition between the two practices: “Art direction gives substance to design. Art direction adds humanity to design.” Basically, art direction is the overall feeling a person experiences when they interact with a touchpoint (such as a website or a magazine). In order to build successful interactions, one must posses the talent of art directing. Art direction is the vision, the story and strategy behind the design. It’s the defined set of rules before one can begin designing.

A great example of where art direction and user experience meets is the Ben the Bodyguard website. The creatives behind the site took the very basic user experience task of a page scroll, and guided a story along with it. As you scroll down the page, Ben the Bodyguard guides you through a grimy street. Text bubbles appear that describe situations that are definitely relatable if you or anyone you know has had anything stolen. When you reach the bottom of the page, it asks for your email address to get notified when the product launches. After being involved in the narrative, it’s difficult to say no to filling out the form. This is the epitome of art direction applied to user interface, which definitely yields a pleasurable user experience.

Another example of a user experience and art direction convergence is the website we built for AIA Los Angeles. Rather than being simply a content driven calendar website of all the architecture spots and events, the site plots everything on a giant google map. The idea is to invoke the feeling of “localization” to the user or member of the association. People recognize roads and landmarks which greatly contextualizes the event listing.

Art direction is about bringing emotion, vision, and clarity to design. When it’s combined with user interface and user experience, it’s a dangerous weapon.