Prototyping Resources
-
This resource is part of the 30 day prototyping program.
We’ve touched on understanding our users in the early stages of our design process, so here are some approaches you can use to test your ideas through creating prototypes.
What's the best way to prototype?
The main purpose of a prototype is to communicate ideas and gain feedback to guide your product in the right direction. You could go all out and build a really good prototype or MVP, but what if what you make isn’t at all what your users need? It might look great, people might sign up to the service, but will they continue to use it after a month or 2?
A good way to ensure they do is to move through different levels of prototype fidelity, to gain different types of feedback:
For instance, early on, it’s better to gain high-level feedback, answering questions such as:
- Does the flow of the app make sense?
- Does the user get lost?
- Is the layout confusing, or does it efficiently guide the user to their goal?
Paper prototypes would be useful for this, or even quick digital prototypes:
Low fidelity prototyping
I like to start quickly on paper, sketch out ideas, and test them on users to see if they work as expected. As soon as I have a rough version, it can be made interactive using POP on Marvel app:
Paper Prototyping Resources
Digital Resources
It’s also fast these days to start in tools such as:
- Adobe XD
- Sketch
- Figma
- InVision
and a whole host of tools you can find here.
What’s your favourite tool? Do you go straight to coding?
cc: @fredotan @doug @parul @siberiancyborg @aryribeiro @juliavioletart @davids701124 @noelgarcia @karina-julissa-buhezo-flores @Juanita-Louka
-
@Graeme Paper prototyping seems appropriate for a first pass to explore your ideas. I found both the Konigi graph paper (8-up-cyan-thumb) and SneakPeekIt iPhone (4-up Mobiles + Grid) useful for sketching initial iOS wireframes; there were others for web and tablet sketches, but that's not my interest right now.
Of course, once I get my iOS app working, then I will investigate other forms like desktop apps (macOS or Windows) , web apps (HTML5/CSS/JavaScript, Vue, Angular, etc.), tablets (iPad), Apple Watch (watchOS), and/or Apple TV (tvOS), and/or Android phones/tablets.
-
@Graeme After some preliminary sketches with pen, pencil, and fine marker, I realized that I need to visit my local office supply store to get proper paper prototyping gear. So apparently, I need a clip-on sketch board, roll-on correction tape, and multiple very fine pens/markers like 0.7mm and 0.5mm very-fine pens, as well as Ultra-Fine Sharpies. This seems better than mechanical pencils since it would be more clear and easier to capture as photos for early prototyping with Marvel, Sketch, Figma, Invision, Framer, Justinmind, etc.
It looks like it would be very useful to get a bunch of Post-It notes (small & larger), as well as index cards, since it appears that "card sorting" is very helpful technique. I realize that I can do some of this with RealtimeBoard, but that's still more limited by screen real estate (unless I use a larger HDMI display or AirPlay for Apple TV).
I have seen some stencils, sketchpads, iPhone sticky pads, and sketchbooks. However, they seem somewhat restricted and probably not necessary at this point. Let me know any other suggestions before I go shopping later this week.
-
@Graeme I have tried several prototyping tools, and I'm still trying to determine what's most appropriate iOS design on my app. Marvel definitely has its place since it's simple and easy to use, especially early on; however, it's design palette is rather limited, and it's hard to take it much further after initial steps.
I explored JustinMind somewhat, and I think I like it quite a bit. It has much more versatility, and offers many widget libraries for its design palette. Also it's prototyping tool is fairly easy to use, similar to Marvel.
Since I'm still a Sketch novice, I spent some time trying to get more familiar with its capabilities for wireframes and prototyping. It actually looks fairly straight forward, but I needed to dive into more Sketch design itself along with various libraries and plugins. Finally I started to get a feel for how to use Sketch, and it really looks very promising. Also because of all the integrations with other tools like Marvel, JustinMind, Framer, etc, it appears I could use them together quite nicely once I get the proper workflow established.
One thing I discovered right away was how important it is to get structure, organization, and naming conventions setup. For example, it wad helpful create pages for separate groups of artboards (like recipes, etc), as well as finding the best iOS libraries to leverage components to help simplify and standardize my app design.
Of course, I will then have to figure out how to translate such designs into iOS Xcode storyboards and/or NIBs as well as Swift code. I know tools like Marvel, Zeplin, and Avocode focus on such developer handoff, CSS styles, and Swift code. Of course, in my case as a solo developer/designer, I'm handing it off to myself. Actually, I would like to move back and further between AppCode/Xcode and my design tools as My app evolves. Also, I need to understand the best way to export assets for use in my iOS projects, asset catalog, colors, icons, and images.
I welcome any ideas to help accelerate my learning.
-
@doug Hey Doug, I see your issue with going from design tools to XCode. I had a look for some alternatives and came across a tool called Yotako - I actually met Alfonso who made the app before and had a demo of it back in August.
This might be late notice, but he has a demo of it starting in about 20 minutes. Here's a link: https://my.demio.com/ref/O5BWNvqBneX3Vnuu
Hopefully it will be recorded for those tha can't see it, but I'll report back on what I learn
Latest Members
