Over the past couple of weeks I’ve been taking all the research, wire-framing and prototyping work I’ve done and pulling it together into a mock up of my final application. I chose to do this in illustrator, which I’ve began using more and more lately so I’m improving my skills in that software throughout the course of my modules.
To begin I worked on the home screen (Fig. 1), creating a small logo to brand the app and using the colour scheme of blues and greens I previously decided on. As with during wire-framing, I found this mocking up process highly beneficial as I began to see where there really should be buttons and interactions that I didn’t previously think of. This has resulted in me including a navigation bar in my app and a side menu that pops out. As I was putting in the images I realised having the date selection down the left hand side wasn’t aesthetically pleasing and wasn’t a practical place to have that interaction as it could be easily pressed by accident while choosing an image. This navigation bar also allows for me to have another way to get back to the previous page (through back buttons), rather than relying solely on the user to understand the gestures. Gestural interactions tend to be something slightly more advanced users of IOS technology use and understand so it’s important to have multiple ways to perform the same action – this stemming from the research I blogged about previously.
Again using my previous research I’ve also changed the interaction in the home screen for going through the images. Rather than scrolling up and down as I’d originally planned, the user will swipe left and right, with the circles along the bottom (a standard IOS feature) indicating what page of images you are on. I can’t stress enough how many issues this has caused me. Initially I coded in a swipe gesture, before realising without being able to see the items move from screen to screen it lacked any sense of flow or movement. So I decided a scroll view would work better, as you would see the images sliding across. However, for some inexplicable reason despite following multiple tutorials, checking I had the exact same code as other people working with scrolls and trying to change every tiny detail within xcode, it took me a whole day (and I really do mean it, it was 4 hours on the same two lines of code) to get it working. I couldn’t even tell you what was wrong, all I can say it was the most painful and stressful thing I’ve had to deal with so far; and i’m only on the coding of my homepage!
Moving on, once a tag has been selected the others grey out to indicate you are viewing only that topic and not all. From there, you select the image you wish to view poems relating to and they appear on screen. Once a poem has been selected you can view the poem and image, and all tweets appear at the bottom for you to view and add your own. Now that I’ve got my app onto my iPad, I’ve also realised the menu along the top is too big and they don’t look like items you can press, so that’s another thing that is going to change. Getting my work onto my iPad is great as I can really feel what works and what doesn’t. I’ll add more images as I make progress, right now it’s time to get back to illustrator and fighting with xcode.