<?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>Smart Alice&#039;s Web Design Blog &#187; smart web design</title>
	<atom:link href="http://smartalicewebdesign.com/wordpress/tag/smart-web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://smartalicewebdesign.com/wordpress</link>
	<description>What makes a great web site? Join the conversation about what works or doesn&#039;t work when you plan, design, and build your web site.</description>
	<lastBuildDate>Mon, 22 Aug 2011 22:05:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1</generator>
		<item>
		<title>Creating Your Web-Scape</title>
		<link>http://smartalicewebdesign.com/wordpress/navigation/creating-your-web-scape/</link>
		<comments>http://smartalicewebdesign.com/wordpress/navigation/creating-your-web-scape/#comments</comments>
		<pubDate>Wed, 08 Jul 2009 21:17:45 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Navigation]]></category>
		<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[bad web design]]></category>
		<category><![CDATA[good web design]]></category>
		<category><![CDATA[Layout]]></category>
		<category><![CDATA[smart web design]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[visual interpretation]]></category>
		<category><![CDATA[web navigation]]></category>
		<category><![CDATA[web site analysis]]></category>
		<category><![CDATA[web site design]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=241</guid>
		<description><![CDATA[One of my favorite photographers Bruce Percy says the following about creating a landscape photograph: &#8220;The strength of an image lies many times in what we exclude from it.  Putting more things into a scene can often dilute the strength of the message. Keeping it simple is key.&#8221; Web designers would do well to follow [...]]]></description>
			<content:encoded><![CDATA[<p>One of my favorite photographers <strong><a title="Click to go to Bruce Percy" href="http://www.brucepercy.com/" target="_blank">Bruce Percy</a></strong> says the following about creating a landscape photograph:</p>
<p>&#8220;The strength of an image lies many times in what we exclude from it. <strong> Putting more things into a scene can often dilute the strength of the message. </strong> Keeping it simple is key.&#8221;</p>
<p>Web designers would do well to follow this advice.  Similar to creating a landscape, creating a web site should isolate and focus on what&#8217;s important by carefully selecting and streamlining graphic components.  We create something ugly and unfriendly when we clutter a page with multiple ideas, extraneous information, or unnecessary functionality.  Choose one idea and execute it well.  Don&#8217;t add stuff just because you can.</p>
<p><img class="alignleft size-full wp-image-255" title="Redundant menus" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/07/2menus.jpg" alt="Redundant menus" width="128" height="787" /></p>
<p><span style="font-size: medium;"><span style="font-weight: bold;">Redundancy</span></span></p>
<p>For an example of what I&#8217;m talking about, let&#8217;s visit the <a href="http://www.harvardparkandrec.org/" target="_blank"><strong>Harvard Parks &amp; Recreation</strong></a> web site.  The left column provides links to the rest of the site.  When I mouse over the Main Page tab, the same content links appear (see screen shot on the left).  Why do I need to see the same links twice?</p>
<p><span style="font-size: medium;"><span style="font-weight: bold;">Ugly Graphics &#8211; and lots of them</span></span></p>
<p>There are three different graphics on the home page.</p>
<p><strong>Landscape photo &#8211; used as background for title.</strong> Note the gray, out of focus, pixelated photo.  If you can&#8217;t find a great photo locally (hard to believe), why not spend $3 for a decent image from iStockPhoto?  The landscape theme is relevant, though.  The message it conveys is &#8220;lake/recreation/swimming/boating/fishing.&#8221;</p>
<p><img class="aligncenter size-full wp-image-268" title="lake" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/07/lake2.jpg" alt="lake" width="261" height="152" /></p>
<p><strong>Tree logo in the left corner.</strong> Suggests a conservation theme.  Relevant?  Not really.</p>
<p><img class="aligncenter size-full wp-image-269" title="tree" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/07/tree.jpg" alt="tree" width="116" height="159" /></p>
<p><strong>Lawn &#8211; close up photo used as background.</strong> The obvious message to me is lawn care. Also worth noting are the unnecessary functions that create more visual clutter.  The text next to the check box is barely legible.  Just because it&#8217;s easy to count and display visitor numbers, doesn&#8217;t mean it should be included.</p>
<p><img class="aligncenter size-full wp-image-270" title="grass" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/07/grass.jpg" alt="grass" width="132" height="107" /></p>
<p>Three different graphics with three different meanings create visual and mental confusion.  Extraneous functions and poor design contribute to usability issues.</p>
<p><span style="font-size: medium;"><span style="font-weight: bold;">A Simple But Effective Layout</span></span></p>
<p>An example of a simple yet effective web site is that of screenwriter <a href="http://www.zenfreese.com/Zen_Freese/Home.html" target="_blank"><strong>Zen Freese</strong></a>.  The coffee stain graphic, the horizontal lines, and the tape are things that remind us of the writing process. We write at our desk, cup of coffee on top of the last draft, taping the latest revision to a page in progress.  Our tools, represented by the two fonts, are a typewriter and a pen.  The message is clear.  Nothing extraneous distracts us from the message.</p>
<p><img class="aligncenter size-full wp-image-271" title="zenfree" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/07/zenfree.jpg" alt="zenfree" width="425" height="264" /></p>
<p>Web design is about common sense way before it is about how much functionality or other junk you can stuff onto a page.  Keeping it simple for both impact and usability is key.</p>
<p>Commentary by <a href="smartalicewebdesign.com">Smart Alice Web Design</a>, smart web design for businesses who want a unique and effective presence on the internet.</p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/navigation/creating-your-web-scape/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>I&#8217;m Calling You</title>
		<link>http://smartalicewebdesign.com/wordpress/visual-design/im-calling-you/</link>
		<comments>http://smartalicewebdesign.com/wordpress/visual-design/im-calling-you/#comments</comments>
		<pubDate>Wed, 08 Apr 2009 06:34:48 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[smart web design]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[using fonts]]></category>
		<category><![CDATA[visual emphasis]]></category>
		<category><![CDATA[web site analysis]]></category>
		<category><![CDATA[web site design]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=221</guid>
		<description><![CDATA[“The web design of this web site is horrible.” My daughter was rather annoyed. She had looked up the web site of a local bookstore because she wanted to call them about a book. All she needed was the phone number. Her irritation increased the more she had to click around to find such an [...]]]></description>
			<content:encoded><![CDATA[<p class="MsoNormal">“The web design of this web site is horrible.”<span> </span>My daughter was rather annoyed.<span> </span>She had looked up the web site of a local bookstore because she wanted to call them about a book.<span> </span>All she needed was the phone number.<span> </span>Her irritation increased the more she had to click around to find such an obvious piece of information.<span> </span></p>
<p class="MsoNormal">How many businesses get caught up with slick, flashy web design but forget to take care of basic information?<span> </span>How many times have you had to click Contact Us to get to a phone number?<span> </span>I’ve visited <span> </span>sites where the phone number or location are seriously buried.<span> </span></p>
<p class="MsoNormal">
<p class="MsoNormal">If you want people to call you or locate your place of business, put that information in a prominent location on every page, and never beneath the fold.<span> </span>Consider other factors that contribute to visibility: contrast, font size and color, reverse type, and so forth.</p>
<p class="MsoNormal">
<p class="MsoNormal">Check out these business sites and see how long it takes you to find the phone number.</p>
<p class="MsoNormal"><a href="http://www.caselloelectric.com/index.php" target="_blank"><img class="alignleft size-thumbnail wp-image-225" title="Click here to go to Casello Electric" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/04/elec-150x150.jpg" alt="Click here to go to Casello Electric" width="150" height="150" /></a></p>
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal"><a href="http://www.calumetphoto.com/" target="_blank"><img class="alignleft size-thumbnail wp-image-222" title="Click here to go to Calumet Photo" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/04/camera-150x150.jpg" alt="Click here to go to Calumet Photo" width="150" height="150" /></a></p>
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal"><span><a href="http://www.srbc.com/default.asp" target="_blank"><img class="alignleft size-thumbnail wp-image-227" title="Click here to go to SRBC" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/04/srbc-150x150.jpg" alt="Click here to go to SRBC" width="150" height="150" /></a><br />
</span></p>
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal">
<p class="MsoNormal"><span><br />
</span></p>
<p style="margin-top:120px;">
Analysis by <a href="http://smartalicewebdesign.com"><strong>Smart Alice Web Design</strong></a>, smart web design for businesses who want a unique and effective presence on the internet.</p>
<p>Copyright 2009, Alice Gebura, All Rights Reserved.</p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/visual-design/im-calling-you/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Animated Discussion</title>
		<link>http://smartalicewebdesign.com/wordpress/visual-design/animated-discussion/</link>
		<comments>http://smartalicewebdesign.com/wordpress/visual-design/animated-discussion/#comments</comments>
		<pubDate>Sat, 21 Mar 2009 14:57:32 +0000</pubDate>
		<dc:creator>Alice Gebura</dc:creator>
				<category><![CDATA[Animation/Motion Graphics]]></category>
		<category><![CDATA[Visual Design]]></category>
		<category><![CDATA[bad web design]]></category>
		<category><![CDATA[Flash web site]]></category>
		<category><![CDATA[good web design]]></category>
		<category><![CDATA[motion graphics]]></category>
		<category><![CDATA[smart web design]]></category>
		<category><![CDATA[visual interpretation]]></category>
		<category><![CDATA[web graphics]]></category>
		<category><![CDATA[web site analysis]]></category>
		<category><![CDATA[web site design]]></category>

		<guid isPermaLink="false">http://smartalicewebdesign.com/wordpress/?p=168</guid>
		<description><![CDATA[Do you like animation or flashy motion effects on a web site? In general, I don’t, unless they provide added value to me. A scrolling or jumping animation might catch my eye for a second, but it takes less than a second to click to another web site that isn’t so irritating. I detest advertising. [...]]]></description>
			<content:encoded><![CDATA[<p>Do you like animation or flashy motion effects on a web site?  In general, I don’t, unless they provide added value to <strong><em>me</em></strong>. A scrolling or jumping animation might catch my eye for a second, but it takes less than a second to click to another web site that isn’t so irritating.</p>
<p><img class="alignleft size-full wp-image-182" title="Power to the People" src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/03/fist.jpg" alt="Power to the People" width="204" height="246" />I detest advertising.  We all do, that&#8217;s one reason why TiVO is so popular.  Advertising invades our mind space without asking our permission. When a web site is more flash than info, it starts to look like a TV ad.  Instead of pressing the Fast Forward button, I’ll just click to another web site.</p>
<p>There are instances when motion graphics are useful.  For example: slide shows for art galleries, photographers, etc.  Or, high quality embedded videos when they are relevant, make me laugh, or teach me something.  One of the keys to success, if you’re going to put something flashy on your site, is to give control to the visitor.  I don’t want to passively sit while something runs.  That’s why I always click Skip Intro (you know what I’m talking about).</p>
<p><span style="font-size: medium;margin-top:80px;"><span style="font-weight: bold;"><img class="alignleft size-thumbnail wp-image-185" style="margin-top:20px;" title="Scrolling..." src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/03/longy-135x150.jpg" alt="Scrolling..." width="135" height="150" />Why Do It? </span></span></p>
<p>Why do web developers build junky animation?  It seems, because they can.  Here’s an example.  If you go to the <a href="http://www.longy.edu" target="_blank"><strong>Longy School</strong></a> web site, you’ll see Latest News scrolling vertically on the right.  Since it’s moving, I can’t read it.  So what’s the point?  This site also has a video tour of the building.  I care about ambience only when I’m booking a hotel room.  Irrelevant information just creates visual clutter.</p>
<p><span style="font-size: medium;"><span style="font-weight: bold;"><a href="http://www.jameszabiela.com/">Award Winners</a></span></span></p>
<p><a href="http://beantownweb.blogspot.com/2009/03/sxsw-web-awards-2009.html" target="_blank"><strong>Beantown Web</strong></a> lists its picks for best web sites in 2008.<br />
<img class="alignleft size-thumbnail wp-image-187" title="Click to go to James Zabiela's web site." src="http://smartalicewebdesign.com/wordpress/wp-content/uploads/2009/03/jzab-150x150.jpg" alt="Click to go to James Zabiela's web site." width="150" height="150" /><br />
There are some cool sites listed here.  My favorite is <a href="http://www.jameszabiela.com/" target="_blank"><strong>James Zabiela’s</strong></a> site.  He’s a high tech DJ so it makes sense that his web site puts on a high tech show.  I like this twist:  instead of placing motion graphics against a static background, he puts motion graphics in the background and places static text over it.  I also like the sleek and elegant music player he provides unobtrusively in the upper right corner.</p>
<p><span style="font-size: medium;"><span style="font-weight: bold;">What’s Appropriate for You? </span></span></p>
<p>A super flashy web site is expensive to build.  Keep in mind it also screams “high priced” to visitors.  It could scare off potential customers who might infer you are too high priced to do business with.  What is your message and do motion graphics enhance or undermine it?   Know your target customer.  Make the site comfortable for them.  And, put them in control of the graphics.</p>
<p>Analysis by <a href="http://smartalicewebdesign.com"><strong>Smart Alice Web Design</strong></a>, smart web design for businesses who want a unique and effective presence on the internet.</p>
<p>Copyright 2009, Alice Gebura, All Rights Reserved.</p>
<p><script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> <script type="text/javascript">// <![CDATA[
_uacct = "UA-3865877-1";
urchinTracker();
// ]]&gt;</script></p>
<p><script type="text/javascript">// <![CDATA[
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
// ]]&gt;</script></p>
<p><script type="text/javascript">// <![CDATA[
var pageTracker = _gat._getTracker("UA-3865877-1");
pageTracker._initData();
pageTracker._trackPageview();
// ]]&gt;</script></p>
]]></content:encoded>
			<wfw:commentRss>http://smartalicewebdesign.com/wordpress/visual-design/animated-discussion/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

