The i-Technology Media!
Register | Log in
   
 
.NET  ·  AJAX  ·  CLOUD  ·  ECLIPSE  ·  FLEX  ·  OPEN WEB  ·  iPHONE  ·  JAVA  ·  LINUX  ·  OPEN SOURCE  ·  ORACLE  ·  PBDJ  ·  SEARCH  ·  SILVERLIGHT  ·  SOA  ·  VIRTUALIZATION  ·  WEB 2.0  ·  WIRELESS  ·  XML
Comments
Improving the Efficiency of SOA-Based Applications
jhv1blz5 wrote: The article validated SOA as an IT architecture paradigm that can be leveraged in many ways. Taking data storage, scalability and application performance to a nifty level using SOA Application Grid infrastructure will no doubt enhance data and application performance on Oracle architecture platforms, it also has the promise of a cost effective and efficient IT delivery model. The very benefits of SOA.
Jul. 3, 2009 10:31 AM EDT
Cloud Computing | Virtualization
November 2 - 4
Register Today and SAVE !..
Did you read today's front page stories & breaking news?
Live Google News by SYS-CON!

Top Three Links You Must Click On


Features
Design for Developers
Interactivity, animations, and AJAX

By: JC Grubbs
Dec. 30, 2008 04:00 AM
  • 1
  • 2
  • 3
  • next ›
  • last »

A few years ago I had the opportunity to sit down with a designer possessed of a rare talent. We were both part of the same team and he was creating some UI elements that I was to wire up. As I sat there (in awe) watching him work I realized that much of his considerable skill was rooted in fundamentals not unlike the art of programming. Of course, there are design skills that are intuitive that can't be "learned." But, that can also be said of the logical clarity found in a really elegant data model or a brilliant inheritance tree. I am certainly no designer, but I have observed the more creative among us for several years and have gained some insight into their world. In this article I'll share some basic principles that can help raise your design acumen and improve the experience of your users.

Layout
I'd like to attack my goal of imparting design wisdom by breaking the topic into four buckets. The first is layout. By layout I simply mean the composition of smaller elements inside of a container or canvas. Everything in life has a layout even if it's not apparent. Billboards have a layout, as do magazines, book covers, keyboards, clothing, food packaging, and the list goes on. In software development this means how things are composed in a window; whether a browser or a WinForms application everything has layout.

There are principles to layout, simple maxims that can turn a mediocre misshapen ASP.NET page into an orderly one with pleasing lines.

The Rule of Thirds
The rule of thirds is a very old guideline, appearing as early as the middle 16th century in instructional writings on scenic painting. It states that elements on a canvas are most pleasing to the eye when they are broken into thirds. In a traditional column layout on the Web, this translates to a left-hand column containing navigation and small bits of content that is one-third of the total page width and half the size of the content area to its right.

You can implement this heuristic in all sorts of ways in a layout. For example, your header section might be divided into three sections: a search bar, a header image, and a navigation bar. Your header image could be a full two-thirds of the total height with the search and navigation bars each one-sixth of the total. This makes the size of the image in relation to other content seem right to the eye.

Even smaller minutia can benefit from this rule. Everything from calendar widgets to footer elements can be sized using the rule of thirds. Just keep in mind that it's a guideline and you don't have to go crazy doing the math.

Whitespace Is Your Friend
Whitespace often seems like magic. You really don't know why it works but it somehow does and adding a little more of it is rarely a bad thing. A few years ago, there was a craze in Web design to get every bit of content on a page above the fold (a term held over from newspaper design). Because this often leads to cramped designs I'm glad this fad has fallen away. You will have a natural tendency to skimp on the margins and padding around things but take liberties here and more often than not you'll be happy with the change.

  • 1
  • 2
  • 3
  • next ›
  • last »
Published Dec. 30, 2008— Reads 3,872
Copyright © 2008 SYS-CON Media, Inc. — All Rights Reserved.
Syndicated stories and blog feeds, all rights reserved by the author.
About JC Grubbs
JC Grubbs is a web software architect, designer, and developer for a wide variety of business and social networking applications. Currently, He is an architect/technical lead at custom software firm, www.geneca.com ,where he contributes to the success of Geneca’s unique Getting Predictable approach to software development. JC has expertise in Microsoft technologies such as the .NET Framework, ASP.NET, ASP.NET AJAX, SQL Server, C#, VB, etc. He is also skilled at web front end development with XHTML, CSS, JavaScript, and a number of JavaScript frameworks, AJAX techniques, Microsoft Silverlight, and web standards.

Add Your Feedback

In order to post a comment you need to be registered and logged in.

Register | Sign-in

Reader Feedback: Page 1 of 1

Subscribe to the World's Most Powerful Newsletters
Subscribe to Our Rss Feeds & Get Your SYS-CON News Live!
Click to Add our RSS Feeds to the Service of Your Choice:
Google Reader or Homepage Add to My Yahoo! Subscribe with Bloglines Subscribe in NewsGator Online
myFeedster Add to My AOL Subscribe in Rojo Add 'Hugg' to Newsburst from CNET News.com Kinja Digest View Additional SYS-CON Feeds
Publish Your Article! Please send it to editorial(at)sys-con.com!

Advertise on this site! Contact advertising(at)sys-con.com! 201 802-3021

SYS-CON Featured Whitepapers
ADS BY GOOGLE
Breaking Java News
CNOOC Limited Announces the First LNG of Tangguh Project
VASCO to Release Q2 2009 Results on July 23, 2009
Leading International Climate Scientists Call on World Leaders for Global Emissions Peak by 2020
Leading Online Casino Announces VIP Award Scheme
New From Babylon - Free Upgrade for All Mac Users - The Improved Babylon for Mac Now With Online and Offline Dictionaries
New From Babylon - Free Upgrade for All Mac Users - The Improved Babylon for Mac Now With Online and Offline Dictionaries

ADVERTISE   |   MAGAZINE SUBSCRIPTIONS   |   FREE BREAKING-NEWSLETTERS!   |   SYS-CON.TV   |   BLOG-N-PLAY!   |   WEBCAST   |   EDUCATION   |   RESEARCH

.NET Developer's Journal - .NETDJ   |   ColdFusion Developer's Journal - CFDJ   |   Eclipse Developer's Journal - EDJ   |   Enterprise Open Source Magazine - EOS
Open Web Developer's Journal - OPENWEB   |   iPhone Developer's Journal - iPHONE   |   Virtualization - Virtualization   |   Java Developer's Journal - JDJ   |   Linux.SYS-CON.com
PowerBuilder Developer's Journal - PBDJ   |   SEO / SEM Journal - SJ   |   SOAWorld Magazine - SOAWM   |   IT Solutions Guide - ITSG   |   Symbian Developer's Journal - SDJ
WebLogic Developer's Journal - WLDJ   |   WebSphere Journal - WJ   |   Wireless Business & Technology - WBT   |   XML-Journal - XMLJ   |   Internet Video - iTV
Flex Developer's Journal - Flex   |   AJAXWorld Magazine - AWM   |   Silverlight Developer's Journal - SLDJ   |   PHP.SYS-CON.com   |   Web 2.0 Journal - WEB2
Apache   |   CMS   |   CRM   |   HP   |   Oracle Journal   |   Perl   |   Python   |   Red Hat   |   Ruby on Rails   |   SAP   |   SaaS

SYS-CON MEDIA:   ABOUT US   |   CONTACT US   |   COMPANY NEWS   |   CAREERS   |   SITE MAP
SYS-CON EVENTS:   |  AJAXWorld Conference & Expo  |  iPhone Developer Summit  |  Cloud Computing Conference & Expo  |  SOA World Conference & Expo  |  Virtualization Conference & Expo
INTERNATIONAL SITES:   India  |  U.K.  |  Canada  |  Germany  |  France  |  Australia  |  Italy  |  Spain  |  Netherlands  |  Brazil  |  Belgium
 Terms of Use & Our Privacy Statement     About Newsfeeds / Video Feeds
Copyright ©1994-2008 SYS-CON Publications, Inc. All Rights Reserved. All marks are trademarks of SYS-CON Media.
Reproduction in whole or in part in any form or medium without express written permission of SYS-CON Publications, Inc. is prohibited.
 
close this window