Phy-gital Roundtable: Breakfast Roundup from Germany and Netherlands

02 May '15 | Debjyoti Paul

German Shoppers: Meet Them in the Fast Lane to Phy-gital

15 January '15 | Ralf Reich

Shoppers Will Share Personal Information (But They Don’t Want to be “Friends”)

15 January '15 | Anil Venkat

Modernize or Perish: Property and Casualty Insurers and IT Solutions

14 January '15 | Manesh Rajendran

Benelux Reaches the Phy-gital Tipping Point: Omnichannel Readiness is Crucial

13 January '15 | Anil Gandharve

The New Omnichannel Dynamic: Finding Core Principles Across Industries

13 January '15 | Debjyoti Paul

Technology does not disrupt business – CIO day 2014 Roundup

02 December '14 | Anshuman Singh

Apple Pay – The Best Is Yet To Come

02 December '14 | Indy Sawhney

Digital transformation is a business transformation enabled by technology

01 December '14 | Amit Varma

3 Stages of FATCA Testing and Quality Assurance

06 October '14 | Raman Suprajarama

3 Reasons why Apple Pay could dominate the payments space

18 September '14 | Gaurav Johri

Beacon of Hope: Serving Growth and Customer Satisfaction

05 August '14 | Debjyoti Paul

The Dos and Don’ts of Emerging Technologies Like iBeacon

30 July '14 | Debjyoti Paul

What You Sold Us On – eCommerce Award Finalist Selections

17 July '14 | Anshuman Singh

3 Steps to Getting Started with Microsoft Azure Cloud Services

04 June '14 | Koushik Ramani

8 Steps to Building a Successful Self Service Portal

03 June '14 | Giridhar LV

Innovation outsourced – a myth or a mirage or a truth staring at us?

13 January '14 | Ramesh Hosahalli

What does a mobile user want?

03 January '14 | Gopikrishna Aravindan

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

Posted on: 28 May '09

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.

  • Kiana

    Thanks alot – your answer solved all my problems after several days struggling