<?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>Chromatic Pixel &#187; Sketch</title>
	<atom:link href="http://blog.stephenhorlander.com/tag/sketch/feed/" rel="self" type="application/rss+xml" />
	<link>http://blog.stephenhorlander.com</link>
	<description>Rambling thoughts on life and design.</description>
	<lastBuildDate>Fri, 02 Sep 2011 19:19:48 +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>Geolocation Icons</title>
		<link>http://blog.stephenhorlander.com/2010/07/geolocation-icons/</link>
		<comments>http://blog.stephenhorlander.com/2010/07/geolocation-icons/#comments</comments>
		<pubDate>Thu, 01 Jul 2010 15:38:00 +0000</pubDate>
		<dc:creator>Stephen</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Icons]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[Sketch]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://blog.stephenhorlander.com/?p=386</guid>
		<description><![CDATA[Most of my design time has been focused on the visual design of the interface for Firefox 4. Now that the new theme process is well underway I was able to devote some time to designing larger geolocation icons for the notification panels that recently landed. The final icons turned out like this: Left to [...]]]></description>
			<content:encoded><![CDATA[<p class="postBody">Most of my design time has been focused on the visual design of the <a href="https://wiki.mozilla.org/Firefox/Projects/New_Theme">interface for Firefox 4</a>.  Now that the new theme process is well underway I was able to devote some time to designing larger <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=565187">geolocation icons</a> for the <a href="https://wiki.mozilla.org/Firefox/Projects/Doorhanger_notifications">notification panels</a> that <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=398776">recently landed</a>.</p>

<p class="postBody beforeList">The final icons turned out like this:</p>

<p class="postBody"><a href="http://www.stephenhorlander.com/images/blog-posts/geolocation-icon/geolocation-icons-full.jpg"><img src="http://www.stephenhorlander.com/images/blog-posts/geolocation-icon/geolocation-icons-560x200.png" title="Geolocation Icons" alt="Geolocation Icons" class="transparentImage" /></a><br />
  <span class="note">Left to Right: Windows, Mac, Linux</span>
</p>

<p class="postBody">This is based on an idea from <a href="http://blog.mozilla.com/faaborg">Alex Faaborg</a>. Instead of just using a plain globe there are red orbital rings(LASERS!) locking onto your position. The red is in contrast to the blue of the globe. Relaying some level of warning that a website is requesting your location.</p>

<p class="postBody beforeList">I also sketched and rendered a few other ideas that didn&#8217;t make the cut:</p>

<p class="postBody"><img src="http://www.stephenhorlander.com/images/blog-posts/geolocation-icon/alternate-idea-sketches.png" title="Geolocation Icons - Alternatives Sketches" alt="Geolocation Icons - Alternatives Sketches" class="transparentImage" /></p>

<p class="postBody"><a href="http://www.stephenhorlander.com/images/blog-posts/geolocation-icon/alternate-idea-renders-full.jpg"><img src="http://www.stephenhorlander.com/images/blog-posts/geolocation-icon/alternate-idea-renders.png" title="Geolocation Icons - Alternatives" alt="Geolocation Icons - Alternatives" class="transparentImage" /></a></p>
 
<p class="postBody beforeList">The final result looks like this on geolocation pages:</p>

<p class="postBody"><img src="http://www.stephenhorlander.com/images/blog-posts/geolocation-icon/panel-notification-icons-2.png" title="Geolocation Icons - Panels Screenshot" alt="Geolocation Icons - Panels Screenshot" class="" /></p>

<p class="postBody beforeList">Once the panel styling is updated it should look more like this:</p>

<p class="postBody"><img src="http://www.stephenhorlander.com/images/blog-posts/geolocation-icon/new-style-panels-2.png" title="Geolocation Icons - Updated Panels" alt="Geolocation Icons - Updated Panels" class="transparentImage" /></p>

<p class="postBody endPost">More notification icons to come <a href="https://wiki.mozilla.org/Firefox/Projects/Authentication_doorhanger_notifications">in the future</a>!</p>]]></content:encoded>
			<wfw:commentRss>http://blog.stephenhorlander.com/2010/07/geolocation-icons/feed/</wfw:commentRss>
		<slash:comments>24</slash:comments>
		</item>
		<item>
		<title>Theme Status (Timelines, Panels and Progress)</title>
		<link>http://blog.stephenhorlander.com/2010/04/theme-status-timelines-panels-and-progress/</link>
		<comments>http://blog.stephenhorlander.com/2010/04/theme-status-timelines-panels-and-progress/#comments</comments>
		<pubDate>Tue, 20 Apr 2010 18:05:05 +0000</pubDate>
		<dc:creator>Stephen</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Linux]]></category>
		<category><![CDATA[Mac]]></category>
		<category><![CDATA[Mockups]]></category>
		<category><![CDATA[Sketch]]></category>
		<category><![CDATA[Theme]]></category>
		<category><![CDATA[Windows]]></category>

		<guid isPermaLink="false">http://blog.stephenhorlander.com/?p=319</guid>
		<description><![CDATA[New Theme Project Status The New Theme project page has been updated with an extended(and idealized) timeline. I plan on spending much of my time this week getting everything lined up and editing the timeline as necessary and monitoring it going forward. &#160; Mac Theme Patches Markus has posted some patches for the Mac theme [...]]]></description>
			<content:encoded><![CDATA[<h3>New Theme Project Status</h3>
<p class="postBody">The <a href="https://wiki.mozilla.org/Firefox/Projects/New_Theme">New Theme project</a> page has been updated with an extended(and idealized) <a href="https://wiki.mozilla.org/Firefox/Projects/New_Theme/Timeline">timeline</a>. I plan on spending much of my time this week getting everything lined up and editing the timeline as necessary and monitoring it going forward.</p>
<p style="margin-bottom: 10px;">&nbsp;</p>

<h3>Mac Theme Patches</h3>
<a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/theme-osx-patch.png" rel="lightbox"><img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/theme-osx-patch-preview.png" title="Mac Theme Patches" alt="Mac Theme Patches" class="thumbnailMedium" /></a>
<p class="postBody"><a href="http://markusstange.wordpress.com/">Markus</a> has posted some patches for the Mac theme including <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=559033">toolbar buttons</a>, <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=559034">location bar</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=547787">tabs</a>.</p>

<a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/theme-osx-patch-personas.png" rel="lightbox"><img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/theme-osx-patch-personas-preview.png" title="Mac Theme Patches with Personas" alt="Mac Theme Patches with Personas" class="thumbnailMedium" /></a>
<p class="postBody">It also works nicely with Personas.</p>
<p style="margin-bottom: 10px;">&nbsp;</p>

<h3>Windows Theme Progress</h3>
<a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/theme-win7-tabs-patch.png" rel="lightbox"><img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/theme-win7-tabs-patch-preview.png" title="Windows New Style Tabs" alt="Windows New Style Tabs" class="thumbnailMedium" /></a>
<p class="postBody"><a href="http://design-noir.de/log/">Dao</a> has landed a patch for <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=549061">new tab styling</a>.</p>
<p style="margin-bottom: 10px;">&nbsp;</p>

<h3>Panel Styles</h3>
<p class="postBody">Last week I did some work on styling panels(specifically notifications) on various platforms. Something I have been meaning to do but was prompted by <a href="http://www.gavinsharp.com/blog/2010/04/16/notifications-progress/">Gavin&#8217;s work on notifications</a> and the need for split button visual styling.</p>
<p class="postBody beforeList"><strong>Windows</strong></p>
<a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-win7-01.png" rel="lightbox[windowsPanels]"><img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-win7-01-thumb.png" title="[Panels] Windows - Glass Border" alt="[Panels] Windows - Glass Border" class="thumbnail" /></a>
<a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-win7-02.png" rel="lightbox[windowsPanels]"><img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-win7-02-thumb.png" title="[Panels] Windows - Light w/Blue Border" alt="[Panels] Windows - Light w/Blue Border" class="thumbnail" /></a>
<a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-win7-03.png" rel="lightbox[windowsPanels]"><img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-win7-03-thumb.png" title="[Panels] Windows - Start Menu-esque Blue/Grey" alt="[Panels] Windows - Start Menu-esque Blue/Grey" class="thumbnail" /></a>
<a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-win7-04.png" rel="lightbox[windowsPanels]"><img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-win7-04-thumb.png" title="[Panels] Windows - Start Menu-esque Blue/Grey(Darker)" alt="[Panels] Windows - Start Menu-esque Blue/Grey(Darker)" class="thumbnail" /></a>
<a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-win7-05.png" rel="lightbox[windowsPanels]"><img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-win7-05-thumb.png" title="[Panels] Windows - Dark Grey/Black" alt="[Panels] Windows - Dark Grey/Black" class="thumbnail" /></a>
<br class="clear" />
<p class="postBody">Everyone on the UX team liked the <a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-win7-01.png">Glass Border approach</a>. It is consistent with Windows 7 taskbar panels(with the addition of the half-diamond) and feels lighter.</p>
<img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-download-win7.png" title="Download Panel" alt="Download Panel" class="thumbnailMedium" />
<p class="postBody">I also did some work on how this could look for panels outside of notifications like <a href="http://limi.net/articles/improving-download-behaviors-web-browsers/">the talked about Downloads panel</a>.</p>

<p class="postBody beforeList"><strong>Mac</strong></p>
<a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-osx.png" rel="lightbox"><img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-osx-preview.png" title="Mac Notifications Panel" alt="Mac Notifications Panel" class="thumbnailMedium" /></a>
<p class="postBody">An updated Mac notification panel with split button.</p>

<p class="postBody beforeList"><strong>Linux</strong></p>
<a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-linux.png" rel="lightbox"><img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/panel-notification-linux-preview.png" title="Linux Notifications Panel" alt="Linux Notifications Panel" class="thumbnailMedium" /></a>
<p class="postBody">Ideas for a styling the panels in Linux.</p>
<p style="margin-bottom: 10px;">&nbsp;</p>

<h3>Other Theme Stuff</h3>
<img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/edit-tray.png" title="Edit Tray" alt="Edit Tray" class="thumbnailMedium" />
<p class="postBody">Designed an edit &#8220;tray&#8221; that would appear when editing text.</p>

<img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/download-icon-panel-indicator.png" title="Panel Indicator" alt="Panel Indicator" class="thumbnailMedium" />
<p class="postBody">Had some thoughts around indicating a button that would invoke a panel.</p>

<a href="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/fullscreen-sketch.jpg" rel="lightbox"><img src="http://www.stephenhorlander.com/images/blog-posts/theme-update-2010-04-20/fullscreen-sketch-preview.png" title="Fullscreen Sketch" alt="Fullscreen Sketch" class="thumbnailMedium" /></a>
<p class="postBody">Sketched out some of the UX Team&#8217;s fullscreen brainstorms.</p>
]]></content:encoded>
			<wfw:commentRss>http://blog.stephenhorlander.com/2010/04/theme-status-timelines-panels-and-progress/feed/</wfw:commentRss>
		<slash:comments>115</slash:comments>
		</item>
		<item>
		<title>Sketch Day</title>
		<link>http://blog.stephenhorlander.com/2009/11/sketch-day/</link>
		<comments>http://blog.stephenhorlander.com/2009/11/sketch-day/#comments</comments>
		<pubDate>Fri, 20 Nov 2009 05:19:50 +0000</pubDate>
		<dc:creator>Stephen</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Experimental]]></category>
		<category><![CDATA[Sketch]]></category>

		<guid isPermaLink="false">http://blog.stephenhorlander.com/?p=223</guid>
		<description><![CDATA[]]></description>
			<content:encoded><![CDATA[<a href="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-large.jpg" rel="lightbox"><img src="http://www.stephenhorlander.com/images/blog-posts/sketches/menu-sketch-small.jpg" title="Menu Sketch" alt="Menu Sketch" /></a>]]></content:encoded>
			<wfw:commentRss>http://blog.stephenhorlander.com/2009/11/sketch-day/feed/</wfw:commentRss>
		<slash:comments>37</slash:comments>
		</item>
	</channel>
</rss>

