Design

still hashing about.

Lorem ipsum

General

• WP: Design

• 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

• https://chrisrust.wordpress.com/1998/12/31/how-designers-work-making-sense-of-authentic-cognitive-activity/

• Design elements and principles
• WP: Design_language
• Composition

• WP: Product_design
• WP: Communication_design
• WP: Web_design

• WP: Interaction_design

• WP: Design_thinking

• Building games that can be understood at a glance - Zach Gage, GDC 2018

• http://bradfrostweb.com/blog/post/atomic-web-design/

• http://quotesondesign.com/

• A Crash Course in Information & Visual Design - September 29 2012

• http://news.ycombinator.com/item?id=4600256

• http://technori.com/2012/10/2612-behavior-design-bootcamp/
  • http://technori.com/2012/10/2613-behavior-design-bootcamp-day-2/

• WP: Interaction_design
  • http://www.cooper.com/journal/2013/01/self-study-interaction-design.html

• http://designobserver.com/
• http://www.core77.com/
• http://www.creativereview.co.uk/

• http://hackdesign.org/

• https://medium.com/facebook-design/critique-is-an-important-part-of-any-design-process-whether-you-work-as-part-of-a-team-or-solo-ef3dcb299ce3 [2]

Patterns

See also Living#Patterns, Organisation#Patterns, Computing#Patterns

• WP: Design_pattern
• WP: Interaction_design_pattern
• WP: Design_Patterns_(book)

• http://patternry.com/patterns/
• http://sideproject.io/outdated-ux-patterns/

• http://darkpatterns.org/
  • http://www.90percentofeverything.com/2013/07/23/the-slippery-slope/
  • YouTube: How Dark Patterns Trick You Online

• https://rationalconspiracy.com/2016/04/24/dark-patterns-by-the-boston-globe/ [3]

• http://patternlab.io/

• http://www.inf.ed.ac.uk/teaching/courses/seoc/2005_2006/resources/statecharts.pdf

• http://emeeks.github.io/gestaltdataviz/section1.html [4]
• http://emeeks.github.io/gestaltdataviz/section2.html
• http://emeeks.github.io/gestaltdataviz/section3.html

• http://www.designkit.org/resources/1

• http://www.doctordisruption.com/design/principles-of-design-45-cathedral-effect/ [5]

• https://medium.com/@lucabenazzi/dark-patterns-in-action-24d8cd1d8684 [6]

News

• https://news.layervault.com/

• http://sidebar.io/

Design and brand guides

• UX Bookmark: A huge list of Style Guides and UI Guidelines
• http://www.logodesignlove.com/brand-identity-style-guides
• http://www.creativebloq.com/branding/great-examples-design-style-guides-3132070

• http://alistapart.com/article/creating-style-guides [7]
• http://www.nuxeo.com/blog/development/2012/12/why-you-need-a-ui-style-guide/

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

• Government Digital Service - Design Principles
• http://www.channel4.com/about_c4/styleguide/downloads/C4StyleGuide1.1.pdf

• http://www.ibm.com/design/work.shtml

• UX Booth Style Guide
• The Chicago Manual of Style

• Android Design
• Material Design

• https://developer.apple.com/library/ios/documentation/userexperience/conceptual/MobileHIG/index.html
• https://developer.apple.com/library/mac/documentation/UserExperience/Conceptual/AppleHIGuidelines/Intro/Intro.html

• http://msdn.microsoft.com/en-us/library/windows/apps/hh781237.aspx

• http://ustwo.com/ppp/
• https://ux.mailchimp.com/patterns/
• http://rizzo.lonelyplanet.com/styleguide/design-elements/colours
• http://www.barnardlevit.co.uk/style-guide
• https://news.ycombinator.com/item?id=7219795 - yelp

• http://thestandardsmanual.com/

Inspiration

• http://www.openculture.com/2016/03/3900-pages-of-paul-klees-personal-notebooks-are-now-online.html [8]

• http://www.visualcomplexity.com/vc/

• http://www.niice.co/

• http://dribbble.com/

• http://designbump.com/

• http://insideintercom.io/the-dribbblisation-of-design/

• https://rrrepo.co/
  • https://rrrepo.co/repo/designDocumentaries [9]

Project

• WP: Scope_(project_management)

• WP: Requirements_analysis
• WP: Requirements_elicitation
• WP: Specification_(technical_standard)

• WP: Creative_brief
• WP: Design_rationale

• WP: 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?

• http://keepwomen.com/static_pages/checklist_tool [10]

Cloud Web Design

• Business Card, Articles, Blogging, Image Galleries, etc.
• WordPress.com, Tumblr.com, etc.
• From £400.
• Plus costs (£40/yr for theme & ad-free, plus domain).

Web Site Design and Build

• Self-hosted Drupal site with bespoke configuration and theme
• Using process estimation tools vs. budget
• From £650 (5 days), at £130 a day
• SSL cert. extra

Hosting and maintenance

• £15/mth for hosting, plus security upgrades

Support, Training, Consultancy £25/hr for additional backend or administration support, or £100 for a full day consultation.

Cloud site setup and custom theme, from £400, or a full site with bespoke backend and custom theme, starting at £650.

• http://wunderkraut.com/blog/how-to-fail-in-a-drupal-project-fixed-price-contracts/2013-07-10
• http://tracerbullets.wordpress.com/2013/09/05/i-have-another-bull-in-the-next-field/
• http://www.reddit.com/r/web_design/comments/1mftyi/screwed_by_paypal_what_marketplacespayment/cc8yf4n

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

• WP: 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

• WP: 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

• WP: 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

• WP: 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 [11]

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/

• http://www.thinkintags.com/

• https://www.fluidui.com/editor/live/

• http://creately.com/plans

• https://www.easel.io/

• https://wireframe.cc/example

• http://lumzy.com/app/

• http://styloapp.com/

• http://asciiflow.com/

Annotation

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

• http://notableapp.com/

• http://www.awesomebox.co/

Social

See communication

• many2many

etc

GUI and HCI

slashdot, moderationm, metamoderation, ontology, etc...

svbtle, kudos;

• http://dcurt.is/codename-svbtle [13] [14], [15]
• http://www.screenr.com/2Pl8

• http://www.reddit.com/r/funny/comments/15ou9b/my_girlfriends_mother_doesnt_understand_facebooks/

Sharing

• http://sharenice.org/

Gamification

• WP: Gamification

• http://openbadges.org/

• http://www.wired.com/wiredenterprise/2012/11/gamification-customer-service/

Other

See also Search#SEO.2C_SEM.2C_SMO

• http://craigmod.com/journal/subcompact_publishing/

• http://demonocracy.info/infographics/world/gold/gold.html - isometric

• http://jtnimoy.net/?q=178 - tron

• http://3dprintingindustry.com/2014/12/08/rendering-3d-haptic-shapes-mid-air-using-ultrasound/

• http://typeslab.com/ [16]

• http://lineshapespace.com/generative-design/ [17]

• http://www.brandsoftheworld.com/