Viget Inspire : The Design Lab

You Should Know: Amy Martin

2009-10-23T17:59:00Z

I was introduced to Amy Martin's work about a year ago, but I didn't know it at the time. Emily came into the office with a beautiful poster created for the 2009 presidential campaign. It was striking, especially when compared to the typical political signage we've gotten so used to ignoring. It wasn't filled with stars and bars or eagles in flight. It wasn't aggressive or pushy. It wasn't even the traditional red and blue. It was soft and uplifting, capturing the delicate sense of hope many of us were feeling after years of frustration. It stood out to me even in the sea of great art being created in support of Obama.

Flash forward a year or so... I was sitting here doing some design research when I came upon a set of posters designed for The Echo Park Time Travel Mart and 826LA, the Los Angeles branch of David Eggers' 826 National network of non-profit youth tutoring programs. (You've probably heard about their creative fundraising and branding strategy. Storefronts like the The Brooklyn Superhero Supply Co and the Greenwood Space Travel Supply Company have gotten a lot of buzz on design blogs, and rightly so.)

I dug a little deeper and discovered that Amy Martin is the super talented illustrator behind the posters. She's currently in LA working as a Senior Designer at Knock Knock. Her previous gigs include Design Editor at LA Times, Feature Designer for the Detroit Free Press, and freelance for the likes of The New York Times, McSweeney's and TBWA/Chiat/Day. She designs and illustrate books, magazines, posters, packaging and products.

Last year's poster collection had a travel theme, and she absolutely nailed the vintage travel aesthetic. Her use of color is fantastic and the set of 5 is very cohesive. I'd love to see them hung together in a hallway. MY hallway, to be specific.

This year's WPA-style "be a good citizen" posters are equally tongue-in-cheek, with slogans such as "Keep The Present Inevitable". I love the little jokes hidden within her illustrations. (Note the frog with three front legs...)

Both sets of posters are for sale at 826LA's store, they're only $19.95, and proceeds go to charity. Does it get any better?

You can see more of Amy's illustrations on her blog and in her Flickr photostream. I'm looking forward to seeing more of her work in the future!

Additional reading:

Echo Park Time Travel Mart

Interview with Amy Martin on GraphicDesignr.net

826National

826LA

Book Review: Caffeine For The Creative Mind: 250 Exercises to Wake Up Your Brain

2009-10-20T13:00:00Z

From time to time creatives in our field are bound to run low on creative juice. Like many others, I've recently felt my brain needing a good creative spark to get going. I started looking for a couple of outlets that would give me this creative spark with some requirements in mind: something I could do fairly quickly and preferably away from the computer screen. I wanted to get back to the basics of being creative.

As luck would have it, I came across "Caffeine for the Creative Mind: 250 Exercises to Wake Up Your Brain" by by Stefan Mumaw and Wendy Lee Oldfield.

This book is meant for any designer or creative type who is looking for easy ways to jump start their creativity. The book is packed with simple and conceptual 15-minute exercises designed to help readers stimulate their creative brain.

Each exercise allows the reader to use markers, pencils, digital cameras, and more to develop a creative mindset. The book has a very edgy sketchbook design to help illustrate each exercise.

What I Liked:

I have tried a number of different exercises just about every morning since I started reading the book. I can honestly say that it does get the brain going. It is like caffeine for the brain; how about that! I like that the exercises are all relatively quick, and most of the time they don't require anything that you can't find laying around on your work area.

A nice side effect I noticed while working on these exercises was that they also worked as a great stress reliever. Being focused on a particular creative exercise for 15 minutes completely takes your mind off anything else and is very enjoyable.

I also found the interviews with different creatives in the field, which are placed throughout the book, to be very insightful. They cover useful information such as how they deal with satisfying their creative needs.

What I Didn't Like:

Overall I didn't have too many gripes. My main issue would probably be that a few of the exercises are slightly more elementary than others and not quite as useful.

The edgy sketchbook design for "visual allure" can be over the top on some pages and make the content slightly hard to read. A few pages are just loaded with multiple fonts in various sizes and weights that also make it a bit distracting.

Takeaway:

This is a great book for anyone looking for a good creative spark. I would definitely recommend this for anyone who is looking to spend a few minutes each day away from the computer to stimulate their brain doing quick, creative exercises.

Preview and order the book here:
Caffeine For The Creative Mind: 250 Exercises to Wake Up Your Brain

Bonus:

How about we try an exercise from the book!

The Doodle

Perspective is a key ingredient in creative thought. Everyone has a different perspective on everything even if it's only slightly different.

Use your own unique perspective to finish this drawing. Turn the paper to whatever angle you desire. There is no "right side up." Simply document what it is you see and finish the drawing using pencil, pen, crayons, inks, or whatever tool you'd like.

Examples:

Proof that everyone has a different perspective. Here is what other featured interviewees from the book did:

Timeline Views of the News

2009-10-06T12:30:00Z

I've recently been doing a bit of research on real-time, data-driven timelines. Here are a few of the solutions that generally fall into the news/search results category. These are less visual and more functional, but that's what I was after in this case.

So What?

With so much buzz about infographics, storytelling, rich experiences, and the availability of data, it seems there's renewed potential in the timeline. As I've eluded to, real-time and data-driven seem to me to be the keys to that potential. As designers, we know that we can sit down with a list of dates, a series of events, and a collection of visual assets, and we'll crank out something that's engaging. I'm keeping an eye out for the interesting things that happen when we marry that visual, engaging component with the power of real-time data. I started with news results timelines here, but I'll be sharing more real-time timelines in a later post, so stay tuned. In the meantime, point me to any good examples that you know of.

Experimenting on Your Own

If you're looking to play around with something yourself (without starting from scratch), The Simile Timeline is legitimate and seems to offer a lot of possibilities:

Insanely Awesome ExpressionEngine Tools You Can’t Live Without

2009-09-30T14:11:00Z

Recently, some people have asked me how we build ExpressionEngine sites. Although how we build a site varies with each project, there are definitely certain add-ons we find ourselves using all the time. There are so many great ones out there (and new ones being released all the time) I thought it would be cool to share some of them in a blog post. Feel free to add your comments about the ones you like to use.

12 Inspiring ExpressionEngine Tools You Have to Use Before Dying

Structure

Structure is a great way to build your ExpressionEngine sites. It lets you create a nice visual site tree out of your pages. We have been using it on all our projects and our clients seem to really like it. More importantly, it gives you the ability to break away from EE's templates and manage pages through Structure. It also lets you easily make breadcrumbs and navigation for your site based on Structure's page hierarchy. Get Structure »

FieldFrame

FieldFrame by Brandon Kelly is a collection of very useful fieldtypes for EE such as checkboxes, radio buttons, multiple select drop-downs, and something called "FF Matrix" which lets the user create tabular data fieldtypes. Get FieldFrame »

nGen File Field

Also a field type for the FieldFrame extension, the nGen File Field lets you upload files to your entries and is better than the default ExpressionEngine file upload field. It also integrates into FieldFrame's FF Matrix so you can create image galleries (see the tutorial at the bottom). Get nGen File Field »

WYSIWYG Editors

We have constantly debated which is the best WYSIWYG editor to use in ExpressionEngine. It seems to be one of the major things clients complain about when they compare ExpressionEngine to Wordpress. Recently, Brandon Kelly released WYGWAM which looks really promising and is based on the CK Editor. If you're more inclined to using TinyMCE, there is Leevi Graham's LG TinyMCE and the MX TinyBrowser Field for TinyMCE by WiseUpStudio which integrates with FieldFrame as a fieldtype.

Gypsy

When making weblogs, you might notice that you make a lot of custom fields that do the same thing. Gypsy, by Brandon Kelly, allows you to share custom fields among many weblogs so you don't need to keep duplicating them. Get Gypsy »

imgSizer

Usually a client wants to upload their own images, but it is unrealistic to expect them to pull the image into Photoshop and crop or scale them to a correct size. This plugin, by David Rencher, allows you to set a height, width, or both and it will scale the image proportionally when the page renders. Get the imgSizer plugin »

CM Template Editor Extension with EditArea

A lot of people make their templates external files for easy editing, but sometimes you want to just leave them inside of ExpressionEngine. This extension integrates the source code editor EditArea and tranforms your template editing areas into a real text editor. You can highlight code, indent with tabs, search, and go full screen. Get CM Template Editor »

Freeform

If you're putting forms on your site, you're definitely going to want to check out this module from Solspace. It is a reall easy way to make a contact form (or any form) for your site. Get Freeform »

LG Better Meta

This extension gives clients more control over their site's search engine optimization and can display default meta information for when the client doesn't add anything. It also allows you to easily make a sitemap. Get LG Better Meta »

8 Must Have Amazing ExpressionEngine Tools You Need to Survive on a Desert Island

Playa

ExpressionEngine comes with the ability to let you relate entries using the Related Entries tag, but it is limited to a single entry for each relationship. Playa, by Brandon Kelly, allows to to make multiple relationships among numerous weblogs and has a easy-to-use interface. If you don't want to purchase a license for Playa, give the Multi Relation extension a try. Get Playa »

Solspace Tag Module

Just like the name says, this module allows you to add tags to your entries. You can show all the entries that have a specific tag, show tags that belong to an entry, and easily create a tag cloud out of all your tags. Get Solspace's Tag Module »

Cloner

Cloner, by Paul Burdick, duplicates entries so you (or more imprtantly, your clients) don't have to. Get Cloner »

MD Eexcerpt

If you want to limit words in a post but want to keep the HTML in tact, check out TrunchHTML. Usually we want strip the HTML when showing an excerpt of text so we have been using Masuga Design's MD Eexcerpt. Get MD Eexcerpt »

1 (Really) Clever Tutorial About Using 4 Awesomely Useful Tools

Here is a cool video showing how you can combine some of the tools above to create an image gallery. Watch it on Vimeo »

4 Must Have, Exquisite, and Captivating ExpressionEngine Resources

There are constantly better tools coming out for ExpressionEngine all the time. Keep up to date by grabbing RSS feeds from ExpressionEngine sites such as EE Insider and Devot:ee. Also following people that use ExpressionEngine on Twitter is a great way to get the latest news, such as EE Hub and codeigniteee.

1 Stunning Conclusion

Although these add-ons aren't necessary for making a good ExpressionEngine site, they make building (and using) an EE site even easier. These are just a few useful tools we have found ourselves using time and time again. Do you have certain plugins, extensions, or modules that you have found helpful when building an ExpressionEngine site? Let us know!

BONUS ROUND!

After putting up this blog post, there have been some great comments about other ExpressionEngine tools. We actually used the suggestions in some of our projects, so thanks for telling us about them! Here is a recap:

REEOrder allows you to easily re-order entries. Doug Avery found this modification by Tim Kelty that makes it play nice with Gypsy.
Category Checkboxes is an extension that turns the category multi-select box on the Publish page into checkboxes.
Low's Seg2Cat loops through the segments of the current URI, matches them against existing categories, and registers the matching categories as global variables, which you can use in your templates.
Cloner gives you the ability to easily duplicate entries.
Boomerang, by SmoothFunction, brings email marketing into ExpressionEngine templates along with tracking and reporting.
Mozex allows you to open any Firefox textarea in Textmate. Doug Avery is a big fan of using the Mozex Plugin to edit EE templates. It's All Text! Firefox extension is another option.
The ExpressionEngine Client Guide by Kyle Racki is a really useful guide you can give to clients on how to use EE. Kyle was even nice enough to provice the InDesign file so you can edit it.
A solid list of ExpressionEngine addons was suggested by Leevi Graham.
LG Replace is a plugin, also by Leevi Graham, that allows you to insert random pieces of content into full blocks of content (or put "needles" inside a "haystack").
Cem Meric is keeping up a list of his favorite EE addons.

Making It Work : 7 Things I Learned About Design From Project Runway

2009-09-25T12:56:00Z

After an agonizingly long wait, Project Runway is finally FINALLY! back on the air. That means a whole new season of tight deadlines, crazy challenges, and design drama. Sounds more than a little familiar. Although it's about fashion, designers of all make and model can identify all too well with Project Runway. There's a lot of real life mirrored in the reality show: you get a project and you need to hit the ground running with an idea, you then have a limited time and budget in which to realize it, and before you know it you're presenting something that you hope is presentable. Over the years Project Runway has inadvertently illustrated a number of lessons that apply to graphic and web design just as much as they do fashion. Here are a few that have stuck with me:

Don't Lose Your Own Aesthetic For A Client - This is one I think about often, trying to get the perfect balance between the tastes of both client and designer. The best end result is always a marriage between the client's ideas and your own. On Project Runway, designers often have clients that are exacting down to the last detail, fancying themselves the designers. The client may end up happy, but the judges and everyone else almost always aren't so impressed. On the flip side, when designers do their own thing, completely ignoring the client, they end up with a miserable client who didn't get what they wanted and who lets the judges know just how unsatisfied they are.

If you have no consideration for the client's own brand or needs, you end up with a design that's all you and doesn't accurately represent or sell them, which was the primary goal. Besides, an unhappy client likely won't recommend you to anyone anytime soon. But don't forget that your style and skills are what make you the designer and what you were hired for either. Aim to create something both the client and you are equally madly in love with.

Just don't be Jeffrey and make a client cry - BravoTV.com

Make It Work - There's always constraints we have to work in for any project. Maybe minor, maybe not. Some of the Project Runway challenges take constraints to the extreme: only use flowers to make a garment, only paper, only things in the room, etc. Some designers on the show spend their time complaining and fighting their unusual materials, while others embrace the unique challenge and use it as a chance to try something new. Try to look at working within constraints as an opportunity to do something different and get out of your comfort zone. Let constraints stretch your creativity, not squelch it.

Design with plants! - BravoTV

Make It Work In Time - Have the confidence to commit to your concept. Too often on Project Runway, someone will completely trash their design half way through and start over with half the time left. (Someone just did it on last week's episode, for goodness sakes!) Sometimes it's tempting, but I've learned the hard way that repeatedly starting over and re-thinking my entire concept for a project after a certain point in execution is just exhausting and frustrating. Don't waste your time and energy, both physical and creative, when you'll end up with something that is rarely as strong as your original piece could've been.

Details, Details, Details - They're the last thing you want to worry about and the first thing others notice. On the runway, it's the kiss of death if Nina notices a shoddy hem or a loose thread. You always gotta watch for the little, minor, last-minute details. And if you can make them something special instead of merely presentable, you rock.

"It worries me." -Tim Gunn

Get a Second Opinion - Ideally from Tim Gunn, but I know that's probably not feasible. You're usually so close to your own project, so deep in it, that you can miss the forest for the trees. Or the trees in the forest. Or something. Getting a fresh set of eyes to take a look and give you a quick critique can only help your design.

That's a big talk...you just had...'da-da-da-da-da-da-da'. The talk doesn't match the dress. -Jay MacCarrol

Your Work Should Speak For Itself - You can have a lot of ideas and a solid concept, but it's equally important that you can translate it into the design and explain it in a way that any client can digest. Like Kara Janx in season two with her New York inspiration dress. She had put plenty of thought into it: she wanted to convey caution, danger, and "like, bam!" but all we saw was a plain black dress with a yellow stripe. You can't give a five minute speech about what you were trying to achieve to everyone who looks at your design; your work needs to be able to do all the talking for you.

A dress that doesn't match the talk - BravoTV.com

Inspiration Can Come From Anywhere - If a beautiful dress can come from a dirty street puddle or a vase of orchids or candy wrappers, so can a beautiful website.

Viget Design Mob: Fabric, Patterns, and Spoonflower

2009-09-24T17:20:00Z

Do you ever get the itch to try something new? Maybe it's something outside of your comfort zone stylistically or maybe its taking your well established style into a new medium. These kinds of things are exactly what we try to do when we have our Viget design mobs. Back in July we carved out an afternoon to work on some fabric and pattern ideas that we could host on Spoonflower, a custom fabric web site (and Viget client). With limited time (4 hours) and preparation (1 week) each designer brought their own unique approach as explained here:

Blair

Most of the sewing I do is bags: handbags, messenger bags, laptop bags, camera bags, etc. One of the biggest challenges when I'm making a bag, especially for myself, is finding the perfect fabric. A handbag's going to be by my side every day, everywhere, both out on the town and at the supermarket, for hopefully a couple years. Basically, it needs to suit my style and have some personality. So for this challenge my goal was to create a pattern that would make for an awesome bag. Something fun and bright, with a pattern big enough that it wouldn't visually blur together from a distance. I'm currently in love with the rough cut-out, Saul Bass style. And with the arrows and airplanes, I obviously had Catch Me If You Can on the brain. It's something a little different and more fun than the ubiquitous paisley and floral prints; it also practically begs to be made into some kind of travel bag, maybe a weekender or train case.

Blair's plain pattern. Embiggen

Erik

This pattern is a mix of three things I really love: patterns, autumn and the Tour De France.

Patterns I like patterns. Perhaps it's the order of 'em or that I have a really boring personality, but I've always been drawn to the uniformity and limitless possibilities in patterns.

Tour De France This pattern in a lot of ways is drawn from the polka dotted Mountain Jersey of the Tour De France. It may not be the most coveted jersey in the race but in my opinion it's the most attractive.

Autumn The color scheme was drawn from nature and my favorite season. Whether it's sights, sounds, tastes or smells autumn has a lot to offer for the senses. The sights obviously refer to the wide array of reds, greens, yellows and browns you see all over nature during autumn.

Erik's dots pattern. Embiggen

Peyton

I wanted to take an interior design slant toward my exploration. I enjoy the idea of picking a single interesting item and then designing a room around it. So in this case, I wanted to use the fabric design as that piece. I went for a design that felt more painterly and less vector-like. I also worked with the idea that I'd produce a fabric wall hanging, a bed comforter, and a pillow sham. The design came together pretty quickly since there wasn't vector work involved, and I spent a bit of time mocking up roughs of what the interiors might begin to look like. In hind site, I would probably just spend more time on the fabric design if I were to do it over again. A fun exercise for sure. It's especially interesting is to see how a design stands alone and then how it changes depending on how it's repeated.

Peyton's pattern. Embiggen

Mindy

I've been fascinated with Spoonflower's capabilities for a long time and couldn't wait to jump in to this project. While printing a repeat pattern is cool, the idea of using the service to create something more "out of the box" appealed to me more.

I've got a 4-month old baby at home. Baby stuff is, in general, pretty crazy looking. Neon! Zig-zags! Ten mismatched patterns on one little blanket! You can also find the total opposite - super neutral, beige, and boring. Finding anything in between is hard to come by. I decided to design my own baby play mat. I wanted to strike a balance and create something visually stimulating to him without offending my own eyes. I used bold contrasting colors, a big face, and a polka dot pattern to appeal to my "client". He is still developing his vision and gets jazzed about that type of design.

I plan to cut out the design and quilt it into a comfortable, beautiful toy he can drool all over. The clouds will be cut out and stuffed to become a little pillow. When he outgrows play mats it can become a wall hanging.

Mindy's sunshine rug. Embiggen

Jim

Recently I've been heavily contemplating getting a tattoo that pays homage to my cultural background. My tattoo idea would consist of Baybayin, a pre-Spanish Philippine writing system. I'm completely mesmerized by the unique shapes that make up each individual character in the writing system. I also figured that this would make for a pretty unique fabric pattern as well. I decided to combine an element of the Filipino flag, a sun with eight primary rays, each containing three individual rays. The Baybayin script would then circle around the shape to create an almost hypnotizing effect. I can almost visualize Lapu-Lapu (a famous Filipino Chieftain that fought Portuguese explorer Ferdinand Magellan in 1521) rocking a loincloth made from this fabric!

Jim's babayin pattern. Embiggen

Brian

With the weather getting cooler around these parts, I'm looking forward to rocking pajama pants more on lazy Sundays. Its no secret that I've been a huge fan of video games over the years, much of which is due to growing up with an NES. I wanted to try to bring those two loves together with this pattern. The iconic two-button NES controller was something that seemed pretty iconic, so having a repeating fan of "trollers" that covered a piece of clothing seemed a perfect way to obtain that nice soothing geometric pattern form afar, but reveal one's true nerd nature close up. Alongside pajama pants, inner fabric for a game basket, table cloth for a game stand, and a bandana are just a few ways to keep it 8-bit around the home.

Brian's NESsin pattern. Embiggen

Owen

I am a constant sketchbook user. My favorite thing/obsession is to doodle up a starting image without thinking about what I'm sketching, then go back and fill the page around the creature/person/item that I started with. This fellow became my interpretation of the Jabberwocky from Lewis Carroll's Through the Looking Glass.

While this is not a traditional pattern, I found that when printed by mirroring the image top and bottom the resulting pattern made for an interesting visual. Initially the imagery can be overwhelming, but at a second glance you can start making out the different elements that make up the whole. I think that's a fitting tribute to the Jabberwocky.

Beware the Jabberwock, my son! / The jaws that bite, the claws that catch! / Beware the Jubjub bird, and shun / The frumious Bandersnatch!

Owen's jaberwocky patterns. Embiggen

Tom

I spent a week in Crescent Beach, FL this past summer at the old beach house of deceased author Marjorie Kinnan Rawlings, no less. While there I was struck by a room (the water closet) that had a sea turtle theme to it. Strangely it got me thinking about oceanic animals and how it would be fun to have a room themed with cephalopods. At the same time, I wanted an excuse to work on my sketching skills. The results were these octopus patterns. (I think I still need to work on my sketching skills)

Tom's octopus patterns. Embiggen

See these designs in action on our Spoonflower profile.

Previous Viget Design Mobs

You Should Know: Charley Harper

2009-09-21T14:02:00Z

I'll admit it... Old Navy introduced me to the art of Charley Harper (1922-2007). Actually, I take that back. Dooce introduced me to him in this post, but she was linking to a $130+ book I could never bring myself to buy. So when Old Navy let Todd Oldham, a superfan, go nuts and create a line of kids stuff using Charley Harper's artwork, I immediately ran out and bought his designs for all the little people on my gift list.

When I dug deeper, I realized why his work felt so familiar. It was found in Ranger Rick, one of my favorite magazines as a kid. And in the Golden Book of Biology, a book I can remember pouring over at the local library. (If anyone wants to buy me an extravagant Christmas present, a gently used copy goes for about $150 on eBay.... just sayin'.)

From the Golden Book of Biology, 1962

Born and raised on a farm in West Virginia, he studied art at the Art Academy of Cincinnati. His subject matter was primarily nature - birds and other wildlife - which he rendered in a signature style he named "minimal realism". He started his career in a design studio, and it shows. He was influenced by Cubism and Minimalism - and probably designers such as Paul Rand - and is considered a part of the American Modernist movement. About his style he says:

I don't try to put everything in; I try to leave everything out. I never count the feathers in the wings; I just count the wings.

He is known for his limited edition serigraphs, but also produced commercial work for tons of magazines in the 50s, 60s and 70s including some great stuff for the Ford Motor Company's magazine, Ford Times. He was commissioned to do a series of posters for the National Park Service and illustrated Betty Crocker's Dinner for Two Cookbook. He worked as an artist and designer for over 60 years, so you'll find his work in a variety of places.

His way of seeing speaks to me as a web designer. I love his abstracted geometric forms, precise symmetry, bold color palettes, and playful use of positive and negative space. The images are both elegant and amusing. You can't help but laugh at his mischevious cardinals and smiling ladybugs. He distills things down to their simplest form, yet still conveys everything necessary to make the animal and environment immediately identifiable. It's all the more impressive when you realize he didn't have Adobe Illustrator to do the legwork for him. As a pixel-pushing designer, this quote from Charley resonates with me:

In a world of chaos, the picture is one small rectangle in which the artist can create an ordered universe.

I received a copy of "Beguiled By The Wild: The Art of Charley Harper" as a birthday present, and found an entirely new reason to crush on Harper. For each piece of art he has written quirky little puns that entice you to look at the work in a new light. Often, the words help you to find something in the piece you didn't notice originally. His writing is both cheesy and lovable, and kind of Suess-like. Full of tongue twisters and incredibly fun to read aloud. Take this one for example:

Whitecoat
Welcome to the world, little whitecoat, baby harp seal with tearful eyes. Warm and cuddly in your immaculate pelt, you are helpless and defenseless on the arctic ice; you cannot swim, you can scarcely crawl. And you are so trusting. We think you are beautiful. We love you. We hear your cries of pain and terror under the hunter's club. But we would wear you. Goodbye, little whitecoat, from the endangering species – those friendly folks who bring you to extinction.

You can find more of Charley's puns here or in the book.

I'm glad Harper's iconic work has made it to the masses and is being reinvented in new and interesting ways, like this amazing line of skateboards from Habitat:

Almost makes me want to skateboard. Then I remember I'm 30 and nearly killed myself when I tried at 16.

Harper was a seriously talented guy, sure to inspire many designers to look at their work in a new way. If you're not already a fan, I definitely suggest you get to know his art and style.

Explore More:

Places to Get Prints:

*Note: I'm hoping to make this a regular series. If you have an artist or designer you would like to see profiled, let me know in the comments below!

Palm Pre WebOS Apps: My First Look

2009-09-11T20:31:00Z

Viget does mobile apps. I don't (yet), but I've been chomping at the bit get into them. We all know the big name in mobile apps right now, however, that way of developing apps is too complicated for a front-end developer like myself. This June I was pleasantly surprised when I picked up a new phone called the Palm Pre that runs mobile apps made entirely in HTML/CSS/Javascript on an operating system called WebOS. Recently, I had my first chance to dive in and take a crack at building an app.

The App

To get my feet wet I didn't want to start with something too complex like Koi Pond or Fantastic Contraption like the iPhone has(and which are probably too complex for a javascript app). As a runner I started with a simple stopwatch. The app consists of a large digital clock with start/stop, lap split and reset buttons. The lap split buttons will take splits which are displayed in a list below the time. The workouts themselves can be saved and retrieved for more detailed information like "best lap", "average lap" and "total time" as well as all the individual splits.

The Technology

Like I said these apps use all the existing web standards. They are rendered using the Webkit engine so the results work the same as they would in a web page. The workout data is all stored in a SQLite table which is part of the new HTML5 spec and works just the same in the WebOS environment. I need to say that the app does use a stylesheet but the only styles I've applied here were for positioning and for the size and color of the large readout font on the initial view. Everything else(buttons, lists, etc.) with the exception "+" and old fashioned stopwatch icons are the standard WebOS widgets.

The Platform

Now I say the apps are built using HTML/CSS/Javascript, which is nice, but that doesn't mean you can run them right in the browser. These apps are build using the MVC design pattern, which you may be familiar with if you've ever worked on large applications in Rails, Actionscript, Java and others. To run the apps on the phone they need to be compiled into an .ipk file(like .exe or .dmg) and installed on the OS. This process is taken care of in an emulated environment as part of the recently available Mojo SDK. All commands can get taken care of (with little headache) in the command line.

My Opinion

As someone who is a front-end developer and has no Rails/PHP type knowledge developing a mobile app on WebOS was really very easy. Since it uses a language I already use the learning curve was really limited to the Mojo framework as well as the Mojo components. For those of you who have great ideas for a mobile app or are just interested in exploring but feel iPhone apps are out of your league I encourage you to try a WebOS app.

The Source

Source files for the Stopwatch application.

Save For Web, Simply

2009-09-01T16:57:00Z

Since "The Mysterious Save For Web Color Shift," I've received 200 comments and weekly emails about the theory. Thanks to readers, I've learned a lot about the original issue, and (perhaps, more importantly) how to explain it.

TO RECAP: In the post, I suggested dumping some of Photoshop's color management settings (by choosing your monitor profile in Color Settings) and saving without ICC profiles. These settings make it hard to predict how your final colors will appear on the web, or even between browsers. The strongest responses pointed out that, in fact, ICC profiles are awesome, and they do a great service for photographers and illustrators who want to faithfully present their colors. I countered that from a practical web-design standpoint these profiles do more harm than good — and, well, things just kept going and going for a while.

I wanted to post a follow-up consolidating all knowledge on the subject and declaring my Lofty And Supreme Rightness (and perhaps immediately turning off comments, thus securing said Rightness), but the emails we've received have led me in a different direction. Most referenced difficulty applying the settings, testing them, or even understanding the original mechanics of the problem.

In writing my responses, I found myself testing more and explaining less, trying to show a simple list of results to clarify the problem. I started sending PSDs for readers to poke around with, then refining these into a single chart. The chart attempts to explain what differences the settings make, and what their advantages/drawbacks might be.

The Variables

I worked with mixes of the three settings I discussed in the original post: ICC Profile (which embeds your color profile in the image, and is only available on JPGs in CS3), Convert to sRGB, and the color profiles themselves. By default, CS3 had Convert and ICC options checked when I installed, but this may have changed in CS4 (let me know if you've tried it!). The left side of the grid shows settings I used, and the right side shows screenshots of the results from various contexts. "Proof Colors" means setting "View > Proof Setup > Monitor RGB" to use as a color preview.

On Embedding Profiles

Embedding ICC profiles shows a "true" copy of the original colors, but only in profile-aware apps like Safari and FF 3.5. As you can see in the first row, this shift won't apply to any CSS-set backgrounds or borders around the image. In a lot of cases, this doesn't matter, but when it matters it's a huge pain to work around. This is the main reason web designers might want to leave profiles out of images that need to match browser colors.

As you can see in the Safari column on Rows 5 and 7, sometimes an embedded profile might look perfect on one machine, but not on another. The two purples match locally because my calibrated view matches the embedded profile exactly — but on my neighbor's machine (see the footer), this won't be the case.

On Converting to sRGB

Converting to sRGB did nothing on the first 4 rows (they were being edited in sRGB to begin with, so it makes sense), but it didn't play so nice with my iMac profile. This setting doesn't seem too useful: Either it works but you don't need it, or it does more harm than good.

On Editing in sRGB vs. Monitor Profile

This comes down to a matter of taste. As you can see, Row 4 produced great, predictable results as long as you remember to turn on Color Proofing while you're viewing things (and in CS3, it's off by default every time you start Photoshop). This indicates that sRGB is workable, you just need to be careful that you understand what you're seeing.

I still prefer the monitor profile (Row 8), it simplifies the entire process and makes my results even more predictable. It also might makes things easier if you're in a hurry and need to mix screenshots into a comp without the colors mis-matching.

So Do I Just Dump Color Profiles?

Well, no. The truth is that color profiles allow users (with profile-aware applications) to see your original, intended image — with all the range, depth, and subtleties you labored over in Photoshop. This makes them perfect for photographs, which stand alone (away from backgrounds, borders, etc) and aren't expected to meld with the design the way structural images are. For photo editing, I still use the sRGB space and save my images with embedded profiles. This ensures that they'll be as close as possible to the standard color space for browsers and they'll be strong, better images in Firefox 3.5, Safari, and other apps that can correctly interpret ICC profiles.

Thanks to everyone who wrote in over the past year and helped us puzzle this out. Please let me know if you'd like the original files, or would like any other examples added to the chart. Hopefully, most designers should be able to play with each method and see what works best for them.

Give And Take: Rails Rumble 2009

2009-08-27T13:51:00Z

Last Friday, I joined Tony, Patrick, and Rob in the conference room here at Viget for the kickoff of Rails Rumble 2009. It started a long (yet, very short) weekend of frantic coding, last-minute fixes, and awesome breakthroughs. The Rails Rumble rules (all files must be created within 48 hours) have an element of drama built in, and even while detached from the development process I had my share of terrible and great moments before the 8pm Sunday deadline.

In 2008, our team (with Nick Schlueter in place of Tony) took home second place with Qflip, a little Netflix app that still sees some action today. Qflip came out of the same set of parameters we used for this year's idea:

No login/pass — Rumble judges and users need to go through 150+ apps, don't make them create logins to remember. Logins also add complexity — is there a "Remember me" checkbox? What if I lose/change my password? What if I enter my email wrong? Huge pain.
Instant results — Don't make users wait until they've completed ten actions before the app starts to pay off. The first action a user takes should have value.
No friends required — Some apps are at their best when your buddies are already using them. Rails Rumble is not a great place for these — users need to be able to enjoy RR apps without large, existing communities.

Out of these simple rules (and an idea from Pat) came Append, a way to create a content-rich blog through Twitter. Tweet @ppend, and we'll figure out if you tweeted a link, a quote, a picture, a video, etc, and do our best to make it into a cool post with comments, an RSS feed, a yourname.ppend.to address, the whole deal. It's a fast way to share cool stuff from anywhere at any time, without cluttering your Twitter stream or bothering with some new interface.

Rails Rumble voting starts tonight and ends Saturday, August 29, so if you're interested in checking out all the apps and voting, get started!

The biggest difference between Append and Qflip for me was the conceptual clarity (or lack thereof). Qflip is a simple idea that takes a few words to explain, and its potential use becomes immediately apparent. Append is more like Twitter itself - the first time you hear about it, it might take a minute or two before you can imagine what you actually want to do with it. In the end, this became a focal point of our post-launch discussion (and quick tutorial screencast Pat put together), which I will now share with you in the form of:

Give & Take

In 48 hours, everything comes down to balance — it's not enough to say "I should've made A better," you need to pick a B to let go of. If I got to do last weekend over, here's what I would take more of and what I would exchange it for:

Take: More Writing

Not quite descriptive enough.

Early on, we knew we had a difficult concept to explain. On top of that, we had big some interaction questions: How do I start an account? How do I post to it? What's my blog's address? I punted on a lot of these by writing mediocre filler content and pushing the homepage off until the last minute — big mistake. The app needed a clearer explanation and demonstration of how (and why) to use it, and writing that explanation should've been the first thing I did.

Give: Typekit.

I spent a little too long trying to get Typekit to work with our subdomains, not thinking to just a) drop it or b) Google the problem and find that Typekit specifically addressed the issue on Get Satisfaction.

Take: Static Views

It's hard to test styles without the right content!

Since dynamic apps depend on data to generate the markup, they can be a pain to design live. If the devs implement categories before you style them, you then need someone to add fake entries to the DB and rake just so you can see'em. We get around this by using static views sometimes, special files just for designers to test ideas in, but it seemed like too much of a hassle this time. In reality, it cost me a lot of time, because I had to take devs off of more important tasks just to get little pieces of the app working locally.

Give: The Logo.

The truth is that the the Append logo got finished up in about 30 minutes, but the polishing dragged into early Saturday afternoon. I showed Tony and Mele a few variants, and they both picked the same one, but I juuuust didddddn't knowwww if it was done. Even worse, once I had it, I wasted lots of time making an interlocking, repeating background out of it.

Take: Better Location

Heat make development director sad!

On the weekend, they turn the AC off here at Viget HQ, and it's hotter than a thousand suns. This ratcheted up the stress level on Sunday.

Give: Free sodas.

No Viget, no fridge full of free sodas - but it's a sacrifice I'm willing to make.

Take: Flexible Content Descriptions

Making these fancy also meant making them harder to change later - when we needed to.

On the header of your blog (log in to see it) and on the homepage, we have some descriptions of exactly how to interact with Append. They got compressed to save space, but they're so critical to the app that they should've been given more space and more room for editing.

Give: Fancy Content Descriptions

By locking descriptions into images (homepage) and little rounded pills (blog header), I shot myself in the foot. Once it became clear that they needed more work, it was too late to fix. Next time: cleaner content, less flash.

More Contests

Judging finishes early next week, but I think most Rumble participants will agree that the best part is already over: launching a working app in 48 hours is great fun, and teaches you a lot about balancing the time you spend on projects. If you're interested but don't work with Rails folks, check out:

If you know about any similar contests, let me know in the comments and I'll add them to the list.

(Please note, another great Rumble post heavily inspired this one: check out Michael Bleigh's write-up of his awesome entry Thingivore)

Git: A Designer’s Perspective

2009-08-20T11:30:01Z

Let me start by saying I'm not one of those super tech-minded designers who loves to dive into new programs. Especially when those programs involve heavy use of the command line and every tutorial written about them is so technical it might as well be in another language. I was happily tooling along using Tortoise SVN through VMWare, slooooowwwwwly moving through my SVN checkouts without much complaint. And then two of our developers, David and Ben, pulled me aside one day and told me that instead of using SVN, I'd be using Git for our next big project. I remember sitting in Ben's office thinking, "Crap... what kind of learning curve does this thing come with?" I barely knew what I was doing with version control in SVN, and here I was faced with the prospect of a new (and arguably less n00b-friendly) program and process.

A few weeks later, the project really got rolling, and David was tasked with setting up my machine with all the necessary stuff to allow Git to run on my Mac. This was a fairly involved process, partially because my Mac was a little out of date. He had to install MacPorts, Git, MySQL, GitX (a handy little GUI), and update my Ruby gems. Then he had to show me how everything worked and wait patiently as I scribbled every single step and command down in my trusty notebook. I watched and absorbed as much as I could, but it all looked pretty foreign to me.

So what is Git, exactly?

Once installed, my learning began – and I had a lot of ground to cover. I started reading up to make sure I had a grasp on what I was doing when I typed commands into Terminal. Here's what I learned:

Git is open-source distributed revision control software Linus Torvalds originally developed to manage Linux kernel development. The key word here is "distributed." This is one of the things that differentiates Git from other revision control solutions such as SVN. Git runs locally and does not require a network connection. Everyone involved in a project will have their own fully functional Git repository on their machine. This makes most processes super fast, and it also provides built-in backups for your repository. Since each person has a copy of it locally, you never have to worry about a central server crashing and taking all your work with it.

Git highlights include

Better branch handling. To be honest, I haven't used branching yet. But from what I hear it's much easier to do in Git, and developers love it. I can see myself using branching in the future for implementing big and possibly experimental changes. Branches will let you test out new things (like a new layout, for instance) without breaking what's already there.
Speed. Since all your operations are performed locally, things like committing changes run extremely fast.
Smaller space requirements than SVN. The files you store are significantly smaller.
The distributed model means you can work on a project without a network connection (say, on your laptop on a park bench enjoying the sunshine) and synchronize it later.

What am I using it for?

Here at Viget, designers are responsible for front-end development. I'm currently using Git to share files with three developers (David, Brian, and Ben) for a Rails application we're building. At first, I just checked in my markup templates and the developers merged them with their working code. After a while I started working directly on the Rails files. It was comforting to know that I couldn't really ruin anything since there was always way to restore it if I happened to make a mistake.

How do I use it?

I work on a Mac, so this will be Mac specific. To get started, I open up Terminal and start my local MySQL database, since the application we're building requires one. Once that is up and running, I check out all the latest files from our master repository. I do this with one quick command – git pull. This grabs everything new and updates my local repository.

Once I have the most recent files, I fire up my editor of choice, TextMate, and start my work for the day. As I complete major tasks or milestones, I make commits. Commits are sets of changes which I document with a quick message and then push up to the master repository. To commit changes I use a simple GUI for OSX called GitX. The GUI is not necessary. You can easily commit changes using the command line or use this TextMate bundle to commit from within your TextMate project window. But I am a very visual person and find the process much easier to understand when I can see what I'm doing.

In GitX's commit view, you will see a list of uncommitted changes in the lower left. Drag them over to the "Staged Changes" area on the right, add a message, and hit the Commit button. Note that you can do this with multiple files – you don't have to add each one separately.

I commit pretty frequently to keep myself on track. I have a terrible short term memory, so if I don't commit frequently, I end up with a list of files a mile long and no clue why I touched them. Luckily, GitX has a diff view. All I have to do is click on a file to see what has changed. In the above screenshot you'll see the old code marked in red and the new code marked in green.

After I've committed my files, I flip over to GitX's History view. In this panel I can see all of our recent commits, complete with the message, author, and date. If my local repository is not in sync with the master repository, the indicators at the top (in green and light blue) will show me where my files are in comparison to the master files.

If my repository is behind, I perform another "git pull" to merge the latest changes. Then I perform a "git push" to move my local changes to the master repository so that other team members can check them out. I push at least once a day, but usually more often than that.

Bonus tip: Occasionally, there comes a time when I need to pull but don't want to commit my changed files first. Usually because I screwed something up and don't want the developers to see what a mess I made of their code. When this happens, I do a "git stash." This stashes my changes away somewhere while I pull the new files. After the pull I just type in "git stash apply" and voilà – my changes are applied to the newest files.

Want to get started?

Download the latest version of Git at http://git-scm.com/download, then check out these links for help and insight:

From Viget blogs:

Getting To Know Git
A Gaggle Of Git Tips
Effectively Using Git With Subversion

Elsewhere on the web:

The Git User Manual
Version Control For Designers
Understanding Git Conceptually
Why Git Is Better Than X
Git Magic: Basic Tricks
Git Crash Course
Git Cheat Sheet

Props

I have to thank the Viget South developers, and especially David, for being incredibly patient with me as I muddled through the first few weeks using Git. Because they take the time to show me how and why when things go wrong, I have learned a ton and can usually resolve issues (like a merge conflict) on my own. All designers should be so lucky. Then we might not be so afraid of the command line!

Perspectives: Mood Boards, Love ‘em or Hate ‘em (plus a panel)

2009-08-17T14:04:00Z

Sample mood board from Viget Labs. Embiggen

To mood board or not to mood board. Is that the question? Yes. At least amongst those of us that have ever used them as a means to jump start the design process. Personally, I've come to love mood boards as a tool in the web designer's design process tool kit. Are they always necessary? Not in my opinion. But I have found them to be quite useful when it comes to starting a project quickly and offering some stylistic options from which to pull from as goals and structure are being clarified. We use them quite often at Viget Labs and I'm seeing an increasing interest (or sometimes disgust) with their utility. With this post I wanted to share some thoughts on mood boards both for and against them.

Here are some favorable perspectives on mood boards from some industry notables:

Jenna Marino, Hunt & Gather

Sample mood board from Hunt & Gather. Embiggen

SBR: An established brand with a dated appearance, the look needed to be elegant and sophisticated, easy to navigate through and enthusiastic and passionate for the user. All being very diverse concepts, our 4 styles helped the client narrow their vision and focus on a new direction. The site was complex and to have designed a prototype to soon would have wasted a lot of time and effort.

On Mood boards: The purpose of a mood board is to set the tone & style of a design effort, without the distraction of flow and architecture. Design mood boards include color, pattern, photography style, typography and illustrative & graphic design elements to inspire and to build on the brand and establish a vision for the final site design. It is void of form & function intentionally, with a goal of circumventing issues late in the design process that may alter "skeletal elements due to a surface issue". They are solely to create an emotional impact and an environment in which to convey and relay information. In the end you have a visual toolkit or resource in which to build a foundation for a mockup in which you apply the elements to the framework created in the wireframes. Mood boards visually communicate where words fail, facilitate a faster design mockup delivery, & reinforce the client input and assist in their ultimate approval.

David Perel, Obox / From the Couch

Sample mood board from Obox. Embiggen

David and his colleagues from Obox went as far as screen casting a mood board process on their regularly updated From the Couch video blog. David also had this to say:

“It saves you time and your client money. It also helps with your sanity when it comes to revisions because in the mood board phase your mental state is geared towards revising.”

Kevin Flahaut, Rocket Genius

Sample mood board from Rocket Genius. Embiggen

“I started incorporating mood/inspiration boards in my web design process in early 2007. Since that time, they've been an invaluable, saving me uncounted hours of design revisions and countless headaches. Mood boards are much easier to create and revise than full page compositions and really help the client to stay focused on the visual elements rather than being distracted by layout at that phase. In my experience, once the mood board has been approved, the client has some idea of what to expect in the next stage and the actual prototyping process goes much more smoothly with decidedly fewer revisions.

My personal approach to mood boards for web projects is a little different than that of some designers. I prefer a more structured approach to presenting the information over the more loosely arranged collage style. I've found that the consistency in presentation helps avoid confusion when presenting the client with several different mood board options.

While some designers like to include wireframes or page layouts in with their mood board presentation, I prefer to keep the structural portion separated completely and to focus solely on the visual elements and building blocks of the design. I do, on occasion like to take some of the proposed colors, typography and styling elements from the mood board and compose a "vignette" of sorts to illustrate how the elements could work together in a composition. This is usually just a small detail or two that doesn't commit to any particular layout, but helps to make the whole concept a little less abstract for the client.

I think that whatever approach you might take (none is really right or wrong) the key to success with mood boards is communication. Let the client know that your choices were deliberate and well thought out. Take the time to engage the client and explain the reasoning and psychology behind the colors and elements you're proposing and how they relate to the project's goals.”

In all fairness, mood boards aren't for everyone. Here's another viewpoint:

Milissa Tarquini, AOL / Mediaglow

“I don’t use mood boards and I cringe when I see them. Why? Because they are static and are the complete opposite of what an interactive experience should be. You can’t clip out a beautiful interaction, an elegant transition, or animation that supports the user goals and business strategy of an experience. You can’t pin on a board how a kick-ass data set and a laser-focused search product will elevate a mundane task into the sublime. All you can put on a board are pictures, or samples of textures and color. Which is fantastic if that is what your medium dictates. Interactive design demands more.

The boards themselves should be interactive, and therefore no longer boards. What would make more sense for a design team to use would be a little multimedia piece that can show pictures and interactions, transitions, etc. Things cut out and pinned to a board cannot describe interaction.

I’m not saying low-fi is wrong—low-fi is critical. For example, sketching is imperative to designing interactive experiences. But mood boards are meant to invoke “mood” and they don’t allow us to use the most powerful tools at our disposal to describe mood. Movement, sound, interaction clips, etc.

Now I’m wondering—what would a mood board for Google look like? Twitter? Ugh.”

To explore this a little further, I've been working closely with Jenna Marino, David Perel, Kevin Flahaut and Jayna Wallace to try and assemble a SXSW 2010 panel to discuss this topic. If you find yourself intrigued, please vote for our panel in the SXSW 2010 Panel Picker.

Can a Website Design Be Inspired by a Chair? This One Was

2009-08-10T17:57:00Z

Inspiration can find a designer in many unique and wonderful ways. Often, web designers go out seeking inspiration, browsing galleries online and looking at other websites, but in the case of a site redesign for Choice Hotels Scandinavia, I found my inspiration in a chair.

Choice Hotels Scandinavia is a major brand in the Nordic market, operating more than 160 hotels throughout Sweden, Norway, Denmark and the rest of the region. For their new site, they wanted an interpretation of the Scandinavian design and style that is so prevalent in the architecture and interior design of their hotels. When I approached this design, there were many exciting challenges I needed to consider. The site's layout had to be both flexible enough to accommodate multiple languages and functional enough to accommodate maintainance and frequent visual updates by the client and their design team. Numerous seasonal promotions, events, and incentives are a core part of this client's content strategy, so I had to plan for a scalable but interesting structure. The perfect content-focused design would help the client communicate to their audience while still complementing the personality of their strong design-centric brand.

I probably don't need to go much further before you realize the level of stoke I had on this project. Scandinavian design is known for being minimal, modern, functional, and goal-oriented which falls in line with many of my own web design values. Not familiar with Scandinavian design? Think Ikea. Practical and functional at a value. If you are interested in more great examples, Jim wrote a previous post on Swedish design inspiration.

Keeping in mind the client's goals, I began to do research on both Scandinavian design and Choice Hotels properties in the region. Through my research, I found the Clarion Sign, a magnificent Stockholm hotel that embodies all the characteristics of wonderful Scandinavian design. On their unique rooftop terrace, for example, there are a series of hanging "Bubble Chairs" which immediately caught my eye. I knew then that I had found my inspiration.

The Bubble chair was designed in 1968 by Eero Aarnio, a Finnish interior designer who is also well known for designing the "Ball Chair".

"After I had made the Ball Chair I wanted to have the light inside it and so I had the idea of a transparent ball where light comes from all directions. The only suitable material is acrylic which is heated and blown into shape like a soap bubble."

I have never sat in a bubble chair, so I evaluated the reasons an interior designer might leverage it as a key component in a space. HGTV recently featured a short piece on the Venice Beach house of Thomas Ennis, which is made completely of glass and steel. Ennis' house revolves around the notion that the bridge between the outdoors and indoors should be nearly seamless, and includes an enormous glass panel that rolls down like a car window. The house's personality reflects changing weather, and it was because of this versatility that Thomas Ennis chose the understated Eero Aarnio bubble chair to complement the overall design. I tried to apply that same reasoning to decisions I made within the Choice Scandinavia redesign.

I wanted to create a website design that embodied many of the same principles of design as the Eero Aarnio bubble chair, both in form and function. I also knew I needed to keep a few brand constraints in mind to coordinate with the client's current print collateral. While sticking to the strict color pallete required by the brand, I explored shades of colors that dissipated into white, giving the site a light airy feel that complements the rich photography. Subtle shadows and color gradations mimic the delicate silhouette of the transparent bubble chair. Inspired by this photo and photo set of the Sign's deck, I suggested a burst of white light tot higlight the rotating carousel, subtley referencing diffused rays of sunlight peeking through the plastic.

And just as the bubble chair has a clear function, so does a hotel website: to allow users to book rooms. Working with our UX team, I drew emphasis to this core functionality through bolder colors, layout, and depth that promote user interaction.

Through this exercise, I learned that a website design can be deeply inspired by something as simple as a chair. Form follows function, and while the functional goal of a website may be different than that of other design mediums, conceptual and visual inspiration can creatively be taken from anywhere. Architecture, landscape design, industrial design, fashion, crafts and art can all influence online expereinces. Do you have any interesting places where you have found inspiration? Please share!

Top Image courtesy of Kate Chaston

Design Share: Now With 100% More Website

2009-08-07T17:44:00Z

Our very own event series, Design Share, now has a website of its own. We needed somewhere to advertise upcoming events in the series, as well as archive videos and photos from the past two Design Share events.

Over the summer I've been chipping away at the project with Tumblr. This was a great chance to try out Tumblr and see what it could do since a site for Design Share needed to be simple, as well as easy for anyone to use and update, but it needed to still handle lots of videos and photos.

While building Design Share's site I learned that there are some benefits to using Tumblr and a couple snags.

Some of the good stuff:

It's very easy to customize your layout. Tumblr has dozens of templates set up that you can use as they are, tweak a bit, or just use as a base to make something entirely unique.

Tumblr uses an in-browser editor that simultaneously shows you a preview of your page. This keeps setup simple since you aren't dealing with FTP. The preview page also conveniently lets you see your edits as you make them, without permanently saving them. So you can completely goof up your code without doing any permanent damage.

It's easy to use, especially for posting multimedia. Right at the top of your Tumblr dashboard you pick what kind of media post you're about to make, then simply pick if you want to embed something, like a YouTube video or a photo from Flickr, or upload it straight to Tumblr.

Dynamic and more complicated elements are just as easy to install. Code for a Flickr badge or Twitter feed is already in Tumblr's templates, just plug in your username. A favicon can be uploaded and set up without even touching any code.

You have total control over your sidebar content, making it anything you want. This is a huge advantage over other simple, free services like Twitter. The sidebar content is also separate from the main page of code. This'll come in handy next time someone needs to update details for Design Share's next event and they don't want to wade through a whole page of code.

Some of the less than good stuff:

Tumblr automatically puts its own code on your page. What makes this a bad thing is their code does not validate to W3C standards. Between Tumblr and Vimeo (our host for our past event videos) the Design Share site has thirteen unfixable errors. The errors are nothing major, but it's annoying.

One of the most frustrating aspects of using Tumblr: no simple hosting for your layout images. if you're customizing your layout, you probably have images you've made that you need to upload somewhere. You can always upload them to your own server or a free photohost like Photobucket. But Tumblr, as much as it prides itself on being easy to customize, doesn't have a simple way to host your custom graphics. You can trick it into doing so, but it's a hassle and takes some finagling; here's a step-by-step tutorial on the processs. But even if you go through all that, your image has to be less than 500px wide or Tumblr will resize it.

Overall however, Tumblr proved to be simple and convenient to use. I took full advantage of its customizing abilities and started my design for the Design Share page with one of Tumblr's templates. I picked the plainest template I could find that had the basic frame that I wanted:

We wanted Design Share's concept to be simple and sketchy; think of a room full of designers at an event taking notes, but also doodling. I doodled all the graphics, from the header to the goofy little robots in the background, scanned them in, and cleaned and colored them in Photoshop. Then working with the in-browser editor straight on top of the template, I changed the basic elements around and added my own sketchy headers. The layout at this point looked like this:

Pretty plain and flat. Seeing these results convinced me to take what I had into my own text editor and really try to push the customization. Slowly it evolved into this:

with a bit more dimension. I also started to play with layering elements using CSS and got to this point:

Okay, so it was getting closer. In the end, the final design got more detailed and more mangled looking, with coffee rings and a yellowing sketchbook:

There's a lot more dimension, color, and detail in the page now, while still keeping it sketchy and low tech-looking. While the process was a bit roundabout, and I wouldn't advise anyone who wants an original design to start solely with a template, it got there in the end.

Check out the final product for youself at: designshare.org

Or start experimenting with a Tumblr of your own.

Google Maps jQuery Plugin with ExpressionEngine

2009-08-05T17:18:00Z

Yesterday Carolyn blogged about a site we did for NCGives. One of their requests was to have the ability to add locations to an ExpressionEngine weblog and have them display on a Google Map. Seemed easy enough until I realized we also had to make external map controls, display content both in the map bubble and on the page, color code the map points, and auto zoom/center the map. I looked around for existing solutions, such as the SL Google Map Extension, but nothing I found did exactly what our client was requesting. I knew that one of our developers, Brian Landau, had experience with Google Maps, so I started talking to him about what we could do.

Initially, I setup a weblog in ExpressionEngine that would take in all of the location information. Aside from the standard content about the location, I put in two text input custom fields for longitude and latitude. Since the client wouldn't know the longitude and latitude coordinates, I put in a link to this website in the field instructions, which converts a standard address.

After the weblog was setup I worked with Brian to get a template outputting markup that would work with his Google Maps plugin. It was easy with ExpressionEngine because I could open a single weblog entries tag and output the variables the plugin could use to create the map. The client wanted to show just the location titles below the map and have them link to the pin point, so JavaScript creates that link and hides the rest of the content. One of the nice things about doing it this way is that even if JavaScript is turned off and you can't see the map, you still get all of the ExpressionEngine content displaying on the page.

See the map at http://ncgives.org/map/

You might notice that the jQuery metadata plugin is using the "data" attribute to grab the id, longitude, latitude, and category (which determines the color of the pin point). Brian is working on adding support for microformats instead using the data attribute, so stay tuned for that.

So if you're looking to put a Google Map in your ExpressionEngine project, check out this blog post about his creation of his jQuery Google Maps plugin over on the Viget Extend blog, or find more information on how to use it on Github.

Breaking down the process: Designing LegalRiver.com

2009-08-01T13:04:00Z

One of my favorite things about working at Viget is the opportunity to work with promising startups. Our recent engagement with Legal River is a great example of how a unique working relationship can make the most of small startup budgets. Viget helped establish a look and feel for their website, https://www.legalriver.com, a marketplace that helps connect small business owners with attorneys.

THE TASK

The guys at LegalRiver didn't have the budget for a blue-sky solution, but they did have the smarts to invest in the basics. What made this project unique is that I only designed one page. The Legal River team is using that design as a roadmap for the rest of the site. They also did all of the development in-house. While it would have been great to design more of the site, we were able to give them a solid foundation to work with.

A STARTING POINT

Startup clients like Legal River often come to us without a well-defined visual brand. Creating a brand identity can be both time-consuming and expensive, so it's understandable. Logos and Pantone colors aren't a top priority when you're trying to get the next big web app built and launched. But good design can make a huge difference in a product's success or failure, so it shouldn't be ignored forever

A project without branding guidelines is fun, but it can also be intimidating. A blank slate usually leaves me wondering where to begin. That's why Kevin kicked the project off by sending over some branding questions. Talking through the answers with the client lets us dig a little deeper, gain additional insight and ensure that everyone is on the same page.

Sample Question: If your brand was an automobile, what would it be?
Legal River's Answer: "Volkswagen Passat. It is dependable and reliable, easy to use and looks clean and neat without showing off."

The Legal River team members were engaged in the process from the get-go and answered our questions thoughtfully. There was some debate about whether the celebrity most fit to represent them was Sam Waterson or Matt Damon (I stepped in as the tiebreaker) but overall their direction was clear. Descriptors they all agreed on included professional, trustworthy, and focused.

Next, I created two mood boards. We use mood boards for most of our projects, but they are especially useful for one like this where so much of the look and feel has yet to be figured out.

The mood boards explored some of the things the team did not agree on such as color palette (neutral vs. bright) and style (traditional vs. illustrative/modern). The clients again took an active role and gave me good feedback.

With a tight timeframe and budget, we decided that our design hours were best spent breathing life into the homepage. It was an easy choice. The current homepage was extremely bare-bones but needed to communicate a lot of information effectively. The secondary pages would be more straightforward.

The primary goal was clear - attract businesses to the site and get them using it right away. Kevin and I sat down and took a look at the current homepage, then hashed out some additional goals and a content outline. The homepage needed to:

Attract small business owners (lawyers are a secondary audience) and explain how they could benefit from using it. Give them easy access to post a case.
Give a quick overview of how the marketplace works.
Highlight what makes Legal River great. It's free, non-binding, confidential, and more efficient than the traditional approach.

The Results

The new design meets these goals and gives Legal River a strong identity. Take a look below for a before and after comparison.

The product name inspired the background of soft blue waves. Their weaving texture is meant to represent attorneys and business owners coming together. The font used for the logo treatment and headlines helps the site feel modern and friendly but still professional.

A bold action button invites business owners to post a legal issue as soon as they arrive. The feature banner and a "how it works" breakdown help bring attention to Legal River's main selling points and icons reinforce the message. I surfaced up recent blog posts to make use of content they were already writing but not effectively sharing.

I had a great time working on this project, and I hope the Legal River team gets a lot of mileage out of the various design elements I established. They've already done a fantastic job building out the homepage. You can find the site here: https://www.legalriver.com/

One Percent Inspiration

2009-07-27T19:06:00Z

Andy Rutledge, in his recent (imagine this) hardline post On Inspiration, says (among other things) that:

Our designer culture habitually applies the terms inspiration (or inspired) as a shibboleth for anything deemed worthwhile ... our online culture is choked to the gills with "sources of inspiration."

While I tend to soften hard lines and I'm not down with everything Andy is saying elsewhere in the article, the prior quotes are ones I appreciate. Here are a few more thoughts that Andy puts forward that I can agree with:

Inspiration Is

Inspiration is easily cheapened and sold via designer hyperbole.
Inspiration is exuded in action, not just talk, not just observation.
Inspiration is different than motivation and less easy to come by.

Inspiration Is Not

Inspiration is not the feeling you get when you like someone's design.
Inspiration is not a requirement, it's a bonus.
Inspiration is not simply paying attention to things other people ignore or can't grasp.

Meeting with Inspiration

I couldn't help but be reminded of Edison's quote that "genius is one percent inspiration and 99 percent perspiration." Perhaps Edison would also say that design (as well as genius) is less about inspiration and more about a whole lot of other things that don't get their due credit.

Perhaps, but if that's the case, how might we still meet with inspiration on those rare instances? Andy says "I have no idea" while the Viget design team simply says "Visit our blog. I mean look at its name." Pause. Anyway, I'll buy that inspiration isn't simply something to be gained or stumbled upon or hoarded among our tag groups. Maybe it's a bit more elevated, a bit more divine than we make it out to be.

Another Definition

While there wasn't extensive thought around our blog's name or a team consensus on what our definition of inspiration is, I imagine we'd define it more like this:

Arousal of the mind to unusual activity or creativity. Elevated intuition as a part of solving a problem.

This certainly makes inspiration a bit more accessible, more easy. Ultimately, I guess it does come down to how you define it ... but I do like the idea of having some, even if it's only once in a while.

Chevy’s Voltage Site Design Falls Flat

2009-07-23T15:55:00Z

Yesterday Jen posted a great article on our Marketing Lab's blog, Viget Engage, regarding a new social site recently launched by Chevy. The site, http://www.chevroletvoltage.com, aims to bring people together to discuss and create buzz around their new vehicle, the Volt. After reading through Jen's post it really got me thinking about the design and how, especially in this case, it played a vital role in shaping my expectation of this vehicle before I ever even saw it.

Upon arriving on the site I was immediately confused. First I saw a logo, a prominent video, and a very vague tag line. I then quickly scanned the page looking for something concrete to help explain what exactly this site was. Instead of finding answers, I was left with more questions. What is this site, what's its purpose, and what the heck am I supposed to do? From there my mind quickly jumped to the design and before I knew it I was taken back to 1995 listening to Pearl Jam's Ten in my over-sized flannel shirt and baggy jeans. Needless to say the design is outdated. Not only that, but it also uses almost every web "two point OH(no)" cliché in the book. Excessive rounded corners to the point of distraction, a poorly chosen and washed out color scheme, gradients and drop shadows for the sake of gradients and drop shadows, and social networking badges and callouts everywhere. Not to mention the entire site is built in <gasp>tables</gasp>. In retrospect I'm just thankful I didn't spot the gratuitous wet floor effect or I might have instantly balled up in the fetal position.

Now this is the point where my expectation of this car started to change. The design of this site really started to impact and shape my view of this car — and not in a good way. I've always had the impression that Chevy, and Ford for that matter, were a bit behind the times and lacked innovation in their cars, especially when it came to design. Now, after seeing this site, I started thinking that was the truth. Either that or budget cuts had made it to the design department.

I think Chevy really missed an opportunity here. They had an opportunity to present their product in a positive light, generate some buzz, and create a loyal following. It's particularly unfortunate because the Volt is a cool, well-designed product that is simply presented very poorly. At the very least the design shouldn't get in the way of content and messaging. Sadly, in this case, the design just creates another hurdle for the user.

To me, this site would be a blast to design. With such strong branding and concepts behind the Volt it seems as though the design possibilities would be almost endless. If you were redesigning this site what would you do differently?

Adding Music to Your Design Toolbox

2009-07-20T14:00:01Z

I think it's safe to say that a decent number of designers out there listen to music while they are working. I know that I'm not alone in my habits of putting the good ol' headphones on, blocking out the world and zoning in on a design comp. Music helps me focus on the task at hand, keeps me from getting distracted, and generally get me revved up. You could basically say that music is my taskmaster as well as my design co-pilot.

I've always used music in this way, whether it be for design work or getting my yearly taxes in order (White Stripes can ease the number crunching pain). However a few years ago I saw a video of an artist that permanently changed the way I approach my music listening while designing.

Enter Denny Dent. In the video Denny paints a portrait of Jimi Hendrix. Each stroke, flick, and jab of his brush are in response to the rise and fall of Jimi's recorded live performance at Monterey. The ferocity and passion of Denny inspired the hell out of me. Here was a guy that not only understood inspiration but also allowed that inspiration to fill him up and explode onto the canvas with no reservation. Check out the video. Even a handful of years later I still sit in awe when watching Denny work his magic.

Using Music to Guide Your Creativity

The lesson I took away from Denny was that, when applied correctly, music could heighten an artists senses, allowing them to get in tune (pun intended) with any given subject matter. Choosing the right kind of music for a project can not only help you focus, but can lend creative weight to your work. When starting a project, think about what music (artist, genre) exemplifies and embodies the client or direction you are taking on the project. Try to find music that will get you in the mindset/groove of your subject matter. Don't get hung up on a perfect match, this is an exercise to loosen you up.

How I Apply Music to My Process

I've compiled a few project examples that I've worked on recently where I used this technique to help me wrap my head around creative concepts.

Run-D.M.C. & Feedstitch

When Kevin and I first started throwing around ideas for the visual design of Feedstitch, we both agreed that the idea of a jumbled mess of ribbons that un-jumbled themselves would be a fun imagery to work with. We eventually rested on the idea that these ribbons would be shoelaces and we would take an organic, canvas shoe, approach to the visuals. I thank Run-DMC for this. When roughing together a moodboard I turned to "It's Tricky" and "My Adidas" as well as the rest of the "Raising Hell" album for inspiration.

Bob Dylan & Ficly

While working on Ficly, I listened to a great deal of Bob Dylan. Dylan is known for his crafted lyrics and heartfelt honesty and I hoped to tuck a little bit of that into the design of Ficly. A lot of Dylan's work also has a familiar, energetic feel that I was able to latch onto while working on the project. I listened to a lot of "Blood on the Tracks" and "Blonde on Blonde" while concepting and designing Ficly.

Miles Davis & MadMen

To get in tune with the era/vibe where MadMen exists, I listened to a handful of jazz musicians, focusing most of my listening time around Miles Davis. The smoky, wood-walled, creatively-charged environment of the show likened itself to the bouncing, freeform movement of Jazz music. It not only fit the era, but helped me wrap my head around the concept and characters that we were playing with in the comp. I listened mostly to "The Complete Birth of Cool", a Miles Davis Anthology while working on this design.

Letting Inspiration In

So those are just a few examples of how I've invited music into my design process. Give it a go and let me know how you use music as part of your process! In closing, I leave you with a compilation video of Denny Dent doing his thing. The biggest hurdle sometimes is letting go and letting yourself get swept up in the moment. Denny has this down pat.

Taming the Elephant: Design Critiques With Non-designers (plus a printable cheat sheet)

2009-07-15T13:02:00Z

There she is. That's Bertha, the elephant-in-the-room that you call your design. You've been staring at this design for enough time now that you're either satisfied where you are or unsure what to do next.

Without feedback from others, you're counting on yourself to be responsible for questions like: Are you meeting client expectations? Will users know what to do or where to go when they hit your page? Will your web design be easy to build? Will search engines help people find you?

These are questions that we don't always think about when we're designing until it's too late. That's a lot of pressure to rely on yourself for. Maybe it's time to get some feedback from the designer sitting next to you. Better yet, why not get some design feedback from a non-designer?

Cross-disciplinary Critiques at Viget Labs

At Viget, we've been spending a lot of time talking about how best to get feedback from our non-design colleagues prior to showing a client our very best. In doing so, we solicited two sets of questions to everyone to help us on our journey to perfection.

First, we asked our designers what type of feedback is most helpful when receiving critiques. We learned that our designers prefer live presentations with instant feedback when the design is at least 75% complete and that good feedback is well-composed and corresponds to the goals of the design. What our designers don't like is generalizations, personal preferences and laundry lists of fixes.

On the flip side, we also wanted to hear a little about what the rest of our esteemed colleagues want to get out of design critiques. We learned they like to hear more about high-level goals, reasons behind decisions, general inspiration, and considerations about time, technology, and budget. We also learned that there have been feelings that as a whole our designs could improve by being more unique while being less visually-complex and that lighter, faster, and more flexible are desirable qualities.

So with these revelations in mind we set out to try to come up with a better method for creating a feedback loop without compromising budgets or stressful timeframes. After all, pulling several people into a room to discuss design can quickly eat up budgets and production time if not considered closely.

Why Critique

With that in mind, why critique in the first place?

Avoid mistakes
By letting others preview your design first, you'll get valuable feedback on meeting business, user, and design goals while mitigating careless typos and stupid mistakes that can take the presentation wayward if not caught early.
Higher quality work
Despite the fact that you're an amazingly talented designer, a wisdom-of-crowds approach can provide valuable feedback especially when it comes from your equally talented team of developers, marketers, and project managers.
Get team on same page
By sharing your design early with the rest of your team, everyone will feel more confident about showing the work to the client and about the potential success of the project.
Get your idea heard
Sometimes we come up with good ideas after the client has already approved the design or it's otherwise too late. A change could set the development back two or three weeks, but it might not have if suggested sooner. By sharing the designs early everyone has the chance to offer innovative ideas.
Influence positive change
Critiques should be more about adding better things to a design than just hacking away the bad things. Critiquers should offer helpful modifications over subjective noise.

Some Guidelines

In thinking about this we came up with suggestions:

General Rules

If possible, designer will distribute the design in advance
Our tendency as designers is to have a glorious unveiling of the design. Of course, that's what we've been trained to do. When it comes to client presentations, by all means be glorious. When it comes to the people you work with, it's a little different. Chances are they've already been looking over your shoulder anyway. At minimum, they're as familiar with the goals of the project as you are so they'll have at least an idea of what to expect. In the spirit of moving quickly, sharing your designs in advance will help everybody have questions and feedback ready. Once you explain your work, the questions will change accordingly.
Keep it quick, 15 to 30 minutes
Everyone has other things to do but this is important. Make it happen and then promptly get back to work.
Offer feedback not discussion
This is time to listen not debate. Consider all feedback and do what you feel necessary to meet the project objectives. There will be time for follow-up discussion after the critique.
Try to establish a recurring order
While it isn't crucial to the critique, it will help things move along quickly and the repetition will help create a known structure. For us, we like to go in the order of a typical project cycle (ex. PM > UX > Visual > Dev > Marketing). Establish a sensible order and let everyone have equal time.
Make designs available for follow-up discussion after the critique
The goal is to move quickly. Each person has a few minutes to respond with their feedback. Be sensitive to giving everyone enough time. You can work out the details later.

Designers should...

Present professionally and quickly
Consider this your dress rehearsal for the client presentation.
Tell a story about the design (goals, problems, inspirations, decisions)
You must have been thinking about this as you created the design. It's now time to put that thinking into words.
Clarify critique goals (ask questions, relay time left on design)
What do you want to get out of this? What do you feel is working? What needs work?
Keep critiquers in the loop as project continues
Once you've applied the feedback, be sure to share the updates with everyone. Your team will be happy to know their feedback was valuable and considered.
Ask specific people for specific feedback
Each role should represent a different point-of-view. More about that below (see "By Discipline").

Critiquers should...

Begin with questions
Make sure you understand something before you react to it.
Provide some feedback based on role
What point-of-view do you represent? Make sure the feedback contains more than just your personal opinion. The feedback should represent the goals related to what it is that you do.
Relate feedback to the designer’s goals
Did the designer accomplish what he or she set out to?
Acknowledge what works, what doesn’t, and why
Articulate your thoughts in a way the designer can understand where you're coming from.
Provide a wide range of feedback
Think about things like UI and information architecture, color and typography, development concerns, potential improvements (development, JS, visuals), simplification, process suggestions, buildout and degradation, and concepts.
Provide longer feedback or spellchecking by email or on a message board later
Respond shortly after the critique if you have more feedback. Waiting too long will risk incorporating your valued feedback.

By Discipline

At Viget Labs we utilize five web disciplines to provide different perspectives on design. You can substitute other areas for any of these, but we think these five cover things pretty well.

Project Management
The project manager represents the client point-of-view and should ask questions like: Are business goals represented? Is there anything notable or buzz-worthy about the design? Is the client getting their money’s worth?
User Experience
The UX designer looks at usability, accessibility and design patterns and should ask questions like: What is the single most important activity for the user on this page and how is it being catered to? Is the design consistently executed? How will this design change over time? What can go wrong?
Visual Design
Since the lead designer is the one whose work is getting critiqued this is usually another designer on the team. He or she may not be actively working on the project. This person is responsible for looking at the aesthetics and emotion of the design and asks questions like: Is the visual presentation telling the intended story or otherwise communicating clearly? Has time and care been put into the details and nuances of design? Are any opportunities to push boundaries being missed?
Development
This can be a Developer, Front-End Developer or both. They should look for technical feasibility and should ask questions like: What design decisions are affecting how the site is developed, and why? What could be changed to significantly save time/cost? Are opportunities to innovate within the budget being missed?
Marketing
The marketing representative looks at the marketability of the design (of course) and asks questions like: Are the value propositions and key call to actions visible and clear? Does the design use phrases users will likely scan/search for? Is the design organized in a way that is reflective of the goals of audience? (hierarchy, calls to action, etc)

Don'ts

DON'T tell anyone what they can or can't provide feedback on
Don't waste time telling your teammates they can't comment on certain things. It defeats the purpose and lets everyone know that you are not prepared or trying to be too controlling of the design. Listen and respond in kind. After all, you will be the last to touch the design.
DON'T try to solve problems in the critique room - it's too time-consuming
This is a chance for the designer to hear other perspectives. It's less of a conversation than it is a time to listen. Follow up later for solutions to problems and use email or message boards to share additional feedback with the group.
DON'T be a jerk, be constructive
This mostly goes without saying. You're all on the same team.

The Goody-bag

Printable Critique Cheat Sheet

We created a printable cheat sheet (PDF) to help guide regular cross-disciplinary critiques. Simply print out a copy and tear along the dotted lines to give each participant a useful guide. Each card contains about five questions to think about regarding each individual role. Use it until you don't need it anymore.

Full-size printable cheat sheet. Download it!

Sliced and diced printable cheat sheet

Other Resources

There are dozens of other ways to critique and just as many resources to help guide the process. We decided we prefer in-person, verbal feedback but more and more design feedback opportunities are finding their way online in the form web applications. We haven't given any a try just yet but if you have one you like, please let us know we're always looking for good tips. Here are a few known sources:

Many thanks to Doug Avery whose dedication to improving our critiquing standards within Viget Labs led to this report.