Comments on: Overcoming design laziness

By: Tom Bray

Tom Bray — Wed, 16 May 2007 22:45:59 +0000

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

By: Moca

Moca — Wed, 11 Apr 2007 13:17:59 +0000

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 :)

By: Jon Perez

Jon Perez — Fri, 09 Mar 2007 21:33:10 +0000

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.

By: Jon Perez

Jon Perez — Fri, 09 Mar 2007 21:26:57 +0000

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.

By: Phillip Kerman

Phillip Kerman — Fri, 09 Feb 2007 22:16:09 +0000

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.

By: Yet Another Blog from Luar » Doubt on Flex as the best option (4): Dilemma on Follow HTML style

Fri, 09 Feb 2007 07:10:46 +0000

[...] Overcoming design laziness [...]

By: Aaron Adams

Aaron Adams — Tue, 06 Feb 2007 16:20:13 +0000

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.

By: Aaron Begley

Aaron Begley — Tue, 06 Feb 2007 05:37:53 +0000

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

By: sho

sho — Tue, 06 Feb 2007 02:30:18 +0000

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. :-)

By: Marcus

Marcus — Tue, 06 Feb 2007 00:50:54 +0000

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.