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.

Advertisements

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.