Web 2.0 layouts

21 11 2008

For years one strong rule that influenced designing a web layout was to avoid a vertical scrollbar as far as possible. The user was expected to lose interest if the content is not right in front (without scrolling down). So in order to achieve that, we would design a layout and then try to cram content into it, have hidden menus, small text, small logos etc.

However, times have changed and over the years the user has become quite scrollbar friendly. And the result is that we can design a layout that is more user friendly than ever. These layouts generally follow a similar trend and are termed “Web 2.0 layouts” as they evolved in 2006 at the same time “Web 2.0” became a buzzword. Some of the characteristic features of these layouts are:

  • Bright colors
  • Clean
  • More whitespace
  • Big fonts
  • Center aligned
  • Fixed width
  • Horizontally divided in columns
  • Use of gradients
  • Less navigation items on top
  • Detailed footer
  • Badges and Flowers (to highlight a section/feature)
  • Top part has less content and more marketing info to attract users
  • More content as the user navigates down the page
  • Rounded corners for boxes
  • A very short sign up form. User can update the detailed profile info later.
  • Text based logos with reflection
     

Following are some very good examples:

Firefox:

Firefox

Firefox

 

Cork’d:

Corkd

Corkd

 

You can study the Web 2.0 layout trends in more details at the following urls:

http://www.styleignite.com/articles/view/analysis-of-web-20-design-layout-trends-part-1-clean-colorful-and-horizontally-divided

http://webdesignfromscratch.com/current-style.php





Cocomo – “Social Networking Mojo” for Flex

20 11 2008

Cocomo

Cocomo

The most popular aspect of Web 2.0 today is social networking websites like Facebook, MySpace, Twitter, etc. Adobe has started a new initiative to add power to the Flex platform for building social networking websites – it is codenamed “Cocomo”.

 

“Add social features to your existing Flex apps or build totally new ones, such as real-time productivity/collaboration apps, multiplayer games, and audio/video chat.

Features of the Cocomo beta include the following:

  • VoIP Audio
  • Webcam Video
  • Chat
  • Multi-User Whiteboards
  • Real-Time File Sharing
  • User Management
  • Roles and Permissions
  • Robust Data Messaging

– Adobe”

Check it out here…

http://labs.adobe.com/technologies/cocomo/





Keeping your code clean

17 11 2008

Quite often we are in a situation where we have to work on a code that was written a few months (or years) back by self or someone else. Sounds a little scary? To ensure that reworking on a code is not as difficult as mining a coal mine I always try and keep my code clean. Now, what is clean? There can be a lot of ways to keep your code clean, but two thumb rules that I follow are:

1. One responsibility per class: For example, I’m working on building a media player in Flash that will run audio and video files. I’ve kept the code for playing the video and audio in separate classes that are sub-classes of one common MediaPlayer class. VideoPlayer class carries the responsibility of playing the video, and AudioPlayer class encapsulates properties and methods for playing audio only. Then, I also have a separate class called VideoUI for laying out the user interface for the video player and a AudioUI class for building the audio player UI.

2. One task per method: In the above example of VideoPlayer class, there’s a separate method for each of the tasks that it needs to perform – playVideo(), pauseVideo(), stopVideo(), and so on. In some cases, it means that you make a separate method for even a one line code. 

Following the above two principles really help in keeping my code clean, readable,  scalable, and reusable.





Reading Flash Vars in AS3.0

13 11 2008

Very often your flash app is required to read variables from the wrapper html page. We define the variables as a name-value pairs string in “FlashVars” param tag. Then, read the variable values in Flash using the LoaderInfo object. See the details below:

The HTML looks like this:

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="550" height="400" title="ReadingFlashVars">
	<param name="movie" value="ReadingFlashVars.swf" />
	<param name="quality" value="high" />
	<param name="FlashVars" value="day=Thursday&month=November&year=2008" />
	<embed src="ReadingFlashVars.swf" width="550" height="400" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" FlashVars="day=Thursday&month=November&year=2008"></embed>
</object>

Notice, the param tag with name as FlashVars. It is passing 3 variables to the SWF file – day, month, and year with values as Thursday, November, and 2008 respectively.

Now, the actionscript part goes something like this – you take the params property of the root loaderInfo object and store it in an object reference. Then, using a for in loop, run through each of the name-value pairs.

var displayData:TextField = new TextField();
displayData.width = 300;
displayData.border = true;
addChild(displayData);
displayData.text = " < Display Flash Vars > ";
var objParam:Object = LoaderInfo(this.root.loaderInfo).parameters;
for (var key:String in objParam)
{
	displayData.appendText("\n " + key + " :: " + objParam[key]);
}

Following result should get displayed when the HTML page is loaded in browser:

Read FlashVars in AS3.0

Read FlashVars in AS3.0





KISS design principle

11 11 2008

For a UI design to be successful, one of the most important aspect is – it should be simple. Follow the “Keep It Simple, Stupid” principles. However, this is easy said than done. While designing a UI we often get carried away with adding more and more features/functionalities and confuse the user. In case a user recognises a feature already. Being too creative on the designer’s part does not really help, as the user will not be interested in wasting time on things he/she already knows. Being consistent with already established standards helps the user to understand the UI much faster. Ofcourse, it has to be visually appealing, content clearly readable, navigable, and attract the user.

I came across following articles that elaborate on KISS design philosophy..

http://www.digital-web.com/articles/keep_it_simple_stupid/

and techniques..

http://www.sueblimely.com/blog-design-25-kiss-techniques/

And checkout some websites judged based on the KISS principles..

http://www.smashingmagazine.com/2007/03/26/keep-it-simple-stupid-showcase-of-simple-and-clean-designs/





Importance of good UI design

1 11 2008

Q. How important is UI design in application development?
A. Well, for a lay user, the UI is all that there is to an application. He doesn’t care whether there is a 1000 lines of complex code running behind the scenes.

UI design of an application makes or breaks the success of an application. If the user doesn’t like it, no matter how good and robust the code is, it will not be used. So, a UI has to be easy to learn, easy to use, intuitive, attractive, clean, and consistent. I came across a very good article on UI design tips, techniques, and principles. Read on…

http://www.ambysoft.com/essays/userInterfaceDesign.html