Red Pepper Flakes. A blog by Imelda Suriato

Better Views For My Social “News”

Breaking the layout “gray area” in online news streams world.

_________________________

In graphic design classes, you are taught to be friends with the white space, ensure your design has clear entry points, and—my personal favorite—break the gray area. Yes, this is from print design classes I took circa 1995 since interactive design (aka “multimedia”) had yet become a field of study.

Your challenge is a white spread of paper, figuratively and literally, and you have to put all that content in there. Usually that means flowing copy in odd-numbered columns (or now you kids call it “grids”) to create a visually appealing layout. All that crammed up copy becomes “gray areas” and your eyes don’t want to stay on them. It creates what’s called “reading fatigue”—you don’t want to read a long article on The New York Times unless you’re really into it—and that’s why god created focal points, white space and pagination to fight gray areas.

The gray area challenge stays true today with most social media interfaces like Facebook and Twitter. What also is true is the fact that web users don’t read, or more accurately, don’t read most of the copy in front of them. They skim the content, waiting for some words or visuals to grab them.

That’s why content visualization is key in my book. The good kind, of course, and here are some products out there that makes my eyes happy and my visual browsing experience better:

PostPost

PostPost offers an alternate content visualization method for your Facebook. It takes your Facebook news feeds, i.e. links your friends and Pages shared, and lays them out as stories in a newspaper-like display. The design feels familiar—yup, it’s very much like the current trend of displaying feeds in boxes with large image or video and some copy blurb (e.g. The Huffington Post or Times Skimmer from The New York Times, below).

Each “news” bucket is more user-friendly and social-friendly: You can delete news you don’t want via the standard “X” button, videos play in-line and, as quickly, share / like / comment on it. The interface is simple and the user experience is conducive to the ever-impatient social media consumption.

PostPost creator, Peter Yared, sees it as the natural evolution of content consumption. “Instead of displaying what an algorithm on Google, strangers on Digg, or an editor on The Huffington Post surface, we show what your friends think is interesting.”¹ And hopefully triggers social conversations between friends.

And back to the point of this post, it is definitely a better layout, nice visuals acting as clear entry points broken by enough “white space” to actively engage your eyes.

For a look into PostPost, its features, technology and future, read Inside Facebook‘s review.

Paper.li

Paper.li is a news aggregation service for your Twitter. It visualizes the feeds from either the people you follow on Twitter, a Twitter search, or a Twitter list and puts them together like a newspaper. The interface is straight-forward and clean.

Unlike PostPost which requires you to log into your Facebook account to pull your feed, you don’t have to create an account to use Paper.li if you want to read other-created papers. You can search available papers by name, categories, interests and more. Checkout Netflix’s Paper.li using hashtag: http://paper.li/tag/netflix

I like the novelty of it and I appreciate any content visualization method created to improve content absorption. Yes, they can improve the refresh rate, which is limited to daily update instead of PostPost’s real-time update. Yes, there are things to improve upon (read Jason Keath’s hate letter) and yes, there are a lot of nice things that can potentially make Twitter news stream visualization better (read Boost All’s love letter)

For a thorough review of Paper.li, read PC Magazine‘s write-up.

It definitely beats reading rows and rows of 140-character tweets without any discerning way to distinguish content. Looking at the Twitter avatar doesn’t help me in figuring out what the tweet is about.

Times Skimmer

Before the iPadization of web design, The New York Times came out with Times Skimmer in February. This browser-based application offers online readers a new way to read paper. The interface now looks very familiar, with the fluidity of spreading out the content according to your browser window size just like spreading a newspaper as well as paging through it.

Clean, simple and to-the-point, it’s a better way to “skim” the news. Apparently, it is a precursor to the Times’ Chrome app, which became available two weeks ago.

If all these skimming techniques work well, who knew? We may not even want to read the real paper anymore.

We’ll have to look up Google images to find a screenshot of the Times’ paper and say, “Remember this?” to the future generation.

For more on the Times Skimmer:

• NY Times’ own walk-through
• Media Nation‘s review

Conclusion:

In the age of curated consumption, does what your friends know make it valuable? That’s for you to decide. This Facebook vs. Twitter 2010 stats from ZDnet may help you.

I have to admit, these are some starting points to better content visualization for your news feed. Some may call them curated content although I consider them simply as news aggregators. What I like most about PostPost is its real-time updates, which is the main complaint people have on other visual news aggregators such as Paper.li and iPad’s Flipboard.

Well, you have to start somewhere, right? And I like the way this is going for the sake of better design and better user experience.

_________________________

¹Inside Facebook: PostPost Turns Facebook Links into a Socially Curated Custom Newspaper

Photo credit for old newspapers: ShironekoEuro

iPad apps – Automotive brands: Winter 2010

Apple iPad hit the US stores in April 2010 and the landscape of digital experience shifted. The expectation definitely shifted in a big way: It’s not enough to have a website and a mobile application anymore for a brand to be cool, hip or technologically superior, especially if you are a brand that prides itself on technological advancement, such as an automotive brand.

Since I try to diligently keep up with digital trends for myself, my company—Squeaky Wheel Media—and my clients, I keep a lookout on the general trends in industries my clients are in, including the automotive industry for Lexus. Here’s my roundup on what iPad apps are out there in the automotive industry, starting with luxury automotive brands:

Audi — A8 Experience & Car Magazine

The Audi A8 Experience iPad app is an interactive brochure with built-in virtual tour of the exterior and interior. The app allows you to build and price your own custom A8 and  read the latest news & reviews. You can also take the iPad to your local Audi dealer to unlock even more content.

Don’t forget Audi Magazine iPad app, which TheNextWeb gushes about (see Audi Unleashes A 500-Horsepower iPad Magazine). The app is Flipboard-like, allowing you to drag, enlarge, slide… basically slosh the content around however you want.

No wonder it was gushed over even by non-car enthusiasts.

BMW Magazine

The BMW Magazine iPad app is glossy magazine with interactive features that pack a pretty powerful punch. Yes, it lets you read the articles and does it with ease and fluidity. Yes, it has full-screen videos that lets you hear the engine purrs along. But it goes beyond simple magazine reading; it lets you play. User can play with some of the cars and even finger paint one of BMW’s famous Art Cars.¹

BMW doesn’t forget that its car and drivers who love them are part of a certain lifestyle. The app lets you utilize the car navigation feature, guiding you to a restaurant featured in the app’s travel article. Now that’s neat.

Other notables in the luxury automotive brands?

• Bentley — Pure Bentley
• Mercedes Benz E-Class catalogue and don’t forget to checkout the Mercedes iPad Lounge app used at the Mercedes Museum.
• Jaguar Magazine

These three iPad apps are just brochures or lifestyle magazines but boy, do they know how to make you look with: Beautiful photography, attractive layout & typography… anything to make the product truly shines.

_________________________

Now I’m rounding up signature brands in general automotive arena who I still believe always push for better and smarter:

VW — Volkswagen Das

True to its DNA, Volkswagen Das iPad app is an interactive magazine with “zing!” It makes full use of iPad’s native ‘swipe’, ‘tap’ and ‘touch’ interface so users can browse the 360-degree car views, videos and articles, as well as utilize certain interactive features created to highlight a VW model featured in the issue (e.g. a feature to test the ascent angle of the new Touareg in the Summer 2010 issue).

“DAS. is an important building block in Volkswagen’s digital marketing strategy and gives us the opportunity for an interactive dialog with our customers. Our goal is to transmit the fascination of the brand and its products in a new digital dimension, creating a global experience,” Luca de Meo, Head of Marketing at the Volkswagen Passenger Cars brand, said at the launch of the iPad app.²

I know VW lovers are fanatical about their VW and I hope they’re happy with the app. I personally love the different design styles between different magazine issues but hey, I don’t own a VW.

Jeep — 2011 Jeep Grand Cherokee

The 2011 Jeep Grand Cherokee iPad app is basically a touch-based brochure for the latest Jeep Grand Cherokee mode. Continuing with its “The things we make, make us” campaign, the app houses designer interviews, product spec sheets, photo gallery and the story of how the things we make, make us. It also integrates the Jeep brand website, dealer locator, Facebook pages, YouTube channel, etc.

MINI TV

I have to admit, I was really excited when I heard about MINI TV iPad app. Well, I was pretty disappointed. No Flipboard-y swipe, no cool doodats.

I understand it is called MINI TV app so it’s more like a YouTube channel. But MINI never “just” does something; all the stuff it did was always above expectation, so when this app delivers exactly what it said, über disappointed.

Sorry, MINI. You need to do Version 2.0.

Honda — The Honda CR-Z Experience for iPad

The Honda CR-Z Experience is basically an interactive brochure of the all-new CR-Z Sport Hybrid from Honda. The app comes with multi-dimensional views, hot spots, customizable colors and an interface optimized for touching, tapping and swiping. The CR-Z fans seem very happy and the app lets them learn more about their vehicle than they would on the website.

Ford — 2011 Ford Fiesta

The latest newcomer into the iPad app for automotive brands, the 2011 Ford Fiesta iPad app is pretty standard: Exterior and interior 360, videos, locate dealership, etc. One nifty little feature I like is the body graphic, aka tattoo for your car skin.

UPDATE (1.11.2011):

Hyundai — Equus iPad Owner Experience

The latest addition in the automotive iPad race is this beautifully done iPad Equus app by Hyundai, which 16GB WiFi iPad comes standard with every Hyundai Equus as a complete Owner’s Manual, providing its owner with “everything you need to know about this exceptional vehicle is literally at your fingertips.”

The app is beautifully done, with user interactivity that takes full advantage of iPad’s native touch feature to showcase the Equus model.  The iPad app offers many features that other auto-maker should take note of: 3D vehicle walk-around, videos of various interior configurations (e.g. reclining “First Class” rear seats with leg-rests) and interactive demonstrations of vehicle safety features (e.g. directional headlights). It even offers what looks to be something of a driving game.

Packaged in a bespoke leather case with an embossed logo, suede interior, and even kickstand, now that’s what I call a proper iPad app!

Conclusion:

That sums it up for now. There are more out there but we’re just starting, the apps mostly are still version 1.0,  so I’ll keep my eyes open and catch cool ones for the next industry roundup. And with the iPad 2 looming in the horizon, it will be interesting to see how any of apps will take advantage of its 3-axis gyroscope.

Of course we’re not leaving out our client, Lexus. Something is definitely in the works. (Wink!)

p.s. Thanks, PadGadget and TheNextWeb, for being such an awesome resource!

_________________________

¹PadGadget: Updated BMW Car Magazine Hits the iPad App Store
²PadGadget: Volkswagen Launches iPad App

Breaking the Spell

Not dissimilar to writer’s block, designers often encounter designer’s block. This is my take on how to beat your way out of it.

_________________________

We’ve all had those moments when you’re presented with a challenge of coming up with a creative concept that will “blow my mind” away. Excellent, you said. This is what I live for.

So you think hard. You look for inspiration, in all the different shapes and places. Your moleskin becomes your battle ground: You sketch. You doodle. You write keywords to emote the brand personality with notes on color palettes, moods and shapes. You start to see your vision. It slowly takes shape, sketch after sketch, honing down to a clear vision in your mind’s eye.

And it’s brilliant! You’re ready to turn this vision into reality: A beautiful design where everyone can see the exquisite typography, color pairing and graphic treatment. For the web, you want to present this fluid and dynamic website where the user experience is simply intuitive and yet so intriguing, the site visitor will spend a lot of time on the site and share it with their network. And your client is going to think you’re god.

Two days later, with the deadline looming over your head, you’re staring at your monitor for what feels like a long time. Wait, what time is it? Oh no. You’ve been looking at the same file for the past hour and you haven’t moved forward an inch.

Yes, you’ve placed the right navigation here, the images are right, the layout looks just like what you’ve sketched out. It’s just something is not gelling correctly. Maybe the image has to get bigger (or smaller?) or moved to the side (or center?) a bit more. Maybe it should be dark blue instead of cerulean (isn’t that turquoise?). And after you fixed that, what happened next? What if the user clicks on the image? How does the site behave then?

Then you realized where you are. You’re stuck. Yes, you’re stuck in the brilliance of your vision and you went in the one direction without every looking back.

It happened more often and to more people than you think. It smacked me in the face when I was in graduate school, 16 hours before my final design project is due, with a term paper yet to be written. And I learned to do a very hard thing: Break the spell.

Here’s how:

Face the music.

Force yourself to wake up from this “fantastic idea” dream and really face the problem. See what’s wrong with the vision. Ask people around you because often times, you’re so close to the project you don’t see the issue. The whole forest for the trees thing.  Have fellow designers or web-savvy friends help you see what’s the snag and reassess your vision. Get input from people in your target audience demographics.

In essence: Step back, take a break, discuss it with someone new. Ideas need to marinate before they can grow into something great. You just have to be patient.¹

Maybe it’s just not a good execution of a great vision. Sometime it’s a lack of experience or the design was asking for a different style. As long as you can explain to me how you envision the experience to be, I will then assign it to someone with more experience or better style-match to take the concept and realize it. You should ask your manager if you can get some assistance if that was the case. Trust me, if you’re idea is good, it’ll be worth shuffling resources around to get it done.

Trash it.

On the other hand, if your idea and vision is not right, be ready to scrap the whole thing and start over. Sometimes, it’s easier to start a new concept than to fix something that’s not going to work. This is harder to do because it’s admitting that sometimes, your vision may not be great. Or maybe it’s because you didn’t see 3-steps down the road which, in the digital interactive world, is about 2-clicks ahead.

Of course it’s painful but you get over it because the next design process will be clearer. You may not realize that you took notice of elements that are not working. The clean slate allows you to rethink in a different way how to recapture the initial vision you have.

I have a rule that I impose on myself and designers in my team:

If you don’t get the vision in your head into something I can see in 2 hours, let it go and start over.

I believe in rapid prototyping because it helps you translate your vision quickly to see if it works. I’m responsible for running a business that can’t afford the luxury of time like when you’re in school and the assignments can take days or even weeks to complete. Rapid prototyping lets you articulate your vision in a way that allows everyone else to see it and see where it can go. It doesn’t have to be perfect or even complete. It’s for others—including the agency’s stakeholders—to get the idea. You can do all the finessing and polishing when you know it’s going to work.

Try, try again.

I did say you need to be patient for an idea to evolve into something great. You may say my two-hour rule does not reflect a lot of patience. However, to be able to take something you dearly believe is a great vision and trash it takes patience because you may have to do this again and again. It is good practice, and you need practice to get to a place where you can see the issue before you go down a certain path.

It’s like when you were in design class and your teacher took your work and put red marks all over it. (I have to admit, I was one of those teachers.) It’s frustrating because you thought so hard, worked so hard, and it seems like everything is up for picking. It’s just that we, as teachers, mentors or creative directors, can sometimes better see the issue because we are not so close to it. It is not our vision to baby; It is our job to see the vision realized to the best possible outcome.

And in the end, the client can as easily tell you to scrap it and start over. It happens all the time to everyone in this profession. Even to the best of us.

Trust me, you’ll get used to it. Now go back and give me another take on that.

_________________________

¹ Communication Arts: Drawing, Cutting and Pasting

Photo Credit: Overcoming Writer’s Block

Wanderfly: Spark Your Wanderful Journey

I haven’t gone on vacation in what seems like forever (Wait! It’s been more than 2 years, so it has been forever!) so when I saw Wanderfly via CoolHunting, I went ooh.

A simple interface greets you when you land, that makes it feels less of travel-planning, more of “show me what’s out there” based on your interests. The pretty vacation spot photo in the background also helps push the right “I want to be there right now” spot in my brain.

You choose your departing city, time frame and budget, and pick your heart’s desire. Mine: Five days in November, on a beach with food, spa and culture. From 1,200+ destinations in their database, Wanderfly told me that there are 22 spots I’d like best, including Fes, Morocco and  Half Moon Bay, California. To narrow down the results, you can click on the ones you’re interested in and then compare them in a simple next-n-previous-arrows browsing mode.

Wanderfly also offers rich, personalized content for each location, utilizing its partnership with the likes of Lonely Planet, Expedia, FourSquare, Not For Tourists, etc. to provide brief city guides with suggestion for accommodations and flights. Connect to Facebook and it scans Facebook to show you which of your friends are in each city you’re exploring. There are News via Twitter, Weather and coming soon, Destination Reviews, Travel Tips and Currency Conversion. And, for each of the activities you selected, there are recommendations from Yelp, Eventful and, just recently, Find. Eat. Drink.

Seems like this newbie—officially launched yesterday—is doing things right. Everything seems so simple and intuitive. Wanderfly motto is to help you discover new experiences. It wants to Spark Your Journey and I believe it did.

“Certainly, travel is more than the seeing of sights; it is a change that goes on, deep and permanent, in the ideas of living.”

—Miriam Beard

So go ahead. Be adventurous. I’m so ready!

p.s. I found that quote at Wanderfly, while it was searching for my fabulous journey. How appropriate.

Via CoolHunting

Timberland: Best foot forward w/ 3D & more

Timberland is pulling all the stops for its eco-friendly Earthkeepers collection with “Nature Needs Heroes” campaign from TV and print, to social media and a microsite with 3D technology. I first thought it was just a marketing ploy, using the “3D” term to entice visits. I’m glad to find that I was wrong.

Sure you need a pair of 3D glasses, which you can grab at its retail locations. I’m pretty sure it would look dope—no, I don’t have 3D glasses laying around in the office so I’m seeing it 2D—but I can totally “see” the 3D experience.

The landing page puts you in the right spot, with a guy floating in the air attempting to grab a plastic bottle (eco-friendliness is the theme throughout the campaign). You can rotate him and at different points in the rotation, different elements are highlighted, from the apparel to the video. The product detail view offers another excellent use of 3D modeling with 360°-view (the boots one is very cool with dual-angle view), which works great even while zooming.

Yeah, it loads a little slow, but trust me, you want to see this. It is quite impressive.

After seeing this, I decided to checkout the rest of Timberland.com and I was quite surprised with the transformation. (Note: Last time I visited the site was in early spring).

Timberland—Women’s

Timberland Women’s microsite welcomes you with a full-screen video of models enjoying the outdoors and the message “Go out and be you”. The overall branding is right on: The look is fresh and natural yet sophisticated, just a tad rugged to reflect the passion for the outdoors, using natural elements like kraft paper as a nod to the eco-friendly philosophy of the brand and the handwritten notes add a touch of youth and a warmer feel.

What I like most is the Get The Look section where you can browse through the campaign photos and click on the different marked items on the photos. The Gallery showcases different looks by women who don’t look like models, a “real people” aspect to them which I found pleasing. There’s also a behind-the-scene, get-to-know-me approach with On Location (B-roll of the campaign shoot) and Meet the Designers (video interviews with the designers behind the apparels).

Timberland—Heritage

Timberland Heritage offers a look through the brand history in nice sepia tone spiked with social element: You’re invited to “Become Part of Our Story” and you’ll be part of the photo montage on the microsite. On top of that, there are other pretty interesting things to check out, from the videos to “The New Classics,” which contains Build Your Own, the Abbington Collection and the Timberland Boot Company.

Timberland—Build Your Own

Timberland Shop is pretty standard e-commerce site with a pretty cool “Build Your Own” with “SHOE” or “BOOT” options. (Still a bit buggy—I encountered a few broken links when trying some of the women’s boots.)

Timberland Boot Company

Meanwhile, the Timberland Boot Company is a neat little microsite that showcases special collections that are inspired by a time of transition in New England and Northern England. The sections of the microsite are displayed as framed art on a white-washed, weathered wall in tune with the pioneering spirit feel. This type of draggable Flash site has been done many times before so the microsite is just a nice little thing to look at but, my goodness, those boots are fetching!

That wraps up the Timberland re-vamped online brand. Don’t forget to visit Earthkeepers to join in the movement and meet “like-minded people from all over the world intent on doing the little things and the bigger ones.”

I’ll leave you with these fun facts from Timberland Eco-Love Survey in April 2010:

The survey found most men have high expectations for the women they date or associate with:*

• Must Love the Earth. Fifty-four percent of men would question whether to start a relationship with someone who litters. Others would ponder if a woman was worth dating if she doesn’t recycle (25%), leaves the lights on when not at home (23%) or drives a gas-guzzler (21%).
• Guys Dig Green. One-quarter of men think “green” women make better life partners (24%) or friends (27%) than those who aren’t so environmentally responsible.
• Plan an Eco-date. Grab your hiking boots and a shovel—more than 40 percent (41%) of men would be more interested in an “adventure” date like hiking or rock climbing or a charity or service-focused date like tree planting, rather than the traditional “dinner and a movie” date.
• Walking the Green Carpet. When it comes to today’s hottest “eco-lebrities,” men say Cameron Diaz (27%) and Kate Hudson (26%) would inspire them to go green.

*Source: The Timberland Company (via Market Wire)