Great competition, Great Outcome

17 10 2008

 

SkinToWinChallenge is over!!! Winners are declared!!! The quality of the themes is really great. Especially the first and the second prize are looking really cool. Congratulation to Alberto Alcaraz and Nahuel Foronda. I had also submitted the almost seven themes for the competition 🙂  with motivation of “Air Notebook” and “Adobe MAX” but competition was really tuff.  At the end I am happy for that at least one of my theme is got selected for the spot prize.

Basically, I am not a designer but I play with my curser in free time that gives me great joy.  I have learned lot of skinning techniques during the designing of the themes.  Thanks Event

 As per “Juan Sanchez” blog post the entire theme will be available next week for everyone.

Congratulation to all the winners!!!

Thanks Adobe, Thanks Effective UI, Thanks Juan Sanchez, Thanks all the members who had take a part in the competition.





Flex 4.0 Gumbo ~ Developer Designer workflow, just awesome

15 07 2008

Recently Flex 4.0 SDK is released. In this release Fx improve developer designer workflow. Not just import flash, Photoshop or AI files into flex builder but true Developer Designer workflow. It means thermo integration, new skin file (FXG) type included , and new name space “2009” will be in place to support new graphic rendering. I guess now every Fx component will have separate skin file which will describe look and feel and function behavior of the component.

When you think of list component in Fx 3.0 or older, what come to your mind?

Ammmm ….. list items can be display in a box with right hand scrollbar, Item can be rendering with itemrenderer and scrollbar can be skinup with .png or flash. Now take look this video and change your mind for list component. In Fx 4.0, every component will be reassemble easily with very less efforts. So, therefor it’s truly amazing Developer Designer workflow in FX 4.0.

Really gr8 going Gumbo





Layout design !dea

3 07 2008

For developer it’s always pain to decide position, layout, navigation and containers. here i found very interesting web site which has numbers of layout design ideas. go and explore the site http://www.layoutcookbook.com/





FLSkin is available on adobe exchange

27 07 2007

I made three themes with different color code, Orange, Black and Grey. Those themes are having almost every components graphic skinning. It has art work files, if you want to modify any thing on graphics. Those themes are ready to use in any of flex or AIR projects.

You can download and explorer themes from here.





Best uses of Flash from SEO Prospective

11 07 2007

From years back SEO doesn’t recognize use of flash content in site. May be they are right because googlebot can’t ready each and every visual and text content of the .swf format. And flash is really not medium for SEO, it’s completely visual medium. But still we can use .swf content in SEO friendly web site by taking care of search engine prospective.

 

Tip for SEO friendly flash content creation

  1. Use dynamic text rather then static text and graphics
  2. Use “deep linking” new feature of flex 3.0
  3. Make two different version of site one should target SEO and another should target usability
  4. Place flash content wherever it require in your html page [i.e youTube, Google Earth and Google finance]

 

One of the google webmaster publish article “Best uses of Flash” can give better vision to SEO to optimum use of flash.





Flex 3: Built in data grid animation effects

5 07 2007

There is no scope of animation in Datagrid & List components, in Flex 2.0. As such, we have to run code loop and do manual animations on canvas or that kind of container to achieve the animation effects. However, Flex 3.0 team must have realised this requirement and they packed this feature in the new SDK. Now, we can assign special effects on datagrid and list base components.

Check out in action Example 1 , Example 2 [this examples has downloaded from adobe labs]

Download source file





Your RIA should be a RIA!!!!

28 06 2007

Any RIA [Rich Internet Application] developer should respect the word “Rich”. A RIA should have richness which can increase an application’s business values. In context of RIA, richness menses greater UI design, innovative navigation, user friendly inputs, optimized downloading, and quality feedback to user. All these elements impart great richness to the application and results into a joyous experience for both, the client and the user.

The paragraph, above, says nothing new. All of us know these facts and that’s why we are in RIA domain. But the thing is, do we really follow this kind of an attitude while developing an application?

Here, let me try to figure out few aspects which can really bring smile on a user’s face.

Spend special time to understand navigational flow

This is very important aspect for RIA – “navigational flow”. Which control shall we use to provide better navigation – Accordion, Tab Bar, Toggle button bar, Link bar or Menu bar. This depends on your application and the layout you have created.
In some cases, you have to think beyond these components. Let’s say you have to create checkout functionality of the shopping cart. This checkout form has seven steps to follow.

Now, which component will you use?
Accordion? Nope that will takes much of UI space.
TabBar ? hmmmmm……………. No that will not give the feel of sequential steps.
ToggleButtonBar ? it has the same problem as TabBar.
Which navigation control should you use. . …………….

Simple answer you have to create your own stepper component which may look like the image below.

The moral of the story is, think beyond the flex frame work to provide innovative navigation. Believe me that makes so much difference in a client’s satisfaction

Respect your UI designers and creative people

Generally the very first step of any application development is a mockup design. At that time you will find your “UI designer” busy with an image editing tool like Photoshop or Fireworks. Once through, he will approach you with some kind of designs, which you think are not feasible to develop using the flex frame work. For example the UI designer may come up with something like following component for providing help, warning or instruction.

At first look, you may simply refuse this idea by saying like, “we can just put tooltip over here. So please design accordingly.”

Rather then saying No to creative idea, you should say, “Hmmm. Let’s do it.”

Keep the targeted user, in mind

One day I was creating a small e-learning application for children of the age group of 10 years. I had created very cute navigation with collapse functionality. I had just put “<<” and “>> ” kind of icons on collapse button with width and height of 10 X 10 pixels. Suddenly our CEO passed from my desk and reviewed that navigation part.

He gave me suggestion to create 30X100 pixel buttons and write “CLOSE” and “OPEN” on the buttons. I said why? It was easy to understand by the means of the icons. He told me, as an IT person I knew this is “collapse menu button”, but a 10 to 15 years child would never know why this button was and what it meant 🙂

Signs convey a lot of things, in a very salient mode

Use icons where ever your application requires.

Icons sites

Get inspired from other applications

Before create any application we should spend time to see other, applications, UI designs, how they done this.
Below is the links from where you can get inspired

More on UI design and usablity
Read “Creating Effective RIA Interfaces” article of gSkinner.