Tag Archives: UI Design

Full Screen mode web-apps, a beautiful butterfly waiting to fly out

Posted on by
 

One of the best things in iPad and tablets are the magazine kind of apps. The pictures and other updates rendered so really well in the full screen and there’s no eating out of spaces by scrollbars, titlebars and menubars. It’s a kind of visual presentation for the user apart from the conventional stream based updates.

image

Image Courtesy – http://flipboard.com/

Apple has learned this and introduced the full screen mode in Mac OS X Lion for most of their native applications. The developers can also leverage full screen mode to make their applications beautiful. But I am not so sure how this can impact the experience except few applications like iPhoto etc. 

Image Courtesy – http://apple.com

What I am talking is slightly different. It’s a browser’s perspective. Most of the browsers are already has full screen mode. But the web programmers are unable to make use of this change to present things in pretty good way. I’d really love to see my facebook updates in a full scape landscape without the help of any third  party applications. The photos, updates etc can be presented so well without the annoying left and right sidebars plus, the vacant area left on both sides meet the standard resolution requirements.

Even it’s not in full screen mode,  the best example would be NYTimes Google Chrome App. It’s simply brilliant and make use of the space available in any resolution. And they’ve a great amount of content to spread across the screens. When I am working with 1920×1280 resolution monitor, I really can’t appreciate the too much vacant space on maximize or turn in to full screen mode.

image

Another example could be the Skype updates on Facebook. Though they’re limited their updates to a 3 column, but still it’s nice treat for the eyes and can get things so easily. This is practically impossible with the current rendering view of facebook.

image

The browsers must provide and option for the web developers to leverage the full screen mode for their applications. Even this would be quite helpful for future touch based screen and the websites with Rich content to present it well to the user.

 

Ux Hacks: Firefox 4 Url preview

Posted on by
 

I’d like to share some of the best UI hacks attracts me from various Softwares I use.

Here’s the first one. The new Firefox 4 beta provides a link information in the addressbar itself. In the old browsers, it’s displayed in statusbar at the bottom. Also it’s rendered as as sub to current URL. Check the screenshot.In the screenshot it’s showing the URL (marked in the redbox) while I hovered on “Chromium” Link on the left.

image

 

Visual Studio 2010 mockup tools support for dialog editor

Posted on by
 

Image (C) Microsoft.com Visual Studio 2010 has an excellent facility in the dialog editor to design the dialog with a mockup image. The resource editor represents the dialog and controls in DLUs(dialog units) and probably it’s hard to design with “pin-pixel” perfection. In the professional software development, the UIs are not really designed by programmers. It’s the task of UX person. Probably they will come up with a mock-up image designed some UI design tools (like Visio, Adobe Flash, Photoshop etc…) and it’s programmer’s responsibility to implement them in the actual software. I’ve used “SetWindowPos” and “MoveWindow” APIs in my dialog implementation code to layout the controls to match with in the exact specification.

Take an example. If you’re developing an application which showing the news feed from facebook and your application wants to have the same login controls and layout for making it more compatible with facebook. How we can do that? Here I am taking login screen of facebook. ( the home page design is © to facebook.com and I using this only for the demo purpose). Also I’ve not seen any application helps to sign up with facebook. I am just trying to make my mockup image a bit big.

Consider the following image as the mockup image.

Facebook

Now lets load this in the resource editor. You can see the mockup controls at the bottom of the resource editor by default.

  • Enable the mockup image by clicking the checkbox
  • Load mockup image by clicking browse button
  • Change the transparency suitable for you. Also you can change the X,Y offset of the image to be appeared behind dialog.
  • You can also show/hide the image using the check box left to “Mockup Image”.

mockuploaded

Preview the image (Ctrl+T) and see how it appears!

More Info: