<?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>Our Geek Life &#187; Web Design &amp; Development</title>
	<atom:link href="http://www.ourgeeklife.com/tag/design-development/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.ourgeeklife.com</link>
	<description>Geek Gadgets, Geek Life, Geek Blog, Geek Reviews and more.</description>
	<lastBuildDate>Thu, 26 Aug 2010 16:52:29 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=abc</generator>
		<item>
		<title>Form and Function: Creativity and Usability Unite</title>
		<link>http://www.ourgeeklife.com/2009/04/08/form-and-function-creativity-and-usability-unite/</link>
		<comments>http://www.ourgeeklife.com/2009/04/08/form-and-function-creativity-and-usability-unite/#comments</comments>
		<pubDate>Wed, 08 Apr 2009 21:08:34 +0000</pubDate>
		<dc:creator>shegeek</dc:creator>
				<category><![CDATA[Web Design & Development]]></category>
		<category><![CDATA[Creativity]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.ourgeeklife.com/?p=325</guid>
		<description><![CDATA[What is the foot without the little toe? Or the head without a heart?   Could you walk without your little toes?  Can you imagine thoughts without emotions?  That&#8217;s exactly what you experience when you visit websites created without design and usability as complementary components &#8211; emotionless thoughts, thoughtless emotions, footless toes and toeless feet!    In &#8220;Form or <a href="http://www.ourgeeklife.com/2009/04/08/form-and-function-creativity-and-usability-unite/"> <b>...Read the Rest</b></a>]]></description>
			<content:encoded><![CDATA[<h4><span style="color: #ffcc00;"><img class="alignleft size-full wp-image-902" title="toeless foot" src="http://www.ourgeeklife.com/wp-content/uploads/2009/04/foot.png" alt="toeless foot" width="172" height="151" />What is the foot without the little toe? </span></h4>
<h4><span style="color: #ffcc00;">Or the head without a heart?</span></h4>
<p> <br />
Could you walk without your little toes?  Can you imagine thoughts without emotions?  That&#8217;s exactly what you experience when you visit websites created without design and usability as complementary components &#8211; emotionless thoughts, thoughtless emotions, footless toes and toeless feet!   </p>
<p>In &#8220;<a href="http://www.ourgeeklife.com/2009/03/09/form-or-function-when-creativity-and-usability-collide/">Form or Function: When Creativity and Usability Collide</a>&#8220;, I discussed the often oppositionary principles of creativity and usability.  This is a subject near and dear to my heart because nothing irks me more than beautiful design that is not functional and functional design that is flat out ugly.  While it can be challenging to blend form and function, it is not only possible, it is necessary.</p>
<h4><span style="color: #ffcc00;">Did you hear what that crazy guy Sullivan said?</span></h4>
<p> <br />
In 1896, architect Louis Henri Sullivan said, &#8220;Form ever follows function.&#8221;  Unfortunately, the simple elegance and beauty of this statement is lost and bastardized into meanings that Sullivan never intended.  Regardless of what you may have heard or been taught, this chunky little nugget of wisdom was never uttered to imply that function was more important than form.   It is also important to acknowledge that contrary to pop-culture &#8220;wisdom&#8221;, dying for one&#8217;s art is highly overrated, particularly when the art becomes the means to the end. </p>
<p>Sullivan&#8217;s statement started the debate about form and function.  However, Frank Lloyd Wright made it perfectly clear by stating, &#8220;Form and function are one.&#8221; </p>
<p>All ego aside, the naked truth is simply this:  <span style="color: #00ff00;">Form and function are inseparably intertwinable. </span>Good sites render an understanding of this ideal.  Great sites exemplify it.<br />
<span id="more-325"></span></p>
<h4><span style="color: #ffcc00;">A website should&#8230;</span></h4>
<p> <br />
What is the goal of your website?  It should be to communicate.  How effectively you communicate will result in the amassing of fans or detractors.  That first impression is what keeps people on your site or drives them away.  Make no mistake about it: ugly and unusable sites do not attract return visitors.  Note the <span style="color: #00ff00;">AND</span> in that statement.</p>
<p><span style="color: #00ffff;"><strong>&#8220;Informational Mediocrity&#8221;</strong></span></p>
<p>Most corporate and government sites are information-rich.  These sites succeed in making the information available to visitors, but quite frankly, the design is usually a bit &#8220;safe&#8221;.  The information is well-organized, easy to find, and you won&#8217;t likely get lost along the way.  It may seem silly to think that a corporate or government site should have an &#8220;attitude&#8221;, but brand is everything.  If your brand says, &#8220;Meh. Get your information and go&#8221;, that is exactly what the visitors will do. </p>
<p><span style="color: #00ffff;"><strong>&#8220;Peculiar Pandemonium&#8221;</strong></span></p>
<p>Some sites are all about the razzle dazzle.  There may be some function mixed in there, but the designer was obviously more interested in the purity of the design than he/she was in whether the visitors to the site would have half a clue how to get to the information they need.  Sites in this cateogry are often bloated with too much eye candy (flash apps, widgets and whats-its, oh my!) and rely solely on the &#8220;WOW&#8221; factor in an attempt to woo visitors into returning.  The problem here is that the information is scant or hidden, navigation and functionality BE DAMNED!</p>
<p>What is a great designer to do?</p>
<h4><span style="color: #ffcc00;">Elemental Organic Design</span></h4>
<p> <br />
Before you hit me with choruses of &#8220;not another buzz phrase&#8221;, let me emphatically state that I abhor them.  Buzz phrases are overused and more often than not, misunderstood by those trying to impress you by using them in ordinary conversation.  However, simply put, great websites are organic. </p>
<p>What is organic design?  Organic design is the harmonious blending of creativity and usability that integrates aesthetically pleasing imagery with intuitive navigation and organization.  In other words &#8211; it looks good and you can get to the information on the site easily.  Elemental organic design simply means that each piece of the website has a purpose, functionally and aesthetically, that maps back to the goal for the website which is communication.  No single piece or part can or should stand alone, and the whole site is greater than the sum of its parts.</p>
<p>Seems like a no-brainer, don&#8217;t you think?</p>
<h4><span style="color: #ffcc00;">How do we get there?</span></h4>
<p> <br />
The concepts are easy to understand, but the practice of making usable beautiful sites is more challenging.  You can&#8217;t tie your vision of success to winning the perceived battle of usability vs creativity.   You must invest in the entire project, not just your piece of it, focusing on excellence over ego. </p>
<p>What does success look like?  I will leave the usability/design blend article in this series for HG to craft.  He straddles the UX/UI and Design Geek line on a daily basis, operating as a bit of both in his &#8220;day job&#8221; and certainly both in our business.  We are constantly re-evaluating previously completed work in order to improve our work product and better serve our clients.  It&#8217;s a work in progress, and something every designer and UX/UI geek should consider.</p>
<h4>Part III</h4>
<h4><span style="color: #ffffff;">The Two-Headed Beast &#8211; UX/UI Designer</span></h4>
<p><!-- PHP 5.x --></p>
<div class="sociable">
<div class="sociable_tagline">
<strong>Share:</strong>
</div>
<ul>
<li class="sociablefirst"><a rel="nofollow"  target="_blank" href="http://twitter.com/home?status=Form%20and%20Function%3A%20Creativity%20and%20Usability%20Unite%20-%20http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F04%2F08%2Fform-and-function-creativity-and-usability-unite%2F" title="Twitter"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/twitter.png" title="Twitter" alt="Twitter" class="sociable-hovers" /></a></li>
<li><a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F04%2F08%2Fform-and-function-creativity-and-usability-unite%2F&amp;t=Form%20and%20Function%3A%20Creativity%20and%20Usability%20Unite" title="Facebook"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a></li>
<li><a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F04%2F08%2Fform-and-function-creativity-and-usability-unite%2F&amp;title=Form%20and%20Function%3A%20Creativity%20and%20Usability%20Unite&amp;notes=What%20is%20the%20foot%20without%20the%C2%A0little%C2%A0toe%3F%20%0D%0AOr%20the%20head%20without%20a%20heart%3F%0D%0A%C2%A0%0D%0ACould%20you%C2%A0walk%20without%20your%20little%20toes%3F%C2%A0%20Can%20you%20imagine%20thoughts%20without%20emotions%3F%C2%A0%20That%27s%20exactly%20what%20you%20experience%20when%C2%A0you%20visit%20websites%20created%20without%20design" title="del.icio.us"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a></li>
<li><a rel="nofollow"  target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F04%2F08%2Fform-and-function-creativity-and-usability-unite%2F&amp;title=Form%20and%20Function%3A%20Creativity%20and%20Usability%20Unite&amp;bodytext=What%20is%20the%20foot%20without%20the%C2%A0little%C2%A0toe%3F%20%0D%0AOr%20the%20head%20without%20a%20heart%3F%0D%0A%C2%A0%0D%0ACould%20you%C2%A0walk%20without%20your%20little%20toes%3F%C2%A0%20Can%20you%20imagine%20thoughts%20without%20emotions%3F%C2%A0%20That%27s%20exactly%20what%20you%20experience%20when%C2%A0you%20visit%20websites%20created%20without%20design" title="Digg"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a></li>
<li><a rel="nofollow"  target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F04%2F08%2Fform-and-function-creativity-and-usability-unite%2F&amp;title=Form%20and%20Function%3A%20Creativity%20and%20Usability%20Unite" title="StumbleUpon"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a></li>
<li class="sociablelast"><a rel="nofollow"  target="_blank" href="mailto:?subject=Form%20and%20Function%3A%20Creativity%20and%20Usability%20Unite&amp;body=http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F04%2F08%2Fform-and-function-creativity-and-usability-unite%2F" title="email"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a></li>
</ul>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.ourgeeklife.com/2009/04/08/form-and-function-creativity-and-usability-unite/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Form or Function:  When Creativity and Usability Collide</title>
		<link>http://www.ourgeeklife.com/2009/03/09/form-or-function-when-creativity-and-usability-collide/</link>
		<comments>http://www.ourgeeklife.com/2009/03/09/form-or-function-when-creativity-and-usability-collide/#comments</comments>
		<pubDate>Mon, 09 Mar 2009 18:57:17 +0000</pubDate>
		<dc:creator>shegeek</dc:creator>
				<category><![CDATA[Web Design & Development]]></category>
		<category><![CDATA[Creativity]]></category>
		<category><![CDATA[Usability]]></category>

		<guid isPermaLink="false">http://www.ourgeeklife.com/?p=191</guid>
		<description><![CDATA[The significant problems we have cannot be solved with the thinking used to create them.   Albert Einstein The basic need of the creator is independence.  The reasoning mind cannot work under any form of compulsion. It cannot be curbed, sacrificed or subordinated to any consideration whatsoever. It demands total independence in function and in motive.   Gary <a href="http://www.ourgeeklife.com/2009/03/09/form-or-function-when-creativity-and-usability-collide/"> <b>...Read the Rest</b></a>]]></description>
			<content:encoded><![CDATA[<blockquote><p><img class="alignleft size-medium wp-image-207" title="Form and Function" src="http://www.ourgeeklife.com/wp-content/uploads/2009/03/form_function_1-300x300.jpg" alt="Form and Function" width="150" height="150" /></p>
<p><span style="color: #ff00ff;">The significant problems we have cannot be solved with the thinking used to create them.   </span>Albert Einstein</p>
<p><span style="color: #00ccff;">The basic need of the creator is independence.  The reasoning mind cannot work under any form of compulsion. It cannot be curbed, sacrificed or subordinated to any consideration whatsoever. It demands total independence in function and in motive. </span>  Gary Cooper as Howard Roark in The Fountainhead </p>
<p><span style="color: #ffcc00;">It is the pervading law of all things organic, and inorganic, of all things physical and metaphysical, of all things human and all things super-human, of all true manifestations of the head, of the heart, of the soul, that the life is recognizable in its expression, that form ever follows function. This is the law.   </span>Louis Sullivan</p></blockquote>
<h2>Brand Me</h2>
<p>Web Designers &#8211; those gloriously creative, kind of quirky but brilliant minds that visualize the possibilities in vivid colors and memorable effects.   These free spirits make your &#8220;brand&#8221; visible to the world and for many years had almost free reign to design and create and bring websites to life.</p>
<h2>Use Me</h2>
<p>Usability is a big word these days, so big in fact, that we now have usability experts and &#8220;Certified Usability Analysts&#8221;.  Entire departments and organizations are dedicated to usability or the so-called &#8220;Human Factor&#8221; in design.  Usability specialists want to make sure that when you visit a web site, you know what is on the site, how to get to it, and that you can get there without really having to think about how to get there.</p>
<h2>Clash of the Titans</h2>
<p>It is the designer&#8217;s job to give birth to visual beauty of the site.  The designer takes the visions of the company or the business owner and breathes life into them in a way that is visually appealing and unique.</p>
<p>It is a usability specialist&#8217;s job to be analytical; to evaluate the interaction between the product and the human. For a usability specialist the focus is on function, not form.</p>
<p>In the minds of many designers, creativity is the most important part of a website.  Creativity is required to connect experiences, emotions and understanding.  Designers connect all the bits and pieces and create something that is greater than the sum of its parts.</p>
<p>In the mind of many usability specialists is the belief that usability is the most important part of a website.  A site must be easy to navigate, easy to read, easy to use.  If it isn&#8217;t usable, it is worthless.</p>
<p>When creativity and usability collide, there is often a power struggle between the designers and the usability experts.  I believe this is due, at least in part, to a misunderstanding of the oft-quoted mantra: &#8220;form follows function&#8221;.  In truth, neither form nor function is the key to a well-designed website.  It is the balance of the two that truly makes a website a success.</p>
<h4>Part II</h4>
<h5>Form and Function: When creativity and usability unite</h5>
<p><!-- PHP 5.x --></p>
<div class="sociable">
<div class="sociable_tagline">
<strong>Share:</strong>
</div>
<ul>
<li class="sociablefirst"><a rel="nofollow"  target="_blank" href="http://twitter.com/home?status=Form%20or%20Function%3A%20%20When%20Creativity%20and%20Usability%20Collide%20-%20http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F03%2F09%2Fform-or-function-when-creativity-and-usability-collide%2F" title="Twitter"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/twitter.png" title="Twitter" alt="Twitter" class="sociable-hovers" /></a></li>
<li><a rel="nofollow"  target="_blank" href="http://www.facebook.com/share.php?u=http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F03%2F09%2Fform-or-function-when-creativity-and-usability-collide%2F&amp;t=Form%20or%20Function%3A%20%20When%20Creativity%20and%20Usability%20Collide" title="Facebook"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/facebook.png" title="Facebook" alt="Facebook" class="sociable-hovers" /></a></li>
<li><a rel="nofollow"  target="_blank" href="http://delicious.com/post?url=http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F03%2F09%2Fform-or-function-when-creativity-and-usability-collide%2F&amp;title=Form%20or%20Function%3A%20%20When%20Creativity%20and%20Usability%20Collide&amp;notes=%0D%0A%0D%0AThe%20significant%20problems%20we%20have%20cannot%20be%20solved%20with%20the%20thinking%20used%20to%20create%20them.%C2%A0%C2%A0%20Albert%20Einstein%0D%0A%0D%0AThe%20basic%20need%20of%20the%20creator%20is%20independence.%C2%A0%20The%20reasoning%20mind%20cannot%20work%20under%20any%20form%20of%20compulsion.%20It%20cannot%20be%20curbed%2C%20sac" title="del.icio.us"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/delicious.png" title="del.icio.us" alt="del.icio.us" class="sociable-hovers" /></a></li>
<li><a rel="nofollow"  target="_blank" href="http://digg.com/submit?phase=2&amp;url=http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F03%2F09%2Fform-or-function-when-creativity-and-usability-collide%2F&amp;title=Form%20or%20Function%3A%20%20When%20Creativity%20and%20Usability%20Collide&amp;bodytext=%0D%0A%0D%0AThe%20significant%20problems%20we%20have%20cannot%20be%20solved%20with%20the%20thinking%20used%20to%20create%20them.%C2%A0%C2%A0%20Albert%20Einstein%0D%0A%0D%0AThe%20basic%20need%20of%20the%20creator%20is%20independence.%C2%A0%20The%20reasoning%20mind%20cannot%20work%20under%20any%20form%20of%20compulsion.%20It%20cannot%20be%20curbed%2C%20sac" title="Digg"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/digg.png" title="Digg" alt="Digg" class="sociable-hovers" /></a></li>
<li><a rel="nofollow"  target="_blank" href="http://www.stumbleupon.com/submit?url=http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F03%2F09%2Fform-or-function-when-creativity-and-usability-collide%2F&amp;title=Form%20or%20Function%3A%20%20When%20Creativity%20and%20Usability%20Collide" title="StumbleUpon"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/stumbleupon.png" title="StumbleUpon" alt="StumbleUpon" class="sociable-hovers" /></a></li>
<li class="sociablelast"><a rel="nofollow"  target="_blank" href="mailto:?subject=Form%20or%20Function%3A%20%20When%20Creativity%20and%20Usability%20Collide&amp;body=http%3A%2F%2Fwww.ourgeeklife.com%2F2009%2F03%2F09%2Fform-or-function-when-creativity-and-usability-collide%2F" title="email"><img src="http://www.ourgeeklife.com/wp-content/plugins/sociable/images/email_link.png" title="email" alt="email" class="sociable-hovers" /></a></li>
</ul>
</div>
]]></content:encoded>
			<wfw:commentRss>http://www.ourgeeklife.com/2009/03/09/form-or-function-when-creativity-and-usability-collide/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
