Design

still hashing about

Design basics

• Eames: Design is a Method of Action [1]
• Dieter Rams: ten principles for good design
  • Applying Dieter Ram’s ten principles to web design
• Paul Rand: Thoughts on Design

• Design Patterns

• Stop Redesigning! Lean Rapid Interface Iteration Thoughts and Tips

• Google I/O 2012 - Advanced Design for Engineers

• Startups, this is how design works

Social

to add social stuff;

• many2many

etc

User experience

General

• Usability First - We want to provide valuable information about usability for anyone interested in the design of software or websites, from beginners to experts, in academia or in industry.
• http://www.uxforthemasses.com/ UX for the masses] - These articles are written by Neil Turner - A UK based UX designer. I like to share, discuss and comment on UX ideas, tips, insights and practices that everyone can use to help design a better user experience for all.

• 25 Excellent Usability/UX Articles and Resources

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

Branding

• github: octodex - play on a logo

Ratios

• Applying the Golden Ratio to Your Web Designs - 19th Oct 2010
• tutsplus: Mathematics and Web Design: A Close Relationship - Nov 16th 2010

Usability

• Pagination 101 [2]

• 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

• Information Architecture - The importance of having a well-structured website comes from how information and data is related to each other. The thorough planning and gathering of ideas to form a structured and meaningful arrangement of this data is Information Architecture.

• So what’s an Information Architect?
  • study of information structure for a defined purpose
  • define the architecture of content relative to database construction and user-interaction
  • organize and qualify the appropriate use of metadata schemas, controlled vocabularies, folksonomies, ontologies etc.
  • articulate and produce meaningful information visualizations
  • help to structure information for easy digestion in digital applications

• 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 [3]

• 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

• Facebook: Social Design
• Drupal.org website style guide

• UX Booth Style Guide
• The Chicago Manual of Style

• Android Design

• UX Bookmark: A huge list of Style Guides and UI Guidelines

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?

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

• https://github.com/zsitro/briefchecklist

• The Nine Pillars of Successful Web Teams - July 9, 2003

Workflow

Using an iterative design and tasklist based roadmap.

• Define project brand
  • Feel
  • Colour palette
  • Logo
  • Typography
    • Webfont for headings, paragraphs, navigation, etc.
    • Vertical rhythm baseline (proportions for font-size and line-height)
  • Texture and background
  • Header
  • Slogan

• 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 of pages / addresses
  • Layouts for areas and pages
  • Wireframe layout for mobile first and desktop (and then tablet)
  • How can the project brand differ yet retain continuity in each area?

• Use base theme
  • HTML5
  • 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
    • Web fonts and icons
• Etc.

• Start coding
  • Use wp-base-install
  • Set project based CSS preproces variables and mixins
  • Import production or test content
  • Etc!

• Testing
  • Etc.