El Lissitzky
I’ll admit it – I had a HUGE design crush on El Lissitsky when I was in school. I had just discovered Russian Avant Guard work and was in love with the red and black color scheme, harsh angles and visual punctuation, and geometric simplicity. Whats not to love? We can learn a lot from El Lissitzky’s work and apply it to our own designs.

Visual Hierarchy

source

Visual hierarchy is the grouping of elements arranged according to emphasis.

Beat the Whites with the Red Wedge (1919) This is one of the most famous examples of El Lissitzky’s work. The design of this poster utilizes direction, movement and hierarchy. Through the use of geometric shapes, color, and size your eye is directed from left to right in the poster. Your eye is first drawn to the large red triangle, and then to the white circle and then the remaining black area surrounding the circle. After this you notice the text and all the secondary elements of the poster.

When designing consider the placement of elements in your composition. Do you want your viewer to see this element first? Consider placing it in the top left. Is it the most important element? Consider making it bold, or large, or using a color that stands out from all the other elements. In the same fashion consider the importance of secondary information.

Not sure if the hierarchy in your design is working? Print out your design, take a step back and squint and see which elements stand out to you. You can also ask others not involved with the design to tell you the order in which they see things.

Visual Punctuation

For the Voice 1923

source

Suprematicheskii Skaz (About 2 Squares) 1922

source

Visual punctuation can include space intervals, rules, or pictorial elements to separate, connect, and emphasize words or lines.

Another design element Lissitzky is known for is visual punctuation. In the book and magazine layouts above Lissitzky uses large type, horizontal and diagonal rules to direct your eyes around the page.

When designing consider where you want our users eyes to go and pause within the composition. Add visual elements to direct your user and make sure the direction is clear. Make them stop and read important information with design elements.

Texture & Depth


source

Texture and depth are another way to add visual interest and direct your users attention.

The Constructor (1925) is a photo montage that features movement, contrast texture and depth. (Can you believe this was all created BEFORE Photoshop?)

Depth adds detail to composition and draws a user in. The users eyes pauses at the illusion of depth created where the hand intersects with the eye. The strong lines and texture of the graph paper also cause the users eye to be directed in a vertical or horizontal motion.

When designing consider adding depth by layering photographs using blending modes in photoshop or through some other means. Add texture that directs your users eye around the composition and directs them towards important design elements.

Looking for more Avant Garde inspiration?

I know I know! I can’t seem to get enough of the dymanic geometric design either! For more inspiration from Russian Avant Garde artists visit: http://www.moma.org/interactives/exhibitions/2002/russian/

Also check out this flickr photoset of avant garde books: http://www.flickr.com/photos/migueloks/sets/72157612436281954/

What have you learned from designers that came before us?

Share what you have learned from designers past! Leave a comment and let us know what you think!