<?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>Inspect Element &#187; trends</title>
	<atom:link href="http://inspectelement.com/tag/trends/feed/" rel="self" type="application/rss+xml" />
	<link>http://inspectelement.com</link>
	<description>Web Design &#38; Development Blog</description>
	<lastBuildDate>Wed, 08 Sep 2010 15:30:15 +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>Recent Web Designs that Don&#8217;t Follow Recent Trends</title>
		<link>http://inspectelement.com/articles/recent-web-designs-that-dont-follow-recent-trends/</link>
		<comments>http://inspectelement.com/articles/recent-web-designs-that-dont-follow-recent-trends/#comments</comments>
		<pubDate>Mon, 07 Sep 2009 08:00:35 +0000</pubDate>
		<dc:creator>Tom Kenny</dc:creator>
				<category><![CDATA[articles]]></category>
		<category><![CDATA[trends]]></category>

		<guid isPermaLink="false">http://inspectelement.com/?p=2781</guid>
		<description><![CDATA[Last month I wrote an article on <a href="http://inspectelement.com/articles/why-design-trends-dont-have-to-completely-disappear/">why design trends don't have to completely disappear</a>, explaining why design trends should live on beyond their acceptance. However, we are now starting to see designs that don't follow any popular recent trends. What makes the following examples great is that they stand out from the crowd and are instantly memorable for being unique.]]></description>
			<content:encoded><![CDATA[<p>Last month I wrote an article on <a href="http://inspectelement.com/articles/why-design-trends-dont-have-to-completely-disappear/">why design trends don&#8217;t have to completely disappear</a>, explaining why design trends should live on beyond their acceptance. However, we are now starting to see designs that don&#8217;t follow any popular recent trends. What makes the following examples great is that they stand out from the crowd and are instantly memorable for being unique.</p>
<p><span id="more-2781"></span><strong><a href="http://carsonified.com/">Carsonified</a></strong></p>
<p><a href="http://carsonified.com/"><img class="alignnone size-full wp-image-2085" title="carsonified" src="http://inspectelement.com/wp-content/uploads/2009/08/carsonified.jpg" alt="carsonified" width="560" height="218" /></a></p>
<p>As you can immediately see, Carsonified uses uses the simple concept of two colours. This really allows the content to stand out and become the centrepiece of the design.</p>
<p><img class="alignnone size-full wp-image-2782" title="carsonifiedRed" src="http://inspectelement.com/wp-content/uploads/2009/09/carsonifiedRed.jpg" alt="carsonifiedRed" width="540" height="448" /></p>
<p><img class="alignnone size-full wp-image-2783" title="carsonifiedBlue" src="http://inspectelement.com/wp-content/uploads/2009/09/carsonifiedBlue.jpg" alt="carsonifiedBlue" width="540" height="448" /></p>
<p>The dual colour is continued throughout the site with the background colour changing depending on what page you are view.</p>
<p>This is a very bold approach to design but one that works extremely because of the simplicity. There could have been much more content on there but it seems that they have done a good job of cutting that down to only what is necessary. This simplicity improves the usability because there is a much smaller chance of a user becoming frustrated at having too many options or too much content to wade through.</p>
<h3><a href="http://elliotjaystocks.com/">Elliot Jay Stocks</a></h3>
<p><a href="http://elliotjaystocks.com/"><img class="alignnone size-full wp-image-2788" title="elliotJayStocks" src="http://inspectelement.com/wp-content/uploads/2009/09/elliotJayStocks.jpg" alt="elliotJayStocks" width="560" height="218" /></a></p>
<p>The biggest thing that Elliot&#8217;s site does that certainly isn&#8217;t a trend is alignment, or in this case, misalignment. Alignment still exists, keeping the pages flowing nicely and making them easily scannable too.</p>
<p><img class="alignnone size-full wp-image-2790" title="elliotAlignment" src="http://inspectelement.com/wp-content/uploads/2009/09/elliotAlignment.jpg" alt="elliotAlignment" width="417" height="487" /></p>
<p><img class="alignnone size-full wp-image-2791" title="elliotAlignment2" src="http://inspectelement.com/wp-content/uploads/2009/09/elliotAlignment2.jpg" alt="elliotAlignment2" width="560" height="632" /></p>
<p><img class="alignnone size-full wp-image-2792" title="elliotAlignment3" src="http://inspectelement.com/wp-content/uploads/2009/09/elliotAlignment3.jpg" alt="elliotAlignment3" width="550" height="334" /></p>
<p>The addition of misalignment adds an extra depth to the design, making it more interesting, without looking too messy and unorganised. Consistency is achieved across the whole site so elements don&#8217;t look out of place.</p>
<p><img class="alignnone size-full wp-image-2805" title="elliotBlog" src="http://inspectelement.com/wp-content/uploads/2009/09/elliotBlog.jpg" alt="elliotBlog" width="560" height="300" /></p>
<p>Also, notice how the blog page is laid out with content spanning two columns much like a design of a newspaper of magazine.</p>
<h3><a href="http://madebyfudge.com/">Fudge</a></h3>
<p><a href="http://madebyfudge.com/"><img class="alignnone size-full wp-image-2800" title="fudge" src="http://inspectelement.com/wp-content/uploads/2009/09/fudge.jpg" alt="fudge" width="560" height="218" /></a></p>
<p>To almost all designers, it is clear where fudge has gained their inspiration from. The whole interface is a replication of a photoshop document window complete with working guides!</p>
<p><img class="alignnone size-full wp-image-2802" title="fudgeGuides" src="http://inspectelement.com/wp-content/uploads/2009/09/fudgeGuides.jpg" alt="fudgeGuides" width="339" height="245" /></p>
<p>This is just their holding page while they get their new site up and running so should be one to look forward to.</p>
<h3><a href="http://www.bethere.co.uk/">Be</a></h3>
<p><a href="http://www.bethere.co.uk/"><img class="alignnone size-full wp-image-2810" title="bethere" src="http://inspectelement.com/wp-content/uploads/2009/09/bethere.jpg" alt="bethere" width="560" height="218" /></a></p>
<p>When I received an email from my ISP informing they had redesigned their site I was happy because their old site wasn&#8217;t anything special. Upon seeing the new design, I didn&#8217;t like it but for me it is definitely a &#8216;grower&#8217; as I like it more and more every time I visit. I can understand that it might not be to everyone&#8217;s taste though.</p>
<p><img class="alignnone size-full wp-image-2811" title="bethereTypography" src="http://inspectelement.com/wp-content/uploads/2009/09/bethereTypography.jpg" alt="bethereTypography" width="443" height="309" /></p>
<p><img class="alignnone size-full wp-image-2812" title="bethere2" src="http://inspectelement.com/wp-content/uploads/2009/09/bethere2.jpg" alt="bethere2" width="521" height="203" /></p>
<p><img class="alignnone size-full wp-image-2813" title="bethere3" src="http://inspectelement.com/wp-content/uploads/2009/09/bethere3.jpg" alt="bethere3" width="345" height="214" /></p>
<p>The bright colours do a good job of drawing the visitors&#8217; attention even though it may be a bit garish for some.</p>
<p>I wondered why they had gone from a design that appeals more to a mainstream audience to this. They seem to be going for the geek crowd as it somewhat resembles a <a href="http://en.wikipedia.org/wiki/Bulletin_board_system">BBS</a>.</p>
<h3><a href="http://maxvoltar.com/">Max Voltar</a></h3>
<p><a href="http://maxvoltar.com/"><img class="alignnone size-full wp-image-2759" title="maxVoltar" src="http://inspectelement.com/wp-content/uploads/2009/09/maxVoltar.jpg" alt="maxVoltar" width="560" height="218" /></a></p>
<p>A very simple but pleasing to the eye design using black and white with different shades of grey to add a touch of detail.</p>
<p><img class="alignnone size-full wp-image-2820" title="maxVolarSidebar" src="http://inspectelement.com/wp-content/uploads/2009/09/maxVolarSidebar.jpg" alt="maxVolarSidebar" width="366" height="296" /></p>
<p>Scrolling down while viewing a blog post reveals the logo hidden underneath the header. Very clever technique of using the z-index property in CSS while fixing the sidebar in place. Certainly something you don&#8217;t see very often at all, if ever.</p>
<h3>Simplicity is the Key</h3>
<p>The main thing to take away from this is simplicity. There is a certain beauty about simplicity as well as making websites easier to read, use and navigate. Consider simplifying aspects of your next design as a means of improvement rather than adding more.</p>
]]></content:encoded>
			<wfw:commentRss>http://inspectelement.com/articles/recent-web-designs-that-dont-follow-recent-trends/feed/</wfw:commentRss>
		<slash:comments>17</slash:comments>
		</item>
		<item>
		<title>Why Design Trends don&#8217;t have to Completely Disappear</title>
		<link>http://inspectelement.com/articles/why-design-trends-dont-have-to-completely-disappear/</link>
		<comments>http://inspectelement.com/articles/why-design-trends-dont-have-to-completely-disappear/#comments</comments>
		<pubDate>Thu, 20 Aug 2009 20:28:30 +0000</pubDate>
		<dc:creator>Tom Kenny</dc:creator>
				<category><![CDATA[articles]]></category>
		<category><![CDATA[trends]]></category>
		<category><![CDATA[web design]]></category>

		<guid isPermaLink="false">http://inspectelement.com/?p=1840</guid>
		<description><![CDATA[Web design trends come and go but when one comes around you can't miss it. That's the nature of trends in the web design industry, with the ability to release something that the whole world can see immediately, designers are able to push their designs live very quickly which aides in popularising a trend.]]></description>
			<content:encoded><![CDATA[<p>Web design trends come and go but when one comes around you can&#8217;t miss it. That&#8217;s the nature of trends in the web design industry, with the ability to release something that the whole world can see immediately, designers are able to push their designs live very quickly which aides in popularising a trend.</p>
<p>A trend is defined in the dictionary as:</p>
<blockquote><p>&#8220;a general direction in which something is developing or changing&#8221;</p></blockquote>
<p>Usually most designers follow these trends resulting in a number of websites looking very similar in style.</p>
<p>Ever since I saw the guys From the Couch stating that &#8216;<a href="http://www.from-the-couch.com/post.cfm/title/the-letterpress-trend-has-to-go">the letterpress trend has to go</a>&#8216;, I thought to myself that it still could have its place in design. Perhaps I wasn&#8217;t as bored of it as they clearly are.</p>
<p><span id="more-1840"></span><strong>Recent Trends</strong></p>
<p>These are some trends that have popped up over the last few years with examples of how the techniques are being used today but with much more dignity than before.</p>
<h4>That Web 2.0 Look</h4>
<p>We all know what this looks like, I don&#8217;t even need to show any examples because it really was everywhere a couple of years ago. The &#8216;web 2.0&#8242; look could be seen a mile away consisting of:</p>
<ul>
<li>&#8216;shiny&#8217; elements</li>
<li>drop shadows</li>
<li>reflections</li>
<li>gradients</li>
</ul>
<p>The main problem is that they were over used on almost every site that followed the trend. When used sparingly, these design properties can benefit a design and really work well. Some examples of these techniques use are used well in web design today:</p>
<h5><a href="http://last.fm">Last.fm</a></h5>
<p><a href="http://last.fm"><img class="alignnone size-full wp-image-2289" title="lastfm" src="http://inspectelement.com/wp-content/uploads/2009/08/lastfm.jpg" alt="lastfm" width="560" height="218" /></a></p>
<p>Last.fm uses the shiny look in for the headings in their radio player and it doesn&#8217;t look out of place nor does it immediately bring back memories of the web 2.0 look because the use is much more subtle.</p>
<h5><a href="http://icondock.com/">Icon Dock</a></h5>
<p><a href="http://icondock.com/"><img class="alignnone size-full wp-image-2292" title="icondock" src="http://inspectelement.com/wp-content/uploads/2009/08/icondock.jpg" alt="icondock" width="560" height="218" /></a></p>
<p>Icon Dock uses shadows on a number of elements and because of the subtlety it isn&#8217;t immediately noticeable but adds a nice touch of detail.</p>
<h5><a href="http://www.apple.com/uk/iphone/">Apple</a></h5>
<p><a href="http://www.apple.com/uk/iphone/"><img class="alignnone size-full wp-image-2296" title="apple" src="http://inspectelement.com/wp-content/uploads/2009/08/apple1.jpg" alt="apple" width="560" height="218" /></a></p>
<p>Apple&#8217;s use of reflections is fairly subtle and is only used on their products which makes them stand out more. A very effective use of a technique that used to be frowned upon not too long ago.</p>
<h5><a href="http://www.appweek.ly/">App Weekly</a></h5>
<p><a href="http://www.appweek.ly/"><img class="alignnone size-full wp-image-2319" title="appweekly" src="http://inspectelement.com/wp-content/uploads/2009/08/appweekly.jpg" alt="appweekly" width="560" height="218" /></a></p>
<p>Notice the use of gradients to give the illusion of depth.</p>
<h4>Wood Texture</h4>
<p>One of the most overused styles was to place a repeating wood texture as a big background. It started getting to a point where its use just became lazy and unimaginative.</p>
<h5><a href="http://www.komodomedia.com">Komodo Media</a></h5>
<p><a href="http://www.komodomedia.com"><img class="alignnone size-full wp-image-2299" title="komodomedia" src="http://inspectelement.com/wp-content/uploads/2009/08/komodomedia.jpg" alt="komodomedia" width="560" height="218" /></a></p>
<p>Komodo Media uses wood in a fun and creative way. Little details such as the cracks alongside the search box are nice touches too.</p>
<h4>Letterpress</h4>
<p>There&#8217;s no denying it, the letterpress effect looks great, <a href="http://www.beastpieces.com/">especially in print</a> where the trend origination from but it has now reached saturation point.</p>
<h5><a href="http://www.365daysofastronomy.com/">365 Days of Astronomy</a></h5>
<p><a href="http://www.365daysofastronomy.com/"><img class="alignnone size-full wp-image-2307" title="365days" src="http://inspectelement.com/wp-content/uploads/2009/08/365days.jpg" alt="365days" width="560" height="218" /></a></p>
<p>365 Days of Astronomy reserves the letterpress effect for their logo only. allowing their branding to really stand out.</p>
<h4>Rounded Corners</h4>
<p>Rounded corners were all the rage not too long ago. In a way they still are but have become much better integrated into designs. Again the problem was that they were simply overused.</p>
<h5><a href="http://leihu.com/">Leihu</a></h5>
<p><a href="http://leihu.com/"><img class="alignnone size-full wp-image-2323" title="leihu" src="http://inspectelement.com/wp-content/uploads/2009/08/leihu.jpg" alt="leihu" width="560" height="218" /></a></p>
<p>Here we see a simple use of rounded corners that fits well into the design.</p>
<h3>Conclusion</h3>
<p>As you can see it is perfectly fine to re-use old trends just not in the manner that they were used when they became too popular. The biggest point to take from this is that trends that outstay their welcomes are techniques that are simply overused. Scaling things back can make old trends acceptable again.</p>
<h3>The Future of Trends</h3>
<p>As time goes on we are seeing more and more unique approached to web design so I believe that we are becoming less annoyed by design trends because of the variety. As Nick La over at Web Designer Wall pointed out over a year ago, there were a <a href="http://www.webdesignerwall.com/trends/2008-design-trends/">variety of different trends in 2008</a>. At the beginning of the year, Smashing Magazine <a href="http://www.smashingmagazine.com/2009/01/14/web-design-trends-for-2009/">identified</a> the <a href="http://www.smashingmagazine.com/2009/01/21/current-web-design-trends-for-2009/">trends</a> moving into this year.</p>
<p>I am excited to see what the future holds and rather than predict the next trend I think that a variety of styles will continue to move design forward. Overall, web designers are getting more creative and experimental especially with technologies such as CSS3 and <a href="http://typekit.com/">Typekit</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://inspectelement.com/articles/why-design-trends-dont-have-to-completely-disappear/feed/</wfw:commentRss>
		<slash:comments>10</slash:comments>
		</item>
	</channel>
</rss>
