A wireframe is the basic skeleton of an application or website. It gives an idea about how the final application looks. It basically helps to decide navigation flows, understand functionality, design the user interface, and helps in setting the expectation before the application even exists. This process greatly helps developers, designers, product owners, and clients to work in a synchronous manner to avoid any gap in between. We will follow the same model and we will design various wireframes of the application as follows.
Designing the wireframes of application screens
Country listing page
We will make it simple. The home page shows the country list with pagination, and allow searching by country name and filtering by continent/region. The following would be the home page of our application:
Country detail page
This screen will show details of the country such as cities, languages, and the GDP information obtained from the World Bank API. The GDP data will be visible in a graphical view. The page looks as follows:
Country edit page
In country listing page, there will be one button called Edit. On clicking it, the system will show the country in edit mode, enabling the update of the basic details of the country. The following is the view structure for editing the basic detail of a country:
Add a new city and language
In the country detail page, two modal views, one for adding a new city and another for adding a new language, are available by clicking on the New button. The following is the view for the two modal dialogs used to add a new country and language. They will be opened individually:
