The wireframe doesn’t look much like the final product, but it does allow the team to focus on core functionality and concepts, without getting distracted too much by the design.

Wireframes provide a low fidelity representation of a design – they’re not intended to be completely representative of the final product, but more of a sketch. This sketch-like appearance allows the team to focus on core functionality and features, rather than getting bogged down in the details of the design.

Wireframes are a quick and efficient way of getting initial ideas onto paper and don’t require the designer to spend a huge amount of time detailing core functionality. They can be created quickly and will ideally include discussions with key stakeholders and decision makers to ensure requirements are set out early, in a simple visual display.

Wireframes can be used as documentation for the project and should ideally be accompanied by written notes to explain interaction to complex technical documentation.

They can also be used in a less formal way as they are quick and simple in form, and can function as clear sketches suitable for inner team discussions.



The mockup looks a lot like the final product, and is sometimes presented in a photo-realistic setting, bringing it to life for all stakeholders.

Mockups are the “middle ground” between sketches and prototypes – they are static rather than interactive, so don’t provide the user with the same idea of interaction with the interface.

Mockups are a cheaper and quicker alternative to a prototype and are ideal in gathering feedback at an early stage in the project, but won’t be as useful in terms of user testing before development starts as the interactive elements of the project have not been defined.



Prototypes can look and behave a lot like the real product, so are a great way to get everybody on board.

Prototypes are a high fidelity representation of the final product, and simulate the user interface interaction. They allow the user to experience content and interactions with the interface, and test the main interactions in a way similar to the final product.

Prototypes can be a great tool for securing stakeholder buy-in, and can be created to look and feel as if the product is live – but with a fraction of the expenditure.

We’re able to create prototypes that look and behave just like the finished article, so these can be a very effective way of demonstrating the solution’s strengths and securing stakeholder buy-in early on in the project.

Of course, prototypes are more time consuming than Wireframes, but if the designer focuses on the core requirements of a system in terms of usability, they can provide effective material for user experience testing before any money is spent on development.

Note that prototypes are sometimes called “interactive mockups”, which can add to the confusion!

Which is right for my project?

The method used will depend on time and budget, and to a certain extent the skillset of the team working with you on the project. For example, if you are simply setting out initial ideas for a project and don’t need a high fidelity working prototype then a wireframe will enable the key decision makers to see early thoughts on paper.

If however, you wish to focus more on the interaction with the interface and it is a priority to ensure you have a solid, visual idea of functionality then a prototype is a strong candidate.

The prototyping process can be rapid development and should be a collaborative exercise involving designers, developers, product owners and end users. If the budget and project timescales allow, a project can include all three design processes, starting with wireframes for initial discussions, a mockup for securing stakeholder buy-in, and a prototype to enable early user testing and clear visualisation of requirements.

Eclipse Financial Systems have plenty of experience in creating wireframes, mockups and prototypes, using a tailored approach to each individual project – contact us to see how we can bring your ideas to life through these techniques.