GirlieMac!

Archive for the ‘Design’

Google Docs Palm Pre Stencil

July 07, 2010 By: admin Category: Design, Google, Palm, UI/UX 1 Comment →

Google Docs Pre Stencil screen

A few month ago, after I was saw the impressive web wireframes templates and iPhone stencil created with Google Docs by Morten Just, on Docs blog, I started playing with this Google’s new addition to the Docs family, Drawing, to copycat this idea and made a Palm Pre stencil.

So here you go! You can check out my Palm Pre stencil on Google Docs.
If you’d like to have your own copy, sign in your google account, then:
Choose file > make a copy

You can drag or copy the UI widgets to the white canvas (printable area). To edit text, you need to ungroup the object first, by selecting the UI widget to be editted and go to Format > Ungroup (you may need to repeat ungrouping grouped objects) then double-click the text to edit.

Also, I labeled each UI objects to match the Mojo UI Widget names so developers can reference the stencil and code easily!

Mobile Firefox UI

February 16, 2008 By: admin Category: Design, UI/UX No Comments →


I just noticed the 2nd proposal for Mobile Firefox UI was posted, (dated Feb.8).

This screenshot is for touch-screens, by looking at its dimension (240×320), it is almost obviously made for iPhone.

Buttons are overlaid at bottom and by tapping it activates URL bars and more options, including refresh and bookmark.

Personally, I think they need to redo the icon designs. This can look much nicer.

Source: Mozilla Links

Usability Guidelines for Mobile Web

October 08, 2007 By: admin Category: Design, UI/UX, WAP 1 Comment →

WebCredible has this great article about usability on mobile web, 7 usability guidelines for websites on mobile devices. With actual examples and screenshots, pros and cons of each are explained nicely and clearly.

The seven guidelines are:

  1. Meet user’s needs quickly
  2. Don’t repeat the navigation on the every page
  3. Clearly distinguish selected items
  4. Make user input as easy as possible
  5. Only show essential information
  6. Place basic browsing control
  7. Design mobile-friendly layouts

Do they seem to be common-sense to you?
Yeah, but trust me, creating mobile web pages following the guidelines is not as easy as it appears to be. Mobile web is not just a dumb-down version of its desktop web sites, as some of you may think. Mobile web has whole new purposes!

By the way, I am glad to see Yahoo!’s oneSearch is used as an example for the “meet users’ needs”. We’re working really hard to provide the best mobile experiences to you!!!