User Interface Design - App Templates and Settings Screens

In my first blog post here, I discussed using a hidden settings screen to hold centrally certain attributes for our application so we can change them in one place, and affect multiple areas of the app.  In this post, I'm going to start adding some of the ideas I've developed in user interface design and layout to produce attractive applications that hopefully our users will enjoy using.  The aim is to produce an application template with my house style such as colours, fonts etc. already in place, as well as boilerplate components such as banners, buttons and screens.  I'm plan to document in this blog the process of building this template as I go, which means it is likely that aspects will change and adapt as I go.  I hope following my thought process will be of interest
Let's start with a blank application with 2 screens, we'll name these scrLandingScreen and scrSettings.  While this second screen is used only by app builders and editors I still like to put some time into the look and feel so that I can start using this application as a template for all future applications I build.  For a starting point the settings screen looks like this


The msapp file for this stage can be downloaded here.  There is a lot of properties for these items that are dependent on other items, I'll go through some of the key points now
  • Icon Padding - This value is the spacing that will be used between objects laid out on a screen to give a consistent distance between them.  This can be seen in use between the colour palette blocks
  • Block Size - This value is a standard size for UI components.  This is used here for the size of the setting labels, and the size of the colour palette blocks.  It is likely I will add another block size setting to give a large/small option at a later date.
  • Primary Font - This is the font that is used through out the app, the text field of the label which is used to store the font is set to be the fonts name.
  • The colour palette holds my company's five brand colours.  Most organisations have a standard set of colours that are used to deliver a house style.
  • The positions of most objects is set to be relative to anchor objects.  Generally I will create a background rectangle, make the first item in the top left corner relative to that background, and all subsequent objects relative to the object above and to the left of itself.
I would suggest exploring the application as it is to get a feel for this approach.

Let's add same standard screen design.  When building applications, I like to have a standard banner along the top of the screen with the application name displayed, and other common information that is appropriate to the app.  I want to define as many of the settings for this in my settings screen so that when my application has grown large and complex with many screens, I can adjust these settings centrally and avoid having to edit each screen individually.  The key settings I believe we should have will be
  • The height of the banner
  • The colour of the banner
  • The text on the banner
I'll create another group of settings for these, tidy up the layout and put in some headings to clarify what the groups of setting are.  My template app now looks like this.


The msapp file for this stage can be downloaded here.  Again, I'll go through some of the key points now

  • The Application title text is set.
  • The banner bar size, which will be used as the height property is set here and also used for the size of the blank banner bar in place at the top of the screen,
  • The banner colour is set, again this is another rectangle colour from a choice in the palette.  Having this additional layer of abstraction means I can point this setting to a different choice in the palette and all my banners will change.  Without this I would have to change all my banner properties to point to a different colour in the palette, or edit my palette
I like to have a different configuration of banners for sub sections of my displays, such as the settings title labels and for banners to head galleries, which I 'll come to later.  This will give a clearer division between sections, so lets add an additional settings group into the app


This is starting to look how I imagined.  The layout is clearer and the settings for properties such as sizes and colour fade percentages are all working.  The top banner with the application name gives a clear heading, and when duplicated across all screens in all applications we develop for the business will give a consistent and corporate look and feel.  This is obviously a fair amount of work but once done gives an easy starting point for all apps so will pay off in the long run, both in time invested as well as ensuring consistency.
The msapp for this stage can now be downloaded here.

In my next post which I hope will be written in the next couple of days, I will add buttons to the banners for navigation, and create some button templates I can reuse as required throughout the application.

Comments