Prototyping and wireframing are fundamental processes of interface design. It is the process that allows us to have an idea of how a product will look and function in practice.
What is a Prototype?
Prototypes, which are prepared at an early stage of the design process, are a very important process for the product to be tested and experienced in practice before it is fully developed.
The most practical way to test the aesthetic, technical and physical features and functionality of the final product is to create prototypes and have them tested by end users.
Proof of Concept: A prototype is used to see the feasibility of an idea or concept. Prototyping is the only way to test in practice whether ideas are what they seem in theory, especially in projects where innovative experiments will be carried out. Users’ interactions are measurable in this way.
Receiving Feedback and Improvements: Prototyping is the best and cost-effective way to meet users before the end of the project. By measuring the user’s experiences and getting their feedback, you can make your project more complete and error-free, and increase the user experience (UX).
Interdisciplinary Collaboration: It makes it easier for people working in different fields such as design, engineering, and marketing/production to work in collaboration and create a joint product.
What is Prototyping?
Prototyping is the process of preparing a functional model of a product. It is the most practical and cost-effective way to envision how the design will look and how the interacting elements will work.
It can be divided into low-detail prototyping and high-detail prototyping.
Low-Detail Prototyping: We can talk about simple structures drawn on paper or digital screens. You can make the layout and positioning of the interface in this step.
High-Detail Prototyping: It is the process that can be defined by using more advanced tools and methods to design the design in the closest way to the final output, to make it functional, to determine materials such as colors, fonts, components to be used.
Prototyping Tools
As we have detailed in our previous articles, there are many tools for prototyping. You can reach the related article here. Some of the related applications;
- Adobe XD
- Figma
- Sketch
- Invision
- Axure RP
What is Wireframe?
A wireframe is a simple visual guide to the skeletal framework of digital interfaces such as websites and mobile applications. It outlines the layout of the design and the placement of the elements it will contain. Aesthetic elements are not considered at this stage.
- Determining Structure and Layout: This step is used to determine the basic structure of the page and the hierarchy of the content. Basic questions such as where to place the title, main navigation bar, content areas and sub-information on a website are answered in this step.
- Facilitates Communication: Wireframing speeds up and facilitates communication as it is simple enough to appeal to all stakeholders of the project. Thus, you can avoid many mistakes and problems and prepare targeted designs before they become complex.
- Facilitates Focus: It allows to focus on functional aspects. While you are likely to drown in details at the beginning of non-wireframe projects, in a project that has undergone a wireframe process, you can identify and address UX requirements before aesthetic details.
- Wireframing Stages
Needs Analysis: This is the step where the objectives and requirements of the project are listed and the beginning is made. - Design Decisions: This is the step where the components to be used in the pages are determined and their basic functions are decided.
- Drawing: It is the development process. It is the stage of creating the frame by preparing simple paper and pencil drawings. Optionally, it can also be drawn in digital environment.
- Getting Feedback: It is the process of collecting feedback by showing the drawings made in the previous step to the customer or product owner and making improvements if necessary.
Wireframe Drawing Tools
- Balsamiq Mockups – (2008)
It is a mockup application with an intuitive and simple interface that beginners can prefer. You can sketch your designs by drag and drop and save time by using ready-made components. It works with a monthly subscription payment method. A short-term trial version is also available. - Sketch – (2010)
It is an application preferred more frequently by those using Mac devices. It is used to prepare detailed wireframes and is paid. It is more difficult to use than Balsamiq, but it has proven itself in the industry and is preferred by professional UI/UX developers. The plugin library is extensive. Paid, with discounts for students and instructors. - Adobe XD – (2016)
Since its interface is similar to other Creative Cloud applications, it is easy for designers in the ecosystem to adapt easily. It is possible to create both simple and detailed works with this application, which can appeal to both amateur and professional users. - Figma – (2016)
It is a cloud-based application. You can access your designs and continue development from both the desktop application and the browser. It allows multiple users to work on the same project simultaneously. It can be said that it is more suitable for professional UI and UX designers. The basic package is free and will be enough for you when creating products from scratch to prototyping. - Wireframe.cc – (2012)
It is a web application with a minimalist and simple interface. It helps you prepare basic mockups quickly. People who want to quickly turn ideas into visuals can choose it. The basic version is free.