How to design HTML5 app using Ionic Cordova : Part 2

In this post you will learn, how to basically design an html5 app using ionic . Later on in the next article you will also learn to integrate cordova so that you get the functionalities.This can be exported to other platforms like android, ios etc.
Also refer : Ionic HTML5 Basic concepts

NUTSHELL:

  • HTML 5 is the used for making hybrid mobile apps, that can be easily exported to any platform.
  • Here i am showing how to make a basic front end design using Ionic.
  • Later on we can modify the HTML files to customize accordingly.

 

LEVEL 1 [BASIC]:

  1. Ionic is the good open source front-end SDK for developing hybrid mobile apps with web technologies. Login/Register  to  ionic app creator. Free user account is enough for developing basic GUI.
  2. When you login you will see the following screen . Click on New Project.You will be asked to select a preset. Select login.

First page

3. You will be seeing something like this . Play around with all the features.

design page 1

4. You can add more pages, For eg :- Sign up page.

desing signup

5. You can change the button styling and add button links .

set link

6.Basically change the layout parameters of a button.

button desinging

7. Create another blank page . Add Button bar, List with Thumb nail , Search bar etc.

menu page

8. You can preview the pages by using the eye icon.

desing preview

9.You can also pin the default/ main page for the app.

pin default

10.Export the files as Zip

export

export

Finally you have made the basic layout for the APP.