Archive for the ‘Design’ Category

I’m Flexible, And You’re Not: Responsive Design, Take One

Apr 15th 2013

(This post is in reference to this site’s former design in 2013. And not it’s current design.)

It’s here! It’s here!

My new home is complete. Welcome.

I first registered my domain a year ago. That being prior to having any web design or coding experience, I used a premium wordpress template. I was ecstatic, thrilled, and ran around shouting “Oh Em Gee! You totes gotta check out my new site, yo!” Okay, not really (but kind of). Having your own website for the first time is pretty exciting. I don’t care who you are, you know you want to run around like a crazed schoolgirl, shouting, tweeting, facebook spamming, and mass texting the world so everyone knows about your newfound web presence. Admit it.

But moving forward, I finally took a web design course in the Fall of 2012. I thought I was such hot stuff since I “already had web experience” at this point. WRONG. My rinky-dink wordpress powered site was not “web design.” I didn’t create that template, I didn’t spend an insane amount of hours coding php. I paid for a template, installed it, uploaded some pictures and said “aww look how pretty.”

After the course concluded I was determined to eventually design my site, myself. The idea of walking up to someone and calling myself a web designer, but then immediately following that up with “buuuuttttt….. I kinda, sorta didn’t design my site you’re viewing right now. Hehehe,” just seemed completely shameful. As I prepared to design my new home, it hit me, RESPONSIVE (this is when a ray of light shines down on your face while doves gently float towards you and that ominous choir “ahhhhhhh” moment happens. Oh isn’t it beautiful).

For all of those who aren’t familiar with what responsive design is, I have a short exercise for you. Take the corner of your browser (and God I hope it’s not Internet Explorer, if it is, SHAME ON YOU! Download Google Chrome right now and do something nice for yourself for a change). Okay, so take the corner of your browser and slowly move it inward making the browser smaller and smaller. Watch the magic happen. Fun right?!

Responsive design is a major buzzword among designers and clients right now. And its core concept is something that should not be taken lightly. With the rapid increase in mobile internet users, it is important to be aware of how your content is viewed and received across various screen sizes. While some companies may choose to address this issue by having a standard site accompanied by a mobile site, responsive design is a more fluid approach and ensures the user will have the same experience across devices.

With that in mind, as I set out to redesign my site, I knew I had to tackle it head on. I knew a responsive site was something I would want to have experience with and to have in my portfolio. So, I ordered a book that would give me a strong foundation and understanding of CSS3 and HTML5.

Early on as I read through and tried out examples, the process was fun, new, and exciting. Widths were converted from pixels to percentages, text were converted from points, images became fluid, and media queries were set for specific dimensions. I was in nerd/graphic design/web design heaven. It all made sense and was coming along nicely.

I really wanted the site to have the best layout possible for each screen size. I tried various widths and various media query checkpoints before I found the combination that worked just right no matter what screen the site is viewed from. When designing a site that is under constant manipulation to accommodate the device on which it is being viewed, it is incredibly important to be certain that the readability of the content does not suffer as a result.

As the process went on, there were some factors that caused minor difficulties, but in the end were all resolved. Now that the site is complete (for now), I am so excited to share it with the world. The decision to make the site responsive was definitely a necessary one. And also now that my website is my own, I don’t have to walk around full of shame and sadness, so that’s fun.

Medicine Packaging: A Typographer’s Worst Nightmare

Aug 20th 2012

Walking through the aisles of a grocery store or pharmacy, the amount of “terrible-type” is enough to make any designer vomit Comic Sans right where they stand. Specifically, the over-the-counter drug aisle is one that requires special attention.

Medicine packaging needs a serious, well-overdue facelift. Each box is loaded with so much information, in a language most people don’t understand, in a point size small enough for ants. It’s enough to make your head spin.

When I began working on this design for an Information Design course, we were required to do preliminary interviews with the target audience to get a better understanding of their thoughts, interactions, and experiences with the OTC drug of our choice. I chose Children’s Cold medicine and focused specifically on mothers. Some of the information I gathered about the original design included:

  • Difficulty locating the expiration date
  • Confusing wording of directions/doses
  • Too many measurements on the measuring cup (that aren’t in the same units used in the directions)
  • Amount of information on box is overwhelming.

I wanted this design to cater to mothers (and perhaps grandmothers) that are worried and possibly a bit panicked about the health of their child. I laid out the information in the drug facts panels in a way that is easier to scan through and understand. The drug facts are broken into three panels, as opposed to being crammed onto one side, to allow for larger text and better hierarchy between sections. I also decided to do away with the bottle. Instead, this design uses pre-measured liquid sticks. The liquid sticks eliminate the need for measuring, are more sanitary than reusing a cup, and conveniently create a more child-friendly aesthetic. It’s a win across the board!

If you look through the gallery of this packaging design you’ll notice some of the other issues I addressed with this design.

[ilightbox id=”6″]VIEW COMPLETE GALLERY[/ilightbox]

    Fun Facts About the Process

  • I originally based the box template design off of crayon boxes.
  • The tubes used are actually glitter glue sticks. I squeezed out all the glitter and soaked the tubes in vinegar to completely clean them out.
  • The liquid shown in the tubes is actually jello. I wanted to reduce the chances of actual liquid spilling on, or destroying the boxes before I had a chance to get photos of them.
  • People HATE that most cold medicine boxes aren’t re-sealable. Two small dots of velcro made this any easy problem to solve.
  • Deborah Adler’s redesign of prescription packaging for Target was definitely a source of inspiration. (If you don’t know what I’m talking about Google it. Like, NOW. You deserve it.)

Disclaimer: I do not own the rights to the Kroger Co. trademark, logo or any of its intellectual or creative property. I am not profiting from their work or selling designs involving elements in which I do not own. The logo used in these designs are property of Kroger Co. ☺

Perform! Laugh, Dream? Live. (Inspired by Cirque du Soleil)

Aug 13th 2012

I am a HUGE fan of Cirque du Soleil. I own 7 DVDs (including the Fire Within series DVD set), 8 CDs and I purchase a show poster for every live show I attend (currently at 4 posters, soon to be 6). Everything about the company from its artistry to marketing, branding and design work is incredibly inspiring.

Back in college for a packaging design project we were instructed to create a bag and box for any company of our choosing. I took the opportunity to draw upon my love of collecting everything Cirque, and choose Cirque du Soleil as my company. I designed the Perform! Laugh, Dream? Live. campaign as a way to encourage show-goers to collect pieces, or an entire line of Cirque keepsakes. Each installment of the campaign embodies its own personality common to the ideals and practices of Cirque du Soleil through the interaction of the photography, color palette, symbols, language and punctuation (Yes. I do in fact have reasoning behind each choice of punctuation).

This design is one of my personal favorites. Because I am the target audience for this campaign, I had complete freedom to design for ME! I focused strongly on what excites me about Cirque, what I want from Cirque, and what emotions I relate to Cirque.

Oh, and because I love Cirque collectables so much, I designed the front of each bag as a tear-away face to become its own stand-alone poster. I just couldn’t resist!

[ilightbox id=”5″]VIEW COMPLETE GALLERY[/ilightbox]

Disclaimer: I do not own the rights to the Cirque du Soleil trademark, logo or any of its intellectual or creative property. I am not profiting from their work or selling designs involving elements in which I do not own. The photography and logo used in these designs are property of the Cirque du Soleil corporation. ☺

Marching Music’s Major League

Jul 30th 2012

I guess I should start this post by explaining that I am and always will be, a big fat marching band geek. I didn’t have a choice, it was bound to happen. I grew up going to marching band competitions when my older sisters were in high school and I instantly fell in love. I started playing alto saxophone in middle school and stuck with it throughout high school.

Enough about me and onto the design. This design is a series of three ads for Drum Corps International (DCI). DCI in the world of marching band is a huge deal. It is the standard of perfection, creation, innovation and any other –tion you can think of for the world of marching band. But I should clarifly, DCI isn’t “marching band,” it’s Drum Corps. “Marching band” has this connotation of a small, rinky-dink, group of less-than-social high schoolers. Drum Corps is an entirely different realm of professionalism and artistry. If you ever take the time to attend a DCI competition, I guarantee it will change your perception of marching music.

Going off of the distinction between drum corps and marching band, this brings me to the copy used in each ad. The language is specifically catered to people in the marching world, and even more specifically those who have witnessed a DCI performance. The object of the ad campaign is to encourage people to get out and go audition to be apart of something more than what they’ve experienced.

[ilightbox id=”4″]VIEW COMPLETE GALLERY[/ilightbox]

    Side Note

  • If you follow DCI each summer, you might notice that I have a bias toward the Cavaliers (2 out of the 3 ads use images from their 2011 program)

Disclaimer: I do not own the rights to the Drum Corp International trademark, logo or any of its intellectual or creative property. I am not profiting from their work or selling designs involving elements in which I do not own. The photography and logo used in these designs are property of the Drum Corps International organization. ☺