be rad…be foolish

I recently designed and coded an HTML email campaign for a web-based wine seller out of NYC.  In the span of one evening, I had to teach myself how to code tables.  I’m pretty happy with how it turned out.

I also had to create an HTML landing page users would be taken to after clicking through the email.

Below is the main graphic I created.  Click on the links above to view copies I’m hosting.

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’ve been in talks with an ecommerce web design firm in Austin.  Part of the application was was to create a comp for a hypothetical client.

I had two options, a skateboarding shoe company and a women’s clothing company.  I was leaning toward the skateboarding shoe company and decided to commit to it.  I figured if I end up working for them, I wouldn’t get to choose the clients I work for.

Below is what I came up with after about a day’s worth of work.  As I designed it, I kept the word ‘mobile’ in mind.  I feel like this design could look good on a computer screen or a mobile phone screen.  I pulled the images from Google as placeholder images.  Otherwise, everything is my work.

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.

I’m finally working on my portfolio website.  It’s 1:15 AM, today was the first day of my last semester, I’m tired and I just finished peer reviews from our last semester.  But I finally fully formed this thought that’s been bouncing around my head for a couple months now; I had to write it down.

Bottom navigation is how we’ll navigate web pages and apps in the future.  We’re already seeing it.  Top navigation has seen its day.

Web pages are moving to web apps.  We can all agree on that.  But for those who haven’t thought about how these new spaces will be designed, think about your iPhone, the navigation bar is typically, if not always, along the bottom.  Look at your Mac (not to plug Apple products too much) where is the dock located?  Along the bottom, unless you’re one of those rebels who has put it on the left side.

As we, as users, become more accustomed to apps, the design of our web pages will follow.  Scrolling will go and so will top navigation.  Our apps and web sites will have top and bottom navigation; the best using bottom navigation.  Scrolling will be minimal.  The top and bottom navigation bars will be static, between which is displayed the information we seek.  We’ll zoom and toggle.  Bits and pieces will be presented to us.  We can have them assembled into the big picture if we wish and vice versa.

Scrolling = searching.  And searching takes time.  As our information structures become more sophisticated and as we catalog information better, the need for scrolling goes out the window.  At some point we’ll no longer need scrolling so it’ll get chucked.  And if we aren’t scrolling then why not have an additional, helpful bit of functionality along the bottom of whatever screen you’re viewing?

Whether or not this idea is revolutionary, particularly insightful or even accurate, I do think it is valid.  Scrolling is a hassle, clicking is a hassle.  We’ll shift to showing users more information in a way that can be digested faster.  Scrolling and clicking gums up the works.  A fixed top and bottom navigation bar provides a frame and forces designers to present information in a way that demands less scrolling.

And I can’t wait.  I can’t stand scrolling.