Working with Photoshop & Flash: Good Practices for Small Screen UI Design

Posted by MindTree Blog Archives in

 Technology Trends

May 28, 2009 | Total views: 81

1

MindTree Blog Archives

More articles by the author

We recently designed a rich user interface of a digital photo frame (DPF). The DPF is equipped with a reasonably large size touch screen and the interface was finally developed using Flash.

Here is our experience of following a few best practices while working for a Flash input from a visual design tool.

Naming of Layers

Flash takes Photoshop files as an input and creates layers and styles. So if designers name the layers, syntax, and label properly inside the Photoshop files (PSD), it will help in transferring intact designs for development. Clear, readable, and understandable layers imported in Flash will help the developers understand and work faster.

Rasterizing of Layers

Rasterizing the layers will make the file light weight and lock design intends. Meaning, it will not be possible for the developers to take liberty with your design detailing while working in Flash. On the other hand, keeping one file for your design reference with shapes would be a good idea for making quick changes to the original.

Screen Resolution

Remember the screen resolution properly and design for the highest. We worked on screen resolution varying 1024×768 and 800×480. Since the aspect ratio wasn’t the same, there was no reusability of designs and therefore we had to do the same UIs in two different sizes.

Importing Graphic Assets

While importing graphic assets in Flash, you should import all layers as lossless and flattened image. In case of text layers, you should import them as editable text layers only, so that the dynamic text and control can be added during the development stage. Along with this from the Flash IDE change the property of the text to Anti-aliasing for readability.

Rendering

In Flashlite, we encountered several rendering issues, because Flashlite as of now does not support lot of graphic effects. Glow effects on Illustrator and Photoshop may not be feasible as shapes. Therefore, creating individual image assets for each state is a better way to get the final design intent, even though it is a time taking activity and also does not give the flexibility to make changes later.

Performance

Leaving larger than life shapes and elements outside the frame can eat up unnecessary processor memory. Our design had a big circle shape of which only a quarter was being shown in the screen. Flash and Photoshop still kept the information of the big asset and utilized around 1 MB of the processor memory. Best is to keep the graphic assets equal to the frame size / stage size and crop the area outside the frame.

Many of these issues will be solved from Adobe standpoint when they release next versions of their Flash Player. Some of the pain points were due to Flashlite not supporting the effects defined by Photoshop, Illustrator, Flash IDE itself.