<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>denbagus blog &#187; user interface</title>
	<atom:link href="http://www.denbagus.net/tag/user-interface/feed" rel="self" type="application/rss+xml" />
	<link>http://www.denbagus.net</link>
	<description></description>
	<lastBuildDate>Thu, 17 May 2012 02:12:22 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Preezo &#8211; professional quality presentations</title>
		<link>http://www.denbagus.net/preezo-professional-quality-presentations</link>
		<comments>http://www.denbagus.net/preezo-professional-quality-presentations#comments</comments>
		<pubDate>Sat, 21 Nov 2009 22:12:57 +0000</pubDate>
		<dc:creator>denbagus</dc:creator>
				<category><![CDATA[document]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[user interface]]></category>

		<guid isPermaLink="false">http://denbagus.net/?p=2000</guid>
		<description><![CDATA[Preezo is the use of AJAX Web, which gives you the power and share professional-quality presentations over the Internet without any software or  plugins.If slide show with a little exercise then check out their functions, transitions between slides. Not only could Fade slide wipe, push them, but you can also use the slides automatically advance [...]<p><a href="http://www.denbagus.net/preezo-professional-quality-presentations">Preezo &#8211; professional quality presentations</a> is a post from: <a href="http://www.denbagus.net">denbagus blog</a></p>
]]></description>
			<content:encoded><![CDATA[<div id="tweetbutton2000" class="tw_button" style="float:right;margin-left:10px;"><a href="http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2FsqpQs7&amp;text=RT%20%40denbagus%20Preezo%20%26%238211%3B%20professional%20quality%20presentations&amp;related=&amp;lang=en&amp;count=vertical&amp;counturl=http%3A%2F%2Fwww.denbagus.net%2Fpreezo-professional-quality-presentations" class="twitter-share-button"  style="width:55px;height:22px;background:transparent url('http://www.denbagus.net/wp-content/plugins/wp-tweet-button/tweetn.png') no-repeat  0 0;text-align:left;text-indent:-9999px;display:block;">Tweet</a></div><p><a title="online presentations" href="http://www.preezo.com/" target="_blank">Preezo </a>is the use of <strong>AJAX </strong>Web, which gives you the power and share professional-quality presentations over the Internet without any software or  plugins.If slide show with a little exercise then check out their functions, transitions between slides. Not only could Fade slide wipe, push them, but you can also use the slides automatically advance after a certain time.</p>
<p>They graph the function and help you, rectangles, ellipses, triangles, lines, and can create more.</p>
<p><strong>Features</strong></p>
<p>- You can the presentation of professional quality with ultra-fast <strong>Ajax user interface</strong>.<br />
- Access to the presentation from any computer with an Internet connection and a modern browser. And there’s no need for dedicated hosting to use Preezo.<br />
- Re-use of images or content of the film from the simple to the gallery.<br />
- Save time and reduce headaches, working on a centralized web document.<br />
- Distribute presentations to clients and colleages without having to email huge PowerPoint files.</p>
<p><a href="http://www.denbagus.net/preezo-professional-quality-presentations">Preezo &#8211; professional quality presentations</a> is a post from: <a href="http://www.denbagus.net">denbagus blog</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.denbagus.net/preezo-professional-quality-presentations/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>8 Very Useful JQuery forms</title>
		<link>http://www.denbagus.net/jquery-forms</link>
		<comments>http://www.denbagus.net/jquery-forms#comments</comments>
		<pubDate>Tue, 10 Nov 2009 08:52:24 +0000</pubDate>
		<dc:creator>denbagus</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[jquery forms]]></category>
		<category><![CDATA[security]]></category>
		<category><![CDATA[user interface]]></category>

		<guid isPermaLink="false">http://denbagus.net/?p=1907</guid>
		<description><![CDATA[If I&#8217;ve written before about JQuery tables so this time I will share info about JQuery  forms.Jjquery can help you lots with form validation, I hope with this information you can more new knowledge about how to make form validation using jquery 1. Password Strength – Estimates brute force time (jQuery plugin) Brute force, in [...]<p><a href="http://www.denbagus.net/jquery-forms">8 Very Useful JQuery forms</a> is a post from: <a href="http://www.denbagus.net">denbagus blog</a></p>
]]></description>
			<content:encoded><![CDATA[<div id="tweetbutton1907" class="tw_button" style="float:right;margin-left:10px;"><a href="http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2Frp7Exh&amp;text=RT%20%40denbagus%208%20Very%20Useful%20JQuery%20forms&amp;related=&amp;lang=en&amp;count=vertical&amp;counturl=http%3A%2F%2Fwww.denbagus.net%2Fjquery-forms" class="twitter-share-button"  style="width:55px;height:22px;background:transparent url('http://www.denbagus.net/wp-content/plugins/wp-tweet-button/tweetn.png') no-repeat  0 0;text-align:left;text-indent:-9999px;display:block;">Tweet</a></div><p>If I&#8217;ve written before about JQuery tables so this time I will share info about JQuery  forms.Jjquery can help you lots with form validation, I hope with this information you can more new knowledge about how to make form validation using jquery<span id="more-1907"></span></p>
<h2>1. <a href="http://www.unwrongest.com/projects/password-strength/">Password Strength – Estimates brute force time (jQuery plugin) </a></h2>
<p><a href="http://denbagus.net/wp-content/uploads/2009/11/Password-Strength.jpg"><img class="aligncenter size-full wp-image-1911" title="Password Strength" src="http://denbagus.net/wp-content/uploads/2009/11/Password-Strength.jpg" alt="Password Strength" width="487" height="287" /></a></p>
<p>Brute force, in case of attack your site, this method can crack the devil. This plugin shows the strength of passwords to tell you how long it takes to brute force.</p>
<h2>2. <a href="http://digitalbush.com/projects/masked-input-plugin/">Masked Input Plugin</a></h2>
<p><a href="http://denbagus.net/wp-content/uploads/2009/11/Masked-Input-Plugin.jpg"><img class="aligncenter size-full wp-image-1912" title="Masked Input Plugin" src="http://denbagus.net/wp-content/uploads/2009/11/Masked-Input-Plugin.jpg" alt="Masked Input Plugin" width="487" height="308" /></a></p>
<p>This mask input plugin for Jquery library JavaScript. Allows the user to more easily enter fixed width input where you want to enter data in a certain format (dates, phone numbers, etc.). This was in Internet Explorer 6 / 7, Firefox 1.5 / 2 / 3, Safari, Opera and Chrome. The mask is determined by the mixed model of the mask and the literal definition of the mask. Each character that is not included in the list of definitions below as a literal mask. Mask literals will be automatically registered for the user, because the nature and can not be removed by the user.</p>
<h2>3. <a href="http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin">Ajax Fancy Captcha </a></h2>
<p><a href="http://denbagus.net/wp-content/uploads/2009/11/Ajax-Fancy-Captcha.jpg"><img class="aligncenter size-full wp-image-1913" title="Ajax Fancy Captcha" src="http://denbagus.net/wp-content/uploads/2009/11/Ajax-Fancy-Captcha.jpg" alt="Ajax Fancy Captcha" width="377" height="279" /></a></p>
<p>Fancy Ajax Captcha is a JQuery plugin that will help your web pages spammers and robots. We will provide a new and intuitive form, fill in the &#8220;human check&#8221; problem. To do this you will be asked to drag the item into the circle. Captcha security level only, on average, with an emphasis on beautiful and convenient features, and they do not provide adequate protection from unwanted &#8220;guests&#8221;. Design and main components easily modify and personalize, take a look at the file structure for further information.</p>
<h2>4. <a href="http://bassistance.de/jquery-plugins/jquery-plugin-validation/">jQuery plugin: Validation</a></h2>
<p><a href="http://denbagus.net/wp-content/uploads/2009/11/Validation.jpg"><img class="aligncenter size-full wp-image-1914" title="Validation" src="http://denbagus.net/wp-content/uploads/2009/11/Validation.jpg" alt="Validation" width="487" height="308" /></a></p>
<p>To verify that this is a reliable, flexible plug Jquery form, you will never have to check. It is an unobtrusive user experience, user violates as possible with unnecessary messages. To answer through the web site for more than just an event, serves as KeyUp and Blur, without complex configuration.</p>
<h2>5. <a href="http://pixelmatrixdesign.com/weblog/comments/announcing_uniform/">Pixelmatrix Design – Announcing Uniform</a></h2>
<p><a href="http://denbagus.net/wp-content/uploads/2009/11/Announcing-Uniform.jpg"><img class="aligncenter size-full wp-image-1915" title="Announcing Uniform" src="http://denbagus.net/wp-content/uploads/2009/11/Announcing-Uniform.jpg" alt="Announcing Uniform" width="475" height="273" /></a></p>
<p>Any agreement between the user interface design with a form of control is not enough. Often, checkboxes, selects and radio buttons do not appear to be consistent in all browsers. Uniforms, plugin for JQuery, you can style, radio and check boxes you always.</p>
<h2>6. <a href="http://www.whitespace-creative.com/jquery/jNice/">jQuery Nice Form</a></h2>
<p><a href="http://denbagus.net/wp-content/uploads/2009/11/Nice-Form.jpg"><img class="aligncenter size-full wp-image-1916" title="Nice Form" src="http://denbagus.net/wp-content/uploads/2009/11/Nice-Form.jpg" alt="Nice Form" width="411" height="293" /></a></p>
<p>Nice Jquery looking to create custom form elements, as usual. It&#8217;s simple, but it can seem complicated and individual as you want.</p>
<h2>7. <a href="http://marghoobsuleman.com/jquery-image-dropdown">JavaScript image combobox  v1.5 </a></h2>
<p><img class="aligncenter size-full wp-image-1917" title="JavaScript image combobox" src="http://denbagus.net/wp-content/uploads/2009/11/JavaScript-image-combobox.jpg" alt="JavaScript image combobox" width="476" height="271" /></p>
<p>Are you tired of Pull-old? Try again, the menu selection screen. You can use the symbol for each option. Working with the current &#8220;element, click.</p>
<h2>8.<a href="http://www.dfc-e.com/metiers/multimedia/opensource/jqtransform/">Opensource – AJAX – Jqtransform – jQuery form plugin</a></h2>
<p><img class="aligncenter size-full wp-image-1918" title="Opensource – AJAX – Jqtransform" src="http://denbagus.net/wp-content/uploads/2009/11/Opensource-–-AJAX-–-Jqtransform.jpg" alt="Opensource – AJAX – Jqtransform" width="488" height="307" /></p>
<p>This plugin JQuery plugin that you style form elements on the skin with their own parameters for each browser you can use.</p>
<p><a href="http://www.denbagus.net/jquery-forms">8 Very Useful JQuery forms</a> is a post from: <a href="http://www.denbagus.net">denbagus blog</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.denbagus.net/jquery-forms/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>8 great MooTools library for web designers</title>
		<link>http://www.denbagus.net/8-great-mootools-library-for-web-designers</link>
		<comments>http://www.denbagus.net/8-great-mootools-library-for-web-designers#comments</comments>
		<pubDate>Tue, 06 Oct 2009 04:25:44 +0000</pubDate>
		<dc:creator>denbagus</dc:creator>
				<category><![CDATA[javascript]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[ajax]]></category>
		<category><![CDATA[calendar]]></category>
		<category><![CDATA[download]]></category>
		<category><![CDATA[Gallery]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[mootools]]></category>
		<category><![CDATA[mootools paging]]></category>
		<category><![CDATA[user interface]]></category>

		<guid isPermaLink="false">http://denbagus.net/?p=1789</guid>
		<description><![CDATA[Mootools is a compact, modular, object-oriented JavaScript framework for experienced developers JavaScript. This allows you to write powerful, flexible, and cross-browser code with its elegant, well documented API and consistent. MooTools code respects strict standards and does not throw any warnings. It is well documented and meaningful variable names: the pleasure to navigate and easy [...]<p><a href="http://www.denbagus.net/8-great-mootools-library-for-web-designers">8 great MooTools library for web designers</a> is a post from: <a href="http://www.denbagus.net">denbagus blog</a></p>
]]></description>
			<content:encoded><![CDATA[<div id="tweetbutton1789" class="tw_button" style="float:right;margin-left:10px;"><a href="http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2FshpjpN&amp;text=RT%20%40denbagus%208%20great%20MooTools%20library%20for%20web%20designers&amp;related=&amp;lang=en&amp;count=vertical&amp;counturl=http%3A%2F%2Fwww.denbagus.net%2F8-great-mootools-library-for-web-designers" class="twitter-share-button"  style="width:55px;height:22px;background:transparent url('http://www.denbagus.net/wp-content/plugins/wp-tweet-button/tweetn.png') no-repeat  0 0;text-align:left;text-indent:-9999px;display:block;">Tweet</a></div><p><strong>Mootools </strong>is a compact, modular, object-oriented JavaScript framework for experienced developers JavaScript. This allows you to write powerful, flexible, and cross-browser code with its elegant, well documented API and consistent.</p>
<p><strong>MooTools </strong>code respects strict standards and does not throw any warnings. It is well documented and meaningful variable names: the pleasure to navigate and easy to understand.this is <strong>8 great MooTools library for web designers</strong> :</p>
<h2>1. MilkChart &#8211; convert tables in Chart</h2>
<p><a title="milkchart" href="http://code.google.com/p/milkchart/" target="_self">MilkChart </a>is easy to use, but solid collection of MooTools to<strong> convert tables in Chart</strong>.it use &lt;canvas&gt; tag  and supports the following charttypes:</p>
<p>* Column<br />
* Bar<br />
* Line<br />
* Scatter<br />
* Pie</p>
<p><img class="alignnone" title="MilkChart" src="http://www.webresourcesdepot.com/wp-content/uploads/image/mootools-chart-library.gif" alt="" width="480" height="252" /><br />
The library has many options for customizing the variables:</p>
<p>* Width, height<br />
* Font color, font size, font<br />
* The curve of colors and weights<br />
* The names of the line (on / off)<br />
* And much more ..</p>
<p>MilkChart not a test page, which can be played, but it is well documented and detailed information to get started, <a title="milkchart" href="http://code.google.com/p/milkchart/wiki/Base" target="_blank">click here</a>.</p>
<h2>2. beautiful sliding share</h2>
<p><img class="alignnone" title="sliding login panel " src="http://www.webresourcesdepot.com/wp-content/uploads/image/sliding-login-panel.jpg" alt="" width="480" height="215" /></p>
<p><strong>Web-kreation</strong> is sharing a beautiful house is sliding share of a very important practical for use at sites with limited space.</p>
<p>It has 2 versions:</p>
<p>* When using Mootools<br />
* Using JQuery (an enhanced version of media design and functionality)</p>
<p>Panel work carried out duplicate content, and can be easily upgraded in order to be used for any other function (), such as navigation, search forms, etc.</p>
<p>He also Plugins for WordPress:</p>
<ul>
<li><a href="http://justintadlock.com/archives/2009/06/25/sliding-panel-wordpress-plugin" target="_blank">Sliding Panel: WordPress Plugin</a> by Justin Tadlock.</li>
<li><a href="http://wordpress.org/extend/plugins/superslider-login/" target="_blank">SuperSlider-Login</a> by Twincascos.</li>
</ul>
<p>This is only <strong>HTML CSS JavaScript</strong> piece of code and has no unified system of access. This function must be adapted to the use of code.</p>
<h2>3. paging and multi-filtering</h2>
<p><img class="alignnone" title="mootools multi select" src="http://www.webresourcesdepot.com/wp-content/uploads/image/mootools-multi-select.gif" alt="" width="480" height="195" /></p>
<p>In some cases, a standard HTML list box does not provide good usability and the need to move or use a keyboard and mouse.<a title="mootools multi select" href="http://www.justindonato.com/post/mtmultiselect" target="_blank">MTMultiselect </a>Widget, select the <strong>paging and multi-filtering is built with Mootools</strong>.<br />
User can easily see the selected and unselected items and can get the full functionality using only a mouse.<br />
Widget can be completely designed using <strong>CSS</strong>.For the demonstration, <a title="mootools multi select" href="http://www.justindonato.com/demo/mtmultiselect/" target="_blank">click here</a>.</p>
<h2><strong>4. MooFlow &#8211; Gallery with Mootools</strong></h2>
<p><img class="alignnone" title="mootools coverflow" src="http://www.webresourcesdepot.com/wp-content/uploads/image/mootools-coverflow.jpg" alt="" width="480" height="210" /></p>
<p><a title="mooflow" href="http://www.outcut.de/MooFlow/" target="_blank">MooFlow </a>Cover Flow is highly<strong> customizable and gallery will be built with Mootools</strong>.It is easy to configure and automatically access the <strong>HTML </strong>element with the images.MooFlow has several functions, such as:</p>
<p>* Support for full screen<br />
* Navigation using the mouse wheel<br />
* Navigation with the keyboard<br />
* Auto Play &amp; Loop<br />
* Reflections JavaScript automated image</p>
<p>The script is also flexible image loading. Data source can <strong>JSON</strong> or <strong>HTML </strong>with a choice of filter.And its interface is only through the skin <strong>CSS</strong>.</p>
<h2>5. Mootools file manager</h2>
<p><img class="alignnone" title="mootools file manager" src="http://www.webresourcesdepot.com/wp-content/uploads/image/mootools-file-manager.jpg" alt="" width="480" height="120" /></p>
<p><a title="mootools file manager" href="http://og5.net/christoph/article/MooTools_based_FileManager" target="_blank">Mootools file manager</a> is a file manager that allows you to manage files from folders style.It runs in a modal box  with <strong>AJAX interface</strong> that will help you:</p>
<p>* View files and folders quickly<br />
* Rename, delete, move (Drag &amp; drop), Copy (Ctrl + drag), and download files<br />
Guest Details images, text files, compressed files, or audio content<br />
* Ability to automatically resize large images load<br />
* Use to select the file where you should enter into background applications</p>
<p>FileManager script used <a title="fancyupload" href="http://github.com/digitarald/digitarald-fancyupload/tree/3.0wip" target="_blank">FancyUpload3 </a>will soon be released for downloading files beautifully.TinyMCE and can be easily integrated as well.For a standard demo, <a href="http://og5.net/christoph/Scripts/FileManager/Demos" target="_blank">click here</a> and to see a demonstration of integrated TinyMCE integrated demo, <a href="http://og5.net/christoph/Scripts/FileManager/Demos/tinymce.php" target="_blank">click here</a>.</p>
<h2>6. MochaUI a library of<strong> user interface</strong></h2>
<p><img class="alignnone" title="user interface library" src="http://www.webresourcesdepot.com/wp-content/uploads/image/mocha-ui.jpg" alt="" width="480" height="149" /></p>
<p><a title="mootools user interface" href="http://mochaui.com/" target="_blank">MochaUI </a>a library of<strong> user interface</strong> based on the framework Mootools <strong>JavaScript</strong>.<br />
The library does not use any photos, but tags for canvas gradients, rounded corners and shadows.<br />
It is easy to install, both horizontally and vertically fluid layout module with columns and panels. Columns and slabs (plates can be processed together) can contract, extension, and size.</p>
<p>New Windows could be created immediately, but may be:</p>
<p>* Reduce the center to draw the zoom,<br />
* Collapsed, and expand<br />
* Expand / Collapse<br />
* Minimized / restored and closed.</p>
<p>Example of the function, <a title="mootools user interface demo" href="http://mochaui.com/demo/" target="_blank">click here</a></p>
<h2>7. Datagrid</h2>
<p><img class="alignnone" title="mootools datagrid" src="http://www.webresourcesdepot.com/wp-content/uploads/image/mootools-datagrid.jpg" alt="" width="480" height="182" /></p>
<p><a title="mootools datagrid" href="http://www.omnisdata.com/omnigrid/" target="_blank">Omnigrid </a>is part of the network for <strong>free MooTools has advanced features</strong>.With <a title="flexigrid" href="http://www.phatfusion.net/sortabletable" target="_blank">Flexigrid </a>inspired (for Jquery) and <a title="sortabletable" href="http://www.phatfusion.net/sortabletable" target="_blank">SortableTable</a>, Omnigrid similar functions.</p>
<p>In addition, the client-side sorting, using server-side PHP script (mentioned), it easily connects to the data and can be sorted / numbering you have an unlimited number of records.The columns can be changed by a few selected records (internal data is shown with an accordion), you can customize the look and much more.</p>
<h2>8. MooGenda -  <strong>calendar of events</strong></h2>
<p><img class="alignnone" title="mootools json calendar" src="http://www.webresourcesdepot.com/wp-content/uploads/image/mootools-json-calendar.jpg" alt="" width="480" height="197" /></p>
<p><a title="mootools agenda" href="http://www.moonkiki.com/moonkiki/moogenda/" target="_blank">MooGenda </a>script built in the <strong>calendar of events</strong>, with MooTools, which states the facts requests <strong>JSON</strong>.Calendar supports <strong>drag and drop</strong> event and every action JSON request is sent to the update immediately.This calendar MooTools supports 3 different ways:</p>
<p>* Show date<br />
* Weekly View<br />
* Month View</p>
<p>With a few clicks, the calendar switch between the windows, with <strong>sliding animations</strong> and <strong>displays information</strong> that the day / View / month.</p>
<p><a href="http://www.denbagus.net/8-great-mootools-library-for-web-designers">8 great MooTools library for web designers</a> is a post from: <a href="http://www.denbagus.net">denbagus blog</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.denbagus.net/8-great-mootools-library-for-web-designers/feed</wfw:commentRss>
		<slash:comments>11</slash:comments>
		</item>
		<item>
		<title>10 Tips for Kick Awesome Web Application User Interface Design</title>
		<link>http://www.denbagus.net/10-tips-for-kick-awesome-web-application-user-interface-design</link>
		<comments>http://www.denbagus.net/10-tips-for-kick-awesome-web-application-user-interface-design#comments</comments>
		<pubDate>Fri, 17 Apr 2009 23:21:23 +0000</pubDate>
		<dc:creator>denbagus</dc:creator>
				<category><![CDATA[tips]]></category>
		<category><![CDATA[web app]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[user interface]]></category>
		<category><![CDATA[web app design]]></category>
		<category><![CDATA[web application]]></category>

		<guid isPermaLink="false">http://denbagus.net/?p=800</guid>
		<description><![CDATA[We&#8217;ve done our fair share of web app designs here, but often don&#8217;t get to share them for NDA reasons or the simple fact that the developers are still working on them somewhere! No worries, fair reader. For we shall approach these diplomatically as to protect the innocent. Behold, the top 10 list of yore! [...]<p><a href="http://www.denbagus.net/10-tips-for-kick-awesome-web-application-user-interface-design">10 Tips for Kick Awesome Web Application User Interface Design</a> is a post from: <a href="http://www.denbagus.net">denbagus blog</a></p>
]]></description>
			<content:encoded><![CDATA[<div id="tweetbutton800" class="tw_button" style="float:right;margin-left:10px;"><a href="http://twitter.com/share?url=http%3A%2F%2Fbit.ly%2FtFN92S&amp;text=RT%20%40denbagus%2010%20Tips%20for%20Kick%20Awesome%20Web%20Application%20User%20Interface%20Design&amp;related=&amp;lang=en&amp;count=vertical&amp;counturl=http%3A%2F%2Fwww.denbagus.net%2F10-tips-for-kick-awesome-web-application-user-interface-design" class="twitter-share-button"  style="width:55px;height:22px;background:transparent url('http://www.denbagus.net/wp-content/plugins/wp-tweet-button/tweetn.png') no-repeat  0 0;text-align:left;text-indent:-9999px;display:block;">Tweet</a></div><p>We&#8217;ve done our fair share of <strong>web app</strong> designs here, but often don&#8217;t get to share them for NDA reasons or the simple fact that the developers are still working on them somewhere! No worries, fair reader. For we shall approach these diplomatically as to protect the innocent. Behold, the top 10 list of yore!<br />
<strong>1. Text Text Text</strong></p>
<p>Web apps are huge, complicated beasts, even if you try to keep them simple. There are dashboards and login pages and edit profile pages and who knows what else. So do me a favor and keep everything text. Navigation, headers, everything. Because I guarantee you the developers are going to have to setup more pages once you&#8217;re done and they shouldn&#8217;t have to jump in photoshop to change your cool looking buttons (note, see this post about accesible, good looking buttons) or re-do the entire navigation.<br />
<span id="more-800"></span></p>
<p><strong>2. Leave the Images at the Door</strong></p>
<p>Did I mention to keep everything text? Even your images? What the heck am I talking about? CSS background images, baby. Look, anything that is part of the design of the page should be a background image. The logo, the icons everything. It&#8217;s much easier to change out later and adjust the size as necessary. Plus, you&#8217;re adding another layer of accessibility for people who use screen readers or mobile devices that don&#8217;t support images at all. Just use an overflow:hidden and text-indent:-1000px to hide the text and let the background image show through.</p>
<p><strong>3. Javascript Effects</strong></p>
<p>With the explosion of javascript libraries, it&#8217;s easier than ever for a designer to make our visions reality. But, as Spiderman&#8217;s Uncle Ben says, &#8220;With great power comes great responsibility.&#8221; Don&#8217;t add animations unless they&#8217;re necessary and intuitive. &#8220;It&#8217;s really neat&#8221; is not a good reason. And don&#8217;t let your clients talk you into just because they like the animation either. Remember Flash intros? Yeah they thought that was a good idea, too. Make it useful, people!</p>
<p><strong>4. Javascript Libraries</strong></p>
<p>I&#8217;m not going to push any one library (jQuery, cough cough), but keep in mind that your developers may prefer one over the other. Make sure you know beforehand. For example, a project I worked on recently was done in Rails and they say Prototype fits best with it. So I had a bunch of stuff already done in jQuery and they had a bunch of stuff done in Prototype. Oh crap! Thankfully, you can run jQuery in no conflict mode, but I got lucky.</p>
<p><strong>5. Make it Easy on the Developers</strong></p>
<p>I think all of the above kind of culminates in a mindset that says, &#8220;How can I build this in a way that is easy for the developers to take my layouts and expand them to make an entire application?&#8221; Keeping everything text, making button creation easy, providing CSS styles for common elements like lists, inputs and headers all make this happen. Even go the extra mile. The last project I did had an area that would be customized for each client they signed up. So I grouped all the CSS styles for that into one area so they won&#8217;t have to hunt through a massive file each time. Your code has to be as modular as possible.</p>
<p><strong><br />
</strong></p>
<p><strong>6. You&#8217;re Not Always Right</strong></p>
<p>Yes, we&#8217;re kick-awesome designers and UI guys, but we don&#8217;t always get it right. The thing I love about what we do can also hinder us. We deal with so many completely different industries that it&#8217;s hard to grasp everything on the first go around. Don&#8217;t be afraid to rethink what you&#8217;ve done. Remember, design is problem solving. If you didn&#8217;t solve the problem you didn&#8217;t design it well enough in the first place.</p>
<p><strong>7. The Client Isn&#8217;t Always Right</strong></p>
<p>On the flip side, don&#8217;t be afraid to question your client&#8217;s pre-conceived ideas about how something should work. You may come up with a much more elegant and intuitive solution that makes everyone excited. You have the advantage of having an unbiased, outsider&#8217;s view of things. If it doesn&#8217;t make sense to you, it probably won&#8217;t make sense to the user (this goes for a lot of things, not just <strong>web app design</strong>).<br />
8. Liquid Layout</p>
<p>This may not apply in every circumstance, but I think it&#8217;s best to design a web app with scalability in mind. If you have a sidebar it&#8217;s ok to keep it a fixed width, but your main content column should grow and shrink with the browser. If someone is using an application, they should be able to choose how wide or short they want the window to be (to a certain point!).</p>
<p><strong>9. Don&#8217;t Be Afraid of Tables!</strong></p>
<p>Yeah I know, I can hear the screams of horror right now. Tables suck, man! But hey, if you&#8217;re creating tabular data then it&#8217;s ok. It&#8217;s even preferable. And with CSS you can make them nice and pretty. Don&#8217;t use tables for layout, but if you&#8217;re creating an app with data that will be in rows and columns, brush the dust off those tables and see what they can do.</p>
<p><strong>10. Interaction Feedback</strong></p>
<p>That good old :hover tag can be a great asset to let your user know what&#8217;s going on. Table row hovers are a great indicator. Same for navigation, buttons and icons. If you do background color changes, make sure there&#8217;s plenty of padding around them so it&#8217;s easy to hit the link. Or if you&#8217;ve got icons with no text explaining them, use something like UniTip to have a description pop up. Feedback like this may seem simple, but I think it has a profound effect in allowing the user to feel comfortable and have a better idea of what&#8217;s going on. It helps enforce the idea that the app is to be used, not just looked at.</p>
<p>So there you go, your top 10 list for kick awesome web app design. Go forth and make mad crazy awesome, easy to use, well built <strong>web app designs</strong>.</p>
<p><a href="http://www.denbagus.net/10-tips-for-kick-awesome-web-application-user-interface-design">10 Tips for Kick Awesome Web Application User Interface Design</a> is a post from: <a href="http://www.denbagus.net">denbagus blog</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.denbagus.net/10-tips-for-kick-awesome-web-application-user-interface-design/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

