The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off.

There are very few, if any, websites on the Internet that don’t undergo at least a minor facelift at some point in their lifecycle. If you own a business with a web presence, at some point, that site will need to be redesigned, whether it’s due to the changing nature of your business, or purely for aesthetic reasons.

Redesigning your company site can be a major undertaking, so we’ve put together a helpful list of things to keep in mind when considering a redesign.


1. Why Are You Redesigning?


This is perhaps the most deceptively complex, yet obvious question of all. Before undergoing any redesign, however, it’s important to understand what it is you wish to accomplish. Are you unhappy with the way your site functions? Do you simply want a better-looking site? Do you need to improve search engine rankings and sales conversions? Maybe the focus of your business has shifted and it’s time for new content.

SEE ALSO: 17 Web Resources for Improving Your Design Skills

These are all important factors to consider, so before you start, make a detailed list of what it is you wish to accomplish during the redesign. This will help guide you through the rest of the process and make sure you stay focused on the end goal.


2. What Type of Redesign Do You Need?


Now that you’ve decided exactly why you want to redesign your site, it’s time to decide just how far down the rabbit hole you need to go. Perhaps a small change in visuals and content is all that’s necessary. On the other hand, you may need to add new features or completely redo your underlying code base. Depending on your needs and budget, a large overhaul may be out of the question, or it may be the most cost-effective long-term solution, so take a moment to think about your needs going forward and work with your developer to strike a balance that best meets them.


3. What Does and Doesn’t Work Currently?


No matter how large or small the redesign, chances are there will be some elements of your existing site that work very well and some that don’t work at all. Now is the time to go through your site and identify these elements. Maybe your content is too verbose or your sales page isn’t very user-friendly. On the other hand, that photo gallery and the blog may be big-ticket items that do really well for your image and bring in lots of traffic. Some elements will need to remain (though possibly given a makeover), some will need to be cleaned up and some will have to go. Break your site down into its key components and then compare those with the goals you decided on in step one and the overall vision for your web site. If something doesn’t fit, it’s out.


4. How Is Your Site Being Used?


Along these same lines, don’t forget to take a look at how users are currently interacting with your site. This will help you identify great content and problem areas. Study your traffic statistics and site analytics for information on things such as entry and exit pages, sales conversions, and search engine keywords. This will help you to understand how visitors find your site and what they do once they get there. While you’re studying those statistics, also have a look at details like screen resolution and browser usage. This will help your developer determine what technical specifications your site should meet and whether a separate mobile version of your site is recommended, among other things.


5. Has Your Brand or Company Image Changed?


If you’ve undergone changes to your brand and company image, those changes need to be reflected in your site, even if the only updates are visual. Keep your logos updated and consider a color-overhaul if the corporate image or philosophy has shifted. Your website is often the first impression people get of your business, so it should grow and mature right along with the rest of your brand identity.


6. When and How Should You Launch Your Redesign?


When and how you launch your redesign can have a big impact on your traffic and in generating buzz about your new site and your product. Maybe you’re simply making improvements and want to slowly roll out changes over time and unannounced. This unobtrusive rollout won’t give you a lot of buzz, but it will still accomplish your goals of improving the site’s performance and the user’s experience. On the other hand, a big relaunch around the holidays or at the start of a big promotion, or when announcing a major change in the way your business operates can both draw traffic and generate more interest.


7. How Do I Make the Transition Smoother?


Most people are a little intimidated by change. If you have a site that gets a lot of repeat traffic, a sudden, drastic change in form and function can be a bit off-putting to some users. Further, you don’t want this drastic shift to damage search engine rankings and suddenly destroy any and all backlinks you may have gathered over the years.

Try and keep vital elements of your site similar to their existing counterparts, such as the main navigation and header. Usually, your redesign should strive to be an evolution of your existing site, not a dramatic replacement. If the change is dramatic, make sure it’s clear and give your users a blog post or news announcement discussing the changes.

Similarly, you want to make things easy for the search engine spiders, as well. Moved content should be redirected via 301 redirects, for instance, and error pages should be helpful and transmit the correct header information and meta data. For human visitors, make sure those error pages contain helpful information that is, where possible, relevant to the content the user was trying to access.


Series Supported by join.me


The Web Design Usability Series is supported by join.me, an easy way to instantly share your screen with anyone. join.me lets you collaborate on-the-fly, put your heads together super-fast and even just show off. The possibilities are endless. How will you use join.me? Try it today.

Image courtesy of iStockphoto, Kontrec

More About: web design, Web Design Usability Series

Dan Dao is a Reporter at Fueled, an iPhone & Android app development agency based in New York City, where he writes about the tech industry. You can follow him on Twitter @da0_o and read the blog on Fueled.

Employers who hire designers are often not designers themselves. That reality can cause a disconnect between what designers display in their portfolios and what employers are actually looking for.

If you’re curious about the types of design portfolios that shine at job interviews, why not learn from the employers who loved them? Below, three employers share useful tips about maximizing the appeal of your online portfolio.

1. Choose the Right Hosting




Make sure you choose the right hosting and content management system (CMS) to feature your work. Whether you’ve built your own website or plan to use a portfolio service (like Carbonmade above), make sure your site will translate identically across all web browsers (Google Chrome, Firefox, Safari, etc.).

Image courtesy of Veronica Pisano

2. Simple, but Professional Presentation

The goal of your portfolio is to make your work accessible. Fancy, animated designs may look interesting, but they can distract from the actual work you’re attempting to showcase. Simplicity will translate as professionalism more often than fancy, overdone graphics. As far as aesthetic and visual presentation, keep it simple and neat, and let the work speak for itself.

  • David Lifson, CEO of Postling: “Oftentimes, designers will have brochure websites, and I find that those are not helpful. I look for data-dense examples, something where there’s more usability than visual design. That’s what I would say highly functional websites are built on.”

  • Merill Stubbs and Amanda Hesser, co-founders of Food52: “Whatever you’re shown, whether it be a website or a specific presentation…[it] should be very professional.”

  • Carter Cleveland, CEO of Art.sy: “Although it is an opportunity to show your chops and do something fancy, I’ve seen more examples of people failing to pull it off…I’ve seen more ‘fancy’ websites done badly than done well.”

Image courtesy of Alastaire Allday

3. Make it User-Friendly

Stubbs and Hesser warn that although employers may like a designer’s visual work, the designer “might not understand the user experience implications of their designs.” By making your design portfolio user-friendly, you’re displaying an understanding of navigability and user experience. If your portfolio is user-friendly, chances are the product you design will be user-friendly as well.

Start by reducing the number of clicks and links, as well as the amount of scrolling needed to access all of your content, suggests Cleveland.

Image courtesy of We Are Sofa

4. Know Your Audience

Determine the specific skills your potential employers are looking for. For instance, bonus expertise in product management, web development (HTML, Javascript, and CSS) or marketing adds bonus points to the portfolio of a clearly talented designer.

Each employer will have different hiring needs, and you need to adapt accordingly. Food52’s Hesser and Stubbs needed a designer with experience in building social sites due to the strong social aspect of the company, while Lifson and Cleveland were looking for someone with experience in product management as well as design. Smaller companies in particular will seek designers with versatile experience, which can include knowledge of different programs like Photoshop and Fireworks.

Seen above, designer Jordan Fretz provides a full list of tools with which he is familiar alongside a detailed description of his background.

Image courtesy of Jordan Fretz

5. Have a Varied Portfolio

Hesser and Stubbs say, “A portfolio that is varied is important so you can work with as many different types of clients as possible.” Food52’s designer Camillia Benbassat features works in her portfolio that use different types of media. Dragging your mouse over each photo in her showcase reveals the name of the company, the type of media, and a few essential details about the project. Each is clearly labeled and categorized, whether by web design, mobile app, user experience, identity, print or packaging.

Image courtesy of Camillia BenBassat

6. Be Organized

While including many examples is a plus, you still need to clearly sort and organize your work in the porfolio. On Elliot Jay Stocks’ website, the top header showcases featured work, but the remainder of the showcase is organized by client and project type.

Image courtesy of Elliot Jay Stocks

7. Be Accessible

Your contact information should be the easiest thing to find on your site. Include multiple forms of contact, if possible. Designer Jared Christensen nicely presents his LinkedIn profile next to his resume, in addition to other social networking sites under his About Me page.

Image courtesy of Jareditigal

8. Keep it Current

Frequently updated portfolios show that you take enough pride in your work to actively produce more. Even if your portfolio contains a few unfinished projects, provide samples alongside a “work in progress” note, as designer Matt Bango does on his portfolio.

Image courtesy of Matt Bango’s Portfolio

9. Credibility

It’s important to build and maintain credibility. This means you should be able to reproduce and tweak everything in your portfolio. Part of Postling’s hiring process involves contracting the applicant to complete a small (paid) work assignment. “I want to see that [the designers] can actually produce what their portfolio says they can produce,” Lifson says, “because you never know if sometimes they get some help.”

Hesser and Stubbs look more at past experience. They believe a designer’s former employment indicates whether she is accustomed to deadlines and memos, and maintains a level of professionalism.

Cleveland also looks for what he calls “social proof,” in other words, past work credentials or testimonials. Providing links to these things on your site makes it easier for the employer to get an immediate sense of your professionalism.

Image courtesy of Jamie Kim

10. Share Your Portfolio

Once you’ve created a stunning portfolio, share and advertise across multiple platforms. Postling says designers need to “get their work out in the open, whether on Forrst, Dribbble or Tumblr. Provide links to your portfolio from various social networking sites such as Facebook and LinkedIn, as well as in the signature of your work email. You’ll get more views of your showcase, which can lead to more interviews.

Image courtesy of Postling

More About: design, jobs, MARKETING, web design

For more Dev & Design coverage:




Mollie Vandor is the Associate Product Manager at Cooking.com. Prior to that, she helped launch Ranker.com, where she served as the Product Manager, amongst many other roles. You can reach her @mollierosev, on her blog, or on her latest addiction – Words With Friends, where she plays under the username “Mollierosev.”

While summer vacation winds to a close and students prepare to go back to school, the days of brand new backpacks and crisp notebooks are long gone for many adults. Although classrooms, teachers and tuition might be off the table, it doesn’t mean education needs to be.

In fact, the Internet itself provides a wealth of educational opportunities. Furthermore, long summer days and relatively relaxed offices might provide the perfect setting for web education. Just think, while other people are rounding out their summer tans, you could be ringing in autumn with a whole new skill set — in this case, web design expertise. Tans fade. Beefier resumes keep shining.

Here’s a look at some of the best web resources for web design education.


101


Design 101 is all about the basics: master the lingo, learn the software and familiarize yourself with the driving principles that govern good design. To that end, your first stop should be a survey course of sorts. Try the Psdtuts+ self-study curriculum, where you can soak up the basics of shape, spacing, rhythm, typography, color, texture and more. To reinforce those basic skills, check out the Albany Library Design Tutorial, a sort of interactive “design for dummies.” While the tutorial is a bit old school, technologically speaking, design-wise, it effectively covers the basics.

You may also want to learn a little bit about the grid system while you’re at it. The system is exactly what it sounds like: a grid or set of guides on which the elements of a web page are built. Working with the grid can help in mastering the art of clean, cohesive web design. And speaking of cohesiveness, you may also want to review Web Pages That Suck for examples of how not to utilize your newly minted design skills.

Once you’ve tackled design theory, get practical with Adobe Design Center. It has all the tools you need to turn that theory into design reality. If you’re more of a visual learner, investigate this collection of helpful YouTube Photoshop tutorials.


Upper Division


You’ve mastered the basics, which means you’re ready for some fresh challenges and inspiration. For example, participate in The Daily Design Challenge by pledging to take on one design-related task per day for a full year. Whether you design a new font, doodle a small graphic or create a new logo for a beloved brand, set aside a few minutes every day to keep your skills sharp and your creative juices flowing.

If you’re really looking for a challenge, Layer Tennis is the web’s most creative competition. Sponsored by Adobe Creative Suite, Layer Tennis pits two competitors against each other in a weekly match-up. Every fifteen minutes, participants swap a single design file “back and forth in real-time, adding to and embellishing the work.” A writer provides play-by-play commentary while an active community of design aficionados looks on, providing a great forum to witness inspirational creative design in action.

Next, use that creative inspiration to fuel some serious studying. MIT offers free online coursework in comparative media, in which you learn about the design principles of different mediums. Similarly, iTunes offers podcast lectures about aesthetics and the philosophy of art. Vimeo’s Smarthistory videos discuss everything from Representations of David and the Florentine Renaissance to Duchamp and the Ready-Made, because there’s nothing like a little art history to help you create design history of your own.


Ongoing Education


Once you’ve gained a comprehensive understanding of the basics, a background of art history and a fresh set of advanced skills, ongoing education can provide you with the tools necessary to showcase your talent, not to mention the additional innovation to advance your craft.

According to Smashing Magazine, “The résumé is the first portfolio piece that potential employers see, and if they’re not impressed, chances are they won’t look at the rest of your portfolio.” Smashing offers a great tutorial to ensure that your résumé showcases your design skills. While you’re at it, make sure your portfolio illustrates the best of your aesthetic abilities.

Nothing inspires your future work quite like taking in current innovative design. To that end, check out the creative collection at Designspiration. Tumblr is also a great resource for finding fantastic designers, and Quora’s active community of graphic designers engages in dynamic conversation about the industry. Finally, Twitter has a plethora of design people worth following.


Whether you’re looking to get a grip on design basics, or you want to sharpen your advanced skills, web resources can help you construct the perfect creative (and flexible) curriculum. And with the right smartphone or tablet, you can even study while soaking up the last of the summer sun. Now that’s what we’d call an advanced placement course!

Image courtesy of iStockphoto, enviromantic

More About: design, education, web

For more Dev & Design coverage:




Martin Odersky is Chairman and Chief Architect of Typesafe and creator of the open source Scala programming language. This post was co-authored by Chris Conrad, an engineering manager who is part of the Search, Network and Analytics team at LinkedIn.

While interacting with social media and other consumer websites has become routine for many of us, ensuring a seamless, positive user experience is still the Holy Grail for web developers. The volume of queries and messaging on websites increases every day, as does the challenge of keeping the underlying infrastructure running smoothly for millions of users.

Below, we’ll highlight key challenges facing web developers of high volume sites, provide examples of how to address these hurdles, and discuss the role of emerging open source platforms as a modern approach to overcoming them.


Three Key Challenges


  • Performance: While web application developers of high volume sites face many challenges, performance tops the list. With consumers now demanding blazing computing speeds and uninterrupted service, a wait time of 250 milliseconds can mean the difference between a successful service and a failed one. For key user operations, such as interactive, real-time slicing and dicing of large data sets, performance is essential. The application needs to perform flawlessly and logically in order to attract and keep consumers.
  • Efficiency: When operating services on a massive scale, it’s essential to make the most efficient use of hardware assets. For example, optimize the use of memory and available processing resources. In practice, this often means using event-driven and distributed architectures like node.js, versus previous generation thread-based models like traditional Java Servlets. Developer productivity programming languages are further facets of efficiency. Fewer lines of code, made possible by concise languages like Scala and Ruby, generally translates to higher productivity for application developers.
  • Reliability: Systems need to remain resilient against component failures, including hardware, software and network crashes. An ever-expanding ecosystem of applications depends on reliable access to user-generated content, like LinkedIn’s, for instance. As such, the network needs to target “five nines” availability goals that have previously been benchmarks for the telecommunications and electrical power industries.

  • Real-World Applications


    LinkedIn faces these challenges every day and is always looking to incorporate the most advanced technology to keep its services running smoothly, reliably and efficiently. For example, to support the Signal product introduced last year, LinkedIn created a high performance web service written in Scala. This service is accessed through a REST/JSON-RPC model that enables quick ad hoc data manipulation and fast iteration from the web-based user interface.

    For its real-time people search service (with a peak demand exceeding the hundreds of queries per second), LinkedIn uses a scatter-gather approach that distributes search queries in parallel across a large server farm. This approach balances quick response time with efficient use of server resources.

    To support reliability, LinkedIn created a cluster management and workload distribution library called Norbert, which it implemented in the open source Scala programming language. It then incorporated open source technologies from the Apache ZooKeeper, Netty and Protocol Buffers projects. Norbert is a key component of several mission-critical applications at LinkedIn, most notably its social graph engine, which fields a high volume of requests per day.


    Open Source – Solving Today’s Modern Programming Challenges


    In the last few years, many new open source technologies have emerged to help web application developers. Open source projects such as Norbert, now available under the open source Apache license at sna-projects.com, are readily available to web developers charged with tackling such challenges.

    Open source programming languages and frameworks that enable parallel and distributed computing can be especially helpful in keeping today’s most trafficked websites running steadily and smoothly. Below are key considerations to keep in mind when programming for today’s multicore paradigm:

    • For applications that benefit from highly interactive user experiences, like LinkedIn Signal, developers should consider breaking data-intensive functionality into asynchronous web services that can be integrated into the web-based user interface using REST-style APIs.
    • To encourage “efficiency by default” for today’s web-scale applications, developers should look to modern frameworks like Akka and Norbert that incorporate capabilities like event-driven processing, asynchronous I/O and cluster-aware fault tolerance.
    • For applications that can truly scale up and scale out, developers should favor languages like Scala that provide first class support for functional programming, which discourages the use of mutable state. This allows applications to more easily scale hundreds of cores on a single server, and thousands of servers on a network.

    In summary, web applications and their supporting infrastructure need to be robust and efficient as more of society shifts its everyday interactions online. Fundamental advances in technology, many driven by the open source community, are making it possible for today’s web application developers to stay ahead of the scalable computing needs of consumers.

    Image courtesy of Flickr, Fon-tina

    More About: apps, linkedin, programming, Web Development

    For more Dev & Design coverage:




This post originally appeared on the American Express OPEN Forum, where Mashable regularly contributes articles about leveraging social media and technology in small business.

There is one rule that typically holds true for all small businesses — they care about their customers. To a small company, customers aren’t just another cog in the mechanism, they’re the lifeblood of the business. Many small business rely on the support and repeated business of a loyal user base. So as a small business owner, naturally, you want to take care of your customers.

Here are a few tips for how “going the extra mile” can be applied to your web site. We’ve put together a list of five things you can do to make your customer’s time on your site more enjoyable and more productive.


1. Have a Mobile Version of Your Website


With mobile device usage skyrocketing, a mobile-friendly web site is practically essential. A mobile site means your customers can access information on the go, wherever they may be. It also means they’ll be more likely to share your site with friends, since they’ll be able to pull it up and show it to others, even when not at a computer.

As an added bonus, mobile sites can often be more accessible to those with visual impairments, or who may have difficulties using a mouse, but find touch displays easier to manipulate.

If you can’t afford to go all out and have a separate version of your site for mobile users, then at least speak with your developer and make sure they are aware that you want the web site as functional and legible as possible on mobile devices.


2. Provide Supplemental Information


Your users are looking for information. Period. Even if they’ve come to your site to make a purchase, they’ll first want to research their options and check out the details of what it is they’re buying. Consider making this task easier by providing supplemental information that complements your site’s primary content.

Take the time to provide your customers with information such as product manuals, warranty information, manufacturer contact details, sizing charts and troubleshooting guides. This not only says “We care about you,” but it also makes your site an invaluable resource that visitors will keep coming back to again and again for the life the product or service they purchase.


3. Use AJAX for Simple Tasks — But Don’t Overdo It


Implementing AJAX functionality (using JavaScript to load content into portions of your page without reloading the entire web page) can go a long way toward making your visitor’s experience on your site enjoyable. AJAX can make retrieving and browsing information faster and more intuitive, and it also creates a more seamless experience for the user. Be careful, though — too much JavaScript can slow things down and make interactions confusing, causing more harm than good. (It can also make bookmarking or sharing portions of your page more difficult for users.)

Finding the right balance varies based on the type of site you have and the products or services you offer, so it’s best to work out the details with your developer. Some examples of good AJAX usage include: loading and switching between product images and checking for and reporting errors in order forms or updating shopping carts.


4. Make It Easy To Get Help


Sometimes, no matter how much supplemental information or details about your product or service you provide, it’s just not going to be enough. Some of your customers are just going to need more help. Make it easy for them by providing answers to frequently asked questions (include links to additional resources) and by placing your company’s contact information (or help desk information) prominently on your website.

Your users should be able to find a way to contact you from every page, be it an email address in the footer, a phone number in the header or a button or link within the content prompting them to inquire for more information.


5. Keep it Simple and Keep it Organized


We’ve talked a lot about providing additional information, using AJAX to build a responsive website and prominently displaying contact and support information. With all of that in mind, it may seem like your website could quickly get out of hand, and without proper attention to detail, it certainly could. You don’t want your site to look cluttered or give your users a case of information overload, so it’s key to keep your site clean and well-organized. Work with your designer to develop ways to keep information accessible, yet unobtrusive.

If you’re building your own site, a good rule of thumb is to look at the design you’ve chosen and then ask yourself, “What can I remove to make this easier to use?” It could be an entire block of text or simply a background color or border. Once you start de-cluttering, you’ll be able to see if items should be shifted to other places in the layout, different pages or removed entirely. Keep revising until you have a site that’s clean, well organized and easy to navigate.


More Small Business Resources From OPEN Forum:


15 Keyboard Shortcuts To Enhance Your PC Productivity
5 Services For Building Websites On A Budget
10 Accessories To Boost Office Morale
Top 5 Foursquare Mistakes Committed By Small Businesses
How To Use Social Media For Recruiting

More About: Ajax, mobile websites, Small Business Resources, web design, website

For more Dev & Design coverage:




Already using Google+? Follow Mashable’s Pete Cashmore for the latest about the platform’s new features, tips and tricks as well as social media and technology updates.

Now that you’ve had a few weeks to get your feet wet with Google+, it’s time to make sure your other web properties are linking to your +Profile in style.

SEE ALSO: Google+ Tips & Tricks: 10 Hints for New Users

As always, the web is teeming with talented and generous artists who offer their visions of a more beautiful Internet up for free. We’ve sampled their wares and chosen the classiest badges and buttons that will alert your readers in no uncertain terms: “Hey, I’m doing things on the Google+!”

Found any beauties we missed? Link away in the comments.

1. The Google+ App, by David Walsh

Probably the defining Google+ icon on the web right now, the subtle gradients and light shadow give David Walsh’s contribution the look of a smooth stone. It’ll make a nice addition to any webpage or app dock.

2. A Google Rainbow, by Samuel McQueen

What it lacks in texture, it makes up for with a fresh take on Google’s color scheme.

3. A Clean Vector, via Sean McCabe

Here’s the original inspiration for Walsh’s, created by designer Sean McCabe. This option includes the big plus.

4. A Bit of Texture, via Creative Nerds

This four-pack comes with and without grain.

4. Assorted +1 Items, via IconShock

If your site favors the shiny 3D, look no further than this pack of graphic trinkets.

6. A Subtle Shine, by ~abhashthapa

At first glance, this pack may seem similar to those previously discussed. But the bevel of light that runs across each one adds a glossier feel. What’s more, the set comes with the white versions, as well as their non-glossy counterparts.

7. Circular With a Waving Banner, by Taiyab Raja

This little number makes thematic use the Google+ “circles,” and adds the logo colors with a waving banner. It’s a great choice for an airy blog theme.

Mashable clouds sold separately.

8. A Touch of Glass, via Serif Tuts

We really like these. View them at full size for maximum appreciation.

9. Inverted Metal, via The Icon Deposit

In a word: epic.

10. A +Fresh Font, by David Silva

Silva freshens up the Google logo with a new font — great for design-centric sites. It’s based on Sean McCabe’s original vector.

More About: design, Google, Google Plus, icons, List, Lists, Social Media, social media icons, web design

For more Dev & Design coverage:

In the same way that bar codes don’t have to be boring, quick response codes can also be creative. Thanks to a 30% tolerance in readability, you can have some real fun with clever designs. Besides looking good, this can also make them more successful.

“Designer QR codes are not only a way to make your 2D barcode stand out, but they also add a more human element to the otherwise cold and techie appearance,” says Patrick Donnelly, QR code designer and expert. “This could be the difference between someone scanning your code or not.”

Take a look through the image gallery for 15 brilliant designs created for a range of businesses from big names such as Disney, little names such as local restaurants and even conceptual ideas. Let us know in the comments if a clever design would make you more likely to scan a code.

1. Ayara Thai Cuisine




Designed by Paperlinks, a charming elephant drawing adds a dash of Asia to this LA restaurant’s QR code.

2. True Blood

HBO’s True Blood season 3 was the first TV series to get a designer QR code in an ad, thanks to a collaboration between Warbasse Design, .phd agency and SET Japan.

3. Magic Hat Brewing Company

This clever code from Patrick Donnelly is made up of bottle tops and links to the beer company’s mobile optimized Facebook page.

4. Help Japan Now

Chances are you’ve already seen SET’s “Help Japan” design. As well as extending the code to make an instantly recognizable red cross, the faux parts of the code contain related symbols for an arresting overall effect.

5. Louis Vuitton

Another SET creation, QR codes get playful with a dose of Takeshi Murakami-influenced design for Louis Vuitton’s mobile website

.

6. Corkbin

Wine app Corkbin gets the Paperlinks treatment with a design that co-ordinates with, and even features, its distinctive logo.

7. Disney

Cliffano Subagio spotted these awesome Disney codes in Japan where QR is a well established marketing tool.

8. Discover LA Tourism Bureau

This Paperlinks code is both cool and calm with made-you-look palm trees that add a special design touch.

9. Pac-Man

An experimental design from Patrick Donnelly, we love the witty, retro appeal.

10. Greenfield Lodge

The dots from Greenfield Lodge’s floral logo are replicated throughout the design to great effect.

11. M&Ms

Anther concept design from Patrick Donnelly, we like the idea of arranging real-life objects into a scannable code.

12. The Fillmore Silver Spring

Paperlinks added musical instruments into this concert venue’s design, a neat way to tease consumers into reading the code.

13. Burtonwood & Holmes

Artists Tom Burtonwood and Holly Holmes have fun by extruding the classic code design with a code-within-a-code concept.

14. The Wine Sisterhood

As well as integrating elements from the group’s logo, we like how Paperlinks made the design appear painted with wine.

15. TIME

These striking TIME covers from SET show just how creative you can get with QR codes.

BONUS: Farmville

Patrick Donnelly is such a QR code enthusiast, he spent months on Farmville “growing” a design!


More About: barcodes, design, gallery, List, Lists, MARKETING, QR Codes, trending

For more Dev & Design coverage:

Posters are a great way to cheer up your work space, whether your home office, the walls of your cubicle or even your swanky corner suite.

We’ve got a great selection of geeky posters and prints from classic Apple advertising to curious Android typographical illustrations.

Take a look through the image gallery, click through on the blue title text for more info on each image, and let us know in the comments which posters you’d pick for your office.

1. xkcd Map of Online Communities




xkcd’s “Map of Online Communities” is a fascinating snapshot of 2010’s web world.

Cost: $15

2. eBoy Cities Posters

We’re big fans of the eBoy group’s pixel art. They’ve created a whole collectible series of city posters that includes North American locations as well as London, Paris, Tokyo and Berlin.

Cost: $27

3. Periodic Table of Typefaces

The “Periodic Table of Typefaces” is a witty take on font classification. Also available: “So You Need a Typeface” flowchart and “Typefaces of the World.”

Cost: From $16

4. VectorSetPosters

As well as digital tools for designers, these VectorSets are available as prints. With tons of different sets, you could create a really striking grouping.

Cost: From $24.49

5. Andy Versus

One of a set of Android-themed illustrations, this poster depicts a little green bot fending off attack from a rather familiar figure…

Cost: $15

6. Nintendo Evolution

This simple Etsy print would be a great pic for a Nintendo fan.

Cost: From $8.50

7. Susan Kare Apple Prints

Former Apple designer Susan Kare offers limited edition prints of her classic icons.

Cost: From $89

8. The Oatmeal Grammar Pack

The Oatmeal’s “Grammar Pack” includes four great comics: “how to use an apostrophe,” “how to use a semicolon,” “10 words you need to stop misspelling,” and “when to use i.e. in a sentence.” We can’t think of a better set of rules to stick on your wall, especially if you work with words.

Cost: $32

9. Retro Videogame Propaganda Posters

Frogger, Dig Dug, Tron, Joust, Donkey Kong all get propaganda posters in this rad, retro set.

Cost: $49.99

10. Typography Deconstructed

More fun for font fans, this gorgeous graphic deconstructs typography, and would look great in your design department.

Cost: From $35

11. Fail Whale

If you’re a fan of Yiying Lu’s “Fail Whale,” then this three-foot wide version should bring a smile to your face.

Cost: $49.99

12. eBoy FooBar Poster

Grab a slice of web history with this now classic depiction of Web 2.0 circa 2006. It’ll be a collector’s item one day…

Cost: $27

13. Google Doodles

Everyone loves Google Doodles. Sadly, Google’s online store offers just seven designs in print. Collect the lot and hope for more in the near future.

Cost: From $4.75 each

14. Evolution of the Geek

Flowtown had a hit with its great “Evolution of the Geek” infographic. Now you can buy the poster version.

Cost: $19.99

15. Typographic Maps

There’s a whole set of typography-themed maps that accurately depict the features of major U.S. cities using nothing but type.

Cost: From $30

16. Susan Kare Facebook Prints

As well as Apple-themed prints, some of Kare’s contemporary Facebook icons are also available as limited edition prints.

Cost: From $89

17. Visual Aid Posters

We adore Visual Aid’s huge collection of geeky prints. They offer graphical explanations of a huge range of topics including color theory, types of hats, The Beatles vs The Rolling Stones, table settings, flight times and much, much more.

Cost: From £4 (approx $6.50)

18. Mac Reference Posters

This excellent Etsy poster offers you a field guide to Mac trackpad gestures. Also available is an OS X button legend and a quick reference for shortcuts.

Cost: $20

19. Why Working at Home is Both Awesome and Horrible

More from The Oatmeal with this hilarious comic that explains why working at home is both awesome and horrible. It’s an absolute must for any telecommuter.

Cost: $11.95

20. iA Web Trend Map

iA has mapped the 140 most influential people on Twitter, when they started tweeting and what they first said. Fascinating.

Cost: $59.50

21. Apple’s “Think Different” Posters

Finally, you can still get hold of Apple’s iconic “Think Different” posters on sites like eBay. Some are more rare than others, but just imagine how great the whole set would look framed on your office wall.

Cost: Varies

More About: accessories, android, apple, art, gallery, geek, Google, infographics, List, office, office accessories, posters, typography

For more Dev & Design coverage:

“Lorem ipsum dolor sit amet, consectetur adipisicing elit … “

If that’s all Greek to you, then don’t worry, it’s supposed to be. Taken from Cicero’s De Finibus Bonorum et Malorum, then altered to make zero sense, “Lorem Ipsum” is the most commonly used dummy text in the design field.

However, if you’re fed up seeing the faux Latin nonsense, we’ve found more than 30 placeholder text generators that offer something a little different — from cult movie references to classic novels to bacon. Mmmmm, bacon.

Take a look through the gallery below to discover some fun options next time you’re greeking. Let us know in the comments about any we’ve missed that you like to use.

1. Fillerati




This good-looking literary service offers passages of text from great authors like Lewis Carroll, Jules Verne and H.G. Wells.

2. Cameron Creative

Although different, Cameron Creative’s online tools offer a few useful options. Cut and paste a block of binary code that appears like a realistic “terms and conditions” text, should you need to fill up such a section on a website.

3. Bacon Ipsum

Pig out with graphs composed of “all meat” or “meat and filler” text.

4. Malevole Text Generator

A bizarre and random mix of TV show theme lyrics make up the filler text generated by this Malevole option.

5. Greeking Machine

The Greeking Machine offers a range of dummy text. In addition to classical Latin, languages include hillbilly, marketing, The Matrix, Metropolitan, pseudo German and our fave — techno babble.

6. Gangsta Lorem Ipsum

A block of “gangsta” text for when your design needs some extra shizzle, innit.

7. The Postmodernism Generator

If you need an essay-type format, then the Postmodernism generator has you covered with several essays of plausible-looking post-modernist nonsense.

8. Vegan Ipsum

If Bacon Ipsum is just too meaty for you, the same team offers a vegan version. Generate one to five graphs of veggie text. And, if you’re really gung-ho for going green, there’s also Veggie Ipsum to check out too.

9. Blind Text Generator

Alongside more traditional placeholder texts, the Blind Text Generator will spice things up for you with “Kafka,” “Werther,” “Pangram” and more.

10. Fillerama

Perfect for impressing your contemporary clients, Fillerama will cover your blank space with phrases from Futurama, The Simpsons, Star Wars, Dexter, Doctor Who and Monty Python.

BONUS: Adhesion Text

We’ve bonus-ified this offering as it’s a little unusual, but could be just the ticket for certain projects. Adhesion Text creates words based on the letters you enter.

More About: design, dummy text, gallery, List, Lists, lorem ipsum, text generators

For more Dev & Design coverage:

If your favorite part of July 4 celebrations is the fireworks, then we’ve got a fun gallery for you. We’ve found five tools that offer virtual fireworks you can enjoy right at your desk.

Whether you want to send someone an animated message, play around to create a mesmerizing browser show or add fireworks to your own site, we’ve found web sparklers to suit.

Light the touchpaper, stand at a safe distance and rocket through the gallery. You can find out more about the tools by clicking on the blue title text at the top left of each slide. Let us know which ones you like in the comments below.

1. Enjoy Canvas Fireworks




This hypnotic HTML5 Canvas experiment offers three different shapes of fireworks that you can control with your mouse for a 3D wow experience.

2. Write a Message in Fireworks

This is tons of fun. Compose your own message and see it written across the London skyline in fireworks. You can also share it with an automatically generated tiny URL.

3. Add Fireworks to Your Own Site With Fireworks.js

You can add fireworks to your own site with this nifty Javascript animation experiment. Or if you’re just firecracker-curious, you can play around with it on the dev’s site.

4. View Augmented Reality Fireworks

Simply print off the marker, fire up your webcam and you can enjoy your very own miniature augmented reality fireworks show.

5. Go Old School With Fireworks Just For You

Dating back to 2002, this particular desktop show is perfect for kids, offering mesmerizing fireworks generated by the click of your mouse.

BONUS: Join the HTML5 Fireworks Festival

If you’re handy with HTML5 then join the “Hanabi fireworks festival” by forking the sample code, or creating your own from scratch. The resulting entries will then be revealed as an online spectacular on July 7.

More About: apps, fireworks, HTML5, july 4, List, Lists, software, web apps

For more Dev & Design coverage: