seen from United States
seen from United States
seen from United Kingdom
seen from Belgium
seen from United States
seen from United States
seen from China
seen from United States
seen from Malaysia
seen from United States
seen from United States
seen from Brazil
seen from China
seen from Germany
seen from T1
seen from United States
seen from United States
seen from United States
seen from Maldives
seen from United States
Isaac Joekong n7543719 THURS 12-3
Here is the Scores app. I've uploaded a video of demonstrating it on the Windows Phone interface, I designed it for this OS and looks the best on these devices, however it works just fine on iPhones and Androids. Although if you can test it on a WP7 device you'll see what it's meant to look like.
Scores - a HTML5 app for Windows Phone
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.
While the Windows Phone platform is still young and has a very small percentage of the market (around 5%), I feel like this is the only platform to actually have some innovation in terms of interface and design. While the app works fine on the other OS's I designed it with Windows Phone in mind and is best view on that platform.
Screenshots
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.
For this page I wanted to create a page the resembled the about page for the OS
Style Guide
Once I got the basic style of it I made the style guides, based on the Metro UI
I've spliced some elements from different layouts together as I couldn't make it a panorama app on the web so I've taken the basic pivot layout and added some of the panorama and single page elements, while still keeping it in tune with the UI.
Mock - ups
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.
I've also done some sketches for the splash page.
Windows Phone apps
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.
However I wanted to keep it in line with the style guide so each page is designed to mimic the phones interface and so loading the web page would look no different to the other phone apps in most regards. The black background and single colour theme runs through out the app and some pages have a background image to give it a metro UI feel.
Research
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
Designing for the Windows Phone is completely different to the Android and iOS as it uses a unique interface layout that doesn't take anything from the other devices. On the web browser alone the navigation the bar is on the bottom and takes up next to no space, unlike the other ones, allowing for maximum screen real estate on the page. The Windows Phone also uses IE9 so a lot of the HTML5 tags wont work so I'll have to limit the amount of fancy coding. Not that this matters as the UI is really simple.
Folio reviews
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.
What I like most about it the use of colour in the design. It’s something I’ve used myself, although not to his extent. The way in which Peter displays his contact and about page is a little hard to see at first glance. The simple design and use of thumbgrid is once again something I’ve used as I stated. His folio is much larger and more developed than mine so He can experiment a lot more with the gallery page than I can, however as my own folio grows this is a method is displaying it, that I will use.
