Graphics & visual

First at all I have tried to find some inspiration online. Googled: best phone app design. None of visited websites gave me any ideas so I went straight for creating first and second screens with different ideas behind it:

1.background is an imitation of wooden table, ideal place for playing drinking games.

2.mixing a cards colours (white, red, black):

3. smooth and settle colours from 1st exapmle + none heavy modification of images or background from 2nd example

I also tried to experiment with different fonts. The one I have used here was original font used for playing cards downloaded form:

http://www.haroldsfonts.com/cardchars.html

    

I was not happy, that I could not find any inspirations in visual form. For this reason I went to have a look for blogs and discussions. I find very helpfull blog about 5  iPhone apps design mistakes from smashingmagazine. This include:

  1. Over-blown visuals.
  2. Neglecting technological limitations, such as slow Internet connection, slow processors and single-threaded OS architectures.
  3. Confusing navigation (flow, layout and taxonomy).
  4. Confusing the iPhone with a computer. Neglecting to use new iPhone interactions (fingers instead of the mouse; multi-touch gestures; turn, tilt and rotate) and technological features such as phone functions, built-in GPS and accelerometer.
  5. Disregard of context. A lack of understanding of how, when, where and why the mobile device is being used.

http://www.smashingmagazine.com/2009/07/21/iphone-apps-design-mistakes-overblown-visuals/

As I consider iPhone as any other touchscreen smartphone design should be pretty much same.

As my application is not a game, is not a website, is just informative application. In form of visuals I decided to take advantage of basic swatches & themes jQuery mobile offers:

http://jquerymobile.com/demos/1.0/docs/api/themes.html

On the bottom is list of all elements we can possibly theme.  If you open this link above in safari browser, and minimize a browser window. website will behave as simple application.  It means a hughe step in responsive web design, as we can give to our website look of website on PC screens, and application look on mobile devices or tablets. It does not use phones features!

http://jquerymobile.com/demos/1.0/

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: