Freelance work for a NYC based online wine seller

Posted in Design, Graphic Design, My Work, Photoshop on July 9th, 2011 by bradleymu – Be the first to comment

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.

 

Rethink the Food Label

Posted in Design, Illustrator, My Work, Photoshop, Typography on July 1st, 2011 by bradleymu – Be the first to comment

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.

 

Trial Project

Posted in Design, Graphic Design, My Work, Photoshop, Uncategorized on June 17th, 2011 by bradleymu – Be the first to comment

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.

 

Capstone Process

Posted in Uncategorized on May 16th, 2011 by bradleymu – Be the first to comment

This post is to show the work that went into my capstone.  A lot of screenshots.

Sources:

 

 

 

 

 

The above screenshots are of highway statistics.

I compiled data from the Federal Highway Statistics reports

http://www.fhwa.dot.gov/policyinformation/statistics.cfm

 

The above screenshots of data I collected on warehouse style retail stores.

I was able to find out square footage of the biggest and most common warehouse style retail stores in North Carolina.  Then taking that square footage and multiplying it by the number of stores in North Carolina, I was able to find the total square footage for each retail chain.

Parking lot sizes were an important component of determining the total footprint, statewide, for the retail chains.  With a distance measuring wheel, I measured parking lots of area warehouse style retail stores.  I would walk the length and width of parking lots in front of the retail stores.  I measured three parking lots for each type of store and then averaged those three measurements to get a general idea of parking lot sizes.

I conducted a usability test of my infographics.  I created static and interactive infographics and put them into basic websites.  I then had a class of 32 undergrads go to the websites and fill out a paper questionnaire in response to each infographic.

Here are the websites:

http://student.elon.edu/bmu/versionone/

http://student.elon.edu/bmu/versiontwo/

 

Above are screenshots of the questionnaire I gave out to students during the usability test.
The evolution of an infographic.  Commuters in The Triangle.
The above screenshots are of the evolution of my city population infographic.

Interactivity and the infographic

Posted in Uncategorized on April 28th, 2011 by bradleymu – Be the first to comment

Purists would have you believe a perfectly designed infographic requires no interactivity.  All the information is adequately, if not perfectly, presented and in a logical, hierarchical, intuitive and easy to understand way.  As of the beginning of February 2011, I shared this view.  Now, I think this view is about as old-hat as, I don’t know, rubbing two sticks together to make fire.

With any sort of information design, logical, hierarchical, easy to understand information presentation is a must.  Print designers have been doing this for years: tables, ledgers, bar charts, pie charts and, the beloved, venn diagram–just to hit the highlights.  Any sort of non-prose information can fall into this category of ‘designed’ information.  We think of information design and infographics as a recent phenomena, but it goes way back; as long as we’ve been assembling information without the traditional subject, verb, object model.  Merchants needing to keep inventory, cartographers making a map, stone cutters telling a story on a monument.  They all had to rely on something more intuitive.

Information design is all about guiding the viewer’s eye around that piece of media.  Different fonts, different sized fonts, the placement of text and non-text elements, something as simple as a thin line, these are all tools an information designer uses to logically tell the story of the data they’re working with.  We all understand this–top to bottom, left to right, bigger fonts to smaller fonts, lines separate or guide, color to emphasize, &c.

This all still applies to interactive infographics.  So if an interactive infographic doesn’t adhere to the these conventions, forget it, it’s useless.  Interactive infographics, sitting on a screen, without any input from the user, should be up to par with a static infographic.  They should tell a story, convey information, be intuitive, all without any input from the user.  The value of interactivity are the additional layers of information that a static infographic could never achieve.  A user can click or hover over an element that’s already presenting information to get even more information.  Visual elements can be animated presenting a visually rich experience.  And like all interactive media, the user is put in the driver’s seat.

Interactive infographics require an even greater sense of hierarchy, intuition and clarity than static.  Elements will move and shift and animate.  The user must always know where he/she is in the infographic.  The minute they get even a little confused, they move on.

It’s a trade off, users can potentially be exponentially more engaged with an interactive infographic than a traditional, static infographic.  But interactive infographics must be flawless in their execution of information design.

And on that note, a parting thought.  Given that interactive infographics must be even more organized and intuitive than static, how do we balance simplicity of design and presentation with complexity and depth of data?

Header design for my capstone

Posted in Design, Graphic Design, Illustrator, My Work on April 28th, 2011 by bradleymu – Be the first to comment

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.

The anatomy of my initials

Posted in Design, Illustrator, My Work, Typography on April 21st, 2011 by bradleymu – Be the first to comment

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.

iMedia Showcase invite

Posted in Design, Graphic Design, Illustrator, My Work, Typography on April 7th, 2011 by bradleymu – Be the first to comment

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.

Infographic Update

Posted in Design, Illustrator, My Work, Uncategorized on March 27th, 2011 by bradleymu – Be the first to comment

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!

Preparing for the Home Stretch

Posted in Uncategorized on March 23rd, 2011 by bradleymu – Be the first to comment

Halfway through Spring Break, I’m a bit miffed at myself.  I intended to spend the break waking up early, working all day long and into the night, getting myself on a sane sleeping schedule and generally being very productive.

I can’t say I’ve really stuck to the plan.

So far I’ve caught up on missed episodes of the BBC’s Top Gear, gone to the beach with a buddy and managed a couple trips to the gym.  Not quite as productive as I imagined it.

Today I decided to not be worried about it.  In fact, I got some work done today.  My sleeping schedule is now bang on (pardon the English slang–it’s a result of all the Top Gear).  But most importantly, I’m taking a quick second to chill out before the home stretch of grad school and what will likely be spent as the most stressful, hardest working, most late night filled month and a half of my life.

When I realized this about an hour ago, I got a little scared.

But I’m glad I realized this.  I can be hard on myself.  I sometimes take life a little too seriously.  I can get caught up in my work.  So for me to know and think about how intense the next month and a half will be should help me out immensely.  Amidst job searching, the push to complete my capstone, keeping up with classwork and all the little things that are going to pop up, if I don’t let myself get too caught up in it all, I think I’ll do really well.

So I’ve set a daily mission for myself.  Find and reflect on three things.  1.  Something I can be proud of.  2.  Something I can be thankful for.  3.  Something to laugh at.

If I can find those three things every day, I should be able to keep my head on straight and keep my sanity.

Home stretch of grad school, here we come!