Wireframe-Mockup Hybrid

January 5th, 2010


Recently, a visual mockup technique by Alex Faaborg on the Mozilla blog caught my attention. As Alex has been thinking about the merits of searching and browsing through bookmarks and history for the next Firefox version, it seemed like in a way he merged the traditional wireframe with a detailed mockup. While parts of the interface schematics are faded outlines devoid of any colour, other parts are represented in full colour and contain rich depth. Interesting? This effect enables the designer to emphasize the more important parts of an interface and focuses the viewer’s attention on what matters most. These wireframe-mockup hybrids perhaps reaffirm the importance of designing UI parts in the right fidelity and at the same time remind us that it is ok to leave stuff out.

Credits: Alex Faaborg

Need UI Inspiration?

Hi I'm Jakub and I wanted to share with you some of my better UI sketches to inspire your line of work. I've been sketching user interfaces with paper/electronically for over a decade. Subscribe today, and I'll share 5 of my better sketches with you over the next 5 days. How is that? :)

I will send you 5 pieces of inspiration over the next 5 days. You can unubscribe whenever you like. Powered by ConvertKit

2 Responses to “Wireframe-Mockup Hybrid”

  1. SunSunich Says:

    Not sure developers will get this mixed stuff right.
    Still, this technique is nice for the interface designer's own use…

  2. Carlos Ablre Says:

    Yeah this is cool. I have done stuff like this by placing a translucent layer over everything but the part of the interface I want to emphasize, which sits on top of the translucent layer. It's like a light boxing effect except that the lightbox layer is white, and the stuff on top is a part of the interface beneath. This is especially helpful when showing changes of screen state across multiple pages.