A Trick of the Eye

KevinTong6

I ran across this beautiful graphic this week and loved it for several reasons. First, it’s very creative. Second, it still uses a lot of great design principles to really emphasize it’s message. I’ll point some of those out below.

Alignment

alignment

This design uses center alignment for it’s image and main title information. Unlike regular center alignment, however, it tweaks the wording so it is slightly diagonal. They do this for a number of reasons – first I think because it makes it more artistic with the center alignment with the image. Second, it aligns well with the diagonal lines that are softly shown in the background of the page.

Color Scheme

color scheme

The color scheme of this design is also a fun one. They have a soft blue background that is lighter on top and has darker hues as it gets lower on the page. The main image of the design has a mix of colors, the main ones being red and blue – good contrasting color choices for warm and cool colors. This works well with the design of the image to show conflict.

Contrasting Typography

contrasting typography

The designer of this ad chose contrasting typography. They used a very flowy script font for the title information and then used a standard san serif block font in all caps. Using contrasting typography brings in enough of a change to make the typography interesting and engaging.

Contrasting Design Element

There is a lot of contrast in this design, specifically for the main design graphic. There is the face of the woman looking out with traditional coloring of her face. You can tell that shape is a woman’s face and make out those details.

face 1

Then the contrast to that is in between the curved lines there are blue shadows and a red face. The red and blue contrast nicely with each other, as explained above. But the red color choice for the sinister face really contrasts well with the pale skin and light background as well. The pale face looks more innocent and calm, while the red face looks more mysterious and devious. I really liked the contrasting theme there as well.

face2

Overall the design of this graphic is really fun and interesting, with a lot of good stylistic elements to make the design stand out and look professional. Implementing these types of design principles really elevate any type of graphic. Thinking outside the box and being creative elevates it even further.

Advertisements

What Makes a Vector Illustration Look Professional?

There are some excellent vector illustrations out there, but there are major differences in novice vector graphics and professional looking vector graphics. Today, I want to point out some things that make a vector illustration look even better.

I found this beautiful artwork from artist Kaz Oomori, who partnered with Disney and Fandango to create beautiful posters for the movie Star Wars: The Force Awakens.

3_Kaz_oomori-Star_wars.png

The artwork shows numerous reasons why it works well as a vector illustration:

Leading Lines

finn leading lines.png

The illustration takes advantage of the design element of leading lines. Your eyes are naturally drawn to the image of Finn and Kylo Ren because of the use of leading lines. Not only are Finn and Kylo Ren drawn in a diagonal, action way, but the lines leading off behind them really emphasize that action. Movement, as shown above, really elevates the appearance of this poster.

Good Use of Value

finn value shadows

There is an excellent use of value to show dimension with the vector illustration in this poster. Through out the design there are examples of shadows on the two men, and also the different value shadows leading off of them. On the face alone there is several layers of different shades of color, some of them the same type of color scheme just lighter and darker, but the artist also takes advantage of the light saber color reflecting off his face as well. There is also dimension with the shading on his pants, and also on Kylo Ren’s clothing and mask as well.

Contrast

finn contrast

Contrast is prominent in this design in multiple ways. Firstly, the color scheme shows great use of contrast with the cool blue color with the hot red color. There’s also contrast with the vibrant red/pink color of Kylo’s light saber highlighting off of his dark black and grey costume. The contrast between the two characters is also noticeable here as well with Finn on the good side and Kylo Ren on the bad, so having those two perspectives is a fun play on contrast as well.

If you look at the other artwork in the series they all have these same elements with consistency and repetition between the different posters, and all of them show good use of good contrasting design principles.

1_Kaz_oomori-Star_wars kaz-oomori-star-wars.png

Having warm color verses cold colors, using a variety of shades and focusing on the value of the design, and also using diagonal action lines really helped elevate the look and appearance of these vector illustrations. I am definitely a fan.

 

Why You Should Give a C.R.A.P. about Design Elements

I found this awesome flyer designed by Damien Raymond and Paul Filippi of Studio Shebam. [Disclaimer: I don’t actually speak French. I just asked my dad. So if this info is incorrect you can blame it all on him. His name is Vaughn and he lives in a van down by the River.] The backlinks to the Studio haven’t been working, but you can find the post where I found the flyer on fubiz.com.
visual media reverse engineer posting
There are a lot of reasons why I’m drawn to the flyer. First off, it hits on all the main design elements I love: Contrast, Repetition, Alignment and Proximity. It also has excellent use of color. Let’s dive in and talk about each of these elements. It’s going to be fun!

CONTRAST


I love the obvious contrasting elements on this design. The bold lines contrast nicely against the white. There’s contrast between the photograph portion of the design and non-photographed triangle sharp lines. The colored portions of the flyer also contrast against the black-and-white photo. The title font offers visual contrast with the font because it is bolded and much larger then the font next to it. Because there are so many fun, bold elements on the design it easily draws attention and creates interest.

REPETITION

Repetition
There are many repeated design aspects evident in the flyer. There’s repetition in the angled portions of the design that make the page segment into triangle designs. There are also whimsical design elements in it that bring in repetitive colors (green, gray, white) and shapes (lines, triangles). The repetitive portions of the design help unify the design and strengthens it by tying the elements together in a creative and fun way.

ALIGNMENT


The alignment on the page is quickly evident by the Title and text of the flyer being flushed right. The bottom text is aligned with the lines on the left too. Something else I liked to see was the design of this flyer highlights angles and lines a lot, so I found it pretty clever that they aligned the P in Production and the C in Cabaret to align with one of the lines of the design as well. The alignment on the flyer unifies the design by keeping things organized with an invisible line and also in the process keeps the design in angles that flow with the rest of the design.

PROXIMITY


The physical closeness of the text implies a relationship between the information they are communicating with their audience.The top circled section is the main attraction they are advertising followed who is performing in it. Both are the main points, emphasized by their proximity and font size. The next section explains the time and dates of the production, obviously still important information because it’s bolded and larger but it’s relationship to the Title of the attraction is obvious because of the spacing between the two. And the small font on the bottom of the file is the ticket and contact information and you instantly know that it is not information related directly to the main event or dates of the event – why? Because of the PROXIMITY between it and the other blocks of text above.

COLOR


Lastly, there are some basic color design principles in play here that are really nice too. Not only is color working as a nice contrasting element, but the colors have a nice relationship with one another. The green is the same color through out, but when paired as an overlay over the photograph on the top allows the green triangle to compliment as an analogous combination because they are similar greens, just lighter and darker shades. I also like how the designer incorporated the same color branding of white, dark gray and green through out to unify the design nicely.

Final Thoughts

Due to it’s nice use of contrasting elements, information proximity, color branding, whimsical repetition, and nice right alignment the flyer is very unified and creative, and professional looking as well. It’s evident that the designer didn’t just stick inside the box, but added additional design layers and elements that created a fun feeling and added dimension.

Next time you see an advertisement or design that draws your attention, remember to give a C.R.A.P. and see what makes it visually appealing.