Overcoming design laziness
Why is it that so many of us make Flex applications that look like this:
I mean.. The default look for Flex applications looks fine, but it’s kind of like making an HTML app that looks like this:
I suppose the answer is that many of the folks playing around with Flex these days are developers, but that doesn’t mean we have to settle. I think there are two factors at play here:
- The default HTML look is pretty ugly, which forces you to look for an alternative.
- HTML has been around for longer, so more people know the tricks you need to know to change its look.
To counteract this inertia, maybe we should have made the default Flex look be an obviously non-production look, like Elyon’s napkin skin (which is wonderful, BTW. Yes, that is a real screenshot of a working datagrid) In a funny way, this would have forced people to develop their own look while at the same time opening people’s eyes up to the vast styling possibilities of Flex… Hm…..
I can only speak for myself, but mine look like that because I am a developer (as you said). However, I do plan on eventually diving into “making it pretty” – i just like to “make it work” first.
The little experience that I have had with styling in Flex reassures me that customization is as easy as everything else I’ve learned in Flex so far.
Yep…Mr Kuwamoto is true, it’s kind of laziness…but i do agree with todd…we first have to make it work :) then if we have some time left, we make it nice to look at…
Well, the darn thing is that it is sooooo easy to skin this Flex stuff… i too was stuck in ‘just get it done’ mode… but then i saw those sample css styles on http://www.scalenine.com/ and i downloaded the macintosh look and feel one and bam! My app looks sooo much better than it did with the flex raw default. Easy Peasy!
Hi.
I’m also a ‘developer’, so I fully understand the pressures you’re on about, but I’m sorry guys, I have to disagree with you. You can’t produce quality work by ‘making it work first’ and then applying some make-up ‘if you have time’ later on. If you follow that work flow, it doesn’t really matter what you do design-wise, you’ll always end up with a generic look and feel.
Start with the UI design (if you’re lucky, you’ll have someone talented on board to do this part). Get it right, make it look and feel good and be appropriate to the problem at hand. Then, figure out how you’re going to make it work. But never sacrifice any of that initial good design for the sake of making implementing the functionality a bit easier on yourself. There is always a way to make it happen … even if does go against the ‘OO, fits a design pattern well’ grain.
If you can do that, then the functionality becomes part of the design and you’ll end up with some quality applications.
Sho. Timely post. This is part of a problem that’s been running around my head lately. Its nice to know its not just me. Keep up the great posting.
Marcus.
Great comments, all. I agree with Marcus on the bigger projects. Design has to come first! Even for my own projects, I often start UI design by drawing first. However, for smaller personal projects, you know that developers are not going to work with designers, but it would be nice if people spent a bit of time making their applications not look 100% generic. :-)
I think it’ll take time for UI designers to realize the performance benefits of Player9. Let’s face it, the really good experience design being done for the web is being done in Flash Authoring, and those designers are still targeting Player8. But give it time. The platform is capable of delivering some really cool interfaces.
Here’s a simple graphical effect I built in Flex to test the performance of the player, and I was really impressed with the frame rates.
http://www.doodios.com/flare/
(and a blog about it’s construction…
http://blog.wheelerstreet.com/?p=121
)
While this demo doesn’t point to any usability feature (no, I don’t a good UI should shine a light in your face! :) ) It does point to capabilities of the player.
This is good news for the creative UI designer. (The bad news comes when they have to migrate from AS2 to AS3!)
Aaron
There’s absolutely no question that design needs to come first in the workflow. I don’t think developer’s are necessarily “lazy”, but I do think there is a reality where many projects do not budget for UI design. The creative quality of your application and its impact on the end user is a direct result of good work done by a variety of good people. Tools will not make up for any shortcomings here, and placing user experience expecations soley on the shoulders of the developer isn’t ideal. Unfortunately — even with a full deck of resources — really good designers and developers are falling short these days because it’s hard to find traction with getting a kick-ass design implemented in Flex and other RIA technologies. Common scenario: Design team presents a pixel-perfect comp, there is much rejoicing, then development begins. A gradual decline in the client’s praises is followed by polite silence, then questions. You answer for a while under the guise of “it’s still in developmentâ€, but the project eventually ends in frustration as the final builds are not yet infused with the pixel-perfect sexiness promised by earlier comps. Been there? It’s not fun. I won’t digress on these workflow issues further, but working in the trenches on UI design/implmentation for RIAs, it’s been interesting to see these design issues unfold.
If you’re one of those developers who are expected to deliver all aspects of the RIA alone, there is also hope here (and I think this is the point of blog post). Here’s a few “Design Eye for the Dev Guy” pointers:
1. Have a purpose for your design. First seperate the look/feel ideas from what should be an initial understanding of what a user needs to accomplish in your app. Assume the persona of a real user as best you can. I recommend sketching this out with known Flex components/containers in mind.
2. Comp your app in something other than Flex Builder. Skinning is easily done in Flex right? :) It actually is, so don’t worry about coding for this yet, just get the pixels to look good as it pertains to your defined user flow and other criteria (brand, etc.). As a developer, Fireworks is probably going to be your quickest “I get it” application for UI design, but feel free to use Flash or Photoshop… whatever fits and whatever allows you to work the quickest.
3. Start with something familiar. Download the Flex skin templates from Narciso Jaramillo’s blog at Adobe. Use these as a starting point for laying out containers and components in your comp. Later on, you can either use the CSS values you defined, or use the assets themselves for graphic skinning.
http://www.adobe.com/devnet/flex/articles/flex_skins.html
4. Give elements room to breathe. Don’t try an intricate/compact UI design until you get more experience. As a general rule, give elements consistent padding and alignment.
5. Elminate lines. Then eliminate more lines. The better you can kill extra and unecessary visual shapes and lines, the cleaner your UI will look. This might be something as simple as removing the appearance of a nested container (turn the borders off in CSS).
6. Color Theory 101: Learn from others. If you don’t typically have a “gut feeling” for color then learn from what others have shared. Recently, Adobe’s Kuler app has been a great place to see some examples.
http://labs.adobe.com/technologies/kuler/
A safe place to start for UI design is to keep a mix of neutral colors as the basis for most backgrounds, components and containers. Save the brigher/purer colors for highlighting imporant elements in the UI. You can also use contrast to achieve the same visual focus.
7. Get someone else’s opinion. :)
8. Iterate in the “pixel-perfect” comps, then iterate more once you’ve skinned for Flex. Good design is good iteration.
[…] Overcoming design laziness […]
Marcus pretty much sums up my feeling too.
I really want to get into Flex for custom apps, but as I explore my recent gripe (not much different than yours regarding design laziness) is “stability laziness”.
I can bugs in SO many public facing Flex apps. Do these people not care? Do they not test stuff? I mean, my code is far from 100% bug free, but it’s really bad in many examples I’ve seen. Often, too, the errors that I discover are in the framework itself and I hear developers say “oh, that’s in the Flex framework” and that’s it! Do clients accept this? (I think I would like to trade some of my more picky clients for some like that.)
Seriously, though I think it’s important to address buginess as well as generic designs early in Flex’s success to ensure a few bad examples don’t reflect poorly on the product.
The default Flex 2 look is nice and clean. There is absolutely nothing wrong with it. It doesn’t need to be changed. If it ain’t broke, don’t fix it.
The default HTML look sucks. The Napkin look also sucks.
I look at the sample themes from http://www.scalenine.com/ and guess what, none of them look as good as the default Flex 2 theme either. They’re all pretty mediocre and uninspired (and garish). For the ones which are somewhat ok, the only qualities making them so are the ones that they share with the original Flex 2 theme.
I am a designer and last weekend decided to try to learn flex for a simple chart app. I started laying my panels and charts and of course before making the app work for real, I used dummy data and start to stylize. After my first 4 hours in Flex, I had my layout with different colors and css styles working.
Too bad my left side does not work..it took me all Sunday to try to bind some XML to my charts which I still did not work it out since my XML did not look like the samples I found.
It is hard to have a combination of design and development skills..
As a user, I would rather see the default Flex style than some horrible looking color combinations (My Space style) that some of my developer buddies can come up with :)
Here’s a Flex/Apollo app that doesn’t look lika a Flex app: http://labs.searchcoders.com/dashboard/demo/
Before I designed this in PhotoShop, I expected the actual skinning process to be difficult. I think that people see the Flex 2 Style Explorer and assume that’s all they can do without getting their hands really dirty. I originally assumed that you use CSS for the basic things and then you have to do something mysterious and difficult to make more significant changes. Perhaps the Style Explorer should be updated to demonstrate choosing different skins for things. For example, you could select the Button component and change the up/over/down skins and display the resulting CSS embeds.
I’ve been really pleased with how easy it was to skin this app. I feel like I have complete control. We just need to get the word out that it’s not as hard as people think.
-Tom
Hmm it seems like your blog ate my first comment (it was super long) so I guess I’ll
just sum it up what I wrote and say, I’m thoroughly enjoying your blog.
I too am an aspiring blog blogger but I’m still new to the
whole thing. Do you have any tips for novice blog writers?
I’d definitely appreciate it.
I don’t know whether it’s just me or if perhaps everybody else experiencing issues with your blog.
It appears as though some of the written text
within your content are running off the screen. Can someone
else please comment and let me know if this is happening to them as
well? This could be a issue with my web browser because I’ve had this happen before.
Thanks
Hy Execellent video porn situation exchange for everyone. There are thousands porn artists with nice boobs, seductive bodies and well done faces. You may seize me at : Free Tempting Video thanks, tumini