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.

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.

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.

3 Creative Design Sites to Keep Your Art Fresh

In the world of each artist there is something that exists which I refer to as “The Wall.”  At a certain point, we all find ourselves mindlessly staring at our work, and asking what to do next?  In times like these I’ve found it’s helpful to turn to outside sources for some new inspiration and challenge.  This post will discuss three blogs that I’ve found that provide inspiration and keep my designs from getting stale.

Abduzeedo:

Abduzeedo has two basic benefits: inspirational material, and tutorials.  But they cover an immense amount of content, across all types of art and design.  The various collections on the site provide an immense amount of inspirational material for readers.  For designers looking to add some handy skills to their resume, they offer tutorials in Photoshop, Illustrator, and several other software programs.

Screen Shot 2015-05-10 at 3.07.45 PM

Additionally the site has links to interviews with artists active in the world of design.  They post news articles relevant to design and designers, everything from web design awards to book reviews.  Abduzeedo also publishes lists of weekly top sites to keep readers aware of what their peers are producing.

Wallpaper*:

The blog Wallpaper* is an interesting site to browse around.  Really it’s more of a culture blog with a design trend, but none the less its a great place to go for some mental refreshing.  They do offer an entire section dedicated to design, but not limited to graphic or web design.  There are tabs for art, travel, fashion, lifestyle, and jewelry as well.

Screen Shot 2015-05-10 at 3.06.17 PM

This site should be considered more for its use as a mental relief.  I find that when I get stuck in a project, it’s less often due to lack of know-how and more often due to dissatisfaction with the direction the piece is taking, or simple lack of inspirational ideas. By taking the time to look through news across fields of design and art, you can give your mind a breather and possibly come across an element of design you can use.

Cool Hunting:

The last blog I want to discuss is Cool Hunting.  Which is, by the way, very cool.  The main reason this site makes the list is just because of how fun it is to navigate.  The layout and interface of Cool Hunting is really an impressive piece of web design on it’s own.  Most of the content on Cool Hunting is links to external articles, but they offer material on everything you could imagine.  Scrolling down the page I see headlines for videos discussing threads from Sri Lanka, Nordic Skiing, and tips for traveling the world cheaply and uniquely.

Screen Shot 2015-05-10 at 3.03.30 PM

Whether or not you find an article to inspire you towards completion, Cool Hunting offers some seriously interesting stuff.  If you need some ideas as to setting up your own site, go play around on Cool Hunting and see how they’ve laid out their sections and the search menu.

Design Blogs: What You Don’t Know

We’ve been following several blogs in my Writing for Visual Media class for the last couple weeks to try to get a better sense of both what resources are available to us, and to be more aware of our own online presences. What I’ve come to discover is that there really is no one proper way of writing or presenting a blog, perhaps part of the medium’s allure. We read an article highlighting 20 distinguishable types of blogs and articles, and their various purposes. This post will discuss some of the articles I’ve come across and what they can provide for their readers.

Web Design Dev:

One website that I’ve been following is webdesigndev.com. The website and blog obviously focus most heavily on web design, from adobe tutorials, to CSS, to WordPress layouts, the site has information on everything a web designer might need. The site is what would be defined as a “list” blog, meaning most articles on the site are titled “top ten X” or “45 most popular Y” etcetera.

While some may find this a bit cliché, it’s actually incredibly useful when it comes to web design. Sites like this often provide quick how-to knowledge, and downloadable materials that expedite design projects.   The article I read was titled “10 More Illustrator Tips, Tricks, and Tools.” (Webdesigndev.com)

Graphic Design:

Another site I’ve been looking at is simply called graphicdesign.com, easy to remember. This site takes on a very different tone than the previous one. This site’s focus is information, on all things related to the industry of graphic design. The site contains a number of resources that provide readers with knowledge on all currents goings-on in the industry as a whole. On the homepage, readers can find a collection of blog posts, upcoming design contests, major design events, and trending articles. The site also has it’s own job board, firm directory, and school directory.

Providing some tutorials, the site also has instructional qualities, but this does not appear to be the main feature. However as far as keeping up with business trends in the design world goes, this site will do the work for you. The article I read here was titled “Norway Unveil Stylish Passport Design Illustrating the Country’s Identity.” (Graphicdesign.com)

The Design Blog:

My next blog is less serious, and has a much lighter tone to it. The Design Blog is an inspirational blog, meant to provide its readers with content of the highest quality to give young designers something to aspire too. A young designer, Ena Bacanovic, who seeks to give her peers something to aim for in their career, and to spread her passion for design with those who share it, curates the site.

In my mind these sites prove useful by popularizing graphic design and creating an greater appreciation for the practice. By increasing demand and knowledge of graphic design we increase it value. The site has very few articles, but an enormous amount of visual resources. (http://thedsgnblog.com/)

Gurafiku:

The last blog I want to discuss is called Gurafiku. This blog is a collection of visual research, qualifying it as a research blog. This site stands apart from the others though, because it’s focus is on the history of graphic design in Japan, and to compare Japanese design to western design.

This site again doesn’t post a great deal of reading material, with the vast majority of it’s content being image based. However by simply studying the designs, we begin to see the differences in style between western design and Japanese design. The curator of the blog, Ryan Hageman, categorizes posts by type of content and also by type of artist, making the search for inspiration somewhat easier. (http://gurafiku.tumblr.com/)