With ideas running around your head, you may find yourself scratching your ideas down on paper, or drawing them out on a white board to experiment. Yet like many (myself included one in a while) you find yourself buried under sketches. Or, you find out some of your team members erased your whiteboard drawings, and now your blanking on what it looked like.
Fortunately, there a much cleaner ways to create, share, and receive feedback on your website wireframes - prototyping tools.
Some of the tools allow you to easily create simple wireframes to get your idea going. Other more advanced software allow you to build semi-functional prototypes that are almost indistinguishable from the real thing.
The tool gives you the ability to store your design drafts into different projects and separate them into groups. This allows you to add a variety of wireframes, say, for an about page, so you can easily log your changes and progress.
If you find your prototype spans many pages, InVision also gives you the ability to make your web and mobile designs clickable, so you can show basic forms of its functionality.
Want to receive feedback from others? The tool also allows you to share the mockups you make through custom URLs the software generates. Your team members can then go in and select areas they want to give feedback on, leaving little indicators on the design for you to check on later.
Similar to Balsamiq, Moqups has a library of pre-built assets you can use to create your designs. As you go along, you are encouraged to annotate your designs so you know what the purpose behind each section or asset.
For those who aren’t ready to move to the wireframe phase immediately, they software also has a diagram tool so you can arrange sitemaps or flowcharts to better understand how your user's path.
Your team can also tag parts of the design and provide comments. Each comment gives you the ability to reply back while keeping your messages together.
You can organize all your wireframes, or uploaded mockups, into grouped prototypes, similar to that of InVision. From here you can link your designs and create interactive hotspots that trigger events based on user interactions
One of the really neat features Marvel incorporates its software is the variety of gestures and transitions that you can choose when triggering events. So, rather than being limited to static interactions and only click-based triggers, you can add functionality based on swipes, pinches, or hovers.
Justinmind’s comprehensive UI library and software allows you to create low-to-mid-fidelity prototypes using their wireframing tool. From desktop to mobile app UI kits, the software provides a handy collection of assets to help you quickly create the design you’re envisioning.
Once you’ve created your mockups, you can then use the variety of interactive triggers to bring your prototypes to life. Like Marvel, you can choose from a variety of gestures to act as the trigger, and various transitions to imitate your expected functionality.
Inviting your team or stakeholders to review the design is only a few clicks away. From there, your team can label areas of the design for feedback.
Ideal for web applications, Origami gives you a wide variety of tools for you to build out user flows to help aid in your design. This allows you to create complex flowcharts of expected interactions to make sure you’re ensuring the best user experience throughout the creation of your design process.
Alongside your flowcharts, you can create a layer list of prototypes that can connect each of your charts steps. From here, functionality can be added to show transitions based upon specific gestures.
As you drop components on the canvas, you can easily group and organize them to keep them organized and easily findable for editing and manipulating.
Once completed, you can then begin to add gestures and transitions to the design to get the feel for your website or applications functionality. You can even replicate different ‘states’, or views that are triggered by specific interactions. One example of a state would be a window of a spinner icon that's visible once a user searches content using a search box. That page would then update to show the list of search results.
Although prototyping tools have taken the internet by storm, it's important not to become overwhelmed by all they have to offer.
Remember to return back to the project at hand to determine its magnitude and how necessary prototype software may be.
Make sure to also weight the time you need to invest into learning it, as the more basic tools with pre-built assets may be all you need to make a few pages rather than a more robust platform with elaborate customization options.
Here Are Some Related Articles You May Find Interesting