Patrick Hansen.com

The winners have been decided! This was an awesome contest and the turnout was great. As mentioned in the previous post, the entries were definitely outstanding and creative.

First Place:
Undefined by Alberto Alcaraz

Second Place:
Brownie by Nahuel Foronda

Third Place:
iCandy by Phil Chung

Congratulations to the winners and all of those who entered. It was definitely hard to choose the winners, and there were some honorable mentions too.

Visit scalenine.com/blog for the details

The Adobe, Scalenine, and EffectiveUI Skin to Win Challenge had a great turn out. I reviewed the entries the past few days and was quite impressed! There are some very talented designers and developers who entered and brought their own flavors to the mix.

There was everything from simple and basic, to wild and very creative. A great array of the possibilities that Flex allows for skinning/styling for sure.

I still have no idea who has won, as I am only a single judge, and the winners will be chosen by an accumulative scoring system with the other judges scores.

The winner will be announced soon!

I’m a little late on blogging about the release of Discovery Earth Live. It is an online application built in Flex which allows user to cross reference earth related data and information upon an interactive 3D representation of the Earth.

Click here to visit Discovery Earth Live

I was the lead production designer on the project and at first, was heading up extending the design comps for skinning. After some major design changes, I had to begin redesigning the whole layout. The change came late into the project and it was to reduce the width by 120px. Which may not sound like a lot to everyone, but in the web/software industry, that is huge!

This change did not simply call for “squishing” the app and squeezing the design into a smaller width. Some instances this would work, but not in this case. We had a very unique experience designed, especially with the use of a 3D globe, which could not be simply squished. This would’ve have really made the experience and design crumble.

Instead of doing that, we opted for an overhaul and redesign. I was actually at Adobe MAX in Chicago during the time. IMyself and a couple of the development team members were out there, and we started working on it from the convention center and hotel.

I maintained the theme for the most part, that our Concept designers had already put together and Discovery already approved. Since we did have to reduce quite a bit, I felt that using curved modules on the right and left would not only look unique, but it would serve some functionality with the 3D earth by allowing it to breathe a little more. This gave the application a little more dimension and variation from typical straight edged components and modules (which does not work for every app).

We also had to rework how the navigation would behave and be laid out. Initially, we had a left column browser using a custom tree-like accordion. This worked well before, but not in the new design. We chose to place it at the bottom in a 3 column waterfall navigation. We felt this would allow the user to have a good view of the items and children. This also gave them access to the controls for each layer item.

Some other minor features were the latitude and longitude coordinates. Brad Umbaugh was the primary dev on the earth, and he not only put the earth together with Away 3D, but was able to get those calculations for the lat/long coordinates.

The application still looked pretty tight still. So although the user does require the details and info, the main focus of the application is the Earth. I wanted to give them just that, so we came up with the “space” view, where you can push away all of the other panels, modules and navigation, and just focus on the Earth. It is a mocked up space environment in the background, but it does allow the user to get the feeling that they are viewing the earth in space.

There is also a small Widget you can create and embed into your own personal web page, blog, social network site, etc.

RJ Owen was another developer on the team. He was very helpful in putting all of this together and working closely with design to ensure everything was developed as it was intended. Kevin Skrenes was another big contributor, with development of some of the custom components and working with skinning.

This was a great project and case study for me. One major thing that came out of this was how extensible and agile Flex is for development and design. The application was 3/4 developed based on the original design, and we were able to redesign the interface, experience and add some functionality within 2 weeks! The client was happy and the people seem to enjoy it.

It has won a couple awards since the release.

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.

When working on a prototype, you must first define what type of prototype it will be. There are several types, simple static pages that you can just walk through, minimal functioning prototyping which actually has some interaction and logic behind it, even paper prototypes. Now the question of what is the best application to develop a prototype in? Well, you must define your needs and requirements, then define your resources.

It is obviously easier for a Flex developer to create it in Flex. It is easier for a designer to create it a design application and make static or simple clickable prototypes. (i.e. Using Fireworks preview in Browser mode). Flash designer/Developer in Flash and so on.

In this post, I’m going to go over a Flash vs. Flex comparison with a designer who has minimal development knowledge in AS and Flex MXML.

I recently have been working on a rapid prototype for one of our clients. It was a hand off which had over a week into it designed and developed in Flash with some AS 2.0 by another fellow designer.

Flash is great for prototyping, especially for a designer or someone who is not very familiar with coding. You can get by with tweens and simple gotoAndPlay(); & stop(); scripting. As long as you do not need to show what’s under the hood, Flash can provide a very close representation of the final product with not much development. Prototypes are usually done early on, so design is usually not finalized, meaning the designer can do on-the-fly design while creating the prototype. Some prototypes call for some more functionality which you cannot get out of linear design. As of right now, this prototype is pretty hacked together, and if another designer had to go into it, they would be on a code safari. You do get great design, you can make some unique animations, effects, and transitions, but it is not scalable. One slight change request, could cause a major chain reaction. I have stepped up and attempted to built this as dynamically as possible, for I remember the early days of Flash where I was digging 4 levels deep to make changes, or simply redesigning the whole component. This was built a little better than anticipated.

What am I getting at?
Well, is Flash the best for prototyping applications? That’s a pretty relative question. In some cases yes. In this case, where there is more functionality required, dependent and logic driven components, then it is a pain. Also, if your design calls for some type of component that already exist in Flex, then why waste your time.

I sat down with a fellow developer and he recommended doing it in Flex. This was my initial approach as well, but I have limited Flex experience so far. We are on a very tight deadline with this project (when aren’t we?), so making the decision to go into Flex or Flash was more driven by time, my experience and what had already been accomplished in Flash. Although, I did begin in Flex and spent a brief hour and a half laying it out. I learned a lot and especially since one of very talented developers was at my side for guidance.

My beginner knowledge of Flex allowed me to acknowledge that Flex had a lot of what I needed already in the framework. It was a matter of me knowing how to implement it and key thing is make it LOOK GOOD. I am very familiar with skinning, but developing, skinning and fine tuning with minor experience could take some time and reserve my comfort level.

I’ve been in this Flash file for over a week, and it does serve its purpose as a prototype. The only thing is, it does not behave exactly how it should (As I intended), and it took quit a bit of time to code up some of the functionality I needed (bit rusty), when Flex already had it there. If I needed a uniquely skinned component or custom behavior, I could just create that in Flash and make it a Flex component/container and take it from there. You can also export your animations and tweening into AS 3.0 which you can implement into Flex if desired.

My Summary:
I’m making it a point to learn Flex (MXML, AS 3.0) as much as possible to at least get my level up to prototype. I cannot wait until Thermo is released, so I’m going to get into a Flex bootcamp with some fellow developers and see where I can get. The frustrations and struggles I had in Flash were not very pleasing lately; scope issues, slight changes from AS languages, customizing components or behaviors from scratch…etc. Flash does have its place in the industry, but for application development and prototyping, Flex comes out on top in my book. When I start learning Degrafa, that should open some doors and bring design in Flex to a whole other level.

If you are designing in Flash, especially for skinning Flex components, I highly recommend NOT using strokes.

Solution:
Use complete shape fills or turn your stroke into a fill by selecting the stroke, then going to the menu Modify>Shape>Convert Lines to Fills
*note: You will have to realign your object after doing this

Explanation:
For one, strokes in Flash are centered relative to the edge of the shape they are outlining. This means that if you are using hairline or 1 px stroke, then it is centered and .5 px will be inset and .5px will be outset.

This shot shows the stroke with the right edge deleted. You can see how the strokes sits on top of the shape fill.

A shape(fill) that is 50px w with a 1 px stroke will actually be 51px w, but only measure 50px w in the properties panel.

In my examples, the red shape is a fill with no stroke and is 50px w (aligned 0,0). The blue shape with green outline is also 50px (aligned 0, 10) and measures 50px w in the properties panel, because it doesn’t account for the stroke. (The stroke is actually a separate object in Flash)

What happens? If you are dealing with an object with strokes and do not account for this, then your placement of these items will be slightly off. Some would say it’s only a half a pixel, is that such as big deal? Yes it is. Especially if you will be dealing with multiple items and relative binding or anchoring. A half a pixel can cause a 10px shift in a list of 10 items.

Another major issue is how your shape will be displayed. Fractional alignments on shapes and/or strokes, causes a bad visual display of that object. You can really see this on rounded corners. You may not see it until you compile, but I always ensure my shapes are on whole pixels and I design with solid shapes not strokes. This is relative to your shape dimensions and pixel width, as even pixel stroke widths do make it easier, but I still convert them.

(These shots are exaggerated to better represent the issue)
The top rectangle appears in the property panel that it is on a whole pixel x =50 , y= 125 and it is 280px x 160px. If it had a 1 pixel stroke, in actuality, it would be 281px x 161px and its alignment would be 50.5, 125.5.

You can also see the slight distortion of the corners. It is usually more noticeable on the left side of a shape with rounded corners. You can see in the bottom image (red rectangles) that the top rectangle’s corners appear distorted and the bottom one has been converted to fills and aligned on whole pixels.

I have adapted this into my Fireworks designing as well, because I usually carry my Fireworks vector shapes right into Flash for skinning.

Fireworks handles pixel alignment in a strange way as well. You can draw a shape at 0, 0 and it may display this in the properties panel, but sometimes Fireworks does not really draw it at that location. To make sure, click in the x or y input in the properties panel and press “enter.” If your shape was off, you will see a minor re-alignment. If not, then you won’t see anything.

This also affects the shape when copying, create a new file, then pasting. (which, most design apps will naturally create a new file with a canvas size equal to that of the copied object.) A fellow coworker of mine experienced this recently on an object that was 9px x 9px. It as just like another object , but just a different color. They both measured 9px x 9px, but when he copied and created a new file, it created a 11px x 9px canvas. We aligned it properly and this fixed the issue.

I have some friends on the team for Degrafa.

What is it?

“The focus behind the Declarative Graphics Framework (Degrafa) is to bring the graphics classes up a level to provide a common ground between developer and designer within Flex, and enable the graphics classes to become first class citizens within the Flex framework.”

I have yet to play with this, but I’m really excited. Ironically, when I had a chance to install it and give it a test run, I started Flex and my license expired. Had to try track it down and then by the time I got everything prepared, meeting time!

I highly suggest looking into this if you plan on working with Flex, skinning, designing, even if you are a developer who wants to test out your design skills.