Best Website, UX and Mobile Design Guides and Tips of 2011

March 28, 2012

Inspired web designers continue to push the envelope on what’s possible in online presentation, utilizing HTML5 and design elements and techniques like parallax scrolling effects, imaginative icons and unusual typography to stand out from the ordinary and grab visitors’ attention. Any website element can be creatively designed and optimized, from navigation menus and forms to landing pages and 404 error pages.

Web design isn’t only about creating a visually striking site of course; designers also need to keep in mind factors like site load speed, user experience and search optimization. And with the rapid increase in use of mobile device browsing, sites have to be readily adaptable to different screen sizes.

So how does a web designer create a site that’s visually stunning and fast and user-friendly and effective at driving conversions and search-optimized and mobile-friendly? It’s a lot to keep with, but these 33 remarkable web design guides should help.

Creative and Inspiring Graphic Design

35 Inspiring Examples of Websites Using HTML5 by Web Design Ledger

Foundation Six HTML5 WebsiteGisele Muller presents “35 new examples of websites that are also using some new tricks from HTML5,” including Wantlist, Vision18, Visua Design and Andrew Shanley.

40 Beautiful and Inspiring Examples of Slideshows in Web Design by Tripwire Magazine

Noting that “There are many reasons to use a slideshow or image slider in your web designs as the key to smart strategic Web design is finding a smartest and interactive way to display your information to your visitors,” Dustin Betonio showcases a collection of “highly creative, beautiful and inspirational slideshows for your inspiration,” like winestore, Crush + Lovely and Fox Classics.

35 must see examples of websites using HTML5 by Web and Designers

HTML5 Lab Web DesignA collection of nearly three dozen examples of remarkable website design using HTML5, including sites like Chico web design, Dribbble, John Kavanagh and Griottes.

8 ground-breaking websites by iMedia Connection

Jennifer Marlo shares eight critiques of brand websites from industry thought-leaders who share what they find unusual or effective about each site as well as what they’d change. For example, Thomas Mueller of Siegel+Gale writes of the Nike Better World site, “Beautiful fades and elegant transitions transform what could have otherwise been a straightforward linear experience into a layered visual exploration that links to Nike’s comprehensive digital footprint.”

30 Awesome Social Icon Packs by Webdesignersblog

Social Media Icon CansA big collection of creative icon packs, from teacups, cupcakes and peeling stickers to clover, cartoons and cans. Icons don’t have to be boring!

Your Website is Killing Me by Social Media Explorer

In this wonderfully revealing rant, Heather Rast explicates why many business websites fail, and what they could do to improve, e.g., “Your web team consists of the super sophisticated, MacBook-toting college-age kid of one of the vice presidents. (as if a Dreamweaver course covered usability standards)…Your site uses internal language and writes from internal hot buttons to communicate with external audiences.  Think mission statements, vision statements, core values…Awards and certifications abound. From 2008.”

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

What’s this post about? “Parallax scrolling in web design is the technique that features layered images that move around the website in different speeds/perspectives creating a nice and interesting 3D illusion. Initially it was used for creating an illusion of depth in a 2D video games and adding to the immersion, but now, with the help of well defined imagery, JQuery and CSS3, it can be useful in making your site look more vivid and creative. To your attention we’ve complied a great collection of 100 example of parallax scrolling effect.” These are cool.

20 Mind-Boggling Parallax Website Design And How To Make One by 1st Web Designer

Jamal Jackson defines parallax design as “the apparent displacement or the difference in apparent direction of an object as seen from two different points not on a straight line with the object. In web design use, parallax refers to the scrolling technique used to create the illusion of depth on websites,” then highlights examples of sites like Living Word, Dezignus and Art of Flight (which is truly extraordinary–take a look).

Art of Flight - Parallax Web Design Example


Navigation Menu Design

25 Beautiful & Inspiring Navigation Menus by Web Design Ledger

Gisele Muller (again) rounds up “25 examples of beautiful and inspiring navigation menus” featuring likes like Unfold, Shout, Sellected Studio and Don’t Throw Batteries.

28 Stylish Examples of Drop-Down Navigation Menus in Web Design by DesignModo

Drop-Down Navigation Menu ExampleElegant and creative drop-down menus incorporating transparency, icons, shading, highlighting, color, shapes and other effects to stand out from the ordinary.

20 Inspiring Navigation Menus by Web Design Ledger

20 more examples of creative navigation menu design, using typography, color, transparency, parallax scrolling and other effects, including sites like Timberland, Citroen and divups.

Typography in Web Design

Beyond Times and Arial – The New Web Safe Fonts by Google Webmaster Central Blog

David Wurtz explains how Google Web Fonts work, provides some examples, and notes that “The adoption of the web font technology has been rapid. Google Web Fonts now serves roughly 50 million daily requests[1], across roughly 800,000 unique websites[2], and is growing at about 30% each month.”

50 Excellent Free Handwritten Fonts by Designer Terminal

Covered by Your Grace - Web TypefaceTaimur Asghar presents 50 (mostly) free handwriting-type fonts for designers. The “slide over” ads on this page get a tad annoying, but the fonts are beautiful and worth checking just for the lyrical names, like Niakania, CrimsonVermillion, Throw My Hands Up in the Air and Annie Use Your Telescope.

Imaginative 404 Error Pages

33 More Entertaining 404 Error Pages by Mashable

Erica Swallow features more creative, funny, odd and quirky 404 error pages from sites like Audiko, Blizzard Entertainment (blames the user–but very creatively) and iContact, which turns things upside down—literally.

35 Creative 404 Error Pages by Web Design Ledger

Heinz 404 Error PageGisele Muller (yet again) shares examples of unusual but nice 404 error pages that show consideration for users, including pages from Carol Rivello, duoh and Frye / Wiles.

Optimizing Error Pages: Creating Opportunities Out Of Mistakes by Smashing Magazine

Daniel Waisberg reviews “techniques that will help Web designers and UI professionals improve their error pages in order to engage visitors and improve the experience,” including smart things to include on a 404 error page (company name/logo, explanation of why this page is appearing, easy navigation back to popular pages on the site), how to monitor 404 page visits and navigation, and tips for minimizing 404 errors.

Landing Page Design

Why Your Form Buttons Should Never Say Submit by UX Movement

Excellent advice, concisely presented: “A ‘Submit’ button describes what the system does well, but it doesn’t describe what the user does at all…The action button should affirm what that task is, so that users know exactly what happens when they click that button (e.g., ‘Create Account,” “Subscribe Now’)…The more focused your form is, the more likely you’ll get users to complete your form.”

5 Ideas For Boosting Your Landing Page Conversion Rates by Business2Community

Kristina Allen offers a handful of helpful suggestions for improving landing page performance, such as trying a unique design format, building trust, and testing early and often.

25 Excellent Examples of Forms in Web Design by Web Design Ledger

Vincent Mazza Form ExampleOnline forms don’t have to be boring, as shown in these remarkable examples from Foundation Six, Vincent Mazza and Justalab among others. A creatively designed form may increase your conversion rates—or at least get your form mentioned in a blog post on web design.

5 Common Landing Page Mistakes by HubSpot Blog

Andrew Pitre offers tips for improving landing page performance, such as #2, “Use Your Headline to Explain the Value of Your Offer – What’s in it for Me?…The best way to achieve this is to have a clear title. Specifically, you’ll want to make sure your title contains:

  • • A clear action (e.g. “Download our Guide”)
  • • A clear description of your offer (e.g. “Download our Guide to Effective Landing Pages”)
  • • An explanation of the value of your offer (e.g. “Download our Guide to Effective Landing Pages and Learn How to Increase Conversions by over 10%”)”

22 Creative Landing Page Designs – A Showcase, Critique, and Optimization Discussion by Unbounce

Mammoth Lakes Landing Page ExampleIn this richly-illustrated and incredibly detailed post, Oli Gardner examines almost two dozen landing pages from small to midsize businesses and critiques each one detailing what he likes about it (e.g., “Testimonials: Testimonials and association with famous people/shows are included for instant credibility”) and what he’d change or test.

50 Effective and Creative Call to Action Buttons by Noupe

Aquil Akhter showcases sites that go way beyond boring gray “submit” buttons to get visitors to click, utilizing unusual shapes, colors, size, placement, effects, arrows, icons and descriptive calls to action.

The 10 most common Landing Page Optimization mistakes by Web SEO Analytics

Vasilis Vryniotis details ten common landing page mistakes, from having an unclear call to action or too much text to requesting too much information and not testing different landing page variations.

6 Essential PPC Landing Page Optimizations by The Daily SEO Blog

A half-dozen tips for increasing landing page conversions, from pre-positioning the cursor in the first field to be filled out and using eye-tracking data to integrating testimonials and driving to a single call to action.

User Experience and Technical Design

30 Ways to Optimise Your Site for Speed by SEOptimise

Noting that, in addition to the fact that slow-loading websites are annoying for user, “in 2010 Google decided to take site speed into account as a direct ranking factor”—thus making it all that much more critical—Tad Chef offers 30 tips for speeding up your site, from using smaller images and external scripts to switching to a faster web hosting service and limiting the use of third-party widgets on your blog or website.

5 Little-Known Web Files That Can Enhance Your Website by Six Revisions

Alexander Dawson details five files that can improve your website UX, including Geo.kml (and Geo.rdf) for geolocation information, Humans.txt for attribution, and vCard.vcf, a digital business card (another effective option here is a portable Workface profile.

How To Fix The Top Tech Issues I Regularly See In SEO by MediaPost Search Insider

The prolific Janet Driscoll Miller offers tips on several common technical design issues that can impact SEO and how to correct them, for example: “avoid using Javascript on key areas of your website, such as the navigation. Links contained within Javascript are also not indexable, providing a roadblock of sorts for the bots to index your site. If you’re looking for impressive menus, instead focus on using cascading style sheets (CSS) to achieve a similar effect.” She also provides tips for speeding the load time of WordPress sites.

8 reasons why someone leave your website – An infographic by The Web Citizen

What makes someone leave a website? (Infographic)Ilias Chelidonis shares an infographic detailing the top reasons visitors bounce from, or at least don’t stick around long, on websites including bad navigation, obtrusive ads or video, boring content/design, and poor readability.

25 Must-Haves for a Remarkable Website by HubSpot Blog

Jessica Meher presents 25 “key elements for driving more traffic, leads, and sales,” like optimizing page content and title tags for search, using relevant imagery, writing copy that is clear rather than clever, and using calls-to-action that stand out.

Mobile Website Design

How to design and develop for mobile sites by iMedia Connection

Mark Simpson supplies five tips for effective mobile site design, such as asking questions to determine what site content you have that is really relevant in the mobile environment: “Sites like Foursquare and Mashable have done a good job of making their sites accessible in the mobile world. What patterns do you notice? What website components have smart marketers left off their mobile sites? What features make the apps and sites more user-friendly?”

How Does Your Website Look on Different Mobile Phones? by Digital Inspiration
***** 5 STARS

Acknowledging that it is much more challenging to test a website on every permutation of mobile device than on the far more limited number of popular desktop browsers, Amit Agarwal reviews Opera Mobile Emulator and Mobilizer, two tools that enable to designers to see how their sites will look on a wide range of mobile devices.

24 Excellent Examples of Responsive Web Design by Web Design Ledger

Two dozen examples of sites that use dynamic web design–web architecture that enables a single design to automatically adapt to a wide range of devices and screen sizes–such as Fork, Atlason and food sense.

What Elements Should You Eliminate When Building a Mobile Website? by The Daily Egg

Six design experts offer their advice on the difficult question of what website elements to eliminate in mobile design, such as this from Andrew Pautler: “I think the better question than ‘what should we cut’ to think about is ‘what should we keep.’ The answer to that question should almost always be the content. People come to your site for the content, so that’s what you should give them. The excessive navigation, oversized banner ads, 15 Facebook links on a single page, etc. are usually the things worth cutting when reducing your site to 320px..That said, mobile doesn’t and shouldn’t mean ‘watered down’…Creating a ‘mobile’ version of your site with limited content is not what the user wants. You can re-prioritize the content, but you shouldn’t hide or remove important content from the mobile version.”

Post to Twitter

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

10 Responses

  1. Nice! Thanks for the mobile tips, I love the icons!

  2. Tom 

    Hi Jessica – you’re welcome and agreed, the icons are fun. Lots of creativity here.

  3. The infographic is what I’ve been looking for, definitely pinning it. There are several factors why audience visit and leave a page, and content is a big factor.

  4. Tom 

    Hi Marlo, glad this helped! I agree, this infographic is excellent for diagnosing bounce errors and designing changes to make a site stickier.

  5. Social icon cans are really great, I’ve never seen them or anything close to it before ! Now I know indeed that social icons don’t have to be boring!

  6. Hi webbiqu1,

    Thanks for this usefull tips.

    It’s a good list to review item concerning user experience when designing a website.

    Often, when we design a website, as developper, we forget that user has another perception than we have…


  7. Tom 

    Thanks for the comment, but you can call me Tom. :-)

  8. This is a very creative and informative blog which certainly will help the enhancement of skills in web designers.

    The author has displayed uniqueness in each aspect of web design and has a big heart to share same with others.

    Many thanks Tom.

  9. Ned R. 

    Thanks for the advice, you’re so right about the submit button, it’s a developper thing to use submit, it’s like natural.

  10. Tom 

    Right – natural for developers but not friendly for website visitors. Never hurts to be creative and test, test, test. :-)

Leave a Reply