<?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>Mark Cossey - Graphic and Web Designer &#187; News</title>
	<atom:link href="http://www.burning.me/category/news/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.burning.me</link>
	<description>I&#039;m a freelance Graphic and Web Designer based in Brighton and Hove</description>
	<lastBuildDate>Wed, 01 Feb 2012 14:42:45 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3</generator>
		<item>
		<title>The Iconic Hangover</title>
		<link>http://www.burning.me/2012/01/the-iconic-hangover/</link>
		<comments>http://www.burning.me/2012/01/the-iconic-hangover/#comments</comments>
		<pubDate>Sat, 21 Jan 2012 23:24:35 +0000</pubDate>
		<dc:creator>Mark Cossey</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[GUI]]></category>
		<category><![CDATA[icons]]></category>
		<category><![CDATA[UI]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://www.burning.me/?p=1648</guid>
		<description><![CDATA[I remember having a conversation years ago when I worked on the DB Learning Manager and <a href="http://www.burning.me/interface-branding-and-illustration/" title="DB Primary">DB Primary project</a> whereby we discussed at length the visual relevance of commonly used icons in interface design. These icons usually started life in common operating systems like Windows or Mac OS or within widely used software like Microsoft Windows and have then become the default choice since.

<img src="http://www.burning.me/wp-content/uploads/2012/01/0000_search.jpg" alt="Search" title="Search" >]]></description>
			<content:encoded><![CDATA[<p>I remember having a conversation years ago when I worked on the DB Learning Manager and <a href="http://www.burning.me/interface-branding-and-illustration/" title="DB Primary">DB Primary project</a> whereby we discussed at length the visual relevance of commonly used icons in interface design. These icons usually started life in common operating systems like Windows or Mac OS or within widely used software like Microsoft Windows and have then become the default choice since.</p>
<p>As we rapidly move forward with the way we access and create content on a number of devices and in a number of different ways, these icons become even less relevant but somehow we just know what they mean. Any attempt to re-design them to bring them up-to-date only causes confusion for the user but how do we explain in hundreds of years time what these icons actually mean and why they are used &#8211; it&#8217;s hard enough now.</p>
<h2>Search</h2>
<p>The magnifying glass is commonly used in user interface design to represent search, unless of course you are working with design software and in that case its used as a tool to let you look more closely at something.<br />
<img src="http://www.burning.me/wp-content/uploads/2012/01/0000_search.jpg" alt="Search" title="Search" ></p>
<h2>Find</h2>
<p>This icon is often used to represent the &#8216;Find&#8217; action when searching for a word or term within a page.<br />
<img src="http://www.burning.me/wp-content/uploads/2012/01/0001_find.jpg" alt="Find" title="Find" ></p>
<h2>Telephone</h2>
<p>Ok, look around you right now at this very moment for a telephone &#8211; Does it look like this?<br />
<img src="http://www.burning.me/wp-content/uploads/2012/01/0004_telephone.jpg" alt="Telephone" title="Telephone" ></p>
<h2>Record Sound</h2>
<p>When was the last time you used a standalone microphone to record a sound and did it look like this?<br />
<img src="http://www.burning.me/wp-content/uploads/2012/01/0005_mic.jpg" alt="Record sound" title="Record sound" ></p>
<h2>Choose Colour</h2>
<p>Not quite so common but still used as an icon to represent choosing a colour. Last time you used one of these was at art college.<br />
<img src="http://www.burning.me/wp-content/uploads/2012/01/0003_palette.jpg" alt="Palette" title="Palette" ></p>
<h2>Announce</h2>
<p>Have you ever used a loudspeaker to make an announcement?<br />
<img src="http://www.burning.me/wp-content/uploads/2012/01/0002_announce.jpg" alt="Announce" title="Announce" ></p>
<h2>Movie</h2>
<p>We know film strips are still used at the cinema but you never see it.<br />
<img src="http://www.burning.me/wp-content/uploads/2012/01/0006_movie.jpg" alt="Movie" title="Movie" ></p>
<h2>Television</h2>
<p>Televisions don&#8217;t look like this anymore but it&#8217;s still widely recognised.<br />
<img src="http://www.burning.me/wp-content/uploads/2012/01/0007_tv.jpg" alt="Television" title="Television" ></p>
<h1>Think of the kids</h1>
<p>There will come a time when we will need to explain ourselves to our children and our children&#8217;s children as to why we use these icons. When home computers were becoming more widely used and <a href="http://en.wikipedia.org/wiki/Graphical_user_interface" title="Graphical User Interface">graphical user interfaces</a> were introduced, icons had to be designed for a different generation of user and it was this generation of user that had no starting point except for the actual representation of that icon. I can only imagine that when we come to the &#8216;Search&#8217;, &#8216;Find&#8217; and &#8216;Zoom&#8217; argument that explanations will be thin on the ground.</p>
<p>Thanks <a href="http://glyphish.com/" title="Glyphish">Glyphish</a> (for the icons).</p>
]]></content:encoded>
			<wfw:commentRss>http://www.burning.me/2012/01/the-iconic-hangover/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Hero &#8211; by Miguel Endara</title>
		<link>http://www.burning.me/2011/12/hero-by-miguel-endara/</link>
		<comments>http://www.burning.me/2011/12/hero-by-miguel-endara/#comments</comments>
		<pubDate>Tue, 06 Dec 2011 16:37:55 +0000</pubDate>
		<dc:creator>Mark Cossey</dc:creator>
				<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Things I like]]></category>
		<category><![CDATA[drawing]]></category>
		<category><![CDATA[sketch]]></category>
		<category><![CDATA[sketching]]></category>

		<guid isPermaLink="false">http://www.burning.me/?p=1590</guid>
		<description><![CDATA[The making of 'Hero', a drawing <a href="http://miguelendara.com/" title="Miguel Endara">Miguel Endara</a> created of his dad composed entirely out of 3.2 million ink dots.

<div class="video-container"><iframe src="http://player.vimeo.com/video/33091687?title=0&#38;byline=0&#38;portrait=0" width="600" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>]]></description>
			<content:encoded><![CDATA[<p>The making of &#8216;Hero&#8217;, a drawing <a href="http://miguelendara.com/" title="Miguel Endara">Miguel Endara</a> created of his dad composed entirely out of 3.2 million ink dots.</p>
<p>Only used 1 pen too.</p>
<div class="video-container"><iframe src="http://player.vimeo.com/video/33091687?title=0&amp;byline=0&amp;portrait=0" width="600" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
]]></content:encoded>
			<wfw:commentRss>http://www.burning.me/2011/12/hero-by-miguel-endara/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>My Journey to a Responsive Website</title>
		<link>http://www.burning.me/2011/12/my-journey-to-a-responsive-website/</link>
		<comments>http://www.burning.me/2011/12/my-journey-to-a-responsive-website/#comments</comments>
		<pubDate>Fri, 02 Dec 2011 10:14:13 +0000</pubDate>
		<dc:creator>Mark Cossey</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[How I make]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Things I like]]></category>
		<category><![CDATA[CSS3]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[HTML5]]></category>
		<category><![CDATA[Mobile]]></category>
		<category><![CDATA[Responsive]]></category>

		<guid isPermaLink="false">http://www.burning.me/?p=1492</guid>
		<description><![CDATA[Armed with a copy of <a href="http://www.abookapart.com/products/mobile-first" title="Mobile First">Mobile First</a> by <a href="http://www.lukew.com/ff/entry.asp?933">Luke Wroblewski</a> and <a href="http://hardboiledwebdesign.com/" title="Hardboiled Web Design">Hardboiled Web Design</a> by Andy Clarke I set about making my site <a href="http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/">responsive</a>. 


<a href="http://www.burning.me/2011/12/my-journey-to-a-responsive-website"><img src="http://www.burning.me/wp-content/uploads/2011/12/responsive-site-iphone.jpg" alt="Site on iPhone" title="Site on iPhone"></a>]]></description>
			<content:encoded><![CDATA[<p>Armed with a copy of <a href="http://www.abookapart.com/products/mobile-first" title="Mobile First">Mobile First</a> by <a href="http://www.lukew.com/ff/entry.asp?933">Luke Wroblewski</a> and <a href="http://hardboiledwebdesign.com/" title="Hardboiled Web Design">Hardboiled Web Design</a> by Andy Clarke I set about making my site <a href="http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/">responsive</a>. </p>
<p>Before I share the details of my journey, I&#8217;d like to add that the two books mentioned above were annoyingly good. Annoying in the fact that after reading each page I had to put the book down and try out what I&#8217;d just read. </p>
<h2>The Objective</h2>
<p>I was getting tired of my old site. There was content and functionality on there that I didn&#8217;t like and my analytics suggested that users were not finding certain things useful either. As well as the obvious responsivness, I wanted to:</p>
<ul>
<li>Reduce HTTP requests</li>
<li>Simplify core colour palette to use a single green colour and black</li>
<li>Develop stronger visual identity</li>
<li>Improve typographical hierarchy</li>
<li>Reduce portfolio items to better demonstrate my competencies and skills</li>
<li>Start to use HTML5 markup standards</li>
<li>Improve mobile and tablet usabilty</li>
</ul>
<p><img src="http://www.burning.me/wp-content/uploads/2011/12/old-site.jpg" alt="Old site" title="old-site"></p>
<h2>Reducing HTTP requests</h2>
<p>My old site had a bunch of plugins activated so I culled all but the ones that I really thought were essential. I was happy to see jQuery Colorbox go as it added a huge chunk of code to each of my pages and I didn&#8217;t feel that the functionality was needed any longer for my responsive site. I just removed image dimensions throughout and used:</p>
<p><code>img {<br />
	width: 100%;<br />
	height: 100%;<br />
}</code></p>
<p>The CSS above allows my images to scale depending on the users screen resolution.</p>
<p>I also removed a lot of the single image files that were used in my CSS and combined to create sprites e.g. the icons I use for my social links are actually one file and the CSS positions it accordingly.</p>
<p><strong>Sprite:</strong></p>
<p><img src="http://www.burning.me/wp-content/themes/burning-responsive/images/social-sprites.png" alt="Sprite"></p>
<p><strong>CSS example:</strong></p>
<p><code>.social-linkedin a {<br />
	float:left;<br />
	display:block;<br />
	width: 36px;<br />
	height: 36px;<br />
	margin-right:8px;<br />
	padding:0px;<br />
	text-decoration: none;<br />
	background-image: url(images/social-sprites.png);<br />
	background-repeat: no-repeat;<br />
	background-position: -141px 0;<br />
	-moz-transition: all 0.2s ease-in 0s;<br />
	-webkit-transition: all 0.2s ease-in 0s;<br />
	opacity:0.6;<br />
	filter:alpha(opacity=60);<br />
}</code></p>
<p>So you&#8217;ll notice that the class above will only show the LinkedIn icon due to the overall width and height and the background position of the image. My CSS uses a different class for each icon but each time the same &#8216;social-sprites.png&#8217; is used.</p>
<p>For my existing video content I added the following CSS (<a href="http://webdesignerwall.com/tutorials/css-elastic-videos">found here</a>):<br />
<code>.video-container {<br />
	position: relative;<br />
	padding-bottom: 56.25%;<br />
	padding-top: 30px;<br />
	height: 0;<br />
	overflow: hidden;<br />
}</p>
<p>.video-container iframe,<br />
.video-container object,<br />
.video-container embed {<br />
	position: absolute;<br />
	top: 0;<br />
	left: 0;<br />
	width: 100%;<br />
	height: 100%;<br />
}</code><br />
I then wrapped my video embed code like this:<br />
<code>&lt;div class="video-container"&gt;<br />
	&lt;iframe src="http://player.vimeo.com/video/6284199?title=0&amp;byline=0&amp;portrait=0" width="800" height="450" frameborder="0"&gt;&lt;/iframe&gt;<br />
&lt;/div&gt;</code></p>
<p>By deactivating lots of my previous plugins I&#8217;ve also managed to limit the number of CSS files used in my site. I can still reduce this down to one single file but at the moment, the plugin that creates my page numbers (on my blog list page and search results) also uses another CSS file.</p>
<p>I also removed lots of content from the sidebar (Facebook widget, generic text, blog categories) which has helped to removed page bloat.</p>
<h2>Core colour palette and visual identity</h2>
<p>My old site used multiple shades of green and I didn&#8217;t feel it was working very well. I&#8217;d also introduced a third purple colour but wasn&#8217;t happy with that.</p>
<p>For the new design I limited myself to a single green colour value (#6ECF50) and then solid black. This helped me create a stronger visual identity and also added more contrast which was one of my other objectives. My old site used more washed out greens and was a bit inconsistent.</p>
<p><img src="http://www.burning.me/wp-content/uploads/2011/12/new-logo.jpg" alt="New Logo" title="new-logo" ></p>
<p>I used the same colour values for my logo re-design and I wanted to create a logo that worked well as a central asset and was high contrast.</p>
<h2>Improve typographical hierarchy</h2>
<p>I&#8217;m a big fan of <a href="https://typekit.com/" title="Typekit">Typekit</a> and I use their font service for my custom fonts. My H1 and H2 tag use <a href="https://typekit.com/fonts/league-gothic">League Gothic</a>. I use H1 for all my page headings and H2 for sub headings. Any other heading that gets used in a page is simple wrapped with a <code><strong></code> tag. My body text is set at 14px and uses a font family or Helvetica, Arial, Lucida Grand and then sans-serif. I set the body text to a very dark grey (#333333) rather than black to help with readability &#8211; I just feel it reads better than using a solid black). I use a larger font for the date (18px) and lighter shade of grey again (#666666) to maintain the content hierarchy. For links I use my same green value (#6ECF50). By simplifying my font styles I hoped to meet the objective of improving my typographical hierarchy.</p>
<h2>Reduce portfolio items to better demonstrate my competencies and skills</h2>
<p>My previous portfolio had become bloated with items that showed a wide range of skills. I felt there were too many thumbnails and too much variety that could be confusing to prospective employers or clients. It was hard to see what it was that I actually did. </p>
<p>I decided to pick 3 main projects which used various skills and simply used thumbnails and a short paragraph of text to give and overview. If the user wanted to find out more, I included a link to a dedicated landing page for each project. Hopefully that will make it simpler for the user and also highlight my skills better.</p>
<h2>Start to use HTML5 markup standards</h2>
<p>I&#8217;m still really scrathching the surface of HTML5 capabilities so haven&#8217;t used any of the more advanced features. What I have tried to do is use the correct tags and markup to organise my content. My header, footer and sidebar are wrapped with <code>&lt;section&gt;</code> and my individual blog posts are wrapped with <code>&lt;article&gt;</code>. I also use <code>&lt;nav&gt;</code> wrapped around my top navigation bar, <code>&lt;header&gt;</code> wrapped around all the content in my header section and then <code>&lt;footer&gt;</code>, you guessed it, around all the content in my footer. It&#8217;s quite handy that WordPress splits it&#8217;s templates up like this too.</p>
<p>I&#8217;ve also used some HTML5 form features to help with my mobile experience too. Using <code>type="email"</code> and <code>type="url"</code> will make sure that the correct keyboard is displayed in iOS.</p>
<p>I used the <a href="http://html5boilerplate.com/">HTML5 boilerplate template</a> to help get me started but I spent time reading through the documentation so that I understood the best I could what each part does.</p>
<h2>Using a responsive design to improve mobile and tablet usability</h2>
<p>This was a major objective for me. I&#8217;d previously used the WPTouch plugin to display my site on mobile devices but felt as though I didn&#8217;t have full control over it. I wanted to design my site from the ground up for each device, in portrait and landscape and retain full visual identity.</p>
<p>I spent a long time looking at sites like <a href="http://mediaqueri.es/">Media Queries</a> that lists the best responsive web designs. I wanted to see how other people were designing for mobile, tablet and desktop combined.</p>
<p>With the knowledge that I&#8217;d picked up in Mobile First I ran with Luke&#8217;s theory of a mobile user having one thumb and one eyeball. This theory suggests that a user viewing content on a mobile device is likely to be doing so whilst also looking around them and will only be using one thumb to navigate. For this reason I increased the size of my smallest buttons to be minimum of 22px in height and width with a minimum of 4 pixels of clearance between buttons. In practice, most of my content buttons and main navigation buttons much bigger than this.</p>
<p><img src="http://www.burning.me/wp-content/uploads/2011/12/new-nav.jpg" alt="New buttons" title="new-nav" ></p>
<p>I also decided to reduce the amount of content I displayed on mobile devices on my homepage. I go from showing 1 main image, 3 thumbs and some text (per portfolio item) at desktop (or iPad lanscape) to 1 main image, 1 thumb and some text at iPhone landscape. I then reduce further to 1 main image and some text at iPhone portrait size. At each size I always show the &#8216;More&#8217; button that will take the user to the full content page which has full information no matter what device they use. I do this by using <a href="http://www.w3.org/TR/css3-mediaqueries/">media queries</a> in my CSS and alter sizes, visibility and positioning accordingly. If you&#8217;re viewing this post on a laptop or desktop with a modern browser, you can resize the browser window to see these designs appear at various break-points.</p>
<p>I also moved content around at various sizes to make the most of the screen sizes. Navigation goes from being left aligned at desktop size to centred on iPhone and iPad (portrait). My footer content goes from 3 colums to 1 column at the smaller sizes too. I adjusted margins and padding to improve my vertical grid.</p>
<p>I spent time making sure my content and font sizes were readable at various sizes but also paid attention to forms to make sure the fields were accessible when iOS keyboards appeared etc.</p>
<h2>Feeback</h2>
<p>When I was at a comfortable stage with my design asked around for feedback and was given some great tips by <a href="http://www.thomasprior.co.uk/">Tom Prior</a> who made some great suggestions for my top navigation. </p>
<p>I&#8217;de also like to ask you, if you&#8217;ve taken the time to read this, to also feedback on what you think of the design. All suggestions very welcome.</p>
<p><img src="http://www.burning.me/wp-content/uploads/2011/12/responsive-site-iphone.jpg" alt="Site on iPhone" title="Site on iPhone"></p>
<div class="video-container">
<iframe src="http://player.vimeo.com/video/25548033?title=0&amp;byline=0&amp;portrait=0" width="600" height="338" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
]]></content:encoded>
			<wfw:commentRss>http://www.burning.me/2011/12/my-journey-to-a-responsive-website/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Design Jam &#8211; What to expect</title>
		<link>http://www.burning.me/2011/11/design-jam-what-to-expect/</link>
		<comments>http://www.burning.me/2011/11/design-jam-what-to-expect/#comments</comments>
		<pubDate>Mon, 07 Nov 2011 23:39:15 +0000</pubDate>
		<dc:creator>Mark Cossey</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[How I make]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Things I like]]></category>
		<category><![CDATA[Brighton]]></category>
		<category><![CDATA[Design Jam]]></category>
		<category><![CDATA[User Experience]]></category>
		<category><![CDATA[UX]]></category>

		<guid isPermaLink="false">http://www.burning.me/?p=1404</guid>
		<description><![CDATA[On Saturday 5th November 2011 I attended <a href="http://www.designjams.org/wiki/Design_Jam_Brighton">Design Jam Brighton</a>. It was my first time attending an event like this so I didn't really know what to expect.

From the <a href="http://www.designjams.org/wiki/Main_Page">Design Jam Wiki page</a> it explained that: "Design Jams are one-or-two-day design sessions, during which people team up to tackle engaging User Experience (UX) challenges."

<a href="http://www.burning.me/2011/11/design-jam-what-to-expect"><img src="http://www.burning.me/wp-content/uploads/2011/11/image-02.jpg" alt="" title="Design Jam Brighton"  /></a>]]></description>
			<content:encoded><![CDATA[<p>On Saturday 5th November 2011 I attended <a href="http://www.designjams.org/wiki/Design_Jam_Brighton">Design Jam Brighton</a>. It was my first time attending an event like this so I didn&#8217;t really know what to expect.</p>
<p>From the <a href="http://www.designjams.org/wiki/Main_Page">Design Jam Wiki page</a> it explained that:</p>
<blockquote><p><strong>&#8220;Design Jams are one-or-two-day design sessions, during which people team up to tackle engaging User Experience (UX) challenges.&#8221;</strong></p></blockquote>
<p>And the Design Jam Brighton wiki page had a little more information:</p>
<blockquote><p><strong>&#8220;Attendees will form groups based on the skills they contribute and what they’d like to learn. Teams will then work to answer a design brief unveiled on the day. Teams are self-organising and can work however they like, be that conducting research, sketching, running guerrilla usability tests, creating visual mockups and so on.&#8221;</strong></p></blockquote>
<p>Upon arrival we were given a brief run-through and timetable for the day and then instructed to make our way to a table which would then make up our team. We ended up with roughly 9 teams of 5 so it was a very well attended event (with a waiting list to boot).</p>
<p>Each team was handed the same brief and we had a short amount of time to decide on and prepare our elevator pitch. Once agreed, each team took their turn to present to everyone their chosen idea. The rest of the day was then left to us to design our solution and prepare a presentation for the end of the day.</p>
<p><a href="http://www.flickr.com/photos/wyebirds/6314886027/in/photostream"><img src="http://www.burning.me/wp-content/uploads/2011/11/image-02.jpg" alt="" title="Design Jam Brighton"  /></a></p>
<p>I don&#8217;t want to go into much detail about the brief and solutions because, as from the title of this post suggests, I&#8217;d like to concentrate on what to expect and my experience of the event.</p>
<p>It was a breath of fresh air to be handed such a wide open brief with few limitations and financial restrictions. Our team had the opportunity to think openly and freely and this in itself was the essence of the event. An amazing group of mentors were on hand to offer suggestions and advice on moving our projects through tricky terrain and they did so with careful thought and knowledge. Being surrounded by so many like-minded people who all had a desire to design and create was pretty thrilling.</p>
<p>I should mention too that these events are free and are supported by volunteers and this event in particular was hosted by a local digital agency Cogapp. </p>
<p><a href="http://www.flickr.com/photos/wyebirds/6314852003/in/photostream"><img src="http://www.burning.me/wp-content/uploads/2011/11/image-01.jpg" alt="" title="Design Jam Brighton" /></a></p>
<p><a href="http://www.flickr.com/photos/cogapp/6323081678/in/pool-1689784@N24/"><img src="http://www.burning.me/wp-content/uploads/2011/11/image-03.jpg" alt="" title="Design Jam Brighton" /></a></p>
<p><a href="http://www.flickr.com/photos/cogapp/6323082204/in/pool-1689784@N24/"><img src="http://www.burning.me/wp-content/uploads/2011/11/image-04.jpg" alt="" title="Design Jam Brighton" /></a></p>
<h2>Getting the most out of the event</h2>
<p>As is usually the case, you get out what you put in so be active and have an open mind. Here are some other tips:</p>
<ul>
<li>Make the most of the mentors and ask for feedback when you feel you need to. </li>
<li>Although time is limited, try and find a few minutes to chat to other teams and find out how they work too. </li>
<li>Take on a task or role in your group that differs from your normal job or skill-set.</li>
<li>Take photos and video throughout the course of the day.</li>
<li>Share your ideas, processes and experience.</li>
</ul>
<h2>People who made it happen</h2>
<p><strong>Hosts</strong><br />
<a href="http://www.cogapp.com">Cogapp</a></p>
<p><strong>Mentors</strong><br />
Claire Rowland &#8211; <a href="http://www.twitter.com/@clurr ">@clurr</a><br />
Ben Bashford &#8211; <a href="http://www.twitter.com/@bashford  ">@bashford </a><br />
Vanessa Harden &#8211; <a href="http://www.twitter.com/@vanessaharden">@vanessaharden </a><br />
Greg Hadfield &#8211; <a href="http://www.twitter.com/@GregHadfield">@GregHadfield</a> </p>
<p><strong>Organisers</strong><br />
Danny Hope &#8211; <a href="http://www.twitter.com/@yandle">@yandle</a><br />
Alison Austin &#8211; <a href="http://twitter.com/#!/alicenwondrlnd">@alicenwondrlnd</a><br />
Patrick Sansom &#8211; <a href="http://twitter.com/#!/Patrick_Sansom">@Patrick_Sansom</a><br />
Gavin Wye &#8211; <a href="http://twitter.com/#!/gavinwye">@gavinwye</a><br />
Cennydd Bowles &#8211; <a href="http://twitter.com/#!/Cennydd">@Cennydd</a></p>
<p><strong>Sponsors</strong><br />
<a href="http://www.think.eu/">TH_NK</a><br />
<a href="http://www.cogapp.com/">Cogapp</a><br />
<a href="http://www.madgex.com/">Madgex</a><br />
<a href="http://www.brighton.ac.uk/">University of Brighton</a></p>
<p>Fancy giving it a try? Keep checking <a href="http://www.designjams.org/wiki/Design_Jam_Brighton">http://www.designjams.org/wiki/Design_Jam_Brighton</a> for the next event in Brighton or follow <a href="http://www.twitter.com/designjambri">@designjambri</a>. International events can be found here: <a href="http://www.designjams.org/wiki/Main_Page">http://www.designjams.org/wiki/Main_Page</a>.</p>
<h2>Further reading</h2>
<p>Flickr <a href="http://www.flickr.com/groups/designjambrighton/">http://www.flickr.com/groups/designjambrighton/</a><br />
Lanyrd <a href="http://lanyrd.com/2011/design-jam-brighton ">http://lanyrd.com/2011/design-jam-brighton </a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.burning.me/2011/11/design-jam-what-to-expect/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>29 Ways to stay creative</title>
		<link>http://www.burning.me/2011/10/29-ways-to-stay-creative/</link>
		<comments>http://www.burning.me/2011/10/29-ways-to-stay-creative/#comments</comments>
		<pubDate>Thu, 13 Oct 2011 12:24:12 +0000</pubDate>
		<dc:creator>Mark Cossey</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Pretty cool list]]></category>
		<category><![CDATA[Things I like]]></category>
		<category><![CDATA[Animation]]></category>
		<category><![CDATA[motion graphics]]></category>
		<category><![CDATA[typography]]></category>
		<category><![CDATA[video]]></category>

		<guid isPermaLink="false">http://www.burning.me/?p=1400</guid>
		<description><![CDATA[<div class="video-container"><iframe src="http://player.vimeo.com/video/24302498?title=0&#38;byline=0&#38;portrait=0" width="601" height="338" ></iframe></div>

Original <a href="http://vimeo.com/24302498">source</a> here]]></description>
			<content:encoded><![CDATA[<p>Nice use of motion graphics and typography to display 29 ways to stay creative.</p>
<div class="video-container"><iframe src="http://player.vimeo.com/video/24302498?title=0&amp;byline=0&amp;portrait=0" width="601" height="338" ></iframe></div>
<p>Original <a href="http://vimeo.com/24302498">source</a> here</p>
]]></content:encoded>
			<wfw:commentRss>http://www.burning.me/2011/10/29-ways-to-stay-creative/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Responsive Logo Design</title>
		<link>http://www.burning.me/2011/09/responsive-logo-design/</link>
		<comments>http://www.burning.me/2011/09/responsive-logo-design/#comments</comments>
		<pubDate>Wed, 21 Sep 2011 08:29:20 +0000</pubDate>
		<dc:creator>Mark Cossey</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[Inspiration]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[Things I like]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[logo]]></category>
		<category><![CDATA[London 2012]]></category>
		<category><![CDATA[Olympic Games]]></category>
		<category><![CDATA[Responsive]]></category>

		<guid isPermaLink="false">http://www.burning.me/?p=1367</guid>
		<description><![CDATA[The dust has settled since the <a href="http://news.bbc.co.uk/sport1/hi/other_sports/olympics_2012/6718243.stm">launch of the London 2012 logo</a>. It's a design that received criticism from the general public and the <a href="http://www.davidairey.com/london-2012-olympic-logo-disaster/">design community</a> alike and even now, four years on from its badly scripted unveiling it still has few fans. I'll state now (like I did back in 2007) that <strong>I am a fan</strong> (though I do have criticism for the launch and the language used to explain the design concept). The Olympic Games has always been about sports men and women striving to be the best and win medals for their countries, but the games have a major commercial interest too. The world will be watching these games so big brands pay big money to be in partnership.

<a href="http://www.burning.me/2011/09/responsive-logo-design/"><img src="http://www.burning.me/wp-content/uploads/2011/09/rl.jpg" alt="Responsive Logo Design" title="Responsive Logo Design"  /></a>]]></description>
			<content:encoded><![CDATA[<p>The dust has settled since the <a href="http://news.bbc.co.uk/sport1/hi/other_sports/olympics_2012/6718243.stm">launch of the London 2012 logo</a>. It&#8217;s a design that received criticism from the general public and the <a href="http://www.davidairey.com/london-2012-olympic-logo-disaster/">design community</a> alike and even now, four years on from its badly scripted unveiling it still has few fans. I&#8217;ll state now (like I did back in 2007) that <strong>I am a fan</strong> (though I do have criticism for the launch and the language used to explain the design concept). The Olympic Games has always been about sports men and women striving to be the best and win medals for their countries, but the games have a major commercial interest too. The world will be watching these games so big brands pay big money to be in partnership.</p>
<p><img src="http://www.burning.me/wp-content/uploads/2011/09/rl.jpg" alt="Responsive Logo Design" title="Responsive Logo Design"  /></p>
<p>I believe commercial partnerships were high up on the project objectives and this affected the design decisions in creating the 2012 logo (and this is absolutely fine). When we were told <em>&#8220;It will define the venues we build and the Games we hold and act as a reminder of our promise to use the Olympic spirit to inspire everyone and reach out to young people around the world&#8230;&#8221;</em> we all knew that was rubbish. It&#8217;s always a mistake to try to explicitly tell someone how they should feel about a logo or brand before any groundwork gets done. Those feelings come later.</p>
<div class="video-container"><iframe src="http://player.vimeo.com/video/26123167?title=0&amp;byline=0&amp;portrait=0&amp;color=ffff01" width="601" height="338" ></iframe></div>
<h2>It&#8217;s a responsive logo design</h2>
<p>If we ignore the public introduction to the logo that we had back in 2007 and review where we are now it&#8217;s clear to see that we have a logo that has no colour yet a very clear form. It works well at large and small sizes and can be modified, resized and positioned to best suit its environment. Its appearance can be changed by its partnering brands so that it harmonises and compliments. In short, it&#8217;s a Responsive Logo Design (yes, I did just say that).</p>
<h2>Responsive design?</h2>
<p>Web design and development practices are ever evolving and the expectation right now is that a website should be responsive i.e. it should understand how and where it&#8217;s being viewed and alter its layout accordingly &#8211; you can read <a href="http://www.alistapart.com/articles/responsive-web-design/">more about that here</a>. Industry Prophet <a href="http://stuffandnonsense.co.uk/company/profile">Andy Clarke</a> put the situation quite simply in this tweet:</p>
<p><a href="http://twitter.com/#!/Malarkey/status/113221032634093569"><img src="http://www.burning.me/wp-content/uploads/2011/09/andy.jpg" alt="If its not responsive, its not web design" title="andy" /></a></p>
<h2>But isn&#8217;t responsive design about websites?</h2>
<p>Most of what we read about responsive design at the moment applies to online content so using the term for a logo design might not make much sense but if we look at the London 2012 logo design again and consider how its being used now, it actually adopts many of the practices used in responsive web design. The London 2012 logo is a shaped window, a viewport, an icon and a brandless brand that can alter it&#8217;s appearance based on it&#8217;s environmental yet still remain recognisable as the visual identity of the London 2012 Olympics. </p>
<p><img src="http://www.burning.me/wp-content/uploads/2011/09/montage.jpg" alt="" title="London 2012 Logo in use" /></p>
<p>It&#8217;s easy (and fun) to alter the shapes of the 2012 logo into suggestive forms and to find hidden messages and Olympic Games logos will always atract this kind of attention. I&#8217;ve no idea what sporting achievements lay ahead for next year&#8217;s games (though I have a feeling that opening and closing ceremonies will not be quite as grande as those of Bejing) but one thing I&#8217;m certain of is that <a href="http://www.wolffolins.com/">Wolf Olins</a> have created a visual identity that is being well executed and is developing into the strong identity that stand out from <a href="http://www.webdesignerdepot.com/2009/03/39-olympic-logos-from-1924-to-2012/">previous designs</a>. </p>
]]></content:encoded>
			<wfw:commentRss>http://www.burning.me/2011/09/responsive-logo-design/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>What are you thinking?</title>
		<link>http://www.burning.me/2011/07/what-are-you-thinking/</link>
		<comments>http://www.burning.me/2011/07/what-are-you-thinking/#comments</comments>
		<pubDate>Sat, 16 Jul 2011 14:06:47 +0000</pubDate>
		<dc:creator>Mark Cossey</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[How I make]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[client]]></category>
		<category><![CDATA[logo design]]></category>
		<category><![CDATA[planning]]></category>
		<category><![CDATA[process]]></category>

		<guid isPermaLink="false">http://www.burning.me/?p=1322</guid>
		<description><![CDATA[I designed a logo for a client recently and I thought the idea I came up with was great. The design ticked all the right boxes (or so I thought) but what excited me most about it was it's versatility. I could see parts of the logo that would really develop the clients visual identity and I felt it would work well across many mediums. The logo worked well big, small, reversed and in full colour. The icon used in the logo could be used on it's own to enhance branding and create something which I felt was a modern and forward thinking design.

<a href="http://www.burning.me/2011/07/what-are-you-thinking/"><img src="http://www.burning.me/wp-content/uploads/2011/07/rubble-600x450.jpg" alt="What are you thinking?" title="rubble" /></a>]]></description>
			<content:encoded><![CDATA[<p><em>&#8220;You are not normal. Sorry but that&#8217;s the way it is. You design for people that are normal but you don&#8217;t fit into that category as, by definition, you don&#8217;t conform to the normal or standard type. You are abnormal. It&#8217;s not easy being abnormal and day-to-day life can sometimes be a struggle. </p>
<p>Your thoughts and ideas are so different to those of normal people that interaction in the form of conversation or debate with said normal people can be almost impossible. Sure, you do a good job of producing things for normal people but that doesn&#8217;t make you normal and the production line is far from easy. If you were normal, you&#8217;d have no idea what it was you were making or who it was for.&#8221;</em></p>
<h2>Look what I&#8217;m making for you</h2>
<p>I designed a logo for a client recently and I thought the idea I came up with was great. The design ticked all the right boxes (or so I thought) but what excited me most about it was it&#8217;s versatility. I could see parts of the logo that would really develop the clients visual identity and I felt it would work well across many mediums. The logo worked well big, small, reversed and in full colour. The icon used in the logo could be used on it&#8217;s own to enhance branding and create something which I felt was a modern and forward thinking design.</p>
<p><a href="http://www.flickr.com/photos/mbk/489220891/"><img src="http://www.burning.me/wp-content/uploads/2011/07/rubble-600x450.jpg" alt="rubble" title="rubble" /></a></p>
<p>Great. Awesome. Cool. Whooppeedooo. These are the words I didn&#8217;t hear upon presenting the logo in it&#8217;s early stages. I don&#8217;t remember the exact words but the general feeling was fairly underwhelming, there was possibly the mention of not liking the colour but I don&#8217;t remember exactly. What I do remember was the client clearly not sharing my excitement and enthusiasm for the design.</p>
<h2>What was I thinking?</h2>
<p>See, I&#8217;d made a mistake with my design process as I wanted to make my client feel empowered and involved with what I was doing. I think this is normally good practice with larger projects that are slightly more evolved but when it comes to concepts and ideas it&#8217;s important to remember that you and I are abnormal. All those ideas and thoughts of clever logo usage and evolution of the clients visual identity are all well and good, but they are of no use to anyone except you whilst they bounce around your abnormal head. I un-fairly expected my client to share my design vision when showing them where I was at with their logo in it&#8217;s infancy &#8211; <strong>What was I thinking?</strong></p>
<p>I should add that I don&#8217;t normally work like this. I think I must have read an article somewhere about involving clients in your design process and decided to give it a try. As I mentioned before I&#8217;ve no doubt this practice works in certain situations but <strong>don&#8217;t think for one minute other people will see what&#8217;s not there</strong>. I saw it, and I&#8217;m sure you would have seen it (at least I hope you would have) but we are a bit abnormal upstairs when it comes to this sort of thing remember.</p>
<h2>Don&#8217;t fix it if it aint broken&#8230; oh wait, its broken</h2>
<p>I&#8217;m going back to my tried and tested way of doing things, especially with logo design. Projects are like child births &#8211; the initial plan is pretty much the same but they all end up different in the end. I would suggest the following when it comes to presenting your ideas:</p>
<p><a href="http://www.burning.me/wp-content/uploads/2011/07/you-the-man2.gif"><img src="http://www.burning.me/wp-content/uploads/2011/07/you-the-man2-600x600.gif" alt="Yout the man" title="you-the-man" /></a></p>
<p>Keep certain stuff back from the client &#8211; they don&#8217;t need to see the nuts and bolts and it will probably have a negative impact on the whole project. Don&#8217;t forget that <strong>they are paying you to do something that they can&#8217;t do</strong> and by involving them too much might make them think they need to, or are being encouraged to chip in &#8211; even worse, they might think you are ballsing the whole thing up. </p>
<p><strong>Now back to your felt-tips, weirdo&#8230;</strong></p>
]]></content:encoded>
			<wfw:commentRss>http://www.burning.me/2011/07/what-are-you-thinking/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
		<item>
		<title>Playing with type</title>
		<link>http://www.burning.me/2011/06/playing-with-type/</link>
		<comments>http://www.burning.me/2011/06/playing-with-type/#comments</comments>
		<pubDate>Wed, 15 Jun 2011 08:42:54 +0000</pubDate>
		<dc:creator>Mark Cossey</dc:creator>
				<category><![CDATA[General]]></category>
		<category><![CDATA[How I make]]></category>
		<category><![CDATA[News]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[infographic]]></category>
		<category><![CDATA[poster]]></category>
		<category><![CDATA[Type]]></category>
		<category><![CDATA[typography]]></category>

		<guid isPermaLink="false">http://www.burning.me/?p=1260</guid>
		<description><![CDATA[I've been playing around with some ideas for a personal typography project. The idea started as a follow on from my <a href="http://www.burning.me/about/#infographic">infographic</a> project which was a visual representation of my skill-set.

<a href="http://www.burning.me/2011/06/playing-with-type/"><img src="http://www.burning.me/wp-content/uploads/2011/06/type-small.jpg" alt="type-small" title="type-small"  /></a>]]></description>
			<content:encoded><![CDATA[<p>I&#8217;ve been playing around with some ideas for a personal typography project. The idea started as a follow on from my <a href="http://www.burning.me/about/#infographic">infographic</a> project which was a visual representation of my skill-set.</p>
<p><a href="http://www.flickr.com/photos/incendios/5828158997/sizes/o/in/photostream/"><img src="http://www.burning.me/wp-content/uploads/2011/06/type-small.jpg" alt="type-small" title="type-small" /></a><br />
<small><a href="http://www.flickr.com/photos/incendios/5828158997/sizes/o/in/photostream/">See full size on Flickr here</a></small></p>
<p><a href="http://www.flickr.com/photos/incendios/5828158997/sizes/o/in/photostream/"><img src="http://www.burning.me/wp-content/uploads/2011/06/type-small-detail.jpg" alt="" title="type-small-detail" /></a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.burning.me/2011/06/playing-with-type/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Jack of all trades</title>
		<link>http://www.burning.me/2011/06/jack-of-all-trades/</link>
		<comments>http://www.burning.me/2011/06/jack-of-all-trades/#comments</comments>
		<pubDate>Wed, 15 Jun 2011 08:23:51 +0000</pubDate>
		<dc:creator>Mark Cossey</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[alan sugar]]></category>
		<category><![CDATA[design]]></category>
		<category><![CDATA[Dyson]]></category>
		<category><![CDATA[jack of all trades]]></category>
		<category><![CDATA[skills]]></category>

		<guid isPermaLink="false">http://www.burning.me/?p=1235</guid>
		<description><![CDATA[When it comes to skills offering I generally try to follow the ‘James Dyson’ rule. <a href="http://en.wikipedia.org/wiki/James_Dyson">James Dyson</a> is an inventor who is responsible for the <a href="http://www.dyson.co.uk/">Dyson Vacuum cleaner</a> and is an expert in <a href="http://en.wikipedia.org/wiki/Cyclonic_separation">cyclonic separation</a>. Dyson did try his hand at washing machines once but they didn't really work out so he chooses to <strong>stick to what he knows</strong> best - airflow. When you buy a Dyson product you know you are paying a little more but getting a well designed product that is built for purpose and to a high standard.

<img src="http://www.burning.me/wp-content/uploads/2011/06/dyson-600x221.jpg" alt="Dyson products" title="Dyson products" />]]></description>
			<content:encoded><![CDATA[<p>When it comes to &#8216;what I do&#8217; I generally try to follow the ‘James Dyson’ rule. <a href="http://en.wikipedia.org/wiki/James_Dyson">James Dyson</a> is an inventor who is responsible for the <a href="http://www.dyson.co.uk/">Dyson Vacuum cleaner</a> and is an expert in <a href="http://en.wikipedia.org/wiki/Cyclonic_separation">cyclonic separation</a>. Dyson did try his hand at washing machines once but they didn&#8217;t really work out so he chooses to <strong>stick to what he knows</strong> best &#8211; airflow. When you buy a Dyson product you know you are paying a little more but getting a well designed product that is built for purpose and to a high standard.</p>
<p><img src="http://www.burning.me/wp-content/uploads/2011/06/dyson-600x221.jpg" alt="Dyson products" title="Dyson products" /></p>
<p><img src="http://www.burning.me/wp-content/uploads/2011/06/3DD1623861175D857CCEF564F7E8-100x100.jpg" alt="" title="Amstrad launch new email phone" /></p>
<p>The other option is the ‘<a href="http://en.wikipedia.org/wiki/Alan_Sugar">Alan Sugar</a>’ route which would be to do lots and lots of different things, to a lower standard, in less time but charge as much as I possibly could. If my sole objective was to make as much money as I could then I would choose this route &#8211; but it isn&#8217;t.</p>
<p>I focus on Visual Design with the aim of <strong>communicating a message visually</strong> which can be in the form of a <a href="http://www.burning.me/logo-design-brighton/">logo</a> or a <a href="http://www.burning.me/web-design-brighton/">website</a> layout. Some would argue that a visual designer&#8217;s skills should be filtered even further to only focus on either logo design, design for print <strong>or</strong> web design but I disagree. <strong>My purpose is to convey a message and visually direct people in a simple yet elegant way</strong>. </p>
<p><a href="http://www.burning.me/wp-content/uploads/2010/08/sketches.jpg"><img src="http://www.burning.me/wp-content/uploads/2010/08/sketches-600x382.jpg" alt="" title="sketches" /></a></p>
<p>Though I have a good understanding of the technical side of building and a good understanding of the processes involved in producing printed materials, I don&#8217;t see myself as an expert in either of these fields. It&#8217;s important I understand these things and I don&#8217;t think I could do my job without understanding the mechanics but it&#8217;s also important to know when to involve technical expertise in a project.</p>
<p>For now I&#8217;m sticking with design &#8230;and pursuing my never ending journey into understanding human behavior.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.burning.me/2011/06/jack-of-all-trades/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>The iPhone and iPad user interface have got it right</title>
		<link>http://www.burning.me/2011/03/the-iphone-and-ipad-user-interface-have-got-it-right/</link>
		<comments>http://www.burning.me/2011/03/the-iphone-and-ipad-user-interface-have-got-it-right/#comments</comments>
		<pubDate>Fri, 18 Mar 2011 15:00:47 +0000</pubDate>
		<dc:creator>Mark Cossey</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Things I like]]></category>
		<category><![CDATA[Geek Ninja Battle Night]]></category>
		<category><![CDATA[ipad]]></category>
		<category><![CDATA[iPhone]]></category>
		<category><![CDATA[UI design]]></category>
		<category><![CDATA[User Interface]]></category>

		<guid isPermaLink="false">http://www.burning.me/?p=1174</guid>
		<description><![CDATA[Last week I attended <a href="http://geekninjafactory.com/geek-ninja-battle-night-mobile-web-vs-native">Geek Ninja Battle night</a> in Brighton where the subject discussed was web Vs native design for mobile devices. It was a great night with some healthy debate by <a href="http://aralbalkan.com">Aral Balkan</a>, <a href="http://www.stuffandnonsense.co.uk/">Andy Clarke</a>, <a href="http://remysharp.com/">Remy Sharp</a> and <a href="http://www.youknowwhodesign.com/">Sarah Parmenter</a> on the pros and cons of both practices. A comment that stuck in my head was made by iPhone and iPad UI design guru <a href="http://www.youknowwhodesign.com/">Sarah Parmenter</a> who described her mums experience of the UI on the iPad. Sarah's mum was described as not being particularly tech savvy but had been using her iPad for a short time to access her favourite websites. She would manually type in the address into the Safari browser each time until Sarah showed her how to add a bookmark to the site as an icon on the Springboard. Since Sarah's mum was now accessing the site via an icon she would also instinctively swipe left and right with her finger to try and browse next and previous pages as if using an app. For me, this is a perfect example of a successful User Interface design in that it's mechanics are instinctive to us humans. 

<div class="video-container"><iframe title="YouTube video player" width="600" height="480" src="http://www.youtube.com/embed/QU4Akd7yuSA?rel=0" frameborder="0" allowfullscreen></iframe></div>]]></description>
			<content:encoded><![CDATA[<p>Last week I attended <a href="http://geekninjafactory.com/geek-ninja-battle-night-mobile-web-vs-native">Geek Ninja Battle night</a> in Brighton where the subject discussed was web Vs native design for mobile devices. It was a great night with some healthy debate by <a href="http://aralbalkan.com">Aral Balkan</a>, <a href="http://www.stuffandnonsense.co.uk/">Andy Clarke</a>, <a href="http://remysharp.com/">Remy Sharp</a> and <a href="http://www.youknowwhodesign.com/">Sarah Parmenter</a> on the pros and cons of both practices. A comment that stuck in my head was made by iPhone and iPad UI design guru <a href="http://www.youknowwhodesign.com/">Sarah Parmenter</a> who described her mums experience of the UI on the iPad. Sarah&#8217;s mum was described as not being particularly tech savvy but had been using her iPad for a short time to access her favourite websites. She would manually type in the address into the Safari browser each time until Sarah showed her how to add a bookmark to the site as an icon on the Springboard. Since Sarah&#8217;s mum was now accessing the site via an icon she would also instinctively swipe left and right with her finger to try and browse next and previous pages as if using an app. For me, this is a perfect example of a successful User Interface design in that it&#8217;s mechanics are instinctive to us humans. </p>
<div class="video-container"><iframe title="YouTube video player" width="600" height="480" src="http://www.youtube.com/embed/QU4Akd7yuSA?rel=0" frameborder="0" allowfullscreen></iframe></div>
<p>A question was raised as to whether the iPhone and iPad UI techniques had a place in web design and I think it&#8217;s important to consider that web design in a broad term now. Web design shouldn&#8217;t be thought of as designing a site that will be accessed via computer, on a desk, controlled by a mouse and keyboard but should be thought of as the website content being clever enough to work out how it&#8217;s been accessed and render itself accordingly. <a href="http://www.w3.org/TR/css3-mediaqueries/">Media Queries</a> seem to be loved and hated in the industry but as a visual designer I&#8217;m a supporter. I would like my designs to be completely accessible but I&#8217;d also like to completely control their appearance depending on how and when they are viewed.</p>
<p>See here for a full review and photos from <a href="http://aralbalkan.com/3781">Geek Ninja Battle Night</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.burning.me/2011/03/the-iphone-and-ipad-user-interface-have-got-it-right/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

