As you might have aware, Google has announced Android Wear specifically designed for wearables, and I am really excited about it – new form factor and new UI/UX to explore (and the sexy Moto 360).
I was playing around with mock up on a small app called Haze Watch (to monitor Haze condition in Malaysia), and it’s really fun – with that very limited screen estate, it’s really important to only show crucial information that is meant for a glance, not read – and this design principle is well explained in the official Design Guideline. I am really looking forward to see how Android Wear change the very new wearables market, I guess exciting time ahead?
Android Wear UI Design Kit for Photoshop 0.1
Then I was thinking, why not a simple design kit for those who want to play around with this new form factor which has a very small screen estate? So I decided to make one very simple Android Wear UI Design Kit for Photoshop. What you can expect from it:
- 2 Adobe Photoshop files – Square (280×280) and Round (320×320)
- A few different layout like Incoming Notification, Notification Stack, Contextual Card etc.
That’s it! It’s not meant for accurate mock up as of now since I don’t have the design specs, but it’s good enough to play around and get prepared for the next wave.
You can download it from my Mediafire account Android Wear UI Design Kit for Photoshop 0.1. For the round one, it goes really well with Spiderfly Studio Moto 360 Mock Up tool for Photoshop (though you might have to do a little bit of resizing)!
Early this month I have organized a design challenge which welcomed anyone that are interested in design/redesign an Android app to participate, and I am really thrilled by the huge responses from the community! There are in total 25 qualified entries which is really challenging for the judges to pick the best 5 entries that deserve the 10$ Google Play Store Gift Card. Speaking about judges, these awesome people formed the judgment team: Asher Simonds, Guenther Beyer, Lucas Rocha, Juhani Lehtimäki, and Walmyr Carvalho. Huge thanks to these guys for helping me out voluntarily! And yes, I am not part of the judgment team for maximum fairness in the result.
And the final result are as below. Congratulations to these people! In the upcoming weeks, I will publish posts for these 5 entries to discuss about the comments from the judges, and my point of view about them.
As promised, the best 5 entries above will win away a 10$ Google Play Store Gift Card. For all other entries that are not in the chosen 5, you guys rock too! This is why I have decided to give away 10 pieces of Android UI Design Kit Logo sticker (measured at approximately 4.5cm x 5.5cm) to all other participants to show my appreciation for your entries. Isn’t that awesome?
So everyone that participated in this (Re)design Challenge, please do the following to claim your prize:
- Send an email to androiduiux [at] gmail.com with the title Android UI/UX (Re)design Challenge Prize Claim
- In the email content, please include your full name, your entry title, full international mailing address and full phone number (with international codes)
That’s all! I will send out the prizes as soon as I can. Again, thank you very much for your entries and I hope to see more awesome design/redesign from you in the community! Till next time!
Taking cue from Android Design in Action Challenge happened last year, I just feel like making another similar Design Challenge for everyone, hence this Android UI/UX (Re)Design Challenge. The aim is to create more awareness towards the importance of Android Design, and a (hopefully) rewarding experience for those who try their hand at Android Design.
Really simple rules
- Anyone can participate!
- Design a brand new app or redesign an existing app (any app) before 16th June 2013 (I like to see high quality works thus the longer design period)
- The (re)design should use Android Design Guideline as a reference. The use of new UI elements like Navigation Drawer and Fading Action Bar are encouraged only if they fit into the app design.
- At least five screens are required (in order to tell an app flow/structure). It will be awesome if explanation/justification is provided for each screen. One good example on how you can document your (re)design is the m-Indicator redesign by Swapnil360.
- Optional: Feel free to post your design to any G+ Android Design Community (including Android Designers) to get feedback and further improve your app (re)design before your final entry. It’s always encouraging to see such design iterations which involved communities.
- Post your design entry in G+ publicly, and remember to use these hashtags:
#androiduiux #androiddesign #ADiA
- Feel free to use any design tools that you are comfortable with, as long as the final result are high-fidelity mock up screens.
- If you are looking for some design resources to start, check out the Free Design Resources page.
- Five best entries will be announced via my G+ account and androiduiux.com within a week after the deadline (before 23rd of June).
- All entries will be judged by professional android designers in order to pick the winners.
- I will make some posts in my blog for all best entries (and probably some interesting entries) after the design challenge.
- Five 10$ Play Store Gift Cards for five best entries only (from my own pocket!)
- I reserved the right in prize management based on the quality of the entries.
That’s all! If you are interested, start (re)designing and submit your design entry before 16th June 2013! Waiting for your awesome entry!
It’s been a long time since my last blog entry, but definitely I am still working on tons of Android Design (in private) and they are often very inspiring, which I hope I can share them in the near future if it’s possible.
Today I would just like to share some redesigns for an app that is local to my home country. The app called Yes Life, which basically an app that allows the user to call and send SMS to any local number from anywhere around the world with internet connection. Below are some screens from the current app:
There are few things in the app motivated the redesign:
- Almost 90% iOS UI Style (and ugly)
- (Very) Bad navigation system
- Usability issue (For example, online/offline status only in the Dialer page)
- Buggy (which unfortunately cannot be solved by a redesign)
- Missed the opportunity to enhance the branding
To address these few issues that I see, I did some redesign on some screens with Holo UI approach (of course!) with the following changes:
- Designed with Holo UI approach
- Used (swipe-able) tab navigation
- Used Action Bar (for better context actions and navigation)
- Show connection status in every screens (which is important for such app)
- Used light/white theme (for branding enhancement)
Below shows a few redesigned screens:
What do you think?
I hope this gives some idea on the importance of the app design in branding enhancement. If you have excellent solutions and branding, but decided to give your user bad products, it doesn’t do good on anything except getting rejected by the users.
Design is not just what it looks like and feels like. Design is how it works.
Bloomberg – another app that I wanted to redesign so long, because the app is pretty badly designed ever since day one. It is almost an exact port of the iOS version, with a really strange ‘MENU’ button at the bottom of the app, and the deadly legacy menu button. Below show some shots from the current version for comparison:
So what if the app is redesigned with the Holo UI approaches and full Android experience? Below are some shots that I have redesigned:
And also some redesigns for tablet version:
What do you think? Do you like the redesigns? Don’t hesitate to shot in the comment box!
Update 07 January 2013: Added Screen Flow Sketch Template for Tablet (Nexus 10). Download link below.
During the new year of 2013, I have released a PSD template for wireframe/mock up screen flow, which I hope can help a little bit in creating an app screen flow easily in digital format. And today, considering there are still many people love to do sketching for wireframe/mock up, I have created a Printable A4 Screen Flow Sketch Template in PDF Format, so you can easily sketch the screen flow on the paper, and because each screen is considerably small, you only need to focus on the main interaction area for the flow, so details are not needed.
I strongly recommended to use this one to sketch out your app idea before going into details since the navigation/screen flow will be there when you are expanding your idea, eliminating some confused/undetermined navigation between screen.
- Use Fit option to print (Don’t use exact size)
- Print in Black and White
- Use High Quality (This won’t use much ink)
I have placed it in my Mediafire account and it’s free to download:
If you have any issue downloading it, let me know and I will send you a copy.
Update: I’ve updated the template to 1.0.1 to fix an issue that all screens will be using the same content. Have to blame myself for the lazy duplication. At the same time, Wireframe Screen Flow Template using Nexus 4 is also available now.
Inspired by a question from the group member within a private G+ community – Android Designers, I decided to spend some time to create a Wireframe Screen Flow Template for Adobe Photoshop that can help Android Developers/Designers to create a complete screen flow for wireframes or mockups. Below is the preview of the template that I have made:
- 12 mock up screens (They are smart objects so it’s very easy to drag-and-drop your mock ups)
- Screen flow arrows (One level down/up and two levels down/up)
How to use
- Create all your mock ups or wireframes in 1280×720 or 1280×768 (Photoshop GUI Design Kit recommended) including the Nav Bar and Status Bar. Save them as png.
- In the template, select one of the mock up screen folder. Look for Mock Up Screen (EDIT CONTENT). Right click on it then select Edit Contents.
- In the new screen, drag-and-drop your mock up. It should fit nicely. Ctrl+S to save, then close it. You should see the mock up appears in the screen flow template.
- Select your preferred gestures and screen flow arrows within those folders for a complete screen flow mock up.
I have placed it to Mediafire and it is free to download:
If you have any issue downloading it, let me know and I will send you a copy.
This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.