Prototype 1: We had to design a key part of the project which was the camera activation coding, which in theory would open up the mobile phone camera using the HTML and java coding so users could take and upload photos onto the web page. Here are some of the prototypes of this that we made, note there are several versions which are still being tested in terms of usability.



Screen Shot 2017-03-14 at 01.58.03

Prototype 2:

2017-03-14 12:19:58 am

Screen Shot 2017-03-07 at 13.36.04

Screen Shot 2017-03-13 at 19.33.30


Media Query:


Screen Shot 2017-03-14 at 14.52.48

Screen Shot 2017-03-14 at 15.15.12

Screen Shot 2017-03-14 at 16.04.41

Screen Shot 2017-03-14 at 16.18.45

[UPDATE]: We have now changed the prototype so that when the user loads the page they can see a small version of their Mozaik that they can pinch zoom. As well as this, when they rotate the phone the image will fill the screen and still pinch zoom. This change, in fact, meets the initial wireframe designs perfectly, which can be found here. Now, this has been made, we can start to add the images to the squares. To do this, Josh opened a stock image onto photoshop and applied a grid so that he could cut the image into 12 perfect squares all at 600px squared, which is the size of the divs that will contain the images.


Screen Shot 2017-05-02 at 02.54.36

Prototype 3: Now that we had the main HTML, javascript and PHP functions written for the first prototype, we then had to work on fitting it into the designs we had wireframed as well as visualised in our final interface design.

Below: You can see the coding and continuous testing of the current index.html page which will be renamed to cam.html when the project progresses. At the moment it is connected to 2 other PHP files that organise and crop the uploaded images to a set size (this may need some tweaking though to fit the second prototype) as well as upload the photos onto the server. In addition to this, Josh made a CSS to style the original prototype so that it fits the final interface designs.






Prototype 4: This prototype is a continuation of the previous prototype. Josh converted the HTML and CSS into a jQuery template with a series of jQuery function sheets because making the web pages fit the mobile screens a lot easier than doing it from scratch. In addition to this he has been battling the jQuery code as it is continuously trying to overrun the styling, but in this process, we learnt that we can make my styling more important than the imported automated styling. In the process of this, Josh has been making stylised buttons that when pressed they will change colour slightly to give the user a sense of feedback, this is very subtly subtle but a very important touch needed for this app to feel professional. As well as remaking the prototype to fit the design ideas, Josh made a template for us to use when making the rest of the pages for the app, consequently saving us time and a lot of unnecessary effort.




1 comment

  1. You have had a look at my JavaScript example and have had a go at capturing a camera image yourself which is a great start to prototyping this project, the next step is to decide which script you are going to use and to begin integrating it into a mobile page.
    For this project you may wish to consider using the bootstrap framework to create your basic layout / HTML skeleton to give you some immediately styled form elements such as buttons etc.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s