Everything starts just from an idea in your head, and the quicker you can get it on paper the better. Mockups are usually much easier to create than written specs, especially if you are using the right tools. With tools listed below all, you have to do is assemble screens from pre-created UI elements like buttons, menus, panels and so on.
It’s important to notice that in the very beginning you need to create low-fidelity mockups that would show a general idea of what goes where and how UX flows schematically. These are typically called wireframes. They are quick to create and can be quickly converted to actual app designs using UI frameworks like twitter bootstrap of google material UI. If you need something more exclusive, you can always give your mockups to a designer to refine and improve them.
I wouldn’t recommend using full-blown design tools like Sketch, Figma, Flinto, and others because they would typically have a longer learning curve and are better suited with someone with design skills to produce high-fidelity designs and prototypes
Balsamiq Mockups
Cost: $9/mo with a 30-day trial
Type: Web app, Desktop app, GDrive add-on
Balsamiq Mockups is the oldest and so far best tool for wireframing I know. It allows you to quickly throw in elements to create a set of screens, link them together in a simple way and easily share with your team-mates.
Draw.io
Cost: Free as desktop or GDrive add-on
Type: Desktop, GDrive add-on, Confluence or Jira app
Draw.io is a powerful tool to create both simple layout wireframes and flow charts that show user path across the app from a birds-eye view. Flow charts are something you can’t do with Balsamiq unfortunately. They come in very handy when you want to sketch user paths for specific scenarios quickly. Unfortunately, Draw.io won’t allow you to interlink screens so there will be no interactivity, but the fact that it’s readily available to anyone for free is a huge pro IMO. Draw.io has pre-created libraries of elements so you can use elements from Bootstrap, iOS and Material UI. They all are pretty simplistic and are suite very well for low-fidelity mockup.
LucidChart
Cost: Free for a single user
Type: Web app
LucidChart is very similar to Draw.io but has a slightly better interface and a way to create interactive mockups. They also real-time collaboration which might be useful if you want to show your prototype to someone remotely and get their feedback quickly.
Sneakpeekit
Cost: free
Type: paper
If you’re oldschool like me and like to mess with paper, there’s a great alternative to digital wireframes — paper wireframing templates. Sneakpeekit project is a set of printable templates with a precision grid you can use to draw your UI. Maybe it’s something better suited for designers, but I still find it useful just to mess around and experiment with different layouts. If you want to go deeper, there are tons of wireframing notebooks and stencils on Amazon. Just let your inner designer out and create that awesome UI you’ve been thinking about!
I’m sure there are other wireframing tools I don’t know about, if you are using something, please share in comments, I’d be happy to try them out.
