The making of an app – the King’s app
App Building Liz Bollema 19 Apr 2013
Important events tend to create a need for information. It’s not everyday that you have the opportunity to experience a succession to the throne. So here it is; the Koningsapp (King’s app). Everything you wanted to know about the upcoming abdication and succession happening April 30th, 2013 as well as more information about the royal family and its history is now available at your fingertips.
You may be wondering how this app came about. Where do you start when building such a meaningful app? Which blocks do you use in an app like this? Here we’ll outline the steps taken to build the Koningsapp.
Information in the app
The first steps in app building generally outline what exactly will be featured in the app. After a brainstorming session it quickly became apparent that the app would require including a great deal of information. A program for the day’s events was a must and information about the abdication, the king and the boat ride on the IJ could not be missed. The app would feature palaces, birthdays, profiles about past monarchs, Maxima’s dresses, and integrate Twitter and news feeds of the royal family. All together a long list of interesting information about the royal family and our future king.
Due to the large amount of features, the app’s menu had become quite the laundry list. That’s why we ultimately chose to group these features logically by including submenu’s to contain related features.
This is the result:
For each feature we decided which block served that feature’s needs the best.
30 April > Program
An “Events” block lends itself perfectly to the task of displaying the time and place of the events that are to take place on that day. In this case, we entered the pertinent information directly into the AppMachine CMS.
30 April > Abdication
We wanted to explain what an abdication is and means. The “Information” block is perfect for this. We included our text and an image to illustrate what we were talking about.
We found several news sources with RSS feeds featuring information about the royal family. We used these feeds in a “RSS” block.
We had a lot to say about the king. Once again, we chose to use the “Information” block. We collected a series of images that we wanted to include in the app and added them to the AppMachine CMS by means of a “Photo” block.
The “Twitter” block is linked to the tweets made by the royal family.
The birthdays of members of the royal family were manually added to the AppMachine CMS in an “Events” block. The former monarchs were profiled in a “People” block. A “People” block gives you the option of listing phone numbers and email addresses. We decided it would be best to leave these empty in this case. 😉 Not all fields are required in this block and leaving them blank won’t display the entire field in the app.
The palaces are featured in a “POI” block so you can see where each palace is located. Because we activate the “Display images in popup” option, you get to see a nice image of each palace on the map of the Netherlands. We also linked the royal family’s YouTube channel to a “Video” block.
The jokes featured in the app were entered in a “Products” block and photos of Maxima’s dresses were uploaded to a “Photo” block. Which dress will she wear April 30th?
We had a content structure and we had the content. Now, all we needed was to work on the app’s design.
We knew from the very beginning that this app would need to feature several shades of orange. We ultimately chose some decidedly royal colors to include in the Koningsapp. These were set under “Design” > “Settings.” We chose a palette of soft colors that exude grandeur. Only the the image in the navigation bar is a bright shade of orange.
In a “Designer” app you can choose to upload you’re own buttons.
We placed a picture of Willem-Alexander in the main menu and a small crown as the logo in the navigation bar.
We gave each submenu its own top image (640×220 pixels).
These images are transparent around six recurring circles that feature images specific to that submenu. This creates continuity in the submenu design but also allows a certain uniqueness to each of them. By choosing fade transitions between screens this creates a nice effect. Each individual menu was also given its own background image that related to the content being shown.