Final Designs

Here are the final designs for our Magna Carta application.

Main Screen – features a zoomable high resolution image of the Magna Carta. The clients wanted the Magna Carta document to be a main component of the app, hence we have clearly adhered to their requirements. The design features a simple navigation bar, whereby users can click the burger button to access the menu in order to filter the overlays.

main-screen1.png

Menu – the menu design is very clear and simple. Each category is accompanied by a relevant icon, using iconography really  helps to make it more appealing for users and is also a common convention of iOS apps. The menu bar has a scrolling gesture allowing you to further filter the clauses by the various different categories.

menuscreen1Clause Details – the translation and contextualisation of the selected clause appears in a translucent box that slides up from the bottom. It is clear and easy for users to read and the Magna Carta document is still the prominent feature.

clause-details1.pngOverall, we are pleased with the design of our app, the simplicity really helps to make it easy for users to use and navigate without difficulty. The design is sophisticated and professional looking, which has been achieved through adhering to Apples iOS conventions, as well as Salisbury style guide. The designs show creativity and originality, especially within the category iconography. In the next design post, I will clearly discuss how the designs have met the assessment criteria.

final-designs.png(designs by Kaylee)

Advertisements

iPad Designs

screen-shot-2015-04-24-at-15-42-51

screen-shot-2015-04-24-at-15-43-22screen-shot-2015-04-24-at-15-43-36(designs by Kaylee)

Here are our amended portrait iPad designs. Following improvement from the previous Design Experiments posts,  we have altered the proportions to make them more suitable for the iPad, by changing the text and icon sizes. We choose the dark brown and gold colours from the cathedrals style guide, as they complement one another, with the gold font on the brown menu bar being really

Screen Shot 2015-05-01 at 14.35.11clear and easy for users to read. The use of the colour gold also helps to symbolise the status of the Magna Carta as a significant, highly influential document. The off-white icon colour also stand out against the dark brown and are clear to view and understand. We improved these from the previous designs by making them all outlined with a consistent stroke weight. However, the current icons are taken from the internet so to avoid copyright issues and enhance originality and creativity, we are going to make our own icons to use, adhering to Apples suggested icon conventions (size, stroke weight, appearance). The simplicity of the designs helps to make the app easy and straightforward for users to use to view the Magna Carta clauses, this is important as a complex design could make it complicated for users and hence would not be very successful. We want our app to be intuitive, whereby anyone in the Magna Carta exhibition can easily use it without difficulty. From this, we have decided to further experiment with the clause overlay colours. Due to the vast amount of clauses, some of them will be situated on the same lines, therefore differentiating between the clauses could be difficult. To overcome this problem, we are thinking of alternating using two different colours for the overlays. This would make differentiating the different clauses clearer for users, we are going to experiment with changing the opacity of the existing colour, slightly changing the colour, or possibly using one of the other colours in Salisbury Catherdrals’ style guide.

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 Designslanscape designsBoth 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.

Pros:
-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

Cons:
-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: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/[Accessed 15 April 2015].