- Wireframing is an important part of the design process. It doesn’t necessarily require software. Many designers find it quicker and easier to use a pen and paper to get the structure of their.
- Wireframe software is software that is designed to help you mock up a wireframe layout as quickly and easily as possible. Many web wireframing tools will let you drag and drop placeholder elements for images, text, banners, and logos to help you get a feel for your first draft design.
- ProtoPie is the easiest tool used to turn your UI/UX design ideas into highly interactive prototypes for mobile, desktop, web, all the way to IoT.
The control with many names! A dropdown menu gives you a list of items to select from. It is versatile and familiar.
Getting started with wireframes. First things first. A wireframe is a low-fidelity design layout that serves three simple but exact purposes. It presents the information that will be displayed on the page.
Whether you call it a Dropdown menu, Combo Box (or Combobox), Pull Down menu (or Pull-down menu), Picker, Select menu, or something else, you use them every day.
Technically, a dropdown menu is different from a combo box. A combo box is a combination of a dropdown menu and text input (confined to a set list of values). It is arguably more usable because you can type all or part of the value you want to select without having to scroll through the entire list of values. However, the dual nature of combo boxes is not obvious, so many users don't know that they can type into them.
Looking for how to create dropdown menus in Balsamiq? Check out our documentation on Adding Controls and Editing Controls.
When to use dropdown menus
Dropdown menus are a great way to present a large number of options without taking up much space on the screen. They can also reduce errors, when compared to text input fields, because the input is constrained to the options available. Welie.com writes 'The user may be familiar with the data but may not know the exact required syntax.'
Some drawbacks of dropdown menus are that users can't see all the options at once and it can take time and dexterity to scroll. If you have a very long list, you can use a combo box or autocomplete text input field instead.
According to the U.S. Web Design Standards, the optimal number of items in a dropdown menu is between 7 and 15. It suggests using radio buttons or checkboxes for shorter lists.
An exception is when the list is familiar so that users can expect to know the contents before opening it, such as days or months of the year, states/provinces, or countries. The GNOME Human Interface Guidelines use the following example: 'if you have an option menu labelled 'Month:' with the item 'January' selected, the user might reasonably infer that the menu contains the 12 months of the year without having to look.'
How to use dropdown menus
- Order the items logically (e.g., sequential for dates/numbers, alphabetical for countries).
- Display a meaningful default selection.1 (Note: Pre-selecting an item can be dangerous, however, since you can't verify whether the user chose it deliberately. When in doubt, default to no selection.)
- Provide relevant choices. Longer lists require more time to scan, so don't add options you don't expect users to select.1
- Avoid making options in one dropdown menu change based on the input to another. Users often don’t understand how selecting an item in one impacts another.2
- Allow users to click anywhere on the control to open it, rather than only the arrow.
- Use grouping or categorization when it makes sense (see categorized dropdown variation below). Group headings or separators should not be selectable, however. (In HTML, this can be achieved using the <optgroup> tag.)
Basic usage

States
Variations
Note: The Balsamiq examples shown above are available to import or download from Wireframes to Go. Read the instructions for using Wireframes to Go.
References
Related controls
Further reading
With the help of prototype makers, designers can think and experiment on user experience features, test their ideas in reality, and also improvise them whenever needed. Fortunately, there are many app prototype makers available in the industry; however, you must know which android app prototype maker is suitable for your requirements and needs. Through prototyping, you can set a layout for the mobile app that you are planning to design.
Many app designing companies now use free app prototype makers to test their design, and different companies have different wireframing tool requirements. If you are looking for the top app prototype makers, you have come to the right place. This article will introduce the five best prototype makers.
5 of the Best App Prototype Maker
1. Wondershare Mockitt
If you are someone who wants to design an app from scratch, you can consider using Wondershare Mockitt. This easy to use tool will allow you to design, use templates, share your design, and collaborate with ease. This android app prototype maker comes along with many nice features, which makes the designing process fast and easy. And whenever you wish to collaborate with your team for quick feedback, that can also be done.
This tool is considered to be the best in the field of app prototyping makers because it lets you do a real-time meeting with your team members or clients, get immediate feedback on the project you are working on, handle your project with ease, and more. Wondershare Mockitt is free, which means you only need to have an idea for the app design, and you are all set to get started.
Pros
- You can create prototypes and wireframes for free.
- You can design your prototype with ease and hassle-free.
- The drag and drop feature makes the prototyping experience smooth.
- You can save your project on the cloud for easy collaboration with your team members and clients.
Cons
- This tool might not be ideal for those who are looking for high fidelity designing.
2. InVision

InVision is a highly intuitive and one of the most used prototyping tools for designers that lets you design, test your business models, and create for any device. You can even use this to sketch, add images, and design from different sources, such as Photoshop.
Designers will enjoy the easy drag and drop feature while working on android prototype maker. You can even integrate with Dropbox, Google Drive, and sync your files effortlessly. And besides being one of the best android prototype makers, it can also let you collaborate with your team to get feedback. The app so far has more than 1.5 million users.
Pros
- Seamless designing and prototyping.
- Easy design integration
- Nice collaboration features
Cons
- The software can become slow at times.
- Customer support service is limited.
3. Balsamiq
Balsamiq had its inception in 2008, and many designers prefer this tool because it is both available in web applications and desktop versions. So, if you are looking forward to putting together the ideas of your wireframe, Balsamiq is the right tool to go for. The good thing about this tool is that it lets you create your wireframes effectively and quickly. All you need to do is add all the elements that you need, customize them, position them, resize them, and more, and your wireframing will be ready in some time.
Even with Balsamiq, collaborating with your team members and clients is possible. There is no scope for animations or interaction, and the purpose of using Balsamiq is only to demonstrate the flow of the app. This app prototype maker comes with a free trial, and then you will have to pay per month. The more features you will need, the more the price will be.
Pros
- Balsamiq has lots of features, which make prototyping easier.
- Easy to pick and get started with.
- Lots of readymade components.
- A good tool to discuss the initial layout.
Cons
- Mocks can appear very rough.
- User interface elements are low.
4. MockPlus
If you need a fast, powerful, and user-friendly prototype software that will quickly create an app prototype for web applications, mobile apps, and more, you can think of getting MockPlus. The company is proud of its visualized integration design. The prototype that you will make using MockPlus will give you precisely the same results.
You will find lots of pre-designed components, such as Image Carousel, Scroll Box, Scroll Box, Scroll Box, Pop-up Panel, and more for quick mock-up creation. The tool has a free version, but the paid version has better features, and you will have to pay $129.00 if you go for the paid subscription.
Pros
Wireframe Product
- A useful prototype tool for UI/UX designers.
- MockPlus lets you save your project on the cloud.
- Free version available.
- Drag and drop feature for easy creation of mock-ups.
Cons
- First use could be a bit overwhelming for beginners.
- The free trial period offers limited features.
5. WireframePro
For those who are looking for a web-based wireframing program, you can think of WireframePro. This mobile app prototype maker is suitable for those who want to develop and work on their own app. The tool comes along with drag and drops feature for easy wireframing. You will find most of the standard UI elements, and the verities of components available with WireframePro are impressive.
The built-in collaboration tool allows you to collaborate and interact with your team whenever you want. Because there are many features available with WireframePro, designers find it quite easy to use and work on. The tool doesn't come with any free plan, and you will have to purchase a license first to begin using it. The cost will be $19 /mo.
Pros
- Lets you do wireframe easily and quickly.
- You can collaborate with your team member to get immediate feedback.
- Budget-friendly.
Wireframepro Crack
Cons
- No free trial plans.
Wireframepro Tutorial
Comparison among the Best App Prototype Maker
Tool Name | Compatibility | Price | Fidelity | Easy-to-use |
---|---|---|---|---|
Wondershare Mockitt | Mac,Windows,Android | Free | Low to high | Yes |
InVision | Windows and Mac | Free / $15 per month | Low to high | Yes |
Balsamiq | Web, macOS, Windows and Linux | $12 per month | Low | Yes |
MockPlus | Windows, Mac OS and Android, iOS devices | Free/ $129.00 | Low to high | Not really |
WireframePro | Mac and Windows | $19 /mo | High | Not really |
