Things are getting hooked! We are ready to begin with some serious development! We will create all of the screens for our application. However, before we create them, we will create and analyze a mockup so we know what exactly we will create. The mockup will represent the basic application wireframe with no design. It will be just a layout for the screens and the relationship between them. To create a good mockup with wireframes, you will need a tool. Any tool capable of drawing lines will do the job. To draw our mockup, we used Pencil. Pencil is a free open source application providing GUI prototyping.
Let's take a look at our mockup:
As you can see, the mockup presents a relatively simple application with a few screens. There are different components that will be included in these screens, and we will explain these along with each screen. Let's go through the mockup.
The first screen, titled Landing screen, will be our main application screen. Every time we enter...