Why Angled Mockups Fail to Communicate Your Design
Design trends come and go, like waves in the ocean. Imagine a tsunami that refuses to settle down. Many designers are feeding into this tsunami without even realizing what “danger” it poses to the design world. This tsunami is the dreadful practice known as “angled mockups.”
Now let me tell you why angled mockups must be avoided at all costs. The purpose of a mockup is to showcase the visual design and usability of a product or service. See the above image as an example. While it looks pretty, I don’t know what the actual product looks like or what exactly it is I’m looking at. What are all these charts and graphs? Why are there random buttons, bars, and event listings without any context?
By showing a mockup at an angle, it makes it harder to view elements and removes context from the design. Text becomes difficult to read. Often, the tilted text is impossible to decipher. Angled mockups focus too much on visuals instead of usability. I do not want to tilt my head to understand what I’m seeing. Do we look at our computer monitors at 38-degree angles? Most of us don’t.
Visual hierarchy is lost. It is hard to tell where the eye should go first. The first thing I notice is the slanted mockup. It’s disorienting and takes away from any visual hierarchy the designer has established in their design. Many angled mockups are collages of screens. Due to the diagonal portrayal, screens are often cropped. What’s the point of looking at a mockup if it is being intentionally cropped? What dark patterns lurk beneath the cropped regions? The interface doesn’t matter: web, tablet, mobile, car infotainment dashboard… angled mockups are misleading in any form.
Imagine a hiring manager, Megan, sorting through dozens of portfolios for a UI designer role. Megan is spending roughly five minutes looking at each portfolio (according to Garron Engstrom’s writeup about how long recruiters look at your portfolio). She comes across a portfolio littered with angled mockups. Megan might be thinking, “Well it looks trendy, but I am having a hard time understanding the context of these mockups. It’s also hard to read and see what’s going on.” Then she’ll move onto the next one.
Don’t lose that opportunity. Treat your portfolio like a UX project. If you’re looking for your next opportunity, hiring managers and recruiters are the target audience you should be designing for. Make it as easy as possible for them to scan and view your work. The more straightforward your portfolio is to interpret, the higher your chances of sticking out as a candidate becomes. You may also conduct usability testing on your portfolio and ask for feedback. Design Buddies is a growing design community which offers feedback and a mentorship program partnering with ADPList. Connect and collaborate with fellow designers on Design Buddies to bolster your applicant candidacy!
Keep it simple. There’s nothing wrong with displaying your mockups in portrait or landscape mode. See the above example. It’s very clean and elegant. The text is clear and easy to read. You can see different pages of the design without losing sense of hierarchy. Angled mockups significantly detract from your amazing work and prevent it from being the best it can be. Don’t try to reinvent the wheel. I’ve seen beautiful, well-written case studies and portfolios marred by these horrible, slanting mockups. There’s no place for angled mockups. It distorts visual hierarchy, makes text difficult to read, and takes away from the design itself. Create your portfolio with clarity in mind and don’t forget about the hiring managers and recruiters. Don’t make them think, as Steve Krug would say. Please do not feed into the tsunami. Help calm it down, just as waves do.
