29 WAYS TO STAY CREATIVE from TO-FU on Vimeo.
A cool motion graphic by Japanese motion graphics agency, Tofu Design.
Category Archives: Design
Graphic Content | A Fount of Fonts – NYTimes.com
Great New York Times Magazine piece on the history of fonts:
The computer has put the word “font” into common parlance as a synonym for typeface. But ask most people, even many young graphic designers, where the word comes from, and blank stares abound. (For the record, it’s from the 16th-century French word fonte, which is derived from fonder, or “to melt,” and denotes the action or process of casting or founding.) That is why for the past two years I have made a pilgrimage, with School of Visual Arts students, to Cornuda, Italy, a village about 40 miles north of Venice, near the Palladio-designed Villa Barbaro, to the Tipoteca, a museum devoted to the history of letterpress printing and typefaces, or fonts.
Testing usability on the USA TODAY iPad App
USA TODAY iPad Application Usability Report
View more presentations from kathleensulli.
In the weeks that followed the release of Apple’s latest tech toy — the iPad — I conducted a series of design and usability tests on USA TODAY’s native iPad application. In coordination with colleagues at USA TODAY, I tested the usability of the first version of the application by collecting in-depth quantitative and qualitative data from users. From my test, key players working on the design and development of the application were able to quickly see first-hand how everyday users interacted with the application — including what design features worked and what didn’t work.
Several key recommendations were made based on the data and feedback collected from these usability tests:
1. Add a feature to more clearly indicate how to navigate between sections of USA TODAY
2. Adding language (text) or buttons (obvious visual components) to more clearly indicate how to edit/change the weather location
3. Add a sub-layer of navigation and search to include other sections/topics that USA TODAY is known for (Ex: technology, economy, movies, travel, etc. — Makes content easier to find)
4. Take advantage of the iPad’s interactive features by including more interactive visuals and other features within the application (Ex: cross-word games, market graphs and other interactive graphics/games).
Making a March Mania Module
After the success of the Vancouver Olympics modules I designed and developed in January, I teamed up with the USA TODAY sports editors again in February to develop widgets to promote USA TODAY’s coverage of NCAA basketball during March Madness.
These modules were designed to pull in and promote feeds of USA TODAY’s March Madness sports headlines, USA TODAY’s Campus Rivalry blog feed, and the latest scores/game times.
For this widget I added some fun social media tools — like the ability to share the stories from the headline and blog feed right from the widget — which we found to be surprisingly popular according to our analytics tools.
The scores tab also features the latest scores for each game. And when the game hasn’t happened, it displays the time the game will start. The top 25 ranking teams also have a small rank indicator to the right of the team icon.
Design and Development
This widget was developed in ActionScript 3.0 and relied on XML feeds for headlines and sports scores. Flash was used to make the widget easy to embed across a variety of news sites within and outside our network.
Just for fun, I’m sharing (on right) the first draft, bare bones wireframe I made before developing this widget. The green arrow indicates the scrolling interaction for the headlines. The red dots indicate clickable buttons/tab interactions.
I’ve also included two more snapshots of the March Mania widget showing the other tab displays below.
Below are a few examples of how the widgets were used on Gannett’s sites:
Covering the Vancouver Olympics
In November 2009, I was tasked with creating embeddable news modules to share USA TODAY’s coverage of the Vancouver Olympics across the Gannett network and beyond (several outside news outlets have also licensed access to our news packages and widgets).
Several meetings resulted in the creation of Vancouver news widgets to fit many of our popular news templates
. UPDATE: Screengrabs are shown since the widget is no longer dynamically updated with new information.
We decided to include a default tab with the latest Vancouver headlines from USA TODAY; a results tab to show which teams have won, sorted by most recent game; a medals tab with a total medals count for each country, sorted by most medals; and a Twitter tab with tweets from USA TODAY reporters covering the Games live. I also included static links to photos, videos and a TV schedule for the Games. Some widgets included a link to more coverage from the respective websites promoting this module. About 8 custom variations of this widget were made (see versions below) to allow sites to chose which content they want to promote on their sites. Flexibility was key in giving sites options for the content they needed most for Olympics coverage.
About the Design and Development:
The Vancouver Olympics widgets were developed using ActionScript and XML feeds for headlines, medal counts, results and the Twitter feed. Everything from the scrollbar to the custom coverage buttons were developed from scratch in ActionScript 3.0. Flash was chosen because of the ease of use for 3rd-party news sites using the content modules.
I used Tweetr, an AS3 Twitter API library and PHP proxy class in order to circumvent Twitter’s crossdomain Flash security issues. I highly recommend Tweetr for Flash/Twitter integration.
Promotion:
We launched these widgets in early February at the start of the Vancouver Olympic Games and promoted them throughout the Games and for two weeks after. For obvious reasons, this widget is no longer live on any of our sites and has not been updated.
Here’s how some of Gannett’s news sites promoted the widget:
Same ol’ g? Think again: A visual study of the lowercase g
I think my love for the letter ‘g’ started when I did a senior project on The Guardian newspaper in college. Since then I’ve always just loved the letter. Weird, I know. For all of you ‘g’s:
The future and the importance of visual storytelling
I recently got to hear Bill Whyman, a professional ‘futurist’ (not to be confused with Bill Wyman, the bassist for the Rolling Stones) talk about the methods behind the impossible task of predicting the future.
One of my favorite excerpts from his talk was when he said that he “likes to use pictures” to visualize information.
“If I can’t draw it, I can’t understand it. And if I can’t understand it, I’ll never have the chance to communicate it. And if I can’t communicate it, then I won’t get any impact.”
I was inspired when he said this because I’m particularly interested in and passionate about information presentation. I was impressed and encouraged that a futurist disconnected from the journalism and media industries like Bill Whyman believes in the power and importance of visual communication.
Whyman demonstrated how he makes complicated information easier to understand when he showed us the visual comparison he made of three software industries. The comparison he showed us was a very detailed map of the former ‘battle’ between the Java programming architecture, Microsoft’s .NET programming architecture, and Open Source. At first glance, the map looked like a graphical drawing of a couple of mountain ranges and a river. But I thought he did a great job explaining the metaphor of the giant programming industries as mountains covering a range of fields, with rivers as barriers for some crossing-over. I thought this was very effective way to display a comparison of the three industries. I could see all of the thought that went into his visual representation of all of that data he had and was largely impressed by how all of those details enabled him and his firm to correctly predict the success of Microsoft.
Whyman was right on the money when he said, “When you’re predicting the future, you’re telling a story – and you have to have impact and make it compelling.”
His map was interesting and compelling, and accurately represented what he knew about those industries at that time. Being able to present complicated information and data in a way that will be easy to understand makes it easier to make inferences and predict possible outcomes.
I liked that he emphasized trial and error and thinking outside of the box in order to map out certain possibilities. Looking for different angles, breaking things down and iterating is something I actively try to do as a visual journalist looking for ways to creatively, yet effectively inform others — so I was encouraged that he stressed the importance of these methods.
The Future of Interaction Design
Perceptive Pixel medical imaging
As part of the National Design Week, the National Mall hosted a series of design talks this week and so I decided to go and checkout the Future of Interaction Design lecture hosted at the Hirshhorn Museum.
The talk was hosted by Aneesh Chopra, the new U.S. chief technology officer with Jeff Han of Perceptive Pixel Inc. and Andrew Blauvelt of Walker Art Center presenting their achievements and thoughts on the future of interaction design.
Some things I learned:
-
- The Walker produces about 300 design projects each year and leads in innovative interactive design exhibits
- The Walkers “Oracle II” dolphin exhibit is an interactive dolphin that participants can talk to and ask questions — truly interactive.
- Jeff Han (who I unknowingly sat next to at the start of the presentation) discussed the R&D of multi-touch and hi-res interfaces — a very interesting look. We looked at the progression from ATMS, museum kiosks and the iPhone.
- There was also a good discussion on now that we have this multi-touch surface technology — what do we do with large-scale multi-touch technology?
- Examples of current use include CNN’s touch screen, which most agreed was not the best use of the screen.
- Best new examples of application of multi-touch technology are in medical imaging.
- Lastly, Chopra discussed how design can help public policy an education: Bringing interfaces to the next level to design better spaces to learn and communicate virtually. He stressed the need for designing systems that improve productivity and efficiency.
* The best part of attending these discussions in person is getting to meet and talk to the presenters afterward. I got to meet and talk to Jeff Han about his practice and what their working on now at Perceptive Pixel. Very cool stuff. Can’t wait to see what they do next.