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.
Alexander Sprogis
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.
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.
Before we do this, however, we should think carefully about how our prototype should be structured and built. "But I'm not good at drawing", you might be thinking. But that's 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 creating the prototype for a user test, think about a 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 ensure a meaningful transition.
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.
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.
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.
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.
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 relevant people.
