toolsandsystems:

Final run through of this test. I think the UI layout that I have chosen means that I achieve my own original aim of making the individuals, through the images, the most important thing. Whilst sticking to the aim given in the brief to  ”Represent information or data in a creative visual form that expresses a narrative to an audience." By having all the images on screen constantly I make it easy to compare categories, you understand them in context against the other categories. The main thing now is to design a side navigation bar that meet the aims outlined here. Chose a typeface that will also suit these aims and then create each individual page in InDesign, ready to begin building the app. I don’t I will have enough time to create enough pages to have as many categories as I originally intended. So I will reduce it to location, and cause of death. Developing it beyond that if I have time.

toolsandsystems:

Went to test, could navigate through every sub-catergory except the last one. The error message in the top image shows that it was failing to find the frame. Checked the code first and everything was correct, found the problem was I’d misspelt the name of the Frame. I need to take my time as I build the app, to save having to find and fix errors at the end. Also need to test constantly as I go along.

Bottom Image, the button now works correctly.

toolsandsystems:

Each page exported from InDesign as a .pdf. Imported into Flash, each page then put on a keyframe. File names structured in a way that is short, but will make sense when coding. Making it easy to follow and to fix problems. i.e. loc_helmand_pg = category_subcatergory_page. 

Each frame is then given a title match the name of the page on that frame.

Next I made some quick buttons for this test. As I did before here, using this tutorial.

Then named the instance name for each button i.e. loc_helmand_pg_btn . Keeping the names of anything relating to a particular page as simliar possible to make it easy to follow and keep the structure ordered as the app becomes more complicated.

Now starting to write the code. Using the same button code as I have before, its just a case of changing parts of it. For example the instance it looks for, and the frame it leads to.

By keeping the way I name things very similar writing the code will be quicker because I only have to change one or two words each time.

Code now written for every button.

toolsandsystems:

I mentioned in this post that “The interface needs to be simple, it has to look beautiful, but stay in the background." So I decided against having unselected images in B/W, in favour of dropping their opacity. I think this gives a softer, calmer feel. When a category is selected (in this case Location) it will open to all images at 20% opacity, when a sub-catergory is selected (here Helmand) that category then becomes 100% opacity. I need to go back into the original InDesign files and refine some box edges, because  with the opacity reduced you notice where some overlap. Also I missed one of the images when resizing. Next I will take these into Flash and do a trail, to give myself and idea of how the app is going to look as you navigate through.

toolsandsystems:

Using InDesign, I created a document the size of the area that will contain the images, then split this into a document grid of 450 30px by 42.66px squares. Each one of these squares then frame put into it. Then dropped each image in, organised into categories. In this case location. These where then resized to fit the frame.

toolsandsystems:

Whilst searching for source that I could use to double check the images, I can across the BBC’s information on military deaths in Afghanistan. It was a quick way to check my images against theirs. I can also use the data visuals they have, as a way to check I have the right amount of people in each category etc.

toolsandsystems:

The first stage in moving from designing the layout to the final look of the app was to gather an image for each soldier. I thought I had made sure the image I saved was alway the correct one for the soldier. But then realised at least two where the same, I think other websites had mixed images up, or not had an image so used another. I need to triple check every single one. I can’t build the app, only to find a deceased soldier has the wrong image.

Style Aims

toolsandsystems:

The people are the most important part of this app. I need to avoid cliches, military metaphors. The interface needs to be simple, it has to look beautiful, but stay in the background. The app is about the soldier that lost their lives, not an all singing all dancing, rainbow coloured interface. It needs to be subtly beautiful. It need to create an environment around the images that is completive, a space you can reflect in. 

(Source: toolsandsystems)

(Source: toolsandsystems)

(Source: toolsandsystems)

toolsandsystems:

Trail of turning image from b/w to colour. The easiest way to do this is have two versions of the image, on b/w one colour. Each on separate frames, with the button take you from one frame to the next. Create the effect that the colour changes.

toolsandsystems:

This is a layout I think will work, there continuity throughout each page ensuring that the app not only looks good, but is also intuitive to use. The user shouldn’t have to search for any button at any point. I think I’ve found an effective way to show every individual without reducing them to nodes. Sticking to my aim to get across the human story, that this data is about individuals, not numbers. One problem may be that fitting 444 images onto the iPad screen at the same time may reduce them to a tiny size. I could extended the group of images of the right hand side of the screen an you can scroll through them left to right. I now need to look at how to change the images from B/W to full colour, and how to use gestures to create the scrolling left to right for the images, and finding a code that does this, or can be hacked to do this. I also need to start looking how what the style of the app will be, beyond just my current basic layout. How I create a style that relates to the topic whilst remaining simple. A lot of my research the interfaces had the appearance of being complicated, just purely to create a ‘military’ style.

toolsandsystems:

Showing the difference between categories, contrasting them against each other, by having the images B/W, and all on screen constantly. When a category is selected the images in that category become full colour. Making it easy to compare categories on understand the data.

(Source: toolsandsystems)