Design

still hashing about

Design basics

• http://blog.gentry.io/eames-design-is-a-method-of-action
• http://www.vitsoe.com/en/gb/about/dieterrams/gooddesign/
  • http://www.webdesignerdepot.com/2012/06/applying-dieter-rams-ten-principles-to-web-design/

• http://www.paul-rand.com/foundation/thoughts/

• Stop Redesigning! Lean Rapid Interface Iteration Thoughts and Tips

• Google I/O 2012 - Advanced Design for Engineers

to add social stuff;

• many2many, etc

Usability and UX

Basics

• http://www.usabilityfirst.com/
• http://www.intuitionhq.com/blog/2011/03/usability-ux-checklist/

• http://uxmovement.com/thinking/the-web-design-process-everyone-should-follow/

• http://meiert.com/en/blog/20070330/25-excellent-usability-ux-articles-and-resources/

• http://stewartmccoy.com/how-to-get-a-ux-job-and-what-its-like/

Examples

• UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true. And you don't have to take our word for it, we'll show you a lot of research findings and articles by design and usability gurus.

• Design patterns search

• Buffer’s UX | “Buffer” as a Good Thing - great site review

• Skeumorphism & Storytelling - "An interface that is not only easy to use, but fun to use, engages the user and creates an experience where obstacles are easier to overcome, and thus an experience where the product is easier and more effortless to use. Done right, skeuomorphism can retain the simplicity and ease of use of an interface while empowering users to act."

• http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis
• http://www.webcredible.co.uk/user-friendly-resources/web-usability/alpha-website-review.shtml

General

• http://www.uxforthemasses.com/
• http://www.nirandfar.com/2012/04/billion-dollar-mind-trick.html

Good Practice

• Hacking: Always Design the UX First

• http://uxmovement.com/content/why-your-links-should-never-say-click-here/

• http://ada.mbecker.cc/post/25113870928/goddamn-three-bars-icon

• Pagination 101 [1]

Information Architecture

• http://designrjc.com/services/information-architecture/

• http://blog.controlgroup.com/2012/06/25/so-whats-an-information-architect/

• http://www.jjg.net/ia/visvocab/

Accessibility

• Web Content Accessibility Guidelines (WCAG) 2.0
  • Web Content Accessibility Guidelines (WCAG) Overview
  • How to Meet WCAG 2.0
  • Techniques for WCAG 2.0 [2]

• http://en.wikipedia.org/wiki/Web_accessibility
• http://diveintoaccessibility.info/table_of_contents.html - free book, 30 days to a more accessible web site

• http://webaim.org/articles/
• http://www.sigmer.com/accessibility_statement.html

BS 8878, Web accessibility - Code of Practice, is consistent with the Equality Act 2010 and is referenced in the UK government’s e-Accessibility Action Plan

• http://www.hassellinclusion.com/bs8878/
• http://www.access8878.co.uk/

Social, UX and Brand Style Guides

• https://developers.facebook.com/socialdesign/

• https://infrastructure.drupal.org/drupal.org-style-guide/brand.html

• http://www.theuxbookmark.com/2010/08/interaction-design/a-monster-list-of-ui-guidelines-style-guides/

• UX Booth Style Guide
• The Chicago Manual of Style

• Google HTML/CSS Style Guide

Mobile

• http://www.lukew.com/ff/entry.asp?1514

See HTML/CSS#Responsive.

Style

Colour

• http://www.w3.org/TR/css3-color/#svg-color
• http://blog.asmartbear.com/color-wheels.html

rgba(0, 0, 0, 0.2)

Graphics

• http://tinypng.org/

• http://wiki.evilmadscience.com/Producing_a_stippled_image_with_Gimp

• http://dbushell.com/2012/04/03/svg-use-it-already/
• http://my.opera.com/ODIN/blog/2009/10/12/how-media-queries-allow-you-to-optimize-svg-icons-for-several-sizes

• http://dcurt.is/pixel-fitting

Canvas

• http://asserttrue.blogspot.ca/2012/01/procedural-textures-in-html5-canvas.html

GUI

• WYSIWYG

Icons

• http://www.pushing-pixels.org/2011/11/04/about-those-vector-icons.html

• http://www.webdesignerdepot.com/2012/01/how-to-make-your-own-icon-webfont/
• Make a dingbat font with Inkscape
• YouTube: How to Make a Font with Inkscape 0.47

• http://pfefferle.github.com/openwebicons/
• http://fortawesome.github.com/Font-Awesome/

SVG

• Open Clip Art Library 2.0 (at 417M)

Ornamental flourishes

• http://vector.tutsplus.com/articles/web-roundups/250-free-vintage-graphics-flourish-vector-ornaments/
• http://all-silhouettes.com/flourishornaments/
• http://designshack.net/articles/freebies/weekly-freebies-flourishes-and-ornaments/
• http://moorstation.org/typoasis/ornaments/index.htm

Also; dingbat flourish fonts

• http://stackoverflow.com/questions/8903074/technique-for-adding-flourishes-to-div-corners-and-borders-css3-multiple-backgr

SEO

• http://katemats.com/2012/03/04/what-every-programmer-should-know-about-seo/
• http://webmasters.stackexchange.com/questions/30186/are-there-any-clear-indicators-that-my-sitemap-file-is-beneficial

• http://whatpageofsearchamion.com/

• http://www.learningjar.com/publishedSkill?learningPathId=4fa82644e4b0f1384b1d16b3

Analytics

• http://www.google.com/analytics/

• http://piwik.org/

Domain

• http://www.leandomainsearch.com/top-domain-name-prefixes-and-suffixes

Theming

• Define style
  • Colour palette
  • Typography
    • Webfont for headings, paragraphs, navigation, etc.
    • Vertical rhythm baseline (proportions for font-size and line-height)

• HTML5 compliant base
• Browser reset
• Start with mobile first
  • Make sure mobile devices don't get desktop size CSS or content
  • 320 And Up
• If available, use server-side CSS preprocessing through theme or plugin.
  • LESS and limited SCSS/Compass in PHP (all shared), full SCSS/etc. with Ruby (easier on VPS)
  • Semantic CSS with grid and vertical rhythm systems

• Apply styles
  • Install chosen base theme and and additional 'base' plugins
  • Use CSS preprocess variables and mixins

• Define other stuff
  • What pages (sitemap)
  • How content is displayed on each page
  • UX things and stuff