<?xml version="1.0" encoding="utf-8"?>
<rss version="2.0"
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
xmlns:admin="http://webns.net/mvcb/"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:content="http://purl.org/rss/1.0/modules/content/">

<channel>
    
<title>Supercool: Know Design</title>
<link>http://www.supercooldesign.co.uk/blog</link>
<description>Supercool's blog Know Design: An enlightening look a design.</description>
<dc:language>en</dc:language>
<dc:creator>info@supercooldesign.co.uk</dc:creator>
<dc:rights>Copyright 2013</dc:rights>
<dc:date>2013-05-09T09:26:+00:00</dc:date>
<admin:generatorAgent rdf:resource="http://expressionengine.com/" />
    

<item>
<title>Sommat nice</title>
<link>http://www.supercooldesign.co.uk/blog/entry/sommat-nice</link>
<description>
<![CDATA[
<p>
	<img alt="" src="/images/uploads/blog/we-make-nice-montage.jpg" style="width: 606px; height: 325px;" /></p>
<p>
	We&#39;ve recently been adding a fair bit of new stuff to <a href="http://www.wemakenice.org/">We Make Nice</a>. (That Supercool side-project we told you about it in <a href="http://www.supercooldesign.co.uk/blog/we-make-nice">that blog post</a>.)</p>
<p>
	Have a look at what&#39;s new! See something you like? Download it for your tablet/mobile/Facebook header or whatever! Nice! <a href="http://www.wemakenice.org/">www.wemakenice.org</a></p>

<hr />
]]>
</description>
<dc:date>2013-05-09T09:26+00:00</dc:date>
</item>

<item>
<title>Souped&#45;up CSS</title>
<link>http://www.supercooldesign.co.uk/blog/entry/souped-up-css</link>
<description>
<![CDATA[
<p>
	Since <a href="http://www.supercooldesign.co.uk/blog/better-css">last writing about CSS</a> we&#39;ve developed our very own CSS <a href="http://www.supercooldesign.co.uk/glossary/framework">framework</a> &ndash; and we call it Soup.</p>
<p>
	<img alt="" src="/images/uploads/blog/soup-1_1.jpg" style="width: 606px; height: 319px;" /></p>
<p>
	Based upon <a href="http://inuitcss.com/">Inuit.css</a> (version 4.5.5) we&#39;ve extended, adapted, and generally built-up a library of re-usable objects to form a framework that works well for us. Inuit is very lightweight and makes no design decisions whatsoever, so it made sense to start from there &ndash; as well as it coming from Harry Roberts (who gave us the talk on CSS).</p>
<p>
	So why not just use Inuit as a base for each project? Why make more stuff to sit on top of it?</p>
<p>
	Well, we found that as good as it is having Inuit not making any design decisions, there are some basics that we start with across many projects.</p>
<p>
	<img alt="" src="/images/uploads/blog/complex-form_1.jpg" /></p>
<p>
	Forms are a good example here &ndash; we&#39;ll always want a certain set of base styles for all web forms across a site, and they&#39;ll have similar design functions &ndash; such as a &#39;normal&#39; and a &#39;focussed&#39; state &ndash; so it seemed sensible to extend Inuit&#39;s form setup; all it takes is colour and/or font changes (and any other specific alterations, if required) to quickly create a nicely designed form.</p>
<p>
	As we tend to use a similar typographical setup with respect to font sizes and vertical rhythm, we also added this into Soup &ndash; along with icons, buttons and a bunch of other helpers.</p>
<p>
	<img alt="" src="/images/uploads/blog/soup-ingredients_1.jpg" /></p>
<p>
	Another part of our extending Inuit to match our own needs is on the responsive side of things. We tend to use a mobile-first approach, initially including only the styles that a mobile device would need, then adding-in extra styling in a separate file for bigger devices (thanks <a href="http://adactio.com/journal/4494/">Jeremy Keith</a>).</p>
<p>
	Finally the other major aspect of Soup is the JavaScript; we include a few things from <a href="http://twitter.github.io/bootstrap/">Twitter&#39;s Bootstrap</a> as well as validation, some <a href="http://remysharp.com/2010/10/08/what-is-a-polyfill/">polyfills</a> and a few other bits and bobs we use a lot of the time.</p>
<p>
	This approach of having a simple starting setup has saved us a lot of time over the past 6 months of using it. For example, combining this frontend Soup with our backend ExpressionEngine boilerplate helped us get <a href="http://dropletpay.com">dropletpay.com</a> designed and built in under 2 weeks.</p>
<p>
	Here&#39;s to moving onwards and upwards with the recent release and stabilisation of Inuit version 5!</p>

<hr />
]]>
</description>
<dc:date>2013-04-22T14:14+00:00</dc:date>
</item>

<item>
<title>Design of the Year 2013</title>
<link>http://www.supercooldesign.co.uk/blog/entry/design-of-the-year-2013</link>
<description>
<![CDATA[
<p>
	<img alt="" src="/images/uploads/blog/doty-design-museum.jpg" style="width: 606px; height: 248px;" /><br />
	<br />
	<span style="font-size:12px;">Image: Design Museum</span></p>
<p>
	Tomorrow, the Design Museum will announce the over-all winner of <a href="http://designmuseum.org/exhibitions/2013/designs-of-the-year-2013">Design of the Year 2013</a> &ndash; a celebration of the past year&#39;s very best Architecture, Digital, Fashion, Furniture, Graphics, Product and Transport design.</p>
<p>
	The winner will be chosen from this shortlist of category winners:</p>
<p>
	<strong>Architecture:</strong> <a href="http://www.lacatonvassal.com/?idp=56">Tour Bois-Le-Pr&ecirc;tre, Paris</a> / Designed by Fr&eacute;d&eacute;ric Druot, Anne Lacaton and Jean-Philippe Vassal</p>
<p>
	<strong>Digital:</strong> <a href="https://www.gov.uk/">gov.uk</a> / Designed by Government Digital Service</p>
<p>
	<strong>Fashion:</strong> <a href="http://www.youtube.com/watch?v=HP3wsNdANhM" title="[auto play video]">Diana Vreeland: The Eye Has to Travel</a> / Directed by Lisa Immordino Vreeland</p>
<p>
	<strong>Furniture:</strong> <a href="http://konstantin-grcic.com/projects/medici/">Medici chair</a> / Designed by Konstantin Grcic for Mattiazzi</p>
<p>
	<strong>Graphics:</strong> <a href="http://www.eyemagazine.com/blog/post/common-ground-a-letter-from-venice">Venice Architecture Biennale identity</a> / Designed by John Morgan Studio</p>
<p>
	<strong>Product:</strong> <a href="http://www.colalife.org/about/aidpod/">Kit Yamoyo</a> / Designed by ColaLife and PI Global</p>
<p>
	<strong>Transport:</strong> <a href="http://vitaminsdesign.com/projects/folding-wheelchair/">Morph folding wheel</a> / Designed by Vitamins for Maddak Inc.</p>
<p>
	As a graphic designer, I obviously have a particular interest in the Graphics and Digital categories. John Morgan Studio&#39;s brand identity for the Venice Architecture Biennale is just my sort of thing; simple, elegant, well-executed and, once you&#39;ve seen it, there could be no other solution. It&#39;s perfect. And James big-upped (bigged-up?) the government&#39;s new website not so long ago <a href="http://www.supercooldesign.co.uk/blog/the-current-state-of-design">in this blog post </a>&ndash; and it is a fantastic example of simple, thoughtful, useful design. But neither of these would be my <em>Design of the Year</em>.</p>
<p>
	Although I&#39;m a fan of Heatherwick Studio&#39;s Olympic Cauldron which was longlisted in the Product category, my personal choice for <em>Design of the Year</em> is the one which took the cauldron out of the running &ndash; ColaLife&#39;s <a href="http://www.colalife.org/about/aidpod/">Kit Yamoyo.</a></p>
<p>
	<img alt="" src="/images/uploads/blog/kit-yamoyo-simon-berry.jpg" style="width: 606px; height: 406px;" /></p>
<p>
	<span style="font-size:12px;">Image: Simon Berry</span></p>
<p>
	An exceptionally deserving and clever category winner, each Kit Yamoyo contains single-dose packs of oral rehydration salts (diarrhoea is the second-biggest killer of under-5s in sub-Saharan Africa), and the wedge-shaped pods also double as measuring cups for adding the correct amount of water to dilute each sachet.</p>
<p>
	So, what&#39;s the link with cola? And why the weird shape? The pods are wedge-shaped to fit into the spaces between Coke bottles in crates, enabling them to be transported and distributed using Coca-Cola&#39;s extensive networks across the region. Ingenious!</p>
<p>
	<a href="http://www.flickr.com/photos/bezznet/8406420408/in/photostream"><img alt="" src="/images/uploads/blog/kit-yamoyo-vouchers-simon-berry.jpg" style="width: 606px; height: 292px;" /></a><br />
	<span style="font-size:12px;">A Kit Yamoyo promoter hands out vouchers to mothers. Image: Simon Berry</span></p>
<p>
	The story of <a href="http://www.colalife.org/2013/04/10/kit-yamoyo-wins-product-design-of-the-year-2013/">how the idea came about</a> is a must-read and, as the ColaLife folks say, <em>"It must be the first time that an anti-diarrhoea kit takes centre stage as a design icon."</em></p>
<p>
	Design for good at its very best.</p>
<p>
	(I&#39;ll update this post with the official winner once the announcement&#39;s been made.)</p>
<p>
	<span style="font-size:16px;"><strong>UPDATE</strong></span></p>
<p>
	And the *actual* winner is &hellip; <a href="http://gov.uk">gov.uk</a>. Congratulations! (And kudos for getting a <a href="https://www.gov.uk/government/news/govuk-wins-design-of-the-year-2013">press release about the win</a> sorted so quickly an&#39; all.)</p>
<p>
	I stick by my personal choice of Kit Yamoyo, but the Government&#39;s new website was always <a href="http://www.supercooldesign.co.uk/blog/the-current-state-of-design">James&#39; pick</a>; and there is something rather nice about a website winning this gong, I reckon. Especially as many of the <a href="http://digital.cabinetoffice.gov.uk/">GDS Team&#39;s</a> (award-winning) design principles run through the work that we do &ndash; it&#39;s sound stuff!</p>
<p>
	If you want a closer look at the nominees, they&#39;re being exhibited at the <a href="http://Oh, and if you want a closer look at the nominees, they're being exhibited at the Design Museum until 7th July.">Design Museum</a> until 7th July. Although the winner can obviously be seen on an internet connection near you.</p>

<hr />
]]>
</description>
<dc:date>2013-04-15T14:45+00:00</dc:date>
</item>

<item>
<title>The power of television</title>
<link>http://www.supercooldesign.co.uk/blog/entry/the-power-of-television</link>
<description>
<![CDATA[
<p>
	<img alt="" src="/images/uploads/blog/gbsb-logo.jpg" style="width: 606px; height: 267px;" /></p>
<p>
	For the past couple of weeks, my Tuesday nights between 8pm and about 10pm have been spent monitoring the impact of television. This is not a round-about way of saying I&#39;ve just been sat there watching the telebox &ndash; oh, no; this is work! (Ish)</p>
<p>
	The very talented <a href="http://www.guthrie-ghani.co.uk/blog/category/great-british-sewing-bee">Lauren</a> is currently doing rather well on BBC2&#39;s <em>The Great British Sewing Bee</em> and, having built the website for her haberdashery <a href="http://www.guthrie-ghani.co.uk/">Guthrie &amp; Ghani</a> (have a look at the <a href="http://www.supercooldesign.co.uk/work/guthrie-ghani">case study</a>), we decided to monitor visits in real-time as we anticipated a traffic spike while the show was on-air. And we were right &hellip; sort of.</p>
<p>
	<br />
	<img alt="" src="/images/uploads/blog/gg-gbsb-stats.jpg" style="width: 606px; height: 198px;" /></p>
<p>
	<span style="font-size:12px;">The site was viewed on a range of different devices and, right, spot the episode spikes within &#39;hourly views&#39;. Zoiks!</span></p>
<p>
	<strong>FUN FACTS:</strong></p>
<ul>
	<li>
		There was a <strong>massive spike</strong> in visits on the day the first episode aired &ndash; although the following day actually saw an increase in daily visits to the website.</li>
	<li>
		Even discounting the on-air spikes, average daily traffic to the site has <strong>increased by a whopping 1000%</strong> since the first episode.</li>
	<li>
		Episode 2 encouraged <strong>13% more visits</strong> than episode 1. (The second episode also got slightly higher ratings &ndash; 2.57m compared with last week&#39;s 2.56m.)</li>
	<li>
		During the show, there were spikes in activity on the website just after Lauren appeared on-screen, and just after <a href="https://twitter.com/guthrieghani">she tweeted</a> &ndash; particularly if the tweet included a link to the site (unsurprisingly).</li>
	<li>
		There was a noticeable increase in activity on <a href="http://www.guthrie-ghani.co.uk">Guthrie &amp; Ghani</a> during the programme&#39;s &#39;history of sewing&#39; item &hellip; which, ummm, may perchance suggest that some folks aren&#39;t hugely enamoured with this part of the show?!</li>
</ul>
<p>
	So our hypothesis was correct, that a prime-time TV show would impact the website while on-air &ndash; but what we hadn&#39;t anticipated was that the number of concurrent users would actually reach its peak about 10 minutes after the end of each programme. I guess it&#39;s not that surprising &ndash; as people rush to their computers once the show&#39;s finished to find out more &ndash; but not something that had occurred to us before it happened.</p>
<p>
	<img alt="" src="/images/uploads/blog/lauren-with-pesky-trousers.jpg" style="width: 606px; height: 326px;" /></p>
<p>
	Same again next week &ndash; Lauren, pictured above with those troublesome trousers, is still in the running for the title <em>Britain&#39;s Best Amateur Sewer</em> (shame about that homonym). Be sure to watch the next installment of <strong>The Great British Sewing Bee, BBC2, Tuesday, 8pm</strong> to see how she gets on.&nbsp;</p>
<p>
	And while you do that, remember I&#39;ll be sat on a sofa with the TV on but actually watching my laptop, tabbing repeatedly between umpteen browser windows monitoring real-time stats, following who&#39;s tweeting what &hellip; and no doubt subconsciously learning a bit about sewing at the same time. <em>That</em> is the power of televsion.</p>

<hr />
]]>
</description>
<dc:date>2013-04-10T18:10+00:00</dc:date>
</item>

<item>
<title>It&#8217;s been super!</title>
<link>http://www.supercooldesign.co.uk/blog/entry/its-been-super</link>
<description>
<![CDATA[
<p>
	<img alt="" src="/images/uploads/blog/kamilla-sketchbook-1.jpg" style="width: 606px; height: 323px;" /></p>
<p>
	Hello, I am <a href="https://twitter.com/KamillaVinther">Kamilla</a> from <strike>Denmark</strike> &#39;Daneland&#39; and I have been doing a four month internship here at Supercool as a part of my final year at the <a href="http://www.skolevisuel.dk">School of Visual Communications</a>.&nbsp;</p>
<p>
	At school we learn a lot about graphic design (of course &ndash; duh!) but more in relation to printed work &ndash; to be fair, designing for digital platforms is moving closer and closer to the principals of designing for paper &ndash; but my internship at Supercool has given me the opportunity to focus on digital design. Designing for web is the future, and a combination of knowing some tech-y stuff and the principals of great design in general is key for a soon-to-be real designer as myself.</p>
<p>
	Over the past four months I have gone from the school way of designing like anything-is-possible, to the proper way of actually asking the web developers if this and that is possible within the limits of budget and technology. A super important lesson to learn &ndash; and thanks to Supercool for that.</p>
<p>
	<img alt="" src="/images/uploads/blog/kamilla-sketchbook-2.jpg" style="width: 606px; height: 679px;" /></p>
<p>
	I have been a part of different projects over the past months, and it has been exciting and super learning to be a part of a project from the initial thoughts and meetings with the client to the launch of the finished project. My design ideas have been listened to, debated and respected &ndash; and because of that, I feel super ready to leave the safe world of being a student and enter the real world of being a paid designer.</p>
<p>
	Spending four months in a foreign country is of course super exciting and challenging, but the Supercool team have done their best to keep me warned and informed about general life in the UK; the endless lines at the Post Office, how to dress properly when driving a <strike>scooter</strike> moped, how to not be hit by cars while crossing the road and the very important knowledge that Danish words are easier for a Brit to pronounce while chewing on a piece of Danish cake.</p>
<p>
	I will miss this super place and these super people, and I will for a long time be giggling when remembering all the super fun we had!</p>
<p>
	<img alt="" src="/images/uploads/blog/kamilla-sketchbook-3.jpg" /></p>

<hr />
]]>
</description>
<dc:date>2013-03-01T09:35+00:00</dc:date>
</item>

<item>
<title>Bleugh Britain</title>
<link>http://www.supercooldesign.co.uk/blog/entry/bleugh-britain</link>
<description>
<![CDATA[
<p>
	<img alt="" src="/images/uploads/blog/uk-yuk-2.jpg" /><br />
	&nbsp;</p>
<p>
	Recent rumours surrounding the bizarre possibility of the government running a negative ad campaign (to dissuade potential immigrants settling here) prompted The Guardian to request possible poster ideas &hellip;</p>
<p>
	And this (not especially pretty) one I cobbled together over lunch made it onto their homepage, as well as the <a href="http://www.guardian.co.uk/uk/gallery/2013/jan/29/immigration-britain-ministers-gallery">gallery of submissions</a>.</p>

<hr />
]]>
</description>
<dc:date>2013-01-30T13:03+00:00</dc:date>
</item>

<item>
<title>Nine</title>
<link>http://www.supercooldesign.co.uk/blog/entry/nine</link>
<description>
<![CDATA[
<p>
	<img alt="" src="/images/uploads/blog/nine.jpg" style="width: 550px; height: 709px;" /></p>
<p>
	Nine lives, dressed to the nines, cloud nine, a stitch in time saves nine, nine-to-five, the whole nine yards &hellip; errrrr &hellip; nine years since the last <a href="http://www.huffingtonpost.com/2013/01/13/c7-corvette-2014-stingray-chevy-gm_n_2469437.html">all-new Corvette</a> &hellip; ummm &hellip; Fluorine has the atomic no. 9 &hellip; okay, this is getting tenuous (but I <em>knew</em> A Level Chemistry would come in handy one day).</p>
<p>
	I&#39;ve been thinking about the number nine because this Saturday, 19 January, Supercool turns nine years old. Nine! That&#39;s a lot of years!</p>
<p>
	Over these years we&#39;ve been lucky enough to work with loads of great people on some really interesting projects &ndash; and every year we learn more and more, helping make us better and better at what we do. It&#39;s a pretty darn good job, all-told. Like I said &ndash; lucky.</p>
<p>
	The last batch was ace, so here&#39;s to the next nine years.</p>

<hr />
]]>
</description>
<dc:date>2013-01-17T15:33+00:00</dc:date>
</item>

<item>
<title>Season&#8217;s Greetings 2012</title>
<link>http://www.supercooldesign.co.uk/blog/entry/seasons-greetings-2012</link>
<description>
<![CDATA[
<p>
	<img alt="" src="/images/uploads/blog/festive-greeting-photo.jpg" /></p>
<p>
	There&#39;re few better ways to feel festive than listening to some Christmas tunes and, like a box of Roses or Quality Street, there&#39;s something for everyone; whatever your taste. (My preference being for old crooners warbling the classics rather than whatever X-Factor have released just in time for the Christmas charts &ndash; Bah! Humbug!)</p>
<p>
	So, to celebrate the important role music plays during the festive period, Supercool&#39;s 2012 card is based on a lovely, heartwarming seasonal ditty with possibly the most boring title ever <a href="http://en.wikipedia.org/wiki/The_Christmas_Song" title="Wikipedia entry about The Christmas Song, which was written in 1944 by Mel Tormé and Bob Wells"><em>The Christmas Song</em></a>, written by Mel Torm&eacute; and Bob Wells, but made famous by Nat King Cole; <em>"Chestnuts roasting on an open fire, Jack Frost nipping at your nose, yuletide carols being sung by a choir"</em> &ndash; you know the badger.</p>
<p>
	And purely for your festive pleasure, in the spirit of bringing joy (and a seasonal smirk) &hellip;</p>
<p>
	<img alt="" src="/images/uploads/blog/supercool-christmas-2012-blog_1.jpg" style="width: 603px; height: 374px;" /></p>
<p>
	<em>Everybody knows cards from a design studio<br />
	Should help to make the season bright.<br />
	Though seeing us dressed as elf-like eskimos<br />
	Could make it hard to sleep tonight &hellip;</em></p>
<p>
	<em>And so we offer you this simple phrase&nbsp;<br />
	From all at Supercool HQ:<br />
	Although it&rsquo;s been said many times, many ways,<br />
	Merry Christmas to you.</em></p>
<p>
	<strong>Warmest winter wishes.</strong></p>

<hr />
]]>
</description>
<dc:date>2012-12-17T07:59+00:00</dc:date>
</item>

<item>
<title>Feeling a bit green</title>
<link>http://www.supercooldesign.co.uk/blog/entry/feeling-a-bit-green</link>
<description>
<![CDATA[
<p>
	<img alt="" src="/images/uploads/blog/colour-of-the-year-2013.jpg" /></p>
<p>
	It&#39;s that time of year when Pantone reveal their &#39;Color [sic] of the Year&#39;, and in 2013 we should be looking out for up-and-coming hue PANTONE 17-5641 Emerald, apparently.</p>
<p>
	Why? Because, according to <a href="https://www.pantone.com/pages/MYP_mypantone/mypInfo.aspx?ca=75&amp;pg=21056">Pantone&#39;s website</a>, the "vivid, verdant green, enhances our sense of well-being &hellip; by inspiring insight, as well as promoting balance and harmony."</p>
<p>
	I&#39;m not that convinced by the whole thing really, but perhaps there is something useful about it, in that it helps folks to stop and think about colours and colour trends; which is a pretty fundamental part of what we deal with as designers.</p>
<p>
	So, get ready to witness rails of clothing resembling forests, and a glut of references to The Wizard of Oz&#39;s Emerald City in the coming year.</p>

<hr />
]]>
</description>
<dc:date>2012-12-14T10:38+00:00</dc:date>
</item>

<item>
<title>Old and new</title>
<link>http://www.supercooldesign.co.uk/blog/entry/old-and-new</link>
<description>
<![CDATA[
<p>
	<img alt="" src="/images/uploads/blog/supercool-homepage.jpg" style="width: 603px; height: 357px;" /></p>
<p>
	Have you noticed anything different about our website recently?</p>
<p>
	Hopefully not a huge amount if you only ever look at it on a desktop or laptop computer.&nbsp;(Other than the change of fonts and a slight re-jig of the <a href="http://www.supercooldesign.co.uk/work">Work page</a>.)</p>
<p>
	Under the hood, however, it&#39;s a different story as a while back we did an absolute tonne of development for tablet and mobile devices.</p>
<p>
	We didn&#39;t feel the need for a complete re-working of the site as we&#39;re still happy with the design &ndash; we made sure it&#39;d last us a good few years &ndash; but simply wanted it to work better on hand-held devices.&nbsp;</p>
<p>
	And now it does!</p>
<p>
	<img alt="" src="/images/uploads/blog/responsive-supercool-site-on-devices.jpg" style="width: 603px; height: 221px;" title="A possibly not quite to scale representation of the website on laptop, tablet and mobile" /></p>
<p>
	The website is responsive; so when you visit it on a mobile, for example, there&#39;s no need to do that pinching action thing to be able to read content &ndash; the clever coding magic* displays everything appropriately; vastly improving <a href="http://www.supercooldesign.co.uk/glossary/user-experience" title="What is user experience? Find out in the glossary">user-experience</a>.</p>
<p>
	With growing numbers of people accessing the web through their mobile, this is really important; got to think of the future and all that. And responsive design is something we do for clients, so it makes sense for our own site to be responsive as well.</p>
<p>
	We&#39;ve always had a &#39;little and often&#39; approach to the site&#39;s development which helps us feel free to play around with new ideas, and to make regular improvements in line with new techy developments. Plus, working on our own stuff needs to be fitted around client projects, so &#39;little and often&#39; is a perfectly practical approach too.</p>
<p>
	The new-and-(invisibly)-improved site has been live for some time now, so I admit to not being terribly responsive writing this post &ndash; but it remains that we&#39;re pretty darn chuffed with our newly responsive old webite.</p>
<p>
	*<em>It may be apparent that I&#39;m not the technical one in the office.</em></p>

<hr />
]]>
</description>
<dc:date>2012-10-25T09:10+00:00</dc:date>
</item>

    
</channel>
</rss>