31 Spectacular Web Design Guides, Techniques and Resources

Paradoxically, in the early days of websites, when there were few standards to adhere to, most business websites were laid out with pretty much the same template: grid layout, logo in the upper left, content in the middle or left frame, “highlights” in the right sidebar. And being edgy meant using a slightly different shade of blue as the dominant color. A few adventurous souls did some creative things with Flash, but even then, few people saw these sites because they were invisible to search engines.

Today, most sites use CSS rather than tables, avoid the use of deprecated tags, and adhere to W3C standards, and yet—the variety and creativity of website design is greater than ever.

How can you design a website that stands out visually from the crowd yet meets users’ needs? Maximizes social engagement? Optimizes trust and conversions? Looks as good on a smartphone as on a monster monitor? Find out here in more than 30 of the best articles and blog posts on website design of the past year.

General Website Design Guides

13 Website Social Optimization Oversights That Make You Look Foolish by Search Engine Watch

The positively awesome Angie Schottmuller identifies a baker’s dozen barriers to social media engagement on your website, such as requiring account creation or sign-in in order to comment (“Ease up on the form lock down. Allow users to rate and comment without creating an account…Forgotten passwords are a huge barrier to on-going engagement, so leverage OpenID and social sign-on tools to simplify the comment interaction process”).

Why “Infographic Thinking” Is The Future, Not A Fad by Fast Company

John Pavlus reports that Francesco Franchi is bullish on the potential of infographics—but only if done well. In this video, the art director at one of Italy’s top financial news outlets says that content needs to come first, that infographics shouldn’t be like PowerPoint presentations, and that they don’t need to be one-dimensional.

10 ways to make your website more social by iMedia Connection

Jeff Ragovin offers tips for creating a more social-friendly website, from first determining your social objectives and choosing your social networks wisely to keeping “your theme and aesthetic similar across digital presences” (i.e., branding) and incentivizing your readers to share your content.

10 Useful Findings About How People View Websites by ConversionXL

Peep Laja shares practical applications of 10 findings from eye-tracking studies, such as that the top left-corner of a site gets initial attention; that people read in F-patterns; that the most effective images are large, high-quality photos of people facing forward; and, most frighteningly, that “When viewing a website, it takes users less than two-tenths of a second to form a first impression.”

List Building: The four questions every email capture page must answer by MarketingSherpa

David Kilpatrick outlines four questions visitors will naturally have when hitting your landing page, such as “Why should I sign up?…What you want to avoid is simply saying, ‘Sign up for our FREE newsletter.’ Write from the subscriber’s point of view and explain how the opt-in for your email program will help the new subscriber solve challenges and eliminate pain points.”

6 Tips to Boost Your Web Presence by Inc.

Though this post largely centers around Lance Armstrong’s website—since somewhat discredited by Lance’s honesty issues—it still contains some great nuggets of wisdom, such as that one should “Keep it simple. The goal of most websites is to get visitors to the content they seek as quickly as possible. A simple, intuitive design is the best way to accomplish that.”

Put Customer Convenience Front And Center When Designing Websites – Part II by MediaPost

Jim Gilmartin details 10 “dos and don’ts” of website design, specifically “to help increase the satisfaction quotient and reduce the frustration quotient of most site visitors especially Baby Boomers and senior visitors,” though the advice applies much more broadly than that. For example, do include a blog and place a (simple) newsletter sign-up box on your site (presuming you offer a newsletter); don’t use auto-play videos, Flash or poorly-crafted titles.

12 Design Best Practices for Drop-Down Menus by Get Elastic

Linda Bustos offers a dozen tips for maximizing the usability of drop-down menus, among them: keep menus as short as possible; use multiple columns for unavoidably long menus; set the menu off clearly with a border or shadow; and get the timing right (“the menu should wait for half a second before appearing, as this prevents the menu popping up every time a user passes their mouse pointer over the top”).

Free Design Fonts

10 Extremely Good Free Fonts for Your Designs by Web Design Ledger

Henry Jones showcases 10 free design fonts, including Bemio, a fun, rounded “ultrabold sans with an extensive character set (which) bridges the gap between old signage and craftsmanship with modern forms and simplicity,” designed by Joe Prince.

28 New Free Fonts For Web Designers by Splashnology

This post highlights more than two dozen free fonts for web designers, such as Adamas Regular by Octavian Belintan, PLSTK by Aesthetic Therapie and Bispo by Jackson Alves. “a script typeface made inspiring on italic chancery calligraphy, with a flat nib pen and a module of 10 pen widths.”

8 Beautiful New Free Fonts by Web Design Ledger

Henry Jones (again) shares eight more free design fonts, including FatFrank, Acorn Typeface and the art deco-ish 47.

10 Excellent New Free Fonts by Web Design Ledger

One more set of free font downloads from Henry Jones, this set featuring typefaces like Nexa, Bouwen and NeoDeco.

Free Social Media Icon Sets

115 Creative and Unique Social Media Icon Sets by EntheosWeb Blog

There’s nothing unusual about including social media icons on blogs, but there are certainly some unusual and distinctive icon sets here. If you want the social icons on your site to stand out from the standard circles or rounded squares, you’ll find plenty of alternatives here, from colorful splashes and jeans pockets to coffee cups, bottle caps and T-shirts.

Best Free Social Media Icon Sets for 2012 by DandyWP

While there is inevitably some overlap between this post and the one above, here you will also find interesting icon sets along the themes of trucks, blueprints, monochrome and hand-drawn themes.

20 Free Social Icon Packs That Will Make Your Design Stand Up by Top Design Magazine

Still more social icon sets, from hearts and “Windows 8 style” to squares and sprockets.

Free Social Media Icons (34 Sets) by Graphic Design Junction

Muhammad Faisal presents nearly three dozen creative social icon sets, with themes ranging from 3D social icons and icons with a hand-sketched look to blue, neon, street signs, faded, retro, flaming, dark, frozen. letterpress, Easter egg, and speech bubble.

Parallax Scrolling Design Guides

Parallax Hovering And Its Engaging Quality For Web Design by Usabilla

Sabina Idler explains what parallax effects are in scrolling and hovering, how they work, how they attract visitor attention, and a bit about how to implement them, then illustrates all of this with 10 richly visual examples of parallax website design, from Grab&Go  to Batman 3D.

Hot Web Design Trends: Parallax Scrolling Effects in 100 Examples by Splashnology

For more about parallax scrolling (which is a “technique that features layered images that move around the website in different speeds/perspectives creating a nice and interesting 3D illusion”), check out 100 more examples of the approach here including 8vodesigns, Head2heart.us and Electrochuck.com

Website Trust and Credibility

The Psychology of Why Sexy Websites Suck at Sales by KISSmetrics

D Bnonn Tennant explains why consumers naturally trust “attractive” websites, but that in this case, attractive does not mean sexy or flashy—it means following some conventional design standards that won’t make a site exciting, but may very well help it to convert more successfully.

Give Your Website Soul With Emotionally Intelligent Interactions by Smashing Magazine

Chuck Longanecker writes that when he researched sites and apps with high loyalty, he found “the websites and apps we truly love have one thing in common: soul. They’re humanized. They have emotional intelligence designed into the user experience. And this emotional intelligence is crafted through thoughtful interaction design and feedback mechanisms built into the website.” He then showcases a number of sites that meet this criteria, demonstrating how each is infused with creativity and emotional intelligence.

9 User Experience Pitfalls That Repel Website Visitors by KISSmetrics

Because no one wants to lose website visitors due to factors within their control, Zach Bulygo here reveals the unpleasant truths about factors that can drive visitors away, including the use of stock photography (that smiling young woman with the headset representing “customer service” is used on far too many sites), having a slow-loading site, using auto-play videos, and—ugh, my pet peeve!—pop-ups. As Zach puts it, “It’s 2012, why does your website still have annoying pop-up advertisements?…Save pop-ups for the spam sites.”

39 Factors: Website Credibility Checklist by ConversionXL

Writing that “web credibility is about making your website in such a way that it comes across as trustworthy and knowledgeable. Your website is often the first point of contact for the customers…Companies that design for credibility have a strategic advantage over competition,” Peep Laja (again) identifies four types of website credibility, then presents a detailed website credibility checklist–factors to examine (and if necessary, change) on your site such as using case studies and testimonials, while avoiding excessive ads, unsupported superlatives and cheesy stock photos.

Landing Page and CTA Design Tips

8 Reasons Users Don’t Fill Out Sign Up Forms by UX Movement

Noting that “Most users today are more wary than ever about who handles their personal information. In a cyber world full of hackers and spammers, who can blame them?,” this post outlines reasons visitors may not be signing up on your site (for a download, a webinar, a newsletter, whatever)—and by extension, how you can make it more likely that they will sign up—such as fear of being spammed, concern you’re asking for too much information or information you don’t need, or simply not seeing a compelling call to action.

5 Highly Effective Landing Page Tips by Search Engine Land

Mona Elesseily details five elements that can increase landing page engagement, including credibility indicators like customer quotes, removing unnecessary page elements, and experimenting with different wording on action buttons (after all, who really wants to “submit”?).

14 Real-Life Examples of CTA Copy YOU Should Copy by HubSpot

Noting that “while CTA design is critical to initially drawing the attention of your visitors, it’s the copy of your calls-to-action that has to be compelling enough to get them clicking,” frequent best-of honoree Pamela Vaughan shares 14 examples of outstanding call-to-action copywriting from both well-known sites (Amazon.com) and more obscure ones (OH! Media).

Mobile Website Design Tips, Tools and Resources

Ultimate Guide to Responsive Web Design: 55 Stunning Tools, Tutorials, and Examples by 1stWebDesigner

Noting that “It is estimated that within two years mobile internet users will overtake the desktop internet users,” Daniels Mekšs steps through more than 50 resources for responsive design, from tools like Less Framework 4 and Gridless to sources of “Inspiration” like Quazarwebdesign and Apgdesign.

The 5 worst mobile websites by iMedia Connection

Of course these aren’t literally the very worst mobile sites in existence, but as Eric Anderson explains, “rather than trying to simply expose five bad mobile sites, I looked for sites that were archetypal of certain common mobile usability problems,” and he found, among others, “The bad first date: Hardee’s” which asks for your zipcode (while you are likely on the road far from home) and the “irony of the year award: Nokia” which—at the time of the writing of this article—did not actually have a mobile website.

10 best practices for your mobile website by Socialmedia.biz

Deltina Hay presents 10 “best practices that should be applied to all mobile websites,” among them taking advantage of mobile features (“Like the click-to-call button, there are features specific to mobile devices that can be used to improve your site’s user experience”) and using a conventional URL structure (“It is becoming standard to find a website’s mobile version at a URL like m.example.com”).

Why Google loves responsive design (and you should too) by Econsultancy

Mike Essex outlines half a dozen reasons to use responsive design, such as that “Responsive sites attract more links to key pages” (because there aren’t multiple URLs with the same copy), responsive sites work on multiple devices, and responsive sites (usually) look better, then points readers to resources for getting started with responsive design.

Mobile Websites vs Responsive Design: What’s the right solution for your business? by Google Mobile Ads Blog
***** 5 STARS

Although responsive design is now generally regarded as the best approach to accommodating the needs of both desktop and mobile web users, Jessica Sapick points out that it’s not the best approach in every situation—and provides a vital guide to determining which approach is best based specific business needs.

Best practices for mobile email design by Econsultancy

Observing that about a third of email use is now on mobile devices, Erik Boman offers more than a dozen practical tips for mobile-friendly email design, from going easy on images and including social links (but keeping them out of the way of important calls to action) to using a one-column layout and not crowding links.