Web Design and Mobile Trends for 2013 eBook: download it for free!

<p style="margin:0px 0px 20px;padding:0px;line-height:32px;font-size:1.47em;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;background-color:rgb(236,236,236)">It's finally here! A few months ago we began this rewarding project, the idea of which was to shed a bit of light on this period when everything seems to be born again and it's difficult to predict how it will evolve.</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)">We decided to ask a selection of outstanding professionals in the sector about their vision for the future of web technologies, design for different devices and how it might evolve, as well as the social repercussions and uses of these technologies.</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)">28 notable characters such as <b>Jeffrey Zeldman (A List Apart), Karen McGrane, Aarron Walter and Veerle Peters, and agencies like B-Reel, Unit9, Fi, HinderlingVolkart or Ultranoir</b> have helped us understand the current situation and learn how they approach their projects from this complex multidevice point of view.</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)">The result is an easy-to-read publication, made up of short interviews which can be approached separately, with an informal touch. How to get it? It's easy, just Tweet and download!</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)"><a href="http://www.awwwards.com/web-design-and-mobile-trends-for-2013-ebook-download-it-for-free.html#alert-downbook" class="fancybox" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img class="" src="http://www.awwwards.com/awards/images/2013/02/web-design-trends-ebook.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto;"></a></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)">The publication collects many reflections on current topics like<br> responsive images and layouts, preprocessors, influence of mobile devices, performance, content strategy, new ways of interaction and visual trends for <a href="http://www.awwwards.com/documents/Web-and-Mobile-TRENDS-2013.pdf" title="Web Design Trends 2013" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">web and mobile design for 2013</a>.</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)">.pdf, .epub, .mobi and .azw3 versions are available so you can read it on your iPad, Kindle and a wide range of devices and ereaders. Enjoy it and let us know what you think!</p> <ul class="listpost view2" 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"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em"> </h3><a href="http://www.awwwards.com/gallery/7000/web-design-and-mobile-trends-for-2013-ebook-download-it-for-free" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2013/02/web-mobile-design-trends-2013-img-0.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; width: 369.078125px;" width="459"></a><p style="margin:0px;padding:0px"> </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"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em"> </h3><a href="http://www.awwwards.com/gallery/7001/web-design-and-mobile-trends-for-2013-ebook-download-it-for-free" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2013/02/web-mobile-design-trends-2013-img-0-1.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; width: 369.078125px;" width="459"></a><p style="margin:0px;padding:0px"> </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"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em"> </h3><a href="http://www.awwwards.com/gallery/7002/web-design-and-mobile-trends-for-2013-ebook-download-it-for-free" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2013/02/web-mobile-design-trends-2013-img2.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; width: 369.078125px;" width="459"></a><p style="margin:0px;padding:0px"> </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"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em"> </h3><a href="http://www.awwwards.com/gallery/7003/web-design-and-mobile-trends-for-2013-ebook-download-it-for-free" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2013/02/web-mobile-design-trends-2013-img4.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; width: 369.078125px;" width="459"></a><p style="margin:0px;padding:0px"> </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"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em"> </h3><a href="http://www.awwwards.com/gallery/7004/web-design-and-mobile-trends-for-2013-ebook-download-it-for-free" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2013/02/web-mobile-design-trends-2013-img9.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; width: 369.078125px;" width="459"></a></li> </ul>

• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5

• Previous
• Next

Web Design and Mobile Trends for 2013 eBook: download it for free!

It's finally here! A few months ago we began this rewarding project, the idea of which was to shed a bit of light on this period when everything seems to be born again and it's difficult to predict ho…

Read more »

10 Web Design Trends for 2013

<div class="entry" style="margin:0px;padding:0px 0px 20px;overflow:hidden;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;font-size:13px;background-color:rgb(236,236,236)"><ul class="listpost view2" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden"> <li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto;width:369.078125px;clear:both"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em"> <a href="http://www.awwwards.com/gallery/7007/10-web-design-trends-for-2013" style="line-height:28px;font-size:1.27em;font-weight:normal;margin:0px;padding:0px;color:rgb(68,68,68);text-decoration:none"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2013/02/web-design-mobile-visual-ux-trends-tags-2013-mini.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; width: 369.078125px; opacity: 0.75;" width="459"></a></h3> </li></ul><p style="margin:0px 0px 20px;padding:0px;line-height:32px;font-size:1.47em">For starters, we'd like to say thank you for the amazing reception our free eBook <a href="http://www.awwwards.com/web-design-and-mobile-trends-for-2013-ebook-download-it-for-free.html" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">Web design and Mobile Trends for 2013</a> has had since its launch last week, and especially to all those who made it possible by sharing their insightful opinions.</p> <p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em">Today we're doing a review of the end conclusions, where we will identify and analyze 10 of the key trends. This is just a brief overview of the conclusions you can read in the book. In fact, we have now released an <a href="https://docs.google.com/viewer?url=http://www.awwwards.com/documents/Web-and-Mobile-TRENDS-2013.pdf" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">updated version of the eBook in PDF</a> format, which includes a few corrections and a new layout for an easier and more enjoyable reading experience.</p> <ul class="listpost" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden"><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"> <h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em">What will be those key trends?</h2></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.awwwards.com/10-web-design-trends-for-2013.html#c1" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">1. CONTENT FIRST</a></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.awwwards.com/10-web-design-trends-for-2013.html#c2" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">2. SIMPLICITY OF DESIGN INTERACTION AND CONTENT</a></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.awwwards.com/10-web-design-trends-for-2013.html#c3" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">3. UX CENTERED DESIGN</a></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.awwwards.com/10-web-design-trends-for-2013.html#c4" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">4. APP STYLE INTERFACES</a></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.awwwards.com/10-web-design-trends-for-2013.html#c5" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">5. THE UNIFICATION OF DESKTOP AND MOBILE INTO A SINGLE VERSION</a></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.awwwards.com/10-web-design-trends-for-2013.html#c6" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">6. SVG AND RESPONSIVE TECHNIQUES</a></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.awwwards.com/10-web-design-trends-for-2013.html#c7" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">7. FLAT COLORS AND NO MORE SKEUOMORPHISM</a></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.awwwards.com/10-web-design-trends-for-2013.html#c8" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">8. TECHNOLOGY AGNOSTIC</a></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.awwwards.com/10-web-design-trends-for-2013.html#c9" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">9. EXPERIMENTATION AND INNOVATION IN DEVICE SENSORS AND INTERACTION</a></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.awwwards.com/10-web-design-trends-for-2013.html#c10" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none">10. THE INTERNET OF THINGS</a></li> </ul><div style="margin:0px;padding:0px;font-size:1.27em"><p style="margin:0px 0px 20px;padding:0px;line-height:28px">It's no easy task putting together a short summary of all the interviews, but as far as we're concerned, there are a few memorable statements in the book which nicely encapsulate the conclusions we've come to:</p> <blockquote style="margin:0px 0px 20px;padding:23px 23px 23px 31px;line-height:28px;background-image:url(http://static.awwwards.com/bundles/tvawwwards/images/bg-blockquote.png);background-color:rgb(241,241,241);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;overflow:hidden;background-repeat:no-repeat repeat"> <p style="margin:0px 0px 20px;padding:0px"><strong style="margin:0px;padding:0px">Bruce Lawson:</strong>"If I go to a train website, I don't really want to see a picture of Richard Branson smiling at me, I don't want to read the Chief Exec's ambitions and life history. All I want to know is what time my train is and how much it is."</p> <p style="margin:0px 0px 20px;padding:0px"><strong style="margin:0px;padding:0px">Karen McGrane:</strong>"Mobile is not the Lite version. You don't get to decide which device people use to visit your website. They do."</p> <p style="margin:0px 0px 20px;padding:0px"><strong style="margin:0px;padding:0px">Simon Foster:</strong>"I always keep it in mind that no matter how beautiful I make a website the average user only really wants to spend about 10 seconds on it."</p> </blockquote><p style="margin:0px 0px 20px;padding:0px;line-height:28px">This project reveals the need to prioritize content and the user's point of view. Almost all the participants expressed concerns about accessibility and application performance across the multiple devices that exist today and will only continue to increase in number. This wasn't the case a few years ago, as Rachel Andrew points out:</p> <blockquote style="margin:0px 0px 20px;padding:23px 23px 23px 31px;line-height:28px;background-image:url(http://static.awwwards.com/bundles/tvawwwards/images/bg-blockquote.png);background-color:rgb(241,241,241);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;overflow:hidden;background-repeat:no-repeat repeat"> <p style="margin:0px 0px 20px;padding:0px">"We were all saying 'in a few year's time we're going to have massive screens and all this space and people are going to have really fast connections' and what's happened is we've all ended up on tiny little screens with crappy bandwidth."</p> </blockquote><p style="margin:0px 0px 20px;padding:0px;line-height:28px">So years ago the tendencies would have been very different. We would have been focusing more on development of visual effects, animation etc...But the future is unknowable.</p> <p style="margin:0px 0px 20px;padding:0px;line-height:28px">We have to reach our target users, wherever they live, whatever device or browser they use, and serve them our content in the most efficient way possible. Though this is what web standards evangelists have been shouting from the rooftops for years.</p> <p style="margin:0px 0px 20px;padding:0px;line-height:28px">All the trends discussed here are interdependent and fundamentally defined by three principles:<strong style="margin:0px;padding:0px">Content oriented, UX-centered and Simplicity</strong>, which make up the new paradigm we'll need to work with when we come to face the deluge of devices that's looming on the horizon.</p> </div><p style="margin:0px 0px 20px;padding:0px;line-height:28px;font-size:1.27em"><br></p><ul class="listpost" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden"><li id="c1" style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"> <h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em">1. Content First</h2><p style="margin:0px 0px 20px;padding:0px;text-align:justify"><img class="imgTrends" height="415" src="http://www.awwwards.com/awards/images/2013/02/content-first.jpg" style="margin: 0px; padding: 0px 0px 1em 1em; border: 0px; float: right; max-width: 100%; height: auto;" width="459"></p> <p style="margin:0px 0px 20px;padding:0px;text-align:justify"><strong style="margin:0px;padding:0px">Content-first will be the center of the galaxy.</strong> Content is the most talked-about term in the book. In the coming months we'll see deep debate about how content should be presented to the user and whether or not we should adapt it to the device.</p> <p style="margin:0px;padding:0px;text-align:justify">In any case, this should be our main concern. We need to create efficient, searchable, accessible, multi-platform content and make sure it reaches the user via the best interactive experience possible.</p> </li><li id="c2" style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"> 2. Simplicity of Design Interaction and Content</h2><p style="margin:0px 0px 20px;padding:0px;text-align:justify"><img class="imgTrends" height="415" src="http://www.awwwards.com/awards/images/2013/02/symplicity.jpg" style="margin: 0px; padding: 0px 0px 1em 1em; border: 0px; float: right; max-width: 100%; height: auto;" width="459"></p> <p style="margin:0px;padding:0px;text-align:justify"><strong style="margin:0px;padding:0px">Simplicity is the new paradigm.</strong> The process of simplification will be the only tool we have to make content accessible and readable on the greatest possible number of devices, with the best user experience. Content strategy, UX, Usability, Accessibility and Visual Design must all be guided by this new paradigm.</p> </li><li id="c3" style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"> 3. UX Centered Design</h2><p style="margin:0px 0px 20px;padding:0px;text-align:justify"><img class="imgTrends" height="415" src="http://www.awwwards.com/awards/images/2013/02/UX-CENTERED-DESIGN.jpg" style="margin: 0px; padding: 0px 0px 1em 1em; border: 0px; float: right; max-width: 100%; height: auto;" width="459"></p> <p style="margin:0px;padding:0px;text-align:justify"><strong style="margin:0px;padding:0px">The user's point of view and their experience of using the site and its content is what is ultimately important. </strong>All participants agree on simplification on a visual and interaction level. Traditional websites will continue to adopt mobile app UI patterns precisely because they offer a more simple and efficient user experience, which brings us to the next point, "App Style Interfaces"...</p> </li><li id="c4" style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"> 4. App Style Interfaces</h2><p style="margin:0px 0px 20px;padding:0px;text-align:justify"><img class="imgTrends" height="415" src="http://www.awwwards.com/awards/images/2013/02/App-Style-Interfaces.jpg" style="margin: 0px; padding: 0px 0px 1em 1em; border: 0px; float: right; max-width: 100%; height: auto;" width="459"></p> <p style="margin:0px;padding:0px;text-align:justify">Over the next few months we're going to witness a process of transformation for most desktop websites, which will increasingly<strong style="margin:0px;padding:0px">imitate the style and interfaces of mobile apps</strong>, unifying and simplifying content and design and at the same time facilitating the creation of responsive projects.</p> </li><li id="c5" style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"> 5. The unification of desktop and mobile into a single version</h2><p style="margin:0px 0px 20px;padding:0px;text-align:justify"><img class="imgTrends" height="415" src="http://www.awwwards.com/awards/images/2013/02/unification-desktop-mobile.jpg" style="margin: 0px; padding: 0px 0px 1em 1em; border: 0px; float: right; max-width: 100%; height: auto;" width="459"></p> <p style="margin:0px 0px 20px;padding:0px;text-align:justify"><strong style="margin:0px;padding:0px">Responsive, Adaptative Content, Mobile First, Device Agnostic, Resolution Independent</strong>; all these terms are evolving towards a common destination which is the unification of desktop and mobile into a single version. But how to integrate apps and experiences through multiple devices?</p> <p style="margin:0px;padding:0px;text-align:justify">Our experts foresee an evolution in responsive. The trend until now has been to adapt content, but many voices now argue for unification.</p></li><li id="c6" style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"> <h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em">6. SVG and Responsive Techniques</h2><p style="margin:0px 0px 20px;padding:0px;text-align:justify"><img class="imgTrends" height="415" src="http://www.awwwards.com/awards/images/2013/02/svg-responsive-techniques.jpg" style="margin: 0px; padding: 0px 0px 1em 1em; border: 0px; float: right; max-width: 100%; height: auto;" width="459"></p> <p style="margin:0px;padding:0px;text-align:justify">The search for multi-platform versions and cross-platform technologies will lead to responsive techniques such as SVG, webfonts, design with typography and icon fonts evolving and becoming more widespread, and on a visual level we'll see trends like the ones coming up in the next point...</p> </li><li id="c7" style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"> 7. Flat Colors and no more skeuomorphism</h2><p style="margin:0px 0px 20px;padding:0px;text-align:justify"><img class="imgTrends" height="415" src="http://www.awwwards.com/awards/images/2013/02/flat-colors.jpg" style="margin: 0px; padding: 0px 0px 1em 1em; border: 0px; float: right; max-width: 100%; height: auto;" width="459"></p> <p style="margin:0px;padding:0px;text-align:justify">The main visual trends identified by our participants were <strong style="margin:0px;padding:0px">simplicity, minimalism, clear layouts, app-style interfaces, design focusing on typography, less decoration, less skeuomorphic interfaces, flat style, flat colors...</strong> This exact trend towards simplification in design and seemingly aesthetic matters, such as flat colors, responds to the need to create adaptative projects and serve images and scalable elements to retina displays with excellent performance on 3G connections, but also to mobiles with inferior provisions from the non-western market and to devices such as eReaders.</p> </li><li id="c8" style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"> 8. Technology Agnostic</h2><p style="margin:0px 0px 20px;padding:0px;text-align:justify"><img class="imgTrends" height="415" src="http://www.awwwards.com/awards/images/2013/02/technology-agnostic.jpg" style="margin: 0px; padding: 0px 0px 1em 1em; border: 0px; float: right; max-width: 100%; height: auto;" width="459"></p> <p style="margin:0px 0px 20px;padding:0px;text-align:justify">Technology agnostic, of course, is the main idea.</p><p style="margin:0px 0px 20px;padding:0px;text-align:justify">In web standards based applications, looking at the data graphic below we can see that the<strong style="margin:0px;padding:0px">HTML/ CSS/ Javascript trio is the "primordial soup".</strong> We then have<strong style="margin:0px;padding:0px">lots of CSS in its various forms</strong>, custom filters, CSS Effects, 3D Transforms, Preprocessors and<strong style="margin:0px;padding:0px">technologies such SVG or webfonts related to responsive techniques</strong>. It's worth pointing out the growing interest in Javascript for web app development, but when it comes to effects, animation, filters etc., it will step aside to make way for the new capacities of CSS3.</p> <p style="margin:0px 0px 20px;padding:0px;text-align:justify">In server-side languages Ruby and Python and experimentation with Node.js are becoming more widespread. The multiplicity of frameworks and builders will be another constant.</p> <p style="margin:0px 0px 20px;padding:0px;text-align:justify">On the other hand we have the development of native apps for iOS and Android, where there's nothing new either, just the intense and continual increase in demand and the desire to have more suitable cross-platform technologies, based on web standard technologies or otherwise. The spread of Android means demand for Android apps seems to be gaining in importance.</p> <p style="margin:0px;padding:0px;text-align:justify">Another thing that really stands out is the <strong style="margin:0px;padding:0px">growing interest in WebGL</strong>, particularly among the big agencies. This technology is raising high expectations thanks to its performance and the potential it offers on an experimental level.</p> </li><li id="c9" style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"> 9. Experimentation and innovation in device sensors and interaction</h2><p style="margin:0px 0px 20px;padding:0px;text-align:justify"><img class="imgTrends" height="415" src="http://www.awwwards.com/awards/images/2013/02/Experimentation-innovation.jpg" style="margin: 0px; padding: 0px 0px 1em 1em; border: 0px; float: right; max-width: 100%; height: auto;" width="459"></p> <p style="margin:0px;padding:0px;text-align:justify">It will be a time for getting the best out of mobile technology and creating new user experiences, exploring <strong style="margin:0px;padding:0px">device sensors</strong> and experimenting widely with <strong style="margin:0px;padding:0px">touch-enabled-interfaces</strong>, speech-based, etc.</p> </li><li id="c10" style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"><h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em"> 10. The internet of things</h2><p style="margin:0px 0px 20px;padding:0px;text-align:justify"><img class="imgTrends" height="415" src="http://www.awwwards.com/awards/images/2013/02/internet-things.jpg" style="margin: 0px; padding: 0px 0px 1em 1em; border: 0px; float: right; max-width: 100%; height: auto;" width="459"></p> <p style="margin:0px 0px 20px;padding:0px;text-align:justify">Soon we'll be able to communicate not only with our fridges and televisions, but even with devices with tiny LED screens, In-kitchen devices, In-car audio interfaces... Hundreds of totally different platforms will spring up. Without a doubt, <strong style="margin:0px;padding:0px">interactive TV will have a leading role</strong>. How will we be able to evolve towards a rational unification of all this?</p> <p style="margin:0px;padding:0px;text-align:justify">As Aarron Walter says, we'll see an "Ecosystem of connected services" and we'll have to work hard on integrating services and user accounts.</p></li></ul><div class="finaldiv" style="margin:2em 0px 0px;padding:2em 0px 0px;border-top-width:2px;border-top-style:dashed;border-top-color:rgb(204,204,204);font-size:1.27em"> <p style="margin:0px 0px 20px;padding:0px;line-height:28px">Well, that's it for our humble account of what will be happening in the next year, and as we say at the end of the book:</p><blockquote style="margin:0px 0px 20px;padding:23px 23px 23px 31px;line-height:28px;background-image:url(http://static.awwwards.com/bundles/tvawwwards/images/bg-blockquote.png);background-color:rgb(241,241,241);border-top-left-radius:2px;border-top-right-radius:2px;border-bottom-right-radius:2px;border-bottom-left-radius:2px;overflow:hidden;background-repeat:no-repeat repeat"> <p style="margin:0px 0px 20px;padding:0px">"These conclusions won't be anything like the reality, because at this very moment some anonymous genius is probably giving form to a new technological revolution."</p></blockquote> </div><ul class="listpost" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden"><li style="margin:0px 0px 20px;padding:0px;list-style:none;line-height:28px;overflow:hidden;max-width:100%;height:auto"> <h2 style="margin:0px 0px 20px;padding:0px;font-weight:normal;line-height:51px;font-size:1.8em">Data visualization. Web Design Trending Terms</h2><p style="margin:0px;padding:0px;text-align:justify">The following images are a visual representation of Trending Terms, the most frequently mentioned terms throughout this project. These data visualizations allow us to gain an overall vision of the <strong style="margin:0px;padding:0px">visual and technological web design trends for this year.</strong></p> </li></ul><ul class="listpost view2" style="margin:0px;padding:0px;list-style:none;font-size:1.27em;clear:both;overflow:hidden"><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"> <h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em">Visual and Design Trending Terms</h3><a href="http://www.awwwards.com/gallery/7007/10-web-design-trends-for-2013" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2013/02/web-design-mobile-visual-ux-trends-tags-2013-mini.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; width: 369.078125px;" width="459"></a><p style="margin:0px;padding:0px;text-align:justify"> </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"><h3 style="margin:0px 0px 10px;padding:0px;line-height:35px;font-size:1.3em"> Technology Trending Terms</h3><a href="http://www.awwwards.com/gallery/7008/10-web-design-trends-for-2013" style="margin:0px;padding:0px;color:rgb(64,159,137);text-decoration:none"><img src="http://www.awwwards.com/media/cache/gallery_two_columns/awards/images/2013/02/web-design-mobile-technology-trends-tags-2013-mini.jpg" style="margin: 0px; padding: 0px; border: 0px; max-width: 100%; height: auto; zoom: 1; transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; width: 369.078125px;" width="459"></a><p style="margin:0px;padding:0px;text-align:justify"> </p></li></ul></div><div class="sharebottom" style="margin:0px 0px 40px;padding:0px;clear:both;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;font-size:13px;text-align:justify;background-color:rgb(236,236,236)"> <div class="addthis_toolbox addthis_default_style " style="margin:0px;padding:0px"><a class="addthis_button_facebook_like" style="margin:0px;padding:0px;color:rgb(64,159,137);width:85px;overflow:hidden"></a><a class="addthis_button_tweet" style="margin:0px;padding:0px;color:rgb(64,159,137);width:97px;overflow:hidden"></a><a class="addthis_button_google_plusone" style="margin:0px;padding:0px;color:rgb(64,159,137);width:75px;overflow:hidden"></a><a class="addthis_button_pinterest_pinit" style="margin:0px 10px 0px 0px;padding:0px;color:rgb(64,159,137)"></a><a class="addthis_counter addthis_pill_style" style="margin:0px;padding:0px;color:rgb(64,159,137)"></a></div> </div><div class="author style2" style="margin:0px 0px 20px;padding:0px 0px 10px;overflow:hidden;color:rgb(68,68,68);font-family:MuseoSans,Georgia,'Times New Roman',Times,serif;font-size:13px;text-align:justify;background-color:rgb(236,236,236)"> courtesy : <a href="http://www.awwwards.com/10-web-design-trends-for-2013.html#c1">http://www.awwwards.com/10-web-design-trends-for-2013.html#c1</a></div>

• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5

• Previous
• Next

10 Web Design Trends for 2013

For starters, we'd like to say thank you for the amazing reception our free eBook Web design and Mobile Trends for 2013 has had since its launch last week, and especially to all those who made i…

Read more »

Bootstrap 3 Goes Mobile-First, Now Reportedly Powers 1% Of The Web

<h1 style="text-align:center;margin:20px 0px 10px;font-size:100px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:500;line-height:1">Bootstrap 3</h1><h2 style="font-weight:normal;margin:20px 0px 10px;line-height:28px;color:rgb(17,17,17);font-size:24px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:rgb(255,255,255)"> <div class="bs-masthead" style="padding:100px 15px;text-align:center;color:rgb(51,51,51);font-size:14px;line-height:20px"><div class="container" style="margin-right:auto;margin-left:auto;max-width:1170px"><p class="lead" style="margin:0px 175.5px 20px;font-size:30px;line-height:1.4"> Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.</p><p style="margin:0px 175.5px 10px;font-size:30px"><a href="http://getbootstrap.com/bs-v3.0.0-rc1-dist.zip" class="btn btn-bs btn-large" style="color:rgb(86,61,124);text-decoration:none;display:inline-block;padding:18px 24px;margin-bottom:5px;font-size:21px;line-height:1.428571429;white-space:nowrap;vertical-align:middle;border:1px solid rgb(229,229,229);border-top-left-radius:6px;border-top-right-radius:6px;border-bottom-right-radius:6px;border-bottom-left-radius:6px;margin-top:5px">Download Bootstrap</a></p> </div></div><div class="bs-old-docs" style="padding:15px 20px;color:rgb(119,119,119);background-color:rgb(250,250,250);border-bottom-width:1px;border-bottom-style:solid;border-bottom-color:rgb(229,229,229);text-align:center;border-top-width:1px;border-top-style:solid;border-top-color:rgb(229,229,229);font-size:14px;line-height:20px"> -------------------------------------------</div></h2><h2 style="font-weight:normal;margin:20px 0px 10px;line-height:28px;color:rgb(17,17,17);font-size:24px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:rgb(255,255,255)"> New organization</h2><p style="font-size:16px;line-height:28px;margin-bottom:14px;color:rgb(69,68,65);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:rgb(255,255,255)">We've mentioned it a few times in previous updates, but today it's <em style>Facebook Official</em>: Bootstrap has moved to <a href="https://github.com/twbs/bootstrap" style="line-height:inherit;color:rgb(0,136,204);text-decoration:none">@twbs/bootstrap</a>. Watchers, stars, and the like are all maintained in the move, as is all Git history. New digs, same code.</p> <h2 style="font-weight:normal;margin:20px 0px 10px;line-height:28px;color:rgb(17,17,17);font-size:24px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:rgb(255,255,255)">Docs for v3 and v2.3.2</h2> <p style="font-size:16px;line-height:28px;margin-bottom:14px;color:rgb(69,68,65);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:rgb(255,255,255)">With today's release we're pushing forward 100% on Bootstrap 3, meaning when you head to <a href="http://getbootstrap.com/" style="line-height:inherit;color:rgb(0,136,204);text-decoration:none">http://getbootstrap.com</a> you'll see the v3 RC1 documentation. Our intention is to make BS3's testing and development as widespread as possible so we get the best final release possible.</p> <p style="font-size:16px;line-height:28px;margin-bottom:14px;color:rgb(69,68,65);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:rgb(255,255,255)"><strong style="color:rgb(34,34,34)">Head on over to <a href="http://getbootstrap.com/" style="font-weight:inherit;line-height:inherit;color:rgb(0,136,204);text-decoration:none">http://getbootstrap.com</a> to check it out.</strong> If you're running into any broken links on the downloads, give it a bit for the DNS to sort itself out.</p> <p style="font-size:16px;line-height:28px;margin-bottom:14px;color:rgb(69,68,65);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:rgb(255,255,255)">We're fully aware everyone cannot simply jump right into BS3 yet, so we've kept the docs for 2.3.2 around for easy access. You'll find a prominent link to the old docs in all of BS3's documentation. If you're in need, head over to<a href="http://getbootstrap.com/2.3.2/" style="line-height:inherit;color:rgb(0,136,204);text-decoration:none">http://getbootstrap.com/2.3.2/</a>.</p> <h2 style="font-weight:normal;margin:20px 0px 10px;line-height:28px;color:rgb(17,17,17);font-size:24px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:rgb(255,255,255)">What's changed!?</h2> <p style="font-size:16px;line-height:28px;margin-bottom:14px;color:rgb(69,68,65);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:rgb(255,255,255)">With over ~1,600 commits, ~72,000 additions/deletions, and ~300 files changed,<em style>everything</em> has changed. We've added features, removed features, and cleaned up a lot more. The <a href="https://github.com/twbs/bootstrap/pull/6342" style="line-height:inherit;color:rgb(0,136,204);text-decoration:none">v3 pull request</a> on GitHub has all the details you'll need for a complete list of changes and some helpful migration tips.</p> <h2 style="font-weight:normal;margin:20px 0px 10px;line-height:28px;color:rgb(17,17,17);font-size:24px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:rgb(255,255,255)">Onward to RC2</h2><p style="font-size:16px;line-height:28px;margin-bottom:14px;color:rgb(69,68,65);font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:rgb(255,255,255)"> Bootstrap 3 RC1 is just the start, and we need your help to get to RC2. Download it and give it a go, and most importantly, tell us what you find. If something new is all funky or you found a bug, let us know by <a href="https://github.com/twbs/bootstrap/issues/new" style="line-height:inherit;color:rgb(0,136,204);text-decoration:none">opening a new issue</a>.</p> <p style="margin:0px 0px 12.5px;padding:0px;font-size:14px;line-height:20px;font-family:helvetica,arial,clean,sans-serif;background-color:rgb(255,255,255)">________________________________________________________________________________</p> <p style="margin:0px 0px 12.5px;padding:0px;font-size:14px;line-height:20px;font-family:helvetica,arial,clean,sans-serif;background-color:rgb(255,255,255)">The team behind Bootstrap, the immensely popular grid-based, front-end framework for web development, launched the first release candidate of Bootstrap 3 includes over the weekend. Besides a tweaked look and a couple of new features (and also the removal of a few others), the most important change in this update is that Bootstrap, just like its close competitor <font color="#0a9600"><b>Foundation</b></font>, is now mobile first and responsive by default. The announcement coincided with new data from source-code search engine meanpath, which also this weekend announced that 1 percent of the 150 million websites in its index now use Bootstrap.</p> <p style="margin:12.5px 0px;padding:0px;font-size:14px;line-height:20px;font-family:helvetica,arial,clean,sans-serif;background-color:rgb(255,255,255)">Bootstrap, which was developed at Twitter but has since been spun out into its own organization after its developers left the company, has clearly caught on with developers, who can easily set up a good-looking site without having to involve designers or worry about how the site will look on different browsers.</p> <p style="margin:12.5px 0px;padding:0px;font-size:14px;line-height:20px;font-family:helvetica,arial,clean,sans-serif;background-color:rgb(255,255,255)"><a target="_blank" href="http://tctechcrunch2011.files.wordpress.com/2013/07/bootstrap_3_example.png" style="font-weight:bold;text-decoration:none;color:rgb(10,150,0);outline:none"><img alt="bootstrap_3_example" class="alignright size-medium wp-image-852618" height="185" src="http://tctechcrunch2011.files.wordpress.com/2013/07/bootstrap_3_example.png?w=300&h=185" style="border: 0px; float: right; margin: 0px 0px 1em 1em; max-width: 640px; height: auto;" width="300"></a>My guess is that the vast majority of those 1 percent of sites are run by startups. The problem with this, of course, is that if you spend enough time looking at startup landing pages (which most of us here at TechCrunch are contractually obliged to do), it often feels like they all look alike after a while because the majority of developers all built the same generic Bootstrap-powered site.</p> <p style="margin:12.5px 0px;padding:0px;font-size:14px;line-height:20px;font-family:helvetica,arial,clean,sans-serif;background-color:rgb(255,255,255)">That said, version 3 introduces a new flat look for a few design elements that makes it stand apart from version 2 sites. In total, the development team made over 72,000 additions and deletions and changed 300 files between the last version of Bootstrap 2 and this first release candidate.</p> <p style="margin:12.5px 0px;padding:0px;font-size:14px;line-height:20px;font-family:helvetica,arial,clean,sans-serif;background-color:rgb(255,255,255)">By going mobile first, Bootstrap now asks developers to first think about the mobile site and then think about how it expands to larger screens. Previously, the thought process was the other way round, with developers working from the 12-column desktop grid down to smartphone-sized screens. In the process, the team also changed some naming schemes and added features like retina image mixins and small grid systems for tablets and phones.</p> <p style="margin:12.5px 0px;padding:0px;font-size:14px;line-height:20px;font-family:helvetica,arial,clean,sans-serif;background-color:rgb(255,255,255)">If you're currently using Bootstrap 2, switching to Bootstrap 3 should be relatively easy, but given how much of the code has changed means you can't just drop in the new files and hope everything will work.</p> <p style="margin:12.5px 0px;padding:0px;font-size:14px;line-height:20px;font-family:helvetica,arial,clean,sans-serif;background-color:rgb(255,255,255)">-----------------------------------------------------------------------------------------------------------------</p>

Bootstrap 3 Goes Mobile-First, Now Reportedly Powers 1% Of The Web

Bootstrap 3 Sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.Download Bootstrap ------------------------------------------- New organization…

Read more »

10 Awesome Weather Widgets with jQuery

<p>Today we are sharing you our collection of what we think awesomely good jQuery Weather Widget plugins. We can easily provide our website's visitors the weather information of any location with these plugin integrated into our site. <strong>These plugins uses the API of weather information providers like Google and Yahoo!</strong></p> <p><strong>Related Posts:</strong></p> <ul> <li><a target="_blank" href="http://www.jquery4u.com/twitter/"><strong>The jQuery Twitter Widget</strong></a></li> </ul> <h2>1. WeatherSlider – jQuery animated weather widget</h2> <p>This is a beautiful weather slider widget with animated weather effects and 48 weather types.<br> <a href="http://codecanyon.net/item/weatherslider-jquery-animated-weather-widget/1058937" target="_blank" rel="nofollow"><img alt="WeatherSlider" src="http://cdn.jquery4u.com/wp-content/uploads/2012/07/WeatherSlider.jpg"></a><br> <a class="seelivedemo" rel="nofollow" target="_blank" href="http://codecanyon.net/item/weatherslider-jquery-animated-weather-widget/1058937">Source</a><a class="seelivedemo" rel="nofollow" target="_blank" href="http://codecanyon.net/item/weatherslider-jquery-animated-weather-widget/full_screen_preview/1058937">Demo</a></p> <h2>2. My Google Weather Plugin</h2> <p>This plugin adds weather for any city in the world.<br> FEATURES:<br> > Fully customizable weather widget<br> > Use google provided weather information<br> > Available in most cities in the world<br> > Cross-browser (works in IE7+ / FF / chrome / Safari / opera)<br> <a href="http://www.kfsoft.info/mygoogleweather/demo.php" target="_blank" rel="nofollow"><img alt="My Google Weather" src="http://cdn.jquery4u.com/wp-content/uploads/2012/07/My-Google-Weather-Plugin.jpg"></a><br> <a class="seelivedemo" rel="nofollow" target="_blank" href="http://www.kfsoft.info/mygoogleweather/demo.php">Source + Demo</a></p> <p><span id="more-14563"></span></p> <h2>3 Create a Weather Widget Using jQuery, YQL and Weather.com</h2> <p>Create a simple widget to display weather data. Our aim is to create a widget similar to how Google displays weather data.<br> <a href="http://jobyj.in/api/create-a-weather-widget-using-jquery-yql-and-weather-com/" target="_blank" rel="nofollow"><img alt="Weather Widget Using jQuery, YQL and Weather.com" src="http://cdn.jquery4u.com/wp-content/uploads/2012/07/Create-a-Weather-Widget-Using-jQuery-YQL-and-Weathercom.jpg"></a><br> <a class="seelivedemo" rel="nofollow" target="_blank" href="http://jobyj.in/api/create-a-weather-widget-using-jquery-yql-and-weather-com/">Source</a><a class="seelivedemo" rel="nofollow" target="_blank" href="http://jobyj.in/demos/2011/12/weather-widget/">Demo</a></p> <h2>4. Using Google's Weather API</h2> <p>This application takes a set of Google weather API feeds and makes some simple decision based on the output.<br> <a href="http://papermashup.com/using-googles-weather-api/" target="_blank" rel="nofollow"><img alt="Using Google's Weather API" src="http://cdn.jquery4u.com/wp-content/uploads/2012/07/Using-Googles-Weather-API.jpg"></a><br> <a class="seelivedemo" rel="nofollow" target="_blank" href="http://papermashup.com/using-googles-weather-api/">Source</a><a class="seelivedemo" rel="nofollow" target="_blank" href="http://papermashup.com/demos/google-weather-api/?location=Bristol">Demo</a></p> <h2>5. jQuery Geolocation and Yahoo's APIs to build a simple weather webapp</h2> <p>We will be using the HTML5 geolocation API to present the user with a personalized weather forecast. Using jQuery, we will issue AJAX request to two of Yahoo's popular APIs to obtain additional geographical information and a weather forecast.<br> <a href="http://tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/" target="_blank" rel="nofollow"><img alt="jQuery Geolocation and Yahoo's APIs" src="http://cdn.jquery4u.com/wp-content/uploads/2012/07/jQuery-Geolocation-and-Yahoos-APIs.jpg"></a><br> <a class="seelivedemo" rel="nofollow" target="_blank" href="http://tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/">Source</a><a class="seelivedemo" rel="nofollow" target="_blank" href="http://demo.tutorialzine.com/2012/05/weather-forecast-geolocation-jquery/">Demo</a></p> <h2>6. jQuery weather widget</h2> <p>This widget is pure JavaScript and requires no back-end/server so you can place it on your blog or anywhere you like. The widget makes two main calls using JSON to retrieve the users geolocation and then to retrieve the local weather for that location.<br> <a href="http://www.myphpetc.com/2009/11/jquery-weather-widget.html" target="_blank" rel="nofollow"><img alt="jQuery weather widget" src="http://cdn.jquery4u.com/wp-content/uploads/2012/07/jQuery-weather-widget.jpg"></a><br> <a class="seelivedemo" rel="nofollow" target="_blank" href="http://www.myphpetc.com/2009/11/jquery-weather-widget.html">Source + Demo</a></p> <h2>7. jDigiClock : jQuery Digital Clock with Weather</h2> <p>jDigiClock is a jQuery plugin that has been inspired from the distinctive HTC Hero Clock Widget.<br> <a href="http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/" target="_blank" rel="nofollow"><img alt="jDigiClock" src="http://cdn.jquery4u.com/wp-content/uploads/2012/07/jDigiClock.jpg"></a><br> <a class="seelivedemo" rel="nofollow" target="_blank" href="http://www.radoslavdimov.com/jquery-plugins/jquery-plugin-digiclock/">Source + Demo</a></p> <h2>8. simpleWeather : How to display weather with jQuery</h2> <p>A simple jQuery plugin to display the weather information for any location. The data is pulled from the public Yahoo! Weather feed via the YQL API.<br> <a href="http://monkeecreate.github.com/jquery.simpleWeather/" target="_blank" rel="nofollow"><img alt="simpleWeather" src="http://cdn.jquery4u.com/wp-content/uploads/2012/07/simpleWeather.jpg"></a><br> <a class="seelivedemo" rel="nofollow" target="_blank" href="http://monkeecreate.github.com/jquery.simpleWeather/">Source + Demo</a></p> <h2>9. Adding Weather to Your Site with jQuery and YQL</h2> <p>jQuery and YQL (a free web service offered by Yahoo) can be used to easily add a customized weather display to your site. In this article I'll guide you through the process from start to finish.<br> <a href="http://www.onextrapixel.com/2011/08/22/adding-weather-to-your-site-with-jquery-and-yql/" target="_blank" rel="nofollow"><img alt="Weather to Your Site with jQuery and YQL" src="http://cdn.jquery4u.com/wp-content/uploads/2012/07/Adding-Weather-to-Your-Site-with-jQuery-and-YQL.jpg"></a><br> <a class="seelivedemo" rel="nofollow" target="_blank" href="http://www.onextrapixel.com/2011/08/22/adding-weather-to-your-site-with-jquery-and-yql/">Source</a><a class="seelivedemo" rel="nofollow" target="_blank" href="http://www.onextrapixel.com/examples/jquery-yql-weather/">Demo</a></p> <h2>10. zWeatherFeed – Yahoo! Weather plugin for jQuery</h2> <p>This plugin will read the current weather for a location using Yahoo! Weather. It produces structured HTML with in-built CSS classes for styling. Simple and easy to use.<br> <a href="http://www.zazar.net/developers/jquery/zweatherfeed/" target="_blank" rel="nofollow"><img alt="zWeatherFeed" src="http://cdn.jquery4u.com/wp-content/uploads/2012/07/zWeatherFeed.jpg"></a><br> <a class="seelivedemo" rel="nofollow" target="_blank" href="http://www.zazar.net/developers/jquery/zweatherfeed/">Source</a><a class="seelivedemo" rel="nofollow" target="_blank" href="http://www.zazar.net/developers/jquery/zweatherfeed/example.html">Demo</a></p>

• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5

• Previous
• Next

10 Awesome Weather Widgets with jQuery

Today we are sharing you our collection of what we think awesomely good jQuery Weather Widget plugins. We can easily provide our website's visitors the weather information of any location with the…

Read more »

Uniform - Sexy forms with jQuery

<div id="intro"> <p><br></p><p>Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all browsers?</p> <p>If so, Uniform is your new best friend.</p> <p>Uniform masks your standard form controls with custom themed controls. It works in sync with your real form elements to ensure accessibility and compatibility. For truly complex designs, you can import <a href="http://uniformjs.com/multiple-themes.html">multiple themes on one page</a>.</p> </div> <div id="example"> <h1>Download</h1><h1><div id="download"> <a class="btn-lg" href="http://github.com/pixelmatrix/uniform/zipball/v2.1.1"><img alt="" src="http://uniformjs.com/images/icon-download.png"> Download Uniform 2.1.1 <span>jquery.uniform.zip</span></a> <p class="github"><a href="http://github.com/pixelmatrix/uniform">Get source on GitHub</a></p> <p class="version"><font style="font-weight:normal">version 2.1.1 (2013-03-24)</font></p> </div></h1><h2><font style="font-weight:normal">Uniform styles:</font></h2><h1><div> <ul> <li><font style="font-weight:normal">Selects (drop down lists)</font></li> <li><font style="font-weight:normal">Checkboxes</font></li> <li><font style="font-weight:normal">Radio buttons</font></li> <li><font style="font-weight:normal">File upload inputs</font></li> <li><font style="font-weight:normal">Input areas (single line text)</font></li> <li><font style="font-weight:normal">Textareas (multi-line text)</font></li> <li><font style="font-weight:normal">Links</font></li> <li><font style="font-weight:normal">Buttons, including form submit and reset buttons</font></li> </ul> </div></h1><h2><font style="font-weight:normal">Tested & Compatible in:</font></h2><h1><div> <ul> <li><font style="font-weight:normal">Safari 3+</font></li> <li><font style="font-weight:normal">Firefox 3+</font></li> <li><font style="font-weight:normal">IE7+</font></li> <li><font style="font-weight:normal">Chrome</font></li> <li><font style="font-weight:normal">jQuery 1.3+</font></li> <li><font style="font-weight:normal">Opera 10+</font></li> <li><font style="font-weight:normal">Degrades gracefully in IE6</font></li> </ul></div></h1><div class="controls"><form method="get" action=""> <div style="width:92px" id="uniform-theme" class="selector"> </div> </form> </div> </div> <div id="docs"> <h1>Uniform</h1> <p>Sexy form elements with jQuery. Now with HTML5 attributes!</p> <p>Version 2.1.1</p> <p>Works well with jQuery 1.6+, but we've received patches and heard that this works with jQuery 1.3.</p> <p>Licensed under the <a href="http://www.opensource.org/licenses/mit-license.php">MIT License</a></p> <h2>Installation</h2> <p>Installation of Uniform is quite simple. First, make sure you have jQuery installed. Then you'll want to link to the jquery.uniform.js file and uniform.default.css in the head area of your page. Here's what your <code><head></code> tag contents should probably contain:</p> <pre><code><!-- Make sure your CSS file is listed before jQuery --> <link rel="stylesheet" href="uniform.default.css" media="screen" /> <script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js</a>"></script> <script src="jquery.uniform.js"></script></code></pre> <p>This relies upon a copy of jquery.uniform.js, uniform.default.css and the various images all being available on your webserver.</p> <h2>Basic usage</h2> <p>Using Uniform is easy. Simply tell it what elements to style:</p> <pre><code>// Style all <select> elements $("select").uniform();</code></pre> <p>To "uniform" all possible form elements, just do something like this. Things that can't get styled appropriately will be skipped by Uniform.</p> <pre><code>// Style everything $("select, input, a.button, button").uniform();</code></pre> <p>You can exclude elements too by using more jQuery selectors or methods:</p> <pre><code>// Avoid styling some elements $("select").not(".skip_these").uniform(); // Method 1 $('select[class!="skip_these"]').uniform(); // Method 2</code></pre> <p>A complete set of tags in the HEAD section of your site can therefore look like this:</p> <pre><code><!-- Make sure your CSS file is listed before jQuery --> <link rel="stylesheet" href="uniform.default.css" media="screen" /> <script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js</a>"></script> <script src="jquery.uniform.js"></script> <script type='text/javascript'> // On load, style typical form elements $(function () { $("select, input, button").uniform(); }); </script></code></pre> <h2>Extra parameters</h2> <p>You can pass in extra parameters to control certain aspects of Uniform. To pass in parameters, use syntax like what is seen here. This only changes the settings for the elements that are actually uniformed in this particular call.</p> <pre><code>$("select").uniform({ param1: value, param2: value, param3: value });</code></pre> <p>There is a separate listing of global defaults. You access them by using the <code>defaults</code> property. <em>Note: This property name changed in v2.0.</em></p> <pre><code>$.uniform.defaults.checkedClass = "uniformCheckedClass"; $.uniform.defaults.fileBtnHtml = "Pick a file";</code></pre> <p>Uniform v1.x had a bug where setting values in the call to <code>.uniform()</code> also potentially reset the defaults and redrew other uniformed objects with new settings. As of version 2.0.0 the global defaults are now completely separate from the settings passed to every <code>.uniform()</code> call. Extra parameters defined when instantiating Uniform are not global and can't be recalled from <code>$.uniform.defaults</code> later.</p> <h3 class="link">activeClass (string)</h3> <p><em>Default:</em> "active"</p> <p>Sets the class given to elements when they are active (pressed).</p> <pre><code>$("select").uniform({activeClass: 'myActiveClass'});</code></pre> <h3 class="link">autoHide (boolean)</h3> <p><em>Default:</em> true</p> <p>If this option is set to true, Uniform will hide the new elements if the existing elements are currently hidden using <code>display: none</code>.</p> <p>If you want to show a select or checkbox you'll need to show the new Uniform div instead of the child element.</p> <h3 class="link">buttonClass (string)</h3> <p><em>Default:</em> "button"</p> <p>Sets the class given to a button that's been Uniformed</p> <pre><code>$("input[type=button]").uniform({buttonClass: 'myBtnClass'});</code></pre> <h3 class="link">checkboxClass (string)</h3> <p><em>Default:</em> "checker"</p> <p>Sets the class given to the wrapper div for checkbox elements.</p> <pre><code>$(":checkbox").uniform({checkboxClass: 'myCheckClass'});</code></pre> <h3 class="link">checkedClass (string)</h3> <p><em>Default:</em> "checked"</p> <p>Sets the class given to elements when they are checked (radios and checkboxes).</p> <pre><code>$(":radio, :checkbox").uniform({checkedClass: 'myCheckedClass'});</code></pre> <h3 class="link">disabledClass (string)</h3> <p><em>Default:</em> "disabled"</p> <p>Sets the class given to elements when they are disabled.</p> <pre><code>$("select").uniform({disabledClass: 'myDisabledClass'});</code></pre> <h3 class="link">eventNamespace (string)</h3> <p><em>Default:</em> ".uniform"</p> <p>Binds events using this namespace with jQuery. Useful if you want to unbind them later. Shouldn't probably need to be changed unless it conflicts with other code.</p> <pre><code>$("select").uniform({eventNamespace: '.uniformEvents'});</code></pre> <h3 class="link">fileButtonClass (string)</h3> <p><em>Default:</em> "action"</p> <p>Sets the class given to div inside a file upload container that acts as the "Choose file" button.</p> <pre><code>$(":file").uniform({fileButtonClass: 'myFileBtnClass'});</code></pre> <h3 class="link">fileButtonHtml (string)</h3> <p><em>Default:</em> "Choose File"</p> <p>Sets the text written on the action button inside a file upload input.</p> <pre><code>$(":file").uniform({fileButtonHtml: 'Choose &hellip;'});</code></pre> <h3 class="link">fileClass (string)</h3> <p><em>Default:</em> "uploader"</p> <p>Sets the class given to the wrapper div for file upload elements.</p> <pre><code>$(":file").uniform({fileClass: 'myFileClass'});</code></pre> <h3 class="link">fileDefaultHtml (string)</h3> <p><em>Default:</em> "No file selected"</p> <p>Sets the text written in the filename div of a file upload input when there is no file selected.</p> <pre><code>$(":file").uniform({fileDefaultHtml: 'Select a file please'});</code></pre> <h3 class="link">filenameClass (string)</h3> <p><em>Default:</em> "filename"</p> <p>Sets the class given to div inside a file upload container that spits out the filename.</p> <pre><code>$(":file").uniform({filenameClass: 'myFilenameClass'});</code></pre> <h3 class="link">focusClass (string)</h3> <p><em>Default:</em> "focus"</p> <p>Sets the class given to elements when they are focused.</p> <pre><code>$("select").uniform({focusClass: 'myFocusClass'});</code></pre> <h3 class="link">hoverClass (string)</h3> <p><em>Default:</em> "hover"</p> <p>Sets the class given to elements when they are currently hovered.</p> <pre><code>$("select").uniform({hoverClass: 'myHoverClass'});</code></pre> <h3 class="link">idPrefix (string)</h3> <p><em>Default:</em> "uniform"</p> <p>If useID is set to true, this string is prefixed to element ID's and attached to the container div of each Uniformed element. If you have a checkbox with the ID of "remember-me" the container div would have the ID "uniform-remember-me".</p> <pre><code>$("select").uniform({idPrefix: 'container'});</code></pre> <h3 class="link">inputAddTypeAsClass (boolean)</h3> <p><em>Default:</em> true</p> <p>When true, <code><input></code> elements will get a class applied that is equal to their "type" attribute.</p> <pre><code>$("input").uniform({inputAddTypeAsClass: true});</code></pre> <h3 class="link">inputClass (string)</h3> <p><em>Default:</em> "uniform-input"</p> <p>Applies this class to all input elements when they get uniformed.</p> <pre><code>$("input").uniform({inputClass: "inputElement"});</code></pre> <h3 class="link">radioClass (string)</h3> <p><em>Default:</em> "radio"</p> <p>Sets the class given to the wrapper div for radio elements.</p> <pre><code>$(":radio").uniform({radioClass: 'myRadioClass'});</code></pre> <h3 class="link">resetDefaultHtml (string)</h3> <p><em>Default:</em> "Reset"</p> <p>This text is what's shown on form reset buttons. It is very similar to submitDefaultHtml.</p> <pre><code>$("input[type='reset']).uniform({resetDefaultHtml: "Clear"});</code></pre> <h3 class="link">resetSelector (boolean/string)</h3> <p><em>Default:</em> false</p> <p>This parameter allows you to use a jQuery-style selector to point to a "reset" button in your form if you have one. Use false if you have no "reset" button, or a selector string that points to the reset button if you have one.</p> <pre><code>$("select").uniform({resetSelector: 'input[type="reset"]'});</code></pre> <h3 class="link">selectAutoWidth (boolean)</h3> <p><em>Default:</em> true</p> <p>If this option is set to true, Uniform will try to fit the select width to the actual content. When false, it forces the selects to all be the width that was specified in the theme.</p> <p>When using auto widths, the size of the element is detected, then wrapped by Uniform and expanded to fit the wrapping.</p> <p>If you want to specify a size of a select element and then have Uniform wrap it appropriately, there will be some difficulty. The size of the element needs to get detected and then will be changed by Uniform. For this to happen, it is suggested you do one of these solutions when you have issues.</p> <ul> <li>Set a custom inline width for the element (<code><select style="width:XXpx"></code>)</li> <li>Use two css rules; <code>select { width: XXpx }</code> and <code>.selector select { width: 100% }</code></li> </ul> <p>If the select is empty and later populated via JavaScript, you can do one the following:</p> <ul> <li>Set a custom inline width for the element (<code><select style="width:XXpx"></code>)</li> <li>Uniform the element after it was loaded with options</li> <li>Use <code>$('select').uniform.restore().uniform()</code> to reapply Uniform to the selects that change</li> </ul> <h3 class="link">selectClass (string)</h3> <p><em>Default:</em> "selector"</p> <p>Sets the class given to the wrapper div for select elements, but not multiselects.</p> <pre><code>$("select").uniform({selectClass: 'mySelectClass'});</code></pre> <h3 class="link">selectMultiClass (string)</h3> <p><em>Default:</em> "uniform-multiselect"</p> <p>Sets the class given to the wrapper div for select elements that are multiselects.</p> <pre><code>$("select").uniform({selectMultiClass: 'myMultiSelectClass'});</code></pre> <h3 class="link">submitDefaultHtml (string)</h3> <p><em>Default:</em> "Submit"</p> <p>This text is what's shown on form submit buttons. It is very similar to resetDefaultHtml.</p> <pre><code>$("input[type='submit']).uniform({resetDefaultHtml: "Submit Form"});</code></pre> <h3 class="link">textareaClass (string)</h3> <p><em>Default:</em> "uniform"</p> <p>The class that is applied to textarea elements.</p> <pre><code>$("textarea").uniform({textareaClass: "myTextareaClass"});</code></pre> <h3 class="link">useID (boolean)</h3> <p><em>Default:</em> true</p> <p>If true, sets an ID on the container div of each form element. The ID is a prefixed version of the same ID of the form element.</p> <pre><code>$("select").uniform({useID: false});</code></pre> <h3 class="link">wrapperClass (string)</h3> <p><em>Default:</em> null</p> <p>When uniforming, the top level element that wraps the input is given this class. When elements would not normally be given a wrapper element, this option will create a wrapper element anyway. This can really help with running multiple themes on a single page.</p> <pre><code>$('input.blue').uniform({wrapperClass: "blueTheme"}); $('input').uniform({wrapperClass: "defaultTheme"});</code></pre> <h2>Additional Functions And Properties</h2> <p>In addition to the parameters, there are a couple of other ways you can interact with Uniform.</p> <h3 class="link">$.uniform.update([elem/selector string]);</h3> <p>If you need to change values on the form dynamically you must tell Uniform to update that element's style. Fortunately, it's very simple. Just call this function, and Uniform will do the rest.</p> <pre><code>$.uniform.update("#myUpdatedCheckbox");</code></pre> <p>If you don't mind updating all Uniformed elements or just don't specifically know which element to update, you can just leave out the parameter (see below) and Uniform will update all Uniformed elements on the page:</p> <pre><code>$.uniform.update();</code></pre> <h3 class="link">$.uniform.restore([elem/selector string]);</h3> <p>If you want to "un-uniform" something, simply call this function. It will remove the inline styles, extra dom elements, and event handlers, effectively restoring the element to it's previous state.</p> <pre><code>$.uniform.restore("select");</code></pre> <h3 class="link">$.uniform.elements[]</h3> <p>You can get an array of all the elements that have been Uniformed at any time using this public variable. I don't advise changing the contents!</p> <pre><code>var uniforms = $.uniform.elements;</code></pre> <h2>Customizing CSS</h2> <p>To edit the CSS of Uniform it is highly recommended to not edit the theme files, but to override them using CSS. Make sure your CSS file comes after the Uniform theme css file in the HEAD section.</p> <p>It's common to want to resize the selects or other elements. The best way is to set the width property on the div element, span element and the form element itself. Resizing "select" lists is a bit tougher as you need to change the line height. I suggest looking at the _base theme's SCSS file to see where the various width and height variables are used.</p> <p>If you'd like to create your own theme, take a peek at theme-kit/README.md. It's on <a href="https://github.com/pixelmatrix/uniform">github</a> and included in the <a href="http://uniformjs.org/downloads/theme-kit.zip">theme kit</a>.</p> <h2>Tips & Tricks</h2> <p>Uniform is supposed to be pretty simple, but there are a few things that can be tricky. Here are some tips that may make your experience simpler:</p> <ul> <li><p>Remember to change the CSS classes in the theme if you change the parameters for elements' classes. This can be tedious work, but if you don't do it, it's not going to look correct. Find and Replace is your friend.</p> </li> <li><p>Uniform cannot automatically sniff out dynamic value changes. If you make changes to elements in JavaScript or using a reset button of some kind, remember to call $.uniform.update(); to sync the changes with Uniform. See <a href="https://github.com/pixelmatrix/uniform/issues/270">Issue #270</a> for the little bit of code you will need.</p> </li> <li><p>Likewise, when you add elements to the DOM, perhaps via AJAX, and they need to get styled, you will need to use $('#newElement').uniform() on it so the styling is applied.</p> </li> <li><p>Uniform is disabled in IE6. It's not possible to fix due to the way IE6 handles form elements. If you care about IE6 users, give it a quick look to make sure your "naked" form elements look alright in there.</p> </li> <li><p>There is a bug in Safari 5.1 that will cause the web rendering process to crash when you use custom fonts. For more information, see <a href="https://github.com/pixelmatrix/uniform/issues/183">Issue #183</a>.</p> </li> <li><p>With IE 7-9, sometimes the "change" event doesn't get fired or doesn't get triggered at the right time. When we detect a change, Uniform may submit its own "change" event on the element. See <a href="https://github.com/pixelmatrix/uniform/issues/152">Issue #152</a> and <a href="https://github.com/pixelmatrix/uniform/issues/238">Issue #238</a>.</p> </li> <li><p>With IE9, you may have problems with some fonts on your site. See <a href="https://github.com/pixelmatrix/uniform/issues/226">Issue #226</a> if you mysteriously see a blank page or blank form elements. The fonts in Uniform have been arranged to work around this, but custom themes may not work properly.</p> </li> <li><p>If you have ideas, or bugs, please post them in <a href="https://github.com/pixelmatrix/uniform">GitHub</a>. We rely on our users' for improvement ideas and bug reports. Without your participation, Uniform will stay static.</p> </li> <li><p>If you are having problems with automatically sized select elements in Firefox, double check and ensure your CSS files are listed before jQuery, Uniform and your code that uniforms the form elements. Also check the selectAutoWidth property's documentation.</p> </li> </ul> <h2>Upgrading To 2.0 And Later</h2> <p>Your sprite map will now support many new things and will need to be updated. If you use custom backgrounds that are not in the sprite map, those will need updating as well.</p> <p>The uniform.options object was renamed to uniform.defaults since they are the default options. Other properties were renamed to be consistent or have less ambiguous names, such as <code>fileBtnClass</code> becoming <code>fileButtonClass</code>.</p> <p>Previously, calls to update() would render all elements with the most recent set of options. This has been fixed, but may change how your page looks. Test to make sure things still render as expected.</p> <p>$.uniform.noSelect is no longer exposed and has been updated to version 1.0.3.</p> <p>$.uniform.restore() does not need to be global; you now can use $('#myId').uniform.restore() instead to just restore some elements. Same thing for updates.</p> <p>The sprite changed a bit. The caps for select lists were moved to the left-hand side. Button theming was added and the file upload images were reordered to match the select list order. See the theme-kit/README.md file for further reading on this topic.</p> <h2>Reporting Bugs</h2> <p>It sure would be handy if you could create a test page to help illustrate bugs. When you use the <a href="https://github.com/pixelmatrix/uniform/issues">GitHub Issue Tracker</a>, you could clone this <a href="https://gist.github.com/4328659">bug template gist</a> or use <a href="http://jsfiddle.net/fidian/JNCFP/">this jsfiddle</a> to help illustrate your point.</p> <p>Even if you don't do that, all sorts of feedback is welcome, but narrowing down your problem or providing an example would immediately help narrow down the problem quickly.</p> </div> <div id="themes"> <h2>Themes</h2> <p> Theming is central to the philosophy of Uniform. We don't want you to feel limited to just using the default style. You can design your own theme with our <a href="http://uniformjs.com/downloads/theme-kit.zip">theme kit</a>. Most of the CSS can be generated by editing a SCSS (a variant of <a href="http://sass-lang.com/">SASS</a>) file and then running <tt>make</tt>. </p> <p>You can also download themes created by others. Here are some of our favorites:</p> <table> <tbody><tr> <td class="preview"><img alt="" src="http://uniformjs.com/images/preview-default.png"></td> <td class="name"><a href="http://uniformjs.com/downloads/uniform.default.theme.zip">Uniform Default</a></td> <td class="author"> by <a href="http://pixelmatrixdesign.com/">Josh Pyles</a> </td> <td class="download"><a href="http://uniformjs.com/downloads/uniform.default.theme.zip">Download</a></td> </tr> <tr> <td class="preview"><img alt="" src="http://uniformjs.com/images/preview-aristo.png"></td> <td class="name"><a href="http://uniformjs.com/downloads/uniform.aristo.theme.zip">Aristo</a></td> <td class="author"> by <a href="http://github.com/280north/aristo">280North</a> / ported by <a href="http://pixelmatrixdesign.com/">Josh Pyles</a> </td> <td class="download"><a href="http://uniformjs.com/downloads/uniform.aristo.theme.zip">Download</a></td> </tr> <tr> <td class="preview"><img alt="" src="http://uniformjs.com/images/preview-agent.png"></td> <td class="name"><a href="http://uniformjs.com/downloads/uniform.agent.theme.zip">Agent</a></td> <td class="author"> by <a href="http://command-tab.com/">Collin Allen</a> </td> <td class="download"><a href="http://uniformjs.com/downloads/uniform.agent.theme.zip">Download</a></td> </tr> </tbody></table> <p>Submit your theme by opening a new <a href="https://github.com/pixelmatrix/uniform/issues">issue</a>. We'll welcome the addition!</p> </div> <div id="contribute"> <h2>Contribute</h2> <p> Have ideas for Uniform? Want to submit a bug fix or patch? We collaborate on Uniform on GitHub, and we welcome you to join us as well! <a href="http://github.com/pixelmatrix/uniform">Visit Uniform on GitHub.</a> </p></div>

• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4

• Previous
• Next

Uniform - Sexy forms with jQuery

Have you ever wished you could style checkboxes, drop down menus, radio buttons, and file upload inputs? Ever wished you could control the look and feel of your form elements between all br…

Read more »

30 Free Toggle Switches UI Elements (PSD)

<p style="margin:15px 0px 20px;padding:0px;border:0px;font-family:'Droid Sans',sans-serif;font-size:14px;line-height:22px;vertical-align:baseline;color:rgb(102,102,102);background-color:rgb(255,255,255)">A toggle switch is a hinged switch that can assume either of two positions, such as an on/off button.  It is a switch which is used for breaking or connecting and electrical circuit, such as that present on a switch-board. <span id="more-2176" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline"></span>Toggle switches are now playing a part in the web designing and development industry as they are being used frequently as an UI Element. Toggle switches look really cool and help you enhance your design. It is especially useful in places where you want to give the visitors two choices to choose from. These help you spice up your website and make it more attractive and enhance the user experience.</p> <p style="margin:15px 0px 20px;padding:0px;border:0px;font-family:'Droid Sans',sans-serif;font-size:14px;line-height:22px;vertical-align:baseline;color:rgb(102,102,102);background-color:rgb(255,255,255)">Creating toggle switches from scratch can be a very tough and time consuming task, so this is where PSD files come in handy. The best thing about these PSD is that they are free of cost and easy to incorporate in your designs. They not only save the time and effort one has to spend in creating the toggle switches but also save you some bucks! So if you are looking for free toggle switches PSD files, then you are at the right place as today we have for you a list of 30 Free Toggle Switches UI Elements (PSD).</p> <h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://dribbble.com/shots/797923-Buttons-And-Switches-PSD" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Buttons And Switches(PSD)</a></h2> <img alt="ToggleSwitchesUIElements-16" class="aligncenter size-full wp-image-2198" height="330" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-16.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://psdspot.com/toggle-ui-switches-01/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Toggle UI Switches</a></h2> <img alt="ToggleSwitchesUIElements-17" class="aligncenter size-full wp-image-2199" height="330" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-17.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://dribbble.com/shots/595296-Raindrop-iOS-Toggle-PSD" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Raindrop iOS Toggle PSD</a></h2> <img alt="ToggleSwitchesUIElements-18" class="aligncenter size-full wp-image-2200" height="330" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-18.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://365psd.com/day/3-100/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">On/Off Switch Buttons</a></h2> <img alt="ToggleSwitchesUIElements-19" class="aligncenter size-full wp-image-2201" height="388" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-19.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://freebiesbug.com/psd-freebies/dark-essential-switches-toggles-psd/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Dark Essential Switches & Toggles PSD</a></h2> <img alt="ToggleSwitchesUIElements-20" class="aligncenter size-full wp-image-2202" height="292" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-20.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://365psd.com/day/345/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Toggle Switch Variations</a></h2> <img alt="ToggleSwitchesUIElements-21" class="aligncenter size-full wp-image-2203" height="243" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-21.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://www.premiumpixels.com/freebies/sort-switches-toggles-psd/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Sort Switches / Toggles (PSD)</a></h2> <img alt="ToggleSwitchesUIElements-22" class="aligncenter size-full wp-image-2204" height="262" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-22.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://365psd.com/day/3-245/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Switch Buttons</a></h2> <img alt="ToggleSwitchesUIElements-23" class="aligncenter size-full wp-image-2205" height="404" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-23.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://www.freebiesgallery.com/toggle-buttons-psd/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Toggle Buttons (PSD)</a></h2> <img alt="ToggleSwitchesUIElements-24" class="aligncenter size-full wp-image-2206" height="310" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-24.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://dribbble.com/shots/637597-Free-PSD-IOS-Toggle" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Free PSD: IOS Toggle</a></h2> <img alt="ToggleSwitchesUIElements-25" class="aligncenter size-full wp-image-2207" height="412" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-25.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://365psd.com/day/2-297/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Toggle Switch PSD</a></h2> <img alt="ToggleSwitchesUIElements-1" class="aligncenter size-full wp-image-2182" height="243" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-1.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://pixelsdaily.com/resources/photoshop/psds/matte-toggle-switch-psd/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Matte Toggle Switch PSD</a></h2> <img alt="ToggleSwitchesUIElements-2" class="aligncenter size-full wp-image-2183" height="310" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-2.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://www.pixeden.com/mobile-apps/psd-toggle-switch-ui" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Psd Toggle Switch UI</a></h2> <img alt="ToggleSwitchesUIElements-3" class="aligncenter size-full wp-image-2184" height="292" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-3.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://365psd.com/day/329/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Metal Toggle Switch</a></h2> <img alt="ToggleSwitchesUIElements-4" class="aligncenter size-full wp-image-2185" height="243" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-4.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://www.24psd.com/toggle-switch-psd/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Toggle On – Off Switch PSD</a></h2> <img alt="ToggleSwitchesUIElements-5" class="aligncenter size-full wp-image-2186" height="330" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-5.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://www.freebiesgallery.com/toggle-switches-psd/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Toggle Switches PSD</a></h2> <img alt="ToggleSwitchesUIElements-6" class="aligncenter size-full wp-image-2187" height="310" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-6.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://99psd.com/elements/gui/toggleswitch/glossy-psd-toggle-switches-ui/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Glossy PSD Toggle Switches UI</a></h2> <img alt="ToggleSwitchesUIElements-7" class="aligncenter size-full wp-image-2188" height="398" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-7.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://pixelsdaily.com/resources/photoshop/psds/psd-rounded-onoff-toggle/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Rounded On/Off Toggle</a></h2> <img alt="ToggleSwitchesUIElements-8" class="aligncenter size-full wp-image-2189" height="309" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-8.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://365psd.com/day/2-94/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Toggle Switch</a></h2> <img alt="ToggleSwitchesUIElements-9" class="aligncenter size-full wp-image-2190" height="324" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-9.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://freebiesbooth.com/red-on-off-switch" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Red On / Off Switch</a></h2> <img alt="ToggleSwitchesUIElements-10" class="aligncenter size-full wp-image-2191" height="413" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-10.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://365psd.com/day/2-350/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Sweet Little On/Off Switches</a></h2> <img alt="ToggleSwitchesUIElements-11" class="aligncenter size-full wp-image-2192" height="324" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-11.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://uielements.net/ui-elements/toggle-switches-ui-psd/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Toggle Switches UI PSD</a></h2> <img alt="ToggleSwitchesUIElements-12" class="aligncenter size-full wp-image-2193" height="508" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-12.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://freebiesbug.com/psd-freebies/switches-with-lights-and-shadows-psd/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Switches with Lights and Shadows PSD</a></h2> <img alt="ToggleSwitchesUIElements-13" class="aligncenter size-full wp-image-2194" height="284" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-13.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://dribbble.com/shots/447161-Slide-Switch-Freebie" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Slide Switch Freebie</a></h2> <img alt="ToggleSwitchesUIElements-14" class="aligncenter size-full wp-image-2195" height="412" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-14.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <a href="http://www.deepakjose.com/on-off-toggles/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">On-Off Toggles</a></h2> <img alt="ToggleSwitchesUIElements-15" class="aligncenter size-full wp-image-2196" height="275" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-15.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <strong style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline"><a href="http://www.premiumpixels.com/freebies/onoff-switches-and-toggles-psd/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">On/Off Switches and Toggles</a></strong></h2> <img alt="ToggleSwitchesUIElements-26" class="aligncenter size-full wp-image-2210" height="302" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-26.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <strong style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline"><a href="http://www.pixeden.com/mobile-apps/psd-toggle-switch-ui" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Toggle Switch UI</a></strong></h2> <img alt="ToggleSwitchesUIElements-27" class="aligncenter size-full wp-image-2211" height="277" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-27.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <strong style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline"><a href="http://365psd.com/day/3-133/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Switch</a></strong></h2> <img alt="ToggleSwitchesUIElements-28" class="aligncenter size-full wp-image-2212" height="300" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-28.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><h2 style="margin:0px 0px 5px;padding:0px;border-top-width:0px;border-right-width:0px;border-left-width:0px;font-family:'Source Sans Pro',sans-serif;font-size:24px;line-height:1.4;vertical-align:baseline;color:rgb(68,68,68);clear:both;background-color:rgb(255,255,255);border-bottom-width:1px!important;border-bottom-style:solid!important;border-bottom-color:rgb(204,204,204)!important"> <strong style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;line-height:inherit;vertical-align:baseline"><a href="http://pixelsdaily.com/resources/photoshop/psds/psd-fancy-slider-toggles/" target="_blank" rel="nofollow" style="margin:0px;padding:0px;border:0px;font-family:inherit;font-size:inherit;font-style:inherit;font-variant:inherit;font-weight:inherit;line-height:inherit;vertical-align:baseline;text-decoration:none;color:rgb(8,163,217)">Fancy PSD Slider + Toggles</a></strong></h2> <img alt="ToggleSwitchesUIElements-29" class="aligncenter size-full wp-image-2213" height="337" src="http://inspiretrends.com/wp-content/uploads/2013/07/ToggleSwitchesUIElements-29.jpg" style="margin: 2em auto; padding: 0px; border: 0px; font-family: 'Droid Sans', sans-serif; font-size: 14px; line-height: 22px; vertical-align: baseline; max-width: 100%; display: block; clear: both; color: rgb(102, 102, 102); background-color: rgb(255, 255, 255); height: auto !important;" width="550"><div> <br></div>

• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5

• Previous
• Next

30 Free Toggle Switches UI Elements (PSD)

A toggle switch is a hinged switch that can assume either of two positions, such as an on/off button.  It is a switch which is used for breaking or connecting and electrical circuit, such as that pres…

Read more »