Thursday, November 18, 2010

Rough UI Sketches

Here are some sketches I made on some paper. I took them with my phone, so I hope that the quality will suffice. This is just a small preview of what is (hopefully) to come. If you have any experience with graphics, home-replacement apps, or have any contributing ideas, then feel free to contact me via email ( or by leaving comments on this site. Enjoy :)

 Layer 1 (above): A vertically-scrolling home-screen that the user can place icons and widgets on without "snapping to a grid." The total area will most likely be the equivalent to about 4+ screens (let me know how much screen space would be needed). The sphere on the right (or left if the user chooses) serves as the app-drawer button and a way to access the fan (see Layer 2a). The little rectangular tab on the left (right below the weather widget) is the widget-drawer tab (see Layer 2b). Both of these objects remain stationary while scrolling so that they are always available. 
Layer 2a (above): This is the "fan" where the categories (Games, Multimedia, Social, Most Used/Favorites, etc.) of apps will be filled. The "fan" can be accessed two ways: either by flicking diagonally from top-right (if it is on the right side) to the bottom-left to have the "fan" unfold from the corner around the sphere; or by holding the sphere icon to let the "fan" expand out from the sphere. Tap the sphere for the app-drawer. Once in the app drawer, hold the app icon and drag it to the sphere and the "fan" will expand to show the categories so that you can simply drop the app into a category. If you want the app on the home-screen, then just go to the app drawer and hold your finger on an app and place the icon on the home-screen where ever you want.

Each of the boxes with circles in them represent the applications that appear once a category is selected by dragging your finger outward from the category. The apps will have a zoom effect when your finger is on the app and just release to launch the app.
 Layer 2b (above): This is another part of the second layer. This is a slide-out drawer that houses all the widgets. It scrolls vertically to show all the 3rd-party widgets that the user has. I will hopefully provide some feed (Facebook, twitter, mail, messages, etc.) widgets to accompany the home-replacement. This drawer expands horizontally by dragging (or tapping) on the rectangle tab on the left side of the screen (as seen on layer 1).
Layer 3 (above): This layer is purely a gesture layer. Simply perform a gesture (a letter, a shape, anything) and the gesture will be able to launch an application, open a contact, change a setting, etc. The possibilities are endless. 

 I hope you guys liked the sketches, sorry they are so rough. I have yet to acquire a wacom tablet, so all of my artwork is done on old-fashioned paper. If you have any questions regarding the sketches, please ask.

Thank you so much for visiting,