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.

Advertisements

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.

Magna Carta Initial Research

What is the MagnaC-Salisbury-BRMagna Carta?

The Magna Carta is a legal document that was signed at Runnymead on June 15th 1215. It was issued by King John, guaranteeing certain rights to his barons. Salisbury Cathedral contains one of only four original copies, and 2015 will mark the 800th anniversary of the signing of the Magna Carta. It is one of the most celebrated documents in English history and has become recognised as a cornerstone of liberty influencing much of the civilised world. The Magna Carta is famous as a symbol of justice, fairness, and human rights.

Screen Shot 2015-02-15 at 17.07.15

Salisbury Cathedrals link to the Magna Carta: 

Salisbury Cathedral’s Magna Carta is the best preserved of the four remaining original exemplars. It is displayed in the magnificent 13th century Chapter House of one of Europe’s most beautiful medieval buildings. Elias of Dereham, priest and steward, bought the copy to Old Sarum in the days following events at Runnymede and it has remained in the Cathedral’s care ever since.

800th Anniversarsalisbury-cathedraly Celebrations:

Salisbury Cathedral will re-display and re-present its Magna Carta in an exciting interactive exhibition in the newly-conserved Chapter House, using the latest interpretation techniques to communicate Magna Carta’s historic background and modern significance to the many extra visitors it expects to welcome in 2015.

Requirements For App:

-must be feasible
-must be linked to the Magna Carta in some way
-style guidance – maintain consistency throughout app components
-follow branding guidelines
-clearly target an audience (children 5-10, teens 10-18, adults)
-ask for existing assets and make own

It is important to carry out research on the Magna Carta as it is the topic for our apps. It has developed my understanding of the Magna Carta and visiting Salisbury Cathedral will enhance my knowledge further. Creating an app with no background research would result in the final product being unsuccessful, so by carrying out research it means the app will be more reliable with correct information regarding the Magna Carta. This is extremely important as there would be no point producing an app that gave users incorrect information about the Magna Carta. It is also important to understand how the exhibition will work within the Cathedral, the layout, colour scheme and existing media that theevidence-based-design-research-2y are exhibiting etc. Visiting Salisbury Cathedral and gathering information about the public space and its audience will also help us to develop app ideas in order to successfully create a valuable app for the exhibition. Understanding and complying to the clients requirements is crucial as this is a live brief where we are working as design agencies for real clients. Following clients requirements will ensure that the end product is more successful and valued within the 800th anniversary exhibition.

We will be visiting Salisbury Cathedral next week, where I will collect more information and analyse the public space and audience. We will also be receiving preparations guides and style guidance documents from clients which are vital to understand and adhere to throughout the development of our apps.

Salisbury Catherdral, 2015. Magna Carta [online]. Available from: http://www.salisburycathedral.org.uk/magna-carta [Accessed 4 February 2015].

Salisbury Cathedral, 2015. Engaging Exhibitrs Reveal Salisbury’s Magna Carta Story. Available from: https://www.youtube.com/watch?v=6iboHtKczuw [Accessed 4 February 2015].

Prototyping

prototyping2A prototype can be described as 

‘An original type, form, or instance serving as a basis or standard for later stages’ (The Free Dictionary, 2014).

Creating a prototype relates to the iterative design process as it allows you to gain feedback and then make refinements and improvements. It is a stage where you can engage with the users and analyse whether the piece is easy to understand, engaging, suitable and whether or not it is successful or not. It is a useful tool in order to evaluate user experience and can be very beneficial in order to produce a successful final piece. Beaudouin-Lafon and Mackay suggest that 

‘Prototypes both inform the design process and help designers select the best solution’.

They propose four ways in which to analyse prototypes:

  1. Representation (form of prototype eg. paper/computer, offline/online)
  2. Precision (level of detail eg. formal/rough)
  3. Interactivity (how user can engage with prototype)
  4. Evolution (life cycle of prototype eg. iterative/throw away)

I feel that creating a prototype for my piece would be beneficial as it would allow me to fully show my ideas and directly engage with the users, hence following an iterative design process. As I don’t have enough knowledge of processing yet to create a rough programmed piece, I feel that creating a rough paper prototype could be suitable. Here is an example of a website usability test using a paper prototype:

As you can see, a paper type is just as beneficial and in this case it has allowed the designer to understand more about the users and how they would understand and experience the website. This example has also highlighted to me the importance of properly testing the prototype, and as Bramhall (2014) says

‘Testing a prototype is equally as important as prototyping a design in the first place.’

When testing a prototype, I should ensure that I engage with the target audience and ask suitable questions in order to help me improve and make my piece a good interactive experience for its users.

Beaudouin-Lafon, M and Mackay, W.E, 2014. Prototyping Tools and Techniques [online]. Available from: https://www.lri.fr/~mackay/pdffiles/Prototype.chapter.pdf [Accessed 23 October 2014].

BlueDuckLabs, 2010. Example Usability Test With A Paper Prototype. Available from: https://www.youtube.com/watch?v=9wQkLthhHKA [Accessed 23 October 2014].

Bramhall, D, 2014. The Importance of Prototyping Your Designs. Creative Blog. 20 August 2014. Available from: http://www.creativebloq.com/netmag/importance-prototyping-your-designs-81412694  [Accessed 23 October 2014].