Prototyping a mobility app easily in Sketch

You are faced with the challenge of creating an appealing prototyping for a Mobility-App. This is not just about design; it is about effectively shaping the user experience from the very beginning, helping users navigate intuitively through the app. In this tutorial, you will be guided step by step through the creation process of a prototype in Sketch. Let's embark on this exciting journey into the world of design!

Key insights

• Prototyping is a crucial step in app development.
• In Sketch, you can start with simple shapes and designs.
• A clear structure and user guidance are essential for the success of your app.

Step-by-step guide

Start by creating the basic structure of your app in Sketch. You can use the brush tool to draw your first design elements. Simply go to the brush tool or press the "P" key to select it.

Create a rectangle to represent the screen of your app. Hold down the "Alt" key while dragging a rectangle with your mouse. This will ensure that the rectangle remains proportional. That looks pretty good already.

Now it’s time to design the first page of the app. Start with the bottom tab bar. Again, use the brush tool and draw a straight line while holding down the Shift key to ensure that you get a straight line.

After designing the tab bar, add three icons representing the app's main functions. With the ALT key, you can easily duplicate the figures while dragging them to the appropriate spot.

Next, let's focus on the top navigation bar. Again, hold down the ALT key while dragging another rectangular area for the navigation bar.

The chat bubbles are the next part of your app that we want to design. Use the brush tool to draw a chat bubble. This will be displayed immediately to welcome the user. Add a short text to greet the user, such as "Hello and welcome to the Mobility App!"

To ensure everything looks appealing, you can copy and adjust the bubbles. Select the bubbles and drag them down while holding the ALT key to add another welcome text, like "Start with your first Mobility Session".

The next step is to insert the video button, which allows users to play their lessons. Draw a round button with the brush tool and combine it with a triangle to clearly show its representation and function.

Now copy all important UI elements – such as the top and bottom navigation bars – to the next page to ensure consistency in design. You can simply drag a screenshot with the ALT key to duplicate the elements onto the next page.

On this new screen you have created, design the options for the courses. Here you should create a simple overview of the available courses that the user can select.

In the profile view, you can create a space for the profile picture, the username, and the number of completed course hours. Here, it is important to present the information clearly and distinctly.

Finally, complete the design of the course and lesson selection by creating an overview for the lessons and add a close button so that the user can close the selection at any time.

This completes the basic prototype for your Mobility App. You now have an appealing design that clearly structures user guidance and simultaneously helps you as a designer to visualize the app's vision clearly.

Summary – Prototyping a Mobility App in Sketch

Throughout this tutorial, you have learned step by step how to prototype a Mobility App in Sketch. From the initial idea to the final design elements, you have expanded your knowledge and created a useful tool for the further development of your app.