![]() Wireframes were originally used in Computer Aided Design (CAD) software to illustrate an object’s design without the need for detail. The term wireframe has been used for decades, long before it was adopted by the web design world. Leonardo da Vinci’s “fighting vehicle” was drawn as a schematic which was able to be recreated in 2010 by engineers. Da Vinci’s schematic is one of the earliest examples of a basic wireframe. Though the machine was purposely designed not to function properly, a group of engineers recreated it in 2010. ![]() 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.In 1487, Leonardo da Vinci drew a schematic called the “ fighting vehicle,” designed while he was under the patronage of Ludovico Sforza, the Duke of Milan. Just let your inner designer out and create that awesome UI you’ve been thinking about! If you want to go deeper, there are tons of wireframing notebooks and stencils on Amazon. Maybe it’s something better suited for designers, but I still find it useful just to mess around and experiment with different layouts. Sneakpeekit project is a set of printable templates with a precision grid you can use to draw your UI. If you’re oldschool like me and like to mess with paper, there’s a great alternative to digital wireframes - paper wireframing templates. They also real-time collaboration which might be useful if you want to show your prototype to someone remotely and get their feedback quickly. LucidChart is very similar to Draw.io but has a slightly better interface and a way to create interactive mockups. They all are pretty simplistic and are suite very well for low-fidelity mockup. Draw.io has pre-created libraries of elements so you can use elements from Bootstrap, iOS and Material UI. ![]() 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. They come in very handy when you want to sketch user paths for specific scenarios quickly. ![]() Flow charts are something you can’t do with Balsamiq unfortunately. Type: Desktop, GDrive add-on, Confluence or Jira appĭraw.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. 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. Type: Web app, Desktop app, GDrive add-onīalsamiq Mockups is the oldest and so far best tool for wireframing I know. 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 ![]() If you need something more exclusive, you can always give your mockups to a designer to refine and improve them. They are quick to create and can be quickly converted to actual app designs using UI frameworks like twitter bootstrap of google material UI. 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. With tools listed below all, you have to do is assemble screens from pre-created UI elements like buttons, menus, panels and so on. Mockups are usually much easier to create than written specs, especially if you are using the right tools. Everything starts just from an idea in your head, and the quicker you can get it on paper the better. ![]()
0 Comments
Leave a Reply. |