HTMLcut blog

About PSD to HTML Conversion and More

207 Articles on Effective Web Design – Winter 2011-2012

Effective Web Design - Winter 2011-2012This is the next seasonal round-up of web design articles and posts written by the design community and retweeted on @htmlcut during the winter 2011-2012.

This time among the most interesting sections are “Usability and User Experience”, “Forms”, “E-Commerce”, “Mobile Websites and Responsive Web Design”, “Trends” and “Opinions”. Frankly, all sections are instructive and informative and include lots of useful examples, guides and tips, so we strongly recommend to look through all of them.

We’ll be glad if this round-up is helpful to you :).

Web Design Principles and Basics

1). The Elements of a Clean Web Design
by Phil Zelnar: “We’ll talk about a few traits that clean designs tend to have in common. Secondly, I’ll share some tricks and techniques that can be helpful when trying to achieve a clean design.”

2). Mood Boarding Methods for Web Designers
by Stephanie Hamilton: “There are steps in the design process to implement to cut down on the unknown and this is usually in the form of a mood board.”

3). Redefining Hick’s Law
by Jason Gross: “Traditionally, the law is used to encourage designers to limit options in navigation, lists and interactive options. We need to more deeply investigate what Hick’s Law can do for Web design.”

4). Ten Laws to Design By
by Ross Johnson: “Hick’s Law; Pareto Principal; Rule of Thirds; Proximity; Feedback; Fitts’ Law; Golden Ratio; Occam’s Razor; Fibonacci Sequence; Mental Models.”

5). Essential Principles for Creating Minimalist Web Design
by Neeru Pallen

6). Minimalist Web Design: How Minimal is Too Minimal?
by Delwin Campbell

7). How to Make the Best out of the Fold
by Christian Vasile

8). A Fun Approach To Creating More Successful Websites
by Jeremy Girard: “We’ll take a look at how adding a bit of ‘fun’ into the mix can help us produce more engaging, and hopefully more successful, websites.”

9). A Secret Weapon of Successful Designers: Predictability
by Karol K.

10). How To Create Visual Tension in Your Designs
by Steven Bradley

11). The Proxority Principle in Web Design
by Alexander Dawson: “We’re going to examine a basic technique that could help you improve your general content flow, and, for lack of a better term, I’m going to call that technique the proxority principle (a portmanteau word that combines “proximity” and “priority”).”

12). The Difference Between Art and Design
by John O’Nolan

Website Layout

1). Tips on Designing Layouts Focused around Content
by Jake Rocheleau

2). Measuring and sizing UIs, 2011-style
by Harry Roberts: “For years we used pixels to lay out web pages. Then… we were dabbling with ems to make our pages elastic. Now, in 2011, most of us are adopting a responsive approach and using fluid grids and percentages.”

Psychology and Web Design

1). The Psychologist’s View of UX Design
by Susan Weinschenk

2). The Models We Use
by Jared Spool : “Models like this help us know how to design better. They tell us why the same patterns keep forming before us and give us hints to take advantage of their predictive behaviors.”

Colors in Web Design

1). The Psychology Of Color In Design
by Speider Schneider

2). Mind-Bending Facts About Colour Perception
by Costin Găman

3). How Colors Affect Our Purchases [Infographic]
by Richard Darell

4). 25 Examples of Perfect Color Combinations in Web Design
by Gisele Muller

5). Creating Color Schemes for Web Design
by Drew Coffin

6). ColRD: Create and share color inspiration with the world

Usability and User Experience

1). 15 Free Ebooks about User Experience and Interface Design
by Paul Olyslager

2). Persuasion in Design
by Elisa del Galdo: “Persuasive design applies Psychological Principles of influence, decision-making in a consumer context, engagement strategy, and social psychology to every stage of the design process, and it identifies potential barriers and emotional triggers to elicit the desired actions.”

3). Fact vs. Fiction: What Usability is Not
by Vishal Mehta

4). Stop Designing Pages And Start Designing Flows
by Morgan Brown: “…we’ll look in depth at a common flow for e-commerce websites (the customer acquisition funnel), as well as provide tips on optimizing it to create a complete customer experience.”

5). Usability Rules for Content Sites
by Ada Ivanova

6). Collaging: Getting Answers To The Questions You Don’t Know To Ask
by Kyle Soucy: “Collaging is a great method for learning more about your end users.”

7). Lean UX: Getting Out Of The Deliverables Business
by Jeff Gothelf: “Lean UX is the practice of bringing the true nature of our work to light faster, with less emphasis on deliverables and greater focus on the actual experience being designed.”

8). Website Usability 101 For SEO Professionals
by Shari Thurow: “…many people believe that website usability is simply making a website easy to use. Easy to use for whom? The developers? Website owners? Web searchers?”

9). Seven UX Best Practices of Community Design
by Kristin Zibell

10). Addictive UX: Why Pinterest Is So Dang Amazing
by Joshua Johnson

11). What Makes Someone Leave A Website? [Infographic]
by admin: “Itэs important to design your site so that user frustration is kept to a minimum, thereby maximizing customer retention. Below are some examples of what not to do when designing your website.”

12). Effective Use of Color and Graphics in Applications for Children, Part II: Kids 7 to 14 Years of Age
by Catalina Naranjo-Bock


1). What is Web Accessibility?
by Nick Pettit

2). Inclusive Design
by Faruk Ateş: “… equally accessible to everyone, and equally empowering no matter what the user’s skill level or familiarity. When these two aspects are combined, the product gets the best of both worlds: it is accessible to more people, without being compromised for advanced users.”

3). Usability Tips and Tools for the Visually Impaired on the Web
by Jamal

4). Let’s talk and teach, not fight, about accessibility
by Karen Mardahl

Cross Cultural Web Design

1). Notes on Designing Websites for the Asian Market
by Bruce Lawson

2). Avoid Translation Mistakes When Designing for Foreign Markets
by Christian Arno


1). Clear Indications That It’s Time To Redesign
by Jeff Gothelf

2). The New Redesign Rules of the Web
by Robert Bowen

3). Website Redesigning: Lessons that your competitors can teach you
by Alyssa Clarke

4). Redesigning Ourselves: How We Made Our Agency More User Friendly
by Ollie Campbell

5). 30 Minute Redesign #76: Suruha Freespirit
by Tom: “Today I’m going to be redesigning Suruha Freespirit, the personal design blog of Su Hall… I’ve spoken with Su a lot in the past year, so it’s a real honor to get a chance to redesign her blog.”

6). 15 Good Examples of Website Redesign
by Andrian

Content and Copywriting

1). How to Create a Unique Selling Point for Your Home Page
by anthony

2). How to Give Online Shoppers Confidence in Your Website
by Anita Campbell

3). How to Craft a Privacy Policy for Your Website
by Sara Hawkins

4). Can You Write a Better Headline Than This? Not Using Old Headline Formulas You Can’t
by Bnonn: “Learning to write great headlines is more important than mastering every other copywriting trick combined. The SHINE headline formula.”

5). Copywriting: How to Write Useful (Yet Intriguing) Headlines
by Christian Holst: “Provide context, then spark interest.”

6). How to Write Hard Hitting Headlines That Work
by admin

7). 20 Tips on How to Write for the Web
by Angela West: “These are tips based on my own experience and education as a writer, and particularly as a writer specializing in the web: Overuse of punctuation; But, And, or Yet; Serial comma; Apostrophe use, etc.”

8). 8 Brilliant Examples Of Social Proof On The Web
by Demian Farnworth

9). Oh, Idioms: Overused, Amusing and Often Confusing
by Rebecca Garland

10). Content Quantity Diminishes Quality [Research]
by Pamela Vaughan: “Coupling a high quality item with a low quality item diminishes the perception of both items’ overall quality. How to consistently create high-quality content.”

11). Content Is More Than Copy
by Colleen Jones

12). A 5-Minute Guide to More Persuasive Copywriting
by James Chartrand

13). How To Spice Up Your Resource Boxes For Better Conversion
by Daniel Smith

14). Most Annoying Business Jargon

15). Corporate Jargon That Needs To Go
by Alicia Ciccone: “Outside the Box; Low-hanging fruit; Synergy, etc.”

16). 31 Fluffy Buzzwords Marketers Overuse and Abuse
by Rebecca Corliss

17). The Rise Of The “Creative” Class
by Erick Schonfeld: “LinkedIn has put out its annual list of top buzzwords (over)used on members’ professional profiles: ‘Creative,’ ‘Organizational’ and ‘Effective’ are leaders in the USA. COMMENTS.”


1). Content Scrapers – How to Find Out Who is Stealing Your Content & What to Do About It
by Kristi Hines

2). Thoughts On Using Copyrighted Images
by Steven Bradley


1). 6 Questions You Should Ask Yourself When Choosing Fonts
by Patrick Cox

2). Establish a Mood with Typography
by Carrie Cousins

3). The Psychology of Fonts
by Emily Matthews

4). Secret Symphony: The Ultimate Guide to Readable Web Typography
by Chris Pearson: “By employing Golden Ratio Typography, you’ll ensure that your site has a golden symphony that will appeal to everyone.”

5). How to Use Script Fonts in Design Projects
by Tara Hornor

6). 40 Best Typeface Combinations in Web Design
by admin

7). Text Designs That Should Be Banned
by Bogdan: “What do you think? Is there any font that you hate it so much that you want to see it vanished from the face of the Earth?”

8). The Politics of Typography
by Nathan Francis: “Graphic designers will already appreciate the important role of typography in delivering a message, and that throughout the ages the character and form of typography has often reflected the historical and political spirit of the epoch in which it was created.”

9). Fun Helvetica Posters
by Sonia Tracy

10). 60 Absolutely Stunning Typography Projects
by Joshua Johnson

Navigation and Menus

1). How to Design the Best Navigation Bar for Your Website
by Daniel Alves: “…people cannot find the information they seek on a website about 60% of the time. …many users often find navigation usability extremely frustrating, citing annoying hover errors and inconsistencies. …40% of users do not return to a site when their first visit is negative.”

2). Responsive Navigation Patterns
by Brad Frost: “Here’s some of the more popular techniques for handling navigation in responsive designs.”

3). 47 Websites with Unusual Navigation
by Stelian Subotin: “We have carefully gathered and handpicked a big set of websites whose navigation bars are not simple, plain, or the ones you see a lot on the internet. No, the following websites were designed with the modern design principles in mind, by making the whole website a new ‘browsing adventure’, not just some parts of it.”

4). Faceted Overload: Simplifying the Sidebar Navigation
by anthony

5). 31 Super-Unique and Functional Website Navigation Menus
by Jake Rocheleau

6). 12 Unique Navigation Menu Designs For Your Inspiration
by admin

Landing Page and Conversion Rate

1). How To Make Your Landing Page Stand Out
by Adam Dachis: “Earlier this week we asked you how you make your personal landing page stand out amongst the crowd and you wrote in with great ideas and examples. Here are some of the best and the processes behind them.”

2). 5 Unbreakable Rules of Landing Page Design
by Zach Ball

3). 5 Awesome Landing Page Lessons From Real Life Examples
by Corey Eridon: “What is right and what can be improved in examples.”

4). Showcase Of Well Executed Landing Pages
by admin

5). Showcase of Landing Page Design
by admin: “…more than 20 examples of well-designed landing pages.”

6). Landing Page Design Gallery – Inspiration, examples & helpful tips
“A gallery dedicated to landing page design.”

Call to Action

1). 10 Crimes a Web Designer can Commit on Call to Action Pages
by Jenna Scaglione

2). 6 Factors Everyone Should Know About Designing Call To Action Buttons
by Stephanie Hamilton

3). Call to Action Buttons Best Practices Guide
by anthony

4). 15 Tips in Making an Effective Call to Action
by Marvi Ocampo

5). 40 Showcase of Convincing Call to Action Buttons
by Jameel

6). Showcase Of Call To Action Buttons In Web Design
by admin


1). Guide to Building Semantic Web Forms
by Jake Rocheleau (@jakerocheleau)

2). How to Design an Awful Looking Sign-Up Form, 10 Step Guide
by Alex Black: “…this post will, count one by one the bad practices when designing a sign-up form, if maybe this way the web designers will learn their lesson and finally up–date their sign-up forms.”

3). Web Login, the definitive guide
by admin: “Good practices, Bad practices, Tools and resources.”

4). Why Rounded Corners are Easier on the Eyes
by anthony: “Easier to process; We’re conditioned; Make information easier to follow; Rounded corners point inward towards the center of the rectangle.”

5). 10 Rules to Follow for Popups and Modal Windows
by Ada Ivanova

6). Usability Design for Online Web Forms
by Jake Rocheleau

7). Why Your Form Buttons Should Never Say Submit
by anthony

8). Principles for Successful Button Design
by Pete Orme

9). All About Buttons: Inspiration, PSDs for Download, CSS Generators and Frameworks
by Stéphanie Walter

10). 28 Brilliant Form Layouts in User Interface Design
by Jake Rocheleau: “Professional designers have come up with trendy solutions to even the most complex forms. Gathering data from your visitors can be very difficult at times. But starting with an easy form template can grease the wheels for more conversions.”

11). 40 Contact Forms of All Time For Designer Inspiration
by Lief

12). 25 Amazingly Creative Contact Forms
by Laura Moisei

13). 40+ Creative Contact Forms That Will Inspire You
by Jameel Khan

14). 80+ Creative Modern Web Forms And Contact Designs
by Dennis

15). Showcase of Beautiful Search Box UI Designs
by Salman Saeed: “We showcase some beautiful search boxes with promising features we’ve come to know.”

16). Ui Parade
“Ui Parade is all about showcasing user interface design that is crafted by some of the worlds most talented ui designers.”

17). 50 Impressive UI Design From Dribbble
by Prakash

Footers and Headers

1). Designing Engaging Header Images: Think Outside the Box
by Joshua Johnson

2). Developing a Responsive Website: The Footer
by Scott Stanton

3). The Science of Designing a Footer
by Tayyab

4). 50+ Outstanding Header Designs for Inspiration
by Ainsley Bevis

5). 30 Super Oversized Footers in Modern Web Layouts
by Jake Rocheleau

6). Showcase of Interactive Website Footers to Enhance User Experience
by Jawad

7). 23 Standout eCommerce Store Footers
by John Taylor

Tips and Recommendations

1). Parallax Scrolling: Tools, Articles and Tutorials
by AndrewG

2). The top 25 browser tools for web designers and developers
by Nicklas Persson and Chris Murphy: “Gathering inspiration; Design and build; Testing and feedback; Browser extensions (Colorzilla, etc.); Debugging tools ; Bookmarklets (WhatFont).”

3). Why Big Pictures are Effective as Website Backgrounds
by Kareen Liez

4). Why External Links Should Open in New Tabs
by anthony

5). Six key principles to design a 404 page
by Lief

6). Best practices for creating government websites
by Justin Hubbard

7). Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers

E-Commerce Websites

1). 20 of the Best E-Commerce Platforms
by admin

2). 6 Elements Of A Trustworthy E-Commerce Web Design
by Stephanie Hamilton: “Guarantees; Search; Reviews; Well-Written Product Detail Pages; Clear Checkout Process; Transparency About Additional Costs.”

3). 7 Tactics for Better Product Detail Page Design
by Armando Roggio: “Excellent Photography; Clear Checkout Path; Reviews; Flexible Product Descriptions; Room for Logistics; Save and Share Options; Mobile Ready.”

4). No Guidance, No Interaction, No Sale: Improving Internet Shopping Usability
by Kim Berg

5). Using ‘Quick Views’ to Increase Conversions
by Armando Roggio: “Quick view enables visitors to view product details – on a category page, a cart, or any other page – without a page refresh. The product details are launched in a modal (i.e. pop-up) window, which opens on the page the visitor is on, and typically displays a truncated set of product details. ”

6). Fake Reviews, a Despicable Practice?
by Armando Roggio: “Sometimes the line separating an excellent marketing idea from a despicable or even illegal business practice is not perfectly clear. Ecommerce marketers, even well-meaning ones, may be contributing to widespread advertising fraud without even realizing it. ”

7). Using WordPress for Ecommerce, Parts 1 – 14
by Armando Roggio

8). 25 Useful Magento eCommerce Themes
by Koby

9). 20 Beautifully Designed Online Stores Built on Shopify
by Kris Holt

10). 25 Beautiful Ecommerce Websites
by admin

11). 10 Innovative Ecommerce Sites
by Armando Roggio

Content Management Systems (CMS)

1). Should We Always Deploy Content Management Systems?
by Maria Malidaki: “Owners: of Static Websites; Who Don’t Want to Be Empowered; of Websites with a Shelf Life; Who Rely on a Web Professional’s Expertise.”

2). Good Old Static HTML Sites Aren’t Dead Yet. Should They Be?
by Ada Ivanova

3). Web designers, what to look for in a CMS
by Tyler Herman: “I don’t want to mention any names here or tell you what to use. Instead, I’m going give you some important points to consider, so that you can make an educated decision on your own.”

4). A Comprehensive Checklist To Creating The Perfect WordPress Website
by Danny Cooper

5). Five top tips for building responsive WordPress sites
by Jesse Friedman: “Jesse Friedman explains how you can integrate responsive web design with WordPress and goes over both the advantages and challenges of responsive theming.”

6). WordPress Functions.php Snippets
“WPFunction.Me lets you quickly build all the functionality you need for your next WordPress project.”

7). Secure Your WordPress Against User-Agents and Bots
by Bilal Shaheen

8). 5 Commenting Platforms to Make Your Blog Less Boring
by Sufyan bin Uzayr

Mobile Websites and Responsive Web Design

1). Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes
by Anthony T

2). Designing for touch
by Josh Clark: “Interaction designer Josh Clark explains what you need to keep in mind when designing for mobile touchscreens and compares finger-friendly touch interfaces for iPhone, iPad and Android.”

3). Tablet Tidbits: How To Make Your Website Tablet-Friendly
by Daniel Smith

4). Responsive Web Design: Standard or Feature?
by Jeff

5). Seven lessons learned from responsive web design
by Vince Allen: “Vince Allen… gives the background on why responsive web design is the right focus for web development.”

6). Building a Responsive, Future-Friendly Web for Everyone
by Scott Gilbertson: “Basics, Further Reading, Techniques.”

7). Adaptive Images for Responsive Designs
by Matt Wilcox

8). Responsive Web Design: Overflow Image with vertical centering
by admin

9). Responsive design in the corporate world
by Brent Walbolt

10). Is Responsive Web Design Working? Showcase of 30 Sites That Prove it Does!
by Alice

11). 29 Simple yet Intuitive Mobile Web Designs
by Jake Rocheleau

12). Inspiration and Resources for Responsive Web Design
by fandy

Website Technical Aspects

1). .htaccess Files for the Rest of Us
by Dan Wellman: “.htaccess files are used to configure Apache, as well a range of other web servers. In this article, we’ll review what they are, and how you can use them in your projects.”

2). 10 useful htaccess tricks to improve your website
by Mirko

3). How To Increase Website Page Speed
by w3m

4). Building a High Performance Website
by Phil Stanhope: “…project managers must first have a solid grasp of factors that affect website performance, and analyze how these factors are affecting the site in question. This, coupled with an understanding of available site optimization techniques, will help project managers make the most well informed site performance decisions.”

5). Command Line Basics
by Jason Seifer: “We’re going to be focusing on the Mac side of things, but a lot of the concepts in here will apply to all command line programs as well.”

6). SEO Tutorial: How to change your website’s host without affecting your Rankings
by Vasilis Vryniotis

7). Understanding Domain Names: Why and When?
by Alexander Dawson

8). 11 Tools For Finding a Perfect Domain Name
by Abdullah


1). A Dozen Tricks Used By Clients To Manipulate Freelancers
by Aidan Huang

2). 7 Common Objections Freelancers Face, Now Answered
by Laura Spencer

3). 10 Awful Client Cliches That Make Every Designer Cringe
by Joshua Johnson

4). Why RFPs Are Never Good
by Amber Weinberg

5). Web Design: Say No to Spec
by Stephanie Hamilton

6). How to Stay Alert & Refreshed: 6 Ways
by Yo Noguchi

7). How to convince your clients of the importance of white space
by Mirko


1). New Year’s Roundup of Web Design Trends 2011 and Predictions 2012

1). 5 Former Design Trends That Aren’t Cool Anymore (So Stop Using Them)
by Joshua Johnson: “Bad practices and what to do instead.”

2). What else does HTML5 need to defeat flash? (Part 2)
by Viki Hoo

3). Smashing Special: WordPress Theme Trends For 2012
by Siobhan McKeown

4). An Event Apart: The Future of CSS
by Luke Wroblewski

5). Guided Tour Through Web Design History
by Christian Vasile

6). Browser Trends February 2012: Chrome 16 Obliterates IE8
by Craig Buckler

7). The Best SEO Practices and Tips 2012
by DiTesco: “Best on-page SEO practices.”

8). 2012 Dev Predictions From a Gartner Analyst: Rise of Ruby, PaaS vs. SaaS, More
by John K. Waters


1). An Important Time for Design
by Cameron Koczon: “It’s becoming increasingly difficult to ignore the fact that design has a massive role to play in the evolution of the web and the next generation of web products.”

2). The separation of structure, presentation and behavior is dead
by Kevin Dees

3). A winter of discontent in the web design world?
by Christian Heilmann

4). I can’t design in the browser
by Sarah Parmenter

5). Benefits and Pitfalls of Using Code Frameworks
by Jake Rocheleau

6). Inspiration vs. Imitation
by Jessica Hische: “They tell me my work was an inspiration… I feel all warm and fuzzy inside for a moment…until I click on their link and realize that much of what they intend to publish is nearly a direct tracing of my work.”

7). The instant web
by Luis Freitas: “Digital marketing strategist Luis Freitas ponders on the next step the web is going to take and discusses the semantic web, the instant web and Web 3.0.”

8). Why HTML5 is not the choice for enterprise mobility
by David Akka: “David Akka, UK MD of Magic Software, explores the buzz around HTML5 and why it may not yet be the right choice for enterprise developers.”

9). Mobile Content Strategy: Is Less Always More?
by Martin Rapavy: “Being concise doesn’t mean that the content shouldn’t make sense and actually become useless.”

by glazou: “I am asking all the Web Authors community to stop designing web sites for WebKit only.”

11). What’s All The Fuss About Vendor Prefixes?
by Steven Bradley: “The issue. Additional Resources – Here then are some of the articles I’ve collected these past couple of weeks.”

12). Lea Verou on the future of CSS and more
by Tanya Combrinck: “Front-end code pirate Lea Verou answers your questions on her new project, common coding mistakes and exciting upcoming CSS features.”

Inpiration and Creativity

1). Examples of Fresh Effects in Web Design
by Mary Lou: “Be it a whole new and experimental way of navigating through the website or just a tiny surprising hover effect – fresh effects can spice up your design and bring some life to it.”

2). Common Sense in Web Design? Sadly Not For Everyone
by Bogdan: “If you are the owner of one of more of these sites…, then take my words as a critic point of view and hire someone to remake it. Fast.”

3). Showcase Of 45 Websites Using The Parallax Scrolling Effect
by admin

4). A Collection Of Vintage And Retro Websites For Inspiration
by admin

5). Circles in Modern Web Design
by AndrewG

6). Web design Ideas and Tips in Using Circles
by Ebrian Acebedo

7). Showcase of Websites With Video Background
by Arshad Cini

8). 25 Examples of Super Wide Website Designs
by Chris Spooner

9). 60+ Fresh Examples of Modern Single-Page-Website Designs
by Anders Ross

10). Awesome Single Page Website Designs
by Loveish Kalsi

11). 30 Beautiful One Page Websites For Inspiration
by BBL

12). One-Page Web Designs: The New Poster?
by Patrick McNeil

13). 25 Outstanding Minimalist Website Designs
by admin

14). 34 Beautiful Blog Designs
by Brant Wilson

15). 2012 Creative and Impressive Blue Website
by admin

16). 200 best 404 error page designs for inspiration
by admin

17). 30 Brand New Examples of Using People in Web Design
by admin

Check out also the great articles about Effective web design and its examples in “Related articles” (see links below).


Comments (6)

  1. Pingback: PSD to HTML Conversion » 207 Articles on Effective Web Design – Winter 2011-2012

  2. Pingback: Fast, Easy Web Design! » Blog Archive » Making Your Web Design Mobile​​Friendly in Minutes With …

  3. Pingback: 207 Articles on Effective WebDesign – Winter 2011-2012 – PSD to HTML Blog » Web Design

  4. this is effective web design for all website.

    Web Design Company

  5. this is very good

    Web Design Company

  6. This blog would be very much helpful to those who have stepped in the web designing field.A well explained information on effective web design.