<?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>flukeout</title>
	<atom:link href="http://flukeout.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://flukeout.com</link>
	<description>Design, usability and illustration.</description>
	<lastBuildDate>Tue, 15 May 2012 16:55:44 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2.1</generator>
		<item>
		<title>Time-aware Homepage</title>
		<link>http://flukeout.com/time-aware-homepage/</link>
		<comments>http://flukeout.com/time-aware-homepage/#comments</comments>
		<pubDate>Mon, 05 Mar 2012 03:18:11 +0000</pubDate>
		<dc:creator>Luke Pacholski</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://flukeout.com/?p=749</guid>
		<description><![CDATA[I alternate between Chrome and Firefox pretty often and one thing that annoys me is that I&#8217;ve got different bookmarks in each browser. Another thing is that depending on the time and day, I&#8217;d like different bookmarks to be more prominent. Chrome&#8217;s New Tab page is pretty handy in this regard, but it always shows [...]]]></description>
			<content:encoded><![CDATA[<img src="http://flukeout.com/wp-content/uploads/2012/03/time_page_thumb.png" alt="" title="time_page_thumb" width="100" height="100" class="PostThumbnail" />

<p>
I alternate between Chrome and Firefox pretty often and one thing that annoys me is that I&#8217;ve got different bookmarks in each browser. Another thing is that depending on the time and day, I&#8217;d like different bookmarks to be more prominent. Chrome&#8217;s New Tab page is pretty handy in this regard, but it always shows me the same stuff and often lists one site multiple times.
</p>

<p>
To get out of this first-world quandry, I built a homepage that opens when I open any browser (and when I create a new tab) and shows me the bookmarks I&#8217;m most likely to need depending on the time and day.
</p>

<h2>How&#8217;s it work?</h2>

<p>
The top row are my always-on staples. Damn I love Google. The middle row is time-aware and only shows the bookmarks I want to see on the weekend. The faint bottom row are the rest of my bookmarks, lying in wait until their time to shine has come.
</p>

<p>Each active bookmark has a letter below it, which I can press to launch that site.</p>

<p>
<img src="http://flukeout.com/wp-content/uploads/2012/03/screenshot.png" alt="" title="screenshot" width="540" height="353" class="alignnone size-full wp-image-751" />
</p>

<p class="ActionButtonContainer">
<a class="ActionButton " href="http://www.flukeout.com/examples/time_page/index.html">Try it Out</a>
<span>Should work in <strong>Firefox</strong> and <strong>Chrome</strong></span>
</p>

<p>
Change the day and time slider to see how the page looks at different times.
</p>

]]></content:encoded>
			<wfw:commentRss>http://flukeout.com/time-aware-homepage/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Boytalk Logo</title>
		<link>http://flukeout.com/boytalk-logo/</link>
		<comments>http://flukeout.com/boytalk-logo/#comments</comments>
		<pubDate>Tue, 18 Oct 2011 02:21:45 +0000</pubDate>
		<dc:creator>Luke Pacholski</dc:creator>
				<category><![CDATA[Illustration]]></category>
		<category><![CDATA[Logos]]></category>
		<category><![CDATA[Tshirts]]></category>

		<guid isPermaLink="false">http://flukeout.com/?p=735</guid>
		<description><![CDATA[Last summer I played Softball on a team with a long-running history of hilarious team names. That year was no exception. I made our logo and we got these printed large and proud on our shirts and looked fab all season.]]></description>
			<content:encoded><![CDATA[<img src="http://flukeout.com/wp-content/uploads/2011/10/boytalk_thumbnail.jpg" alt="" title="boytalk_thumbnail" width="100" height="100" class="PostThumbnail alignnone size-full wp-image-736" />

<p>
Last summer I played Softball on a team with a long-running history of hilarious team names. That year was no exception. I made our logo and we got these printed large and proud on our shirts and looked fab all season.
</p>

<p>
<img src="http://flukeout.com/wp-content/uploads/2011/10/boytalk_on_purple.png" alt="" title="boytalk_on_purple" width="540" height="431" class="alignnone size-full wp-image-737" />
</p>]]></content:encoded>
			<wfw:commentRss>http://flukeout.com/boytalk-logo/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sweet Flash Banners</title>
		<link>http://flukeout.com/flash-banners/</link>
		<comments>http://flukeout.com/flash-banners/#comments</comments>
		<pubDate>Sun, 16 Oct 2011 15:20:29 +0000</pubDate>
		<dc:creator>Luke Pacholski</dc:creator>
				<category><![CDATA[Motion]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://flukeout.com/?p=712</guid>
		<description><![CDATA[Seems like Flash has become a dirty word on the web now, but one of the coolest parts of working at Future Shop was working on animated banners for product promotions. Here are a couple of my favourites. Refresh the page to see the intro animations. Satellite Radio This was for the launch of Sirius [...]]]></description>
			<content:encoded><![CDATA[<img src="http://flukeout.com/wp-content/uploads/2011/10/flash_thumbnail.jpg" alt="" title="flash_thumbnail" width="100" height="100" class="PostThumbnail alignnone size-full wp-image-729" />

<p>Seems like Flash has become a dirty word on the web now, but one of the coolest parts of working at <a href="http://www.futureshop.ca">Future Shop</a> was working on animated banners for product promotions. Here are a couple of my favourites.</p>

<p>Refresh the page to see the intro animations.</p>

<h2>Satellite Radio</h2>
<p>This was for the launch of Sirius and XM Satellite radio service in Canada.</p>

<p style="text-align: center">
<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">
<embed src="http://flukeout.com/wp-content/uploads/2011/10/satellite_radio_en.swf" quality="high" bgcolor="#ffffff" width="393" height="320"  />
</object>
</p>

<h2>XBOX 360 Release</h2>
<p>This was for the launch of the XBOX 360.</p>

<p style="text-align: center">
<object codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0">
<embed src="http://flukeout.com/wp-content/uploads/2011/10/xbox_release_en.swf" quality="high" bgcolor="#ffffff" width="393" height="320"  />
</object>
</p>


]]></content:encoded>
			<wfw:commentRss>http://flukeout.com/flash-banners/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Up4 Scheduling App</title>
		<link>http://flukeout.com/up4-scheduling-app/</link>
		<comments>http://flukeout.com/up4-scheduling-app/#comments</comments>
		<pubDate>Sat, 15 Oct 2011 19:19:35 +0000</pubDate>
		<dc:creator>Luke Pacholski</dc:creator>
				<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://flukeout.com/?p=686</guid>
		<description><![CDATA[Up4 was a Facebook app I worked on while at ActiveState. It was a casual hang-out enabler meant to complement Facebook&#8217;s native event system. It was a passive approach to getting friends together &#8211; you&#8217;d list when you were up for certain activities, and friends could join if they were interested. I was responsible for [...]]]></description>
			<content:encoded><![CDATA[<img src="http://flukeout.com/wp-content/uploads/2011/10/up4_thumbnail.jpg" alt="" title="up4_thumbnail" width="100" height="100" class="PostThumbnail alignnone size-full wp-image-705" />

<p>Up4 was a Facebook app I worked on while at <a href="http://www.activestate.com">ActiveState</a>. It was a casual hang-out enabler meant to complement Facebook&#8217;s native event system. It was a passive approach to getting friends together &#8211; you&#8217;d list when you were up for certain activities, and friends could join if they were interested. I was responsible for all of the visual design, markup and illustrations. Here&#8217;s a few selected screens.</p>

<h2>Calendar View</h2>
<p>This was the main view of what you were up for. We divided the day into sections keep the events more flexible. You could click anywhere on the calendar to start creating a new &#8220;up for&#8221;.</p>

<p>
<a href="http://flukeout.com/wp-content/uploads/2011/10/up4_calendar_big.jpg" class="zoom">
<img src="http://flukeout.com/wp-content/uploads/2011/10/up4_calendar_big.jpg" alt="" title="up4_calendar_big" width="540" class="alignnone size-full wp-image-687" />
</a>
</p>

<h2>Creating an Up4</h2>

<p>
Once you made an event, other friends you&#8217;d invited to the app could find it on the &#8220;what your friends are up for&#8221; tab and join in.&#8221;
</p>

<p>
<a href="http://flukeout.com/wp-content/uploads/2011/10/up4_create.jpg" class="zoom">
<img src="http://flukeout.com/wp-content/uploads/2011/10/up4_create.jpg" alt="" title="up4_create" width="540" class="alignnone size-full wp-image-694" />
</a>
</p>

<h2>Up4 Details</h2>
<p>
Examining an up4, you&#8217;d be able to see who joined, have a discussion with other participants and also share with Facebook friends who you think might also be interested.
</p>

<p>
<a href="http://flukeout.com/wp-content/uploads/2011/10/up4_details.jpg" class="zoom">
<img src="http://flukeout.com/wp-content/uploads/2011/10/up4_details.jpg" alt="" title="up4_details" width="540" class="alignnone size-full wp-image-703" /></a>
</p>



<h2>Facebook profile box</h2>
<p>You could choose to include this Up4 box on your Facebook page. This would allow friends who weren&#8217;t Up4 users (yet!) to see what you were up for and join in.</p>

<p>
<img src="http://flukeout.com/wp-content/uploads/2011/10/up4_profile_box.jpg" alt="" title="up4_profile_box" width="540" height="350" class="alignnone size-full wp-image-699" />
</p>]]></content:encoded>
			<wfw:commentRss>http://flukeout.com/up4-scheduling-app/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Sharpie Street</title>
		<link>http://flukeout.com/sharpie-street/</link>
		<comments>http://flukeout.com/sharpie-street/#comments</comments>
		<pubDate>Sat, 15 Oct 2011 16:40:20 +0000</pubDate>
		<dc:creator>Luke Pacholski</dc:creator>
				<category><![CDATA[Illustration]]></category>
		<category><![CDATA[Sharpie]]></category>

		<guid isPermaLink="false">http://flukeout.com/?p=678</guid>
		<description><![CDATA[I posted this one earlier as a collection, but figured it deserved its own post.]]></description>
			<content:encoded><![CDATA[<img src="http://flukeout.com/wp-content/uploads/2011/10/sharpie_street_thumb.jpg" alt="" title="sharpie_street_thumb" width="100" height="100" class="PostThumbnail alignnone size-full wp-image-680" />

<p>
<img src="http://flukeout.com/wp-content/uploads/2011/10/sharpie_street_540.jpg" alt="" title="sharpie_street_540" width="540" height="660" class="alignnone size-full wp-image-679" />
</p>

<p>I posted this one earlier as a collection, but figured it deserved its own post.</p>]]></content:encoded>
			<wfw:commentRss>http://flukeout.com/sharpie-street/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Bro &amp; Dog</title>
		<link>http://flukeout.com/bro-dog/</link>
		<comments>http://flukeout.com/bro-dog/#comments</comments>
		<pubDate>Sat, 15 Oct 2011 16:21:16 +0000</pubDate>
		<dc:creator>Luke Pacholski</dc:creator>
				<category><![CDATA[Illustration]]></category>

		<guid isPermaLink="false">http://flukeout.com/?p=669</guid>
		<description><![CDATA[Here&#8217;s an older drawing I did from a photo of my bro Adam and our family dog Baca. They&#8217;re both a lot older and bigger now.]]></description>
			<content:encoded><![CDATA[<img src="http://flukeout.com/wp-content/uploads/2011/10/adamcunia_thumb.jpg" alt="" title="adamcunia_thumb" width="100" height="100" class="PostThumbnail alignnone size-full wp-image-675" />

<p>Here&#8217;s an older drawing I did from a photo of my bro Adam and our family dog Baca. They&#8217;re both a lot older and bigger now.</p>

<p>
<img src="http://flukeout.com/wp-content/uploads/2011/10/adamcunia.gif" alt="" title="adamcunia" width="450" height="333" class="alignnone size-full wp-image-670" />
</p>]]></content:encoded>
			<wfw:commentRss>http://flukeout.com/bro-dog/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Interactive Sign In Page</title>
		<link>http://flukeout.com/interactive-login-page/</link>
		<comments>http://flukeout.com/interactive-login-page/#comments</comments>
		<pubDate>Fri, 14 Oct 2011 02:35:56 +0000</pubDate>
		<dc:creator>Luke Pacholski</dc:creator>
				<category><![CDATA[JavaScript]]></category>
		<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://flukeout.com/?p=650</guid>
		<description><![CDATA[When redesigning the Vibes Sign In page, one of the concepts I came up with was a threaded SMS-style conversation. Vibes is all about mobile so it seemed fitting. Try it out, it has a very rudimentary capacity to carry (a pretty boring) conversation about signing you in. Bonus points if you get the hunter [...]]]></description>
			<content:encoded><![CDATA[<img src="http://flukeout.com/wp-content/uploads/2011/10/login_thumbnail1.jpg" alt="" title="login_thumbnail" width="100" height="100" class="PostThumbnail alignnone size-full wp-image-666" />

<p>
When redesigning the <a href="http://www.vibes.com">Vibes</a> Sign In page, one of the concepts I came up with was a threaded SMS-style conversation. Vibes is all about mobile so it seemed fitting. Try it out, it has a very rudimentary capacity to carry (a pretty boring) conversation about signing you in. Bonus points if you get the <strong>hunter 2</strong> reference.
</p>

<p>Click the Boring Sign In link at the bottom see a static version of the final design.</p>

<p>
<a class="" href="http://www.flukeout.com/examples/login/login.html">
<img src="http://flukeout.com/wp-content/uploads/2011/10/vibes_sms_login.jpg" alt="" title="vibes_sms_login" width="540" height="585" class="alignnone size-full wp-image-664" />
</a>
</p>

<p class="ActionButtonContainer">
<a class="ActionButton " href="http://www.flukeout.com/examples/login/login.html">Try out the Prototype</a>
<span><strong>Use Firefox</strong> &#8211; It&#8217;s going to look terrible otherwise!</span>
</p>

]]></content:encoded>
			<wfw:commentRss>http://flukeout.com/interactive-login-page/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Vibes OnScreen Controller</title>
		<link>http://flukeout.com/vibes-onscreen-remote-controller/</link>
		<comments>http://flukeout.com/vibes-onscreen-remote-controller/#comments</comments>
		<pubDate>Thu, 13 Oct 2011 03:33:09 +0000</pubDate>
		<dc:creator>Luke Pacholski</dc:creator>
				<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://flukeout.com/?p=615</guid>
		<description><![CDATA[At Vibes, we offer a cool system that lets our customers display interactive, SMS-driven visualizations on large screens in front of an audience. To control these visualizations (I&#8217;ll post some examples later), we built a remote controller. The controller lets users select the visualization they want to show, configure it to fit the screen they&#8217;re [...]]]></description>
			<content:encoded><![CDATA[<img src="http://flukeout.com/wp-content/uploads/2011/10/remote_controller_thumbnail.jpg" alt="" title="remote_controller_thumbnail" width="100" height="100" class="PostThumbnail alignnone size-full wp-image-658" />

<p>
At Vibes, we offer a cool system that lets our customers display interactive, SMS-driven visualizations on large screens in front of an audience. To control these visualizations (I&#8217;ll post some examples later), we built a remote controller. The controller lets users select the visualization they want to show, configure it to fit the screen they&#8217;re displaying it on, and control what&#8217;s being shown on the screen.
</p>

<p>
The controller below controls a vote visualization. People at the venue text in to choose the next song they want to hear. The remote controller shows the state of the visualization (currently displaying the vote options) as well as the number of votes received.
</p>

<p>
When time is up, the person in charge of the clicks the Winner screen to display the vote winner to the audience.
</p> 

<p>
<a href="http://flukeout.com/wp-content/uploads/2011/10/remote_controller_large.jpg" class="zoom">
<img src="http://flukeout.com/wp-content/uploads/2011/10/remote_controller_small.jpg" alt="" title="remote_controller_small" width="540" height="605" class="alignnone size-full wp-image-616" />
</a>
</p>

<h2>Putting a Visualization on a Screen</h2>

<p>
When the user selects a visualization, the remote controller and popup appear. To put the visualization up on the large venue screen, the user follows the instructions on the popup. When the visualization popup is put into fullscreen mode, it automatically resizes it&#8217;s contents to best fit the available screen real estate.
</p>

<p>
The screen adjustment controls in the remote controller help fine-tune the display and when everything looks correctly positioned the visualization can begin.
</p>

<h3>The Visualization Popup</h3>

<p>
<img src="http://flukeout.com/wp-content/uploads/2011/10/onscreen_popup.jpg" alt="" title="onscreen_popup" width="533" height="424" class="alignnone size-full wp-image-643" />
</p>]]></content:encoded>
			<wfw:commentRss>http://flukeout.com/vibes-onscreen-remote-controller/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Zeep Mobile Website</title>
		<link>http://flukeout.com/zeep-mobile-website/</link>
		<comments>http://flukeout.com/zeep-mobile-website/#comments</comments>
		<pubDate>Wed, 12 Oct 2011 23:53:33 +0000</pubDate>
		<dc:creator>Luke Pacholski</dc:creator>
				<category><![CDATA[Web]]></category>

		<guid isPermaLink="false">http://flukeout.com/?p=592</guid>
		<description><![CDATA[Here are some components of the Zeep Mobile website I designed. Zeep is basically an API that allows developers to interact with their website users via SMS. Homepage Sign-up Panel To subscribe users to receive text messages from a website, the developer would embed the Zeep Mobile panel into their site with an iframe (so [...]]]></description>
			<content:encoded><![CDATA[<img src="http://flukeout.com/wp-content/uploads/2011/10/zeep_mobile_site_thumbnail.gif" alt="" title="zeep_mobile_site_thumbnail" width="100" height="100" class="PostThumbnail alignnone size-full wp-image-608" />

<p>
Here are some components of the Zeep Mobile website I designed. Zeep is basically an API that allows developers to interact with their website users via SMS.</p>
<p>

<h3>Homepage</h3>

<a class="zoom" href="http://flukeout.com/wp-content/uploads/2011/10/zeep_mobile_home_large.jpg">
<img src="http://flukeout.com/wp-content/uploads/2011/10/zeep_mobile_home.jpg" alt="" title="zeep_mobile_home" width="540" height="594" class="alignnone size-full wp-image-612" />
</a>
</p>

<h3>Sign-up Panel</h3>

<p>
To subscribe users to receive text messages from a website, the developer would embed the Zeep Mobile panel into their site with an iframe (so web 2.0!!!). Here&#8217;s the panel.
</p>

<p>
<img src="http://flukeout.com/wp-content/uploads/2011/10/zeep_mobile_panel.gif" alt="" title="zeep_mobile_panel" width="540" height="271" class="alignnone size-full wp-image-605" />
</p>

]]></content:encoded>
			<wfw:commentRss>http://flukeout.com/zeep-mobile-website/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Zeep Mobile Business Cards</title>
		<link>http://flukeout.com/zeep-mobile-business-cards/</link>
		<comments>http://flukeout.com/zeep-mobile-business-cards/#comments</comments>
		<pubDate>Wed, 12 Oct 2011 23:38:12 +0000</pubDate>
		<dc:creator>Luke Pacholski</dc:creator>
				<category><![CDATA[Identity]]></category>
		<category><![CDATA[Print]]></category>

		<guid isPermaLink="false">http://flukeout.com/?p=586</guid>
		<description><![CDATA[Here are the business cards I made for the Zeep guys. I got called out for the styluses, but I guess back then there was still a chance some mobile devices had them, so I don&#8217;t feel too bad. I got these printed in China with rounded corners, they turned out great! The Post-it on [...]]]></description>
			<content:encoded><![CDATA[<img src="http://flukeout.com/wp-content/uploads/2011/10/zeep_business_cards_thumbnail.gif" alt="" title="zeep_business_cards_thumbnail" width="100" height="100" class="PostThumbnail alignnone size-full wp-image-590" />

<p>Here are the business cards I made for the Zeep guys. I got called out for the styluses, but I guess back then there was still a chance some mobile devices had them, so I don&#8217;t feel too bad. I got these printed in China with rounded corners, they turned out great!</p>

<p>
<img src="http://flukeout.com/wp-content/uploads/2011/10/zeep_business_cards.gif" alt="" title="zeep_business_cards" width="540" height="346" class="alignnone size-full wp-image-587" />
</p>

<p>The Post-it on the back is there for notes.</p>]]></content:encoded>
			<wfw:commentRss>http://flukeout.com/zeep-mobile-business-cards/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

