<?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>Smack Happy Design &#187; Inspiration</title>
	<atom:link href="http://smackhappydesign.com/topics/inspiration/feed/" rel="self" type="application/rss+xml" />
	<link>http://smackhappydesign.com</link>
	<description>expert design for web and print</description>
	<lastBuildDate>Mon, 23 Jan 2012 23:58:13 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
		<item>
		<title>Some Clever Design from ThinkGeek</title>
		<link>http://smackhappydesign.com/2009/08/some-clever-design-from-thinkgeek/</link>
		<comments>http://smackhappydesign.com/2009/08/some-clever-design-from-thinkgeek/#comments</comments>
		<pubDate>Sat, 15 Aug 2009 00:10:28 +0000</pubDate>
		<dc:creator>Nicole</dc:creator>
				<category><![CDATA[Inspiration]]></category>

		<guid isPermaLink="false">http://smackhappydesign.com/?p=583</guid>
		<description><![CDATA[I recently got an email from ThinkGeek.com about getting their anniversary tee for free with a $10 purchase. When I clicked on the link to look at the offer I scrolled through the page and noticed the gradient in the &#8230; <a href="http://smackhappydesign.com/2009/08/some-clever-design-from-thinkgeek/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>I recently got an email from <a href="http://www.tkqlhce.com/click-3596935-10356324" target="_top">ThinkGeek.com</a><img src="http://www.ftjcfx.com/image-3596935-10356324" width="1" height="1" border="0" alt=""/> about getting their anniversary tee for free with a $10 purchase.  When I clicked on the link to look at the offer I scrolled through the page and noticed the gradient in the background moving.  Upon further inspection I discovered that the gradient revealed two different graphics at the bottom of the page.  On the light part of the gradient you could see robots and aliens; on the dark part screaming zombies.  The affect is subtle, clever and utterly delightful.  You can bet money that I&#8217;ll be using this technique as soon as the opportunity arises for such a fun and playful design.</p>
<p>To see the affect make sure your browser is displaying at its maximum width (needs to be 1280px wide or more).  Then move the scrollbar up and down to see it.  I&#8217;ve included two screen captures below in case you can&#8217;t make the browser wide enough.</p>
<p><a href="http://smackhappydesign.com/wp-content/uploads/2009/08/thinkgeek-light.jpg"><img src="http://smackhappydesign.com/wp-content/uploads/2009/08/thinkgeek-light-499x266.jpg" alt="thinkgeek-light" title="thinkgeek-light" width="499" height="266" class="alignnone size-large wp-image-589" /></a></p>
<p><a href="http://smackhappydesign.com/wp-content/uploads/2009/08/thinkgeek-dark.jpg"><img src="http://smackhappydesign.com/wp-content/uploads/2009/08/thinkgeek-dark-499x266.jpg" alt="thinkgeek-dark" title="thinkgeek-dark" width="499" height="266" class="alignnone size-large wp-image-590" /></a></p>
<p>Well done ThinkGeek designer, I like your clever ways!</p>
<img src="http://smackhappydesign.com/wp-content/plugins/pixelstats/trackingpixel.php?post_id=583&amp;ts=1328385623" class="pixeltracker" style="display:none;" alt="pixelstats trackingpixel"/>]]></content:encoded>
			<wfw:commentRss>http://smackhappydesign.com/2009/08/some-clever-design-from-thinkgeek/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Home Page Formula</title>
		<link>http://smackhappydesign.com/2009/02/home-page-formula/</link>
		<comments>http://smackhappydesign.com/2009/02/home-page-formula/#comments</comments>
		<pubDate>Tue, 24 Feb 2009 19:09:50 +0000</pubDate>
		<dc:creator>Nicole</dc:creator>
				<category><![CDATA[Inspiration]]></category>

		<guid isPermaLink="false">http://smackhappydesign.com/?p=200</guid>
		<description><![CDATA[If you&#8217;re offering a service online there is a particular formula most sites use these days. The top half of the page (above the fold) has a colored rectangle area, often with rounded corners. One half of this rectangle spouts &#8230; <a href="http://smackhappydesign.com/2009/02/home-page-formula/">Continue reading <span class="meta-nav">&#8594;</span></a>]]></description>
			<content:encoded><![CDATA[<p>If you&#8217;re offering a service online there is a particular formula most sites use these days.  The top half of the page (above the fold) has a colored rectangle area, often with rounded corners.  One half of this rectangle spouts the companies tagline followed by a bullet list of features and/or benefits.  Below this list is a big shiny button enticing you to click and sign up &#8211; an important call-to-action.  On the other half you&#8217;ll find an image, or more often a screen shot of the product.  </p>
<p>Below the colored rectangle is usually a three-column area.  In each column you&#8217;ll find more information about the product; product highlights, how it works, testimonials, or something of the like explaining the product even more.  </p>
<p>One example of a site that uses this formula is <a href="https://www.creditkarma.com/">Credit Karma</a>.  They do a great job of explaining exactly what they do in the 2-3 seconds they have when a user visits their home page.  The shiny yellow button is large with a very clear call-to-action, giving the user focus and direction.  They also do a great job in the three columns telling the user how their product will be helpful.  </p>
<p>Credit Karma has a great home page for an online service that I would gladly use as inspiration.  It has several of the important components that Jakob Nielsen claims a great home page needs: </p>
<ul>
<li>Logo</li>
<li>Navigation</li>
<li>Tagline</li>
<li>Short paragraph stating what you do (the bullets in this case)</li>
<li>Focus and direction (the sign up button)</li>
</ul>
<p><a href="https://www.creditkarma.com/"><img src="/images/credit_karma.jpg" alt="Credit Karma Screen Shot"/></a></p>
<img src="http://smackhappydesign.com/wp-content/plugins/pixelstats/trackingpixel.php?post_id=200&amp;ts=1328385623" class="pixeltracker" style="display:none;" alt="pixelstats trackingpixel"/>]]></content:encoded>
			<wfw:commentRss>http://smackhappydesign.com/2009/02/home-page-formula/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

