be rad…be foolish

About a week ago I saw online there was an unofficial contest to redesign the food label.  Since this kinda goes right up my alley, and I don’t have a whole lot to do at the moment, I figured I’d submit something.

It should be pretty self-explanatory.  I have the four icons/badges at the top with the thought food producers would start making foods that would meet those parameters so they could brand their products with the most badges.  The ingredients list is at the top–organic ingredients are green and italicized, bad ingredients are bolded.  The next section uses a little bit of data visualization and color coding with an easy to read grid below.  The grid places the emphasis on the number/amount.  And at the bottom is a representation of where the food falls on the glycemic index.

I haven’t been happy with my capstone site since the first design.  I changed a jQuery hover over element to a basic slider.  Then last night I changed the entire interface design.

I’d been thinking about incorporating a sprawling urban landscape silhouette somewhere.  Originally I thought it’d go at the bottom of the div that drops down when you click on the About This Project button.  But given how the site will be presented to the user once I add a video clip I’m making in After Effects, I didn’t think many users would see this little bit of artwork I’ve created.

So it’s sitting in the header now.  That might change too.

Designed this back in February.  Was going to drop the opacity really low and have it printed on the back of my business card.  Decided not to do it, thought it’d make the card too busy.  But I stumbled on it just a minute ago and figured I’d post it.

It’s relatively interesting.  At least for myself.

I just finished the iMedia Showcase invite.  Was happy to design it with a few minutes here and there over the past week or so.  It was a nice break from working on capstone.  I used Trajan–inspired by AKQA’s website–as the display type and District Thin for the text.  District Thin has a pretty high x-height and was more readable than some other thin, san-serif fonts I considered.  Desaturated the blacks to various degrees for the text; obviously left the company logos as they are.

I think it turned out well.  Wanted to play with whitespace and a little bit of grid design.

*The logos aren’t pixelated on the print version, just this screenshot.

Just finished an infographic.  Since my capstone website won’t be live for another month or so and I’m not sure when I’ll be able to update my portfolio, my beloved blog seemed like the right place.

I’m pretty happy with the simplicity.  I just spent an hour debating whether to use League Gothic or Bebas for my font.  Turns out League Gothic is a better display type and Bebas is slightly better for text–slightly larger counters, so easier to read.  I compromised.  I’m going to title all my infographs with League Gothic and use Bebas for everything else.

Just a quick post, have to get back to work.  I’m testing a class of about 30 undergrads to see what their reactions are to static infographics versus interactive infographics.  I’m about done with all the static versions, now I have to make them interactive.  I’ll be neck deep in Flash momentarily.

Thank god for March Madness On Demand!

Since finishing up my portfolio, I’ve been happily slaving away on my capstone.

No need to keep it a secret so here are some screenshots of what I’ve been working on.

The project will be a collection of info graphics related to the development–and urban sprawl to some extent–of North Carolina since the 1940s.  I look at population growth, the creation of highway infrastructure, commuters in more densely populated areas, the footprint of big box retail stores, etc.

The first of three screenshots of an infographic showing the creation of I-40 an I-85 and population growth in NC.

Second shot of the highway and population growth infographic

Last photo of the highway and population growth infographic. I was hoping to show a correlation between the creation of the highway system and booms in population.

Infographic showing the growth of Charlotte, NC by decade.

Detail from the Charlotte growth infographic. I did infographics like this for North Carolina's six largest cities. Charlotte's infographic might be the most interesting.

The first of a series of infographics on statewide population growth in NC by decade. They start in 1940 and go through projections into 2030.

Second shot showing the following decade. As the population increases, the user will notice an increase in density.

Shot showing a few decades. In static form the states will be stacked on top of each other. Interactive form to be determined.

City population growth for North Carolina's six largest cities. It'll make more sense in the next screenshot.

Population growth by decade for Raleigh, NC. I haven't yet figured out how to incorporate the actual population numbers.

Infographic showing the total footprint of big box retail stores in North Carolina. It includes parking lot measurements-which I did, on one very long day in February.

Breakdown of each big box retailer within the total footprint.

I love my sketchbook.  I love the graph paper, the feel of it, it’s the perfect size.  It has the perfect floppy to rigid ratio.  I keep notes in it.  Work ideas out in it.  I write out thoughts I hope will one day matter.  But I don’t truly use my sketchbook for sketching.  Dare I say, I don’t use my sketchbook to work through designs.

In our computer based world where my designs are destined for computer screens, iphone screens, et al. I work my designs out on the screen.  The screen is now our main medium.  As designers, it should be where we exist.  The medium of previous generations was paper and accordingly, those designers worked things out in their paper sketchbooks.

If you look around my artboard in Illustrator, it’s littered with iterations, possibilities, trials, errors, crap and solutions.  With a click of the mouse I can create a perfectly straight line.  No need for a ruler and steady hand.  I can calculate and be precise.  I can apply uniform modifications.  Being able to be more exact in my trial iterations means I can have a better idea of the ultimate design.  And that helps…a lot.

And, it’s just so much faster to play with a mouse and computer screen than pencil, paper and ruler (and compass and protractor and eraser and french curve and additional lead and all my pens and pencils and scissors…well, you get the point).

Since a picture is worth a thousand words, after this sentence, I’ll be done writing and let the scan of my sketchbook and screenshot of my Illustrator file for the same project speak for themselves.

In my visual aesthetics class we studied a few different schools of art.  One was Formalism.  I wanted to create something that could be considered Formalist using type.

As individual letterforms, Didot has some all time greats.  I chose the W because there is something ‘happy’ about how the Didot W looks.  I wanted to play around with basic iterations of the W and came up with lines of different font sizes.

I’ve also been interested for a few months in how graphics/objects appear on our screens as we scroll up and down, left and right.  After I finished the image,  I found that if you zoom in on the PDF and scroll up and down, it gives a pretty cool effect.  Or zoom in closer and scroll left to right; try it with a few different size W’s centered on your screen.    Try it here!

*and let me officially state this is not in any way a tribute to our 43rd President…and never would be.

I’m home for Christmas.  And I’m bored.

So to solve my holiday malaise, a little unsolicited packaging redesign…

Keys Soaps puts out some great products and they’re doing some cool things with their labels.  The ‘Therapy Facts’ riffing on ‘Nutrition Facts’ is pretty clever.  I chose one of my favorite products of theirs and spent the past couple hours before dinner redesigning the label.  Choose a font, make the margaritas.  Retype the bulleted list, grate the cheese.  Resize and center all the visual elements, warm the tortillas in the oven.

Their current logo (the first in the series below) is wrapped around a cylindrical container.  The center column is displayed on the front of the tube.

Their current logo is too busy.  It takes an iconic image (the first aid symbol) and makes it unnecessarily complicated.  There is way too much text, the text that is there is too crowded and a lot of it is redundant.

I understand the desire to hit all the high-points of the product on the main part (center) of the label, but it’s too wordy.  I simplified for better product recognition.

I included the second (and last) iteration because I might be using the same font as a typeface used in a prior Keys Soaps logo in my first iteration. So in the spirit of true redesign, I wanted to include a unique logo design; and also because I’m not a fan of the current typeface in their logo.

In short, I wanted to refine the label, make it less wordy.  The new text on the left side isn’t so crowded; the smaller font size actually improves readability.  The first iteration has a heavy, serif logo typeface contrasted with a thin typeface throughout.  The second iteration has a heavy, san-serif logo typeface contrasted with a thin typeface throughout.  Everything’s in its right place, brand name, product name, brief explanation, product details and ingredients.  The two redesigns are more streamlined.

Here’s my redesign.  And here comes our enchiladas and margaritas.  Enjoy my redesign as much as I’m going to enjoy this meal!

Adios!

A classmate asked me to have my iphone interface featured along with some other classmates’ work for a final project.  She asked me some questions and here are my responses.

What does being a good designer mean to you?

A good designer empathizes with the person using what’s being designed.  I designed a clock that is white during the day (for readability) and shifts along the greyscale in sync (relatively) with the amount of daylight outside until at night, it’s face is black.  This was a conscious choice, not simply because it looks cool or is a cool bit of functionality, but because a very dark background means when I’m in bed at night and need to see the time, the screen won’t be brightly lit and strain my eyes.  White hands and hour markers on a black background stand out more than vice versa; a nice convenience when light might be low.

Even though the aesthetic took shape organically, as it was happening, I recognized my target audience would likely be young, would be looking for something fresh, new.  That’s part of the reason I pushed the boundaries of the use of the glossy texture.  By recognizing my target audience and thinking about the individual who would ultimately use my product, I naturally empathize with them.

Form should follow function.  Anyone can create something beautiful, but if it’s practical, I’m going to reach for it time and again.  The more I reach for it, the more of a role it plays in my life, the more I appreciate it, the more I feel I need it.  As designers, we want to create something that’s relevant.  If I don’t create something relevant, something needed, then I’ve failed as a designer.  Designers have to walk this line, it needs to first be practical, then beautiful.  I’m first going to reach for the thing that gets the job done and if two products get the job done equally well, I’m then going to reach for the better looking object.

In this project I thought a lot about functionality, maybe more so than design (at least in the initial stages).  I’m really proud of my iKnow feature, especially the ‘Friends’ component – a user can be verbally updated after an alarm about participating friends’ high priority calendar events.  I had this relatively complex component.  It was more important than the aesthetic, so that’s what I had to design for – this functionality.  Above all else the functionality had to work and make sense, and then I could focus on making it look good.

Where do you draw inspiration for your projects?

I draw inspiration from the project itself.  I figure out what makes sense for a specific project, what a project demands.  What do I want to feature?  Sometimes figuring out the aesthetic is necessary to fully express the practicality.  I worked on the PSA assignment urging viewers to eat healthy.  I fully understood the need for perfectly lit and shot sequences to tell the story of the food.  Some projects demand a certain aesthetic.  Sometimes recognizing that is the hard part.

And sometimes you can bring a totally random aesthetic to a project and make it fit.  When I can incorporate a random aesthetic, for inspiration I draw from what I’ve seen that has worked.  I tweak it and make it how I want it.  I look around me, at others’ work, everyday life for shapes and colors, feels, spirits, ideas (all that hippie stuff).  I look to nature a lot for inspiration; I think it binds all of us together.  Nature is something we all can recognize and identify with.  I try to stay away from anything that feels synthetic or manufactured – which is ironic when you look at my iphone interface.

What have you learned about design as a process?

In design, process is everything.  For the designer, the finished product is what’s fleeting and temporary.  The process is what’s permanent and lasting.  Designers don’t seek to create one thing and that be their life’s work.  Designers constantly create.  The process is how they get better.  Process is practice.

Good design is a series of attempts.  You work with something, you throw it out.  You keep certain elements, build on them, work on them.  Then maybe you throw the whole thing out, you keep part of it, maybe you keep all of it.  You build, you edit, you disassemble, you tweak, you analyze.  Good design is not self contained.  It occurs over multiple sessions.  It’s seen by multiple sets of eyes.  It’s criticized by many.  Only after this, after a project has been vetted, can you even start to think it’s complete.

And good designers do this over and over and over.  Process is everything.

What’s a trick of the trade (technical or inspirational/advice) that has served you well in this class?

Critique.  Ask.  Seek advice.  Be willing to accept something you create might suck.  Be modest.  Be confident.  Be human.  Be persistent.  Be honest.

What has been your biggest take away as you’ve developed your skills in this class?

Plan. Form ideas and develop them.  Work through them, throw them out if necessary.  Sketch.  Wireframe.  List.  Practice.

If my intention is to become a designer, my workflow will quickly break if I try to work out of my head.  My projects will take on a similar aesthetic and my work will suffer.  This semester we’ve had one project, then another, then another.  I don’t know what it’s like to have multiple projects going on concurrently.  I don’t know what it’s like to have ideas from one project creep into another.  And that might not be bad, but it’s a slippery slope.  I want to make a living out of thinking about colors and shapes and fonts and spirits and feels.  There’s no way I’ll be successful if I don’t plan, if I don’t lock my ideas up into sketches and notes and art and lists of inspiration ideas.  I have to practice my craft.