Are UI roles changing?

With the release of design based applications like Fireworks CS4 Beta from Adobe, it has again further blurred the lines between the UI professions.

Although there are other tools that can provide similar more detailed functionality that the new version of Fireworks CS4 does such as Microsoft VISIO and Omnigraffle, no other package wraps most the most common RIA Development processes in one package. Fireworks has stepped up from the shadows and has reinvented itself as a somewhat dedicated RIA Development tool.
UI experts can create interactive step throughs for clients, UI wireframes, create custom components, and even export the UI Designs as MXML(flex markup) or XAML(Silverlight markup). I think Adobes decision to add these kinds of attributes to Fireworks was a great one. I always wondered what would happen to Fireworks after the merge, as it was often neglected in favor of the other Image editing tool owned by Adobe… what was the name of that one again?

I generally see UI Teams in 3 Groups

  • UX – User Experience design – They primarily look after the interaction model of the application working with concepts such as wireframes and application storyboards.
  • UI Design – They are responsible for the look and feel of the application.
  • UI Development – They are responsible for the actual coding and software development.

In small practices more often than not, a single developer is responsible for all aspects of an Application, UX, UI Design and all development both client and server. In these cases the Applications are normally built from the database up. By that I mean the backend services are written and test harnesses/wireframes created to start bringing the application together. However I can see the trend going forward in RIA development lending itself to design based/user centered development where the UI drives the design cycle of the application no matter what size the practice. And by allowing a number of client side design tools to publish working code emphasises that.

I would be interested to know how will this affect current software development cycles for teams and individuals. For those that do have resources such as usability experts how will their roles be affected? will they need retraining in current toolsets? Will graphic designers start writing and publishing MXML and XAML code?

The crossover is inevitable from UX, UI Design and UI Developer. The switch between having a UI Designer hat on and a UI Developer hat on is literally a click away.

More information about Fireworks CS4 Beta can be found here.

Toolkits for CS3 Extensions

If you were wondering why the Flex Component Toolkit for Adobe Flash CS3 isn’t where the documentation says it is. You’re eyes aren’t deceiving you.

Previously it was located in the SDK_install_dir\frameworks\flash-integration. However for the final release of the FLEX 3 SDK they removed it.

It can now be found here along with the other CS3 extensions.

Manage my bundle

Traditionally used for managing locale settings especially languages the ResourceManager in Flex 3 can also be used for loading in other environment variables.

On my development machine I’m loading in service URL’S, dummy sessions and a few other things. One other option would be to hard code test data into a static class but because these values are used for more than one application it allows me to change this values in a single location.

You first need to declare your source path to your resources. The file that you wish to read using the Resource Manager needs to be a .properties file. This is just a standard text file with the name of your resource bundle suffixed with a .properties.

The structure of this file is the property and then the assigned value. Comments can be incorporated by implementing the hash symbol.


#this is the riality resource bundle
uploadURL = http://localhost/testApp/upload.cfm
companyID = 1212

Store this file in a local directory. For this test application I have mine structured like so. I have this example setup in my Flex 3 SDK directory. Notice that the I’ve used the “en_US” named folder, this is the default locale for the flex compiler, but allows us to add other locales if need be by simply adding creating another locale named folder and providing the same .properties files.

Now you’ll need to set your source patch for the resource bundle. To do this right click on your flex project. Click on the Flex Build Path from the left hand menu. Click the Source Path menu Button. Here you have the option to add a source path folder.

Click the Add Folder button and browse to your resource bundle directory and click ok. However where replace the “en_US” with the special characters {locale}. This is set by the flex compiler additional arguments. You can see this when you click on the Flex Compiler in the left hand menu.

After that you’re right as rain to start accessing your bundle in your Flex 3 Application.


[ResourceBundle("riality")]
private var companyID : String = ResourceManager.getInstance().getString("riality","companyID");

Bundles have never been easier to manage. You could say it makes it a real bundle of joy to manage.

Architecture and Software

I’ve been thinking about the similarities between UI design and Architecture in the built environment sense are uncanny. The processes involved are so similar that they can be applied to both discipline’s, yet the final result is very different. One you can touch the other is virtual, one may be constructed from treated wooden logs the other you can log in to.

Surely some must be thinking that how can this be… this is crazy designing a front end for a application can’t at all be similar to designing a building or an open space.

Fair enough that’s a good point, you could liken it to the similarities of getting a builder to design your house or a landscape gardener to design your private open space. Most of the time they’re not going to step through the required processes to get the job done. So from that the above question is true. They may cut corners and you may end up with a toilet running off the kitchen. As is the same with UI Design, you may get you someone who has some knowledge of the web to build an application for you, sure it may seem cheaper in he short term but you’ll be paying for it over time with bugs (features?) or frustrated usability.

Below is a list of how I see the processes marry up. The actions relating to software in parentheses.

Built Evironment Architecture Software UI Architecture
Submission Submission
Project Brief Business Analyst
Concept Drawings/Design Process Functional Specs / UI work flows / Use cases
Adhering to the Council/Australian Standards Development Best Practises/Coding Standards
Client Approval Client Approval
Devlopment Approval Development Approval
Project Tendering Outsourcing
Construction Development
Contract Admiistration Bug Fixing / Testing
Construction Completion Development Handover

This is quite a broad overview between the two disciplines but as you can see their processes are similar even though the terminology may change slightly.

They call it software architecture for a reason. Software has been around a few years less than the built environment and you can see why they’ve penned the term. If computers were around in the Renaissance period do you think Leonardo da Vinci would of been a Software Architect?

So you’re saying because I’m a UI Architect I can now become a registered architect and start building stuff?

Unfortunately you’ll need to get yourself into university for at least 4 years depending on your design strand. Then you’ll need accreditation to become registered. You can find more information about the built environment AILA and RAIA.

On a recent trip to Spain I stopped off in Barcelona to visit the Church of the Holy Family designed by the brilliant Antonio Gaudi. Although unfinished it’s the most amazing building I have ever seen. It’s something for your software to aspire too.