On Wednesday night Code for Australia Fellow, Ezekiel Kigbo, presented a speech on prototyping tips and tools at the Digital Designer’s Toolbox meet-up — hosted in Melbourne at Common Code.
Kigbo explained that the key to prototyping is usually to test “a concept or an idea,” and to not focus on designing the “perfect solution.”
Using wireframing tools like MOQUPS can be an effective way to translate an idea or process into an initial prototype. It’s important to note that during this process, designers should focus on nailing down the basic layout and flow of the interface and ignore the fine details, and MOQUPS appeals to this idea. It features a drag-and-drop interface with all the typical web UI components, it’s also collaboration friendly.
Following the wireframing process, you should have enough of a solution ready either for testing with clients or further design at a higher level.
For those looking to design a higher level mockup, and are deterred by the complexity of tools like Adobe Photoshop, Kigbo recommended using Sketch, a vector-based digital design tool, that’s fairly lightweight and easy to use. In conjunction with tools like Invision, you can start to collaborate or test with a more polished prototype.
When you’re prototyping in the browser, UI frameworks can be a helpful way to get off the ground with a good set of defaults, whilst simultaneously allowing you to focus on formulating solutions and not so much on specific implementation details. Most frameworks like Bootstrap, or Foundation are responsive out of the box so you can easily create multi-screen layouts, and also feature basic components; including: buttons, accordions, forms, and navigation options. You can save a lot of time by not having to reinvent some of these common components.
jQuery is; particularly, great for splashes of interactivity, it smooths over inconsistencies between browsers, has a great range of plugins available, and can be very quick to integrate into your design.
Some very important tips Kigbo recommended was to continually research reliable resources, get connected with other like-minded individuals in the community to learn more and share your experiences with them, and don’t get too attached to a single tool — always explore and experiment with a variety of tools to increase your knowledge and experience in design prototyping. Most important of all, move quickly with your testing — think of the lowest fidelity you need to test on your concept, or as Kigbo put it, “make it quick and dirty.”
You can follow Ezekiel on twitter @theatlasroom.