Category Archives: Design

[UX Thought] iOS Shake to Undo is cool, yet it’s a bad design

Do you have an Apple iPhone? If you do, allow me to ask another question: Do you know there is a feature called ‘Shake to Undo’ on the iPhone which allows you to undo/redo your last actions during typing?

If you are aware of this feature, do you still recall how do you know about it? If you doesn’t know about it, you are not alone, and it’s not your fault. Continue reading [UX Thought] iOS Shake to Undo is cool, yet it’s a bad design

[UI Concept] Twitter for Android with Ice Cream Sandwich Theme

Twitter for Android with ICS Theme

Click the image above for full-size view.

I loved the Holo theme in Ice Cream Sandwich. That’s the reason I made the Android ICS GUI Design Kit in PSD for Android Designer to design high quality app with stock UI elements in mind. But I am also curious how well can the UI elements in Holo theme for ICS can be applied to the currently available apps, so I decided to start with the official Twitter Android app, which is an easy one I think. Continue reading [UI Concept] Twitter for Android with Ice Cream Sandwich Theme

[Android] Printable A4 GUI Sketching Kit – Nexus S and Galaxy Nexus

Details

Update 30-06-2012: Version 2.0 includes the new Nexus 7 in Portrait and Landscape!

Besides the Android ICS GUI Design Kit that can be used in Adobe Photoshop, I also think (and love!) that sketching is a big part of UI/UX designing, while it can be messy, but it definitely help in quick idea visualization and aid in brainstorming.

So here I come up with two sketch templates for Android App, using the Samsung Nexus S and Samsung Galaxy Nexus as the sample devices, and put them on an A4-sized PDF with almost real-life size so designers can sketch the app with the size as close as the real device (don’t blame me if there is one or two pixels off! /jk/).

Android app designer, go create some awesome apps with the GUI Design Kit and GUI Sketching Kit!

Download

Android GUI Sketching Kit – Nexus S

Android GUI Sketching Kit – Galaxy Nexus

Android GUI Sketching Kit – Nexus 7 Tablet – Portrait

Android GUI Sketching Kit – Nexus 7 Tablet – Landscape

Android GUI Sketching Kit – Galaxy Nexus and Nexus 7 Tablet

[Android 4.0] Ice Cream Sandwich GUI Design Kits in PSD

15AUG2012: Android ICS/JB Photoshop GUI Design Kit is updated to 3.0 and released at AndroidUIUX!

29FEB2012: Android Team have officially provided the Android Design Stencils in Adobe Photoshop format! Awesome!

26FEB2012: Android ICS GUI Design Kits updated to 2.0.1!

19JAN2012: Android ICS GUI Design Kits updated to 2.0!

Update

1.1: Added more stock ICS GUI elements. Refer below for details.

2.0: Based on the official Android Design by Android Team, most of the ICS GUI stock elements have been added. Below image shows a summary of the content.

2.0.1: Added the Back Arrow for the top action bar. Thanks Andy!

Details

I have been designing mock up of Android app in Adobe Photoshop and I find that a GUI Design Kit is extremely important, and I thought there isn’t any good (and simple) one in the wild, so I have decided to make this Android ICS GUI Design Kit for two different resolutions and dpi:

  • 720×1280 320dpi – Samsung Galaxy Nexus
  • 480×800 240 dpi – Samsung Nexus S, Samsung Galaxy S II

The main idea of this GUI Design Kit is not making everything scalable to the unfortunate fragmentation occurs in Android, but just provide some stock elements of Android 4.0 (Ice Cream Sandwich) in one .psd file so app designer can really focus on creating awesome mock up to show developers/clients. Some of the elements are just single layer of image from ICS, but I thought they are pretty adequate for mock up purpose.