App Layout design How to Create App in Thunkable/Appybuilder

app layout design

Nowadays people are keen to learn stuff which was very hard to do in past few years. I am talking about coding which means Computer programming languages. For example, Java, C, C++ etc. It was not easy to understand these languages with proper course or studies. Which means who know these languages he/she can only create websites apps and software. App layout design is different from its function of work.

In today’s post, we will learn how to give the design to any app according to the app.

Surprising facts: Now You don’t need coding for making websites and apps. Its very simple and easy to create apps and websites, Developers have made it easier for people like who don’t even know what programming language is, can create apps now.

Now here we will talk about mobile app development using online services like thunkable and appybuilder. And we will also learn about app layout design.

How to create an app in Thunkable/Appybuilder App Layout design Tutorial

By following this step by step procedure for app layout design interface.

Step 1.

First of all, open your web browsers like google chrome or Mozilla Firefox and open any of the sites from thunkable or app builder. For better learning thunkable is good enough. So here I will be explaining app layout design in thunkable. Creating app layout design is the first impression which you want to show to your viewers.

After opening the site it will ask for login then just log in using your Gmail account.

Now the interface will look like this.

Step 2.

As shown in the screenshot you have to click on the  “create new app” and a window will appear about asking for the app name. You have to put the desired name as you want. Then just click on “OK” and the main interface of thunkable will appear where you have to do all the activities of designing and block writing.

What is Designing?

It is defined as the Interface of mobile screen pages which will appear inside the application. So it will contain all the things which you will enter while designing like buttons, labels, text box, layout etc.

What is Block?

It is defined as the utility which provides a function to the design it means if you have put 4 buttons on the page then what work will be done when these buttons will be clicked. For providing function this block writing is used. If there will be design only and not blocks writing then the app will just open. But after opening app you can’t do anything with the app.

Step 3.

In this section, you can see left side pallet is the which contains many things like user interface, layout, media, sensor, experimental where you can all the stuff required for building up your site in an easier way.

Open User interface and slide down you will find web viewer, click on web viewer and drag web viewer to the preview screen of the mobile screen. It will capture its space according to automatic height and width.

From the right side of the interface you can select web viewer and adjust the height and width according to your choice and you can put home URL  for your browser.

After this, if you want to put buttons to the screen below web viewer then take a horizontal arrangement, set its height to 8 percent and width to fill parent and inside horizontal you have to insert buttons as many you want. for proper fitment of buttons, you have to set height and width to the fill parent.

By using these features App layout design is very easy and in a simple way.

For the complete method watch the tutorial below.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

%d bloggers like this: