Web design Sri lanka

jQuery Knob

<div dir="ltr"><font size="4"><a href="http://anthonyterrien.com/knob/">http://anthonyterrien.com/knob/</a></font><br><div><br></div><div><ul style="padding:0px 0px 0px 30px;margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">  <li>canvas based ; no png or jpg sprites.</li><li>touch, mouse and mousewheel, keyboard events implemented.</li><li>downward compatible ; overloads an input element.</li></ul><h2 style="margin:1em 0px 15px;line-height:1.7;font-size:2em;padding:0px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(238,238,238);color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif">  <a name="example" class="" href="https://github.com/aterrien/jQuery-Knob#example" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-right:6px;padding-left:30px"></a>Example</h2><pre style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:13px;margin-top:15px;margin-bottom:15px;background-color:rgb(248,248,248);border:1px solid rgb(221,221,221);line-height:19px;overflow:auto;padding:6px 10px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:rgb(51,51,51)">  <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;padding:0px;border:none;background-color:transparent;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;word-wrap:normal"><input type="text" value="75" class="dial">    <script>  $(function() {      $(".dial").knob();  });  </script>  </code></pre><h2 style="margin:1em 0px 15px;line-height:1.7;font-size:2em;padding:0px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(238,238,238);color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif">  <a name="options" class="" href="https://github.com/aterrien/jQuery-Knob#options" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-right:6px;padding-left:30px"></a>Options</h2><p style="margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">  Options are provided as attributes 'data-option':</p><pre style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:13px;margin-top:15px;margin-bottom:15px;background-color:rgb(248,248,248);border:1px solid rgb(221,221,221);line-height:19px;overflow:auto;padding:6px 10px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:rgb(51,51,51)">  <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;padding:0px;border:none;background-color:transparent;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;word-wrap:normal"><input type="text" class="dial" data-min="-50" data-max="50">  </code></pre><p style="margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">... or in the "knob()" call :</p><pre style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:13px;margin-top:15px;margin-bottom:15px;background-color:rgb(248,248,248);border:1px solid rgb(221,221,221);line-height:19px;overflow:auto;padding:6px 10px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:rgb(51,51,51)">  <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;padding:0px;border:none;background-color:transparent;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;word-wrap:normal">$(".dial").knob({                  'min':-50                  ,'max':50                  });  </code></pre><p style="margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">The following options are supported :</p><p style="margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">  Behaviors :</p><ul style="padding:0px 0px 0px 30px;margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px"><li>min : min value | default=0.</li><li>max : max value | default=100.</li>  <li>step : step size | default=1.</li><li>angleOffset : starting angle in degrees | default=0.</li><li>angleArc : arc size in degrees | default=360.</li><li>stopper : stop at min & max on keydown/mousewheel | default=true.</li>  <li>readOnly : disable input and events | default=false.</li></ul><p style="margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">UI :</p><ul style="padding:0px 0px 0px 30px;margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">  <li>cursor : display mode "cursor", cursor size could be changed passing a numeric value to the option, default width is used when passing boolean value "true" | default=gauge.</li><li>thickness : gauge thickness.</li>  <li>lineCap : gauge stroke endings. | default=butt, round=rounded line endings</li><li>width : dial width.</li><li>displayInput : default=true | false=hide input.</li><li>displayPrevious : default=false | true=displays the previous value with transparency.</li>  <li>fgColor : foreground color.</li><li>inputColor : input value (number) color.</li><li>font : font family.</li><li>fontWeight : font weight.</li><li>bgColor : background color.</li></ul><h2 style="margin:1em 0px 15px;line-height:1.7;font-size:2em;padding:0px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(238,238,238);color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif">  <a name="hooks" class="" href="https://github.com/aterrien/jQuery-Knob#hooks" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-right:6px;padding-left:30px"></a>Hooks</h2><pre style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:13px;margin-top:15px;margin-bottom:15px;background-color:rgb(248,248,248);border:1px solid rgb(221,221,221);line-height:19px;overflow:auto;padding:6px 10px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:rgb(51,51,51)">  <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;padding:0px;border:none;background-color:transparent;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;word-wrap:normal"><script>  $(".dial").knob({                      'release' : function (v) { /*make something*/ }                  });  </script>  </code></pre><ul style="padding:0px 0px 0px 30px;margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px"><li><p style="margin:15px 0px">'release' : executed on release</p>  <p style="margin:15px 0px">Parameters :</p><ul style="padding:0px 0px 0px 30px;margin:0px"><li>value : int, current value</li></ul></li><li><p style="margin:15px 0px">'change' : executed at each change of the value</p>  <p style="margin:15px 0px">Parameters :</p><ul style="padding:0px 0px 0px 30px;margin:0px"><li>value : int, current value</li></ul></li><li><p style="margin:15px 0px">'draw' : when drawing the canvas</p><p style="margin:15px 0px">  Context :</p><ul style="padding:0px 0px 0px 30px;margin:0px"><li>this.g : canvas context 2D (see Canvas documentation)</li><li>this.$ : jQuery wrapped element</li><li>this.o : options</li><li>this.i : input</li><li>... console.log(this);</li>  </ul></li><li><p style="margin:15px 0px">'cancel' : triggered on [esc] keydown</p></li><li><p style="margin:15px 0px">'error' : called if the browser doesn't support canvases and the plugin didn't initialize as a result</p>  </li></ul><p style="margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">The scope (this) of each hook function is the current Knob instance (refer to the demo code).</p>  <h2 style="margin:1em 0px 15px;line-height:1.7;font-size:2em;padding:0px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(238,238,238);color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif">  <a name="example-1" class="" href="https://github.com/aterrien/jQuery-Knob#example-1" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-right:6px;padding-left:30px"></a>Example</h2><pre style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:13px;margin-top:15px;margin-bottom:15px;background-color:rgb(248,248,248);border:1px solid rgb(221,221,221);line-height:19px;overflow:auto;padding:6px 10px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:rgb(51,51,51)">  <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;padding:0px;border:none;background-color:transparent;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;word-wrap:normal"><input type="text" value="75" class="dial">    <script>  $(".dial").knob({                   'change' : function (v) { console.log(v); }                  });  </script>  </code></pre><h2 style="margin:1em 0px 15px;line-height:1.7;font-size:2em;padding:0px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(238,238,238);color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif">  <a name="dynamically-configure" class="" href="https://github.com/aterrien/jQuery-Knob#dynamically-configure" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-right:6px;padding-left:30px"></a>Dynamically configure</h2>  <pre style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:13px;margin-top:15px;margin-bottom:15px;background-color:rgb(248,248,248);border:1px solid rgb(221,221,221);line-height:19px;overflow:auto;padding:6px 10px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:rgb(51,51,51)">  <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;padding:0px;border:none;background-color:transparent;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;word-wrap:normal"><script>  $('.dial')      .trigger(          'configure',          {          "min":10,          "max":40,          "fgColor":"#FF0000",          "skin":"tron",          "cursor":true          }      );  </script>  </code></pre><h2 style="margin:1em 0px 15px;line-height:1.7;font-size:2em;padding:0px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(238,238,238);color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif">  <a name="set-the-value" class="" href="https://github.com/aterrien/jQuery-Knob#set-the-value" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-right:6px;padding-left:30px"></a>Set the value</h2><pre style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:13px;margin-top:15px;margin-bottom:15px;background-color:rgb(248,248,248);border:1px solid rgb(221,221,221);line-height:19px;overflow:auto;padding:6px 10px;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:rgb(51,51,51)">  <code style="font-family:Consolas,'Liberation Mono',Courier,monospace;font-size:12px;margin:0px;padding:0px;border:none;background-color:transparent;border-top-left-radius:3px;border-top-right-radius:3px;border-bottom-right-radius:3px;border-bottom-left-radius:3px;word-wrap:normal"><script>  $('.dial')      .val(27)      .trigger('change');  </script>  </code></pre><h2 style="margin:1em 0px 15px;line-height:1.7;font-size:2em;padding:0px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(238,238,238);color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif">  <a name="supported-browser" class="" href="https://github.com/aterrien/jQuery-Knob#supported-browser" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-right:6px;padding-left:30px"></a>Supported browser</h2>  <p style="margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">Tested on Chrome, Safari, Firefox, IE 9.0.</p><h2 style="margin:1em 0px 15px;line-height:1.7;font-size:2em;padding:0px;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(238,238,238);color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif">  <a name="mit-license" class="" href="https://github.com/aterrien/jQuery-Knob#mit-license" style="color:rgb(65,131,196);text-decoration:none;display:block;padding-right:6px;padding-left:30px"></a>MIT License</h2><p style="margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">  Copyright (C) 2013 Anthony Terrien</p><p style="margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>  <p style="margin:15px 0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px">The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.</p>  <p style="margin-top:15px;margin-right:0px;margin-left:0px;color:rgb(51,51,51);font-family:Helvetica,arial,freesans,clean,sans-serif;font-size:15px;line-height:25px;margin-bottom:0px!important">THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.</p>  </div></div>

jQuery Knob

http://anthonyterrien.com/knob/ canvas based ; no png or jpg sprites.touch, mouse and mousewheel, keyboard events implemented.downward compatible ; overloads an input element. Example $(funct…

30 Oct 2013

20 Web Design Examples of Blog Front-end Structures

<div dir="ltr"><p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">For our weekly website selection, today we bring you a collection related to blogging: below are<b> the best and most suggestive websites created for blogging or generating chronologically-ordered content</b>. Though the important thing in blogging is the content itself, as a blog centered on web design and user interface, today we're going to focus on the structures for presenting that content with the aim of offering inspiring ideas for remodelling or creating a blog in the future.</p>  <div style="margin:0px;padding:0px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)"><h3 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:35px;font-size:1.3em">  Presenting the blog items: first interface</h3></div><p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  There are many different ways to present information on a website designed for generating content: in some cases they are aimed at sharing content from other blogs, videos, images or other multimedia elements according to the communication needs. <b>From the classic vertical list posts of chronological entries, to the most innovative pinboard interfaces that are so fashionable lately</b>, since the rise of Pinterest...and of course running through grid displayed presentation with infinite scroll or horizontal scroll cards.</p>  <p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)"><strong style="margin:0px;padding:0px"><a href="http://www.awwwards.com/20-web-design-examples-of-blog-front-end-structures.html#vertical" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Classic list posts</a></strong> | <strong style="margin:0px;padding:0px"><a href="http://www.awwwards.com/20-web-design-examples-of-blog-front-end-structures.html#horizontal" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Horizontal scroll</a></strong> | <strong style="margin:0px;padding:0px"><a href="http://www.awwwards.com/20-web-design-examples-of-blog-front-end-structures.html#grid" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Grid system</a></strong> | <strong style="margin:0px;padding:0px"><a href="http://www.awwwards.com/20-web-design-examples-of-blog-front-end-structures.html#pinboard" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Pin board blogs</a></strong></p>  <p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)"><br></p><h2 id="grid" style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:2.3em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  Grid</h2><p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">Entries are viewed on a grid of rows and columns. They can be ordered chronologically or otherwise. Often the entries open by displacing the surrounding cells to leave space to show the content of the selected item.</p>  <ul class="" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  <li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><a href="http://www.silktricky.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="silktricky" src="http://www.awwwards.com/awards/images/2013/03/blog-example-17.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.silktricky.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Silktricky</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://www.facesofnyfw.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="facesofnyfw" src="http://www.awwwards.com/awards/images/2013/03/blog-example-16.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.facesofnyfw.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">facesofnyfw.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://www.farfromthetree.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="farfromthetree" src="http://www.awwwards.com/awards/images/2013/03/blog-example-13.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.farfromthetree.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">farfromthetree.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://postersinamsterdam.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="postersinamsterdam.com" src="http://www.awwwards.com/awards/images/2013/03/blog-example-37.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://postersinamsterdam.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">postersinamsterdam.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://www.faebric.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="faebric.com" src="http://www.awwwards.com/awards/images/2013/03/blog-example-38.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.faebric.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">faebric.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://www.theverge.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="theverge" src="http://www.awwwards.com/awards/images/2013/03/blog-example-12.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.theverge.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">theverge.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://designonline.org.au/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="designonline" class="" src="http://www.awwwards.com/awards/images/2013/03/blog-example-11.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <strong style="margin:0px;padding:0px"><a href="http://designonline.org.au/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">designonline.org.au</a></strong></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://www.frenchcuisse.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="www.frenchcuisse.com" class="" src="http://www.awwwards.com/awards/images/2013/03/blog-example-32.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.frenchcuisse.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">frenchcuisse.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://middlemojo.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="middlemojo.com" src="http://www.awwwards.com/awards/images/2013/03/blog-example-39.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://middlemojo.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">middlemojo.com</a></p></li></ul><p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  <br></p><hr noshade style="clear:both;margin-bottom:25px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-top-style:solid;border-top-color:rgb(213,215,214);font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;width:570.75px">  <h2 id="pinboard" style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:2.3em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  Pin boards</h2><p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">It looks like an announcement or bulletin board where posts are pinned in chronological order. It's similar to a grid distribution but in this case one of the dimensions, usually the rows, has no predefined size and is flexible. The elements build up in the spaces... The social network Pinterest is the main example of this presentation structure.</p>  <ul class="" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  <li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><a href="http://www.garethwrice.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="silktricky" src="http://www.awwwards.com/awards/images/2013/03/blog-example-18.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.garethwrice.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">garethwrice.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://piccsy.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="piccsy" src="http://www.awwwards.com/awards/images/2013/03/blog-example-19.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://piccsy.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">piccsy.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://www.nowyteatr.org/pl" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="nowyteatr" src="http://www.awwwards.com/awards/images/2013/03/blog-example-21.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.nowyteatr.org/pl" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">nowyteatr.org</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://designspiration.net/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="designspiration" src="http://www.awwwards.com/awards/images/2013/03/blog-example-22.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://designspiration.net/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">designspiration.net</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://www.typetoken.net/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="typetoken" src="http://www.awwwards.com/awards/images/2013/03/blog-example-23.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.typetoken.net/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">typetoken.net</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://mapltd.com/news/london/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="mapltd.com" src="http://www.awwwards.com/awards/images/2013/03/blog-example-33.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://mapltd.com/news/london/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">mapltd.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://skivefestival.dk/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="skivefestival.dk" src="http://www.awwwards.com/awards/images/2013/03/blog-example-36.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://skivefestival.dk/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">skivefestival.dk</a></p></li></ul><p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  <br></p><hr noshade style="clear:both;margin-bottom:25px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-top-style:solid;border-top-color:rgb(213,215,214);font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;width:570.75px">  <h2 id="vertical" style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:2.3em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  Classic list posts</h2><p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  The positioning of blog entries is linear and chronological, from most recent to oldest. Scrolling is vertical. It's even common to see the entries already displayed, though there is usually a link to see the entries on another page. In lists the scroll at the end of the page may not be infinite, using the pagination of the list of entries.</p>  <ul class="" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  <li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:left;width:369.078125px;clear:both"><a href="http://thegreatdiscontent.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="thegreatdiscontent.com" class="" src="http://www.awwwards.com/awards/images/2013/03/blog-example-31.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://thegreatdiscontent.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">thegreatdiscontent.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:right;width:369.078125px">  <a href="http://orderedlist.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="orderedlist" class="" src="http://www.awwwards.com/awards/images/2013/03/blog-example-01b.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://orderedlist.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">orderedlist.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:left;width:369.078125px;clear:both">  <a href="http://jst.is/2012/07/protagonist/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="layervault" class="" src="http://www.awwwards.com/awards/images/2013/03/blog-example-05b.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://jst.is/2012/07/protagonist/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Jordan Staniscia</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:right;width:369.078125px">  <a href="http://ministryoftype.co.uk/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="ministryoftype" class="" src="http://www.awwwards.com/awards/images/2013/03/blog-example-07b.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://ministryoftype.co.uk/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">ministryoftype.co.uk</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:left;width:369.078125px;clear:both">  <a href="http://williamleeks.com/blog/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="williamleeks" class="" src="http://www.awwwards.com/awards/images/2013/03/blog-example-09b.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://williamleeks.com/blog/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">williamleeks.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:right;width:369.078125px">  <a href="http://layervault.tumblr.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="layervault" class="" src="http://www.awwwards.com/awards/images/2013/03/blog-example-03b.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://layervault.tumblr.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">layervault.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:left;width:369.078125px;clear:both">  <a href="http://www.ucdarchitecture.ie/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="ucdarchitecture.ie" class="" src="http://www.awwwards.com/awards/images/2013/03/blog-example-35.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://www.ucdarchitecture.ie/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">ucdarchitecture.ie</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:right;width:369.078125px">  <a href="http://sachagreif.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="sachagreif.com" class="" src="http://www.awwwards.com/awards/images/2013/03/blog-example-40.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://sachagreif.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">sachagreif.com</a></p></li></ul><hr noshade style="clear:both;margin-bottom:25px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-top-style:solid;border-top-color:rgb(213,215,214);font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;width:570.75px">  <h3 id="horizontal" style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:35px;font-size:1.6em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  Horizontal Scroll</h3><ul class="" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  <li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><a href="http://minimalmonkey.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="minimalmonkey" src="http://www.awwwards.com/awards/images/2013/03/blog-example-29.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://minimalmonkey.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">minimalmonkey.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://www.gallyapp.com/tf_themes/?theme=Kratong" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="Blogging" src="http://www.awwwards.com/awards/images/2013/03/blog-example-26.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.gallyapp.com/tf_themes/?theme=Kratong" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">gallyapp.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://trentwalton.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="trentwalton" src="http://www.awwwards.com/awards/images/2013/03/blog-example-27.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://trentwalton.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">trentwalton.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto">  <a href="http://www.trackemfindemkillem.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="trackemfindemkillem.com" src="http://www.awwwards.com/awards/images/2013/03/blog-example-34.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.trackemfindemkillem.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">trackemfindemkillem.com</a></p></li></ul><p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  <br></p><hr noshade style="clear:both;margin-bottom:25px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px;border-top-style:solid;border-top-color:rgb(213,215,214);font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;width:570.75px">  <h2 id="fotolog" style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:2.3em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  Fotologs</h2><ul class="" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  <li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><a href="http://www.letstravelsomewhere.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="letstravelsomewhere" src="http://www.awwwards.com/awards/images/2013/03/blog-example-28.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;"></a><p style="margin:0px;padding:0px">  <a href="http://www.letstravelsomewhere.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">letstravelsomewhere.com</a></p></li></ul><ul class="" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  <li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:left;width:369.078125px;clear:both"><a href="http://ithinkimight.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="ithinkimight" src="http://www.awwwards.com/awards/images/2013/02/blogging-websites-20.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://ithinkimight.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">ithinkimight.com</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:right;width:369.078125px">  <a href="http://thisisacult.org/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="thisisacult" src="http://www.awwwards.com/awards/images/2013/02/blogging-websites-19.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://thisisacult.org/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">thisisacult.org</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:left;width:369.078125px;clear:both">  <a href="http://bentrova.to/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="bentrova" src="http://www.awwwards.com/awards/images/2013/02/blogging-websites-21.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://bentrova.to/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">bentrova.to</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:right;width:369.078125px">  <a href="http://samking.co/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="samking" src="http://www.awwwards.com/awards/images/2013/02/blogging-websites-22.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://samking.co/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">samking.co</a></p></li><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;float:left;width:369.078125px;clear:both">  <a href="http://www.letstravelsomewhere.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img alt="letstravelsomewhere" src="http://www.awwwards.com/awards/images/2013/02/blogging-websites-23.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; width: 369.078125px;"></a><p style="margin:0px;padding:0px">  <a href="http://www.letstravelsomewhere.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">www.letstravelsomewhere.com</a></p></li></ul></div>

20 Web Design Examples of Blog Front-end Structures

For our weekly website selection, today we bring you a collection related to blogging: below are the best and most suggestive websites created for blogging or generating chronologically-ordered conten…

28 Oct 2013

Inspirational and Useful Resources for App Designers

<div dir="ltr"><p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">Here we go with a resources post! Here we bring you one of the best collections of utilities and templates for designing apps that you can find.</p>  <p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)"><strong style="margin:0px;padding:0px">This is a great collection of GUI's, mock-ups, Complete UI and Design elements with PSD files for download, skeuomorphic interface samples, icons, printable sketching templates</strong> which we have gathered here for all app designers and we are sure you will find very useful. Save this entry to your favorites!</p>  <p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">Ready to download and put to work.</p>  <p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)"></p><ul style="margin:0px 0px 20px;padding:0px;list-style:none;font-size:1.27em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  <li style="margin:0px;padding:0px;list-style:square inside;line-height:28px"><a href="http://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.html#tag1" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">UI (User Interface) and Design Elements Freebies</a></li>  <li style="margin:0px;padding:0px;list-style:square inside;line-height:28px"><a href="http://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.html#tag2" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Icon App Templates and Best Practices</a></li>  <li style="margin:0px;padding:0px;list-style:square inside;line-height:28px"><a href="http://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.html#tag4" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Inspirational resources for Mobile Designers</a></li>  <li style="margin:0px;padding:0px;list-style:square inside;line-height:28px"><a href="http://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.html#tag5" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">GUI elements and Guidelines</a></li>  <li style="margin:0px;padding:0px;list-style:square inside;line-height:28px"><a href="http://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.html#tag6" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Sketching and wireframing templates for Mobile Design</a></li>  <li style="margin:0px;padding:0px;list-style:square inside;line-height:28px"><a href="http://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.html#tag7" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">PSD and Vector Mock-Ups to show your apps</a></li>  <li style="margin:0px;padding:0px;list-style:square inside;line-height:28px"><a href="http://www.awwwards.com/inspirational-and-useful-resources-for-app-designers.html#tag8" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Fonts, Icons and Graphic Resources</a></li>  </ul><ul class="" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">  <p style="margin:0px 0px 20px;padding:0px;line-height:28px"></p><li id="tag1" style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"><strong style="margin:0px;padding:0px">UI (User Interfaces) and Design Elements Freebies</strong></h2><p style="margin:0px 0px 20px;padding:0px">  Complete User Interface samples and UI elements like slides, buttons, skeuomorphic interfaces with PSD files available.</p><ul style="margin:0px 0px 20px;padding:0px;list-style:none"><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Twitter App UI</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://kbsportfolio.com/2012/10/30/resource-for-designer-twitter-app/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Twitter App UI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_twitter_ui.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://kbsportfolio.com/2012/10/30/resource-for-designer-twitter-app/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">KB - Sebastien Gabriel</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Ipad Notepad App</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.freebiesgallery.com/notepad-template/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Ipad Notepad App UI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_ipadnotepad.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.freebiesgallery.com/notepad-template/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Freebies Gallery</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Ipad Email Client App</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.freebiesgallery.com/ipad-app-design-email-client/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Ipad Email Client App UI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_ipad_email.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.freebiesgallery.com/ipad-app-design-email-client/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Freebies Gallery</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Minimal Light User Interface Freebie</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://dmonzon.com/freebies/minimal-light-user-interface-freebie/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Minimal Light User Interface Freebie" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_minimal.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://dmonzon.com/freebies/minimal-light-user-interface-freebie/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Diego Monzon</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  iPhone App Retina</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://kbsportfolio.com/2011/10/17/resource-for-designer-iphone-app-retina/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="iPhone App Retina UI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_retina.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://kbsportfolio.com/2011/10/17/resource-for-designer-iphone-app-retina/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">KB - Sebastien Gabriel</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Vita iPhone App UI Kit Psd</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.pixeden.com/mobile-apps/vita-iphone-app-ui-kit-psd" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Vita iPhone App UI Kit Psd" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_uikit.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.pixeden.com/mobile-apps/vita-iphone-app-ui-kit-psd" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Pixeden</a></p></li>  <li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Gulae iPhone App UI Kit Psd</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.pixeden.com/mobile-apps/gulae-iphone-app-ui-kit-psd" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Gulae iPhone App UI Kit Psd" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_uikit2.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.pixeden.com/mobile-apps/gulae-iphone-app-ui-kit-psd" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Pixeden</a></p></li>  <li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Surface iPhone UI Kit</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://medialoot.com/item/surface-iphone-ui-kit-1/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Surface iPhone UI Kit" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_surface.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://medialoot.com/item/surface-iphone-ui-kit-1/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Denis Piso - RD6</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">IPhone Wood Ui</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://dribbble.com/shots/719904-IPhone-wood-Ui-PSD-Freebie" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="IPhone Wood Ui" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_wood.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://dribbble.com/shots/719904-IPhone-wood-Ui-PSD-Freebie" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Virgil Pana - Dribbble</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Clock Widget</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://dribbble.com/shots/668225-Clock-PSD-freebie" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Clock Widget" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_clock.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://dribbble.com/shots/668225-Clock-PSD-freebie" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Virgil Pana - Dribbble</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  UI Kit</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://dribbble.com/shots/808045-Ui-Kit" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="UI Kit" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_ui5.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://dribbble.com/shots/808045-Ui-Kit" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Mani - Dribbble</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Lock UI Freebie</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://dmonzon.com/backgrounds/free-check-box-button/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Lock UI Freebie" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_pushbutton.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://dmonzon.com/backgrounds/free-check-box-button/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Diego Monzon</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Buttons, Lights, Shadows</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://dribbble.com/shots/525358-Buttons-Lights-Shadows" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Buttons Lights Shadows UI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_buttons_light.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://dribbble.com/shots/525358-Buttons-Lights-Shadows" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Fernando Maclen</a></p></li>  <li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  iPhone and Ipad App UI Kit Psd Vol1</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.pixeden.com/mobile-apps/iphone-and-ipad-app-ui-kit-psd-vol1" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="iPhone and Ipad App UI Kit Psd Vol1" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_uikit3.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.pixeden.com/mobile-apps/iphone-and-ipad-app-ui-kit-psd-vol1" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Pixeden</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Tooltip iOS App UI Psd</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.pixeden.com/mobile-apps/tooltip-ios-app-ui-psd" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Tooltip iOS App UI Psd" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_tooltip.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.pixeden.com/mobile-apps/tooltip-ios-app-ui-psd" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Pixeden</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Instagram GUI Kit</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://dribbble.com/shots/571048-Insta-GUI-psd" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Instagram GUI Kit" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_instagram.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://dribbble.com/shots/571048-Insta-GUI-psd" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Adrien Olczak</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">iPhone 5 Keyboard Freebie</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://dmonzon.com/freebies/iphone-5-keyboard-freebie/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="iPhone 5 Keyboard Freebie" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_iphonecall.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://dmonzon.com/freebies/iphone-5-keyboard-freebie/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Diego Monzon</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Upload Panel</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://kbsportfolio.com/2011/10/13/resource-for-designer-upload-panel/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Upload Panel" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_upload.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://kbsportfolio.com/2011/10/13/resource-for-designer-upload-panel/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">KB - Sebastien Gabriel</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Dark Led Music App UI Kit Psd</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.pixeden.com/mobile-apps/dark-led-music-app-ui-kit-psd" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Dark Led Music App UI Kit Psd" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_player.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.pixeden.com/mobile-apps/dark-led-music-app-ui-kit-psd" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Pixeden</a></p></li>  <li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Switches</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://freebiesbug.com/tag/switches/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Switches Buttons" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_switch.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://freebiesbug.com/tag/switches/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Freebies Bug</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Knob</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://dribbble.com/shots/814695-Freebie-Knob-PSD" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Knob" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_knob2.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br></a></p>  <p style="margin:0px;padding:0px">Download from <a href="http://dribbble.com/shots/814695-Freebie-Knob-PSD" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Zsolt Már</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border:0px">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Knob</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://freebiesbug.com/psd-freebies/dark-knob-with-light-leds-psd/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Knob Buttons" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_knob.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://freebiesbug.com/psd-freebies/dark-knob-with-light-leds-psd/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Freebies Bug</a></p>  </li></ul></li><p style="margin:0px 0px 20px;padding:0px;line-height:28px"></p><li id="tag2" style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"><strong style="margin:0px;padding:0px">Icon Templates and Best Practices</strong></h2><p style="margin:0px 0px 20px;padding:0px">  Resources to create iOS and Android Icons. How much creativity you can fit in a small little smartphone button? Play with 3D to create the most spectacular and colorful icons.</p><ul style="margin:0px 0px 20px;padding:0px;list-style:none">  <li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  iOS App Icon Template</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://appicontemplate.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_icontemplate.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px 0px 20px;padding:0px">This great resource is a photoshop template that use Smart Objects to automate the process of rendering the various sizes that needs to be bundled with iOS Apps. Editing the largest size you obtain the smaller sizes automatically.</p>  <p style="margin:0px;padding:0px">Download from <a href="http://appicontemplate.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Appicontemplate</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Android App Icon Template</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.sparktechsoft.com/blogs/android-design-app-icon-template" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Android App Icon Template" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_androidicon.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.sparktechsoft.com/blogs/android-design-app-icon-template" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Sparktechsoft</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  App Icon Template</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.freebiesgallery.com/app-icon/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="App Icon Template" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_icon1.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.freebiesgallery.com/app-icon/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Freebies Gallery</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">App Icon Template</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://dribbble.com/shots/650740-Icon-template-PSD-freebie" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="App Icon Template" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_icon2.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://dribbble.com/shots/650740-Icon-template-PSD-freebie" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">KB - Sebastien Gabriel</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border:0px"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Icon Insider for Icon Designers</h3>  <p style="margin:0px 0px 20px;padding:0px"><a href="https://itunes.apple.com/us/app/iconsider-for-icon-deisigner/id415013162?l=ja&ls=1&mt=8" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Icon Insider for Icon Designers" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_iconinsider.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="https://itunes.apple.com/us/app/iconsider-for-icon-deisigner/id415013162?l=ja&ls=1&mt=8" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">iTunes Store</a></p>  </li></ul></li><p style="margin:0px 0px 20px;padding:0px;line-height:28px"></p><li id="tag4" style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"><strong style="margin:0px;padding:0px">Inspirational Resources for Mobile Designers</strong></h2><p style="margin:0px 0px 20px;padding:0px">  If you need inspiration to design mobile applications, here are a few resources and ideas you can use to call your muses.</p><ul style="margin:0px 0px 20px;padding:0px;list-style:none"><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Mobile Mozaic</h3><p style="margin:0px;padding:0px"><a href="http://www.mobilemozaic.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Mobile Mozaic" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_mobilemozaic.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Lovely UI</h3><p style="margin:0px;padding:0px"><a href="http://www.lovelyui.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Lovely UI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_lovelyui.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Ultra UI</h3><p style="margin:0px;padding:0px"><a href="http://ui.theultralinx.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Ultra UI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_ultraui.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Creattica Mobile Inspiration</h3><p style="margin:0px;padding:0px"><a href="http://creattica.com/mobile/latest/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Creattica Mobile Inspiration" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_creattica.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Mobile Patterns</h3><p style="margin:0px;padding:0px"><a href="http://www.mobile-patterns.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Mobile Patterns" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_mobilepatterns.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  My Color Screen</h3><p style="margin:0px;padding:0px"><a href="http://mycolorscreen.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="My Color Screen" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_mycolor.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Inspired UI</h3><p style="margin:0px;padding:0px"><a href="http://inspired-ui.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Inspired UI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_inspiredui.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Pinterest</h3><p style="margin:0px;padding:0px"><a href="http://pinterest.com/search/?q=UI+mobile" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Pinterest" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_pinterest.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Behance</h3><p style="margin:0px;padding:0px"><a href="http://www.behance.net/search?sort=appreciations&time=week&search=interface+Mobile" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Behance" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_behance.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border:0px"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Dribbble</h3>  <p style="margin:0px;padding:0px"><a href="http://dribbble.com/search?q=UI+design" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="Dribbble" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_dribbble.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p></li></ul></li><p style="margin:0px 0px 20px;padding:0px;line-height:28px"></p><li id="tag5" style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"><strong style="margin:0px;padding:0px">GUI Elements</strong></h2><p style="margin:0px 0px 20px;padding:0px">iPhone, iPad and Android GUI's and Sketch Elements. Do not miss a button or graphic interfaces to the operating system!</p>  <ul style="margin:0px 0px 20px;padding:0px;list-style:none"><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">iOS 6 GUI PSD</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.teehanlax.com/downloads/ios-6-gui-psd-iphone-5/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="iOS 6 GUI PSD" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_ios6gui.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.teehanlax.com/downloads/ios-6-gui-psd-iphone-5/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Teehanlax</a></p></li>  <li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  iPad GUI</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.teehanlax.com/blog/ipad-gui-psd-version-2/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="iPad GUI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_ipadgui.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px 0px 20px;padding:0px">Download from <a href="http://www.teehanlax.com/blog/ipad-gui-psd-version-2/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Teehanlax</a></p><p style="margin:0px;padding:0px">  Download Retina Display Version<a href="http://www.teehanlax.com/blog/ipad-gui-psd-retina-display/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">iPad GUI PSD (Retina Display)</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Android Design Stencils</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://developer.android.com/design/downloads/index.html" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Android Design Stencils" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_android.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.teehanlax.com/downloads/ios-6-gui-psd-iphone-5/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Android Developers</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  iPad Sketch Elements AI</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.teehanlax.com/downloads/ipad-sketch-elements-ai/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="iPad Sketch Elements AI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_ipadsketch.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px 0px 20px;padding:0px">Useful for sharing or presenting interactive concepts.</p><p style="margin:0px;padding:0px">Download from <a href="http://www.teehanlax.com/downloads/ipad-sketch-elements-ai/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Teehanlax</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  iPhone Sketch Elements AI</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.teehanlax.com/downloads/ipad-sketch-elements-ai/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="iPhone Sketch Elements AI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_iphonesketch.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px 0px 20px;padding:0px">Useful for sharing or presenting interactive concepts.</p><p style="margin:0px;padding:0px">Download from <a href="http://www.teehanlax.com/downloads/ipad-sketch-elements-ai/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Teehanlax</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border:0px"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">The iPhone / iPad Cheat Sheet for UI Designers</h3>  <p style="margin:0px 0px 20px;padding:0px"><a href="http://www.behance.net/gallery/The-iPhone-iPad-Cheat-Sheet-for-UI-Designers/5808661" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="The iPhone  iPad Cheat Sheet for UI Designers" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_cheatsheet.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.behance.net/gallery/The-iPhone-iPad-Cheat-Sheet-for-UI-Designers/5808661" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Denis Piso - RD6</a></p>  </li></ul></li><p style="margin:0px 0px 20px;padding:0px;line-height:28px"></p><li id="tag6" style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"><strong style="margin:0px;padding:0px">Sketching and wireframing templates for Mobile Design</strong></h2><p style="margin:0px 0px 20px;padding:0px">  Online and Printable Sketching templates for iPone, iPad, Tablets and multiple devices in order to test the first strokes of your sketch, change, tweak ... and change again.</p><ul style="margin:0px 0px 20px;padding:0px;list-style:none">  <li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  UX Sketching And Wireframing Templates For Mobile Projects</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://uxdesign.smashingmagazine.com/2012/09/18/free-download-ux-sketching-wireframing-templates-mobile/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="UX Sketching And Wireframing Templates For Mobile Projects" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_printable.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.teehanlax.com/blog/ipad-gui-psd-version-2/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Smashing Magazine</a></p></li>  <li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Printable sketch templates for web, mobile and tablet.</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://interfacesketch.tumblr.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="iPad Sketch Elements AI" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_print.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://interfacesketch.tumblr.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Interfacesketch</a></p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border:0px">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Beautiful iPad wireframe templates for Google Docs</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://mortenjust.com/2012/08/17/ipad-wireframe-templates-for-google-drawings/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+GenstartOgRock+%28Morten+Just+og+Rock%29" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="iPad wireframe templates for Google Docs" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_googledocs.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://mortenjust.com/2012/08/17/ipad-wireframe-templates-for-google-drawings/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+GenstartOgRock+%28Morten+Just+og+Rock%29" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Mortenjust</a></p>  </li></ul></li><p style="margin:0px 0px 20px;padding:0px;line-height:28px"></p><li id="tag7" style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"><strong style="margin:0px;padding:0px">PSD and Vector Mock-Ups to show your apps</strong></h2><p style="margin:0px 0px 20px;padding:0px">  Fully-scalable vector shapes Mock-ups. Prepare a good presentation for your customers to support your design work. Remember that a picture often gets cared more than any tirade of text can come to explain.</p><ul style="margin:0px 0px 20px;padding:0px;list-style:none">  <li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  iPad Psd Vector Mockup Template</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.pixeden.com/psd-mock-up-templates/ipad-psd-vector-mockup-template" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="iPad Psd Vector Mockup Template" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_mockup3.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.pixeden.com/psd-mock-up-templates/ipad-psd-vector-mockup-template" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Pixeden</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  iPhone 5 Psd Vector Mockup</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.pixeden.com/psd-mock-up-templates/iphone-5-psd-vector-mockup" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="iPhone 5 Psd Vector Mockup" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_mockup1.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.pixeden.com/psd-mock-up-templates/iphone-5-psd-vector-mockup" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Pixeden</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">  Perspective App Screen Mock-Up</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://www.pixeden.com/psd-mock-up-templates/perspective-app-screen-mock-up" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Perspective App Screen Mock-Up" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_mockup2.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.pixeden.com/psd-mock-up-templates/perspective-app-screen-mock-up" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Pixeden</a></p>  </li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border:0px"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">iPad Mini Psd Vector Mockup</h3>  <p style="margin:0px 0px 20px;padding:0px"><a href="http://www.pixeden.com/psd-mock-up-templates/ipad-mini-psd-vector-mockup" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br><img alt="iPad Mini Psd Vector Mockup" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_ipadmini_mockup.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Download from <a href="http://www.pixeden.com/psd-mock-up-templates/ipad-mini-psd-vector-mockup" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Pixeden</a></p>  </li></ul></li><p style="margin:0px 0px 20px;padding:0px;line-height:28px"></p><li id="tag8" style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;border:0px">  <h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"><strong style="margin:0px;padding:0px">Fonts, Icons and Graphic Resources</strong></h2><p style="margin:0px 0px 20px;padding:0px">  Scalable and responsive fonts and icons help you design the best suited web apps for any platform.</p><ul style="margin:0px 0px 20px;padding:0px;list-style:none"><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Mobile FontFonts. Build your app with better type.</h3><p style="margin:0px 0px 20px;padding:0px"><a href="http://appicontemplate.com/" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Mobile FontFonts. Build your app with better type" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_mobilefonts.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"><br>  </a></p><p style="margin:0px;padding:0px">Mobile FontFonts are created for mobile app designs. The concept is similar to webfonts, these fonts are ptimized for the device screen</p></li><li style="margin:0px 0px 24px;padding:0px 0px 20px;list-style:none;overflow:hidden;max-width:100%;height:auto;border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(213,215,214)">  <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Thousands of free Vector icons and Icon Webfonts for Mobile Interfaces and Responsive web design</h3><p style="margin:0px;padding:0px"><a href="http://www.awwwards.com/thousands-of-free-vector-icons-and-icon-webfonts-for-interfaces-and-responsive-web-design.html" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><br>  <img alt="Thousands of free Vector icons and Icon Webfonts" height="360" src="http://www.awwwards.com/awards/images/2012/11/resources_app_designers_iconwebfonts.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1;" width="840"></a></p>  </li></ul></li></ul></div>

Inspirational and Useful Resources for App Designers

Here we go with a resources post! Here we bring you one of the best collections of utilities and templates for designing apps that you can find. This is a great collection of GUI's, mock-ups, Complet…

28 Oct 2013

Load more posts