#kib216

Isaac Joekong n7543719 THURS 12-3

Scores is a HTML5 web based mobile app for Windows Phones. Scores allows the user to keep score of their favourite sports with this app. No need to download anything and no need to go to a new app for each sport, this does it all in one.

Using HTML5 CSS3 and jQuery/Javascript, Score recreates the Windows Phone experience in the browser so any mobile can get a taste of good design.

HTML5

Geo locations

Header tag

CSS3

Custom fonts

borders

jQuery/Javascript

Codaslider

Innerfade

Counter

Field Generator

Google maps

The app is designed for anyone who tends to player the sports in the app or anyone who needs a scorecard. The interface is as simple as possible so there is no learning curve at all and just about anyone with a smart phone can pick it up.

I decided to give the different pages a background image to give it a more dynamic and professional feel as a plain black background seemed plain and too basic.

I wanted to design an app that simply give users the ability to record score with a nice clean interface. I felt I manged to replicate the Windows Phone interface and the app functions basically as I wanted it to.

I would have liked to have the option to give the titles an animation for page transition like the Windows Phone, I know you can get a page transition with jQuery, but I could not find anything similar to the effect I wanted. I also know that transitions slow down navigation time so I left it out. I also would have liked to have a ability to use gestures. I looked into Sencha, but they only had the support for Android and iOS so the transitions and gestures would have just looked strange.

Here are each of the pages as seen in the Windows Phone emulator.

I've tried to keep it the same as the normal single page apps

Since I can't add a pivot function I got the same effect with the jQuery plugin Coda slider and I added a map function down the bottom so players can see where on the course they are.

A basic layout, I added a few lines of javascript so the player can select the server while at the same time deselecting the  other player.

Since there was no room for the + and - buttons I added it so the user can select the numbers and change it from a drop down list. I was going to be a <input="numbers"> field so players can enter any numbers, but IE9 doesn't support this so it became this.

This page allows users to select an amount of players and add a generic score to them. Using javascript, users can also add more players but generating more fields.

Once I got the basic style of it I made the style guides, based on the Metro UI

So I have done a few wireframes of the app to get the feel of the interface in there.

I've tried to make it look as much like an app for the phone as possible.

When I looked at the Marketplace I noticed that most of the sports apps were for either scoring for a single sport or were just ports from another OS. So my app needs is different in the fact is combines several sports into the one app. Should it be on the actual system, the app would save time, space and possibly money as it works as an all in one. Also since it's a web based app it can run on all the OS's and doesn't need to be downloaded.

For this assignment we needed to create a web based HTML5 app for mobile devices. As I've done time and time again I decided to make this app for the Windows Phone platform.

Windows Phone Apps

Since the app is going to be based around the Mircosoft Metro UI, we first need to take a look at how they lay their apps out and how they work.

The Windows Phone interface is all about large typography and no fussy gradients and 'Gel button' elements, just flat colours with large 'Tiles' instead of icons. These apps work similar to other OS's as they make sure they all have the same feel across all of the platform. This is what I want to achieve, a web app that mimics the phones interface and feels like an extension of the OS rather than an out of place fancy app that you'd see on other OS's.

When coming up with topic I decided to do one for sports, as it would be something that I would use often and covers a wide range of uses rather than a single niche use. When looking at other sport apps on the phone I noticed that they were all for a single sport or were ports from the other OS's and didn't fit the style guide.

 Metro UI

The Metro UI is the new style guide that Mircosoft is begining to use across all their mediums. The idea behind it being that the content should come first, rather than just be another feature.

When designing the app I'll try to say with in the UI bonds as much as I can so it stays in line with the guides. It's a nice clean break from the dated iOS and copycat Android interfaces and offers us a new and innovative approach to smart phones.

Web Design

I also decided to do a splash page for the app, even though it was required anymore. Keeping it simple and in line with the whole metro feel is what I hope to create.

Device

Timo Kuilder

http://www.zwartekoffie.com/

  Timo is a designer from the Netherlands and has created a dynamic Flash powered folio. The site uses the full power of flash to provide animations a menu system that other scripting languages would not be able to achieve (at least not without extreme difficulty.) The site is not only designed to show off his portfolio to clients and potential customers, but also to fellow designers with an almost over the top folio to help set himself apart from the other designers. Because the site is in flash, it won’t work on some mobile devices and this limits his ability to expand and show case. While I’m a supporter of flash sites I don’t think this is a path I’ll go down.

What I like most about this folio is although the mechanics are above me; the design is clean, simple and flows together well. The use of a gradient background and solid graphic elements is a style that I follow with my designs. From this folio I can only gather design inspiration, however the navigation system is something that can be achieved in jQuery and javascript and something I’ll implement into my own site.

Zach Bush

http://zachbush.com/

  Zach Bush is one of my favourite illustrators and his portfolio follows a style I enjoy. Zach’s site is plain, simple and to the point. His folio is basically a one page site. He could have made it one with the help of jQuery, since the second page changes only small detail. Aside from this the page is his portfolio with a lightbox gallery with nothing else. The images and work he’s done is front and centre with little to no text anywhere. His style and design is a simple grid layout with everything squared away neatly without any fuss.

What I like most about his folio is how simple it is. Like the other site I’ve listed here its designed to showcase his works rather than himself. The idea of using thumbnails of the images that then are displayed in a pop out is something I’ve put in my own design. The contact page is simple and navigation is even simpler. It makes the whole page and the ability to view his works and get in contact so very easy. Using his folio of works as the pages design elements helps it to all follow together and create the Zach Bush experience

Peter Jaworowski

http://hejz.com/

Peter Jaworoski has an amazing portfolio and his method of displaying it is equally as good as its content. Like the other sites, it is simple and clean. The site uses a grid system for displaying his work and text. The site uses a gradient background that flows onto the graphic elements itself. Selecting each work brings up a new page with zoomed in details and sometimes his process of creation. The navigation system is dead easy with a sidebar for all the links with a more graphic representation on the home page. It makes getting his folio across easier for the view over all.