This post presents a collection of articles on how to develop an effective website which were retweeted at @htmlcut this summer. The roundup can be especially useful if you are planning to start a new web development project and need to refresh your knowledge, “shake up” creativity or find new ideas.

In fact, there are a lot of resources about different aspects of effective web design on the Internet. However, the web industry is changing very fast, and new trends appear here almost every day. Some of the articles listed below describe exactly such new tendencies. But even if an article doesn’t provide something absolutely new, it can be still helpful. Really, quite often one and the same thing but given from a little different point of view makes it possible to reveal new and sometimes unexpected facets of a problem.

Please note: Most of the articles include a list of additional resources – don’t forget to check them out too.

Hope you’ll find this compilation interesting for you.

• Web Design Principles and Basics
• Website Structure
• Website Layout
• Psychology and Web Design
• Colors in Web Design
• Usability and User Experience
• Content and Copywriting
• Typography
• Home Page
• Landing Page
• Call to Action
• Forms
• Footers
• Tips and Recommendations
• E-Commerce Websites
• Accessibility
• SEO and Optimization
• Website Technical Aspects
• Trends
• Inpiration and Creativity

Web Design Principles and Basics

1). 10 Principles Of Effective Web Design
http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design/
by Vitaly Friedman (@smashingmag): “Users: Appreciate quality and credibility, Scan, Are impatient, Satisfice, Follow intuition, Want to have control (never open links in new windows); 1. Don’t make them think; 2. Don’t squander patience: Remove barriers (no subscriptions, registrations first); 3. Focus attention; 4. Feature exposure: Let see clearly functions available; 5. Effective writing: Short concise phrases, Scannable layout (headings, lists), Plain objective language; 6. Simplicity; 7. White space (separate by whitespace, not a visible line); 8. Clear consistent structure, Most with the least cues/visual elements, Match presentation to capabilities (use max. 3 typefaces in a max. of 3 point sizes – max. of 18 words or 50-80 characters per line); 9. Follow expectations: navigation, text structure, search placement – Innovate only if you have a better idea; 10. Test! See also References.”

2). The Concept of Balance in Web Design
http://www.onextrapixel.com/2011/08/25/concept-and-factors-of-balance-in-web-design/
by Stephanie Hamilton (@SHamiltonDesign): “What is Balance: Symmetrical, Vertical Balance, Horizontal Balance, Other Forms, Asymmetrical. Symmetry vs. Asymmetry – How do you know when it’s right to use either? The Rule of Thirds. Showcases and Examples.”

3). Web Design Symmetry and Asymmetry
http://www.1stwebdesigner.com/design/symmetrical-asymmetrical-web-design/
by Rachel Arandilla (@rachelarandilla): “What Symmetry is; Asymmetry; Symmetrical vs Asymmetrical Web Design; Examples of Impressive Web Design. Summary: Symmetry is great for the basic layout structure, Asymmetry is great for grabbing the viewers’ attention, With asymmetry compositional balance should be in mind, Follow your instincts, Stick to basics.”

4). Developing Visual Rhythm in Web Design
http://tympanus.net/codrops/2011/08/19/developing-visual-rhythm-in-web-design/
by Patrick Cox (@pcridesagain): “Rhythm… is just predictable repetitions. Visual Rhythm: Regular Rhythm, Progressive Rhythm, Flowing Rhythm. Developing and Examples. Take control of the rhythm.”

5). Using the Law of Attraction in Web Design
http://www.onextrapixel.com/2011/07/12/using-the-law-of-attraction-in-web-design/
by Stephanie Hamilton (@SHamiltonDesign): “Appeal: Know Your Audience. Attach: Be Authentic, Use Words That Reflect Your Purpose, Be Responsive. Showcase and Examples.”

6). The Lost Art Of Design Etiquette
http://www.smashingmagazine.com/2011/08/29/the-lost-art-of-design-etiquette/
by Dan Rose (@dblizzy): “Common Mistakes: Didn’t Put the File on the Server, Unnamed or Unused Layers, Unpurchased Stock Photos, Inaccurate File Names, Missing Fonts, Inconsistent or Inaccurate Content. Photoshop Etiquette Manifesto.”

7). The Principles of Beautiful Web Design Article (2007)
http://www.sitepoint.com/principles-beautiful-web-design/
by Jason Beaird (@jasongraphix)

Website Structure

1). How Many Pages Does A Website Need?
http://www.instantshift.com/2011/08/08/how-many-pages-does-a-website-need/
by Mohammad Moradi: “Different Pagecount Types in Web Design: Single-Page Web Design, Multiple-Page Web Design. Home Page, About Page, Contact Page, Help/FAQ/Support Page, Blog, Sitemap, Log-In or Sign-Up Page. Pages that list products, services, pricing and so on (there are plenty of other types of pages that might be appropriate to include as well). Splash Pages, or Intro Pages. Fewer or More Pages (headers and footers).”

2). Incredible Single Page Niche Websites
http://designfestival.com/incredible-single-page-niche-websites/
by Tara Hornor: “Showcase of Single Page Websites.”

3). Fixed position web elements
http://www.webdesignerdepot.com/2011/09/fixed-position-web-elements/
by Patrick McNeil (@designmeltdown): “Fixed headers. Fixed Footers. Logo only. Back to top. Multiple fixed elements. Examples. Resources – jQuery plugins.”

Website Layout

1). Fluid Vs Fixed Design: Which is Better?
http://www.evolutionarydesigns.net/blog/2011/07/18/fluid-vs-fixed-design-which-is-better/
by James Johnston (@element321): “Design Elements to Think About Before Deciding to Go with a Fluid or Fixed Design; What is Fluid Design; Pros of using a Fluid Design; Cons of Using a Fluid Design; What is Fixed Design, Fixed Design – Pros and Cons.”

2). Grid Layouts in Modern Web Design
http://www.onextrapixel.com/2011/09/01/grid-layouts-in-modern-web-design/
by Stephanie Hamilton (@SHamiltonDesign): “Golden ratio. Grid Layouts. The Rule of Thirds. 960 Grid System. Alternative Layout Methods: Circles, A Minimalist Approach, Maintain Structure, Focal Point, Illustrating Areas, Tilt the Grid. Showcase.”

Psychology and Web Design

1). 7 Tips for a More Engaging Website
http://www.intuitionhq.com/blog2011/08/how-to-make-your-website-more-engaging/
by Jacob Creech: “Too many choices lead to no choice; People need Social Validation; Scarcity makes people want to buy; Use food, sex or danger; Use the power of faces; People process information better as stories; Build commitment over time.”

2). Psychological Manipulation in eCommerce Design
http://www.uxbooth.com/blog/psychological-manipulation-in-ecommerce-design/
by Kristina Bjoran (@KristinaBjoran): “Defaults and frictions: “Eliminating small frictions can radically alter one’s decisions”; Idea of shipping costs – to spend more: the smarter retailers make their users feel the better. Coming to terms with the impulse-buy: The guilt of the impulse buy – it’s best (for the retailer) to postpone that feedback as long as possible; Convince them it’s important: Coupons, how much money they can save, ever-effective countdown and peer pressure.”

Colors in Web Design

1). Colors in Web Design: Choosing a right combination for your Website
http://www.1stwebdesigner.com/design/colors-web-design-right-combination/
by Tina Zennand (@Tina_Zennand): “Color theory: the main principles. Learning to combine colors. Colors in different cultures: symbolism. The meaning of colors. A varicolored showcase.”

2). Creating an Effective Color-Scheme for Web Designs
http://www.designzzz.com/creating-effective-color-scheme-web-designs/
by Tayyab (@tayyabzzz): “Color Combinations; Colors Suitability; Layout and Color Scheme.”

3). Choosing colors for your business or website
http://www.socialh.com/choosing-colors-for-your-business-or-website/
by Nina Wu: “Terms; Main rules; Colors connote; Tips; Tools.”

Usability and User Experience

1). The Ultimate 20 Usability Tips for Your Website
http://spyrestudios.com/the-ultimate-20-usability-tips-for-your-website/
by Oleg Mokhov: “1. Structure website design around update frequency; 2. Logo in the top-left, menu to the right or below; 3. Search in the upper left or right; 4. Contact info or form easy to find; 5. Help page(s) easy to find; 6. As few menu items as possible; 7. State-changes in links and buttons; 8. Highlight the active form field; 9. Link colors as noticeable as possible; 10. Keep everything as consistent as possible; 11. Forms easy to follow; 12. Breadcrumbs near the top; 13. Be window shopper-friendly; 14. Always name/logo/tagline at the top; 15. Minimum of animations and form-over-function graphics; 16. NO to splash pages; 17. Break text up with images when possible; 18. Text with headlines, segments, lists; 19. Own domain; 20. Clear permalinks and as short as possible.”

2). 5 Proven UX Strategies
http://designm.ag/resources/5-proven-ux-strategies/
by Shawn Borsky: “Focus on key experiences (How the user remembers a product: details – the title size, what is said and where positioned – don’t amount too much); Set Expectations (like 37Signals); Be Clear (choose straight-forward cues even if it may increase amount of time spent, text, clicks. Example of Starbucks); Speed it up; Reach beyond usability (Usability is functional. Good experiences are engaging, meaningful, enjoyable – far beyond the simple ability to complete tasks without difficulty – Apple vs. Blackberry).”

3). The User Experience And Psychology Of Colour
http://spyrestudios.com/the-user-experience-and-psychology-of-colour/
by Jacob (@IntuitionHQ): “I am all for innovation in design, but there are times and places where conventions should be followed.”

4). 8 Usability Mistakes Made By Web Designers
http://arbent.net/blog/usability-mistakes-made-by-web-designers
by Rob Bowen: “No Mobile Consideration. Insufficient Padding and Margins. Not Enough Contrast for Readability. Lack of Progressive Enhancement. The Unclickable Clickables. Too Many Options. Inadequate 404. Load Times. EXCELLENT resource lists.”

5). 7 Best Practices for Improving Your Website’s Usability
http://mashable.com/2011/09/12/website-usability-tips/
by Jacob Gube (@sixrevisions): “General Goals of User-Friendly Web Content: easy and pleasant to read, easy to understand, skimmable. 1. Content as Concise as Possible. 2. Headings. 3. Scan Quickly: first two words count, the passive voice and the inverted pyramid style. 4. Bulleted Lists and Text Formatting. 5. Sufficient Spacing. 6. User-Friendly Hyperlinked Text. 7. Visuals: images aid textual content, no stock photos and meaningless visuals.”

Content and Copywriting

1). Five Copywriting Errors That Can Ruin A Company’s Website
http://www.smashingmagazine.com/2011/06/29/five-copywriting-errors-that-can-ruin-a-company-website/
by Brad Shorr: “1). Writing Inwardly. 50 words on the features, 100 words on the benefits and 150 words on the experience. Tips for Writing Outwardly 2). Burying The Lead 3). Mediocre Meta Titles and Descriptions – Focus on benefits, Establish credibility and other tips 4). Saying Too Much 5). Weak Or No Calls To Action. 4 types of CTA. Clear and compelling. CTA are strengthened by. Primary and secondary CTA. Examples. 5 Case Studies. Keep Eye On Conversion. See also Resources / Tools.”

2). Science of a Good Headline
http://www.1stwebdesigner.com/design/science-of-a-good-headline/
by Rachel Arandilla: “Techniques to Create a Good Headline. Great Examples of Headlines and Slogans for Inspiration. Helpful Links and Resources.”

3). Powerful Titles for Your Blog Posts
http://www.instantshift.com/2011/08/05/powerful-titles-for-your-blog-posts/
by Ester Liquori: “Distinguish Between Blog Title, Post Title and Headings; Headlines and Headings Functions; Good Titles Attract Right Readers; Let your Headlines Speaking for You; Are your Headings Effective. Resources.”

4). How to Turn Website Visitors into Customers for Your Creative Business
http://the99percent.com/tips/7075/How-to-Turn-Website-Visitors-into-Customers-for-Your-Creative-Business
by Mark McGuinness (@markmcguinness): “1. Work out what they really want. 2. Show them you mean business. 3. Make your offer crystal clear. 4. Show them how to buy (this is all obvious to you, but not to them. The more you tell them, the easier it looks and the more of them will buy). 5. To price or not to price? (prices, packages at different price points, a range of pricing, no price) 6. Use testimonials. 7. Promote a free subscription (hardly anyone will buy the first time they land on your site).”

Typography

1). The most popular fonts used by designers
http://www.webdesignerdepot.com/2011/08/the-most-popular-fonts-used-by-designers/
by Cameron Chapman (@cameron_chapman): “The typefaces below… have proven popular among designers the world over, and are used in designs for everything from multi-national corporations to individual books or journals.”

2). 7 Quick and Easy Ways to Jazz Up Your Headline Typography
http://designshack.co.uk/articles/typography/7-quick-and-easy-to-jazz-up-your-headline-typography/
by Joshua Johnson (@secondfret): “One Big Line, One Small Line; Vary Your Case; All Caps: Harder to Read?; Equal Line Width; Selective Word Emphasis; A Double Message; Integrate Text-Altering Graphics; Nestled Text.”

3). How to Use Typography Effectively in Web Design
http://naldzgraphics.net/design-2/typography-web-design/
by Kareen Liez: “1. Read the text; 2. Apply a clear hierarchy; 3. Consider macro and micro typography; 4. Pay attention to type colors; 5. Your CSS; 6. Use the right font size; 7. Spacing; 8. Line-height; 9. Alignment of text; 10. Identifying links; 11. Use safe fonts”

4). Mind Your En And Em Dashes: Typographic Etiquette
http://www.smashingmagazine.com/2011/08/15/mind-your-en-and-em-dashes-typographic-etiquette/
by David Kadavy: “Setting Body Copy: Indentation or Space After a Paragraph, Avoid justified type. One Space After a Period, Not Two. Use Dashes Dashingly: Hyphen, En Dash and Em Dash. Use Smart Quotes. Quotation Marks Don’t Measure Up. Proper Math Symbols. There’s Always More With Ellipses. Accent Marks And Other Diacritics. Ligatures Bring Letters Together.”

5). 10 HTML Entity Crimes You Really Shouldn’t Commit
http://line25.com/articles/10-html-entity-crimes-you-really-shouldnt-commit
by Chris Spooner (@chrisspooner): “Not converting your ampersands; Making your own ellipsis; Incorrect use of the em and en dashes; DIY Copyright and Trademark symbols; Plain text mathematics symbols; Supersized degree symbols; Somewhat straight curly quotes; HTML Entity names vs entity number. See also Comments.”

Home Page

1). The Anatomy of an Effective Homepage
http://www.onextrapixel.com/2011/08/17/the-anatomy-of-an-effective-homepage/
by Kean Richmond: “The Constants: Logo, Navigation, Search, Content (…not only for SEO or accessibility reasons but they can also provide users with valuable information). Dealing with Objectives: User, Business. Communicating Purpose & Personality: Purpose, Logo, Imagery, Microcopy, Shopping Basket/Cart, Personality. Design: Imagery, Language, The Fold. Inconsistent Layout: Changes. Examples.”

2). 8 Tips for Small Business Homepage Design
http://mashable.com/2011/08/14/homepage-design-small-business/
by Stephanie Buck (@StephMBuck): “Keep it simple and clear; Be scroll-conservative; Display the right links (A good rule of thumb is: about, product, news); Keep featured products above the fold; Make it current (Customers won’t stick around if you’re not taking the time for them); Create a Homepage that reflects your physical theme; Attach a featured image to your Homepage; Be quirky.”

3). Designing a Website’s Introductory Text: Tips and Examples
http://sixrevisions.com/web_design/website-introductory-text-tips-examples/
by Jacob Gube (@sixrevisions): “Goals: To let know what a website is about, Call to action, What to expect further. 1. Text – Concise (1-3 sentences) and Useful. 2. Show Off Company Personality. 3. Be Direct. 4. Offer Value Proposition. 5. Place it in a Distinctive Position: Top left, Top center, Leverage surrounding visuals, Typography techniques – size, styling. 6. Short Heading. 7. Close Proximity to Calls-to-Action. Trends and techniques. Examples.”

Landing Page

1). 8 Ways your Landing Page Design is Sabotaging your Click-Thru Rate
http://unbounce.com/landing-pages/8-ways-your-landing-page-design-is-sabotaging-your-click-thru-rate/
by Jen Gordon (@itsjengordon): “Lack of Balance between Images and Copy; Not Optimizing for Mobile; Letting your Brand Control the Color Scheme; Using Images that do Not Evoke an Emotional Response; Using Navigation on the Page; Testing too many Design Changes at Once; Not Giving Your Layout some Breathing Room; Saying too Much at Once.”

2). Landing Page: Tips, Tools and Inspiring Examples
http://www.1stwebdesigner.com/design/landing-page-tips-tools-examples/
by Ruben D’Oliveira (@rubendoliveira): “Headline/Call To Action; Clients/Testimonials; Color; Consistency (Keep your landing page trustworthy and avoid confusion); Avoid design clutter (have a clean and simple design, decide your content priorities and make it easy for your visitors to reach their goal). A/B Testing tools: the most popular of them (a list). Inspiring Examples.”

3). Anatomy Of A Perfect Landing Page (Infographic)
http://blog.kissmetrics.com/landing-page-design-infographic/
“Key features; Colors.”

4). 8 Tips for Making your Website’s Landing Pages Better
http://www.orphicpixel.com/8-tips-for-making-your-websites-landing-pages-better/
by Connective Web Design: “Keep the Landing Page Simple; Add Graphics or Video to the Page; Strategically Place the Buy Button; Use a Large Font; Keep Paragraphs Short; Place Text In Columns; Have Testimonials on the Page (…testimonials need to be stated in specific terms, people are not as impressed with generalities); Offer Patrons a Money-Back Guarantee.”

5). Better First Impressions Through Design
http://uxmag.com/design/better-first-impressions-through-design
by Chuck Longanecker: “First Impressions Matter: Grab their attention, Show them your vibe, Be intriguing and inviting; From Banner to Landing Page: Deliver on the promise of the ad, Give them what they want – almost, Provide a second option, Test and learn; Calls-to-Action That Really Drive: Keep it simple, Make it as painless as possible, Offer a consolation prize, Share the same design style.”

6). Elements Of A Viral Launch Page
http://www.smashingmagazine.com/2011/09/01/elements-of-a-viral-launch-page/
by Simon Schmid (@thegodfounder): “Fundamentals: (1) Let know what you’re doing (2) Spark some interest (3) Make use of that interest. STEALTH start-ups. Examples of basic Launch Pages that spark interest. Additional Elements: Viral loop (an incentive for people to share news), Exclusivity and scarcity, Glimpses of the beta, Social PROOF, Viral content. A lot of examples and strategies.”

7). How to Design a Highly Successful Landing Page
http://www.orphicpixel.com/how-to-design-a-highly-successful-landing-page/
by Guest Author: “Heading and Call-to-Action Button; Choose the Colors Carefully; Consistency in Design; Clutter Free Design; Give Few Testimonials; A/B Testing Tool.”

8). Tips to Improve Conversion on Your Landing Page
http://www.blogduwebdesign.com/webdesign/7-astuces-utiles-pour-ameliorer-la-conversion-sur-votre-landing-page/226 (French)
http://www.39articles.net/tips-to-improve-conversion-on-your-landing-page/ (English)
by Berthoux Fabien (@fabienberthoux): “Simplicity: Show the important, Hide unnecessary, Delete unnecessary. Make the product alive: Make real the image of products. Diagram Gutenberg: 4 areas of importance to take into account the composition of landing page. Guides for attention and further links. Free choice in the subscription. AIDAS: Attention, Interest, Desire, Action and Satisfaction. Examples.”

Call to Action

1). Call to Action Buttons: Examples and Best Practices
http://www.smashingmagazine.com/2009/10/13/call-to-action-buttons-examples-and-best-practices/
by Jacob Gube (@sixrevisions): “Best Practices: Draw user attention with size; Prominent positioning; Use whitespace; Highly contrasting colors; Offer secondary alternative actions; Convey a sense of urgency (Donate NOW vs. Donate); Tell users that taking action is easy (…an action will NOT be difficult, costly, or time consuming); Tell users what to expect.
– Showcase of Call to Action Buttons. – Additional Resources.”

2). Good Call-To-Action Buttons
http://www.uxbooth.com/blog/good-call-to-action-buttons/
by David Hamill (@dav_hamill): “Right words, Positioning, Colors, Size, Avoid overkill-to-action.”

3). Five Copywriting Errors That Can Ruin A Company’s Website
http://www.smashingmagazine.com/2011/06/29/five-copywriting-errors-that-can-ruin-a-company-website/
by Brad Shorr: “5). Weak Or No Calls To Action. Four types of CTA. Clear and compelling. Calls to action are strengthened by. Primary and secondary CTA. Examples. Five Case Studies. Resources And Tools.”

4). Call to Action Buttons
http://www.paulolyslager.com/call-to-action-buttons-psychology-color
http://www.paulolyslager.com/call-to-action-buttons-placement
http://www.paulolyslager.com/call-to-action-buttons-shape-size
by Paul Olyslager (@paulolyslager): “Colors; Placement; Shape and Size: Rectangles with rounded corners – Rounded corners point inward (to the content), They settles subconscious (we strive to avoid sharp edges – primordial reaction), It actually takes less effort to see. Trick to find out if design sections are visible enough.”

5). Test Your Call To Action Placement Using Heat Maps
http://slodive.com/web-development/test-call-action-placement-heat-maps/
by Richard Larson: “Some Heat Map Tools. A Comparison of CrazyEgg, ClickTale and Click Density. Other tools.”

Forms

1). New Approaches To Designing Log-In Forms
http://uxdesign.smashingmagazine.com/2011/08/22/new-approaches-to-designing-login-forms/
by Luke Wroblewski: “Is This You?; Instant Sign-In; New Log-In Problems; We’ve All Got Email; The Little Things Matter. See also Comments.”

2). Techniques for Constructing Usable Registration Forms
http://webdesignledger.com/tips/techniques-for-constructing-usable-registration-forms
by Jake Rocheleau (@jakerocheleau): “Use Plenty of White Space; Offer Tooltips or Side-Notes; Remove Extraneous Details; Utilize jQuery/Web Scripting. Design Gallery (examples).”

3). 22 Inspiring Examples of Contact Forms and Pages
http://webdesignledger.com/inspiration/22-examples-of-contact-forms-pages
by Gisele Muller (@gismullr)

See also “77 Web Development Articles Retweeted at @htmlcut”
Effective Web Design, articles #2, #4 and #5

Footers

1). How to Create An Effective Complex Footer: Content Design and Examples
http://www.onextrapixel.com/2011/09/07/how-to-create-an-effective-complex-footer-content-design-and-examples/
by Stephanie Bane (@srbane): “The Basics: Navigation, Contacts, Social Media. More Elements in Footer: Blog Categories, Archives, and Tags; Recent Comments or Recent Posts; Call to Action Buttons and/or Links; Contact Form; Back to Top. Design, Styling and Placement: Artistic Design. Grid. Background Color. Examples.”

2). Functional and Appealing: 30 Functional Footer Design Inspiration
http://www.youthedesigner.com/2011/08/05/functional-and-appealing-30-cool-footer-design-inspiration/
by admin

3). 25 Examples of Footers in Web Design
http://webdesignledger.com/inspiration/25-examples-of-footers-in-web-design
by Gisele Muller (@gismullr)

Tips and Recommendations

1). The Mistakes We Don’t Bother in Web Designing
http://smashinghub.com/the-mistakes-we-dont-bother-in-web-designing.htm
by admin (@smashinghub): “Faults in Site Structure (balance between the space taken by information and white or blank space); Browser Issue; Miserable Navigation; Using Flash and Music; Unlabelled Links; Typographical Faults; Images are Not Optimized; Wrong Color Combination; Poor Text Format — And tools and tips to avoid that.”

2). Web Design Features To Enhance Your Website for Newbies
http://speckyboy.com/2011/08/14/web-design-features-to-enhance-your-website-for-newbies/
by RocketTheme: “Blog – tips for navigation, improved design (Adding more images to break up the text, etc), performance, SEO. Better Typography. Contact Info That Converts: IM, Quote Request Forms, Social networking links, Phone numbers. Interactive Elements: Testimonial form, Videos with comments, Forums and chat rooms, Buttons to Share This, Email This, etc. ”

3). Four Things I Learned From Designing in-Store Advertising
http://designshack.co.uk/articles/business-articles/four-things-i-learned-from-designing-in-store-advertising/
by Joshua Johnson (@secondfret): “…In addition to faces, get creative with colors, typography.”

4). Webdesign: let your website communicate the right way
http://www.yourinspirationweb.com/en/webdesign-let-your-website-communicate-the-right-way/
by sarah: “Communicate the right message with the right colors, an appropriate style, relevant and original images, well-structured content and good typeset. Communicate credibility.”

5). Creating beautiful web designs: 9 details that matter
http://www.designer-daily.com/creating-beautiful-web-designs-9-details-that-matter-15719
by Mirko: “Use smooth and consistent drop shadows; Go easy on gradients; Align, align, align; Think out of the box; Use icons; Use highlights (smooth contrast between two colors); Improve the typography of your design; Use textures wisely; Use the right words for call-to-actions.”

6). An Easy Design Trick: Using a Photo’s Natural Lines
http://designshack.co.uk/articles/graphics/an-easy-design-trick-using-a-photos-natural-lines/
by Joshua Johnson (@secondfret): “How the existing content in a photograph can be used to guide and inspire you to create unique designs: Literal, Extended Literal, Repetition, Inspired Symmetry.”

7). 10 Web Design Mistakes to Avoid
http://www.testking.com/techking/web-design/10-web-design-mistakes-to-avoid/
by Andy Crofford: “Using Busy or Overloaded Designs; Incorrect Image Usage; Poor Navigation; Overusing Flash, Shockwave, and Java; Using Background Music; Splitting Content into Many Pages; Failure to Account for Multiple Screen Resolutions; Font Selection; Pop-up Windows; Failure to Provide a Search Option.”

8). The Designer’s Guide to a Successful Business Website
http://graphicdesignblender.com/guide-to-a-successful-business-website
by Nicole Foster (@nicolefdesigns): “Content; Loading Time; Navigation; Usability; Design.”

9). Adopting Feng Shui in Web Design
http://www.onextrapixel.com/2011/08/23/adopting-feng-shui-in-web-design/
by Aidan Huang (@inspiremonkey): “Modern Feng Shui; Who Practices Feng Shui; How Does Feng Shui Fit in with Web Design: Simplicity, Placement, Colours, Shapes, Images, Lines, Stillness, Movement, Typography, Content. Showcase of Website Designs with Effective Feng Shui.”

E-Commerce Websites

1). Strategies for Reducing Cart Abandonment
http://designmodo.com/reducing-cart-abandonment/
by Dan Padavona: “… e-commerce shopping cart abandonment rose to 75% in the first half of 2011, up from an already high 71% in 2010. Strategies: Click the Shiny Red Button; Relaxed Customers Make Purchases – Soothing color schemes, Be visible and accessible; Distracted Customers Abandon Carts – Little or no links, no preview for the latest blog post, no other items you have for sale; Keep Forms Short and Simple; Experiment and Improve.”

2). Examples and Analysis of the Top Ten best Checkout Buttons in the world
http://viralogy.com/blog/ecommerce/examples-and-analysis-of-the-top-ten-best-checkout-buttons-in-the-world/
by JunLoayza: “Amazon, Zappos, EB Games and many others – Color (Red, green, yellow, orange); Action word; Icon.”

2a). The Button Color A/B Test: Red Beats Green
http://blog.hubspot.com/blog/tabid/6307/bid/20566/The-Button-Color-A-B-Test-Red-Beats-Green.aspx
by Josh Porter: “At different times in the last two years, I’ve heard green, pink, red, orange, and even light blue as THE ONE COLOR that works best. We chose to test were green and red. The result: The red button outperformed the green button by 21%.”

3). Essential E-Commerce Website Features: Tips and Examples
http://sixrevisions.com/user-interface/e-commerce-website-features-tips-examples/
by Mohammad Moradi: “Product Navigation; Search Box; Shopping Cart; Featured Products; Product View Filtering and Sorting; Product Images.”

4). Add to Cart: 5 Ways to Improve Shopping on the Mobile Web
http://www.uxmatters.com/mt/archives/2011/08/add-to-cart-5-ways-to-improve-shopping-on-the-mobile-web.php
by Shanshan Ma (@shanshanma): “Make the Buy or Add to Cart button and any other calls to action prominent; Make the shopping cart visible and accessible; Make it easy to check out by tapping a prominent button; Provide options for ordering by phone and picking up products at a store; Make mobile shopping social.”

5). 10 Steps To A More Usable Ecommerce Website
http://spyrestudios.com/usable-ecommerce-website/
by Tom Walker: “1. Let Shoppers Buy without Registering; 2. Keep the Signup Simple; 3. Tell Users Where They Are; 4. Make Shoppers Feel Safe; 5. Confirmation (three main parts of it); 6. Search Function; 7. Specify Related Items; 8. Call-to-Action Buttons; 9. Avoid Hidden Charges; 10. Keep the Cart Accessible (above the fold, at the top or on the right).”

6). Building Trust on Ecommerce Home Pages
http://www.uxmatters.com/mt/archives/2011/07/building-trust-on-ecommerce-home-pages.php
by Shazeeye Kirmani: “Increasing First-Time Visitor Conversion Rates. Evaluating the Effectiveness of Trust Elements: Our Results. 26 trust elements on ecommerce home pages. Correlations between the number of trust elements or the time spent viewing a home page and trust. Glossary of Eyetracking Terms. Evaluating Trust Elements on Four Ecommerce Sites. UX Design Guidelines.”

7). Showcase of Creative WordPress eCommerse Sites
http://www.dynamicwp.net/articles-and-tutorials/wordpress-ecommerse-sites/
by Eko Setiawan (@dynamicwp)

8). A showcase of mobile e-commerce
http://www.webdesignerdepot.com/2011/05/a-showcase-of-mobile-e-commerce/
by Patrick McNeil (@designmeltdown): “Examples, explanations and comments.”

9). 30 Most Popular And Best Online Auction Websites
http://www.nerdtreasure.com/30-most-popular-and-best-online-auction-websites/
by rubina.khan

10). Design Inspiration: 7 Galleries Of Excellent E-Commerce Sites
http://www.openforum.com/articles/design-inspiration-7-galleries-of-excellent-e-commerce-sites
by Jacob Gube (@sixrevisions). See also a list of additional RESOURCES at the end of the article.

11). Designing a Shopping Cart Page – UX Tips
http://blog.templatemonster.com/2011/09/07/shopping-cart-page-user-experience-tips/
by Helga Weber: “Easy Access to Customer Service and Shipping Info; Place Coupon Codes Reasonably; Ensure The Client Doesn’t Provide His Information Twice; Show up Taxes If There Are Any; Provide Info On International Orders; Clear Up Privacy Policies; Display a Progress Indicator; Use Clear English; Always Show Up Confirmation Screen; Make Cross-Selling Unobtrusive; Make it Simple. Examples.”

12). Best Free WordPress E-Commerce Themes and Plugins
http://www.39articles.net/best-free-wordpress-e-commerce-themes-and-plugins/
by admin

13). 15 E-commerce au webdesign magnifique! (#Inspiration)
http://www.blogduwebdesign.com/webdesign/15-e-commerce-au-webdesign-magnifique/214
by Berthoux Fabien (@fabienberthoux)

Accessibility

1). A simple introduction to web accessibility
http://www.netmagazine.com/features/simple-introduction-web-accessibility
by Ian Hamilton (@ianhamilton_): “Visual: Associated medical conditions include myopia, colour blindness, glaucoma and albinism. Hearing: presbycusis, acoustic trauma, auditory processing disorder, and otosclerosis. Motor: RSI, cerebral palsy, Parkinson’s, and muscular dystrophy. Cognitive: Down’s syndrome, autism, global developmental delay and dyslexia. Animation or movement. – Examples and explanations.”

SEO and Optimization

1). Thought Provoking Tips for Designing a SEO Friendly Website
http://www.webgranth.com/thought-provoking-tips-for-designing-an-seo-friendly-website
by Webgranth: “Identify the appropriate Keywords; Keywords Should Be In Headings; Use Meta Tags; Alt with Images; SEO friendly navigation; Optimize content with Local Listing; URLs and Filenames: Easy and Keyword rich; Reducing page load time; Content is King; Say ‘Yes’ to CSS; Create XML Site Map; 404 Errors – Protect website by customizing 404 error pages; Comply with W3C Standards; Robots.txt; Add Videos and Images; Make Website Content Easily Indexed; Use social networks.”

2). Designing Websites with SEO and Conversions in Mind
http://justcreativedesign.com/2011/07/05/seo-conversion/
by Jennifer Bailey: “Keep it Simple. Entice Visitors to Click: Using terms like “sign up now,” “learn more here” and “send a comment”; Play around with its color scheme. Include Calls to Action. Maintain Relevancy. Prioritize Keywords. Make it Easy to Connect: Social media. There’s no question about it: Running a successful online business takes a whole lot of work.”

3). Beyond PSD to HTML Conversion – Simple SEO for Web Designers
http://www.htmlcut.com/blog/beyond-psd-to-html-conversion-seo-for-web-designers.html
by htmlcut (@htmlcut): “The typical SEO bottlenecks of the websites developed by web designers for themselves: Ignoring the Existence of Search Engines, Wrong Following Famous Designers, Too High Expectations or Wrong Goals.”

Website Technical Aspects

1). 15 surefire ways to speed up your site
http://www.netmagazine.com/features/15-surefire-ways-speed-your-site
by Sam Quayle (@samquayle): “Minimising HTTP requests, Combining CSS and JavaScript Files, Use CSS3 instead of images, CSS3 image sprites, Media queries, Cache control, Images optimization, Image lazy, Stylesheets in the head – scripts at the bottom loading, Lean code, Improved semantics, CSS selectors, Minification, Lean content, Using content delivery networks, HTTP compression. See also RESOURCES.”

Trends

1). 20 Vital Techniques & Best Practices For Effective Web Design
http://www.noupe.com/design/20-vital-techniques-for-effective-web-design.html
by Cameron Chapman (@cameron_chapman): “1. Vivid Colors; 2. Gradients and Lighting Effects; 3. Transparency; 4. Grunge; 5. Hand-Drawn Designs; 6. Muted Colors; 7. Watercolor Effects; 8. Nature-Inspired Elements; 9. Photo-Realistic Backgrounds; 10. Oversized Typography; 11. Decorative Typography; 12. Bold Backgrounds; 13. Retro and Vintage Elements; 14. Eye-Catching Headers; 15. Collage Elements; 16. Textured Backgrounds; 17. Tabbed Navigation; 18. Black and White; 19. Horizontal Scrolling; 20. Cartoon Elements. LOTS of great examples.”

2). A Few Design Trends
http://designfestival.com/a-few-design-trends/
by Jason Beaird (@jasongraphix): “Navigationless Magazine Style; Expansive Footers; Bare-​​bones Minimalism.”

3). The Biggest Web Design Trends of 2011
http://www.sitepronews.com/archives/2011/aug/31.html
by Stephen Loates: “1. Less Use of Flash; 2. Simpler and Cleaner Design; 3. Mobile Ready Design; 4. Large Photographic Backgrounds; 5. QR: Quick Response; 6. Thumbnail Design.”

4). That Sketched Look: Trends, Tips and Tools for Using Doodles in Design
http://designshack.co.uk/articles/graphics/that-sketched-look-trends-tips-and-tools-for-using-doodles-in-design/
by Joshua Johnson (@secondfret): “Trend Spotting; Sketchy Design; Examples; What This Is Communicating – Concepts; Free Resources – Fonts, Apps for Creating Your Own Doodles, Going 3D.”

Inpiration and Creativity

1). 32 Websites With Big Background Photos
http://designm.ag/design/32-websites-with-big-background-photos/
by Brant Wilson (@SpyreStudios)

1a). 25 Web Designs with Full Page Background Photos
http://line25.com/articles/25-web-designs-with-full-page-background-photos
by Chris Spooner (@chrisspooner) See also links in comments.

2). 35 Effective Examples of Minimalism in Web Design
http://speckyboy.com/2011/08/28/35-effective-examples-of-minimalism-in-web-design/
by Paul Andrew (@speckyboy): “See also additional resources there – 50 Examples of Large Photography Backgrounds and others.”

3). 70 Examples Of Modern Responsive Web Design
http://www.splashnology.com/article/70-examples-of-modern-responsive-web-design/2537/
by AndrewG (@Splashnology): “…creating a web site one should take into account the specifications of tablets, smartphones, and netbooks.”

4). 25 Awesome CSS Web Design Inspiration
http://slodive.com/inspiration/showcase/css-web-design/
by SloDive (@SloDive)

5). Fresh Examples of HTML5 Websites
http://webdesignledger.com/inspiration/fresh-examples-of-html5-websites
by Gisele Muller (@gismullr)

6). 36 Cool Retro Websites For Inspiration
http://spyrestudios.com/36-cool-retro-websites-for-inspiration/
by Brant Wilson (@SpyreStudios)

7). 20 Creative Marketing Websites
http://slodive.com/inspiration/showcase/marketing-websites/
by SloDive (@SloDive)

8). Web Design Showcase of Travel Websites
http://www.onextrapixel.com/2011/08/26/web-design-showcase-of-travel-websites/
by Tomas Laurinavicius (@tomaslau)

9). 20 Superb Web Page Templates
http://slodive.com/freebies/web-page-templates/
by SloDive Admin (@SloDive)

10). 20 Great Examples Of Facebook Page Designs
http://www.topdesignmag.com/20-great-examples-of-facebook-page-designs/
by Bogdan

11). 18 Cool Concept Designs (Facelift) of Notable Websites
http://www.hongkiat.com/blog/concept-design-facelift-notable-websites/
by Alvaris Falcon: “Facebook, Myspace, Google, YouTube, Amazon, IMDb.”

12). Amazing website navigation (24 examples)
http://www.land-of-web.com/inspiration/web-design/amazing-website-navigation-24-examples.html
by admin

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