Slowly coming together.

So I finally got around to doing some work on the sign. I’ll take you through a step by step process of what has happened so far.

I don’t have access to Adobe Illustrator currently, so I’m using Macromedia Flash 8 to construct vectors and JPEXS Flash Decompiler to convert them to vector based SVG’s and printable PNG’s. Unorthodox, but it gets the job done; plus I’m pretty familiar with the programs.

First came the footer, I used this picture as a reference to recreate the footer in vector form from.

Now, Flash 8 has no pen tool like newer iterations of Flash, but any veteran of graphics in Flash knows the line tool can be used as a pretty good substitute. Here’s my trace over of it with the line tool.

I kind of forgot at this point that there needed to be a curve at both ends, but I eventually got around to fixing that. Next step was coloring in the lineart, which is as simple as using the paint bucket tool on the lines.

Though I have no pictures of it, as it’s hard to show in pictures, I had to separate the colors in to their own groups, similar to how traditional vector graphics work. Flash renders vectors a lot differently than other programs.

After words, I moved on to the text within the footer. They use a custom font for this in their signs, but I didn’t have access to the font. Fortunately, I found something quite similar to the font in the default Windows fonts. A keen eye might be able to tell the difference, but with how these signs are made to quickly glance at to get all the info you need, most probably won’t even notice.

Side by side comparison using the same words:

Some fooling around with the text spacing and size, and I was able to make it a bit more accurate to the reference.

Now I had to find a font that was going to suit the rest of the sign. If you look at the signs from the previous post, you may notice the fonts tend to jump around from sign to sign. I didn’t really want to do this, so I opted to look for a font similar to the one found in the Weigel’s logo.

Some searching and I was led to this font. It isn’t identical, since the letters are slightly misshapen to make it look like ink, and the edges are not as rounded off, but it comes very close, almost unnoticeable unless you really scrutinize it.

You can see here using the base colors just how well if flows with the Weigel’s design style.

Just as a quick test, I wanted to see how I would format the text for each bit of info. Using the same or similar formats may make it hard to see what is being explained in each section, so I wanted to make sure each section has distinct formatting.

It should be easy to tell what is what, but I’ll still explain it just incase. Attention grabbers are the big red text with the drop shadow. Medium black text is for labeling the price of each advertised combo. Small red text is for the description of each combo. A distinct, black, capitalized, and bold faced ‘OR‘ is used to describe varying products that can be mixed and matched with the combos. It’s more straight forward than advertising two separate combos with only one item differing the two products.

Anyways, that is all I have for now. I need to start photoshopping (or GIMP’ing, in this case) the assets of the products, which I will also document my process of.

An awful sign.

Weigel’s is the store I currently am employed for. I’m nothing more but a store associate that throws stock, does food prep, and does back up register work. I usually just clock in, do my job and help out with other co-workers whenever possible and vice versa, and clock out. It’s a good job, and I quite do enjoy the company I work for currently.

Occasionally, I might see some clear issue with something in the work place, and make a suggestion to the higher ups about it. One example is when the code operated locks on dumpsters kept jamming, and I suggested we switch to key operated locks since their more reliable. Ever since we switched over to them, their have been no problems with the locks jamming.

Another example being when the Buffalo Chicken pizza wasn’t selling all to well in singular slices. After trying it a few times myself, I felt the default amount of buffalo sauce we put on the pizza was a bit lacking. The pizza has a signature zig zag drizzle of sauce on it, so dumping more sauce on it during it’s prep would make it look less appealing. I suggested we put out hot sauce packets in the condiments to allow people to control how much sauce they want on the pizza; that it could boost sales without ruining the visual appeal of the product. Ever since we’ve had those packets, the Buffalo Pizza slices sell quite well when we put them out.

Months a go, the higher ups introduced a sign that was supposed to advertise pizza combo deals. The picture below is what they introduced.

Bad Sign

Without any knowledge of the design style of the company, it’s easy to tell why this sign is bad. The clip art at the top right is redundant; the contrast between the red text and the blue background is too low; the design itself has no symmetry to it; the brick background in combination with the stock images creates visual chaos due to a lack of isolation and harmony. If you want to get super nitpicky, it clearly been printed on basic printer paper, and haphazardly laminated to make it look “professional.” It’s reminiscent of something you’d find in a high school snack bar. It’s actually a lot worse than it seems, since the sign goes entirely against the design style of the company, and I’m going to go in to depth as to why that is.

The color scheme of the store has changed over the years, but the base two colors that have always stuck around are white and red. Initially starting with just those two colors, it later on moved to white, red, and blue for some time. This was later changed to white, red, and black to help differentiate it from other gas stations that use the previously mentioned color scheme (which is a lot). White is used as a base. Red is used as an accent. Black is used for text against white, but is switched out to white when against red. Here are some examples:

Basic Weigel's sign.

There are some exceptions to the rule, where red text is sometimes used against white backgrounds on adverts/signs when advertising a specific product.

Red Text Exception

Now, we could just say the sign itself is old, or is working from an older design style sheet as far as it’s coloring goes, but if that’s the case, it managed to get this wrong as well. Our store just so happens to have once legacy sign still up; forgive me for the glare of the window.

The coloring here uses blue as a primary and red as an accent. The text on this is still white to make it easy to read. So the previously mentioned sign fails at getting any of the signature colors right.

Something else about the Weigel’s design style is it’s usage of isolation in it’s signs. It draws the customer’s attention to the words and the products being advertised, while also giving any products in their signs a drop shadow to keep the designs and products from looking flat. It achieves that quite well with it’s white backgrounds. Here are some examples:

If you take a look back at the sign in question, it fails to do this, opting for a brick image for a background, and cramming all of the product images (stock images from online) in to one area, creating visual chaos. Believe it or not, this lack of isolation is probably what really kills it here. Due to how cluttered everything is, it wasn’t until much later did I realize it’s actually advertising four deals as oppose to just two.

So, why am I writing about this. Well, I brought this up with the store manager, about just how much of an eye bleed the sign is, and how no one even takes advantage of the deals on it. She completely agreed with me on it. I offered to redesign the sign to not only match the design style of the company, but to also make it easier to read and understand what is being advertised. She said that was a great idea.

I have no professional experience in graphic design, so this is going to be my first one. I intend to jot down in this blog section my progress on fixing up this design.