<?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>Beautiful Interfaces &#187; visual explanations</title>
	<atom:link href="http://www.bri-lance.net/category/visual-explanations/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.bri-lance.net</link>
	<description></description>
	<lastBuildDate>Wed, 28 Jul 2010 01:51:35 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>The Browser Breakdown</title>
		<link>http://www.bri-lance.net/2010/the-browser-breakdown/</link>
		<comments>http://www.bri-lance.net/2010/the-browser-breakdown/#comments</comments>
		<pubDate>Wed, 28 Apr 2010 23:44:33 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[visual explanations]]></category>

		<guid isPermaLink="false">http://www.bri-lance.net/?p=332</guid>
		<description><![CDATA[The growth of the mobile web and touch screens has created more browser diversity than ever before.  I think it&#8217;s useful to categorize browsers into four major categories, along the axes of screen size and input type.

Probably the most growth is going to come in the large-screen touch category (mainly because it&#8217;s starting from [...]]]></description>
			<content:encoded><![CDATA[<p>The growth of the mobile web and touch screens has created more browser diversity than ever before.  I think it&#8217;s useful to categorize browsers into four major categories, along the axes of screen size and input type.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2010/04/browsers.png" alt="chart of browsers by screen size and mouse vs touch" /></p>
<p>Probably the most growth is going to come in the large-screen touch category (mainly because it&#8217;s starting from the lowest place overall).  If anything, I would expect the small-screen mouse input category (i.e. Blackberries) to decrease &mdash; but not to disappear entirely, because businessmen sure do love their physical keyboards.</p>
<p>Making web apps that work with minimal adaptation across all four quadrants is the challenge.  (And you thought dealing with different screen resolutions was hard?)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bri-lance.net/2010/the-browser-breakdown/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>I&#8217;m solar-powered.</title>
		<link>http://www.bri-lance.net/2010/im-solar-powered/</link>
		<comments>http://www.bri-lance.net/2010/im-solar-powered/#comments</comments>
		<pubDate>Fri, 09 Apr 2010 01:17:01 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[personal]]></category>
		<category><![CDATA[visual explanations]]></category>

		<guid isPermaLink="false">http://www.bri-lance.net/?p=315</guid>
		<description><![CDATA[
It&#8217;s true, I really am.
Also, I love this time of year, and I&#8217;m back.
]]></description>
			<content:encoded><![CDATA[<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2010/04/moods.png" alt="graph of my moods, by season"/></p>
<p>It&#8217;s true, I really am.</p>
<p>Also, I love this time of year, and I&#8217;m back.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bri-lance.net/2010/im-solar-powered/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Canvas + the Digits of PI</title>
		<link>http://www.bri-lance.net/2010/canvas-the-digits-of-pi/</link>
		<comments>http://www.bri-lance.net/2010/canvas-the-digits-of-pi/#comments</comments>
		<pubDate>Mon, 01 Feb 2010 01:29:25 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[development]]></category>
		<category><![CDATA[visual explanations]]></category>

		<guid isPermaLink="false">http://www.bri-lance.net/?p=299</guid>
		<description><![CDATA[A couple of weeks ago, my former colleague Mike @ Meja Design released this cool visualization of the digits of PI mapped to colored dots:

This got me thinking about other transformations you could do over the same set of numbers.  At the same time, I&#8217;ve been wanting to start playing with canvas, for possible [...]]]></description>
			<content:encoded><![CDATA[<p>A couple of weeks ago, my former colleague Mike @ <a href="http://www.mejadesign.com/">Meja Design</a> released this cool visualization of the digits of PI mapped to colored dots:</p>
<p><a href="http://www.flickr.com/photos/mejadesign/4297880387/" title="Pi by Meja Design, on Flickr"><img src="http://farm5.static.flickr.com/4035/4297880387_9935a04346.jpg" width="324" height="500" alt="Pi" /></a></p>
<p>This got me thinking about other transformations you could do over the same set of numbers.  At the same time, I&#8217;ve been wanting to start playing with <a href="https://developer.mozilla.org/en/Canvas_tutorial">canvas</a>, for possible future infographicky goodness.  So I thought, what better way to get my feet wet with canvas than to visualize PI as a line chart!  And just for fun, I put it on a circle too, since, y&#8217;know, PI.  (I was going to make the lines nice and curvy, but it&#8217;s the weekend and bezier curve math was not being my brain&#8217;s friend, so straight lines for now.)</p>
<p>So, without  further ado: <a href="http://www.bri-lance.net/projects/pi_canvas/">the digits of PI visualized as a line chart, using canvas</a>.  (Also: I threw in excanvas, but didn&#8217;t actually bother to test it in IE, so if it doesn&#8217;t work, um&#8230; try a real browser, I guess?  Cheers.)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bri-lance.net/2010/canvas-the-digits-of-pi/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>2009 Wrap-Up (Part II)</title>
		<link>http://www.bri-lance.net/2009/2009-wrap-up-part-ii/</link>
		<comments>http://www.bri-lance.net/2009/2009-wrap-up-part-ii/#comments</comments>
		<pubDate>Thu, 31 Dec 2009 04:23:24 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[personal]]></category>
		<category><![CDATA[visual explanations]]></category>

		<guid isPermaLink="false">http://www.bri-lance.net/?p=250</guid>
		<description><![CDATA[Another tablet drawing for my last post of the year.
I think I learned a lot this year about what I&#8217;m interested in, and what I want to do &#8212; I won&#8217;t say with my life, but I&#8217;ll say with the next 5 years or so.  I don&#8217;t think I&#8217;m able to look further ahead [...]]]></description>
			<content:encoded><![CDATA[<p>Another tablet drawing for my last post of the year.</p>
<p>I think I learned a lot this year about what I&#8217;m interested in, and what I want to do &mdash; I won&#8217;t say with my life, but I&#8217;ll say with the next 5 years or so.  I don&#8217;t think I&#8217;m able to look further ahead than that.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/12/interests2.gif" alt="web development, interaction design, infographics, psychology, and teaching"/> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.bri-lance.net/2009/2009-wrap-up-part-ii/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Cynicism</title>
		<link>http://www.bri-lance.net/2009/cynicism/</link>
		<comments>http://www.bri-lance.net/2009/cynicism/#comments</comments>
		<pubDate>Tue, 24 Nov 2009 04:24:59 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[personal]]></category>
		<category><![CDATA[visual explanations]]></category>

		<guid isPermaLink="false">http://www.bri-lance.net/?p=185</guid>
		<description><![CDATA[I am very cynical, except for when I&#8217;m not.

The trick is in maintaining a healthy balance between cynicism and idealism.  You need cynicism for protection, and idealism for an energy source.
Too much cynicism will crush your idealism, and then you&#8217;ll become dead inside.
Too much idealism will make you too fragile, and then you fall [...]]]></description>
			<content:encoded><![CDATA[<p>I am very cynical, except for when I&#8217;m not.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/cynicism.jpg" alt="cynicism layers" /></p>
<p>The trick is in maintaining a healthy balance between cynicism and idealism.  You need cynicism for protection, and idealism for an energy source.</p>
<p>Too much cynicism will crush your idealism, and then you&#8217;ll become dead inside.</p>
<p>Too much idealism will make you too fragile, and then you fall apart.</p>
<p>Keep balancing.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bri-lance.net/2009/cynicism/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Intuition [and / or / vs.] Data</title>
		<link>http://www.bri-lance.net/2009/intuition-and-or-vs-data/</link>
		<comments>http://www.bri-lance.net/2009/intuition-and-or-vs-data/#comments</comments>
		<pubDate>Sat, 21 Nov 2009 00:13:10 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[visual explanations]]></category>

		<guid isPermaLink="false">http://www.bri-lance.net/?p=179</guid>
		<description><![CDATA[Data by itself cannot create anything.  It can only disprove.
Intuition by itself can create many things, but it stays trapped within the designer&#8217;s own experiences and never becomes a conversation.  
Both are important.
This is how to design things: Use intuition to create many good solutions, and then use data to narrow it down [...]]]></description>
			<content:encoded><![CDATA[<p>Data by itself cannot create anything.  It can only disprove.</p>
<p>Intuition by itself can create many things, but it stays trapped within the designer&#8217;s own experiences and never becomes a conversation.  </p>
<p>Both are important.</p>
<p>This is how to design things: Use intuition to create many good solutions, and then use data to narrow it down to the one best.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/data1.jpg" alt="Intuition and data arrive at a solution" /></p>
<p>But don&#8217;t stop after one iteration; then you lose the ability to let your data shape your intuition.  </p>
<p>By repeating this cycle over and over again, your intuition will get better, and you can focus on smaller and smaller problems, gradually approaching (though never attaining) perfection.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/data2.jpg" alt="Iterating a design" /></p>
<p>(I can&#8217;t decide if this whole post is actually true, or if it&#8217;s just attractive because it seems simple and internally consistent.)</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bri-lance.net/2009/intuition-and-or-vs-data/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Adobe&#8217;s plan to take over the world</title>
		<link>http://www.bri-lance.net/2009/adobes-plan-to-take-over-the-world/</link>
		<comments>http://www.bri-lance.net/2009/adobes-plan-to-take-over-the-world/#comments</comments>
		<pubDate>Wed, 11 Nov 2009 03:04:04 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[visual explanations]]></category>

		<guid isPermaLink="false">http://www.bri-lance.net/?p=168</guid>
		<description><![CDATA[(Notes from Ryan Stewart&#8217;s keynote talk at Philly Flash Camp.)
Contextual Applications: 

Adobe&#8217;s Product Line:

]]></description>
			<content:encoded><![CDATA[<p>(Notes from <a href="http://blog.digitalbackcountry.com/">Ryan Stewart&#8217;s</a> keynote talk at Philly Flash Camp.)</p>
<p><strong>Contextual Applications: </strong></p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/adobe1.gif" alt="contextual applications diagram" /></p>
<p><strong>Adobe&#8217;s Product Line:</strong></p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/adobe2.gif" alt="Adobe products and intended users diagram" /></p>
]]></content:encoded>
			<wfw:commentRss>http://www.bri-lance.net/2009/adobes-plan-to-take-over-the-world/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Interfaces: An Essay With Cartoons</title>
		<link>http://www.bri-lance.net/2009/interfaces-an-essay-with-cartoons/</link>
		<comments>http://www.bri-lance.net/2009/interfaces-an-essay-with-cartoons/#comments</comments>
		<pubDate>Tue, 03 Nov 2009 05:48:36 +0000</pubDate>
		<dc:creator>admin</dc:creator>
				<category><![CDATA[design]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[visual explanations]]></category>

		<guid isPermaLink="false">http://www.bri-lance.net/?p=155</guid>
		<description><![CDATA[I. An interface is a window between two complex systems.

Most of the time, one of those systems is a person.

The interface marks a boundary.  It is the place where the human meets the machine.


II. Most software is incredibly complex.  Often, it is so complex that not even one developer who built the system [...]]]></description>
			<content:encoded><![CDATA[<p><strong>I.</strong> An interface is a window between two complex systems.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/window.gif" alt="window" /></p>
<p>Most of the time, one of those systems is a person.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/person.gif" alt="stick figure" /></p>
<p>The interface marks a boundary.  It is the place where the human meets the machine.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/boundary.gif" alt="person and machine" /></p>
<hr/>
<p><strong>II.</strong> Most software is incredibly complex.  Often, it is so complex that not even one developer who built the system can keep the whole of it in her head at the same time.</p>
<p>Information passes from place to place, is modified, recombines, evolves and mutates in a thousand different ways.  An interesting program is a highly choreographed dance of a thousand different pieces of data.</p>
<p>To make it even harder, this happens on many levels at once, from the base electrical impulse guided by physical law, all the way up to conceptual objects that contain, modify, and recreate one another.</p>
<p>The fact is, there&#8217;s a lot going on.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/pyramid.gif" alt="pyramid showing different levels of software" /></p>
<p>Meanwhile, on the other side of that boundary, a person is&#8230; a person.</p>
<p>Talk about complex.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/feelingz.gif" alt="person surrounded by emotions" /></p>
<hr/>
<p><strong>III.</strong> An interface is a window.  It is also an adapter.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/adapter.gif" alt="poorly drawn plug adapter" /></p>
<p>The user wants to get something done.  He has in his mind a <strong>model</strong> of what he is trying to do.</p>
<p>This model comes from his life experiences, psychology, learned behaviors, things he&#8217;s observed in other people, and probably 20 million other subtle factors.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/person_task.gif" alt="person thinking of a task" /></p>
<p>The system also has a model.  This model is built up over time, a slow accretion of 20 million small choices made in every line of code, in every aspect of the system design, during every step of the development process.  </p>
<p>The odds that this model matches the user&#8217;s model are very, very small.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/system_task.gif" alt="computer thinking of a task" /></p>
<p>It&#8217;s the job of the interface to translate between the user&#8217;s model and the system&#8217;s model.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/translation.gif" alt="translation between models" /></p>
<p>It&#8217;s the job of the interface to manage and reduce complexity.  </p>
<p>(To compliment an interface, call it deceptively simple.)</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/filtering.gif" alt="filtering out complexity" /></p>
<p>It&#8217;s the job of the interface to bridge, not just 2 worlds, but 2 million &mdash; the world within the system, and the personal worlds of 1,999,999 different users.</p>
<p><img src="http://www.bri-lance.net/blog/wp-content/uploads/2009/11/tom.jpg" alt="different users" /></p>
<p>That&#8217;s why making interfaces is hard.  That&#8217;s also why it is worthwhile and necessary.</p>
<p>Because you could make life frustrating and difficult, but instead you get to make it pleasant and simple.  Because you get to bring a small bit of order to a whole lot of chaos.  And because you get to make things, in some small way, better or easier or more fun than they were before.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.bri-lance.net/2009/interfaces-an-essay-with-cartoons/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
