Join us

Mockups

Your constantly-updated definition of Mockups and collection of videos and articles. Be a conversation starter: Share this page and inspire others!
176 shares

What are Mockups?

Mockups are models designers use to present, demonstrate, test and improve their concepts. They help concretely visualize a project's aesthetic and functional aspects and facilitate a common understanding among designers, stakeholders and users.

Professor Alan Dix, Human-Computer Interaction (HCI) expert, explains why designers need to prototype. The same principles apply to mockups:

Show Hide video transcript
  1. 00:00:00 --> 00:00:31

    So, why do you need prototyping? Well, we never get things right first time. It's about getting things *better* when they're not perfect and also *starting in a good place*. Maybe if I'm going to make a wall for a house, I know exactly how big the wall should be. I can work out how many bricks I need. I can make it exactly the right size.

  2. 00:00:31 --> 00:01:00

    So, I can get it right first time. It's important to. I don't want to knock the wall down and retry it several times. However, there I have a very clear idea of what I'm actually creating. With people involved, when you're designing something for people, people are not quite as predictable as brick walls. So, we *don't* get things right first time. So, there's a sort of classic cycle – you design something, you prototype it,

  3. 00:01:00 --> 00:01:31

    and that prototyping might be, you might sort of get a pad of paper out and start to sketch your design of what your interface is going to be like and talk through it with somebody. That might be your prototype. It might be making something out of blue foam or out of cardboard. Or it might be actually creating something on a device that isn't the final system but is a "make-do" version, something that will help people understand.

  4. 00:01:31 --> 00:02:03

    But, anyway, you make some sort of prototype. You give it to real users. You talk to the real users who are likely to be using that about it. You evaluate that prototype. You find out what's wrong. You redesign it. You fix the bugs. You fix the problems. You mend the prototype, or you make a different prototype. Perhaps you make a better prototype, a higher-fidelity prototype – one that's closer to the real thing. You test it again, evaluate it with people, round and round and round. Eventually, you decide it's good enough. "Good enough" probably doesn't mean "perfect", because we're not going to get things perfect, ever.

  5. 00:02:03 --> 00:02:33

    But "good enough" – and then you decide you're going to ship it. That's the story. In certain cases in web interfaces, you might actually release what in the past might have been thought of as "a prototype" because you know you can fix it, and there might not be an end point to this. So, you might in delivering something – and this is true of any product, actually – when you've "finished" it, you haven't really finished, because you'll see other problems with it, and you might update it

  6. 00:02:33 --> 00:03:02

    and create new versions and create updates. So, in some sense, this process never stops. In one way, it's easy to get so caught up with this *iteration* – that is an essential thing – that you can forget about actually designing it well in the first place. Now, that seems like a silly thing to say, but it is easy to do that. You know you're going to iterate anyhow. So, you try something – and there are sometimes good reasons for doing this –

  7. 00:03:02 --> 00:03:32

    you might have *so little* understanding of a domain that you try something out to start with. However, then what you're doing is creating a *technology probe*. You're doing something in order to find out. Of course, what's easy then to think about is to treat that as if it was your first prototype – to try and make it better and better and better. The trouble is – if it didn't start good, it might not end up very good at the end, despite iteration. And the reason for that is a phenomenon that's called *local maxima*.

  8. 00:03:32 --> 00:04:02

    So, what I've got here is a picture. You can imagine this is a sort of terrain somewhere. And one way to get to somewhere high if you're dumped in the middle of a mountainous place – if you just keep walking uphill, you'll end up somewhere high. And, actually, you can do the opposite as well. If you're stuck in the mountains and you want to get down, the obvious thing is to walk downhill. And sometimes that works, and sometimes you get stuck in a gully somewhere. So, imagine we're starting at this position over on the left. You start to walk uphill and you walk uphill and you walk uphill.

  9. 00:04:02 --> 00:04:31

    And, eventually, you get onto the top of that little knoll there. It wasn't very high. Now, of course, if you'd started on the right of this picture, near the *big* mountain, and you go uphill and you go uphill and you go uphill and you get uphill, you eventually end up at the top of the big mountain. Now, that's true of mountains – that's fairly obvious. It's also true of user interfaces. *If you start off* with a really dreadful design and you fix the obvious errors,

  10. 00:04:31 --> 00:05:00

    *then you end up* with something that's probably still pretty dreadful. If you start off with something that's in the right area to start with, you do better. So, the example I've put on the slide is the Malverns. The Malverns are a set of hills in the middle of the UK – somewhere to the southwest of Birmingham. And the highest point in these hills is about 900 feet. But there's nothing higher than that for miles and miles and miles and miles.

  11. 00:05:00 --> 00:05:30

    So, it is the highest point, but it's not *the* highest point, certainly in Britain, let alone the world. If you want to go really high, you want to go to Switzerland and climb up the Matterhorn or to Tibet and go up Mount Everest, up in the Himalayas, you'll start somewhere better, right? So, if you start – or on the island I live on, on Tiree, the highest point is 120 meters. So, if you start on Tiree and keep on walking upwards, you don't get very high.

  12. 00:05:30 --> 00:06:04

    You need to start in the *right* sort of area, and similarly with a user interface, you need to start with the *right* kind of system. So, there are two things you need for an iterative process. You need a *very good starting point*. It doesn't have to be the best interface to start with, but it has to be in the right area. It has to be something that when you improve it, it will get really good. And also – and this is sort of obvious but actually is easy to get wrong – you need to understand *what's wrong*. So, when you evaluate something, you really need to understand the problem.

  13. 00:06:04 --> 00:06:31

    Otherwise, what you do is you just try something to "fix the obvious problem" and end up maybe not even fixing the problem but certainly potentially breaking other things as well, making it worse. So, just like if you're trying to climb mountains, you need to start off in a good area. Start off in the Himalayas, not on Tiree. You also need to know which direction is up.

  14. 00:06:31 --> 00:07:03

    If you just walk in random directions, you won't end up in a very high place. If you keep walking uphill, you will. So, you need to *understand where to start* and *understand which way is up*. For prototyping your user interface, you need a *really rich understanding* of *your users*, of the nature of *design*, of the nature of the *technology* you're using, in order to start in a good place. Then, when you evaluate things with people,

  15. 00:07:03 --> 00:07:30

    you need to try and *really deeply* understand what's going on with them in order to actually *make things better* and possibly even to get to a point where you stand back and think: "Actually, all these little changes I'm making are not making really a sufficient difference at all. I'm going around in circles." Sometimes, you have to stand right back and make a *radical change* to your design. That's a bit like I'm climbing up a mountain

  16. 00:07:30 --> 00:08:00

    and I've suddenly realized that I've got stuck up a little peak. And I look out over there, and there's a bigger place. And I might have to go downhill and start again somewhere else. So, iteration is absolutely crucial. You won't get things right first time. You *alway*s need to iterate. So, prototyping – all sorts of prototypes, from paper prototypes to really running code – is very, very important. However, *crucial to design is having a deep and thorough understanding of your users*,

  17. 00:08:00 --> 00:08:05

    *a deep and thorough understanding of your technology and how you put them together*.

Table of contents
  1. What are Mockups?
  2. Are Mockups Worth It?
  3. Mockups vs. Prototypes vs. Wireframes vs. Sketches
  4. When Should Designers Use Mockups?
  5. Characteristics and Types of Mockups
    1. What is a Low-Fidelity Mockup?
      1. Pros of Low-Fidelity Mockups
      2. Cons of Low-Fidelity Mockups
    2. What is a High-Fidelity Mockup?
      1. Pros of High-Fidelity Mockups
      2. Cons of High-Fidelity Mockups
  6. How to Create Mockups
    1. Tools and Materials
    2. How to Create Mockups: Best Practices
  7. Learn More About Mockups
  8. Questions about Mockups

Are Mockups Worth It?

Mockups are valuable in the user experience (UX) design process. Designers can experiment with visual aspects before the project goes into development. Development can be costly and time-consuming. Mockups allow designers to adapt to changes and ideate early. These benefits can improve the product’s time to market.

“You can use an eraser on the drafting table or a sledgehammer on the construction site.”

— Frank Lloyd Wright, architect and designer.

An illustration of the difference in cost between early usability testing, high-fidelity prototype testing, and fixing code in the final product. The costs are 1 dollar, 10 dollars and 100 dollars respectively.

As with prototypes, mockups used for early usability testing prevent costly and time-consuming corrections later in development.

© Interaction Design Foundation, CC BY-SA 4.0

Mockups help designers conduct usability testing early and collaborate and iterate with stakeholders.

In 2012, Microsoft released a new version of their operating system, Windows 8. Microsoft made big changes to the previous version, like removing the Start Menu and adding a new Start Screen. These changes alienated users and resulted in much negative feedback. More comprehensive user testing with mockups and prototypes could have revealed these usability issues early on. While Microsoft addressed this feedback when they released Windows 8.1 in 2013, these design decisions hurt their reputation.

A designer and user interacting with a series of food delivery app screen mockups.

Designers use mockups to aid them during user interviews and observations. Users answer questions about the mockups to reveal valuable insights. Insights gathered early in the design process help designers make informed decisions about how to improve the usability of their products.

© Envato Elements, Commercial license

Finally, mockups can improve the efficiency of the development process. They provide clear guidelines for developers and other stakeholders. Mockups are integral to a design and development team’s internal documentation.

A side-by-side comparison of a simple mock-up and a very verbose description of the same mockup. A developer understands the simple one and is confused by the verbose one.

Mock-ups are valuable tools not just for iteration but for communication. They communicate designs to developers and stakeholders more efficiently and accurately than words.

© Interaction Design Foundation, CC BY-SA 4.0

Mockups vs. Prototypes vs. Wireframes vs. Sketches

While some designers use the words mockup, prototype, wireframe and sketch interchangeably, they do have subtle differences:

  • Sketches are basic drawings that designers use for idea generation, notes and communication. While you can “sketch a mockup,” the noun “sketch” means a simple drawing and is not a mockup. Designer, teacher and illustrator Mike Rhode explains how to get the most out of your notes with sketchnoting: 

    Show Hide video transcript
    1. 00:00:00 --> 00:00:33

      What are sketch notes? Some of you may know what these things are. Some may not. I think of them, I call them “Notes Plus” sometimes because it's It's not like you stop writing notes. What you're doing is you're adding to your writing with lettering. So that might be your first step, is to do lettering. The next step could be drawing, and then you're focusing on the big ideas. That was the big understanding and realization for me as I began this work was because I was doing the analysis as I was listening,

    2. 00:00:33 --> 00:01:00

      as I was writing, as I was drawing, as I was doing lettering, that I started to really make sense of things in the moment. And then all I was doing is capturing what was entering my mind. And the beauty of that was, back in the old way I took notes, I would write all these notes and then I didn't want to look through them anymore. So the benefit of this was, by doing it all in the moment when you're done with the session you're in or the the whatever time you're spending, your notes are ready to go, and then you can, of course, modify them.

    3. 00:01:00 --> 00:01:32

      But the bulk of the work is done in the moment and you don't have to go back and like parse out what's valuable and what is not. So that's a really important thing to think about. People will say “I've been doing that for years, I never knew what the name was”. So having a name sometimes can be valuable, but really it's this idea of expanding beyond just writing words to adding visuals, whether that's lettering, which is a visualization of letter forms, or if that's drawing the things that are entering your head, drawing things from the PowerPoint deck that maybe someone's presenting, or if it's in a case of an experience or,

    4. 00:01:32 --> 00:02:00

      you know, ideation, what are the things that are entering your mind that you can then put on the page or on the screen to help you remember that concept. So you might ask, “Well, why should I bother with this extra step of sketch noting?” Well, in my in my experience, I remember a lot more of the of the things that I experience when I sketch note them, whether that's a talk at a conference or if that's an experience of a meal

    5. 00:02:00 --> 00:02:32

      or traveling or any other experience that I decide to visualize. There's something that's going on in our brains where the hearing and the writing and the drawing cements that idea. And I can look at sketch notes from years and years ago and still remember a lot of details around that moment when I took those notes. So that's a benefit. I think it helps you retain more. So if you take this approach because it's such a high, high detail moment where your brain is processing all this information and you're using your whole body, I believe that there's retention happening

    6. 00:02:32 --> 00:03:01

      that makes what you remember last longer. So you can call it back into memory in the future when you need it. And of course, the last part is you can have fun doing it like this, that the whole thing that convinced me to continue doing sketch notes way back in 2006 was this idea that, “Hey, this is really fun. I'm enjoying taking notes”. I'm when the talk is done, I don't have to do any more work. And it's short enough and brief enough because you're, you know, looking for the big ideas.

    7. 00:03:01 --> 00:03:32

      That's maybe four or five pages. It's shareable. You can now share. Not only is it good for you, but if you wish, it can be useful for someone else. And I found that true as well. So there is the fun aspect that should not be overlooked in sketch noting, I think it's really important, the things that you have fun doing, you repeatedly do, right? That's sort of the way we work as humans. So I thought it would be helpful to show some samples. But first, my big statement is: ideas, not art. So this is for those of you who feel like if I asked the question who feels like

    8. 00:03:32 --> 00:04:01

      they can't draw and you're the person raising your hand, this is for you. “Ideas,not art” is all about this concept of forget about any drawing classes you took in college or any of those kind of things. We're talking about capturing ideas simply, and if you can use simple shapes to do that, it makes it possible for anyone to do sketch, noting it really lowers the bar and it reduces the pressure for people who feel like I can't draw, I don't know how to draw. I don't know where to begin. So first of all, I'm going to just show you some samples

    9. 00:04:01 --> 00:04:30

      to give you a taste of how I've used this in my professional and personal life. So you can see these are these are sketch notes from meetings. These can be meetings or conferences. These are the one on the top left is an online conference that I attended. I did that with my iPad Pro. The one on the right is with some friends talking about graphic recording which is related to sketch noting. And finally lower right is a section that I attended about Agile learning about Agile and how, you know, Agile works so that I could apply it in my design profession.

    10. 00:04:30 --> 00:05:01

      So this really helped me understand and have a little fun with those notes. You can see that's an example of what meetings might look like. So another way that might apply, especially to the designers, is this idea of sketch noting your ideation. So when you build these skills, you now feel like you have another power to go on a whiteboard, to go on a piece of paper, to use an iPad pro and a pencil to sketch out the ideas that are in your head so you can get them out, so you can look at them yourself, and then you can share them with your teammates to kind of work through like, is this a good idea or not?

    11. 00:05:01 --> 00:05:31

      Right? A lot of times we have these discussions where we think we're agreeing when we're talking in words, but we really don't agree. It's this illusion of agreement. So by visualizing, it helps everyone get clear about what it is the idea is, so you can see on the left are these crazy ideas I had for hiding Thin Mints, the Girl Scout cookies, from my kids on the right was an idea, of course, that I took where I explored a storyboard. And then in the bottom right was when I first got a new computer exploring

    12. 00:05:31 --> 00:05:39

      if I'm using usb-c cables, which cables would I need? Right? So it can be very practical ways to visualize ideas that you have.

  • Wireframes are simple visual representations that focus on the layout of a product. Designers use them to propose essential elements for applications and web pages. They do not include color, images or detailed design elements.

  • Mockups are visual representations of a product or user interface (UI). They range from low to high fidelity and include color, text, shapes and other visual elements. Designers use them to showcase a product's appearance and functionality.

  • Prototypes are experimental, interactive models of a product. Designers use them to test how users and stakeholders interact with their concepts.

Four versions of the same design next to each other as a sketch, wireframe, mockup and prototype. The sketch is messy and incomplete; the wireframe is a basic mobile app wireframe; the mock-up has images, color and text where the wireframe had none; and the prototype is a paper prototype with a hand interacting with it.

While sketches, wireframes, mockups and prototypes may be similar, they serve different purposes.

© Interaction Design Foundation, CC BY-SA 4.0

When Should Designers Use Mockups?

Designers use mockups during prototyping—one of the stages of design thinking. Watch this video to learn more about the five stages of design thinking:

Show Hide video transcript
  1. 00:00:00 --> 00:00:32

    To create great user experiences. UX design teams use a five phase process: Empathize, define, ideate, prototype and test. In the empathize phase, teams explore the problem they're trying to solve with the product. User researchers conduct interviews with people affected by the problem and review existing knowledge of the issue. The stage is about knowing what needs to be solved and why.

  2. 00:00:32 --> 00:01:02

    At the defined stage, user researchers turn their knowledge into a research plan and conduct more targeted tests. They'll learn more about their users and what they're currently doing to solve the problem. Then they'll put their findings into deliverables. Tools for the UX designers to reference when they start designing solutions. These include: user Journey Maps, to show how users try and solve the problem and present. Personas, which are details of typical users.

  3. 00:01:02 --> 00:01:32

    Affinity Diagrams of what those users think, feel, see and do. And "How might we" statements that list the problem teams are trying to solve with the product. In the ideate phase, teams ensure everyone has a shared understanding of the problem. Someone will then lead a brainstorming session where the team will consider solutions for the first time. The team will come up with as many ideas as possible, even if they're silly sounding or impractical. Afterwards, they will evaluate the options and choose the most viable

  4. 00:01:32 --> 00:02:00

    and effective solutions from those ideas. In the prototyping phase, the UX designers turn those design ideas into testable prototypes. These prototypes could be low fidelity, digital prototypes or even paper prototypes. The UX designers will do their best to make sure the product is intuitive to use and make multiple versions of those design ideas. In the test phase, researchers get participants to test the prototype and get feedback.

  5. 00:02:00 --> 00:02:31

    From that they deliver usability test reports to the designers. Who then make new prototypes based on that feedback. products will get increasingly polished and refined with cycles of testing until a final design is settled on. Then the design will be developed and shipped. You think it's all over here, but not quite. Product development is cyclical and non-linear. The product can still be revamped based on real user feedback, and in that revamp you may repeat some or all of the design phases.

  6. 00:02:31 --> 00:02:36

    New information could even set development right back to the planning stage once again.

​​In addition to early usability testing, designers use more detailed mockups to test specific visual elements of an app later in the design process. These elements can include font choices, color schemes and textures. For example, a designer may create two versions of a user interface with different color schemes to see which users prefer.

Two versions of an e-commerce product page side by side. Version A has a light blue color scheme. Version B has a dark blue color scheme.

Designers use detailed mockups to test specific visual elements with users. For example, a designer presents two mockups to users. Each one has slightly different color choices. The designer (or user researcher) looks for user behavior changes between the two versions. This research provides insights on which color scheme to use.

© Interaction Design Foundation, CC BY-SA 4.0

For finished products, design teams create mockups for presentations and as marketing materials. These detailed designs are separate from the design thinking process. Instead, their purpose is to promote and sell the product.

A screenshot of the Apple website. Two mockups of Apple's MacOS Sonoma are presented with text describing new features.

Apple uses mockups to present new versions of its MacOS operating system. These images give users and customers a visual representation of how MacOS features will look and function. The mockups in this example are animated. Designers commonly use animated mockups in digital mediums to represent the product better.

© Apple, Fair use

Characteristics and Types of Mockups

Mockups range from simple to highly detailed representations of final products. Each has its own pros and cons and place in the design process.

What is a Low-Fidelity Mockup?

Low-fidelity (low-fi) mockups are simple representations of the intended product. They may present only a few features planned for the final version. Low-fi mockups can be physical or digital and are not restricted by whether the end product itself is physical or digital. For example, designers can use paper and pen or digital design software for a mobile app mockup.

Some designers skip low-fi mockups. However, a low-fi mockup is a powerful tool with many advantages. Mike Rhode explains why you should put paper before pixels in the design process:

Show Hide video transcript
  1. 00:00:00 --> 00:00:32

    Let's talk a little bit about the *benefits of  sketchnoting*. There's this ability to *retain information that you learn*; so, that's a real benefit. And then, of course, it allows you to *use your whole self for note-taking*. Instead of just writing text or typing, you're using your whole body, you're using your visualization and your thinking and analytical skills, and your listening skills, most importantly, to capture information

  2. 00:00:32 --> 00:01:02

    about what you're learning and what you're understanding. So, one of the things that I want to touch on a little bit is the reason why we talk a little bit about paper before pixels. I'm a big believer in this concept. And the reason I say that is because I think paper and pen is really *cheap* – like you can burn through lots of paper and pen, and then you can recycle the paper. And it's a really quick way to get ideas down without spending a lot of time investing in Photoshop or XD or Sketch or whatever tool you happen to be using.

  3. 00:01:02 --> 00:01:30

    I think the other thing that I feel like is software tools limit you to what they can do and not *what you can imagine*. So, when you start using software tools, you can sort of fall into a pattern of things you've done before, things you've seen before, and then you're sort of locked into what the  software allows you to do. Where I think paper and pen allows you to be a little more *free-form* and explore ideas. Two other things I like about paper before pixels is I think *rough sketches*,

  4. 00:01:30 --> 00:02:00

    when you share them with a group, *invite people into the discussion*. When you provide a finished,  beautiful mock-up that maybe is even interactive, sometimes people can feel like, 'I didn't  have any part of this. This is already done.' And that leads to the other part – people don't  feel like they can give you feedback about your idea when it's so finished that it looks like it could be real. There's sort of a hesitation like, 'I'm going to ruin Mike's work! He did all this work. I can't tell him feedback because he'll have to tear it apart and do it over again!'

  5. 00:02:00 --> 00:02:18

    When you use sketches, this isn't even on the table. We're all just exploring ideas. So, I think this is really important to think about, when you think about *ideation especially*, is to consider doing paper before you do the pixels, or, in the case of if you have an iPad Pro and a pencil, maybe using pixels in a unique way.

Pros of Low-Fidelity Mockups

  • Cheap and fast to produce. Designers can make low-fi mockups using inexpensive materials like pens and paper or freemium software like Canva.

  • Excellent for experimentation and iteration. Low-fi mockups are easy to alter. They are simple to annotate, amend or scrap and start again.

  • Available to all. Designers, stakeholders and test users can use accessible tools like stationery or drag-and-drop software to get involved and amend the design.

  • Focus on context and functionality. Low-fi versions focus on visual hierarchy and key design elements.

  • Gives a quick, broad view of the product. Design teams can easily focus on the product as a whole, free of the distraction of specific details.

  • Encourages and fosters design thinking. Low-fi mockups enable collaboration, emphasize user needs, aid problem-solving and promote creativity.

  • Incite criticism. When a user sees a developed version of a system that took a lot of work to make, they can find it harder to give criticism. Compare this with a simple drawing—the user may give feedback more comfortably.

Cons of Low-Fidelity Mockups

  • Lack of realism. Given how basic low-fi mockups are, users may find it hard to give feedback. The results from tests on these early versions might sometimes be unreliable.

  • Can oversimplify complex issues. Their basic nature can make it challenging to understand the intricate parts of the design and how all the features work together.

  • Users must use their imagination. Low-fi mockups are often abstract and incomplete. Users must imagine missing details and visualize the final product.

What is a High-Fidelity Mockup?

High-fidelity (high-fi) mockups closely resemble the final product in appearance. A detailed digital render of a user interface is high-fidelity compared to a simple paper version.

An annotated mockup of the Interaction Designer Foundation's

This high-fidelity mockup of the Interaction Design Foundation’s citation page features all final design elements. The designer included annotations to inform stakeholders how the page will work.

© Interaction Design Foundation, CC BY-SA 4.0

Pros of High-Fidelity Mockups

  • Engaging. Stakeholders can quickly see their vision come to life. They can easily assess if it matches their expectations, wants and needs.

  • Reliable testing. User testing with high-fi mockups helps get valid and valuable information. If a mockup looks like the final product, the design team can understand better how users will respond to it.

  • Focus on detail. Designers can use high-fi mockups when they need to test specific details of their designs. For example, button shapes or font sizes.

Cons of High-Fidelity Mockups

  • Slow to produce. They usually take longer than low-fi mockups to make.

  • Iteration speed. Changing high-fi designs can slow down the whole project. Designers can quickly amend small details, but significant design changes take hours.

  • Perceived quality. High-fi mockups might make test users think the product is better than it currently is.

  • Resistance to change. Detailed designs can take hours to produce and designers can be reluctant to change them.

The fidelity of a mockup exists on a scale. Designers sometimes combine low- and high-fidelity elements depending on their needs.

For instance, a designer may use an initial mockup to showcase essential design elements. Later, the designer adds high-fidelity elements to represent the final product more closely. This blended approach allows for flexibility and efficiency in the design process.

How to Create Mockups

Tools and Materials

Designers use a range of tools to create mockups. Some tools are better suited to either low- or high-fidelity versions. Here are some of the most common tools:

  • Pen, paper and stationery are universal tools. They are an excellent choice for low-fidelity mockups. Some designers use scissors, tape and other stationery tools to amend designs.

  • Design software can produce both low- and high-fidelity mockups. Software enables designers to convert their basic versions into detailed designs.

  • Whiteboards and markers provide a quick, collaborative way to work. Designers can quickly create rough drawings and amend them on the fly. Teams can photograph whiteboard sketches or reproduce solidified mockups for later use.

  • Mockup kits are a selection of cards and templates that represent elements of a website or app. Designers arrange these elements, such as buttons or text boxes, to build basic designs. Kits are commercially available, but some designers create hand-drawn or printed versions.

    An illustration of a hand placing pieces of paper on a mobile phone template. A selection of pieces on are on the side featuring different elements like text boxes, menus, carousels and buttons.

    Designers can change their mockups quickly using kits and templates. They are easy to make, allowing users and stakeholders to get involved in the iteration process.

    © Interaction Design Foundation, CC BY-SA 4.0

  • 3D printing enables product designers to create accurate physical versions of their ideas. 3D modeling software is hard to master, but printers are fast and continue to become more cost-effective.

  • Lego bricks are simple and intuitive to use. Product designers can use Lego to create mockups quickly and collaboratively with stakeholders. Design and consulting firm IDEO often uses Lego, even for intricate projects like an insulin injection device.

How to Create Mockups: Best Practices

“If you start off with a really dreadful design and you fix the obvious errors, then you end up with something that's probably still pretty dreadful.”

— Professor Alan Dix, HCI expert

Here are some best practices:

  1. Apply user research. Mockups are most effective when informed by prior user research. Designers base their designs on user needs, preferences and pain points.

  1. Study the competition. Designers look at competitors' products to learn what works well and what doesn't. This research can inspire design decisions and identify common pitfalls to avoid. Designers who use this knowledge create more refined mockups. This approach saves time and improves overall design quality.

  1. Understand the technology. Designers must have a solid understanding of the technology used to build the final product. This knowledge ensures the mockup is practical and will work within technological limitations.

  1. Create wireframes: Mockups aren't a replacement for wireframes. Wireframes act as a skeletal framework for a design. They lay out the structure without focusing on visual design details. Wireframes serve as a guide for mockups, which then add elements like color and texture.

  1. Stay focused. A mockup should deliver a single, well-thought-out concept for stakeholders to review and iterate upon. This method works better than presenting many choices. Too many options can overwhelm and slow down decision-making. Idea exploration and the selection of concepts are better suited to the ideation phase.

  1. Presentation matters: How designers present a mockup can significantly impact its usefulness. Designers consider their audience and how they will communicate their designs. For example, designers can annotate mockups. Clear annotations can clarify design decisions and functionalities, which are essential for stakeholders. However, designers avoid annotations for test users. Annotations can bias user perceptions by offering insights not available in the final design.

Learn More About Mockups

Take our course, Design Thinking: The Beginner's Guide, for a holistic view of the design thinking process and where mockups fit.

Learn from Vitaly Friedman, Senior UX consultant and creative lead at Smashing Magazine, why we should use dynamic content in our mockups and prototypes.

To learn more about paper prototyping and its benefits, read this article from Jakob Nielsen.

Watch our Master Class with Mike Rhode, How to Become a Visual Thinker With Sketchnoting, to improve your sketching skills.

Questions about Mockups

What's the role of mockups in agile product development?

In agile development, designers create mockups to visualize designs and speed up the design process.

Mockups guide early design decisions before development. Designers can quickly create low-fidelity mockups and use them to gather user feedback. Early usability testing highlights potential issues with designs. These insights avoid time-consuming revisions later in development.

Mockups also clarify complex concepts and improve communication between teams and stakeholders. Armed with mockups from designers, developers can easily understand what they must implement and why.

Mockups are an excellent tool for ideation, which is key to agile teams, as UX designer and author Laura Klein explains:

Show Hide video transcript
  1. 00:00:00 --> 00:00:31

    Great agile teams commit to iterating on features. Now, it's interesting. When we did a bunch of  research on agile teams back in 2019 and 2020, we found one of the biggest complaints  people had was that their teams never went back and improved things that they'd already built. They would ship something, move it to the Done column and then never look at it again. Sometimes, they didn't even look at metrics to see if anybody was even *using* the feature.

  2. 00:00:31 --> 00:01:00

    The really unfortunate thing was that teams often shipped small or stripped-down versions of features just to get them out the door and then they *still* never went back and approved them. Obviously, this led to absolute nightmare products full of half-finished things that were inconsistent and didn't really make sense as a whole product. The thing is, that's one of the least agile  things you can do. The whole point of lightweight methodologies is that we're constantly getting things in front of users, getting feedback and improving them.

  3. 00:01:00 --> 00:01:32

    Do we sometimes ship things to  people that aren't quite perfect? Yeah – all the time. But we do it with the understanding that  we're shipping it in order to learn something, and once we learn something, we're going to go back and improve the product based on what we learned, and then we'll do it again... and then we'll do it again. That is iteration, and it's pretty much the core of agile. Great teams learn from their users and keep improving their product by iterating on features. They don't just keep churning out new half-baked features like they're some kind of widget factory.

  4. 00:01:32 --> 00:01:41

    So, teams that are truly committed to agile methodologies should be iterating and improving their user experience and their codebase *constantly*.

Learn more from Laura in our course, Agile Methods for UX Design.

How can mockups facilitate client-designer communication?

Mockups make designer-client communication easier. They provide designers and clients with a visual reference. Mockups help:

  • Everyone understand the design better.

  • Present options and facilitate decision-making.

  • Identify issues and ensure that designs align with client expectations.

  • Reduce the chance of costly and time-consuming revisions in development.

A key component to presenting ideas and mockups is storytelling. Storytelling brings ideas to life and engages stakeholders and clients. Ellen Lupton, writer, designer, curator and educator, teaches how to use storytelling in our Master Class, Storytelling Through Visual Design: A Practical Guide.

How to present mockups effectively to clients or stakeholders?

Designers must clearly explain their design's purpose and how it meets user or business needs. Here are some best practices:

  • Start with the project's background and goals to ensure understanding.

  • Incorporate storytelling and real-user examples to make presentations engaging. Storytelling helps stakeholders visualize the design's impact.

  • Encourage feedback and discussions for insights that refine the design. Develop mockups into interactive prototypes for a more precise, immersive experience.

  • Facilitate open dialogue between all people involved. Feedback enhances the design as stakeholders can provide essential input and insights.

Learn how to effectively present design work to clients in this video from Todd Zaki Warfel, author, speaker and leadership coach:

Show Hide video transcript
  1. 00:00:00 --> 00:00:32

    This new narrative starts with *identifying your audience and intent*. The way you pitch an idea to a client, peer or executive requires an *adjustment to your language and approach*. Client – they're more of an occasional traveler. They don't know the system; they don't know the ins and outs. They're less likely to share your language.  I mean, you're probably speaking design. They speak business and outcomes and results. So, you may need to establish a basic level of understanding.

  2. 00:00:32 --> 00:01:04

    Clients and executives are also less patient  and don't want to waste 20 minutes going through every single detail just to get to the answer. Karen's what you would call an occasional traveler. She expected high-fidelity visual comps and just had a bottom-liner approach. Karen's one of these busy executives. She doesn't have time for – nor does she need to or want to hear – all the details. She just needs to know *why she should care*, *why it matters to her line of business*,

  3. 00:01:04 --> 00:01:30

    and then she can decide to support your proposal ...or not. Now, the last time the team had presented to Karen, they spent the *entire 60-minute meeting* walking  her through *their process* and *justifying their decisions*. If you know anything about executives – a 60-minute meeting; *not* a good idea. Here's the rub. They never addressed the value of the business, and the team didn't come in with a clear ask.

  4. 00:01:30 --> 00:02:02

    In the own words of the team, it was the most grueling 60 minutes of their entire careers at this company. So, what do we do? Well, this time around, we started with audience and intent. We changed the story and wrote a new  narrative and developed a new plan. We started with the *intended outcome* with Karen, shared a few *stories* and then highlighted the *value* that our approach would bring to her business – and quickly gained approval from her. And I'll never forget the moment; it was like eight minutes into my presentation.

  5. 00:02:02 --> 00:02:22

    I actually looked down at my watch to check, when Karen interrupted me mid-sentence and said, 'Okay, Todd – I get it. You've done your homework; you've clearly shown how the solution solves the problem and how it's better than my original idea. What do we need to do to move forward?  What do you need from *me* to deliver this?'

Watch Todd’s full Master Class, Win Clients, Pitches & Approval: Present Your Designs Effectively, for more.

What are the best ways to gather feedback on mockups?

Mockup feedback is vital to improve designs and ensure they work for users and clients. Here are the best ways to get this feedback:

  1. User Testing: Test with users, observe, and identify improvements.

  2. Surveys: Gather broad feedback via questionnaires.

  1. Interviews: Deep dive into user thoughts one-on-one.

  2. A/B Testing: Compare two designs to see the preferred option.

  1. Design Reviews: Get insights from peers and stakeholders.

  2. Heatmaps: Visualize where users click and focus attention.

Start using these methods early and keep at it to keep improving your designs. Gather diverse feedback to understand user views on your design thoroughly.

Take our course, User Research – Methods and Best Practices, to learn the basics of user research.

How can mockups be used to facilitate team collaboration?

Mockups enable collaboration within and between teams in the following ways:

  • Shared Vision: Unify team understanding through visual product representation.

  • Feedback Loop: Enable early, iterative stakeholder feedback and improvements.

  • Design Validation: Allow design teams to refine UI/UX pre-development.

  • Technical Possibilities: Help developers assess and address design implementation challenges.

  • Marketing Strategy: Inform marketing of product features for strategy planning.

  • User Testing: Facilitate user feedback for development and marketing insight.

  • Resource Planning: Aid in accurate budget and resource allocation planning.

Learn how to communicate better with developers from Szymon Adamiak, co-founder of Hype4:

Show Hide video transcript
  1. 00:00:00 --> 00:00:31

    How We Can Communicate Better So, the first thing is that we need to establish some *ground rules*. When developers get a design, they know nothing about the product, usually, or almost nothing. And you designers know everything – you are the authority. We just lay the code bricks here and there.

  2. 00:00:31 --> 00:01:03

    So, *your job is to share your knowledge, share the context with us*, and *our job is to listen, to absorb it*. And this is a moment where there are the most problems. And I think that the reason is that we often *share some misconceptions* about each other's work, and designers often think that their job is to create a design, hand it off, and their job is done.

  3. 00:01:03 --> 00:01:34

    They also tend to believe that developers are lazy and don't do a good enough job with the designs. And, actually, that's often true, unfortunately. Even in my company – my company started as a design-only agency, and my partner is a designer, but he's seen over and over again how developers  execute the design

  4. 00:01:34 --> 00:02:03

    and that the design was a totally different thing than the final product. And this is a realistic example, to be honest, so the colors are more or less fine but it doesn't look how it should at all. So, it really happens. And it happens a lot. And also, developers have many problems with designers, especially with some changes in the designs

  5. 00:02:03 --> 00:02:31

    that we are not aware of and they are made. And also, many times designers think that something is just a minor change. You have to do it, and you have to do  it fast – and, for us, it's a huge thing and not possible to change in a week or even  a month sometimes. So, these accusations are sometimes true but it shouldn't really matter

  6. 00:02:31 --> 00:03:01

    because we both have our flaws and we have to recognize those flaws, and focusing on that  creates a really toxic and unfriendly work environment. So, I think we don't have to avoid making mistakes and talking about them, but *embrace* them. So, I think there are two important mindset shifts that can help us.

  7. 00:03:01 --> 00:03:32

    One is to *change the way we think about handoff*. So, handoff – I don't even like the  word 'handoff' because it sounds like a one-time thing, and it really isn't, especially now. It's more of a process. And I really like the term that Brad Frost coined about handoff: He calls it a 'hot potato' process. And the difference between – I called it 'waterfall' here – but the old way when the designer works,

  8. 00:03:32 --> 00:04:04

    hands off the design, and then the developer works, and the hot potato process is  that 'hot potato' process. In the 'hot potato' process, we work at the same time. So, usually the designers start work, they create some screens, they give it to developers, and we start building them, and we start exchanging information, communicating, improving, working in iterations. So, most digital products nowadays are created like that.

  9. 00:04:04 --> 00:04:35

    So, that's the first mindset shift. We should  stop thinking about handoff as a one-time thing and *start to think about it as a process*. And the second mindset shift is *giving others the benefit of the doubt*. And I already mentioned that we will make mistakes that happen; we can fix them, we can improve them, and in my experience not thinking about designers as someone who's just an evil overlord

  10. 00:04:35 --> 00:04:47

    who changes designs when they want, but like another human being who has their problems, too, and their job is very hard. It helps a lot in cooperation.

How to integrate mockups into a comprehensive UX strategy?

Designers use mockups in UX strategy to help bridge design ideas to user testing. Designers show users potential designs to gather early feedback before entering development. This feedback guides design improvements that align with user expectations and refine usability and aesthetics.

Mockups also foster team discussions and promote understanding of project goals and design directions. They serve as vital team documentation designers, developers, clients, and other stakeholders use.

Frank Spillers, CEO of Experience Dynamics, gives a quick run-through of how to craft a UX strategy plan:

Show Hide video transcript
  1. 00:00:00 --> 00:00:34

    So, how do you craft your UX strategy plan? First of all, make sure you're building the business case. This is a mistake that a lot of people make. Make sure that you're clear about what your ROI is and what it *can* be, right? What are you currently getting from your UX efforts, or *lack* of efforts? Even if you're measuring Google Analytics, what are the KPIs that are relevant to *your* user experience?

  2. 00:00:34 --> 00:01:03

    And then, what *should* they be or what *can* they be? And you may need to define these as you're starting to build your practice if you're new to UX and you're just getting started. But think about what that is and make sure you define that as you go along. Don't get too excited and just start doing user testing or start doing some type of UX activity and then forget about this. You know, it's really important to remember, remember, remember. Cost-benefits analysis, as we talked about, can be helpful, but *create a template*

  3. 00:01:03 --> 00:01:31

    and *a practice for costing* so that you're requiring that as part of your project plan. We start all our projects at Experience Dynamics with *business objectives*. So, we're laying that out so we understand what we're building the UX on top of. It's important to *identify your KPIs* (your key performance indicators). *Start with small measurements*; so, don't try and boil the ocean, but start with a few small metrics to measure

  4. 00:01:31 --> 00:02:02

    – things like success rate in usability testing – as a way to kind of start gauging where you are. Success rate is the main metric from usability testing, so it makes sense that you would measure that and track that. And then, make sure to *share and review those metrics monthly*, at least. It's so important to keep your eye on the metrics, to socialize them and make sure that they get out to people who need to hear about them. So, to start with your UX strategy, you want to *map your current state*.

  5. 00:02:02 --> 00:02:30

    So, create an *assessment* of your usability and your UX practices and methods. You know – What are you doing? What are you calling UX? And that means taking a look at your product Iifecycle, your management, your staffing attributes and, of course, your UX maturity rating, which is something that you can get from a scorecard I'll be sharing with you soon. So, UX readiness and agile experience are also important to measure in terms of usability and

  6. 00:02:30 --> 00:03:05

    the UX resources that you currently leverage and the techniques, you know. Essentially you're trying to figure out how things are *done today*. So, this is a current state. How are things happening from a process map? And then, from that – and so, what's important about that is that you get the picture of where your organization "is at". This is not about forcing your organization to act in a way that I want you to act in or that – you know – some guru or some book or some video or something or some voice of Forrester or a voice of Gartner analyst group.

  7. 00:03:05 --> 00:03:36

    It's not about that – it's about what works for *your* organization. So, a *UX maturity roadmap* is what you're going to end up with. It's going to have detailed guidelines for how to grow your UX competency. And it's going to have things like staffing positions or roles that are required, specific requirements for, again, *your* organization exactly, not somebody else's, and not the organization that you worked at *before* you came here. Don't try and bring that culture over to the organization you're in. It's *so* important that it's *custom-fit* to the

  8. 00:03:36 --> 00:04:03

    conditions, to the vibrations, if you will, to the frequency of your organization. because every organization is different. It is shaped by the founder, the CEO, the senior managers, the shareholders, the industry – the specific industry, the niche that you're in. So, *UX organization next steps and action plan* are going to be what you create in this ideal state

  9. 00:04:03 --> 00:04:10

    – so, where you're marching to, where you're going, essentially.

Which software is used for mockup design? 

Designers use tools like Sketch, Figma, and Justinmind for mockups. These tools match UI/UX needs, enabling the creation of detailed, interactive designs that resemble the final product.

  • Sketch, for macOS users, is known for simplicity and a vast plugin ecosystem. This customization caters to various design needs.

  • Figma promotes teamwork with its real-time collaboration features. It is a web-based tool accessible across platforms.

  • Justinmind allows designers to create mockups and fully interactive prototypes. It offers a robust library of UI elements and advanced interaction options.

Each tool has unique features like real-time collaboration, extensive asset libraries, and compatibility with development tools. Your chosen tool depends on project needs, team dynamics, and preferences.

What is the best mockup tool?

Your chosen tool depends on the mockup type and whether the product is physical or digital. Pen and paper work well for low-fidelity versions, while digital tools are best for detailed designs.

Tools like Balsamiq or Sketch are precise, making them ideal for simple and complex digital designs. They help accurately bring your ideas to life.

For advanced designs, Adobe XD and Figma offer interactivity and deep detail. These features enhance the design process significantly.

3D modeling, lego bricks, and carving foam are excellent options for physical products. 3D modeling produces higher-fidelity mockups. Lego and foam enable quick and collaborative creativity.

Many designers use generative AI for mockup creation. AI quickly generates designs from descriptions and can be used for both physical and digital products.

The choice between tools depends on project needs and detail levels. Each tool has unique benefits, with the best choice varying per project.

Designers use AI tools for more than just mockup creation. Ioana Teleanu, senior product designer, teaches how to use AI to supercharge your design workflow:

Show Hide video transcript
  1. 00:00:00 --> 00:00:31

    Before showing you an end to an AI-powered design process. That still happens under human guidance, which is the key point in this conversation. Let's go quickly over how AI can help us. So for ones that can decrease cognitive load, aid decision making by processing large volumes of data, can help us automate repetitive tasks such as formatting images or resizing text.

  2. 00:00:31 --> 00:01:03

    It can help us by providing more insights into human behavior and usage patterns. Also, with creating prototypes or mockups, all kinds of visual assets, it can spot usability issues and so on. AI can help us at every step of the design process. Covering our blind spots, augmenting our thinking, making us more efficient if we use it correctly. Here's how an end to end design process augmented by AI may look like. But the key to reading this schema are how I prefer to look at it:

  3. 00:01:03 --> 00:01:30

    there's always a person orchestrating this. The future in which AI could generate a cohesive, coherent, reliable and relevant design process end to end is a very distant future for now, and there's an impetuous need for someone governing over this process, applying critical thinking and showing intentionality at every stage of the design process. Also, because AI shows multiple limitations

  4. 00:01:30 --> 00:02:00

    on each of the steps shown in the schema. Nielsen Norman Group published an article unpacking the limits that currently surround the use of AI in research. To understand the context of their analysis. You need to know that there are currently two type of AI powered research tools we currently see on the market: insight generators and collaborators. AI Insight generators. These tools summarize user research sessions based only on the transcripts.

  5. 00:02:00 --> 00:02:31

    Since they don't accept any kind of additional information (context, past research, background information about the product and users and so on), they can be highly problematic in how they generate and present those summaries. While there are some workarounds like uploading background information as session notes to be added to the analysis, it's not the right framing for the source and it's not going to reflect correctly in the analysis and generation. Humans would be much better at this. The scoping and systems

  6. 00:02:31 --> 00:03:02

    thinking required to understand the interpretation landscape AI collaborators. These work similar to insight generators, but they're slightly better because they accept some contextual information provided by the researcher. For instance, the researcher might show to the AI some human generated interpretation to train it. The tool can then recommend tags for the thematic analysis of the data in addition to session transcripts, collaborators can also analyze researchers notes

  7. 00:03:02 --> 00:03:30

    and then create themes and insights based on input from multiple sources. But even though they appear to be a bit better, they're still significantly limited and pose a lot of problems, if not used with the right mindset and caution. The limitations they've identified and expand on in detail are: most AI tools can't process visual input, and the biggest problem with that is no human or AI tool can analyze usability testing sessions by the transcript alone.

  8. 00:03:30 --> 00:04:03

    Usability testing is a method that inherently relies on observing how the user is interacting with the product. Participants often think-aloud describing what they're doing and thinking. Their words do provide valuable information. However, you should never analyze usability tests based only on what participants say. Transcript-only analysis misses important context in user tests because participants don't verbalize all their actions don't describe every element in the product. Not always have a clear understanding or mental model of the product.

  9. 00:04:03 --> 00:04:30

    So for now, Nielsen Norman's group recommendation is do not trust AI tools that claim to be able to analyze usability testing sessions by transcripts alone. Future tools able to process video visuals will be much more useful for this method. Another problem is the limited understanding of the context. This remains a major problem. AI insight generators don't yet accept the study goals or research question insights or tags from previous

  10. 00:04:30 --> 00:05:01

    rounds of research, background information about a product or the user groups, contextual information about each participant, new user versus existing user, the list of tasks or interview questions. There is also a problem with the lack of citation and validation, which raises multiple concerns and problems. The tools aren't able to differentiate between the researchers notes and the actual session transcript. A major ethical concern here. We must always clearly separate our own interpretation or assumptions from what the participants said or did.

  11. 00:05:01 --> 00:05:33

    Another problem with the lack of citation is that it makes verifying accuracy very difficult. AI systems can sometimes produce information that sounds very plausible, but is actually incorrect. Unstable performance and usability issues are another problem. None of the tools they tested had solid usability or performance. They reported outages, errors and unstable performance in general. And then there's the problem of bias. According to Reva Schwartz and her colleagues, AI systems and applications can involve biases

  12. 00:05:33 --> 00:06:02

    at three levels: systematic, statistical and computational and human biases. AI must be trained on data which can introduce systematic such as historical and institutional and statistical biases, like a dataset sampling that is unrepresentative enough. When people are using a AI-powered results in decision making they can bring in human biases like anchoring bias. So bias can creep into research efforts on multiple levels,

  13. 00:06:02 --> 00:06:30

    and these tools don't yet have the mechanisms in place to prevent that. I wanted to discuss the limitations reported in the article in detail, because I believe we can easily extrapolate and expand them beyond just research tools. Most of these problems will be observable on other types of AI companions in the design process. Biases in image generation, limitations in being offered context, other kinds of input limitations, not accepting files or images,

  14. 00:06:30 --> 00:06:51

    output vagueness, generic results, and so on. So I think that this is a necessary frame to keep in mind when interacting and designing with the help of AI. Tools are not very reliable yet and accurate. So take everything they produce with a grain of salt and apply critical thinking at all times.

Earn a Gift, Answer a Short Quiz!

  1. Question 1
  2. Question 2
  3. Question 3
  4. Get Your Gift

Question 1

What is the purpose of mockups in UX design?

1 point towards your gift

Literature on Mockups

Here's the entire UX literature on Mockups by the Interaction Design Foundation, collated in one place:

Learn more about Mockups

Take a deep dive into Mockups with our course Design Thinking: The Ultimate Guide .

Some of the world’s leading brands, such as Apple, Google, Samsung, and General Electric, have rapidly adopted the design thinking approach, and design thinking is being taught at leading universities around the world, including Stanford d.school, Harvard, and MIT. What is design thinking, and why is it so popular and effective?

Design Thinking is not exclusive to designers—all great innovators in literature, art, music, science, engineering and business have practiced it. So, why call it Design Thinking? Well, that’s because design work processes help us systematically extract, teach, learn and apply human-centered techniques to solve problems in a creative and innovative way—in our designs, businesses, countries and lives. And that’s what makes it so special.

The overall goal of this design thinking course is to help you design better products, services, processes, strategies, spaces, architecture, and experiences. Design thinking helps you and your team develop practical and innovative solutions for your problems. It is a human-focused, prototype-driven, innovative design process. Through this course, you will develop a solid understanding of the fundamental phases and methods in design thinking, and you will learn how to implement your newfound knowledge in your professional work life. We will give you lots of examples; we will go into case studies, videos, and other useful material, all of which will help you dive further into design thinking. In fact, this course also includes exclusive video content that we've produced in partnership with design leaders like Alan Dix, William Hudson and Frank Spillers!

This course contains a series of practical exercises that build on one another to create a complete design thinking project. The exercises are optional, but you’ll get invaluable hands-on experience with the methods you encounter in this course if you complete them, because they will teach you to take your first steps as a design thinking practitioner. What’s equally important is you can use your work as a case study for your portfolio to showcase your abilities to future employers! A portfolio is essential if you want to step into or move ahead in a career in the world of human-centered design.

Design thinking methods and strategies belong at every level of the design process. However, design thinking is not an exclusive property of designers—all great innovators in literature, art, music, science, engineering, and business have practiced it. What’s special about design thinking is that designers and designers’ work processes can help us systematically extract, teach, learn, and apply these human-centered techniques in solving problems in a creative and innovative way—in our designs, in our businesses, in our countries, and in our lives.

That means that design thinking is not only for designers but also for creative employees, freelancers, and business leaders. It’s for anyone who seeks to infuse an approach to innovation that is powerful, effective and broadly accessible, one that can be integrated into every level of an organization, product, or service so as to drive new alternatives for businesses and society.

You earn a verifiable and industry-trusted Course Certificate once you complete the course. You can highlight them on your resume, CV, LinkedIn profile or your website.

All open-source articles on Mockups

Please check the value and try again.

5 Tips for Keeping Your Mockups Simple
If you’re finding that your mockups are becoming increasingly complex and no longer serving the purpose that you intend
  • 415 shares
  • 8 years ago
Read article

Mock-ups
Mock-ups
Mock-ups are used by designers mainly to acquire feedback from users about designs and design ideas early in the design Book chapter
Read book chapter

Open Access—Link to us!

We believe in Open Access and the democratization of knowledge. Unfortunately, world-class educational materials such as this page are normally hidden behind paywalls or in expensive textbooks.

If you want this to change, , link to us, or join us to help us democratize design knowledge!

Share Knowledge, Get Respect!

Share on:

or copy link

Cite according to academic standards

Simply copy and paste the text below into your bibliographic reference list, onto your blog, or anywhere else. You can also just hyperlink to this page.

Interaction Design Foundation - IxDF. (2024, March 4). What are Mockups?. Interaction Design Foundation - IxDF.

New to UX Design? We're Giving You a Free eBook!

The Basics of User Experience Design

Download our free ebook “The Basics of User Experience Design” to learn about core concepts of UX design.

In 9 chapters, we'll cover: conducting user interviews, design thinking, interaction design, mobile UX design, usability, UX research, and many more!

A valid email address is required.
315,460 designers enjoy our newsletter—sure you don't want to receive it?