This is a few years old but still pretty cool. Back in 2009 Toyota teamed up with Please Let Me Design to create this IQ Font (above) as a way to promote their new micro-car.

The idea is simple enough but the execution is really nicely done. The designers (Pierre and Damien) worked with Stef van Campenhoudt (driver) and Zachary Lieberman (software developer, using OpenFrameworks) to track the car’s path as a way to draw each letter. The resulting font is clean, quirky with lots of character and classic details. Even the “making of” (below) is fun to watch.

You can download the font directly here or from Toyota’s Belgium site.

The app itself is build using the Metro framework but it also includes the default nav bar from their OS. So visually other than the status bar at the top of the screen you’re in WP7 land. What a way to introduce the masses to WP7 without them having to give up their iPhones in the process.

Outside the visuals, the app is pretty impressive. From the animated avatar that reacts to your actions (shake phone, poke, etc.), to full access to your account including messaging and setting of beacons. Beacons on their own are a brilliant move, but together Microsoft has a killer marketing tool disguised as an app that you’ll want to use.

Check it out for your self.

At first glance Edge seems closer in structure to After Effects then to Flash which could be a nod to where Adobe is heading or a way to separate the apps, again we’ll have to wait and see. The application is laid out in four sections: Properties, Timeline, Elements, and the editor window, which is Webkit based. The basic premise application is the simple, add items to a stage and then animate them via keyframes along a timeline. There are no interactions or ability to add scripts with this version of the application. Nor can you create new objects/shapes outside of rectangles, so all your assets will need to be created externally.

The timeline offers auto-keyframing and each attribute can be animated separately. Edge supports the standard set of easing which can be applied individually or to a group via multi-select. Each object/layer is a different color and their attribute list can be contracted/expanded to maximize work space. Attribute values are displayed both in the properties panel and inline within the timeline. Similar to After Effects, you can filter the timeline by typing within the timeline’s search field. Another nice AE style feature is the ability to scale the timeline and manipulate your existing keyframes in bulk.

Since the main editor is Webkit based text is true HTML text as are the CSS styles connected to it. Adobe’s handling of object positioning within the stage has a few quirks. The biggest being an object’s Zero Point being based on where it was initially introduced to the stage and not to top-left or other standard. This make is difficult to quickly create animations or layouts based on numerical coordinates from either external applications (Fireworks) or from object-to-object. For now you’ll need a PNG/JPG to create your gradients. I’m not sure if this is due to the complicated CSS to support gradients between browsers or just something missing from this release. There’s also a few glitches revolving around scaling images but text and divs work as expected.

Code wise, Adobe hides most of the magic in pre-minimized JavaScript files with the external CSS file only defining the initial elements. As long as you keep the stage and associate includes untouched you can edit the rest of the page at will. Which will only help Adobe gain support of this among larger web shops. Despite this flexibility HTML based animations still lack the self-contained nature of Flash’s SWF, which means to view my sample animation you’ll need to click to a page outside of WordPress’s CMS.

Overall, I think this is a great example of where I think web content creation apps need to go. Live HTML in the editor means there is no guessing on how things will look when it hits a browser. I hope they follow this thinking with the next version of Fireworks allowing less web savvy designers to get a better feel for what how their designs will really look outside the false perfection of the current design tools present.

Though Edge is only in its first beta release it’s pretty solid app and could easily be used to create complex animations for websites, banners and other strongholds of Flash. You can view the my test animation I created for this review. Future versions promise support for increased support SVG and the Canvas tag which will only make this more powerful tool for web animators. Will HTML5 really be the death of Flash? If so, Edge is a smart bet for Adobe to keep relevant in this new world.

The entire video is shot from below making for some interesting visuals all on it’s own, but add the multi-window tiling of video and you get a crazy kaleidoscope effect. If that wasn’t enough there is the viral/personalization feature where you type a message and OK Go and Pilobolus will write it out with their bodies. Simple concept, great execution.

Technically speaking, the use of HTML for syncing multiple videos is still pretty impressive. Be forewarned that this may be taxing on older computers as I know last year’s video/experience for The Arcade Fire’s The Wilderness Downtown gave my laptop a bit of a work out. For more about how they made the video check out Google’s blog. Regardless of the technology used the most impressive thing is how this all came about as a tribute to a post tsunami Japan.

- – – – -

Links:
All Is Not Lost (video)
OK Go
Pilobolus
Google’s blog
The Arcade Fire’s The Wilderness Downtown

Clearly these projects needed something more involved then simple wireframes, design guidelines and some magic in Fireworks/Photoshop and HTML…they needed systematic frameworks to support both the design process and the business needs. Besides coming up with concepts and designs that fueled these projects it was my job to create said frameworks.

The embedded Seven Steps to Creating a Framework is the distilled process I employed to conquer the challenges presented to me over this past year. I believe it is universal enough to guide you through creating UX frameworks of your own.

View Seven Steps to Creating a Framework on SlideShare

Please comment if you have questions or comments on this framework to creating a UX framework.

The Social Network still commands the box office but that’s not the only reason Facebook is toping the list this week. Earlier this week they announced they were adding Groups, a tool to download your data, and tighter privacy control over apps.

The idea of groups isn’t anything new but unlike Yahoo or Google’s offerings this one is connected through Facebook. And though this is an obvious fact, this little factor is a huge differentiating point between the services. With the other group services you would have to go out of your way in order to participate. It wasn’t part of most users daily routine and slowly but surely members would trickle away beginning the group’s downward spiral into obscurity. Facebook on the other hand is where the people already are. It’s simple, integrated and most importantly it’s where your friends are, so there is no searching for emails or additional sign-ups needed to get started. Additionally their new groups feature provides a way to control who sees what. This alone is a huge step forward for Facebook and for those that could really use some discretion. See the SNL skit above for an entertaining example of this problem.

The second new feature is less of a dramatic but another big step forward in Facebook privacy.  Granted downloading all your activity, photos and posts doesn’t increase your privacy but it does provide a window into all the information Facebook does have on you and may change how much info you post in the future.  I don’t see many people making use of this feature anytime soon, but should a new social service spring up the ability to import some of this data may give that service a pretty big jump start. Also related to privacy and controlling your data is Facebook’s new application dashboard. The new dashboard provides users the ability to see and limit what applications have access to and what they’ve accesses last. Now you can see if Farmville is going to market with your personal data.

In a related note, according to a recent study of 10 modern countries most children will have an online footprint by the age of 2, this includes baby photos. The study was conducted by AVG, a security firm that deals with identity theft. The firm suggest people be more cautious when posting information online and to make use of available privacy settings.

- – - – -

Also high on the pop culture meter is Gap’s crappy new logo (shown on left). It doesn’t take an art/design major to see how big of a step bag this is from their earlier logos. The only positive thing I can say about it is it’s generating a ton of promotion. My favorite quote regarding the new logo comes from Brand New, a design blog, “I’m not one to critique something by saying it looks as if it were done in Microsoft Word but this one is just too unsophisticated to warrant anything more than that.” Can’t get enough of the new logo, check out craplogo.me to make your own Gap inspired logo.

- – - – -

Even on the eve of Microsoft’s release of Windows Phone 7 the Android platform is dominating the mobile press. Even without the skyrocketing success of Android (top selling smartphone in the US – GigaOm), Microsoft has their work cut out for them if they want to be a player in the mobile market. Newsweek did an extended article on the Android and how it came to be. One interesting factoid in the article was how Google has made enough on mobile search to pay for the development of the Android OS.  So sometimes giving something away is a great way to make money. Also, by Google making Android free, handset manufacturers are more apt to a device to support it as the reduced cost means more profit for them.

On Monday (10-11-2010), Microsoft unveiled 10 devices that support WP7 to the masses and from the early reviews they’re a competitive option. Wp7 is a complete overhaul of their mobile platform and is based on their Metro UI guidelines which influenced this year’s youth targeted Kin, which died a quick death. Hopefully WP7 won’t suffer the same fate. Though I haven’t gotten to play with a device personally, it offers a new paradigm for mobile UI’s that has me intrigued. The bright, flat colors aren’t my favorite, but the split structure of the main desktop, the transitions, the use of type in the design are all unique…but are they enough? Will they resonate with consumers? Working against them is the success of both iOS and Android, while the current lack of a Verizon or Sprint based phone means they’ll still be pushing Android as the ultimate mobile platform to their customers. Top that with confirmation that there will be a Verizon iPhone in early 2011. For more details on the WP7 launch check out Engadget’s WP7 launch guide.

- – - – -

Apple seems to be in everyone’s sights, with Android and WP7 going after the iPhone. Now the big wigs are Microsoft and Adobe are meeting though what’s to come of the talks is still unknown. And Google just launched the website for their Google TV, that competes with the AppleTV. Like many of the set-top boxes they support Netflix, Flickr, YouTube etc., but what new is that there’s a full featured web browser (including Flash 10.1 support), so theoretically it supports any online service. Though surfing the web on your TV has never been a hit, so Google is requesting sites to make a “lean back” version, which YouTube has had in Beta for some time. Some of Google TV’s big wins include: Android OS based, use of your phone as a remote control, surf-and-browse (a P-i-P of web and video), personalization, and a playlist feature that works across various video sites. Not sure what the price tag is looking like, but I assume it’ll land in the vicinity of the AppleTV, if not the war may already be lost. The potential $400 referenced in Engadget’s guide to Google TV seems excessive, especially with Xbox, Playstation and mini PC’s are all cheaper and do more.

While neither V for Vendetta or this kinetic typography are new, this animation was new to me this week. You can check out 14 additional kinetic typography pieces based on popular movies at Inspired Mag. Rocky and Nick the Greek were also contenders for this hero spot.

Also typography related is The Big Web Show’s episode 18 where they speak with Roger Black, co-founder of Webtype, an online font foundry that also hosts the fonts for use in your CSS3 based designs. Besides having some really nice fonts, I love their browse options.

- – - – -

Google offers instant results because 2.5 seconds is too long for users to wait for results. It seems crazy that such a small amount of time would make a noticeable change in user behavior but Google has stats that prove it. Years ago it was based around the number of results to display based on the difference in milliseconds to return those results. Today (last week) Google added instant results to cut this number down even more. According to their blog post this could save the world 11 hours every second.

- – - – -

Earlier this month Twitter posted stats on third party app usage and it showed that by-and-far most users use the Twitter website and mobile site, followed by Twitter’s own branded apps. The third party apps are only used by a small (but active) percentage of their users. This could be why Seemic, who just announced the launch of Seesmic Desktop 2 (SD2), is focusing increasing their support for additional web services (RSS, YouTube, Zappos). Some of this support is through their new plug-in architecture. For a quick overview check out TechCrunch’s coverage of the announcement.

- – - – -

Big changes at Microsoft. Stephen Elop, President, Microsoft Business Division, has left the building to become CEO of Nokia. In an unrelated note, the Redmond campus celebrated the (manufacturing) release of Windows Phone 7 with some black humor, a hearse and a parade. And what parade would be complete without doing a scene from Thriller. Though I’ve been impressed with what I have seen of Windows Phone 7, it’s has a huge uphill battle to live up to the hype of this parade.

- – - – -

UX Magazine had an interesting editorial on converting the URL bar into a form of navigation/breadcrumb system.  There are some good concepts behind the potential use of the very static and possibly foreign component included in every browser. Some things needed for this concept to become a reality is out side of the browser’s control, though you can see signs that the browsers are starting to go in this direction.  For example, in Google’s Chrome browser has implemented a system that bolds the domain and grays out the rest of the URL info. Though somewhat random when it occurs, Chrome also boxes out a website when you’re entering your search/URL. To see it in action type “google.com anyTerm,” it does this for other sites as well, but not always and I’m not sure why or when.

- – - – -

Ending this weeks review with some fun. Take a bunch of animated GIF’s and synch them up with Girl Talk’s spliced samples and you have the making of an Internet Meme du jour…Cache Rules Everything Around Me by Evan Roth

]]> http://blog.robertfrancis.com/2010/09/wr-kinetic-type-hearses-and-change/feed/ 0 http://blog.robertfrancis.com/2010/08/wil-its-not-googles-week/ http://blog.robertfrancis.com/2010/08/wil-its-not-googles-week/#comments Mon, 16 Aug 2010 11:39:04 +0000 Rob http://blog.robertfrancis.com/?p=523 Late last week there was an article via the NY Times asking “Could a deal between Verizon and Google destroy any chance for Net Neutrality”.  Instead, Google and Verizon called for a press conference on Monday to explain what they’ve been working on. Based on Google’s (and Verizon) blog with their post titled “A joint policy proposal for an open Internet” they spell out that it’s quiet the contrary. Later in the week Google then countered the many concerns about Google selling out or undermining the system.  The NY Times continues to question the proposal and “Who gets priority on the web?” What it all really means is yet to be seen but makes me wonder if this is a dig at Comcast and their win against net neutrality earlier this year.

Google is also getting some heat from Oracle as well.  This time it’s their Android platform that is getting the heat, more precisisly Google’s version of Java that runs it. Daniel Eran Dilger takes Google to town in his long but engaging article “How Oracle might kill Google’s Android and software patents all at once.” Charles Nutter gives a different point of view in his “My Thoughts on Oracle v Google.”

Apple also had some patent fun this week when they published an exact copy of FutureTap’s Where To app inside one of their patents.  Where To has been around since the first generation of iPhone. Apple and FutureTap have worked things out, mostly just a failure to credit rather then a stealing of ideas.

On a lighter note, Engadget reports on the Canadian cable company Telus’s ability to use your Xbox as an IPTV…well sort of.  The Xbox is more of a client to the set top box, but the set top box is one step closer to becoming history.  And Netflix signs a deal with Epix to start streaming movies as of September. Even though they won’t have the content for 90 days after it shows on Epix, this is a huge win for Netflix and their growing instant queue.

Visa tries to bring online shopping into the exciting world of social media and comes off as too cool for school.  Check out RightCliq to see some decent ideas layered with marketing cheese and the uncomfortable feeling that you’re being watched. Or just check it out just to watch the campy video.

Placepop gets interviewed by Scobleizer and talk about their virtual loyalty card/app.  It’s a mix between your classic loyalty card, Foursquare, Gowalla and Groupon.  Interesting enough Placepop mentioned if Facebook gets into the “check-in” game the whole check-in thing will explode.  Sure enough Facebook is working on Facebook Places, their foray into the location based excitement. Everyone has their opinion on what it may be, Gigaom writes how FB will change the game, though it’s just one of the many ideas floating about.

Other ideas that will change the future came from the NY Times Magazine’s annual “year of ideas.”  Though these are from 2009 (last year), some of them are still ahead of their time.  I was impressed by the advertisement that changed states based on whether someone was watching it or not.  Really drove the issue home.  My one complaint is that I couldn’t find a date to any of these projects/articles.

This one is for the designers out there, the User Interface toolkit for Illustrator has a plethora of icons, symbols and other elements that may help you get that next comp out the door with out pulling your hair out.

]]> http://blog.robertfrancis.com/2010/08/wil-its-not-googles-week/feed/ 0 http://blog.robertfrancis.com/2010/04/metro-guidelines-to-the-next-generation-of-mobile-ux/ http://blog.robertfrancis.com/2010/04/metro-guidelines-to-the-next-generation-of-mobile-ux/#comments Sun, 11 Apr 2010 15:55:41 +0000 Rob http://blog.robertfrancis.com/?p=440 With Surface, Zune HD, Bing…and now Windows 7 Mobile it seems that Microsoft has finally embraced the design/experience side of technology. While most people will never encounter a Surface device, at least not at it’s current state, this was a huge leap for Microsoft and human/computer interactions in general. For the most part it’s a living experiment of what the future may hold. The Zune HD and Windows 7 Mobile, on the other hand, are designed to be used by the masses, in the present and take their respective markets to a new level.

Inspired by the simplicity and universality of transportation graphics Microsoft calls there new design guidelines Metro. Beyond the name is the focus on creating a modern, stripped down, easy to navigate user interface based on common elements and typography.  The use of typography as a key design element in the digital world is almost unheard of ; I would think design geeks should be overjoyed with this though I’ve barely seen any references to this from the general design world.

Along with typography here are a few of the highlights of Metro:

• Based on transportation signage: simple, universal, easy to skim
• General feel: Clean, light, open and fast
• Experience: should lead the design
• Consistent: common design treatments and transitions
• Flexible: Inviting developers to personalize their use of the guidelines to allow them to make their apps unique yet consistent
• User focused/Task focused: one primary action at a time
• Panoramic: apps not locked to a single screen
• Typography: as an element of beauty as well as to demonstrate hierarchy
• Transitions: are as important as the static page. Guidlines request to keep them simple and related, noting “the more you use it (transitions) the less special it becomes”
• Simplify, Simplify, Simplify: fierce reduction in unnecessary UI elements (chrome, non-related actions…)

Here is a link to a long but worthwhile video
http://live.visitmix.com/MIX10/Sessions/CL14
(Silverlight required for inline, but you can also download non-Silverlight version)

Here’s the official Window’s phone site:
http://developer.windowsphone.com/

Overall, I’m excited to see smart-phones continue their evolution and Metro looks to be a great step forward.  It’s also nice to see Microsoft (or anyone) not play catch up by porting over the status quo, but rather innovating beyond it.

I saw this a few months back, loved it. Last night I happened to flip to the Oscars and caught the animated short category and saw that this was not only nominated but won.  As good as it was I never would have thought it was politically correct enough or wouldn’t be sued to oblivion by all the brand owners of the logos used in the film.  Created by the H5 group out of France, including directors François Alaux & Herve de Crecy.  During their thank you speech they mentioned it too 6 years to make this 6 minute masterpiece.  Followed by the hope to return in 36 years with a full length film.

This is one to be watched multiple times just to soak in all the nuances.  Truly an impressive animation with an excess of personality and sass.

official site