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].

Advertisements

Xcode – Images App

Screen Shot 2015-02-21 at 20.35.02

Here is a screen shot of a scrolling image table app that I created in a workshop. I used existing knowledge of table views, arrays, labels and constraints and learnt new features regarding images and parallax scrolling.

I think the app looks okay, but next time I would try using images of similar qualities. I would also experiment with adding more images to scroll through.

It was beneScreen Shot 2015-02-21 at 20.51.22ficial to learn about adding images as we may decide to use images within our app. It is important that the Magna Carta app is not full of lots of text, so the inclusion of images could help to make it more visually appealing and interesting for users. An app full with text could be quite boring and a dull experience for users, so dependant on the aimed audience the amount of text and images will differ.

Screen Shot 2015-02-21 at 20.54.18

Changing the view of the image is also an important features as it allows you to suitably position and scale the images. The layout of an app is important and something I need to take on board for the Magna Carta app. It is essential that users can easily use the app without difficulty and have a good experience using it. The layout needs to be well thought out as well as the ratio of text and images, of which will be dependant on who we aim our app at.

Screen Shot 2015-02-21 at 20.59.57

I added a scroll view to the app, so that you can scroll through various images. This features could be useful and I think it is important to incorporate common touch screen gestures into our app.

Here is the code:

Screen Shot 2015-02-21 at 21.05.53

From this, I will continue to create some mini apps, in order to further develop my knowledge and think of features that we could incorporate in our app to enhance the users experience.

Xcode – Checklist App

checklist appAbove are screen shots of a checklist app that I have been working on in workshops. As you can see, the app displays multiple rows with tasks to complete. If you swipe left on a row, then an option comes up to delete the task, and if you press the ‘+’ button, you can add a new task. Creating this checklist app enabled me to advance my knowledge and learn about new xcode features. I will explain some of the features I learnt and how they will come in useful when it comes to creating our group app.

– Using a table view controller. This is important if we wish to create an app that requires a table. I learnt how to set up an array of items and initiateScreen Shot 2015-02-21 at 17.53.21 them to display in the table. As well as using tableView methods such as numberOfRowsInSection and cellForRowAtIndexPath etc.

– Using if statements, so that if an item is pressed, the tick appears and disappears. As well as if the cell is swiped theScreen Shot 2015-02-21 at 17.56.48 delete button appears etc. Conditional statements are important to learn as they are required in most apps.

– Using delegates/protocols (a blueprint of methods, properties, and other requirements that suit a particular task or piece of functionality). These are important when it comes to creating more complex apps and isScreen Shot 2015-02-21 at 18.01.57 something I need to explore further if I want to become the programmer for our group app.

Screen Shot 2015-02-21 at 18.04.13– Using buttons – this is important to learn as is a common feature in apps. You can apply different properties to the button and connect it up so that when pressed it does a certain action.

Screen Shot 2015-02-21 at 18.06.14

 

I am pleased with the outcome and the app works as expected. To improve, I feel I could edit the colours and fonts to make it more visually appealing and to also make it stand out from existing checklist apps. From this, I feel that I need to explore delegates further in order to develop my knowledge.

Xcode – Facts App

HeScreen Shot 2015-02-21 at 16.27.20re is a screen shot of a ‘running facts’ app that I created in workshops. To access new facts, you can either click on the next/back buttons or swipe left/right across the screen. I am pleased with my first app and although it is fairly simple, I learnt lots of useful techniques. I will briefly explain some of the features I learnt and reflect on how this is important…

Screen Shot 2015-02-21 at 16.34.07

– Adding text labels and connecting them up with the view controller as an outlet or function. This is important as our Magna Carta app is bound to have some text in so learning this is essential.

– Changing fonts and colours. This is important as our app needs to look visually appealing and the use of colours and customiseScreen Shot 2015-02-21 at 16.39.03d fonts will enhance this. The aesthetics of the app are important, so it is essential that the colours and font we use match the style guidance given by Salisbury Cathedral, in order to successfully meet the clients requirements.

-Using constraints. This is useful as it ensures that the Screen Shot 2015-02-21 at 16.46.10layout of the text/images is clearly structured. The constraints mean that no matter what device and whether it is held vertically/horizontally, the layout will remain consistent and adjust accordingly. Having an app that is clearly structured and laid out is important as it makes the users experience more satisfying.

– Using an array of strings. This is important as usingScreen Shot 2015-02-21 at 16.50.49 arrays help to save time when programming. It means the text can be altered easily and the app will run through the array of facts. If the app consisted of Magna Carta facts, then this feature will be required.

– Using swipe left/right gestures. This is important as usersScreen Shot 2015-02-21 at 17.13.23 expect an contemporary app to have common gestures. It enhances the app and makes it easier for users to quickly swipe through the various facts.

Here is the code for the app:

Screen Shot 2015-02-21 at 17.00.18
Screen Shot 2015-02-21 at 16.57.04Overall, I am pleased with my facts app and how it turned out. I like how the text is clear and easy for users to read and I think this is extremely important. I also like the clear layout, and think using constraints is essential in order to make an app look visually appealing. Next time, I would possibly make the font size of the facts slightly smaller, as well as experimenting with different colours behind the title. From this, I feel that it is essential to go on to explore more gestures, such as pinch, rotate, tap and pan etc. These will all help to enhance the users experience and make the app more contemporary.