Process
Revision as of 02:31, 15 May 2013 by Milk (talk | contribs) (→User Stories and Experience, Information Architecture)
todo; do something with this and Organisation
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
- The Nine Pillars of Successful Web Teams - July 9, 2003
Tools
See Organisation
Aesthetics
Using an iterative design and tasklist based roadmap.
- Define project brand style
- Feel
- Colour palette
- Logo
- Typography
- Texture/background
- Header
- Slogan
User Stories and Experience, Information Architecture
See also Design
- 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
Specification
- Size of site and budget
- Areas of website
- Info and content
- Extra
- Aesthetic and brand
- Logo and style
- Color scheme
- Typography
- Social?
- Deadline?
Build 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/
Layout
Paper
- 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
- http://uxdesign.smashingmagazine.com/2012/09/18/free-download-ux-sketching-wireframing-templates-mobile/
Mockups and Stencils
- 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://www.uistencils.com/ - rl, $
Software
Service
- Mockingbird - customisable grids(!), can't hide sidebar
Design specifics
- 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
Platforms
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
- Migrate to new site
- Full migration of data and users
- Check plugins and settings are alligned
- Test
- Etc.