Design

General

See also UI, Lorem ipsum.

• 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/

• WP: Design_elements_and_principles

• WP: Design_language

• WP: Composition_(visual_arts)

• 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

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

• https://quotesondesign.com/

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

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

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

• WP: Interaction_design

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

• https://designobserver.com/

• https://www.core77.com/

• https://www.creativereview.co.uk/

• https://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]

• WP: Think_aloud_protocol

• WP: Partial_concurrent_thinking_aloud

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

Annotation

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

• 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 [12] [13], [14]
• 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/ [15]

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

• http://www.brandsoftheworld.com/

Generative

• YouTube: Meaning Alchemy - Jason Grinblat -PROCJAM 2018-