Integrate wireframes into your product development process. Add a new whiteboard to create your wireframes with a robust library of components. Then, share it so your stakeholders can access and reference wireframes as they iterate on your newest product features.
Click any of the following links to skip ahead:
This article discusses functionality that is included in the Aha! Whiteboards Advanced plan. Please contact us if you would like a live demo or want to try using it in your account.
Wireframe components
You will find wireframe components at the bottom of the Shapes menu in your whiteboard's toolbar. Components include various devices, controls, and navigation elements:
Devices: Select from laptop, mobile, tablet, and browser frames.
Controls: Choose from a variety of controls, such as buttons, links, checkboxes, dropdown menus, radio buttons, toggles, text input fields, date selectors, search bars, and more. Most controls — like buttons — are highly customizable. Use a control's toolbar to update its color or style, add icons and text, or change it to a Default or Selected state.
Placeholders: Choose from a variety of placeholders for items like videos, maps, pie charts, avatars, and more.
Navigation: Add a navigation menu. Choose a vertical or horizontal layout.
Click the Icons tab on the Shapes menu to browse icons or use the search function to narrow in on the choices you are looking for.
Many wireframe components provide an option to add icons from their individual toolbars as well.
Create wireframes
Access the Shapes menu from your whiteboard's toolbar. Click All wireframes at the bottom of your Shapes menu to see all wireframe components. Select an option from the Devices menu and click your whiteboard to add the device frame. Repeat to add components and icons you want to use in your wireframe.
Drag and drop components into place and use each component's toolbar to style and format it. Formatting options will depend on the component you add. But you can change their color, border, fill, and opacity, with multiple styling options available for some components. Many components have default or select states to choose from as well.
After you have built out your wireframe, you might want to group or lock items to your whiteboard before sharing. This ensures that components in your wireframe are not accidentally moved by other collaborators while they are navigating your whiteboard. You can un-group or unlock objects at any time through the same right-click action.
Jumpstart wireframe creation with the AI assistant.
Use wireframe blocks
Accelerate wireframing with ready-to-use component blocks. Wireframe blocks are pre-built groups of wireframe components you can use to build realistic wireframes quickly. Your Aha! account includes more than 30 wireframe blocks that follow common user interface patterns.To add a wireframe block to your whiteboard:
Access the Shapes menu. Then click All wireframes.
Scroll to the Blocks menu and select a wireframe block. Then click your whiteboard to add the block.
Customize the components to fit your use case and match your product.
Use a wireframe template
Get a quick start on your wireframe with a template from the Aha! template library. You will find wireframe templates for common use cases like signup flows and product homepages in the template library, making it easy for you to start with the basic components you will need to create a wireframe already on your whiteboard.
Select the Template icon from your whiteboard toolbar. Then, select the Design category in the left navigation to see wireframe template choices. Click Use template to add a template to your whiteboard.
Link wireframe components
Link shapes and wireframe components to other objects on your whiteboard so people can move between screens and understand intent. This makes your wireframe interactive, helping you validate user journeys.
Right-click the component or object you want to link and select Link object.
Select the destination object and click Confirm.
A link indicator appears on the linked or component object. Click it to navigate to the linked object.
Create a wireframe with the AI assistant
The AI assistant helps you move from idea to visual quickly. Describe what you want to explore and it will generate a draft wireframe on your whiteboard using standard components. This is a fast way to align on layout and flow before you invest time in detailed design. You remain in control — edit anything the AI assistant creates and iterate with your team.
Open your whiteboard and select the sparkle icon to open the AI assistant.
-
In the prompt field, describe the screen and goal. Include key elements.
Example: "Create a wireframe for a mobile signup screen with logo, email, password. Show a password toggle, primary 'Create account' button, and link to 'Sign in.'"
Click the arrow key to generate the the wireframe.
The assistant will add a wireframe to your current whiteboard. Now you can review and refine it. Drag components to adjust layout, edit text, and use toolbars to change states, colors, or icons.
Make followup requests in the AI assistant prompt window as necessary.
When ready, group or lock elements to prevent accidental changes, then share the board for feedback.
Share wireframes and gather feedback
A wireframe is an early blueprint for what you plan to build. And, like any early plan, you need stakeholder buy-in and feedback to ensure it meets your customers' needs.
Use your whiteboard's Share menu to generate a link that you can provide to stakeholders. You can share it with other users in your Aha! account or with guests.
Anyone with Edit access to your whiteboard can use inline comments to provide feedback on the user flows and interactions your wireframes map out. You can also add comments or use the annotation tool to point out specific areas in your wireframe where you want stakeholders to provide their insights.