<?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>Inspire Technologies</title>
	<atom:link href="http://www.inspiretechs.com/blog/index.php/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.inspiretechs.com/blog</link>
	<description>Designs that Inspire You</description>
	<lastBuildDate>Fri, 09 Dec 2011 05:56:33 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.2</generator>
		<item>
		<title>Canadian Telco to Launch Products in Pakistan</title>
		<link>http://www.inspiretechs.com/blog/index.php/2011/12/09/canadian-telco-to-launch-products-in-pakistan/</link>
		<comments>http://www.inspiretechs.com/blog/index.php/2011/12/09/canadian-telco-to-launch-products-in-pakistan/#comments</comments>
		<pubDate>Fri, 09 Dec 2011 05:53:48 +0000</pubDate>
		<dc:creator>Usama Mushtaq</dc:creator>
				<category><![CDATA[Telecom News - Pakistan]]></category>

		<guid isPermaLink="false">http://www.inspiretechs.com/blog/?p=526</guid>
		<description><![CDATA[Polar Wireless a private company based in Richmond Hill, Ontario, Canada has shown interest in launching its products in Pakistan, reported APP citing a statement issued by Board of Investment. Statement said that Polar is looking for local carrier partners to drive inbound roaming traffic to their networks at wholesale rates. BOI said that the Polar is also looking to obtain a ‘call forwarding‘number to allow Polar users in Pakistan to forward their calls overseas while they are travelling (providing a &#8230; <a href="http://www.inspiretechs.com/blog/index.php/2011/12/09/canadian-telco-to-launch-products-in-pakistan/"></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.inspiretechs.com/contact.php" target="blank"><img style="float: right; padding-left: 10px; padding-bottom: 5px;" src="http://www.inspiretechs.com/images/myad.jpg" alt="" /></a></p>
<p><a href="http://www.polarwireless.com/" target="_blank">Polar Wireless</a> a private company based in Richmond Hill, Ontario, Canada has shown interest in launching its products in Pakistan, reported APP citing a statement issued by Board of Investment.</p>
<p>Statement said that Polar is looking for local carrier partners to drive inbound roaming traffic to their networks at wholesale rates. BOI said that the Polar is also looking to obtain a ‘call forwarding‘number to allow Polar users in Pakistan to forward their calls overseas while they are travelling (providing a service that allows the local Pakistani traveller access to reasonable mobile rates while they are out of the country).</p>
<p><strong>How Polar Works:</strong></p>
<p>The Polar Wireless offers Worldwide SIM Card that combines with a subscribers home SIM card (For instance Telenor, Mobilink etc.), which will offer you decreased outgoing rates when you are roaming aboard.</p>
<p>Polar Wireless has built a global proprietary Mobile Virtual Network that automatically reroutes subscribers calls through inexpensive telecommunications channel partners when they are roaming.</p>
<p>The Polar SIMs transformative technology is the first to allow a subscriber to keep their existing mobile phone and home phone number while taking advantage of discounted roaming rates abroad.</p>
<p>All calls are Carrier Grade Voice Quality and only premium telecom routes are used.<br />
The Polar Wireless SIM activates when subscribers leave their home wireless network.<br />
Once active, the Polar-powered mobile phone optimizes the value of every call by selecting the appropriate partner provider on the Polar Virtual Network.</p>
<p>Polar Wireless supports the telephony of all accounts by managing the accounts, controlling  the Virtual Network, decrementing pre-paid minutes in lieu of billing, and settling with foreign telecom entities making the user experience seamless.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.inspiretechs.com/blog/index.php/2011/12/09/canadian-telco-to-launch-products-in-pakistan/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Clear Indications That It’s Time To Redesign</title>
		<link>http://www.inspiretechs.com/blog/index.php/2011/12/09/clear-indications-that-its-time-to-redesign/</link>
		<comments>http://www.inspiretechs.com/blog/index.php/2011/12/09/clear-indications-that-its-time-to-redesign/#comments</comments>
		<pubDate>Fri, 09 Dec 2011 05:48:51 +0000</pubDate>
		<dc:creator>Usama Mushtaq</dc:creator>
				<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.inspiretechs.com/blog/?p=521</guid>
		<description><![CDATA[Redesign. The word itself can send shudders down the spines of any Web designer and developer. For many designers and website owners, the imminent onslaught of endless review cycles, coupled with an infinite number of “stakeholders” and their inevitable “opinions,” would drive them to shave their heads with a cheese grater if given a choice between the two. Despite these realities, redesigns are a fact of any online property’s life cycle. Here are five key indications that it’s time to redesign your &#8230; <a href="http://www.inspiretechs.com/blog/index.php/2011/12/09/clear-indications-that-its-time-to-redesign/"></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.inspiretechs.com/contact.php" target="blank"><img style="float: right; padding-left: 10px; padding-bottom: 5px;" src="http://www.inspiretechs.com/images/myad.jpg" alt="" /></a></p>
<p>Redesign. The word itself can send shudders down the spines of any Web designer and developer. For many designers and website owners, the imminent onslaught of endless review cycles, coupled with an infinite number of “stakeholders” and their inevitable “opinions,” would drive them to shave their heads with a cheese grater if given a choice between the two. Despite these realities, redesigns are a fact of any online property’s life cycle. Here are <strong>five key indications that it’s time to redesign</strong> your website and of how extensive that redesign needs to be.</p>
<div id="textadtarget">
<div id="textad">[<strong>Editor's note</strong>: A must-have for professional Web designers and developers: <em>The Printed Smashing Books Bundle</em> is full of practical insight for your daily work. <a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2863__zoneid=68__OXLCA=1__cb=373b7d2dab__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fprinted-book-bundle.html%3Fpk_campaign%3Dsmashing_books-bundle%26pk_kwd%3Dsm-ta-02" target="_self">Get the bundle right away</a>!]</p>
<div id="beacon_373b7d2dab"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=2863&amp;campaignid=1018&amp;zoneid=68&amp;loc=1&amp;referer=http%3A%2F%2Fuxdesign.smashingmagazine.com%2F2011%2F12%2F08%2Fclear-indications-time-to-redesign%2F&amp;cb=373b7d2dab" alt="" width="0" height="0" /></div>
</div>
</div>
<h3>Metrics Are Down</h3>
<p>The first and most important indicator that your website is in need of a rethink is metrics that are beginning to tank. There certainly could be other reasons for this symptom (such as your product not fitting the market), but once those are eliminated or mitigated, a constant downward trend in conversions, sales, engagement activities and general user participation indicates that the efficacy of your current design has worn off. Many people call it “creative fatigue,” but what this really indicates is <strong>a disconnect with your audience</strong>. The key to solving this in the redesign is to figure out where in the workflow the design is breaking down and then address those areas as top priorities.</p>
<p><img title="Metrics" src="http://media.smashingmagazine.com/wp-content/uploads/2011/12/metrics1.jpg" alt="Metrics" width="500" height="350" /><br />
<em>The metrics are the most important indicator.</em></p>
<p>The extent to which you redesign to solve sagging metrics could be limited either to adjusting your conversion funnel, if that’s where the problem resides, or to optimizing the product’s main workflow. It does not necessarily mean having to rethink the entire face that your product presents to the world.</p>
<h3>Your Users Tell You It’s Time</h3>
<p>Metrics give you immediate insight that something is wrong, but to get to the core of what needs to be addressed in the redesign you need to speak with your customers. Surveys work well, but usability testing is most effective. The fluidity of face-to-face conversation allows you to explore the dynamic threads that surveys restrict. If through these conversations you notice consistent patterns that shed light on the drivers behind your downward-trending metrics (and you will), then it’s time to redesign. In addition, these user conversations will reveal prevalent attitudes towards your brand, which can also be addressed in the redesign. In some instances, <strong>negative brand perception should be enough to trigger a redesign</strong> — but you’d never know about it unless you talk to your customers.</p>
<p><a href="http://www.flickr.com/photos/bjornmeansbear/4662232392/in/photostream"><img src="http://media.smashingmagazine.com/wp-content/uploads/2011/07/Rules-vs-Principles.jpg" alt="" /></a><br />
<em>The final decisions are still up to you. (Image: <a href="http://www.flickr.com/photos/bjornmeansbear/4662232392/in/photostream">Kristian Bjornard</a>)</em></p>
<p>Customer feedback will tell you not only whether to rethink parts of your website, but to what extent. Typically, customer conversations focus on specific elements of your workflow. Those areas are the ones that the redesign should focus on. In most cases, this wouldn’t be the whole website, but if the feedback is broad and far-reaching, then tackling the entire experience may be a priority.</p>
<h3>The Tech/UX “Debt” List Is Longer Than Your Forearm</h3>
<p>Over the course of building a product or website, an organization begins to accrue tech and UX debt. This debt is made up of all the things you <em>should</em> have done during the initial build but either didn’t get around to or had to cut corners on in order to ship the product on time. Each subsequent iteration inevitably adds more debt to the list, until the list becomes so long that it is almost insurmountable. While there are many ways to tackle tech and UX debt on an incremental level, there comes a point when the website, in essence, becomes “totalled.” Like a car that has sustained damage greater in cost than its value, your website gets to the point where <strong>starting over would be cheaper than fixing all of the items</strong> on your debt list. This is a perfect time for a redesign.</p>
<p>When the debt list gets this long, taking on “incremental redesigns” is easy, where you knock off bits from the list but not the majority of it. This turns into death by a thousand paper cuts, because as you fix elements on the list, you start to accrue more debt around other features. If the list truly is longer than your forearm, then rethink the website if possible.</p>
<h3>It Just “Looks” Old</h3>
<p>The website’s aesthetic reflects directly on the perception and trustworthiness of your brand. Even if your design was the hotness when it first launched, <strong>aesthetics evolve</strong>. An old design will be detrimental to your product, leading to the declining metrics mentioned earlier. How can you tell whether your website’s aesthetic is outdated? Look at your competition. Look at hyped-up newly launched services in other sectors. Compare your aesthetics to those of brands that are performing well. Those factors provide excellent barometers by which to assess the currency of your design. The challenge is to review these other websites objectively. Living with your website day in and day out can amplify the feeling that it’s stale and old. Ensure that your assessment is accurate by reviewing your findings with a cross-section of employees in your company.</p>
<p><a href="http://www.flickr.com/photos/bjornmeansbear/5013483665/in/photostream"><img title="Win some, Lose some." src="http://media.smashingmagazine.com/wp-content/uploads/2011/12/win-some.jpg" alt="Win some, Lose some." width="500" height="396" /></a><br />
<em>Decide on what to lose and what to add. (Image: <a href="http://www.flickr.com/photos/bjornmeansbear/5013483665/in/photostream">Kristian Bjornard</a>)</em></p>
<p>In this case, the redesign would essentially be a facelift, a superficial upgrade of the presentation layer that doesn’t necessarily address the fundamental workflow or conversion funnel — although those aspects will undoubtedly be affected by this aesthetic upgrade.</p>
<h3>It’s Been More Than 12 Months Since Your Last Refresh</h3>
<p>Even if none of the above indicators apply to your website, the shelf life of an aesthetic in today’s highly iterative online reality is hardly ever more than 12 months. If it’s been a year or longer since you last redesigned your website, then it’s time to redesign. Not only will it refresh the experience for your loyal customers, it will attract new ones. In addition, it will breathe life into the brand and show your user base, the press, your investors and staff that you’re committed to keeping the experience fresh and top of mind.</p>
<p>Again, the focus here is on an aesthetic improvement that keeps the brand current, not necessarily an overhaul.</p>
<h3>In Conclusion</h3>
<p>These are five simple indicators that it’s likely time to redesign your website, but the list is certainly not exhaustive. The number of them that apply to your situation will determine whether a redesign is imperative. But each indicator on its own is still <strong>a strong reason to kick off the next phase</strong> of your website’s life. Maintaining a current and fresh face for the online world will yield dividends in customer acquisition, conversion and retention. Also, your staff will stay immersed in the latest technologies, design trends and presentation-layer wizardry if they know that they’ll soon get to exercise their chops in a redesign.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.inspiretechs.com/blog/index.php/2011/12/09/clear-indications-that-its-time-to-redesign/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Auto-Save User’s Input In Your Forms With HTML5 and Sisyphus.js</title>
		<link>http://www.inspiretechs.com/blog/index.php/2011/12/08/auto-save-users-input-in-your-forms-with-html5-and-sisyphus-js/</link>
		<comments>http://www.inspiretechs.com/blog/index.php/2011/12/08/auto-save-users-input-in-your-forms-with-html5-and-sisyphus-js/#comments</comments>
		<pubDate>Thu, 08 Dec 2011 07:31:09 +0000</pubDate>
		<dc:creator>Usama Mushtaq</dc:creator>
				<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.inspiretechs.com/blog/?p=515</guid>
		<description><![CDATA[Editor’s note: This article is the third in our new series that introduces new, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered PrefixFree; the second introduced Foundation, a responsive framework that helps you build prototypes and production code. This time, we’re presenting Sisyphus.js, a library developed by Alexander Kaupanin to provide Gmail-like client-side drafts and a bit more. What Problem Needs Solving? Have you ever been filling out &#8230; <a href="http://www.inspiretechs.com/blog/index.php/2011/12/08/auto-save-users-input-in-your-forms-with-html5-and-sisyphus-js/"></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.inspiretechs.com/contact.php" target="blank"><img style="float: right; padding-left: 10px; padding-bottom: 5px;" src="http://www.inspiretechs.com/images/myad.jpg" alt="" /></a></p>
<p><em><strong>Editor’s note</strong>: This article is the third in our new series that introduces new, useful and freely available tools and techniques, developed and released by active members of the Web design community. The first article covered <a href="http://coding.smashingmagazine.com/2011/10/12/prefixfree-break-free-from-css-prefix-hell/">PrefixFree</a>; the second introduced <a href="http://coding.smashingmagazine.com/2011/10/25/rapid-prototyping-for-any-device-with-foundation/">Foundation</a>, a responsive framework that helps you build prototypes and production code. This time, we’re presenting Sisyphus.js, a library developed by Alexander Kaupanin to provide Gmail-like client-side drafts and a bit more.</em></p>
<h4>What Problem Needs Solving?</h4>
<p>Have you ever been filling out a long form online or writing an eloquent and spirited comment when suddenly the browser crashes? Or perhaps you closed the browser tab accidentally, or your Internet connection cuts off, or the electricity goes down (and, being ever obedient to Murphy’s Law, you had no backup power supply). If not, then you’re lucky. But no one is protected from such minor catastrophes.</p>
<p><a href="http://www.flickr.com/photos/bjornmeansbear/5081930704/sizes/m/in/set-72157624427149887/"><img title="Make Everything Better" src="http://coding.smashingmagazine.com/wp-content/uploads/2011/11/make-everything-better.jpg" alt="screenshot" width="500" height="500" /></a><br />
<em>(Image: <a href="http://www.flickr.com/photos/bjornmeansbear/5081930704/sizes/m/in/set-72157624427149887/">Kristian Bjornard</a>)</em></p>
<p>Imagine the storm of emotions felt by a user who had to add just a bit more information before submitting a form and then loses all data. Horrible, huh? Now, if only there was a way to recover that data, rather than undertake a <a href="http://en.wikipedia.org/wiki/Sisyphus">Sisyphean</a> pursuit.</p>
<h4>Existing Solutions</h4>
<p>One common solution is to write one’s comments in a local document, saving the file periodically, and then copying and pasting the text into the form once it’s complete. Some forms also allow you to save your draft by clicking a button, but not all forms have this feature, and it’s not the most convenient solution. The product that does this best is Gmail, with its auto-save feature for drafts: just type away, and all of the content is stored automatically, without you even needing to press a button.</p>
<p>After releasing Sisyphus.js, I learned of Lazarus, an extension for Firefox and Chrome that helps to recover form data. But browser plugins lead to an even bigger problem: distribution. Some users don’t have a clue what a browser extension is — many users don’t, in fact, which makes this approach inadequate on a large scale.</p>
<p>The people with a direct line to users are Web developers themselves. So, addressing the problem of user input at the stage of development seems more practical than expecting users to add to their skyscraper of extensions.</p>
<div id="textadtarget">
<div id="textad">[<strong>Editor's note</strong>: A must-have for professional Web designers and developers: <em>The Printed Smashing Books Bundle</em> is full of practical insight for your daily work. <a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2863__zoneid=68__OXLCA=1__cb=727ec6b8d6__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fprinted-book-bundle.html%3Fpk_campaign%3Dsmashing_books-bundle%26pk_kwd%3Dsm-ta-02" target="_self">Get the bundle right away</a>!]</p>
<div id="beacon_727ec6b8d6"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=2863&amp;campaignid=1018&amp;zoneid=68&amp;loc=1&amp;referer=http%3A%2F%2Fcoding.smashingmagazine.com%2F2011%2F12%2F05%2Fsisyphus-js-client-side-drafts-and-more%2F&amp;cb=727ec6b8d6" alt="" width="0" height="0" /></div>
</div>
</div>
<h3>A Solution: Sisyphus.js</h3>
<p>Implementing Gmail-like auto-saving of drafts is not straightforward at all. I wanted the solution to be simple and easy to use, which would rule out the use of server-side magic.</p>
<p>The result is an unassuming script that stores form data to the local storage of the user’s browser and restores it when the user reloads or reopens the page or opens the page in a new tab. The data is cleared from local storage when the user submits or resets the form.</p>
<h4>How to Use It</h4>
<p>Implementing Sisyphus.js is pretty simple. Just select which forms you’d like to protect:</p>
<div id="highlighter_445065">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>1</code></td>
<td><code>$(</code><code>'#form1, #form2'</code><code>).sisyphus();</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>Or protect all forms on the page:</p>
<div id="highlighter_173208">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>1</code></td>
<td><code>$(</code><code>'form'</code><code>).sisyphus();</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>The following values are the defaults but are customizable:</p>
<div id="highlighter_426337">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>1</code></td>
<td><code>{</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>2</code></td>
<td><code>customKeyPrefix: </code><code>''</code><code>,</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>3</code></td>
<td><code>timeout: 0,</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>4</code></td>
<td><code>onSave: </code><code>function</code><code>() {},</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>5</code></td>
<td><code>onRestore: </code><code>function</code><code>() {},</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>6</code></td>
<td><code>onRelease: </code><code>function</code><code>() {}</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>7</code></td>
<td><code>}</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>Let’s break these options down:</p>
<ul>
<li><code>customKeyPrefix</code><br />
An addition to key in local storage details in order to store the values of form fields.</li>
<li><code>timeout</code><br />
The interval, in seconds, after which to save data. If set to <code>0</code>, it will save every time a field is updated.</li>
<li><code>onSave</code><br />
A function that fires every time data is saved to local storage.</li>
<li><code>onRestore</code><br />
A function that fires when a form’s data is restored from local storage. Unlike <code>onSaveCallback</code>, it applies to the whole form, not individual fields.</li>
<li><code>onRelease</code><br />
A function that fires when local storage is cleared of stored data.</li>
</ul>
<p>Even after Sisyphus.js has been implemented in a form, you can apply it to any other form and the script won’t create redundant instances, and it will use the same options. For example:</p>
<div id="highlighter_300282">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>1</code></td>
<td><code>// Save form1 data every 5 seconds</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>2</code></td>
<td><code>$(</code><code>'#form1'</code><code>).sisyphus( {timeout: 5 } );</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>3</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>4</code></td>
<td><code>…</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>5</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>6</code></td>
<td><code>// If you want to protect second form, too</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>7</code></td>
<td><code>$(</code><code>'#form2'</code><code>).sisyphus( {timeout: 10} )</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>8</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>9</code></td>
<td><code>// Now the data in both forms will be saved every 10 seconds</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<p>Of course, you can change options on the fly:</p>
<div id="highlighter_285857">
<div>
<div>
<table>
<tbody>
<tr>
<td><code>01</code></td>
<td><code>var</code> <code>sisyphus = $(</code><code>'#form1'</code><code>).sisyphus();</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>02</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>03</code></td>
<td><code>…</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>04</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>05</code></td>
<td><code>// If you decide that saving by timeout would be better</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>06</code></td>
<td><code>$.sisyphus().setOptions( {timeout: 15} );</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>07</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>08</code></td>
<td><code>…</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>09</code></td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>10</code></td>
<td><code>// Or</code></td>
</tr>
</tbody>
</table>
</div>
<div>
<table>
<tbody>
<tr>
<td><code>11</code></td>
<td><code>sisyphus.setOptions( {timeout: 15} );</code></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<h4>Usage Details</h4>
<p><strong>Requirements:</strong> Sisyphus.js requires jQuery version 1.2 or higher.</p>
<p><strong>Browser support:</strong></p>
<ul>
<li>Chrome 4+,</li>
<li>Firefox 3.5+,</li>
<li>Opera 10.5+,</li>
<li>Safari 4+,</li>
<li>IE 8+,</li>
<li>It also works on Android 2.2 (both the native browser and Dolphin HD). Other mobile platforms have not been tested.</li>
</ul>
<p><strong>Download the script:</strong> <a href="http://simsalabim.github.com/sisyphus/">Sisyphus.js and the demo</a> are hosted on GitHub; the minified version is about 3.5 KB. A <a href="https://github.com/simsalabim/sisyphus/issues?labels=feature">road map</a> and <a href="https://github.com/simsalabim/sisyphus/issues?labels=">issue tracker</a> are also available.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.inspiretechs.com/blog/index.php/2011/12/08/auto-save-users-input-in-your-forms-with-html5-and-sisyphus-js/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Content Strategy Within The Design Process</title>
		<link>http://www.inspiretechs.com/blog/index.php/2011/12/08/content-strategy-within-the-design-process/</link>
		<comments>http://www.inspiretechs.com/blog/index.php/2011/12/08/content-strategy-within-the-design-process/#comments</comments>
		<pubDate>Thu, 08 Dec 2011 07:28:43 +0000</pubDate>
		<dc:creator>Usama Mushtaq</dc:creator>
				<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.inspiretechs.com/blog/?p=509</guid>
		<description><![CDATA[The first thing to understand about content strategy is that no two people understand it the same way. It’s a relatively new — and extremely broad — discipline with no single definitive definition. A highly informative Knol on content strategy defines it as follows: “Content strategy is an emerging field of practice encompassing every aspect of content, including its design, development, analysis, presentation, measurement, evaluation, production, management, and governance.” This definition is a great place to start. Although the discipline has clearly &#8230; <a href="http://www.inspiretechs.com/blog/index.php/2011/12/08/content-strategy-within-the-design-process/"></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.inspiretechs.com/contact.php" target="blank"><img style="float: right; padding-left: 10px; padding-bottom: 5px;" src="http://www.inspiretechs.com/images/myad.jpg" alt="" /></a></p>
<p>The first thing to understand about content strategy is that no two people understand it the same way. It’s a relatively new — and extremely broad — discipline with no single definitive definition. A highly informative <a href="http://knol.google.com/k/content-strategy">Knol on content strategy</a> defines it as follows:</p>
<blockquote><p>“Content strategy is an emerging field of practice encompassing every aspect of content, including its design, development, analysis, presentation, measurement, evaluation, production, management, and governance.”</p></blockquote>
<p>This definition is a great place to start. Although the discipline has clearly evolved, this breakdown of its scope makes perfect sense. The aspects of content strategy that matter most to Web designers in this definition are design (obviously!), development, presentation and production. In this article, we’ll concentrate on the <strong>relationship between content strategy and design</strong> in creating, organizing and displaying Web copy.</p>
<p>As a writer and content strategist myself, I’ve worked with designers in all of these areas and find the creative process highly enriching. I’ve been fortunate enough to work with designers who are quick to challenge ideas that are unclear or unsound, who are brilliant at creating striking visual representations of even the most complex concepts. A lively interplay between design and content is not only fun, but is how spectacular results are achieved. This is why content strategy should matter a great deal to designers.</p>
<h4>What Is Content Strategy, And Why Should A Designer Care?</h4>
<p>Content strategy is the glue that holds a project together. When content strategy is ambiguous or absent, don’t be surprised if you end up with the Internet equivalent of <a href="http://en.wikipedia.org/wiki/Ishtar_(film)">Ishtar</a>. When content strategy is in place and in its proper place, we’re on our way to producing beautiful <em>and</em> effective results.</p>
<p><a href="http://speakerdeck.com/u/destraynor/p/the-language-of-interfaces"><img title="Language" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/language.jpg" alt="Language" width="500" height="323" /></a><br />
<em>Slide from <a href="http://speakerdeck.com/u/destraynor/p/the-language-of-interfaces">The Language of Interfaces</a> by Des Traynor.</em></p>
<p>While wrapping one’s head around content strategy might be difficult, the thing that makes it work is very simple: <strong>good communication</strong>. Sometimes a project moves along like a sports car on a superhighway. Other times, the road is so full of bumps and potholes that it’s a wonder we ever reach our destination. As we explore the relationship between content strategy and design, I’ll detail how I keep the channels of communication open and go over the workflow processes that I’ve used to support that effort. I hope that sharing my experiences (both positive and negative) will help you contribute to and manage projects more effectively and deliver better products to clients.</p>
<div id="textadtarget">
<div id="textad">[<strong>Editor's note</strong>: A must-have for professional Web designers and developers: <em>The Printed Smashing Books Bundle</em> is full of practical insight for your daily work. <a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2863__zoneid=68__OXLCA=1__cb=acedb69f5f__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fprinted-book-bundle.html%3Fpk_campaign%3Dsmashing_books-bundle%26pk_kwd%3Dsm-ta-02" target="_self">Get the bundle right away</a>!]</p>
<div id="beacon_acedb69f5f"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=2863&amp;campaignid=1018&amp;zoneid=68&amp;loc=1&amp;referer=http%3A%2F%2Fuxdesign.smashingmagazine.com%2F2011%2F12%2F02%2Fcontent-strategy-within-design-process%2F&amp;cb=acedb69f5f" alt="" width="0" height="0" /></div>
</div>
</div>
<h3>How To Get Started: The First Step Is The Longest</h3>
<blockquote><p><em>Project manager:</em> We need a landing page for client X.</p>
<p><em>Designer:</em> I can’t start the design until I see some content.</p>
<p><em>Writer:</em> I can’t start writing until I see a design.</p></blockquote>
<p>You may find this dialogue amusing… until it happens to you! At our firm, we find that the best way to get past such a standoff is to write first. This is because content strategy, at a fundamental level, <strong>frames a project for the designer</strong>. As a content strategist, my job is to articulate the why, where, who, what and how of the content:</p>
<ul>
<li><em>Why</em> is it important to convey this message? This speaks to purpose.</li>
<li><em>Where</em> on the website should the message appear? This speaks to context.</li>
<li><em>Who</em> is the audience? This speaks to the precision of the message.</li>
<li><em>What</em> are we trying to say? This speaks to clarity.</li>
<li><em>How</em> do we convey and sequence the information for maximum impact? This speaks to persuasiveness.</li>
</ul>
<p>Bringing it down to a more detailed level, let’s consider a landing page. A content strategist will determine such things as the following:</p>
<ul>
<li><strong>Audience</strong><br />
Is the audience sophisticated? Down to earth? College-level? Predominately male? Female? Etc.</li>
<li><strong>Word count</strong><br />
Some pitches scream for long copy, while others must be stripped to the bare minimum. SEO might factor into the equation as well.</li>
<li><strong>Messaging priorities</strong><br />
What is the most important point to convey? The least important? What needs to be said first (the hook)? What needs to be said just leading up to the call to action?</li>
<li><strong>Call to action</strong><br />
What will the precise wording be? What emotional and intellectual factors will motivate the visitor to click through?</li>
</ul>
<p>Clear direction on these points not only helps the writer write, but helps the designer with layout, color palettes and image selection. When we start with words, we produce designs that are more reflective of the product’s purpose.</p>
<p>Landing pages are a great place to try this workflow, because in terms of content strategy, <strong>they are less complex</strong> than many other types of Web pages. A product category page, on the other hand, might have a less obvious purpose or multiple purposes, considerably greater word counts, more (and more involved) messaging points, and a variety of SEO considerations, all of which would affect its design.</p>
<h4>Quick Tips for Getting Started</h4>
<ul>
<li>Make sure someone is specifically responsible for content strategy. If strategic responsibility is vague, your final product will be, too.</li>
<li>Slow down! Everybody, me included, is eager to dive headfirst into a new project. But “ready-aim-fire” is not a winning content strategy. Make sure everyone is on the same page conceptually before cranking out work.</li>
<li>If content strategy falls on your shoulders as a designer, cultivate an understanding of the discipline. Resources are listed at the end of this article to help you.</li>
<li>Make sure designers and writers understand what their roles are — and are not. There’s no need for writers to tell designers how to design, or for designers to tell writers how to write.</li>
</ul>
<h3>Perfecting The Process: Break Up Those Bottlenecks</h3>
<blockquote><p><em>Project manager:</em> How are things coming along?</p>
<p><em>Developer:</em> I’m waiting on design.</p>
<p><em>Designer:</em> I’m waiting on content.</p>
<p><em>Writer:</em> I’m waiting on project management.</p></blockquote>
<p>Web development projects in particular involve a lot of moving parts, with potential bottlenecks everywhere. The graphic below describes our Web development process, with an emphasis on the design and content components. Chances are, whether you are freelancing or at an agency, at least parts of this should look familiar:</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/SMgraphic-large.jpg"><img title="Design &amp; Content Process" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/design1.jpg" alt="Design &amp; Content Process" width="500" height="975" /></a><br />
<em>Link: <a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/SMgraphic-large.jpg">Larger version</a> (Image credit: Chris Depa, Straight North)</em></p>
<p>The process is by no means perfect, but it is continually improving. In the next section, we’ll look at the many types of content-design difficulties you might experience.</p>
<p>To help our designers lay out text for wireframes and designs, we <strong>utilize content templates</strong> based on various word counts. These templates also incorporate best practices for typography and SEO. When the designer drops the template into a wireframe, it looks like this:</p>
<p><img title="Content in wireframe" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/wires.jpg" alt="Content in wireframe" width="500" height="300" /><br />
<em>SEO content template in a wireframe.</em></p>
<p>The use of content templates not only takes a lot of guesswork out of the designer’s job, but also speeds up client reviews. When clients are able to see what the content will roughly look like in the allotted space, they tend to be more comfortable with the word counts and the placement of text on the page.</p>
<p>Communication can be streamlined using project management software. We use Basecamp, which is a popular system, but many other good ones are available. If you’re a freelancer, getting clients to work on your preferred project management platform can be an uphill battle, to say the least. Still, I encourage you to try; my experience in managing projects via email has been dismal, and many freelance designers I know express the same frustration.</p>
<p>The big advantage of a project management system is that it provides a <strong>single place for team members to manage tasks and interact</strong>. Internal reviews of design templates is one good example. The project manager can collect feedback from everyone in one place, and each participant can see what others have said and respond to it. Consolidating this information prevents the gaps and miscommunication that can occur when projects are managed through multiple email exchanges. Designers can see all of the feedback in one place — and only one place. This is a big time-saver.</p>
<h4>Quick Tips for the Creative Process</h4>
<ul>
<li>Make sure someone is specifically responsible for project management.</li>
<li>Whether or not your process is sophisticated, get it down in writing and in front of all team members before the project starts. This really helps to align expectations and keep communication flowing.</li>
<li>Meet at regular intervals to discuss status and problems. Hold yourself and others accountable.</li>
<li>Get approvals along the way, rather than dump the completed project in the client’s lap. Having clients sign off on a few pages of content and one or two templates really helps to align the creative process with client expectations, and it reduces the risk of those massive overhauls at the tail end that demolish budgets and blow deadlines.</li>
<li>Writers and designers should discuss issues as quickly, openly and thoroughly as possible.</li>
</ul>
<h3>Conflict Resolution: Why Can’t We All Just Get Along?</h3>
<blockquote><p><em>Designer:</em> All these words are boring me.</p>
<p><em>Writer:</em> All these images are confusing me.</p>
<p><em>Project manager:</em> All these arguments are killing me.</p></blockquote>
<p>No matter how clear the strategy, no matter how smooth the process, design and content will conflict somewhere along the line in almost every project. In fact, if creative tension is absent, it may well indicate that the project is in serious trouble. Here are the issues I run into on a fairly regular basis, as well as ideas for getting past them.</p>
<h4>Making Room for SEO Content</h4>
<p>Big chunks of content are bothersome to designers; even as a writer, I worry about high word counts turning off some of our audience. However, when SEO considerations demand a lot of words on a page, there are ways to make everyone happy:</p>
<ol>
<li><strong>Tabs are a nifty way to hide text.</strong><br />
Tabs allow you to keep the page tight vertically. Even more importantly, they enable visitors to easily find the information they need — and ignore what they don’t need. Below is a tabbed product area in the Apple Store.<br />
<a href="http://store.apple.com/us/browse/home/shop_mac"><img title="Apple Tabs" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/tabs.jpg" alt="Apple Tabs" width="500" height="340" /></a><br />
<em><a href="http://store.apple.com/us/browse/home/shop_mac">The Apple Store</a></em></li>
<li><strong>Keep SEO content below the fold.</strong><br />
This is a compromise, because an SEO strategist would prefer optimized content to appear above the fold. However, if a website is to have any hope of <em>converting</em> traffic brought in by SEO, then visitors need to see appealing design, not a 300-word block of text.<br />
<a href="http://moviesnowapp.com/"><img title="SEO below the fold" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/moviesnow.jpg" alt="SEO below the fold" width="500" height="400" /></a><br />
<em>The <a href="http://moviesnowapp.com/">Movies Now</a> landing page.</em></li>
<li><strong>Step up creativity on non-SEO pages.</strong><br />
For many websites, the pages that are most important to SEO have to do with products and services, where conveying features and benefits is needed more than wowing visitors with design. Conversely, pages on which awesome design matters most are often unimportant for SEO: “About,” bio and customer service pages, for example.<br />
<a href="http://carsonified.com/team/lou/"><img title="Carsonified Team Pages" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/carsonified.jpg" alt="Carsonified Team Pages" width="500" height="323" /></a><br />
<em>Carsonified’s <a href="http://carsonified.com/team/lou/">team pages</a>.</em></li>
</ol>
<h4>Clarity vs. Creativity</h4>
<p>We fight this battle over what I call “design content” all the time — primarily with navigation labels, home-page headers and call-to-action blocks. At a fundamental level, it is a battle over the question, “Which wins over the hearts and minds of visitors more: awesome design or straightforward information?”</p>
<p><strong>Navigation</strong><br />
Making the labels for navigation straightforward is a fairly established best practice. Predictability is important: if visitors are looking for your “About” page, and they finally stumble on it by clicking on “Be Amazed,” then the emotion you will have elicited is irritation, not adoration. Be as creative as you want with the look and feel of the labels, but to maximize the user experience, the text and positioning of the labels must be as vanilla as possible.</p>
<p><a href="http://contrast.ie/blog/the-language-of-interfaces/"><img title="Interface" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/interface1.jpg" alt="Interface" width="500" height="298" /></a><br />
<em>For insight on how to achieve clarity, read “<a href="http://contrast.ie/blog/the-language-of-interfaces/">The Language of Interfaces</a>.”</em></p>
<p><strong>Design of the header on the home page</strong><br />
Rotating header images and other types of animation are rather in vogue these days, and they’re a good way to convey a thumbnail sketch of a firm’s capabilities and value proposition. Content must convey information, but the header must work on an emotional level to be effective. Writers must take a back seat to designers! The Ben the Bodyguard home page (below) starts to build a connection using a comic character and storyline. This is different than most sites that simply talk about feature after feature.</p>
<p><a href="http://benthebodyguard.com/index2.php"><img title="Ben the Bodyguard" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/bodyguard.jpg" alt="Ben the Bodyguard" width="500" height="323" /></a><br />
<em>The design should tell a story. (<a href="http://benthebodyguard.com/index2.php" rel="nofollow">Ben the Bodyguard</a>)</em></p>
<p><strong>Call-to-action blocks</strong><br />
Before all else, make sure your website’s pages even <em>have</em> calls to action, because this is your opportunity to lead visitors to the logical next step. A call to action could be as simple as a text link, such as “Learn more about our <a href="http://www.example.com/">Chicago SEO services</a>.” Generally more effective for conversion would be a design element that functions almost as a miniature landing page.</p>
<p>Much like landing pages, the wording of the call-to-action phrase must be crystal clear and be completely relevant to the page to which you are taking visitors. Yet impeccable wording is not enough: the design of the content block must be captivating, and the text laid out in a way that makes it eminently readable.</p>
<p>Designers can get rather snarly when I tell them their design for a call to action needs five more words: it might force them to rethink the entire design. Many times, though, a discussion with the designer will make us realize that we don’t actually need those extra five words; in fact, we’ll sometimes hit on a way to <em>reduce</em> the word count. The <strong>creative interplay mentioned earlier makes a huge difference</strong> in this all-important area of conversion optimization.</p>
<p><img title="Calls to action" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/cta.jpg" alt="Calls to action" width="500" height="300" /><br />
<em>Calls to action require excellent design and content.</em></p>
<h4>Quick Tips for Conflict Resolution</h4>
<ol>
<li>Keep the lines of communication open between all team members and the client.</li>
<li>Select a project manager with great communication skills and an objective point of view.</li>
<li>Stay focused on the purpose of the design: is it to persuade, motivate, inform or something else? Creative disagreements should never be theoretical; they should always be grounded in what will increase the real-world effectiveness of the work at hand.</li>
</ol>
<h3>Long-Winded Writers Vs. Lofty-Minded Designers</h3>
<p>One thing I run up against continually is my own tendency to say too much and a designer’s tendency to say too little. Ask a writer what time it is, and they’ll tell you how to make a clock. Ask a designer what time it is, and they’ll give you a stylized image of a pendulum. Neither answer is particularly helpful!</p>
<p>These opposing mentalities pose challenges in Web design. Does an image alone convey enough information about a product’s key benefit? Will the length of a 200-word explanation of that benefit deter people from reading it? How intuitive can we expect visitors to be? How patient?</p>
<p>This is when having a process that encourages communication between team members makes a difference. I wish I had a secret formula for resolving conflict, but I don’t. I know of only two ways to balance design and content philosophies, and one of them is to talk it out as a team. As I said, communication is at the heart of an effective content strategy, and we have to resist the temptation that some of us have to withdraw into a shell when we encounter confrontation.</p>
<p>The other way to resolve conflicts — astoundingly underused, in my experience — is to <strong>get feedback from target users</strong>. Simply showing people a Web page and then asking for their key takeaways will tell you just about all you need to know about how effective you’ve been in getting the point across. Our opinion of our own work will always be subjective. Furthermore, because we’re emotionally invested is what we’ve created, discussing its flaws calmly and collectedly is difficult. Users are the ultimate judge of any creative effort, so why not take subjectivity and emotion out of the equation by going directly to the source?</p>
]]></content:encoded>
			<wfw:commentRss>http://www.inspiretechs.com/blog/index.php/2011/12/08/content-strategy-within-the-design-process/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Mixing Up Illustration: Combining Analog And Digital Techniques</title>
		<link>http://www.inspiretechs.com/blog/index.php/2011/12/08/mixing-up-illustration-combining-analog-and-digital-techniques/</link>
		<comments>http://www.inspiretechs.com/blog/index.php/2011/12/08/mixing-up-illustration-combining-analog-and-digital-techniques/#comments</comments>
		<pubDate>Thu, 08 Dec 2011 07:24:11 +0000</pubDate>
		<dc:creator>Usama Mushtaq</dc:creator>
				<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://www.inspiretechs.com/blog/?p=502</guid>
		<description><![CDATA[People often ask how I arrived at a finished illustration. Honestly, it’s different every time, but it always starts with a hand-drawn sketch. Sometimes, I paint it completely by hand; sometimes I’ll scan in a pencil drawing. Many of my pieces are 100% analog that I’ll show only at shops or galleries. Use anything you can; if the illustration would work as a wood carving, go that route. There are concrete steps one can take, but they certainly don’t have &#8230; <a href="http://www.inspiretechs.com/blog/index.php/2011/12/08/mixing-up-illustration-combining-analog-and-digital-techniques/"></a>]]></description>
			<content:encoded><![CDATA[<p><a href="http://www.inspiretechs.com/contact.php" target="blank"><img style="float: right; padding-left: 10px; padding-bottom: 5px;" src="http://www.inspiretechs.com/images/myad.jpg" alt="" /></a></p>
<p>People often ask how I arrived at a finished illustration. Honestly, it’s different every time, but it always starts with a hand-drawn sketch. Sometimes, I paint it completely by hand; sometimes I’ll scan in a pencil drawing. Many of my pieces are 100% analog that I’ll show only at shops or galleries. Use anything you can; if the illustration would work as a wood carving, go that route. There are concrete steps one can take, but they certainly don’t have to be the same every time. My goal is to take a sketch or idea as far as it can go — and also, to get out of my comfort zone and challenge myself with every new job. For this article, I’ll use handcrafted brushes and Photoshop as my tools.</p>
<div id="textadtarget">
<div id="textad">[<strong>Editor's note</strong>: Have you already got your copy of the <em>Smashing Book #2</em>? The book shares valuable practical insight into design, usability and coding. <a href="http://auslieferung.commindo-media-ressourcen.de/www/delivery/ck.php?oaparams=2__bannerid=2862__zoneid=68__OXLCA=1__cb=941a7bf4dd__oadest=https%3A%2F%2Fshop.smashingmagazine.com%2Fsmashing-book-2.html%3Fpk_campaign%3Dsmashing-book-2%26pk_kwd%3Dsm-ta-01" target="_self">Have a look at the contents</a>.]</p>
<div id="beacon_941a7bf4dd"><img src="http://auslieferung.commindo-media-ressourcen.de/www/delivery/lg.php?bannerid=2862&amp;campaignid=1018&amp;zoneid=68&amp;loc=1&amp;referer=http%3A%2F%2Fwww.smashingmagazine.com%2F2011%2F12%2F07%2Fmixing-up-illustration-combining-analog-and-digital-techniques%2F&amp;cb=941a7bf4dd" alt="" width="0" height="0" /></div>
</div>
</div>
<h3>Sketching It Out</h3>
<p>Concepting for me always starts with pencil and paper. If there is one consistent element through all of my pieces, it’s sketching. I love to draw. If I could establish and execute everything with a single pencil drawing, I would. The best thing to do is keep some type of sketchbook or journal with you as much as possible. Milton Glaser said it best: “Drawing is visual thinking.” Drawing creates many possibilities for any idea you might have. It’s then when the character’s personality starts to emerge. Then, I’ll add some volume to the sketch to show where the textures should really come through.</p>
<p><img title="Step1_Sketch" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/Step1_Sketch.jpg" alt="Sketch It Out" width="550" height="526" /></p>
<h3>Researching</h3>
<p>This is the most underestimated part of the process, but one of the most important. Here, we’re assessing the sketch. What textures would work? What colors would work? It helps to look at your influences.</p>
<p>Some artists who always inspire me are Mary Blair, Alice Provensen, Charley Harper, Maurice Noble and Eyvind Earle. And there are so many ways now to catalog and bookmark historical artwork.</p>
<p>Also, if I’m drawing an elephant’s skin, or wood on a camera, or a band on a helmet, I’ll want to take a close look at the real thing. Google Images is quick, but if I have time I’ll run to the library. Sometimes I do this as soon as I have an idea. Really <em>seeing</em> what you’ll be working with helps.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/research.jpg"><img title="research" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/research.jpg" alt="Researching It image" width="550" height="560" /></a></p>
<h3>Crafting Your Own Brushes</h3>
<p>I do this because I want my brushes to be my own. Many great websites out there offer textured brushes for Photoshop. For me, the more unique these brushes, the better. Based on my sketch and research, I will have some idea of what I want to capture. I’ll use oil pastels, paint, paper towels, charcoal and anything else. It’s all about being resourceful — use everything. One more thing: when making brushes, the grittier the paper, the better. The more tooth it has, the more the marks will scan. It is for this reason alone I have to clean my scanner <em>all</em> the time.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/Tools.jpg"><img title="Tools" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/Tools.jpg" alt="Tools for Making Brushes" width="550" height="383" /></a></p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/Step3_CraftingBrushes.jpg"><img title="Step3_CraftingBrushes" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/Step3_CraftingBrushes.jpg" alt="Crafting the Brushes" width="550" height="383" /></a></p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/RoughSkin.jpg"><img title="RoughSkin" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/RoughSkin.jpg" alt="Pastel Marks on Paper for Brushes" width="550" height="383" /></a><br />
<em>Some rough crosshatching for the elephant’s skin, with an oil pastel on drawing paper.</em></p>
<h3>Scanning It All In</h3>
<p>Scan everything: the initial sketch, the textures, anything you’ve made to this point. I’ll keep anything that I don’t use at this point in a library, possibly to use for something else. I’ve set the scanner to 600 DPI at “Millions” of colors. If your scanner has a “Sharpen” setting, crank it to “High.” You can scan the sketches in black and white at 1200 DPI, or in grayscale since the brushes will be black and white. I’ve set the colors to “High” so that I can archive the files and use them for something else. Once everything has been scanned, let’s open the images in Photoshop.</p>
<p>Here is a scan of my original sketch. I scanned it in at 300 DPI because I will eventually be printing this piece.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/OriginalScan.jpg"><img title="OriginalScan" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/OriginalScan.jpg" alt="Original Scan" width="550" height="383" /></a></p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/Initial_Brushes.jpg"><img title="Initial_Brushes" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/Initial_Brushes.jpg" alt="Initial Brushes" width="550" height="383" /></a></p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/UppingLevels.jpg"><img title="UppingLevels" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/UppingLevels.jpg" alt="Up the Levels" width="550" height="383" /></a></p>
<p>If you scan as black and white, you won’t need to worry about adjusting the levels. I’ve scanned in color, so I’ll increase the black and white values in Photoshop. The levels can be found in Images → Adjustments → Levels.</p>
<h3>Defining Brushes In Photoshop</h3>
<p>I recommend making each one of these brushes a separate file. For the resolution, you can go up to 2500 × 2500. It really depends on what the finished piece needs to be. For this exercise, I’ll select a portion of the scan and define a brush from it.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/SelectBrush.jpg"><img title="SelectBrush" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/SelectBrush.jpg" alt="Selecting the Brush to Make" width="550" height="383" /></a></p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/DefineBrushFromImage.jpg"><img title="DefineBrushFromImage" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/DefineBrushFromImage.jpg" alt="Define Brush in PS" width="550" height="383" /></a></p>
<p>From the menu drop-down, go to “Edit” and then “Define Brush.”</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/NameYourSelectedBrush.jpg"><img title="NameYourSelectedBrush" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/NameYourSelectedBrush.jpg" alt="Name Selected Brush" width="550" height="383" /></a></p>
<p>Now that we have created a brush, we can name it. It will be added to our Brush palette.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/BrushAdded.jpg"><img title="BrushAdded" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/BrushAdded.jpg" alt="Brush Added to the Palette" width="550" height="383" /></a></p>
<p>You can view the Brush palette by selecting the Brush tool. Look at the options toolbar, and you’ll see a thumbnail of the brush; you can pull this down to view the entire palette. From the menu arrow in the top right, you can save brushes you’ve created. Brushes are saved in Photoshop’s Presets/Brushes folder. You can also load brushes from this menu as well.</p>
<h3>Selecting A Color Palette</h3>
<p>Now that our brush set is in order, let’s start painting. For the color palette, I’ve researched my idols. <a href="http://en.wikipedia.org/wiki/Mary_Blair">Mary Blair</a> and <a href="http://en.wikipedia.org/wiki/Alice_and_Martin_Provensen">Alice Provensen</a> are masters of color and shape. I always look at their use of color and design. Again, this is why research is so important. Study the people you admire, and analyze why you admire their work. I really like a somewhat muted palette, with some small areas of intense color. In my scanned sketch, I’ve added another layer and sampled the colors I’d like to use.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/Colors.jpg"><img title="Colors" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/Colors.jpg" alt="Color Palette" width="550" height="383" /></a></p>
<h3>Making Shapes And Painting</h3>
<p>Let’s go to the Paths menu and draw the shapes that we want to paint. From here, we create a “New Path” using the Pen tool, to define the shapes that we established in the sketch. So, let’s open the sketch that we scanned, select the Pen tool from the toolbar, and select “New Path” from the Path menu. Once the Path is saved, we use the Path tool (which is the Pen tool), and start tracing out our shapes. The image below shows all the paths I’ve created that I intend to paint.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/MakingPaths.jpg"><img title="MakingPaths" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/MakingPaths.jpg" alt="Creating Paths" width="550" height="383" /></a></p>
<p>Let’s start by painting the shape that will be the background. From the toolbar, select the Path tool, and select a specific path.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/SelectingIndividualPath.jpg"><img title="SelectingIndividualPath" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/SelectingIndividualPath.jpg" alt="Selecting an Individual path" width="550" height="383" /></a></p>
<p>Now that we’ve selected a Path, we can create a selection from that path. To do this, select from the pull-down menu on the right in the Paths menu. You’ll see an option named “Make Selection.”</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/MakeSelection.jpg"><img title="MakeSelection" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/MakeSelection.jpg" alt="Make Selection from Path" width="550" height="383" /></a></p>
<p>Once that’s selected, a dialog box will pop up asking for a radius to feather the selection; 0 is fine. Also, enable “Anti-aliased” and “New Selection.”</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/MakeSelection2.jpg"><img title="MakeSelection2" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/MakeSelection2.jpg" alt="Make Selection from Path" width="550" height="383" /></a></p>
<p>Now that we have a selection, we can “Create a New Layer.” This layer will be specific to this shape. We’ll end up with many layers for each shape, but they will give us the flexibility to edit down the road.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/CreateNewLayer.jpg"><img title="CreateNewLayer" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/CreateNewLayer.jpg" alt="Create a New Layer" width="550" height="383" /></a></p>
<p>Now that we have a new layer, and the Path is a selection, we can use a brush from the brush set that we created. Also, I’m still using the colors from the palette that I created earlier.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/PaintingShapes1.jpg"><img title="PaintingShapes1" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/PaintingShapes1.jpg" alt="Painting Shapes" width="550" height="383" /></a></p>
<p>Here’s where the research, brush creation and painting all come together. Let’s paint the path on a “New Layer,” using the steps described above.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/PaintingShapes2.jpg"><img title="PaintingShapes2" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/PaintingShapes2.jpg" alt="Painting Shapes" width="550" height="383" /></a></p>
<p>Painting within the shapes you’ve defined is a chance to experiment. You can try all kinds of things, like making the brush more transparent or painting over other textures. For me, it’s a lot of trial and error. This image below is a close-up of the brush I’m painting with.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/BrushCloseUp.jpg"><img title="BrushCloseUp" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/BrushCloseUp.jpg" alt="Brush Close Up" width="550" height="383" /></a></p>
<p>After many painted layers, I end up with a piece that is digitally painted with hand-crafted brushes.</p>
<p><a href="http://media.smashingmagazine.com/wp-content/uploads/2011/11/ImageForArticle.jpg"><img title="ImageForArticle" src="http://media.smashingmagazine.com/wp-content/uploads/2011/11/ImageForArticle.jpg" alt="Finished Illustration" width="424" height="533" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.inspiretechs.com/blog/index.php/2011/12/08/mixing-up-illustration-combining-analog-and-digital-techniques/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>

