Initial iPad Designs

Here are some of the initial iPad designs for our app. It is important to consider the designs in both orientations, as users may expect to be able to interact with the app in both portrait and landscape orientations dependant on their preference and how well it suits the screen space.

Portrait Designs: portrait designsLanscape Designs lanscape designs Both designs are fairly simple, with a clear organised layout, this is important as users need to be easily able to navigate and use the app without encountering problems. Apples iOS developer guidelines state ‘Avoid gratuitous changes in layout’ (Apple 2015), hence the layout for both the orientations should remain consistent. We have adhered to this convention by using a similar layout for both orientations, with the use of a clear menu bar. The menu bar in the portrait design, would appear when users swipe left on the screen, or press the menu icon in the top right. The menu in the landscape orientation would automatically appear due to the larger width, but users can be given the choice to hide the menu bar when interacting with the Magna Carta. After making these designs there was a realisation that the menu bar is on the right side (portrait) and then moves to the left when it is in landscape. This is the kind of inconsistency that needs to be avoided in order to make our app more professional.

-simple, clear layout making the most of the limited available screen space
-full screen Magna Carta which the user can zoom into and explore
-use of menu bar and categories to let the user easily filter which clauses are highlighted

-needs to look more like iOS app by incorporating more of their design elements.
-doesn’t use Apple’s button icons
-wrong font used (But this is primarily due to not having the files at this point)

After discussion we have decided that the designs need to adhere more to Apples iOS Guidelines. Specifically, the menu bar needs to look more like an iOS app component, and the addition of a navigation bar at the top is a conventional iOS element that we need to consider. We also need to incorporate Apple’s button icons into the designs, as these will be familiar with users, helping to maintain user experiences of iOS applications. Experimenting with different ways to display the clause information is also something else to consider further.  For example, whether when touched it will slide left across to a screen containing the translation and further information, or if it will slide up from the bottom, or if a translucent box will appear over the top. We will also try out different colours from Salisbury Cathedral’s style guide in order to see which works best, by experimenting with changing the menu bar colour, clause information colour and the colour of which the clauses are highlighted. In the revised designs, we will also use Salisbury’s selected fonts (Eidetic and Quay Sans), in order for it to remain consistent with their existing products for the exhibition. From this, we will go on to improve our designs based on all these refinements.

Apple, 2015. Designing For iOS [online]. Available from:[Accessed 15 April 2015].

Leave a Reply