Process

welcome: an organically evolving knowledge base wiki with outlines, notes and links to manuals, docs, articles, guides, comments, opinions, topics, tips, talks, slides, papers, books, screencasts, webcasts, scratchpads, tools, apps, tab-dumps and more. scroll the menu horizontally to see all pages. if you'd like to contribute, login above using OpenID / e / e / e

todo; do something with this and Organisation

Project

• https://en.wikipedia.org/wiki/Scope_(project_management)

• https://en.wikipedia.org/wiki/Requirements_analysis
• https://en.wikipedia.org/wiki/Requirements_elicitation
• https://en.wikipedia.org/wiki/Specification_(technical_standard)

• https://en.wikipedia.org/wiki/Creative_brief
• https://en.wikipedia.org/wiki/Design_rationale

• https://en.wikipedia.org/wiki/Iterative_design

• Site type and size
  • Basic info and description
  • Additional content
  • Separate pages and areas
  • Custom functionality
• Aesthetic
  • Brand and style
  • Layout
  • Colour scheme
  • Typography
• Social?

• Deadline?

Estimation

• http://civicactions.com/estimating-worksheet
• http://london2011.drupal.org/bofsession/drupal-estimating-techniques
• http://www.lullabot.com/articles/art-estimation
• http://www.mountaingoatsoftware.com/books/1-agile-estimating-and-planning
• http://dev.nodeone.se/node/561

• http://www.alistapart.com/articles/pricing-strategy-for-creatives/
• http://coding.abel.nu/2012/06/programmer-time-translation-table/

Content

• Define UX+IA to fit context of content and users
  • What kinds of users? What do they want to see? (User story?)
  • Create/brainstorm a sitemap outline/diagram of pages(/addresses)
  • What are the primary pages/areas of the site?
  • What info to display on each of these for their users?
  • What content needs to be written?
  • What elements (content areas, etc.) go on each page?
    • Page (as a part of the site as a whole)
    • Primary navigation always available
    • Secondary area navigation depends on area (or subarea) context
    • Primary page info/content
    • Secondary blocks of info/content
  • Wireframe layout for mobile first and desktop (and then tablet)
  • How can the project brand differ yet retain continuity in each area its pages?

Design

See Design

Brief

• https://en.wikipedia.org/wiki/Design_brief
• The Ultimate Design Brief

Guides and examples

• The product design sprint: a five-day recipe for startups | Google Ventures

• 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

• http://www.creativebloq.com/web-design/style-tiles-4132333 The web designer's guide to style tiles]
• Our New Responsive Design Deliverable: The Style Prototype

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

• The Anatomy of an Experience Map | Adaptive Path

User centered

• 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

• http://en.wikipedia.org/wiki/User_story
• http://www.userstories.com/
• http://www.rallydev.com/help/creating-user-story
• http://www.agileweboperations.com/how-to-estimate-user-stories-when-using-pivotaltracker

• http://www.slideshare.net/JeannieMelinz1/creating-a-website-sitemap

Prototyping

• http://en.wikipedia.org/wiki/Website_wireframe

Paper

• Paper prototyping

• • 960.gs templates
  • Grids for Sketching - more minimal. 16, 12, 10, 5, 4 and 3 column.
• http://www.zurb.com/playground/responsive-sketchsheets

• http://konigi.com/tools/graph-paper
• https://news.ycombinator.com/item?id=7688191

• http://uxdesign.smashingmagazine.com/2012/09/18/free-download-ux-sketching-wireframing-templates-mobile/
• http://www.printfreegraphpaper.com/

• http://thedesignblitz.com/creative-ui-and-wireframe-sketches/

Mockups and Stencils

• http://en.wikipedia.org/wiki/Mockup

• http://37signals.com/svn/posts/1061-why-we-skip-photoshop

• http://kaioa.com/node/94 - inkscape
• http://developer.yahoo.com/ypatterns/about/stencils/
• http://konigi.com/tools/omnigraffle-wireframe-stencils
• http://www.fuelyourinterface.com/free-web-ui-wireframe-kit/ - psd
• http://nigel.mcbryde.com.au/2008/08/an-inkscape-web-design-template/
• http://www.jankoatwarpspeed.com/post/2009/12/24/sketching-wireframing-kit.aspx
• http://www.dragnet.se/webbdesign/websitewireframes.html - fireworks

• http://www.axure.com/download-widget-libraries
• http://www.admixweb.com/2011/11/01/23-tools-and-resources-for-great-wireframes/
• http://www.smashingapps.com/2011/02/02/50-free-web-ui-mobile-ui-wireframe-kits-and-source-files-for-designers.html
• http://www.onextrapixel.com/2011/11/16/50-useful-and-free-web-ui-mobile-ui-and-wireframe-kits/

• http://webstiles.namanyayg.com/

• http://www.uistencils.com/ - rl, $

• https://github.com/christiannaths/Redacted-Font

• http://aarnis.com/demo.html

Software

• http://pencil.evolus.vn/en-US/Home.aspx

Service

• Mockingbird - customisable grids(!), can't hide sidebar

• YouTube: Creating Wireframes: Examples, Advice and Tips

• http://wireframe.cc/

• https://quirktools.com

• http://placeit.breezi.com/ - screenshots in rl

• http://www.layoutit.com/build

• https://www.draw.io/

• https://moqups.com/

Implementation

• Webfonts for headings, paragraphs, navigation, etc. (optimised via Font Squirrel)
• Scale and vertical rhythm baseline (proportions for font-size and line-height)
• Visual hierarchy
• Main and section colour palette (CSS)
• And other creative magick

Testing

• Check in different browsers

• Quick; Ask folk for remote feedback

• Detailed; Get folk to browse it, quietly watch over their shoulder, tell them to access certain info, ask them to vocalise all thoughts, write down their actions and issues, communicate more, refine design, implement

Annotation

• http://www.designdrop.io/ [1]

• http://notableapp.com/

• http://www.awesomebox.co/

• Migrate to new site
  • Full migration of data and users
  • Check plugins and settings are alligned
  • Test
  • Etc.

Administration

• domain
• hosting or provision
• backup

• initalise project
• create resources

• fill with content
• version control and backup
• analytics

Marketing

• Google Places
• Yelp
• Qype
• Yell
• Thompson Local

Social

• Facebook
• Twitter
• Pinterest
• etc.