KINETIC - Prototyping

PROTOTYPING

Now that you have an idea for your minimum viable product, it’s time to sketch out some ideas and think about what your project will look like. If you are making a mobile app, you want to plan what your user interface might look like. If you are making an AI project, you want to plan what the invention will look like physically, and how users will interact with it.

A prototype is an early model of something. There are different kinds of prototypes, but we will be focusing on paper prototypes in this lesson. A paper prototype is a hand-drawn representation of what your app will look like. It typically looks like screenshots

WHAT ARE THE BENEFITS OF PROTOTYPING?

You can quickly communicate your ideas in a visual way. For example, you can show what happens when you click on buttons in your app.
It’s collaborative! When you work on paper or with cardboard, it’s more casual and conversations spring out of experimentation.
It’s inexpensive! You don’t have to spend a lot of money and time to create a paper or cardboard prototype. You can use materials like cardboard, paper, magazine cut outs, post-its, markers, stickers, tape, popsicle sticks, pipe cleaners, and glue.
You don’t need access to a computer or the Internet.
You don’t have to be a technical expert for this part of the process.
You can see how your users react to your prototype to quickly learn what may or may not work in your design.
Prototypes can help to confirm design decisions before you spend more time building a device or developing and coding your app.

CONVENTIONS

Before you start, here are some basic UI conventions that you can use in your app. A convention is something that is common or is used a lot. Here are a couple of common user interface conventions. You don’t need to use all of these conventions, they are just suggestions for certain things you might want to include in your app.

BUTTONS

Buttons are used everywhere in mobile user interfaces. They are used to prompt the user to take an important action such as “sign up” or “submit”. Be careful not to over use buttons, too many buttons can look cluttered and confusing, and the user won’t know which one to use.

SPLASH SCREEN

Many apps will use the full screen to display their logo when you first open it. This is called a splash screen. Sometimes they will put a navigation menu or buttons on this screen.

LOGO AND HEADER

Most apps have a place at the top for a logo on the main navigation menu.

NAVIGATION BAR

A navigation bar helps users find what they are looking for in an app. Many apps put a navigation bar at the bottom of the screen containing icons. You should limit your navigation bar to five items or less so it doesn’t get cluttered.

FULL SCREEN MENUS

You can show your user a full screen menu to help them navigate your app. This can look like a list, or you can get creative and use blocks of colour or images.

HAMBURGER MENU

A hamburger menu looks like this:

It is used when a full navigation bar or menu can’t fit on the screen. When you click on it, it will bring a hidden menu out.

MORE OPTIONS MENU

A more options menu looks like this:

Similar to a hamburger menu, this menu will also bring out information that can’t fit on the screen.

SEARCH BAR

Having a search bar is an extremely common way to help users navigate your app.

Adding a magnifying glass next to the search bar helps your users know it is a search bar.

SCROLLING FEED

Most users are used to scrolling down to see more information. A feed can be used to show more information than will fit on one screen.

Look through some of the apps that you have on your phone. What parts of the user interface do you see being used over and over again?

What parts do you think look nice or make the app easy to use?

Page updated

Report abuse