UI/UX Design for Blender Camera

This is the first time I practice a methodological design process for Android app. I did not have any professional training on graphic/UI/UX design, just did every step with intuition. Here I note down the process.

Random Thoughts on Paper

It is another camera app, which is similar to the previous one but with some other interesting filter effects and a function of blending two filter effects into one. The previous camera UI uses a gallery adapter to switch between filters, which seems to be working smoothly and easy to control. So I continued with this design. The main camera layout has 3/4 portion to display the camera view, and 1/4 left for the filter gallery. Another activity is the filter blender mode, where the user can view the combinations of two effects and generate a new filter by pressing a button. I thought about a small window (top-left area that comprises 1/6 of the screen) to display the camera view and the bottom part to display the filter galleries (I planned to use three types of filters but end up with only two due to some memory issue). A dialog window need to be popped out when the user press a button to generate a new filter. Another page contains a list of customized filters. The ideas are sketched on the paper.

First Draft

I started the actual design with a mock-up in Photoshop. I selected a red-green color scheme, which I thought was fresh and lively. Following the standard Android design, I mocked up the Action bar. I used some default Android icons and drew a few by myself.

I held on the project for a few month. Later when I review the design, I felt that the colors were too much, and messed up with the color of the actual photo we are shooting. I tried a simpler color scheme - only use one theme color as below. But still I felt that any color adds on the UI bias the actual tone of photos the camera app is going to catch.

Minimize the UI and Maximize the Function

I realized that the main function of the app is just to take photos with nice filter effects. Any buttons and layouts should not extract the users’ attention from the camera view. I then make the camera view occupying full screen and overlay transparent UI on top of it. I tried to minimize the UI so that the function would be emphasized. Therefore for all the filters in the Gallery layout, names are displayed without icon. Further more to make better user experience I allow a gesture control to swipe up/down on the view to hide all the buttons. The list view of the customized filters are also overlayed on top of the camera view with a transparent background. So the camera view is always exposed to the user.

I make all the dialogs transparent.

I then drew all the icons in Photoshop. Only a few icons are designed and they are resiponsible for all the necessary functions of the app. That is the concept I want to practice - minimize the UI and maximize the function.

Gesture Control

To provide a better user experience, I implement the gesture control as I have shared in my previous post. This allows easy manipulation of the cameras - switch front/back camera, zoom and shoot.

Closure

Recently I came across the Documentary OBJECTIFIED and learned the ten principle for good design by Dieter Rams. This is very inspiring, and I would like to take a note of it here:

1. Good design is innovative
2. Good design makes a product useful
3. Good design is aesthetic
4. Good design makes a product understandable
5. Good design is unobtrusive
6. Good design is honest
7. Good design is long-lasting
8. Good design is thorough down to the last detail
9. Good design is environmentally-friendly
10. Good design is as little design as possible

Less, but better. Back to purity, back to simplicity.

Share the post