Pencil - Scoopz

10 Simple and Elegant Concept Redesigns

<div dir="ltr" style="text-align: left;" trbidi="on"><strong> </strong><img alt="" class="home-feature-img" data-src-retina="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/google-redesign2.jpg" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/google-redesign2.jpg" /><br /><strong>User interface redesigns are a great way to show off your  design style and skills, particularly if you can build on and visually  streamline a product in a logical and beneficial manner. Today, many  designers are featuring concept redesigns as part of their portfolio and  a large amount of them opt for flat variants on popular interfaces.</strong><br /> Today we have featured these app and interface concept redesigns for your inspiration and enjoyment.<br /> <hr class="separator" /><h5>Ikea by <a href="http://www.behance.net/Rengised" id="profile-username-text">Alex Martinov</a></h5><div style="text-align: center;"><img alt="fe71d130553e20c8eb39f168c15d07ce" class="aligncenter  wp-image-4050" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/fe71d130553e20c8eb39f168c15d07ce.png" /></div><hr class="separator" /><h5>Instagram by <a href="http://www.shadmanahmed.com/">Shadman Ahmed</a></h5><hr class="space" /><div style="text-align: center;"><img alt="instagram1" class="aligncenter  wp-image-4031" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/instagram1.jpg" /></div><div style="text-align: center;"><img alt="instagram2" class="aligncenter  wp-image-4030" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/instagram2.jpg" /></div><div style="text-align: center;"><img alt="instagram3" class="aligncenter  wp-image-4029" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/instagram3.jpg" /><img alt="instagram4" class="aligncenter  wp-image-4028" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/instagram4.jpg" /></div><div style="text-align: center;"><img alt="instagram5" class="aligncenter  wp-image-4027" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/instagram5.jpg" /></div><div style="text-align: center;"><img alt="72eeef8a4c0bf0739f4753f867c73d04" class="aligncenter  wp-image-4032" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/72eeef8a4c0bf0739f4753f867c73d04.jpg" /></div><div style="text-align: center;"><img alt="e39bedb256dcfa5602bf1fc97bf1373b" class="aligncenter  wp-image-4033" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/e39bedb256dcfa5602bf1fc97bf1373b.jpg" /></div><hr class="separator" /><h5>WhatsApp by <a href="http://www.moeslah.com/">Moe Slah</a></h5><hr class="space" /><div style="text-align: center;"><img alt="whatsapp" class="aligncenter  wp-image-4034" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/whatsapp.jpg" /></div><hr class="separator" /><h5>Google by <a href="http://www.behance.net/shaltoni">Ayman Shaltoni</a></h5><hr class="space" /><div style="text-align: center;"><img alt="google-redesign" class="aligncenter  wp-image-4064" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/google-redesign.jpg" /></div><hr class="separator" /><h5>Dribble by <a href="http://www.moeslah.com/">Moe Slah</a></h5><hr class="space" /><div style="text-align: center;"><img alt="dribble" class="aligncenter  wp-image-4036" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/dribble.jpg" /></div><hr class="separator" /><h5>Google+ by <a href="http://www.shadmanahmed.com/">Shadman Ahmed</a></h5><hr class="space" /><div style="text-align: center;"><img alt="3844689e65f06887840b8e789bd6c8fb" class="aligncenter  wp-image-4037" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/3844689e65f06887840b8e789bd6c8fb.jpg" /></div><div style="text-align: center;"><img alt="a9842cb3d7e4cd32f23c857cd7099e33" class="aligncenter  wp-image-4040" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/a9842cb3d7e4cd32f23c857cd7099e33.jpg" /></div><div style="text-align: center;"><img alt="fc65194c9fbe93b4d114e9f1a95c6f05" class="aligncenter  wp-image-4041" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/fc65194c9fbe93b4d114e9f1a95c6f05.jpg" /></div><div style="text-align: center;"><img alt="99d546784792bd035a965674a6680612" class="aligncenter  wp-image-4042" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/99d546784792bd035a965674a6680612.jpg" /></div><div style="text-align: center;"><img alt="7cf03f5c6984284b28b7492d8382df7b" class="aligncenter  wp-image-4038" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/7cf03f5c6984284b28b7492d8382df7b.jpg" /></div><hr class="separator" /><h5>Viber by <a href="http://www.moeslah.com/">Moe Slah</a></h5><hr class="space" /><div style="text-align: center;"><img alt="dd5a722232799d777f11f1ba2b4a4a7b" class="aligncenter  wp-image-4043" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/dd5a722232799d777f11f1ba2b4a4a7b.jpg" /></div><br /> <hr class="separator" /><h5>Spotify by <a href="http://www.behance.net/gcdesign91" id="profile-username-text">Gorka Corral</a></h5><hr class="space" /><div style="text-align: center;"><img alt="394f994eb23ec3c69d3dcc55897f9885" class="aligncenter  wp-image-4044" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/394f994eb23ec3c69d3dcc55897f9885.jpg" /></div><br /> <hr class="separator" /><h5>Ebay by <a href="http://www.behance.net/CraigJohnson" id="profile-username-text">Craig Johnson</a></h5><hr class="space" /><div style="text-align: center;"><img alt="b4a6921abb26483857acb6844b3dd551" class="aligncenter  wp-image-4045" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/b4a6921abb26483857acb6844b3dd551.png" /></div><div style="text-align: center;"><img alt="b6f503c347a7705439cfa92d8ba55361" class="aligncenter  wp-image-4046" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/b6f503c347a7705439cfa92d8ba55361.png" /></div><div style="text-align: center;"><img alt="5ff43efd8c66be235f8b79cbb0dadf1e" class="aligncenter  wp-image-4047" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/5ff43efd8c66be235f8b79cbb0dadf1e.png" /></div><div style="text-align: center;"><img alt="42094c165d8dee0dc36b6f1b204d4ddd" class="aligncenter  wp-image-4048" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/42094c165d8dee0dc36b6f1b204d4ddd.png" /><img alt="817db7500be5083147d648808b9633ed" class="aligncenter  wp-image-4049" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/817db7500be5083147d648808b9633ed.png" /></div><hr class="separator" /><h5>Twitter by <a href="http://www.behance.net/roodic">Rodrigo Nery</a></h5><hr class="space" /><div style="text-align: center;"><img alt="1f4dd2c805f5de2681cd5789f81c2a0a" class="aligncenter  wp-image-4058" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/1f4dd2c805f5de2681cd5789f81c2a0a.png" /></div><div style="text-align: center;"><img alt="de8bc406c6aed3cad44b35873de6dda8" class="aligncenter  wp-image-4059" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/de8bc406c6aed3cad44b35873de6dda8.png" /></div><div style="text-align: center;"><img alt="20627db38f807c81c7e2aa1a19788508" class="aligncenter  wp-image-4060" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/20627db38f807c81c7e2aa1a19788508.png" /></div><div style="text-align: center;"><img alt="a4a10d108178e38aebea769bdec53fcd" class="aligncenter  wp-image-4061" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/a4a10d108178e38aebea769bdec53fcd.png" /></div><div style="text-align: center;"><img alt="7d83a858910a00d082df21de471e8278" class="aligncenter  wp-image-4062" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/06/7d83a858910a00d082df21de471e8278.png" /></div><hr class="separator" /><em><strong>Which of these concept redesigns looks most promising? Do  you think concept work is a good way to promote your own style and  design? Let us know in the comments section below.</strong></em><br /></div>

10 Simple and Elegant Concept Redesigns

User interface redesigns are a great way to show off your design style and skills, particularly if you can build on and visually streaml...

+ Read more »

Free Download: Dripicons Line Icons

<div dir="ltr" style="text-align: left;" trbidi="on"><a href="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/webicons-600x400.jpg" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img alt="" border="0" class="home-feature-img" data-src-retina="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/webicons.jpg" height="426" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/webicons-600x400.jpg" width="640" /></a><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><strong>Ever since the release of iOS7, line-icons have become  increasingly popular. So with release of the iPhone 5s and 5c yesterday,  we thought it natural to share this free download.</strong><br /> The iconset uses the popular line-icon style but with a thicker  stroke than usual, while the addition of rounded edges adds a nice  touch.<br /> The icon set is available in PSD, AI, PDF, SVG and WebFont. Great for web designers.<br /> <hr class="separator" /><div style="text-align: center;"><img alt="520b7057ad8160ba68d02c36fa43f0ef" class="aligncenter  wp-image-6722" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/520b7057ad8160ba68d02c36fa43f0ef.jpg" /></div><div style="text-align: center;"><img alt="dripicons-2" class="aligncenter  wp-image-6723" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/dripicons-2.jpg" /></div> <a class="btn sunset small" href="http://designerfuel.tumblr.com/post/57952916129/dripicons-free-iconset-available-formats-psd" target="_blank">Download</a><br /> <hr class="separator" /><em><strong>What do you think of line icons? Are you using webfont icons on your site? Let us know in the comments section below.</strong></em></div>

Free Download: Dripicons Line Icons

Ever since the release of iOS7, line-icons have become increasingly popular. So with release of the iPhone 5s and 5c yesterday, we thought...

+ Read more »

Regular Web Design Code Visualized Into Brilliant Quote Posters

Regular Web Design Code Visualized Into Brilliant Quote Posters

Quotation posters are so common these days, and often they can become boring and repetitive. But this set of posters cleverly use HTML t...

+ Read more »

Using Color Swatches in Photoshop

Using Color Swatches in Photoshop

Today we will be talking about Photoshop color swatches. How to use them, where to get them and why you should be using them. Now this may...

+ Read more »

5 Essential Tips For Creating High Quality Flat Design

<div dir="ltr" style="text-align: left;" trbidi="on"><img alt="" class="home-feature-img" data-src-retina="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/free-UI-Kit-29.jpg" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/free-UI-Kit-29-800x400.jpg" /><br /><br /><strong>As a design savvy person you’ve most likely come across the  the term flat design somewhere in your online activity. Whether it be a  website, an icon set, a poster or user-interface, flat design is  everywhere.</strong><br /> A large amount of people are calling flat design a trend, something  that will come and go relatively quickly. Whether this is the case or  not, its important for designers to stay up to date and on top of  trends. Good designers don’t refuse the existence or the acceptance of  something they don’t like. Instead, they continually evolve their  skillet with trends insuring their individual style stays relevant.<br /> There are a number of articles on the web showing great examples of  flat design, inspiration here, examples there. However there are very  few explaining exactly how to achieve a flat design look.<br /> <div class="blockquote">		<blockquote>			<q>Flat Design is somewhat difficult to define as it doesn’t really  refer to one single concept. Instead it can be thought of as number of  concepts and practices that together, makeup an umbrella term. -Joseph Howard, pencilscoop.com 		</q></blockquote></div>Like any design theme, Flat Design relies on principles and we have  narrowed these down to 6 basic rules that should be followed.<br /> <hr class="separator" /><strong>Here is a quick recap of what we will be looking at.</strong><br /> <div class="bullet"><ul><li>Color Choices</li><li>Typography</li><li>Icons</li><li>Images</li><li>Space</li><li>Do Nots</li></ul></div><hr class="separator" /><h3>Color Choices</h3>Ok so first things first, let’s look into color palettes. There are a  lot of people out there saying that flat design must use bold colors.  This is untrue. Flat Design colors are not always bold, often they are  quite the opposite. Often colors are not solid hue’s but rather off  shades, with a significant amount of lightness, gray and lower than  usual saturation levels. You will often find that pastel shades work  quite well also. Lastly, solid bold colors can be used are are used with  success, take the Windows 8 design theme for example.<br /> To find out more about color palettes, read our tips on <a href="http://www.pencilscoop.com/2013/09/weekly-design-tip-photoshop-color-swatches/" title="Weekly Design Tip: Photoshop Color Swatches">Photoshop Color Swatches</a>.<br /> For a good list of free color palette resources check out this article <a href="http://www.pencilscoop.com/2013/04/10-quality-color-palette-resources-for-designers/" title="10 Quality Color Palette Resources For Designers">here</a>.<br /> Here I have created a color palette that works well in Flat Design. Save it your computer and use it for future reference.<br /> <div style="text-align: center;"><img alt="flat-color-palette" class="aligncenter  wp-image-6951" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/flat-color-palette.jpg" /></div><hr class="separator" /><h3 style="text-align: left;">Typography</h3>Ok, typography and Flat Design, another important consideration.  Typography is a massive subject, with an almost endless amount of  information and details. We have written, significantly about typography  in the past, but for Flat Design there are some other considerations.<br /> Firstly, most traditional serif fonts will not look good and are not  well suited to flat design. Having said that, feel free to use  Slab-Serif typefaces like Rockwell or Sanchez. If you really want your  flat design to look authentic, go for some modern, clean, Sans-Serif  fonts.<br /> <strong> Some good fonts to use are:</strong><br /> <div class="bullet"><ul><li>Helvetica Neue</li><li>Myriad Pro</li><li>Open Sans</li><li>PT Sans</li><li>Proxima Nova</li><li>Eight-One</li><li>Continuum</li><li>Melbourne</li><li>Compass</li><li>Aller</li><li>Aleo</li></ul></div><div style="text-align: center;"><img alt="compass-font" class="aligncenter  wp-image-6960" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/compass-font.jpg" /></div><strong>If you would like to know more about topography, check out our other articles:</strong><br /> <div class="bullet"><ul><li><a href="http://www.pencilscoop.com/2013/04/an-intoduction-to-typography-basics/" title="An Introduction to Typography Basics">An Introduction to Typography Basics</a></li><li><a href="http://www.pencilscoop.com/2013/04/a-comprehensive-guide-to-font-pairing/" title="A Comprehensive Guide To Font Pairing">A Comprehensive Guide To Font Pairing</a></li><li><a href="http://www.pencilscoop.com/2013/09/30-fresh-and-modern-font-combinations/" title="30+ Fresh and Modern Font Combinations">30+ Fresh and Modern Font Combinations</a></li><li><a href="http://www.pencilscoop.com/2013/07/top-50-quality-free-fonts-for-designers/" title="Top 50+ Quality Free Fonts for Designers">50+ Best Quality Free Fonts for Designer</a></li></ul></div><hr class="separator" /><h3>Icons</h3>Icons make up an important part of any design, whether they are  glyphs, symbols or large logos. In flat design it’s important that your  choice of icons reflect your design theme. Over-sized icons can work  well, as well as smaller glyphs. One thing, ensure your icons have no  gradients and contain either completely sharp edges or strong rounded  ones.<br /> For a good list of icon pack resources check out out <a href="http://www.pencilscoop.com/2013/07/ultimate-collection-of-free-glyph-icon-packs-for-designers/" title="Ultimate Collection of Free Glyph Icon Packs For Designers">Ultimate Collection of Free Glyph Icons</a>.<br /> <div style="text-align: center;"><img alt="flat-icons-example" class="aligncenter size-full wp-image-6958" height="400" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/flat-icons-example.jpg" width="600" /></div><hr class="separator" /><h3>Images</h3>If you are going to include images, a good tip is to ensure they are  filtered or stylized. Often many flat design websites use full width  images that stretch the entire page. Image borders are a big no no in  flat design, so ensure your images cut off directly without any borders.<br /> <div style="text-align: center;"><img alt="app-screen-mock-up3" class="aligncenter  wp-image-6800" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/app-screen-mock-up3.jpg" /></div><hr class="separator" /><h3>Space</h3>Using space correctly is hard thing to get right, too much empty  space and your design will look bare. Too little and you run the risk of  making it look cluttered. It’s always easier to subtract rather than  ad, so a good practice is to include all the elements you want, and then  subtract until you are left with only the essentials.<br /> Traditionally, Flat Design uses large amounts of open space, so try to keep your designs nice and broad.<br /> <div style="text-align: center;"><img alt="website space" class="aligncenter size-full wp-image-6959" height="400" src="http://cdn.pencilscoop.netdna-cdn.com/wp-content/uploads/2013/09/website-space.jpg" width="600" /></div><hr class="separator" /><h3>Do Nots</h3>There are some major considerations of things not do in flat design,  some more important than others. Remember, flat design isn’t a science.  As Morpheas says, ‘Some rules can be bent, others broken.’<br /> <strong>Here is some things that should not be done:</strong><br />  <ul><li>Try not to use gradients. If you need to, ensure they a subtle.</li><li>Don’t use drop shadows.</li><li>Don’t use borders on design elements.</li><li>Try to keep serif based fonts to minimum.</li></ul></div>

5 Essential Tips For Creating High Quality Flat Design

As a design savvy person you’ve most likely come across the the term flat design somewhere in your online activity. Whether it be a websit...

+ Read more »