Presenting your work is essential on every stage of your design career. Whether you’re working with developers, clients, stakeholders or just trying to get your portfolio to have the most impact.

Presenting a digital product design on its own is often not enough. Sure — great work can defend itself, but that extra level of planning and thinking is what separates design from art. 

UI Presentation

UI oriented case studies often come with a similar set of elements that dates back to the print and brandbook times. Sure — we sometimes try to innovate, but are mostly relying on foundations set by a completely different industry. 

And while it’s great to show all that in your UI case studies, there is definitely space to add more. Before we get to the hierarchy strips let’s add two other elements that are also necessary for the presentation to be comprehensive. 

Grid, layout, spacing

We live in the world of soft-grids and flexible layouts now. UI design work is all about finding beauty and clarity within constraints. 

Consistent, planned spacing is what makes a screen design easier to scan, read and ultimately process. It’s what we should be aiming for. The spacing presentation has become rampant in the last year after I shared my blockframing grid designs, but a lot of it seems to be missing a crucial feature. 

They usually look like this: 

There are some issues with this approach. Arguably we should be using points not pixels to define our interfaces because we still do mix the vector with the raster. 

But that aside, the issue is that these numbers are seemingly pretty random. What are they based on? Rule of thumb? Some magic formula? 

Will they work all the time?

No. 

The problem is that there is no grid specified here — and sure we can deduce by the numbers themselves (that it’s likely an 8-point derivative). That means that if you make a button this way and add it to your design library, it may not match any of the other elements. 

Specifying the basic rules first is key.

Those pixel values are seemingly pretty random.

Fonts

Outline the font hierarchy early on. Specify what font you used and limit it to just two styles and maximum of three sizes per design. 

This is IMPORTANT. You don't want a font overload. It’s not about catching them all and having as many fonts as possible in an interface. Scarcity works to your advantage. 

And when this is done we can get to…

Hierarchy Strips

Hierarchy strips are a way to visually divide the design into logical groups reinforcing each other towards the desired action. I recently made a whole, long YouTube video about it.

After all the goal of a project is not for the user to say “what a nice card”, then close their laptop and go for a walk. 

No. 

The goal is for the user to click the BUTTON. 

Hierarchy strips show that you understand not only what spacings or fonts to use, but also why you’re making that card design in the first place.

To guide the user through clear, easy to understand information towards an action that’s desired by the business. Because in the end products need to make money. 

The goal is for the user to click the BUTTON.

There can be many steps, but the main three groups of them are always the same. 

They start with sparking the interest — that can be done by either a headline or an emotional connection coming from an image. Then there’s clarification — extra information to help you make the decision. 

And finally the last part — usually a button — that makes that decision just a click away. 

It starts by adding all the content we can show to the canvas and dividing it into groups BEFORE making any visual changes. That way everything is in the right place.

Why this way?

I’ve been teaching people design both online and at a University and I found out that sometimes going a little outside of the box can make it easier for them to grasp complex hierarchies. 

A simple color bar set from green to red (or a different set completely) can help them plan which parts of the content belong in the interest group and which are definitely a part of the action. 

It helped them plan the design even before any layouting was done — with all fonts being the same size, style and color. 

I believe including Hierarchy Strips, alongside a detailed explanation is a great way to improve your portfolio reception and to show that you’re making conscious, planned design decisions. 

Because contrary to what many UX’ers will tell you, UI design is not just about some colorful pixels. 

Want to find out more about Hierarchy Strips?

Watch my YouTube video where I explain it in more detail.

Hi! I’m Michal and I teach thousands of people how to design better. You can find me on Twitter, YouTube, Instagram.

Liked the article? Share it!