<?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>WhatwasIthinking.co.uk &#187; Web Design</title>
	<atom:link href="http://www.whatwasithinking.co.uk/tag/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.whatwasithinking.co.uk</link>
	<description>A Flash Development, Information Architecture, SEO &#38; Web Design Blog</description>
	<lastBuildDate>Tue, 06 Apr 2010 09:38:46 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.1</generator>
		<item>
		<title>How-to: 3 ways to identify a font online</title>
		<link>http://www.whatwasithinking.co.uk/2009/04/22/how-to-3-ways-to-identify-a-font-online/</link>
		<comments>http://www.whatwasithinking.co.uk/2009/04/22/how-to-3-ways-to-identify-a-font-online/#comments</comments>
		<pubDate>Wed, 22 Apr 2009 07:38:51 +0000</pubDate>
		<dc:creator>Alexander Rehm</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[fonts]]></category>
		<category><![CDATA[graphic design]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://www.whatwasithinking.co.uk/?p=471</guid>
		<description><![CDATA[When working freelance, some of the time when you are working on a client&#8217;s website or print material you are being given some sort of branding guidelines to adhere to. Some of the time these branding guidelines exist somewhere in a drawer in someone&#8217;s desk, but no one knows where. This is even worse when [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-full wp-image-472" title="3 ways to identify a font online" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2009/04/3-ways-to-identify-a-font-online.jpg" alt="3 ways to identify a font online" width="260" height="125" />When working freelance, some of the time when you are working on a client&#8217;s website or print material you are being given some sort of branding guidelines to adhere to. Some of the time these branding guidelines exist somewhere in a drawer in someone&#8217;s desk, but no one knows where. This is even worse when you have to do some maintenance on a client&#8217;s website and have to use an existing font, but do not have access to it or the client doesn&#8217;t know who supplied the original.</p>
<p>As a designer, it is your job however to make sure you are using the right font, or the closest font possible if that fails. Here are three great websites to help you on your search&#8230;<span id="more-471"></span></p>
<h3>1. <a title="Link to whatthefont" href="http://new.myfonts.com/WhatTheFont/" target="_blank">WhatTheFont</a>!</h3>
<p><img class="alignnone size-full wp-image-480" title="WhatTheFont! - Whatwasithinking.co.uk" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2009/04/whatthefont-whatwasithinking.jpg" alt="WhatTheFont! - Whatwasithinking.co.uk" width="560" height="476" /></p>
<p>Probably one of my favourite bookmarks when trying to find a font: WhatTheFont enables you to upload an image either from your desktop or from a website that is made up of the font. Once you uploaded the image the web application will try to associate letters (or you can enter these manually) and find the closest matches.</p>
<p><strong>Tip:</strong> Make sure the image you upload has a decent size / resolution, and &#8211; if possible &#8211; use a very good contrast (i.e. dark text on a light non-gradient background).</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>2. <a title="Link to identifont" href="http://www.identifont.com/" target="_blank">Identifont</a></h3>
<p><img class="alignnone size-full wp-image-478" title="Identifont - Whatwasithinking.co.uk" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2009/04/identifont-whatwasithinking.jpg" alt="Identifont - Whatwasithinking.co.uk" width="560" height="476" /></p>
<p>Identifont is an old-school font-identification website, enabling you to find a relevant font based on its shapes and characteristics, based on a number of questions about the font in front of you. Identifont&#8217;s font-database is pretty good, so you should be able to find your required font easily.</p>
<p><strong>Tip:</strong> This approach takes time and may be somewhat inaccurate depending on your answers. I would recommend using this site if you have no digital version of the font available.</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>3. <a title="Link to Type Navigator" href="http://typenav.fontshop.com/" target="_blank">Type Navigator</a></h3>
<p><img class="alignnone size-full wp-image-479" title="Type Navigator - Whatwasithinking.co.uk" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2009/04/typenavigator-whatwasithinking.jpg" alt="Type Navigator - Whatwasithinking.co.uk" width="560" height="476" /></p>
<p>Type Navigator is a more visual font search tool, similar in the style of Identifont. Here you are being presented with a series of images (from serifs to weight or contour), giving you the option to find the most relevant images to your font. Once you press &#8220;Search&#8221; you are being presented with the fonts matching the closest to your selected requirements, and even gives you the option to change the sample text to whatever you want, together with download / purchase options.</p>
<p><strong> Tip: </strong>The good thing about this site is that it is more visual than Identifont, making it a very good choice when looking for a font when you don&#8217;t know a lot about typography, and the great number of results and close matches ensure you get the font you are after.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.whatwasithinking.co.uk/2009/04/22/how-to-3-ways-to-identify-a-font-online/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>The most useful FireFox Extensions of February</title>
		<link>http://www.whatwasithinking.co.uk/2009/02/22/the-most-useful-firefox-extensions-of-february/</link>
		<comments>http://www.whatwasithinking.co.uk/2009/02/22/the-most-useful-firefox-extensions-of-february/#comments</comments>
		<pubDate>Sun, 22 Feb 2009 18:32:06 +0000</pubDate>
		<dc:creator>Alexander Rehm</dc:creator>
				<category><![CDATA[Usability & Accessibility]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web development]]></category>
		<category><![CDATA[accessibility]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[FireFox]]></category>
		<category><![CDATA[plugins]]></category>
		<category><![CDATA[usability]]></category>
		<category><![CDATA[Web design & usability]]></category>

		<guid isPermaLink="false">http://www.whatwasithinking.co.uk/?p=384</guid>
		<description><![CDATA[Those of you following me on twitter know I tend to spend a bit of time every couple of days in finding new extensions for FireFox (and sometimes Thunderbird) which are making my life as an Information Architect, Web Designer or Project Development Manager easier. These extensions may be some all of us have been [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-full wp-image-389" title="FireFox extensions roundup February 2009 - The Best FireFox extensions" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2009/02/firefox-extensions-roundup-february-20091.jpg" alt="FireFox extensions roundup February 2009 - The Best FireFox extensions" width="260" height="200" />Those of you following me on twitter know I tend to spend a bit of time every couple of days in finding new extensions for FireFox (and sometimes Thunderbird) which are making my life as an Information Architect, Web Designer or Project Development Manager easier. These extensions may be some all of us have been using for ages but never really realised we had them installed, or some we really wanted to see or use for some time, but never really spent the time researching whether these extensions are actually available. This is the list of February&#8230;<br />
<span id="more-384"></span></p>
<h3>Wave Toolbar</h3>
<p>This one has been mentioned by me <a title="Firefox extensions for usability, accessibility and SEO experts" href="http://www.whatwasithinking.co.uk/2008/12/19/firefox-extensions-for-usability-accessibility-and-seo-experts/">before</a>, however it begs for a second mention. Its ability to display a website in various ways to test for DDA compliance (from text-only to website structure and error displaying) makes it a must-have for everyone taking accessibility serious.</p>
<p><img class="alignleft size-full wp-image-230" style="margin:-4px 0 0 0;" title="To download this extension please click the link next to this arrow" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2008/12/download-arrow.gif" alt="To download this extension please click the link next to this arrow" width="20" height="20" /><a title="Download the WAVE toolbar" href="http://wave.webaim.org/toolbar/" target="_self">Download the WAVE toolbar</a></p>
<h3>Save images</h3>
<p>This is an interesting addon as it allows you to download all images of a website to a folder you specify, including the ability to choose size, dimensions and type of images you want to download and to ignore duplicates. You can even download all images from all open tabs if you wish. A very useful addon if you are required to copy a client&#8217;s images if there is no backup or the ftp details have been lost.</p>
<p><img class="alignleft size-full wp-image-230" style="margin:-4px 0 0 0;" title="To download this extension please click the link next to this arrow" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2008/12/download-arrow.gif" alt="To download this extension please click the link next to this arrow" width="20" height="20" /><a title="Download Save Images" href="https://addons.mozilla.org/en-US/firefox/addon/3404" target="_self">Download Save Images</a></p>
<h3>Better Gmail 2</h3>
<p>Better Gmail 2 is an upgrade of the GreaseMonkey user script-set &#8220;Better Gmail&#8221;, but this version also works with Gmail&#8217;s new interface. If you use Gmail often or even for work then this is a must-have extension!</p>
<p><img class="alignleft size-full wp-image-230" style="margin:-4px 0 0 0;" title="To download this extension please click the link next to this arrow" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2008/12/download-arrow.gif" alt="To download this extension please click the link next to this arrow" width="20" height="20" /><a title="Download Better Gmail 2" href="http://lifehacker.com/software/exclusive-lifehacker-download/better-gmail-2-firefox-extension-for-new-gmail-320618.php" target="_self">Download Better Gmail 2<br />
</a></p>
<h3>ImageZoom</h3>
<p>ImageZoom &#8211; as the name suggests &#8211; allows you to zoom in, zoom out, fit image to screen or set custom zoom on individual images within a web page. A very useful tools to see the finer details of smaller images for more detail or to spot mistakes during CSS/HTML cutup.</p>
<p><img class="alignleft size-full wp-image-230" style="margin:-4px 0 0 0;" title="To download this extension please click the link next to this arrow" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2008/12/download-arrow.gif" alt="To download this extension please click the link next to this arrow" width="20" height="20" /><a title="Download ImageZoom" href="https://addons.mozilla.org/en-US/firefox/addon/139" target="_self">Download ImageZoom</a></p>
<h3>Add Bookmark Here ²</h3>
<p>This is probably one of the most useful extensions I found this month and one I am now using regularly on a daily basis (mostly in conjunction with quality links from <a title="Follow Mayhemstudios" href="http://twitter.com/mayhemstudios">@mayhemstudios</a>, <a title="Follow imjustcreative" href="http://twitter.com/imjustcreative">@imjustcreative</a>, <a title="Follow adbert" href="http://twitter.com/adbert">@adbert</a>, <a title="Follow mistygirlph" href="http://twitter.com/mistygirlph">@mistygirlph</a> and <a title="Follow Minervity" href="http://twitter.com/Minervity">@Minervity</a>&#8230;to mention a few!) In a nutshell, this extension adds a new context menu item in your bookmarks folder called &#8220;Add Bookmark here&#8221;. No more dragging a link to a folder, no more &#8220;Add to bookmarks&#8230;&#8221; stuff, this one is a life-saver! Try it out, let me know what you think!</p>
<p><img class="alignleft size-full wp-image-230" style="margin:-4px 0 0 0;" title="To download this extension please click the link next to this arrow" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2008/12/download-arrow.gif" alt="To download this extension please click the link next to this arrow" width="20" height="20" /><a title="Download Add Bookmark Here 2" href="https://addons.mozilla.org/en-US/firefox/addon/3880" target="_self">Download Add Bookmark here 2<br />
</a></p>
<p><span style="color: #ffffff;">.</span></p>
<h3>Honorable mentions &#8211; a useful Thunderbird extension</h3>
<p>Attachment Extractor &#8211; This is a very useful addon which extracts all attachments from selected messages to then delete, detach or mark-read these emails.Very useful in conjunction with turning your <a href="http://lifehacker.com/314574/turn-thunderbird-into-the-ultimate-gmail-imap-client">Thunderbird into the ultimate Gmail client</a>.</p>
<p><img class="alignleft size-full wp-image-230" style="margin:-4px 0 0 0;" title="To download this extension please click the link next to this arrow" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2008/12/download-arrow.gif" alt="To download this extension please click the link next to this arrow" width="20" height="20" /><a title="Download Add Bookmark Here 2" href="https://addons.mozilla.org/en-US/firefox/addon/3880" target="_self"></a><a title="Download AttachmentExtractor" href="https://addons.mozilla.org/en-US/thunderbird/addon/556">Download Attachment Extractor here</a></p>
<p><span style="color: #ffffff;">.</span></p>
<h3>Related links:</h3>
<ul>
<li><a href="http://www.whatwasithinking.co.uk/2008/06/26/on-web-development-how-to-install-firefox-2-next-to-firefox-3/">On web development &#8211; How to install FireFox 2 next to FireFox 3</a></li>
<li><a href="http://www.whatwasithinking.co.uk/2008/12/19/firefox-extensions-for-usability-accessibility-and-seo-experts/">Firefox extensions for usability, accessibility and SEO experts</a></li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://www.whatwasithinking.co.uk/2009/02/22/the-most-useful-firefox-extensions-of-february/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Top tips for working with developers</title>
		<link>http://www.whatwasithinking.co.uk/2009/02/10/top-tips-for-working-with-developers/</link>
		<comments>http://www.whatwasithinking.co.uk/2009/02/10/top-tips-for-working-with-developers/#comments</comments>
		<pubDate>Tue, 10 Feb 2009 12:25:16 +0000</pubDate>
		<dc:creator>Alexander Rehm</dc:creator>
				<category><![CDATA[Information Architecture]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web development]]></category>
		<category><![CDATA[best-practice]]></category>
		<category><![CDATA[functionality]]></category>
		<category><![CDATA[rant]]></category>
		<category><![CDATA[schematics]]></category>
		<category><![CDATA[usability]]></category>

		<guid isPermaLink="false">http://www.whatwasithinking.co.uk/?p=369</guid>
		<description><![CDATA[Working in a busy office is one of the best parts of being a designer or information architect &#8211; you can bounce off ideas, discuss projects with others and get their input, and you can generally have a good laugh. That is until the time comes where a new project is being started or requirements [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-full wp-image-370" title="Strategies for working with developers" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2009/02/strategies-for-working-with-developers.jpg" alt="Strategies for working with developers" width="300" height="225" />Working in a busy office is one of the best parts of being a designer or information architect &#8211; you can bounce off ideas, discuss projects with others and get their input, and you can generally have a good laugh.</p>
<p>That is until the time comes where a new project is being started or requirements are being updated. Usually then some sort of &#8220;rivalry&#8221; will ensue, and in 90% of the cases it will be between a designer or information architect and a developer or development coordinator. Scope was not fully explained or defined, the design is too complicated to build, or data is not coming from the sources it was meant to.</p>
<p>In those times frustration can quickly result in stress and lack of commitment to a project. Let&#8217;s see what we would do to remedy that&#8230;<br />
<span id="more-369"></span><br />
<h3>1) Information Architects: Start off on the right foot and plan ahead</h3>
<p>At the beginning of a project make sure that you define scope and requirements clearly. Nothing is worse than a badly set up and planned out sitemap or wireframe without annotations or data specifications. To create a clearer mindset it is always best to let a lead developer for the project to have a look at the sitemap/wireframe before it goes to the client to ensure all requirements are met, what the developers will need to consider and where data needs to come from. It is also good practise to let developers come up with a timeframe of how long the development will take based on the wireframe.</p>
<h3>2) Designers: Plan your designs</h3>
<p>This is very self-explanatory, but you would not believe how many designers (especially freelancers I worked with) are getting it wrong: make sure you understand the intention of the site and its requirements. A simple brochure-style site has and entirely different look from a travel booking website or an online shopping website.Make sure you look at the sitemap and wireframe and if unsure about functionality or what development tricks (AJAX, Flash, JS) will be used then <span style="text-decoration: underline;">ask questions</span>!</p>
<h3>3) Designers: Form follows function &#8211; or: practical design</h3>
<p>Websites are here to wow us &#8211; but will a Flash and graphics heavy website really do the trick when all a user wants to do is log in and find out if his holiday booking went through? A stunning design is great, but you also need to take the purpose of the site, its users and their habits or actions while on the site into consideration. Visitors or users of the website need to feel comfortable being and interacting with the website.</p>
<p>Additionally, avoid Flash-heavy pages or content: aside from not everyone being on fast broadband, Flash intros are a thing of the past, and Flash content still cannot be indexed properly and disallows users from bookmarking important or relevant pages properly.</p>
<h3>4) Information Architects / Designers: Understand the tools of the trade</h3>
<div id="attachment_372" class="wp-caption alignright" style="width: 97px"><img class="size-full wp-image-372" title="Keep bookmarks for development tools" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2009/02/keep-bookmarks-for-development-tools1.jpg" alt="Keep bookmarks for development tools handy!" width="87" height="197" /><p class="wp-caption-text">Keep bookmarks for development tools handy!</p></div>
<p>While you may not do any hands-on coding it makes sense to at least understand what certain development tools, what their limitations are, and most of all what other developers manage to do with them. Brush up on developer tools such as AJAX, MooTools, jQuery, CSS, Flash and xml-integration. Keep a list of development bookmarks not only for that reason, but also to then find a solution together with the development team to make a certain effect or part of functionality working &#8211; and it gives you a good idea what other developers are doing to stay on the forefront of development techniques.</p>
<h3>5) Designers: define interaction</h3>
<p>Following on from the previous point, make sure and be clear about how certain tools are going to be used on the site. More and more opportunities arise where certain functionality can be used, interactive login-panels, auto-updating shopping baskets, interactive flight-checks, <a title="Flash driven maps - Yahoo maps and AS2.0" href="http://www.whatwasithinking.co.uk/2008/07/09/on-flash-map-integration-with-yahoo-maps-actionscript-part-2/">Flash-driven maps</a>&#8230; anything is possible! But make sure you understand that these interactive development stages can take up a lot of time, so it is best  to check with the project manager / development leader to see how much of the budget has been alloted to this stage and if you may need to cut back for this phase.</p>
<h3>6) Designers: define and share responsibilities</h3>
<p>For a designer a project is not finished once the PSDs are sent to the development team &#8211; be sure to stick your nose into the development process occasionally to make sure your designs are implemented correctly and that they developers have all they need. It may be that you need to rethink / redesign certain panels or call to actions or that you will need to resupply certain pages, panels or button styles.</p>
<p>Following on from point #4, it might even make sense helping at the CSS / HTML cutup to not only help the developers, but to get an understanding how your design is looked at and what needs to be done. Knowing CSS / HTML cutup (even in parts) is a really valuable asset these days!</p>
<h3>7) Information Architects: capture information, the right way!</h3>
<p>The buzz-word for years is &#8220;data-capture&#8221; &#8211; getting visitors to a website is one thing, but making sure they come back and leave their details is another. Make sure your forms are easy to understand and not pages and pages long if you don&#8217;t want to scare them away, and only ask for data necessary to the task &#8211; why should I give you my date of birth or post code if all I want is a newsletter??</p>
<p>Also, do make sure you have a tick box to opt in and out of marketing materials such as direct mail or newsletters, and have a clear call to action to your privacy policy.</p>
<p><span style="color: #ffffff;">.</span></p>
<p>I hope the tips help keep you and the development team working successfully on all your projects!</p>
]]></content:encoded>
			<wfw:commentRss>http://www.whatwasithinking.co.uk/2009/02/10/top-tips-for-working-with-developers/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Melon Design &amp; Marketing&#8217;s new website is live!</title>
		<link>http://www.whatwasithinking.co.uk/2008/12/02/melon-design-marketings-new-website-is-live/</link>
		<comments>http://www.whatwasithinking.co.uk/2008/12/02/melon-design-marketings-new-website-is-live/#comments</comments>
		<pubDate>Tue, 02 Dec 2008 15:03:35 +0000</pubDate>
		<dc:creator>Alexander Rehm</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[graphic design]]></category>
		<category><![CDATA[Web development]]></category>

		<guid isPermaLink="false">http://www.whatwasithinking.co.uk/?p=182</guid>
		<description><![CDATA[I am happy to announce that the new site of Melon Design &#38; Marketing has gone live today!! Melon Design &#38; Marketing is a creative communication agency based near Milton Keynes, between Bedfordshire, Buckinghamshire and Northamptonshire, specialising in a number of sectors such as branding &#38; corporate identity, graphic design, website design &#38; development, advertising [...]]]></description>
			<content:encoded><![CDATA[<p>I am happy to announce that the new site of Melon Design &amp; Marketing has gone live today!!</p>
<p><a href="http://www.meloncreative.co.uk"><img class="alignnone size-full wp-image-183" title="Melon Design &amp; Marketing's new website" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2008/12/melon-live.jpg"  border="0" alt="screenshot of Melon's new site" width="430" height="405" / rel="lightbox[roadtrip]"></a></p>
<p>Melon Design &amp; Marketing is a creative communication agency based near Milton Keynes, between Bedfordshire, Buckinghamshire and Northamptonshire, specialising in a number of sectors such as branding &amp; corporate identity, graphic design, website design &amp; development, advertising and e-marketing, print management, photography and copywriting.</p>
<p>You can read more about all their services <a title="Melon's services" href="http://www.meloncreative.co.uk/services" target="_blank">here</a>, and about their in-house CMS Engine <a title="Melon's Engine CMS" href="http://www.meloncreative.co.uk/services/engine-cms.html" target="_blank">on this page</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.whatwasithinking.co.uk/2008/12/02/melon-design-marketings-new-website-is-live/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>How to invoice for design work &#8211; a quick guide</title>
		<link>http://www.whatwasithinking.co.uk/2008/09/29/how-to-invoice-for-design-work-a-quick-guide/</link>
		<comments>http://www.whatwasithinking.co.uk/2008/09/29/how-to-invoice-for-design-work-a-quick-guide/#comments</comments>
		<pubDate>Mon, 29 Sep 2008 11:16:59 +0000</pubDate>
		<dc:creator>Alexander Rehm</dc:creator>
				<category><![CDATA[Flash Development]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web development]]></category>
		<category><![CDATA[best-practice]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[invoicing]]></category>
		<category><![CDATA[legal]]></category>

		<guid isPermaLink="false">http://www.whatwasithinking.co.uk/?p=140</guid>
		<description><![CDATA[So you have finally done it, you are a freelancer or have set up your own little design agency and you have your first clients with jobs coming in. And now comes the time that a project comes to the point where money is involved, be it just before the first 1/3 of the project [...]]]></description>
			<content:encoded><![CDATA[<p><img class="alignright size-full wp-image-141" title="A guide to invoicing - Whatwasithinking.co.uk" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2008/09/guide-to-invoicing.jpg" alt="" width="170" height="140" />So you have finally done it, you are a freelancer or have set up your own little design agency and you have your first clients with jobs coming in. And now comes the time that a project comes to the point where money is involved, be it just before the first 1/3 of the project is done or towards the end of the project. But what do you need to look out for? Where to go for resources if anything goes wrong?</p>
<p>Continue reading after the break for some strategies on how to invoice for your web design or web development work&#8230;<span id="more-140"></span></p>
<p><span style="color: #ffffff;">.</span></p>
<h3>When to invoice</h3>
<p>When to invoice depends entirely how long the project is and how comfortable you and the client feel. Obviously if a project takes only a week or two then you won&#8217;t need to worry too much about when to invoice or how to split your invoices. But say for example you are working on a bit of a longer project, say a fully bespoke website, taking about 3 or 4 months. It makes sense agreeing a payment plan then. As a general rule of thumb in the design industry you may want to work on 3 payments &#8211; first payment after agreed sitemap, prototype or visuals, second payment after the development is just over half-way, and third payment once the project is going live. That way you ensure you have a somewhat steady money-flow to pay your bills, and it may be easier for the client to put the money through their books as well.</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>Keeping on top of things</h3>
<p>It is always important to keep on top of everything that involves money. Office rent, electricity and water bills, payments for outsourced work, office supplies, projects and project stages. &#8220;Well, since I work from home I won&#8217;t have to worry about some of those things&#8221;, you may say. Wrong, even that is cost. You pay rent, you pay electricity (or pay your parents / spouse for paying the bills for you), but it is cost. So keep track of everything, at the end of the day you want to know how much you make in a month, right?<br />
Aside from costs, it is important you also keep track of project dates, when does what need to be agreed on or signed off, when is the preliminary live-date? Is the client going on holiday?<br />
Keeping tracks can be done in a number of ways, be it a notepad, excel sheets, or fully fledged accounting software or project tools &#8211; as long as you can keep track and not lose the notes you are good to go.</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>Payment terms &#8211; and agreeing to them</h3>
<p>So now you know roughly what your outgoings are and how much you will be charging for your project or project stages, now is the time to formally agree to your payment terms. Standard payment terms are usually 30 days (though some companies I worked for prefer 60 days) after project delivery or after each key stage, meaning the client has 30/60 days to pay you after that date before you will charge interest. The current interest rate is 13% (which is calculated by 8% late payment interest rate plus 5% reference rate from the <a href="http://www.opsi.gov.uk/acts/acts1998/ukpga_19980020_en_1" target="_blank">Late Payment of Commercial Debts (Interest) Act 1998</a>).</p>
<p>If you do not want to go down the route of a formal contract then at least make sure to write an email to your client outlining the project stages, payment stages and late payment terms and get the client to respond to the email that he / she is agreeing to it! If there is no paper trail then you will have a hard time in court (should it ever come to that).</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>How would you like to get paid?</h3>
<p>There are 3 options on how to get paid, though only 2 are advisable:</p>
<ol>
<li>Paypal – this is probably the most preferred option by smaller agencies or upcoming freelancers, but also the least advised one, simply because it is expensive: if you don’t have a merchants account you lose around 5% of your money in fees, and even if you have a merchants account, you’ll still lose up to 4% by using this service. I really recommend staying away from this option</li>
<li>Cheque – preferred option for freelancers and smaller businesses. All you need to do is give them your name or company name and to post it to you. It is reasonably quick and easy, and all you need to do is walk into your bank and pay it in.</li>
<li>BACS – my preferred option: BACS stands for <span>Bankers&#8217; Automated Clearing Services and means direct bank transfer. This option is also preferred by many medium-to-large sized businesses and is becoming more popular with smaller businesses as all they need to do is inform the accountant to pay X to person Y and not having to worry about it any more.</span></li>
</ol>
<p><span style="color: #ffffff;">.</span></p>
<h3>Your first invoice</h3>
<p>Whichever route you take (pay in one sum or pay in stages), you will need to write a formal invoice. Each invoice should have an invoice reference number, the postal address of the client, your postal address and email address, a job description, the amount with a VAT breakdown and – if you are a limited company – the registered office address, company and VAT number. The FSA has some nice information about <a href="http://www.fsa.gov.uk/pages/Doing/Regulated/Fees/Periodic/Payments/index.shtml" target="_blank">invoices</a>. You will also need to add a bit of spiel on how you would like to get paid, such as bank account or name for the cheque.</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>Late payments</h3>
<p>Unfortunately you will have one of those clients sooner or later who will not pay on time. Keeping a cool head is important, after all it could just be an omission from the accountant. A good approach is calling the client after 7 days of the invoice being due to check if everything is okay and remind the client that there is an invoice due. If payments are a week late then I usually tend to ignore late charges, as it shows the client that errors are only human and you’re still providing a good service.<br />
When it comes to late payments things will change a bit more drastically. If payment is over a month late when you should send a repeat invoice, together with a reminder that the client will be charged interest. Month two is where it gets interesting, if the client still has not paid you can also demand a debt-recovery charge (usually 5-10% of the outstanding fee). Either way, make sure that you word this carefully, a threatening tone can backfire! Keep calm, write professionally. Neither of you want to make this legal at this stage.</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>Legal actions</h3>
<p>Month three has arrived, and you still haven’t been paid? Then it is time for you to go legal. Send the client a repeat statement and invoice with interest and debt-recovery fee, and threaten with legal action via the small claims court. Send the letter or email, and call a day after the email / letter would have been received (if you write a letter, make sure you use recorded delivery as proof) and speak to your client about this. Give them 10-14 days, then call again. If there is still no money in your account you will need to take legal action.<br />
In any case, you will now need to plan out your claim. The Claims information on the <a href="http://www.hmcourts-service.gov.uk/" target="_blank">HMCS website</a> will guide you through the proceedings and required documents and give you advice on how to proceed, what you need, and who to speak to if you have any questions.</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>Getting your money at long last</h3>
<p>In most cases you have the proper paperwork and paper/email trail and you will win the case. Well done! Now it is time to speak to a debt collections agency (after the court case you will sometimes be given a recommended agency by a clerk, or you can go to the HMCS website and find out more about debt collectors in your area) who will take matters into their hand to make sure they get you your money and the court fees &#8211; and of course their share. Don’t worry about their costs, they will get that from the client. And you’re done!</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>Final words</h3>
<p>In 99% of all cases invoicing is a pretty straightforward thing, clients are usually very good when it comes to paying their debts and in my career I only came across 5 clients who were a bit of a pain to deal with. Always remember, if anything goes wrong just keep calm, stay professional and make sure you have your bases covered: the client agreed to the work, you outlined the payment information and terms and you have done as per agreement. No one wants to go through courts, and clients will pay reasonably quickly the moment you mention &#8216;late payments&#8217; and &#8216;legal proceedings&#8217;. <img src='http://www.whatwasithinking.co.uk/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.whatwasithinking.co.uk/2008/09/29/how-to-invoice-for-design-work-a-quick-guide/feed/</wfw:commentRss>
		<slash:comments>7</slash:comments>
		</item>
		<item>
		<title>On outsourcing work in the web design industry &#8211; things to look out for</title>
		<link>http://www.whatwasithinking.co.uk/2008/07/23/on-outsourcing-work-in-the-web-design-industry-things-to-look-out-for/</link>
		<comments>http://www.whatwasithinking.co.uk/2008/07/23/on-outsourcing-work-in-the-web-design-industry-things-to-look-out-for/#comments</comments>
		<pubDate>Wed, 23 Jul 2008 12:57:23 +0000</pubDate>
		<dc:creator>Alexander Rehm</dc:creator>
				<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web development]]></category>
		<category><![CDATA[best-practice]]></category>
		<category><![CDATA[considerations]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[development]]></category>
		<category><![CDATA[integration]]></category>

		<guid isPermaLink="false">http://www.whatwasithinking.co.uk/?p=78</guid>
		<description><![CDATA[Not so long ago I received an email from a former student of mine who has just started up his own design studio asking whether or not outsourcing work to contractors, freelancers or studios makes sense and what to look out for. Especially for upcoming design studios or companies / agencies who are lacking in [...]]]></description>
			<content:encoded><![CDATA[<p><img class="size-full wp-image-79" title="On outsourcing work in the design industry - whatwasithinking.co.uk" src="http://www.whatwasithinking.co.uk/wp-content/uploads/2008/07/outsourcing.jpg" alt="On outsourcing work in the design industry - whatwasithinking.co.uk" width="170" height="140" align="right" />Not so long ago I received an email from a former student of mine who has just started up his own design studio asking whether or not outsourcing work to contractors, freelancers or studios makes sense and what to look out for.</p>
<p>Especially for upcoming design studios or companies / agencies who are lacking in a certain area (such as developers or Flash animators) it makes sense looking to outsource work to keep employment costs low and not having to worry about whether or not there will be enough work to keep someone (or a whole team) employed.</p>
<p>Read after the fold what to look out for&#8230;<span id="more-78"></span></p>
<p>Before you make the jump into outsourcing client work, make sure you think about the following:<br />
<span style="color: #ffffff;">.</span></p>
<h3>Confidentiality</h3>
<p>Since you are dealing with an external source to work on a project that you managed to acquire maybe through a long process of sales and pitching or a project for a product that you created – it is important that the resources you hire are happy to sign a confidentiality agreement prior to commencing any work, and that everything they work on goes to you first. Between them and the client you are the account handler and the buffer, even if that means a bit more leg-work than with your regular employees.</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>Quality of work</h3>
<p>When outsourcing project work you need to make sure that the quality both you as well as the client would expect is to a very high standard. Having a team on location in your office is always a good thing to see what is being worked on and if the project progresses as it should.</p>
<blockquote><p>I remember a project where we commissioned a Flash animator to work on a flash-based mini-site for a T-shirt brand based on the core ideas behind the brand and the visuals we prepared for both online and off-line advertising. This animator was hired through the MD and was a friend of the family. Half-way down the project we sat down to see how the mini-site was coming along, and we were appalled by the blandness of the animation, the crude timelines and overall feel. “It’ll look better soon, I’ve got someone else working on the artwork, I am just preparing all the animation steps”. We hired someone else.</p></blockquote>
<p>If you are looking for a resource then make sure that the person you are hiring:</p>
<ul>
<li>Has a good portfolio and / or sample work at the day of the interview in a style similar to the project you are working on, or can adapt to the style you are after</li>
<li>Is being recommended by someone in your industry or you have had a previous experience working with</li>
<li>Or has done work on similar projects</li>
<li>Can do the work that he / she promised. Sometimes the resource you are hiring may not be fully fluid in a subject (such as ActionScript 3.0) and may be asking for help from a friend. That is of course fine, but make sure the resource understands that this may not impede a project or its timelines, and that any resource help requests will not be paid by you</li>
<li>Is communicative and happy to give you updates on the project and can discuss problems (and solutions) with you and the team when or ideally before they arise.</li>
</ul>
<p><span style="color: #ffffff;">.</span></p>
<h3>Communication</h3>
<p>Communication is a key in our industry. It is very important that you know how a project progresses, so that you can update not only your own team and superiors, but also your clients. Especially with external resources, a constant flow of communication needs to be put (and kept) in place. Especially when it comes down to sudden changes or amends to the project these will need to be communicated properly and as they arise with everyone. This may sound like usual common practice, but there are many horror-stories about projects being delayed due to lack of (or mis-)communication.</p>
<p>Remember to send out updates to the teams working on the project so that everyone knows how the project progresses and / or what to look out for and what needs to be worked on. It is very important that everyone talks to each other, which may be an issue for some in your team, as the outsourced resources are not in the office and as such easily forgotten / overlooked.</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>Deadlines</h3>
<p>This is one thing you need to be aware of &#8211; deadlines may slip!<br />
Due to the fact that some agencies or studios you outsource to may either already have work on the go or may only put limited resources into a project it could be that your work is being pushed back or given less attention than they (and especially you) would prefer.</p>
<blockquote><p>I commissioned a studio to work on an administration backend that would tie in with a 3rd party application. About 2 months before the go-live date we informed the studio that we would need to begin styling and user-testing within the next week or two, just to receive the response “oh, we haven’t done much yet, we haven’t even looked at the integration yet.”</p></blockquote>
<p>When it comes down to deadlines and projects that you know cannot slip much it is always worth to clearly define certain stages of outsourced development work. In an ideal world, you would want a weekly update, with a formal meeting / demonstration after every quarter of the project (if the project runs for 4 months you would want an update every end of the month). Towards the end of the 3rd quarter of the project the team you outsourced the work to would need to have everything pretty much ready for testing, integration and feedback to ensure nothing has been missed, call to actions are clear and the integration outputs the correct data.</p>
<p><span style="color: #ffffff;">.</span></p>
<h3>Control</h3>
<p>Keeping track of a project can be a bit daunting at first and it will take some time to get used to and to not overwork either anyone in your team or yourself. But keeping track of external as well as internal resources can become a balance act unless you do it very methodically:</p>
<ol>
<li>When hiring external resources, ensure that the resources can do the work both from a skill-level but also from a time-level</li>
<li>Paperwork: make sure that a contract as well as a confidentiality agreement is signed from both parties before commencing any work</li>
<li>Make sure your team is aware of the external resources and what their role is</li>
<li>The external resources need to get to know the people in your team they will be spending the most time with and would need to be able to communicate on a friendly and professional level at all times</li>
<li>Updates: these should be giving and communicated in regular intervals both in writing as well as in form of meetings and demonstrations to ensure that the project is on schedule and to amend any problems that might have arisen at this stage</li>
<li>Time-keeping and project management: This one goes hand-in-hand with ‘5. Updates’ – your team as well as the external resources need to make sure that certain stages of any project are finished on time and on budget and that testing and signoff is done well in advance of presenting the project to the client. Remember that the client may also have feedback, so plan in time for that as well.</li>
</ol>
<p><span style="color: #ffffff;">.</span></p>
<h3>Conclusion</h3>
<p>Getting a project online successfully with the help of external resources is not difficult as long as you have clear guidelines throughout the project and keep your team, your resources and your clients informed about what is going on and what will happen. Always remember that an outsourced project may take a bit more time than an internally kept project, and you need to make sure that you have plenty of time allocated for any eventuality. Who knows, maybe one day the external resource you just contracted may in fact end up in your team after all? <img src='http://www.whatwasithinking.co.uk/wp-includes/images/smilies/icon_wink.gif' alt=';)' class='wp-smiley' /> </p>
]]></content:encoded>
			<wfw:commentRss>http://www.whatwasithinking.co.uk/2008/07/23/on-outsourcing-work-in-the-web-design-industry-things-to-look-out-for/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
