Jan Tschichold was a calligrapher, typographer & book designer. He played a significant role in the development of graphic design in the 20th century by developing & promoting principles of typographic modernism in the 1920’s.
This article is about his style & how it can be adapted to create engaging & original user interfaces. His work exemplifies all that good design should be, hierarchical, engaging, original, relevant & timeless…there is a lot to borrow.
Every designer needs a mentor & Tschichold is my go to for inspiration on getting out of the rut user interface design has been stuck in for years. Looking at his layouts I think how would a master like this work as a UI designer? Unfortunately he couldn’t with the limited technology most user interfaces have been created with over the last decade.
Float based/bootstrap design & architecture tools enforced us into designing within limitations & as a result most interface layouts are inherently identical. Over a year ago CSS3 introduced CSS Grid for layout. It is the antidote to typical UI structure giving us more freedom/flexibility. We finally have tools worthy of a modernist visionary, now let’s put them to work & develop layouts Jan would approve of.
Tschichold’s most recognizable contribution to layout was popularizing asymmetrical design. In design we have symmetrical & asymmetrical approaches. In symmetrical design both sides are visually equal, more like a mirror image, think Taj Mahal – a classical approach.
Asymmetrical design is when both sides are dissimilar for instance the Sydney Opera house. In symmetrical design balance occurs naturally, you just design one side like the other. Asymmetric design isn’t just about placing some objects in random places, it requires skill to create balance.
The benefit to asymmetric layout is it allows a designer to direct the eye, drawing attention in non linear hierarchical fashion. Asymmetric design facilitates a flowing dynamic experience over a static symmetrical design where you get transfixed on a main focal point, like moving mechanically up & down a ladder.
Typical off the rack web design is symmetrical, done to death over & over, the “rut based design” we want to free ourselves from. To create a successful asymmetrical design, you still need to figure out how to balance the layout – thinking like a UX designer, where you want a viewer to start & end. Asymmetrical layout is design but with a brain!
So what are the key elements we can borrow from Tschichold for User Interface design. His use of typography as an element of design.
The layout of copy in itself is design. Even if you didn’t read the content it is visually engaging & dynamic using negative space to let copy breath, the message is always clear. Type wins as a design element just as much as a vehicle to say something. In his own words: “The essence of the new typography is clarity. This puts it into deliberate opposition to the old typography whose aim was ‘beauty’.
The aim of every typographic work should be the delivery of a message in the shortest, most efficient manner. White space is to be regarded as an active element, not a passive background period. Asymmetry is the rhythmic expression of functional design.
His approach relates to a clear message with relationship to design. Visually he uses typography as design & vica versa, not separate constructs.
Often we find ourselves just throwing in copy without regard to its relationship to design. Some separate elements on a page just ends up looking like an afterthought. Good User Interface design involves creating a cohesive element, each element supporting the other to reflect its innate character.
Tschichold’s most memorable works used contrast to convey its message. Mainly his Red/White/Black designs were the most notable.
While this isn’t new to the user interface design world it is one of Tschichold’s trademarks that he became synonymous for. Contrast is an essential visual aid to create hierarchy & to guide viewers attention through a page. We use it to draw attention & its effects are instrumental in all good UX.
In UI it needs a little more thought though. You don’t want to over power your products with fighting colors in a UI. The product or message should always be the hero so sometimes a neutral UI with contrasting headings, navigation and CTA’s to lead the way is all that’s needed.
In his own words: “Contrast is the most important element of all graphic design.” Picking a contrasting set of colours is a key step in creating a beautiful UI that speaks for the brand & directing awareness. We take it for granted toda but this bold use of contrast was a groundbreaking a leap forward for graphic design.
One of Tschichold’s trademarks in design layout which set him apart was element rotation. Almost all of his layouts include rotation and asymmetry of some kind creating striking modern designs.
User Interface design elements typically run horizontally or vertically, this is all part of what has kept user interface in the doldrums for over a decade. Had Tschichold been with us he would have been visually bored to tears with our precious internet.
Luckily he is still with us, from his seminal body of work we can draw inspiration to create more memorable experiences. So why are we stuck in this rigid layout mindset when we too have the power to rotate any type of media? It’s simply just a rut we are in.
I’m not suggesting a whole site should be rotated 45 degrees, that would be plain bad usability. However the odd element rotated and overlapping another can really lift a layout out of the norm.
CSS easily handles rotation, layering & vertically running type to handle even the most challenging Tschichold layout! Get your Tschichold on & think about leveraging the power of rotation to set your next project apart from the pack.
While you may be excused for thinking many of Tschichold’s designs were quite rigid, often there are details where objects overlap. This really helps to create a cohesive design and tie a layout together.
Often this approach is overlooked in UI design & content layout. Designs just end up looking like a collection of different unrelated elements…nothing is allowed to make contact or create a relationship with another. Sure these style of pages are functional and intuitive but really we have the tools to do better now, even for mobile UI.
Overlapping allows us to create relationships between elements, it’s visually more dynamic and can be used to create hierarchy and move a viewer’s eye around a layout. Creating a hero image that’s rotated and overlapping sections to direct user attention to a lead generating form…it’s Tschichold post modernist dream come true!
Overlapping design elements makes for a modern integrated look and feel that really brings a UI to life, has a looser more organic feel and makes for a slicker UX.
No this isn’t about having a bad day in the Astronauts office. It’s about what you don’t do that counts here.
Negative space refers to the space around any object. Like the universe there is way less stuff in it than stuff, so taking cues from cosmic design we have Tschichold’s approach.
In any of his layouts there is much more space than anything. This reminds me of the sage wisdom “Bad design screams, good design whispers”.
Allow each element to have its own space and remove anything superfluous. Let everything have breathing room. Less is more! Get your Tschichold on and do more through doing less today!
In response to the sloppiness of the layouts of his time, Tschichold became something well ahead of his time. If it was laid out symmetrically & looked anything like the norm or like something he had done prior, it was a heinous crime to him. Imagine how a genius like this would view web design over the last decade? Generic & conservative would be putting it mildly.
He was a man happy to belt out a scathing on the spot critique of anything that did’nt meet his approval. Today he would have been a sobering asset bringing us all back down to earth. As the inventor of visual hierarchy as we know it we owe a lot to Tschichold.
When you look at his layouts you instantly get the hierarchy, it’s avant-garde, modern and crystal clear what i’m suppose to know first, then your eye gets moved down the ladder of importance.
Creating visual hierarchy is not just one thing. It covers all the topics covered in dissecting his approach.
Bringing all these things together creates magic. When you look back at his work it is fresher today than it was then & still provides fresh inspiration.