Design: Meeting Intended Learning Outcomes

This post discusses how we have met the intended learning outcomes within the design processes.

Creativity: Throughout the design processes, we have been creatively thinking of appealing ways to visually produce our application. Lots of design experimentation was carried out, with many beneficial amendments being made along the way. We aimed for our app to be intuitive and easy for anyone at the Magna Carta exhibition to use and hence the simple sophisticated final design helps to achieve this. We creatively experimented with using a range of Salisbury Cathedrals style guide colours, in order to see which colours worked best on our app. We choose the brown and gold as the main colours for our app as they were the most aesthetically appealing, complementing one other well as well as signifying the importance of the Magna Carta document. Additionally, we experimented with different creative ways to display the clause information when it an overlay is selected. Coming up with a few ideas: on a new screen, pop up box or sliding up from bottom. We choose to have a slightly transparent details box sliding up from the bottom of the screen, this arguably can be regarded as an Apple convention as it is used on the iPhone. A prominent design feature in our app that highlights our creativity is the iconography  within the menu bar. We had to creatively think of inventive yet understandable ways to visually represent each of the Magna Carta clause categories. An example is the ‘all clauses’ icon, it is a feather quill writing, this is inventive as we have related it to the Magna Carta and the way it was written in 1215. Some other icons which emphasise creativity could be feudal and justice, they are quite unique and show that we thought outside of the box to come up with the inventive icon designs.

Originality: Our app and the features it offers users are original ideas that we have developed over the course of the project. We have tried to be original within our designs but at the same time have adhered to conventions in order for it to suit other iOS apps and hence live up to iOS users expectations. The use of categories filtering is a original feature, that we used to clearly enable users to interact with the Magan Carta. Without the category filtering technique, the document is covered in overlays, making it look less aesthetically appealing and also more confusing for users. Initially, the icons used to represent each of the categories were taken from the internet. However, to avoid copyright issues and to enhance creativity and originality we designed our own. Designing our own original icons was advantageous, helping to make our app more unique and memorable to users. Due to this being a live brief with clients, we were limited to the extent to which we could be original as throughout the design processes, we had to ensure our app suited the clients requirements. Also, we had to adhere to Apples conventions to maintain iOS users expectations and thus originality was further restricted.

Conventions: Our app adheres to Salisbury Cathedrals style guide, having distinctly used their chosen colours and fonts throughout, ass well as using their Magna Carta logo within our navigation bar. This is extremely important as it ensures that our app will fit well within their exhibition and maintains consistency throughout their other products. We have also adhered to Apples iOS developer guidelines throughout the design processes. This is extremely important due to producing an iOS application. We have followed Apples conventions with the sizing of design elements including navigation bar, menu, icons and font sizes. We have used the conventional apple menu button (burger shaped) within our applications. Users will most probably have existing knowledge on Apples icon and thus the icon will be readily understood. This is important as if users don’t understand what it means, they may not click on it and thus the menu bar will not appear for them to easily filter down the clauses on the Magna Carta. When creating our icons for each of the categories we further followed Apples guidelines, helping to make our icons look more professional. Apples suggestions was consistency throughout the family of icons, we achieved this through using the same size, colours and stroke weight. Although some icons can be regarding as inventive and unique, others can be regarded as quite common such as the ‘key clauses’, ‘women’ and ‘jews’ icons. Apples convention are that icons are outlined and then when selected they fill. We adhered to this convention by designing unselected and selected icons, however did not have enough time to incorporate this feature. Following conventions could again be seen as limiting design creativity and originality, however it extremely helps to make designs more professional looking and hopefully more successful with both the clients and users.

Professionalism: Our final design is sophisticated and professional looking, the simplicity making the app clear and easy for a range of ages to use and understand. Searching and adhering to Apples conventions portrays that we have been a professional agency, designing a suitable app to fit the iOS market and maintain user experiences. We have also been professional in regards to our agency -> client communications throughout the project. Keeping clients updated on the progress of our app and always following their suggestions. A main example of this is the ‘hidden details’ category that the clients strongly recommended and thus we included this within our app, showing the intriguing, random things about the Magana Carta document. As an agency we have been professional by assigning job roles and tasks. Following an agile methodology, we used trello to create and assign tasks and follow how individuals are progressing. Communication between the designers and programmers was strongly maintained throughout the project, which is crucial as programmers needed to know what to visually program the app like, and what colours and icons to use. Working on a live brief has extremely developed our professionalism in working within an agency and thus will be useful when going to work in industry.

Advertisements

Design Guidelines

As we are producing our app for iOS devices (iPad, and possibly iPhone), it is important that we look at Apple’s iOS development guidelines. This ensures that the app we produce would be suitable for the iOS market and that it adheres to conventional iOS themes. ‘Although crisp, beautiful UI and fluid motion are highlights of the iOS experience, the user’s content is at its heart’ (Apple 2015). We plan to create a simple and well designed information based app that will allow the user to quickly and easily access relevant content related to Magna Carta. After reading through the iOS developer guidelines, we picked out some of the most important iOS themes to consider in our app designs:

  • Translucent UI elements – we could consider this so that when users taps on a clause, a translucent overlay appears with more information regarding the selected clause.
  • Use of negative space – it is important that we use plenty of negative space within our app in order to make it clear and easy for users to understand. We have to consider not putting too much information over the Magna Carta image as it could easily be overwhelming for the user.
  • Simple colours – using the Cathedral’s style guide, we will use their chosen colour scheme in order for our app to be consistent with existing products.
  • Ensuring legibility – we will use the font suggested by Salisbury Cathedral (Eidetic), at a suitable, easy to read size.

It is important to also be aware of the basic UI elements in order to help us make further decisions about the design of our app.

screen-shot-2015-04-08-at-16-14-41.png

  • Bars (navigations/tab) – contain contextual information that tell users where they are and controls that help users navigate or initiate actions.
  • Content Views (collection/table views) – contain app-specific content and can enable behaviours such as scrolling, insertion, deletion, and rearrangement of items.
  • Controls (buttons/sliders) – perform actions or display information.
  • Temporary Views (alerts/actions) – appear briefly to give users important information or additional choices and functionality.

Using conventional iOS gestures is also essential and something we need to consider when creating the design of our app. ‘Using gestures gives people a close personal connection to their devices and enhances their sense of direct manipulation of onscreen objects (Apple 2015). Some of the common iOS gestures that we could incorporate into our app include: tap, drag, flick, swipe, pinch, and double tap.

It is also important to use Apple’s built in features (UI elements and gestures) due to the time constraints we have to make the app in. Given our current skill level, it is essential for us to stick with what we’re familiar with and are being taught so that we can produce a fully functioning, and hopefully aesthetically pleasing app before the deadline. Creating our own UI elements can be far too time consuming and difficult for us, and will only be done if it is essential for the app to function.

Here is Salisbury Cathedrals Guidelines that we were given. We will adhere to these within our app through using their chosen colour scheme, fonts and existing graphics. This is important in order for our app to be consistent with their existing products for the Magna Carta exhibition.

From this, we will go on to create some initial designs for our app taking on board the above Apple and Salisbury Cathedral guidelines.

Reference:

Apple, 2015. Designing For iOS [online]. Available from: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ [Accessed 6 April 2015].