The Neo UI Designer
As a freelance RIA UI Brand Designer, I’ve adapted my Design workflow/delivery methods to fit the needs of the 2008 Start-up and Flex Builder 3.0 has helped me to accomplish this. It might seem strange for a Designer to utilize Flex Builder in the Design workflow, but for me coming from a Website Design/HTML/CSS coder background it was as a natural fit as Dreamweaver. I downloaded the trial of Flex Builder 2.0 over a year ago and created my first project as a test, just to find out what was really going on. I have to say, I was very surprised to see how much Flex’s MXML language made sense. It was just like coding an HTML/CSS website, except with MXML I had way more creative control and Photoshop-like style options such as:
- Dropshadows and Blurs
- Gradients! (Can’t emphasis this enough)
- Alpha Transparency
- Rounded Corner (Corner Radius)
- Embedded Fonts
- Animation Effects (Move, Resize, Rotate, Fade)
- Not to mention the powerful Skinning possibilities
I was amazed at how quickly I could prototype Flex UI layouts from my Photoshop or Illustrator mock-ups and how creative I could be with a Developer’s tool.
A Designer using Flex Builder for RIA UI Design? Duh!
I know there’s Designers out there who say Fireworks is the next best thing for UI Design and rapid prototyping and I can’t really say I’ve tried it. I have used Visio and Illustrator for years to create static wireframes and workflows. Also, I have tried loading Flex component kits into Illustrator, Flash and Photoshop and those do aid the in the design and production process. I have to say using Flex Builder 3.0 to create working UI prototypes to hand-off to developers is the fastest and most requested way to deliver a RIA UI design.
What about Thermo?
Now, I know that Adobe is coming out with Thermo some time in the near future but I don’t know if I’m going to leave Flex Builder behind. As a Graphic UI and Brand Designer for some years now I have to say I get a lot of fulfillment seeing things actually work. As a contractor, clients don’t readily provide defined codebases to share with me (probably because they are in “stealth” mode) so I can’t work parallel to a Flex developer. Some clients have no immediate plan to build a fully functioning RIA, but want a Branded/Skinned Flex prototype to wow prospects during the pitch process. It must be fallout from the dotcom hay days that’s forcing start-ups to provide more substantive products complete with; proof of concept, branding, an established super-network of users, multiple beta releases/testing and a audible buzz before gaining additional funds from investors.
Meeting the Demand
Regardless, I am in the same boat as any other start-up. As a contract RIA UI Designer I need to provide more within my own services to meet the increase in demand for a more seamless Design-to-Developer workflow. I don’t think I am alone in this, and if you have been around long enough you will see this pattern emerge; as software applications provide more functionality, software users must demonstrate more technical knowledge and skills.
The Neo UI Designer’s New Deliverable
Gone are the days of static mock-ups being the deliverable, today are the days of Flex UI Skinned prototypes with multiple states, multiple views, animated menus and transitions. I must say the feedback has been awesome. Clients are eager to get my zipped files containing:
- The Flex Builder Project
- Flex CSS Stylesheet
- Asset Folder containing: Images, SWF’s, SWC’s, MP3’s, Fonts
- UI Layouts in MXML with Multiple Views
- Flex Builder Bin ready for demo
- MXML scripted movement, transitions, effects, and animated menuing
- Flash SWF animation for the preloader
- Embedded Icons and Fonts
View a sample Flex UI Design Prototype deliverable.
View sample of final product
Download sample zipped file
So with this, it is my view that the UI or Interactive Designer’s role in RIA’s is evolving. Extended knowledge into the realm of functionality will become the status quo. Integrating Flex Builder 3.0 into the UI Design workflow can only speed the RIA process which is increasingly getter shorter and shorter.
I’m always interested to hear about other’s UI Design process’ or project’s, shoot me an email at moore.art.design@gmail.com to get in touch.
4 Responses to “Flex Prototypes; Beyond Mock-Ups”
Leave a Reply
You must be logged in to post a comment.
June 14th, 2008 at 12:47 pm
[...] a nice overview here by Dolores Joya Moore [...]
June 14th, 2008 at 9:04 pm
From the perspective of the developer, I find this type of message that “Rapid UI Design is great” to be incredibly dangerous. Kudos to the designer for making it look awesome. And clients/customers will always love to see something that can deliver immediate gratification asap.
However, the real danger lies in that it leaves the client/customers with the impression that it is very close to being done when the reality is that what can take hours/days for a designer to mock up, it can take a developer weeks/months to actually code it up.
Polished UI’s very early in the development phase I find really sets the bar high for disappointment. The seriousness I’m trying to make really depends on the type of product/service a company is delivering.
I am more of a fan of establishing function before form. Ted Patrick’s posts really enforces this point…
http://www.onflex.org/ted/2007/11/managing-ui-development-expectations.php
(…although a designer could always refute that the time it takes to code is “Not My Problem”)
June 21st, 2008 at 7:59 am
[...] hgihly recommend reading the comments section there. Some great tools and suggestions to check out. Delores Joya Moore blogged it. She mentions how she is currently employing Flex as a tool to produce UI prototypes [...]
July 11th, 2008 at 1:42 pm
[...] highly recommend reading the comments section there. Some great tools and suggestions to check out. Delores Joya Moore blogged it. She mentions how she is currently employing Flex as a tool to produce UI prototypes [...]