Making a beer label: Start to Finish

Sour ales have starting becoming more and more popular recently, and certain breweries like Wicked Weed have opened specialty serving houses to distribute these rare and exotic beers.  My last post talked about the emergence of the craft beer market, and some of the styles becoming prominent in label design.  Over the last week I’ve made a label for a sour ale, and wanted to show my process and my passion for this type of design.

I’m a college senior, and soon will be graduating hopefully heading into a promising career in graphic design.  Recently I’ve been focusing on stepping up my game and refining my style to show off what I can do, and the process of creating this beer label allowed me to do just that.

When I started the project I knew that I wanted to incorporate one of my illustrations, and have the rest of the product be themed around it.  Pen and ink illustrations my favorite thing to do, particularly expressive faces and characters.  I had several cartoons I considered using but ultimately decided to go with the one seen below.

 

sourdraft7

Immediately I thought this face would look great on a sour beer.  But I wasn’t sure where I wanted the overall theme of the label to go.  I started my drafting process by taking this image into illustrator, and manipulating the color schemes.

Using the paintbrush I created three layers of color, and was then able to easily change the color scheme by simply selecting new colors for the individual layers.  Below you can see some of the initial draft ideas.

sourdraft1sourdraft2

To help myself and other visualize a more complete color scheme I next added a background layer.

sourdraft3sourdraft4

 

At this point I started showing peers and friends my ideas to get some critique.  Most people liked the green and light blue colors, but thought the darker schemes took away took much detail from the illustration itself, which is the core of the design.  I decided to go with skin tones on the face and just use color in the background and text.

sourdraft6sourdraft5

The next step was adding the details the make the make the illustration a label.  I created a document with the dimensions of beer labels I had measured.  I created a grid system to use in the background of my workspace so that all of the content would line up perfectly.  After researching the legal requirements for my label, and what the content was going to be, I ultimately produced the label below.

SourAleLabelFinalV2

Soon I’ll be printing and mounting this label onto 12.oz bottles, creating versions for growlers, six-packs, and pint bottles.  Once those are done I’ll photograph the whole set and upload the images to my new online portfolio @zhollingworth.wix.com/portfolio.  I’ll be continuing to refine and enhance my style through drafting and practice by making more fun crafty beer labels.

New Market for Designers in Craft Beer

Recently I found a post written by designer Chris Spooner that showcased 30 creative beer labels from various microbreweries. With the revival of craft brewing in America, a whole new market has begun to open up to designers. Many of these smaller breweries are relatively unknown and use logo and label design to stand apart, resulting in some fantastic art. I love label design, and have had the chance to create one myself, and it was the most fun I’ve had doing a project.

With this in mind I picked five beers from the list that I thought were great designs and representative of modern styles of label design. There are three distinct styles I found that are very appealing and tend to be the most prominent amongst label designs.

  • Text Focus Style

IndHed Craft Beer by Industriahed Co.:

indhed

This beer label is entirely oriented around the typography and color scheme. The smooth flowing lines give the design energy and movement, and the use of cursive has a sense of sophistication about it. Perfect for craft beer enthusiasts. Using yellow and white for a color scheme keeps it simple, bright, and easily recognizable, perfect for trying to catch a perusing eye in the beer aisle.

The rest of the design is simple. On the bottle itself there is light design and white text to differentiate the type of beer. Another creative idea is to wrap the bottle in colored paper packaging. Very few beers add elements outside of the simple label or box design, so just adding the colored wrapping allows IndHed to stand out on the shelf.

PangPang Brewery by Snask:

pangpang

PangPang is another text-focused label that uses simple element to create an effective design. PangPang labels are broken down into two basic parts, the constant and the variable.

As pictured, each of the PangPang brews has the same label consisting of the PangPang typography and the miniature beach scene in the corner. On every brew the color changes, and so does the typography for the name of the beer itself.

Manipulating these simple elements keeps the PangPang aesthetic consistent throughout the various designs, but by changing the color and the same type each beer develops its own identity.

  • Minimalist Style

Prohibida Craft Beer by Modesto Granados:

prohibida

The design for Prohibida Craft Beer is simple, and elegant. The bottle is wrapped in a white label, and features a red “X” simple typography with the beers name. On the back of the label is a simple text box, with the beers description. The design comes off as very clean, yet the use of red makes it feel exciting as well. Because there are so few element in the design your eye stays put on the bright red “X” which then gets associated with the beer name located just below the “X.”

Shilling by Moodley:

shilling

Shilling is the beer label with the least actual label on it. There are a total of three elements to this design, and it has no background so the brown bottle provides the backdrop. A small crest is featured at the top of the label, followed by the name Shilling written in simple white text, and then a small set of sub-text with a short quote.

Shilling in an extreme case of minimalism, but nonetheless is reflective of the trend to move away from over complicated, hyperactive designs.

  • Illustrative Style

Kada Brew by Marko Danilovic:

kada

Kada Brew is my favorite from the group, using detailed illustrations for the focus of their label designs. Each label features the Kada Brew text, but the background color and art change. In the three brews shown in the image, we see three different cartoon animals. Creating characters for each beer is smart not only because it allows for an artistic label, but also because it makes the beer relatable and seem to have it’s own personality separate from the others.

4 Ways to Make a Better Website

I’ve been doing photography and graphic design for a few years now, and I’ve loved learning the cool new tricks and ways to design that have allowed me to make my work look professional. What I’ve learned is that it’s the little details that often separate the pros from the new guys. It’s making sure that your document is saved in the proper format. It’s checking to see if that shade of red is overbearing or hard to look at on a screen. It’s ensuring that when that beer label gets printed it’ll look the same as it did in your clients file.

In my short time in web design, I’ve noticed much of the same thing. The small details are often what make the difference between a site that looks childish, and one that might actually get business. I’ve chosen five small design changes that can make any new web designer look like they know what they’re doing.

  • Favicons

Okay so this one is simple. Favicons are the small emblems you see in the tabs of websites. They’ll show up right next to the website title, so when you go to google.com I’m talking about the little white “g” in the blue box.

Screen Shot 2015-05-10 at 4.11.29 PM

Every professional site has one, and they take less than five minutes to make and have on the Internet. You do this simply by finding or creating an icon that you’d like to use, and saving the image. If your coding a website, you know that there is a necessary file structure to allow the site to run properly, and somewhere in that structure is most likely an image folder. Save the image in that folder as either a .png, .gif, or .ico file. Then simply add the link code to your header section in your .html file.

The only special note is that the image has to be either 16px X 16px, or 32px X 32px. Using Adobe Photoshop or Illustrator, you should be able to at least resize an image to test if your code works, and then properly design one for the format later.

  • Logo’s

Every site should display a logo. Whether it’s the company you’ve been hired to design for, your logo on a portfolio site, or your favorite NFL teams logo for your fan site, logos are displayed on every professional site. From YouTube to General Electric, all businesses proudly display their logo on the first page of their site, and often some derivative of the logo stands as the favicon.

Designing a logo is no simple task, and an entirely separate project from designing a website for someone. But placing a logo on a client’s site is something every web designer will do. When deciding where the logo will be placed in a site layout, consider the importance of the logo to branding. It is the primary visual connector between customers and brands. Being that logos are the most recognizable image, they should ideally be one of the first things we see on a site.

Most websites do this by placing the logo in one of the upper corners of the body, and sometimes strategically throughout a page so that it appears multiple times. Before designing your own logo I advise you to do some very serious research about a variety of perceptual theories.

  • Navigation Bar

nav1

Adding a navigation bar to a site is only needed if there are multiple pages, but seeing as almost every site does knowing how to design one is a good idea. In the HTML document, it’s as simple as creating a list, with each item linked to a different page. But the CSS code can get a little tricky, particularly with dropdown menus. Honestly this is probably the thing I do worst in code, so I’m still trying to improve my understanding of it.

Most of the initial code can be easily found on the Internet through a simple search or code support website. Styling the navigation bar to appear and adjust how you like can be somewhat more difficult. Take the time to get one that is functional and effective on your site, it doesn’t have to be the most attractive part. Allowing viewers to easily navigate between pages is absolutely vital to keeping people having a good experience and getting the full benefits offered by your website.

  • Font Changes

I know that I said favicons were easy but this might actually take the cake on effective changes for lazy people. Changing the font on a site draws interest to specific areas, or allows for a more professional appearance that the default typeface in HTML5.

Screen Shot 2015-05-10 at 4.18.26 PM

To change the font there basically three steps. Find “Google Fonts” and find a typeface you’d like to use in your website. When you do, hit the add to collection button in the text display box. Once you’ve selected a font, select the “use” tab on the bottom bar, and the code for both your HTML & CSS documents are generated. In HTML add the link to the head section, and in CSS add the code to whichever text you’d like to alter.

If this seems confusing, go to the site and I can almost guarantee you’ll have some swanky new fonts on your site within ten minutes. Google makes this process incredibly smooth.

Latest Trends in CSS Design

I recently read a white paper written by a fellow designer and friend Mitchell McRee. In the paper, McRee explains how new trends are evolving in design for websites and mobile platforms. After reading the paper I wanted to share my takeaways, and the new capabilities we have for web design.

As we progress further into The Digital Age companies are relying more and more on the Internet as a means of connecting with customers. With increased focus on and demand for well-designed and smoothly functioning sites, it’s important to keep up to date with the evolution of our design technology and capabilities. CSS3 now offers CSS shapes to aid in text display on Internet sites and mobile platforms, giving designers more ways to actively engage with their audience.

Traditionally, when designing an HTML page with CSS, the layout is a series of boxes arranged in a specific way. Being limited to designing within boxes has largely limited the capabilities of designers in the way their displays could be altered. Any curved lines for the site had to be uploaded as an image.

css2

CSS shapes allow designers to create any curved element, and have the capability of manipulating the shape, color, size, position and any other variable. Instead of having to display all text in a box, text can now be aligned with images or created shapes to give it movement and form.

css1

The ability to align text with curved lines and images can be used to create more interest in a body of text, or to form a stronger relationship with the corresponding image. Most businesses want content driven sites to sell, inform, or entertain their customers in the most pleasing and efficient way. CSS shapes allow designers to both draw interest with unique curves and shapes, and also create orderly and space efficient shapes to communicate information clearly.

Treat Designers Like Everyone Else

This week I was shown this video “What is Spec Work?” by a professor of mine, and it got me thinking.  Spec Work is cover language that means working for free.  The video makes a few good points on the topic, that I think all young designers should keep in mind.


The first is that you should never do free work for established companies.  If you are needing more material for your portfolio then start by finding smaller projects for family, friends, and local businesses, and do them for dirt cheap if you need to.  Most professional designers get paid somewhere between $80-$400/hr so asking for $30 bucks to design a flyer isn’t breaking anyones bank.

There are two common ways that companies try to get spec work out of designers.  One is by asking multiple designers/firms to create sample work.  The other is by holding contests.  Ideally you won’t ever find yourself in this position, because the best work is produced when both the designer and the client are working together to produce a final product.  In this way, you as the designer get to do great work and get steady income, and your client gets a design they can be proud of because their feedback was a part of creating it.

We talked about how to avoid this, and the power of the all-mighty contract.  Contracts make sure that both the designer and the client are invested in the project.  And makes both parties clear on exactly what is to be expected.  By taking this step you make sure that the work you create is safe, and that terms remain the same over the course of the project.

The point of all this is to take yourself seriously as a professional.  When you’re just start your career, understanding how to evaluate your own talents is crucial to establishing your brand.  Most of what we do as designers if fun, but you have to development some business savvy to go along with the passion for design.

Ignore Everybody: 3 Tips for the Creative Type

I recently read a book by cartoonist Hugh Macleod titled “Ignore Everybody: And 39 Other Keys to Creativity.”  The book was a brief, comical, and incredibly worthwhile read highlighting 40 lessons Macleod has learned over the years working in creative industries.  After reading the book, I found some of my favorites and thought I’d share my insights.

1) Ignore Everybody

ignoreeverybody

In a field where feedback is key, this can seem like an odd idea.  Paying attention to constructive critiques and taking inspiration from other design is part of the process.  Macleod means that when you have a great idea, it can often change the balance between you and your peers.  As a result sometimes your favorite ideas will get a lot of early questioning.  Macleod stresses the importance of an artist having a well formed idea, and keeping the goal of the design in mind throughout the work.

2) Keep Your Day Job

mcl2

I’m planning on working more than one job at a time in the coming years.  Some people see this as a bad thing, for a while the idea of having to work a job and freelance on the side was intimidating to me as well.  But Macleod’s perspective is that keeping a more steady (even if slightly boring) job is more than worth it.

First of all keeping a steady job means steady income, never a bad thing.  But also it means that all of the jobs you take on the side can be the most most fun jobs, where you can keep your original ideas your own.  By having both as a source of income, both become relatively low pressure because you aren’t entirely dependent on either.

3) Honesty Works

mcl3

This one is simple.  He is saying that people know when they’re being sold to, and tend to really hate it.  When someone is speaking to a crowd, it’s different than having a personal conversation with them.  This is true for your ideas too.  The strongest ideas speak for themselves.  When an idea is great the truth is most convincing, and it doesn’t need selling.

The Value of Design

We can learn an incredible amount about our own work by examining that of our betters. Animagraffs is a site run by entrepreneurial graphic designer Jacob O’ Neal. I came across the site and found myself being captured by skillful use of his minimalist and colorful design style. After looking at the rest of his portfolio and learning about him as a designer, I thought his lessons would be worth sharing, in addition to his very inspirational content.

The first thing I came across about O’ Neal was a series of motion graphics explaining how car engines work. I’ve been proudly called a car nerd in the past and loved the content of the page, so I explored further into the site. O’ Neal had done a series of projects, including the mechanics of a car engine, the firing mechanism of a handgun, the movement of a tarantula, and how to pull off the perfect moon walk.

ecoboost-turbo

O’ Neal’s style is simple and bold, which makes is fantastic for understanding complex ideas. I began thinking of how useful motion graphics are, for a wide variety of industries. Furthermore, it got me thinking about graphic design as a form of education. Through this lens I think can learn quite a bit from designers like O’ Neal about both style and our industry.

As designers our purpose is to take complex, multi-faceted ideas and simplify them into simple relatable designs. We will be hired throughout our careers to communicate the ideas of your clients to the public. Our designs can and do actually educate people about the ideas were representing.

moonwalk

O’ Neal mentions in his portfolio that he’s a self-made success, and chose the entrepreneurial path to being his own boss. I’ve found that many designers share common feelings towards starting their own business, but often fear failure or the risks involved. Regardless of your choice of career path, I think O’ Neal shares some wisdom for everyone.

O’ Neal seems to have found his niche for design. His ability to use design to simplify complex mechanics and structures is incredibly useful, and valuable, and he highlights it.   If you’re planning on starting a design company, then to get business you will have to communicate the value of your work, and the same goes if your looking to get hired for a company or freelance.  For a young professional designer I found two major takeaways.

  • Educate clients on the value of design, and it’s purpose for educating the public.
  • Find a niche that works with your strengths and style, and highlight that work to increase it’s value.