<?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>PSDFan &#187; Claire Roper</title>
	<atom:link href="http://psd.fanextra.com/author/claireroper/feed/" rel="self" type="application/rss+xml" />
	<link>http://psd.fanextra.com</link>
	<description>Just another WordPress site</description>
	<lastBuildDate>Thu, 05 May 2016 13:19:59 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0.3</generator>
		<item>
		<title>25 Portfolio Sites That Are Boldly Ignoring Design Trends</title>
		<link>http://psd.fanextra.com/articles/25-portfolio-sites-that-are-boldly-ignoring-design-trends/</link>
		<comments>http://psd.fanextra.com/articles/25-portfolio-sites-that-are-boldly-ignoring-design-trends/#comments</comments>
		<pubDate>Fri, 21 Jun 2013 16:39:47 +0000</pubDate>
		<dc:creator>Claire Roper</dc:creator>
				<category><![CDATA[Articles]]></category>
		<category><![CDATA[Inspiration]]></category>

		<guid isPermaLink="false">http://psd.fanextra.com/?p=44712</guid>
		<description><![CDATA[As designer's it can be really easy for us to be sucked into design trends. What is noticeable is how the truly creative designers out there boldly defy whatever latest trend is popular, and instead forge their own way, pushing their own unique sense of style. This post celebrates the designers who use design to convey their personality, their flair for visuals and their broad range of talents. ]]></description>
			<content:encoded><![CDATA[<h2>25 Portfolio Sites That Are Boldly Ignoring Design Trends</h2>
<p>As designer&#8217;s it can be really easy for us to be sucked into design trends. For example the recent trend for <a href="http://psd.fanextra.com/articles/flat-design-trend/">flat design</a> has seen thousands of websites take on this new style. However, whilst it&#8217;s important to evolve our designs, following the latest trend can result in a sea of websites all looking the exact same!</p>
<p>What is noticeable is how the truly creative designers out there boldly defy whatever latest trend is popular, and instead forge their own way, pushing their own unique sense of style.</p>
<p>This post celebrates the designers who use design to convey their personality, their flair for visuals and their broad range of talents. None of the designs in this list are particularly similar, as they are all beautifully unique.</p>
<p>Take some inspiration today and find some balance in your design life.</p>
<div class="serial-box">
<em>It&#8217;s important to be aware of latest trends and learn from them, but more important to find your own personal style.</em></p>
<p><strong><a href="http://clicktotweet.com/40Wtu">[Tweet This Quote]</a></strong>
</div>
<h2><a href="http://olegpostnikov.ru/">Oleg Postnikov</a></h2>
<p>This site, created by designer Oleg Postnikov, is a bold declaration of his aesthetic and design philosophy. Using typography, simple icons in a single bright colour, and an unusual, asymmetrical layout, he demonstrates a preference for illustration and a dedication to modernity. </p>
<p><a href="http://olegpostnikov.ru/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout1.jpg"/></a></p>
<h2><a href="http://www.betatakaki.com/">Beta Takaki</a></h2>
<p>This site takes an almost opposite approach to the one above. It features a large photograph and a small, simple font. Washed-out greys make up most of the colour palette, creating a calm, minimalist atmosphere. Like the site above, however, this site too is unmistakably modern. </p>
<p><a href="http://www.betatakaki.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout2.jpg"/></a></p>
<h2><a href="http://www.ohlookawebsite.com/">Benjamin Sheppard</a></h2>
<p>Welsh web designer Benjamin Sheppard created this site to showcase not only his skill in design but also his skill in front-end developing. The home page of this site is simple, but by asking the user’s name, it creates a sense of small-town hospitality. Clicking through, the user is greeted by name and paid a compliment, crystallising the sense of old-fashioned good manners. The soft colours and simple layout further enforce the feeling of friendliness and ease. </p>
<p><a href="http://www.ohlookawebsite.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout3.jpg"/></a></p>
<h2><a href="http://www.graydenpoper.com/">Grayden Poper</a></h2>
<p>Like the others in this list, interactive designer Grayden Poper built his portfolio site to showcase his personality as a designer and his projects. He does this in a completely individual way, opening his site with faceless images of things he wanted to do when he was a boy. Scrolling down, the colour palette and mosaics made from triangles have an unexpected effect: they create a unity between the portfolio website design and the designs of his example works. </p>
<p><a href="http://www.graydenpoper.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout4.jpg"/></a></p>
<h2><a href="http://www.thinkluke.com/">Think Luke</a></h2>
<p>The image below doesn’t really do the website justice: when the viewer moves the cursor around the screen, the main image – in this example, the aeroplanes – moves around independently of the background, creating a cool, interactive 3-D effect. The sensation of movement makes the design all the more dynamic. </p>
<p><a href="http://www.thinkluke.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout5.jpg"/></a></p>
<h2><a href="http://ev4n.com/">Evan</a></h2>
<p>This website also uses independently moving layers to create a 3-D effect. It is more subtly done here, though. Paper cranes flutter around the head, creating a light, surreal feeling. The colours and fonts further emphasise the lightness and femininity of the main image, creating an elegant space in which to showcase the work. </p>
<p><a href="http://ev4n.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout6.jpg"/></a></p>
<h2><a href="http://www.qaissarhan.com/">Qais Sarhan</a></h2>
<p>This website is both simple and edgy. The image on the front page just has two links, embedded in the image. Clicking on the man causes a box to pop up, and it contains links to his blog, biography and social media profiles. One of the shapes in the middle of the images contains a link to a contact form. It is restrained but also shows a sophisticated understanding of the principles of web design and interactivity. </p>
<p><a href="http://www.qaissarhan.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout7.jpg"/></a></p>
<h2><a href="http://www.ianjamescox.com/">Ian James Cox</a></h2>
<p>This website is instantly fun and charming, making it a great introduction to Ian James Cox’s design style. Clicking on one of the names at the left causes the site to fly around, landing on an image drawn for the client. Almost all of his designs involve his trademark style of illustration, but they also show how he shapes the illustrations to fit the style of the client and the content they have. In that way, it is an ideal portfolio website, showcasing both his signature style and how adaptable he is. </p>
<p><a href="http://www.ianjamescox.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout8.jpg"/></a></p>
<h2><a href="http://gregory.sujkowski.fr/">Gregory Sujkowski</a></h2>
<p>Gregory Sujkowski included a graphic of a computer dialog box on his site. Mimicking the look of a Mac, the box quickly flashes through images of his projects. The single-page site is simple, with just one or two short sentences per section. The result is minimalist, focused and concise, letting the design work do the real talking. </p>
<p><a href="http://gregory.sujkowski.fr/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout9.jpg"/></a></p>
<h2><a href="http://www.denisechandler.com/">Denise Chandler</a></h2>
<p>Most typography is minimalist and serious. This website demonstrates how whimsical typography can be. The blue tones, hand-drawn feel and the mix of fonts really seems to demonstrate the way Denise Chandler works and how much like a party it could be collaborating with her. </p>
<p><a href="http://www.denisechandler.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout10.jpg"/></a></p>
<h2><a href="http://www.thibaud.be/#">Thibaud</a></h2>
<p>This site shows that colour accents don’t need to be silly or overly feminine. The textured background in dark grey and the grid pattern are undoubtedly masculine, and the colours pop without being jarring. The overall effect is sophisticated with a modern colour palette. </p>
<p><a href="http://www.thibaud.be/#"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout11.jpg"/></a></p>
<h2><a href="http://www.arunsfolio.com/">Arun</a></h2>
<p>This site looks simple enough at first glance: it has a bold, unusual background colour, it has a mix of fonts and hand-drawn elements, and it has a typical navigation function at the top. Moving the cursor around the screen causes all the links to dance around the page. This little Easter egg turns the site from a simple yet impactful one into one that is encourages interaction and engagement, which is what every company wants in their website. </p>
<p><a href="http://www.arunsfolio.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout12.jpg"/></a></p>
<h2><a href="http://andrevv.com/">Andrevv</a></h2>
<p>Andrew McCarthy is an interactive designer, and his site looks a little plain at first. Like the one above, however, it has some unexpected secrets. Scroll down the page, and the cat image begins to run in place as the content of the site moves past in the background. The site loops continuously, so the cat never has to stop running. This of course makes the site almost endlessly entertaining. </p>
<div class="serial-box">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0028189720044148";
/* PSDFAN Laptop */
google_ad_slot = "6867663924";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<p><a href="http://andrevv.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout13.jpg"/></a></p>
<h2><a href="http://www.narrowdesign.com/">Nick Jones</a></h2>
<p>Nick Jones has a site that shows off his responsive design skills. Instead of dragging the scroll bar down, visitors drag the entire page to see what he can do. In fact, the bar on the right-hand side pops up with a message saying it’s only an indicator when you roll over it. The result, thanks to the responsiveness and the overall design of the site, is the impression of a site on the cutting edge of cool. </p>
<p><a href="http://www.narrowdesign.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout14.jpg"/></a></p>
<h2><a href="http://simonfosterdesign.com/home/">Simon Foster</a></h2>
<p>Simon Foster clearly appreciates the science of design. The image and the fonts call to mind old-school biological illustrations. He eschews trends and fads for classic elements like diagrams, a black and white colour palette and a simple, right-aligned paragraph. This roots the website in the basics of great design, while the fonts and the touches of red keep the design up to date. </p>
<p><a href="http://simonfosterdesign.com/home/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout15.jpg" /></a></p>
<h2><a href="http://caseybritt.com/">Casey Britt</a></h2>
<p>Whilst it works on regular browsers, this site is optimally designed to be viewed on an iPad. On that device, users can swipe left or right to see the projects Casey Britt has worked on, and then swipe down to see more information. This gives him the space to get into the detail of how he and his design agency created the sites he features. The design of the site, meanwhile, is tasteful and modern, but it is also anonymous, making it clear that he will be able to turn his hand to almost any design brief. </p>
<p><a href="http://caseybritt.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout16.jpg"/></a></p>
<h2><a href="http://jimramsden.com/">Jim Ramsden</a></h2>
<p>Jim Ramsden was clearly a designer with a dual approach to his craft: on the one hand meticulous and well-planned, on the other, free and open. He addresses this duality with the design of his site, and not just in the main image. Throughout the site, fonts that nod to digital displays and textbooks sit nicely alongside modern colours and icons. </p>
<p><a href="http://jimramsden.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout17.jpg"/></a></p>
<h2><a href="http://www.richbrown.info/">Rich Brown</a></h2>
<p>This website takes all the work out of a portfolio site. It has an image carousel that rotates through four of Rich Brown’s latest works. He plays with the way the projects are represented in the images, ensuring that although they range from photographs like the one above to delicate illustrations, the overall feel remains consistent. </p>
<p><a href="http://www.richbrown.info/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout18.jpg"/></a></p>
<h2><a href="http://www.rickanddrew.com/">Rick and Drew</a></h2>
<p>Many designers work as part of a team, but how can are they supposed to demonstrate the individuals that make up the team? Rick and Drew did it by taking a short video clip of both of them standing there, occasionally looking to the side, and splicing their images together to create a moving background that is both unified and a literal look at both of them individually. </p>
<p><a href="http://www.rickanddrew.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout19.jpg"/></a></p>
<h2><a href="http://sawyerhollenshead.com/">Sawyer Hollenshead</a></h2>
<p>Designers always say less is more, and no one shows that off to greater effect than Sawyer Hollenshead. The front page of the portfolio site is just a series of images of his projects. Visitors can click on an image to get slightly more information (basically just the client name and a link), or they can click on one of four ghostly icons in each corner to see his photographs, writing or biography or return to the home page. </p>
<p><a href="http://sawyerhollenshead.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout20.jpg"/></a></p>
<h2><a href="http://willdesignfor.co.uk/">Andrew Jackson</a></h2>
<p>Giving the above example a run for its minimalist money, designer Andrew Jackson’s portfolio site only shows one example at a time. Viewers of his site must use their arrow keys to switch from one project to another. It creates the impression of a site designed to slow the visitor down to encourage deliberate thoughtfulness. The soft grey colour palette maintains the meditative tone of the site. </p>
<p><a href="http://willdesignfor.co.uk/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout21.jpg"/></a></p>
<h2><a href="http://www.nebbie.net/">Shaun</a></h2>
<p>Starting with a pun for a title and not letting up from there, this site could not be accused of being subtle. Shaun Kosijer’s enthusiasm for design explodes off the screen in a riot of graphics, textures, colours and fonts. This website should not work in theory, but it is impossible not to get swept up in the giddiness of the site. </p>
<p><a href="http://www.nebbie.net/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout22.jpg"/></a></p>
<h2><a href="http://www.oasim.com/">Oasim</a></h2>
<p>This site has some of the humour and riotous colour of the above example, but it shows off Oasim Karmieh’s work much more softly. Still, the design is deceptively simple. The shapes bow when you roll over them, revealing their content, and a business card in the corner of the screen occasionally bounces into view, urging the user to click on it. All of these add up to a site that is both fun and restrained. </p>
<p><a href="http://www.oasim.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout23.jpg"/></a></p>
<h2><a href="http://www.davidbastian.cl/">David Bastain</a></h2>
<p>A lot of creatives prefer to have portfolio websites that show off their work with a mosaic of images. David Bastian takes this idea and pushes it a little further. Not content to simply display images of his work, he takes high-quality photographs of his work on devices, puts them on a simple background, then pops them into the layout. The effect is one of a collage created by a computer, marrying the digital with the traditional. </p>
<p><a href="http://www.davidbastian.cl/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout24.jpg"/></a></p>
<h2><a href="http://mattluckhurst.com/">Matt Luckhurst</a></h2>
<p>Matt Luckhurst clearly loves colour, but he knows how to use colours elegantly. He takes a delicate font, leaves in plenty of white space, and adds touches of Kandinsky-esque shapes and squiggles to create an impression of refined celebration. When visitors roll over letters, though, his projects explode out of the site, adding a sense of excitement to what could in other hands be an overly simple site. </p>
<p><a href="http://mattluckhurst.com/"><img src="http://psd.fanextra.com/wp-content/uploads/2013/06/weblayout25.jpg"/></a></p>
<h2>What Do You Think?</h2>
<p>Do you think design trends are over-rated? How do you work to find your own personal sense of style?</p>
<p>Let us know in the comments below.</p>
<div class="serial-box">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-0028189720044148";
/* PSDFAN Laptop */
google_ad_slot = "6867663924";
google_ad_width = 336;
google_ad_height = 280;
//-->
</script><br />
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
]]></content:encoded>
			<wfw:commentRss>http://psd.fanextra.com/articles/25-portfolio-sites-that-are-boldly-ignoring-design-trends/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
	</channel>
</rss>
