Conclusion

Future

I did show a few friends and family my app as it was. The most compliments I got were for the colours scheme and the flat ui concept. Everyone like it and grasped the concept of the idea. The app was easy to navigate around and simple to use.

To conclude I think  even though my app is not a completely functional app I have had alot of experience using Jquery mobile and Jquery. This needs to be touched on and expanded in future. I also ink my CSS skills could grow and maybe make more mock-ups and text the mock-ups first rather than diving right into it. 

I will keep practising as I enjoyed the process. I am disappointed my app does not  work because of lack of knowledge with PHP however I'm really happy and proud of the result.

Final

Final

I really enjoyed the process of making an app, as I had never done it before. If I had more time I would have one back to try and sort out the PHP. I would also have gone back to maybe sort out the issues regarding the Gradient on the help page. 

User testing

I carried out some user testing on a number of people

*|See sheets of Usability tests inside project folder

The main issue was to change the colour scheme of the upload page and the help and support. When I attempted this it caused an issue when changing the themes so that it matched the other pages ( except from home page)

Original 

change in data theme

This shouldn't have happened! When I looked at the css rules the gradient had been clearly overruled, however did not apply to the page?

Final ideas and progress

Final idea.

After researching App designs and  and UI designs I found that many of the designs were flat based. From my mock-ups I tried to replicate my idea


PSD:-

APP-

By his point I Still hadn't created a mock-up for the other pages. 

I had a total of 5 pages on the navigation menu. 

• Home
• Profile
• Subscriptions
• Upload
• Help & suppot

All of them will have the constancy of the colour schemes, and have a flat ui based design as much as possible. 

Javascript

My first piece of Javascipt added

After seeing a site called plug-in dj implement it in their Help page, I wanted to do the same thing. This Type of Jquery was a Slide Toggle. 

When researching I, I came across many website but not as effective as this one. With a few changes to the css I got mine to work.

Changing the CSS

I found a way

In order to change the css I found that it was being overruled by the "jquery.mobile-1.4.1.min.css".

Every time i would type in a basic CSS change for example 

h2 {

font-size: 14px;

}

It would get overruled by the Jquery CSS, so I found a was around it i opened up" f12 debugger tool" in IE his way I could select what I wanted to change by copying the script of css rules and placing it in my own, this then cancelled out the Jquery css. 

Example:

Recorded video of me changing the css 

https://www.youtube.com/watch?v=2v1Tc21aFos


Based on my Photoshop mock-up I knew I wanted a Gradient background using my previous knowlege I used http://www.colorzilla.com/gradient-editor/

Images

Images

As a default for the Profile picture I needed to create an image. This is to be used before the user uploads there own image required.

Another part I need to change is the icons that is used on the menu. I looked on the jquery site:

http://api.jquerymobile.com/icons/

I didn't like some of them and so decided to use to flat icons from a pack

I would need 5 icons in total.

Home

Profile

Subscriptions

Upload
Help and support

Logo

For my logo  I decided to for something simple as a text logo. I named the app " SoundStream" as a demo.Which eventually stuck.