3 Easy Steps to Design an App

In designing an application there are several things that you need to pay attention to, one of which is making a good application design and of course it can function properly.As a designer, especially a UI Designer, UX Designer or UI / UX Designer, you must be familiar and must know the terms Wireframe, Mockup & Prototype.

Wireframe, Mockup and Prototype are 3 easy steps that you can use to design an application. Let us discuss further

  1. Wireframe

Wireframe is a framework that functions to layout a website to suit the client’s wishes before entering the design or coding process. The wireframing process is usually carried out by a UI Designer by using special wireframe design software or manual paper scribbles.

The components that are used as material for the wireframe process include the header, body / content, footer, sidebar, and several other additional components.

In general, the basic difference between a wireframe and a mockup is in the level of fidelity, where wireframe is included in the low fidelity level, while mockups are at the high fidelity level.

KThe components in the process of creating your own website wireframe include the following points:

  • Main Layout

The first thing that needs to be prepared in creating a website wireframe is the main interface or layout. The elements that are included in the layout itself include the header, navigation menu, body, font type and size selection, to the selection of the sidebar location whether it is on the left or right.

  • Navigation Component

Like a tourist spot, navigation is part of the map and also directions used by users to help explore the content. So, this section must be carefully conceptualized starting from the wireframing process so that in the future it will be more comfortable to use by visitors.

  • Additional Elements

Apart from creating the interface layout and navigation, the next component that you need to prepare when creating a website wireframe is the supporting element. This section usually has a different amount for each website.

For example, an online store website requires at least an order confirmation form feature, a receipt check feature, and a chat service for discussions between sellers and buyers.

Meanwhile, for article-based websites such as detik or stands, you must pay attention to the newsletter subscribe feature, the comment column, or the share button.

2. Mockup

A mockup is a final design that already contains information (images, colors, & typography) and shape elements with a high degree of precision. To make the design look as if it looks real / real.
To make this mockup you can use tools (Sketch, Figma, AdobeXD etc.).

This gives the client a more realistic impression of what the final website / application will look like. So it’s great for communicating, discussing, collaborating, and repeating projects with your team members at a later design stage.

3. Prototype

Prototype activities may be better known in a product, but actually this one activity is also very applicable when designing a website. The prototype itself is the first thing the product is used for testing the concept or idea of ​​the product.

Create a website prototype, in the form of a mockup or demo that will look like a website when displayed. Website prototypes can be in any form, paper sketches to HTML prototypes that can be clicked like a real website.

Usually, many people implement website prototypes in the form of interactive prototypes of several types of prototypes that allow users to navigate from page to page by using the functionality of the menu on the website.