Design

Juan Sanchez from Scalenine.com, just announced the Scalenine Skin to Win Challenge, sponsored by: EffectiveUI and Adobe. This is such a good idea and I think it is great that Scalenine, Adobe and EffectiveUI are supporting this event. A great chance to see how design and development can come together with Flex and the Adobe design tools.

I created the logo below for the contest. I would like to thank Juan Sanchez for the design request, it’s definitely fun to get into design mode for a concept like this. A nice deviation from UI design.

Typically I would normally do this type of graphic in Adobe Illustrator, but I wanted to see how far I could go with it in Fireworks. I’ve been using Fireworks for UI design religiously lately, as I feel that it is very optimized for that type of design work. I have done several detailed icon illustrations in FW with no major issues or lack of tools, although a gradient mesh tool would be very welcomed. FW has become one of my favorite design tools out of the suite, rising up from the least favored a couple years ago. As for the motivation behind the design, I wanted to capture some aspects and elements of skinning a Flex app(ScrollBar, ComboBox, CheckBox), plus I wanted to make it energetic with some added depth to a very two dimensional realm. I mocked all of the 3D elements in FW manually, since I suck at Maya, . I even thought about using Ai for its simulated 3D tools, but they didn’t provide me the shaping and sculpting control that this design required. I could have accomplished this in Ai with minimal compromises if any at all, so don’t take this as a dis to Ai.

Hope you enjoy it and get in on the contest! I’m a judge, so I can’t enter !

To compete in the contest, all you have to do is create the BEST Flex theme ever! This is an awesome contest to either hone your skinning skills for Flex, or for even getting introduced to skinning for Flex. You don’t have to be a pro to contend, with some research and effort, a novice could utilize the tools and tutorials available online (see scalenine for details), and still produce an awesome theme. It is a really excellent learning experience to create a whole theme, and even if you can’t get in on this event due to time or experience, it is still worth the effort. It won’t only up your skills for Flex design/development, it can also provide you with some knowledge and skills for skinning on a variety of platforms.

There are some awesome prizes out there too, like a MacBook Air, Adobe MAX tickets, and Adobe software. There will be some special recognitions and some possible copies of Flex Builder thrown out there as well. This is sure to be an amazing challenge and I can’t wait to see the entries!

For more details, vist: scalenine.com

I have been working with Degrafa in my spare time… all of that spare time that I have.

I am quite impressed. Not only by the framework and how scalable, flexible, and powerful it is, but also by its ease of use for even a designer such as myself. It does have some complicated aspects, but for the most part, it is fairy easy to grasp once you get your feet wet.

My first implementation was some additive work to Juan Sanchez’s scrollBar track to Discovery Live Earth that he helped me out with. That wasn’t much, as I just looked at what Juan had written and made some slight adjustments and color changes.

Now, I’m attempting to create a whole Flex theme using Degrafa. It has been challenging, but it is a great way to gain insight about Degrafa and skinning for Flex.

I highly recommend creating a complete theme for Flex to learn some of the basics and advance aspects of skinning. If you have the ability to, then you should also build a test application in Flex to test the skins and most importantly, to review the states of the components. I will post the code for a test application soon, as I made one for my own use.

You do not have to use Degrafa, you can use one of the many forms of skinning, from vector swfs in Flash or Illustrator, to bitmaps in Photoshop or Fireworks, and if you want, you can make a simple CSS based one rather quickly using one of the Flex Style Explorer.
Click Here is the Flex 3 Style Explorer
(please note that Adobe still hasn’t updated the title in the html page from Flex 2)
An easy way to get into skinning for Flex, is to download the Flex Skinning Extensions. You will need an Adobe account, which is FREE.
Click Here to get Extensions!

Keep in mind, that there are a couple techniques which are slightly more optimal and what I favor. I prefer to use stateful skins using Flash. By using stateful skins, you can create all of the states of your skin within one symbol (MovieClip), so it is self contained and easier to manage. You can even add animations and transitions to give it a little more flavor.

Not only are stateful skins great to work with for those reasons, but since it is in Flash, you can make them vector. Very optimal for performance, and scaling with scale9 enabled on your symbols. One other minor detail to keep in mind, which could pose problems, nested MovieClips will NOT scale 9 properly. This means you will not be able to use filters such as drop shadows, glows within a MovieClip that may require scale 9 like rounded rectangles.
(you must create a MovieClip in order to apply a filter in Flash)

To accomplish those effects on a scale 9 symbol, you can mock the shadows and filters with vector art, or you can apply the filter/effect in Flex. Based on some rumors, CS4 should fix this issue, as it is a problem within Flash and not Flex. Also, you can apply the scale 9 grid within the CSS for some skins like Bitmaps.
Here is a post for Flex 2 and scale 9 grid in CSS
Adobe DevNet

I just finished a design for The March of Dimes Mudd Volleyball 25th Anniversary shirts for this year’s event.

I had to use 2 colors only (orange & brown), since this was a non-profit and they’re on a strict budget. I used some negative space (white - T-shirt color) and lighter percentage of the two colors to give the appearance that there are a few more colors going on here. The lighter shades print through as dithered patterns (small dots) and came out fine. Small text or detailed graphics with a dithered pattern can come out messy and unreadable, so I tried to keep that to a minimum. I used Adobe Illustrator CS3 to create the design and still lovin’ that application. even though I do most of my interface design in Fireworks, AI is still the clear choice for graphics and illustrating.

I must provide a shout out to Vecteezy and their contributing artists, for some of the splatters, as I was on a time crunch and this was volunteer work. Vecteezy is an awesome site to go to for creative and inspiring vector art, design info, and if you’re an artist/designer, you can share your work up there as well. (splatter art pulled from: Grungy vector objects & Gun Series - by Vectoroom.com) I have created my own splatters before, but it was very time consuming, especially prior to Live Trace. So, this time around, I had to grab something quick and there are many talented artists & designers out there who are generous enough to share their talent and skills. THANK YOU!

It’s awesome that there is a community of designers who understand the needs of others, have the passion to create, and get their work out there for others to see and use. It’s similar to an open source community of developers, which has proven to be a huge benefit for all. As I do not consider myself a developer, I’m currently learning Flex, and the examples, tutorials and other tools out there are amazing and extremely helpful. Now it is great to see designers following suit.

This is a great event which helps benefit The March of Dimes continuing fight towards birth defects, premature birth, and infant mortality.

The event allows for friendly volleyball competitions in a few inches of soaking, dirty mud, so you can help a great cause and have some real messy fun. This year’s event is currently sold out, but you can get on the waiting list and hope that a spot opens up. If you can’t make it this year, please plan on it next year and help the fight and get dirty!

Mad props to The March of Dimes and those who organize this event. The 25th year of Mudd Volleyball is bound to be a HIT! Wow, 25 years… that’s almost as old as me.

We (EffectiveUI), just did some minor tweaks on Discovery Earth Live, both design-wise and performance enhancing.

Click here to view previous post about Earth Live

Click here to visit Discovery Earth Live

The development team upgraded the 3D library to a Away 3D 2.0. This should speed up performance on the 3D globe (earth) and more so, when there are complex layers on it such as video.

I helped out with some small aesthetic tweaks, styles and colors. Juan Sanchez helped out with providing a Degrafa based ScrollBar track that features a repeating grid-like pattern, which was part of the original design, but not possible with the graphical skinning technique we originally used.

If you’re in the interactive/web industry, you probably already are well aware of Flash Player 10 (code-named Astro). It recently came out and of course has some great new features.

Here is a brief summary of them:

• 3D Effects

• Custom Filters and Effects

• Advanced Text Layout

• Enhanced Drawing API

• Visual Performance Improvements

I’m not going to reiterate the details that are posted on Adobe’s site.
For more, you can just visit: http://labs.adobe.com/technologies/flashplayer10/
I’m anxious to check out the advanced text layout, since Flash is not my best friend for text formatting right now.