A prototype helps you develop an app or website. It doesn't require any prior knowledge or cost. I'll show you how to create an app or website prototype using the Figma design tool.
More innovation for your concept with app prototyping
You have a rough idea of what the result of your concept should look like? Good! Focus on the core of your idea and then get inspiration on how to improve it. Search the web for 2-3 examples of companies that solve a similar problem to your concept. To increase the potential for innovation, deliberately try to focus on industries other than your own. Let me give you an example. For example, if you want to sell customised products, take a look at Duolingo's onboarding process. Duolingo is a platform that makes it easy for you to learn new languages. At first glance, this may not seem like a good match. But you will notice that Duolingo first guides new users through a small, clearly structured assistant before they actually proceed to the exercises. These are then individually tailored to the user. Maybe you can adopt some of the clarity and simplicity of the wizard for the configuration of your customised products.
Start your design with paper and pen
Honestly. As simple as it sounds, pen and paper is the best and easiest way to start visualising your app prototype. If you're a designer on the go, you'll know the feeling of wanting to start working out your idea directly in your favourite graphics tool.
But before we do that, we should think carefully about how our prototype should be structured and built. "But I'm not good at drawing", you might think to yourself now. But that is not relevant. You don't have to be an artist to conjure up a few rectangles and boxes on paper. Ugly is okay. Write down short keywords to describe the functionality or structure in more detail. Create the individual screens of your app or website and describe the navigation structure. If you are prototyping for a user test, think about the story you want to tell with this concept. In this case, you should avoid looking at the screens independently of each other. Integrate your story and make sure the transition makes sense. If you want to learn more about this topic, check out this article of mine on "How to test my business idea in a few days".
The "prototyping" tool of your choice
If you already know which tool you will use to implement the concept of your prototype, then feel free to use it. There are various good applications on the market in this area and many differ only minimally in their range of functions. Therefore, it is always a matter of personal taste which tool you prefer in this case.
In this tutorial we will create our prototype with the tool "Figma". Figma can be used free of charge for up to 3 projects. Figma is known for its collaboration feature, which allows several people to work on the same project at the same time without getting in each other's way. The user interface is simple and easy to use, and the fact that the application is browser-based is particularly noteworthy. You don't have to install anything on your computer, but can access the tool via any browser. I recommend Google Chrome for use. Figma also has a wide range of freely available plug-ins and templates, and new ones are being added all the time.
Take your time and familiarise yourself with the interface. Even though the application, as already described, is designed to be simple, it still takes a little time to get used to.
Once you have created a new project, your layer structure is on the left-hand side, your "canvas" in the middle and on the right-hand side you will find the properties for the selected element. Create a new artboard using the shortcut "A" (press the A key). On the right-hand side, you can either choose a predefined format (e.g. iPhone, iPad or desktop for a website) or drag the window with your mouse to the desired size. Use the shortcut "R" (press the R key) to create a new rectangle, "T" to create a new text element and "O" to create an oval. That is actually all you need to start.
How to lay the foundation for app prototyping
I am deliberately leaving out the part of "wireframing", as this is not necessarily useful for quickly testing an idea. Of course, you can still do this if you like. Figma provides a free template for this purpose. Wireframing is about optimising your design at the concept level. You determine the arrangement and structure of the individual screens. All this is done without images and text. It's purely about defining the sequence of interaction with your application. We have already roughly sketched this out with pen and paper. If you want to test an idea with the prototype, it is primarily about whether you are building the "right" thing. It's about finding out if your concept solves a real problem and adds value. After testing, you can move on to building the concept "right". Following the theory of Alberto Savoia (former Google employee): "Build the right thing before you build it right".
Before you start designing your Figma prototype, you should create the basic things like colours, fonts, buttons etc. in Figma to have a good basis to work with. For colour combinations, I recommend the site coolors.co. There you can easily put together suitable colour concepts. For fonts, use fonts.google.com. All fonts listed there can be used free of charge for private and commercial projects. Figma also has all Google Fonts integrated by default.
Create an additional workspace for a mood board. If you don't yet know which direction your design should take, simply research a few images for inspiration and store them there. This way, you can always take a look at your collection of mood images during the design process.
Here we go
Upload your drawing to your PC and then to Figma. It's easy via the menu in the top left-hand corner. This way you have everything in one place and can always take a look at your conception. Press the "A" key to create a new artboard in smartphone format. Figma will make suggestions on the right-hand side.
Then start to digitally reproduce your concept step by step. I will publish a free video tutorial on this in the next few days.
Connect the dots
Once you have created all the screens, it is time to bring the prototype to life. Go to the "Prototype" menu on the right-hand side and define the basic settings. Then click on your start screen and connect the triggers to the following screens. In Figma, you can easily connect the connectors by dragging and dropping.
Once all the screens are linked, it is time to try out the prototype. Click on the "Play" button in the upper right-hand area. A new window with the prototype should then open and you can start testing it.
How do you test the prototype with a user?
If everything fits, you can easily share the prototype with your test users. Simply click on the "Share Prototype" button and share the link with the respective people. You can find out exactly how to proceed in such a user test in my blog post "How to test your business idea in a few days". Good luck!