The party is ON! Join us at TNW Conference 2021 in Amsterdam for face-to-face business!

The heart of tech

This article was published on December 26, 2012

    12 Awesomely geeky things we’ve loved in Web design in 2012

    12 Awesomely geeky things we’ve loved in Web design in 2012
    Harrison Weber
    Story by

    Harrison Weber

    Harrison Weber
    Story by

    Harrison Weber

    Harrison Weber is TNW's Features Editor in NYC. Part writer, part designer. Stay in touch: Twitter @harrisonweber, Google+ and Email. Harrison Weber is TNW's Features Editor in NYC. Part writer, part designer. Stay in touch: Twitter @harrisonweber, Google+ and Email.

    The world of Web design is constantly evolving and endlessly growing, and that’s exactly why it’s worth taking a step back and looking at how far we’ve come. Of course, designers and developers are never going to be purely serious (as you’ll see below), and that adds to the awesomeness of the Web.

    We previously highlighted things we loved halfway through the year, and now, as 2012 comes to a close, our list of all-time favorites has arrived. Here’s a list of 12+ trends, products and toys we’ve loved in 2012, the useful, the funny and everything in-between. Also, don’t miss our other 2012 lists for more great recommendations.

    1. Parallax

    Out of all the Web design fads to emerge since the glossy days when Web 2.0 was cool, scrolling parallax websites have emerged as a surprisingly powerful and useful trend. This attention-grabbing technique certainly isn’t new, but is fast becoming a popular tool for generating interest.

    TNW Conference is back, baby!

    Secure your spot today at super early bird prices!

    GET TICKETS

    If you’re interested in creating a site like  Living Word, Jan Ploch or Nike Better World, here’s an impressive plugin that speeds up the entire process:

    ➤ Parallax websites with Scrollorama

     

    2. Firefox OS

    What’s better than a desktop operating system built atop the Web? A mobile Web operating system, where Web apps finally get top billing.

    Since first being announced back in July 2011, Mozilla has slowly but steadily revealed new details of its upcoming mobile operating system, Firefox OS (formerly Boot to Gecko). Now, thanks to a simple Firefox add-on, anyone can play with the new phone OS via a simulator in a matter of minutes (bandwidth permitting). Previously, users had to set up B2G Desktop manually, which was a bit more difficult. It’s noteworthy that this add-on still relies on B2G Desktop, but simplifies the installation and update process.

    ➤ Learn more here and here.

     

    3. Awesome jQuery Plugins 

    In order to keep this list from going on endlessly, we’ve consolidated some of our favorite jQuery plugins together, along with others that have been on our radar:

     

    4. Endless Inspiration

    This is nothing new, but the Web is chock full of design and dev inspiration, and so we went heads down, talked with our readers and pulled together a massive list of 98 incredible sites for inspiration.

    At the time, we wrote: In the end, it doesn’t matter at all how the inspiration comes, just so long as you know how to tap into it. Whatever you do, don’t be afraid to look around.

    ➤ Searching for inspiration? Here’s 98 places to look

     

    5. Google Web Fonts

    There are currently 613 font families in the Google Web Fonts directory. Many of them are awful. Very awful. But there are also high-quality gems that certainly deserve a closer look.

    Beautiful Web Type show off the potential of Google’s free typefaces in all their glory. Trust me: you don’t want to miss this.

    ➤ Gorgeous Google Web Fonts

     

    6. Type Connection

    While a dating game sounds a bit out of the ordinary to the world of typography, designer Aura Seltzer’s Type Connection turns the complicated process of matching typefaces into an entertaining learning opportunity.

    First, start by choosing a typeface to pair. Like a conventional dating website, Type Connection presents you with potential “dates” for each main character. The game features well-known, workhorse typefaces (Garamond, Univers, Archer, etc.) and portrays each as a character searching for love. You are the matchmaker.

    ➤ Typographic Dating Game

     

    7. Adobe’s Edge Family & Creative Cloud

    It’s no secret that Adobe has long played a highly important role in Web design, and now it seems rather fitting that its offering has actually expanded to the Web with Creative Cloud. With Adobe’s surprising acquisition of Behance, we have no doubt that Creative Cloud will impact the way creatives share their work online.

    Adobe’s Edge Family, which premiered in September, differs greatly from Adobe’s Creative Suite, as it focuses entirely on the Web. The current Edge offerings are still far from perfect, but the products signify how important Adobe believes the future of Web design is, even if that future doesn’t include Flash.

    ➤ Check out: absolute beginner’s guide to Edge Web Fonts

     

    8. The Retina Web

    Alright, perhaps this isn’t something we’re loving immediately, but high-resolution displays, largely thanks to Apple’s Retina push, means the Web will have to evolve quickly to take advantage of that development.

    As we’ve said, it will take quite a long time before images catch up, but what’s genuinely exciting is how beautiful complex Web typography looks on Retina displays. Add in the emergence of SVG and CSS-based graphics, and the Web becomes significantly more responsive. Adobe also recently embraced Retina displays for Photoshop and Illustrator.

     

    9. Looking forward: HTML5

    HTML5 will hopefully become a default standard within the next one to three years, but for now, we’re getting our hands dirty ahead of time. If you have been following this space, you’re bound to already know a few of the most press-worthy HTML elements out there, namely <canvas>, which can be used for complex animations and graphics, <video>, which works similarly to the <img> tag, allowing for natively embedded video without 3rd party plugins like Flash, and <audio>, which works just like <video>.

    ➤ HTML5′s new tags

     

    10. Icon Fonts

    TNW first covered the growing popularity of icon fonts back in January, and since then the Web has practically exploded with impressive icon fonts.

    For those that are out of the loop, you can think of an icon font as a grown-up version of dingbats…with an actual use-case. The core idea is to take a set of icons or pictograms that would normally be implemented as an image or vector file and then convert it into a font. There are many reasons to do this too, according to Pictonic, as an icon font can load as much as 14% faster than images and can to be as much as 90% smaller than SVG files.

    ➤ Our List of 7 Gorgeous Icon Fonts

     

    11. Kern.js

    Created by Brendan Stromberger and integrated with the well-loved Lettering.js plugin, Kern.js is a genius bookmarklet that puts designers back in control of their site’s typography.

    If you’ve every felt the need to adjust your site’s kerning, line-height or letter placement, you’re going to want to check this bookmarklet out.

    ➤ Kern.js

     

    12. Moar:

    More than anything else, it’s simply exciting to see the Web evolve right in-front of us. If you’re searching for more Design & Dev news, tips, apps and sharables, check out TNW’s full D&D channel here.

    Image credits: InvernoDreaming, Thinkstock, AFP / Getty Images

    Disclosure: This article contains affiliate links. While we only ever write about products we think deserve to be on the pages of our site, The Next Web may earn a small commission if you click through and buy the product in question. For more information, please see our Terms of Service.