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/

• Design Patterns

• 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 user experience

General

• http://www.usabilityfirst.com/
• http://www.uxforthemasses.com/

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

• http://webdesign.tutsplus.com/articles/design-theory/mathematics-and-web-design-a-close-relationship/
• http://designshack.net/articles/graphics/applying-the-golden-ratio-to-your-web-designs/

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
• Alpha.gov.uk - A quick usability review

Specifics

• 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://ada.mbecker.cc/post/25113870928/goddamn-three-bars-icon

• http://www.fastcodesign.com/1669879/can-we-please-move-past-apples-silly-faux-real-uis

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

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

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/

• Pagination 101 [1]

• COPE: Create Once, Publish Everywhere

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.

SEO

• What Every Programmer Should Know About SEO
• Are there any clear indicators that my sitemap file is beneficial?

• Search Engine Optimization (SEO) Kit - something to look through some day

• Why Your Links Should Never Say “Click Here”

• Creating a semantic breadcrumb using HTML5 microdata

Sitemaps

• http://www.codinghorror.com/blog/2008/10/the-importance-of-sitemaps.html

Tools

• What Page of Search Am I On?

Analytics

• Google Analytics

• Piwik - open source

Domain

• Calculating The 5,000 Most Frequently Used Domain Name Prefixes and Suffixes

Process

Concepts

• Paper prototyping

Guides and examples

• The Web Design Process Everyone Should Follow - o rly?, Dec 16th 2010
• Simple Usability/UX Checklist- March 29th, 2011
• Hacking: Always Design the UX First - June 4th, 2012

• Style Tiles are a design deliverable consisting of fonts, colors and interface elements that communicate the essence of a visual brand for the web. They help form a common visual language between the designers and the stakeholders and provide a catalyst for discussions around the preferences and goals of the client.
  • styletil.es has good ideas but a lack of templates..
  • Style Tiles and How They Work - March 27, 2012

Workflow

Using an iterative design and tasklist based roadmap.

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

• Define UX+IA
  • What are the primary areas of the site?
  • What info to display for each area audience?
  • What content needs written?
  • Create sitemap outline
  • Wireframe layout for mobile first and desktop (and then tablet)
  • Wrap base style into UX aesthetics

• Content and branding
  • Logo
  • Header
  • Slogan
  • Area and page specific text

• Use base theme
  • HTML5
  • Browser reset
  • 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
• Etc.

• Start coding
  • Install chosen base theme and and additional base plugins
  • Set project based CSS preprocess variables and mixins
  • Style site using test content as a reference
  • Etc!

• Testing
  • Etc.