Design

General

See also UI, Lorem ipsum.

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

• https://en.wikipedia.org/wiki/Universal_design - the design of buildings, products or environments to make them accessible to all people, regardless of age, disability or other factors.

• https://en.wikipedia.org/wiki/Visual_design_elements_and_principles - fundamental ideas about the practice of visual design.

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

• https://en.wikipedia.org/wiki/Composition_(visual_arts)

• 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

• william-lidwell-kritina-holden-jill-butler-universal-principles-of-design-rockport-publishers-2003.pdf

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

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

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

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

• https://en.wikipedia.org/wiki/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/

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

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

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

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

• https://en.wikipedia.org/wiki/Evidence-based_design - the process of constructing a building or physical environment based on scientific research to achieve the best possible outcomes. Evidence-based design is especially important in evidence-based medicine, where research has shown that environment design can affect patient outcomes. It is also used in architecture, interior design, landscape architecture, facilities management, education, and urban planning. Evidence-based design is part of the larger movement towards evidence-based practices.

• https://en.wikipedia.org/wiki/Design_Patterns_(book)

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

• Home | Laws of UX - [3]

• 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/ [4]

• http://patternlab.io/

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

• http://emeeks.github.io/gestaltdataviz/section1.html [5]

• 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/ [6]

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

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

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

• UX Kits

• UX Flowchart Cards

• UI Flowchart Cards - for website builders, designers and developers - [8]

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 [9]
• 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 [10]

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

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?

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

Cloud Web Design

• Business Card, Articles, Blogging, Image Galleries, etc.
• WordPress.com, Tumblr.com, etc.
• Plus costs (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

• SSL cert. extra

Hosting and maintenance

Support, Training, Consultancy

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

• Atomic Design | Brad Frost

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

Feedback / annotation

• Design Drop - A visual feedback tool for designers. A new way to conduct design reviews and collect feedback. From typography to color selection, design is all about communicating ideas and eliciting emotion. The feedback received from their clients and coworkers is critical to the success of a design. [13]

• Helio - Test with an Audience. Move with the market to drive your product, website, and marketing forward. Get quick feedback from targeted audience panels in minutes.

Social

See communication

• many2many

etc

GUI and HCI

slashdot, moderation, metamoderation, ontology, etc...

svbtle, kudos;

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

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

Sharing

• http://sharenice.org/

Gamification

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

• http://openbadges.org/

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

• Habitica: Gamify Your Tasks - Apps on Google Play

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/ [17]

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

• http://www.brandsoftheworld.com/

• <Insert title here> - a-phenomenological-framework-for-the-design-of-an-augmented-reality_experience-miears.pdf -

Generative

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

Aesthetics

To merge to/from/with Graphics#Resources, Design

• http://www.hongkiat.com/blog/pixel-based-websites/

• https://en.wikipedia.org/wiki/Aesthetics
• https://en.wikipedia.org/wiki/Category:Concepts_in_aesthetics

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

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

• https://en.wikipedia.org/wiki/Style_(visual_arts)

• https://en.wikipedia.org/wiki/Art
• https://en.wikipedia.org/wiki/Art_criticism
• https://en.wikipedia.org/wiki/Art_movement

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

• https://en.wikipedia.org/wiki/Aesthetic_interpretation
• https://en.wikipedia.org/wiki/Against_Interpretation

• https://en.wikipedia.org/wiki/Work_of_art
• frame, situation

• https://en.wikipedia.org/wiki/Performance_art - a performance presented to an audience, traditionally interdisciplinary. Performance may be either scripted or unscripted, random or carefully orchestrated; spontaneous or otherwise carefully planned with or without audience participation. The performance can be live or via media; the performer can be present or absent. It can be any situation that involves four basic elements: time, space, the performer's body, or presence in a medium, and a relationship between performer and audience. Performance art can happen anywhere, in any venue or setting and for any length of time. The actions of an individual or a group at a particular place and in a particular time constitute the work.

• https://en.wikipedia.org/wiki/Liberal_arts
• https://en.wikipedia.org/wiki/Martial_arts

• https://en.wikipedia.org/wiki/Medieval_art
• https://en.wikipedia.org/wiki/Gothic_architecture

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

• https://en.wikipedia.org/wiki/Mannerism
• https://en.wikipedia.org/wiki/Baroque
• https://en.wikipedia.org/wiki/Caravaggisti
• https://en.wikipedia.org/wiki/Classicism
• https://en.wikipedia.org/wiki/Dutch_Golden_Age_painting

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

• https://en.wikipedia.org/wiki/Neoclassicism
  • https://en.wikipedia.org/wiki/Neoclassical_architecture

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

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

• https://en.wikipedia.org/wiki/Realism_(arts)

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

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

• https://en.wikipedia.org/wiki/Truth_to_materials
• https://en.wikipedia.org/wiki/Form_follows_function
• https://en.wikipedia.org/wiki/Ornament_and_Crime

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

• https://en.wikipedia.org/wiki/Formalism_(art)

• https://en.wikipedia.org/wiki/Neo-Historism

• https://en.wikipedia.org/wiki/Expressionism
• https://en.wikipedia.org/wiki/Abstract_expressionism
• https://en.wikipedia.org/wiki/Surrealism

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

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

• YouTube: Paul Klee, Wilhelm Hausenstein, and the "Problem of Style" | Charles Mark Haxthausen

• https://en.wikipedia.org/wiki/Abstract_art
• https://en.wikipedia.org/wiki/Geometric_abstraction
• https://en.wikipedia.org/wiki/Contemporary_art

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

• https://en.wikipedia.org/wiki/Avant-garde
• https://en.wikipedia.org/wiki/Lettrism

• https://en.wikipedia.org/wiki/Situationism
• https://en.wikipedia.org/wiki/Situationism_(psychology)

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

• https://en.wikipedia.org/wiki/Artist's_Shit

• http://artybollocks.com/

• http://www.smbc-comics.com/?id=3204#comic
• post-modernism

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

• https://en.wikipedia.org/wiki/Anti-anti-art

• http://en.wikipedia.org/wiki/Framing_(social_sciences)

• http://en.wikipedia.org/wiki/Assemblage_(art)

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

• http://en.wikipedia.org/wiki/Shape_and_form_(visual_arts)

• https://en.wikipedia.org/wiki/Painterly
• https://en.wikipedia.org/wiki/Chiaroscuro
• https://en.wikipedia.org/wiki/Bokeh

• https://en.wikipedia.org/wiki/Wabi-sabi

• http://www.openculture.com/2013/10/david-lynch-presents-the-history-of-surrealist-film-1987.html

• http://www.artybollocks.com/

• http://aenism.com/good-taste/

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

• http://www.reddit.com/r/PostPoMo

misc

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

• http://www.metamute.org/editorial/articles/manifesto-theory-%E2%80%98new-aesthetic%E2%80%99

• http://infosthetics.com/

• http://en.wikipedia.org/wiki/Cool_(aesthetic)

• http://500letters.org/

• http://www.ieeeghn.org/wiki/index.php/First-Hand:Early_Digital_Art_At_Bell_Telephone_Laboratories,_inc

• http://ffffound.com/

• http://fffff.at/

• http://www.jwz.org/webcollage/
• http://infiniteglitch.com/
• http://cachemonet.com/
• https://news.ycombinator.com/item?id=7413106

• http://www.academia.edu/3279593/A_proposal_for_a_dualistic_ontology_of_art

• http://www.sito.org/synergy/

Art is never finished, only abandoned. Leonardo da Vinci

• http://www.ubuweb.com/

• http://adamferriss.com/nze/

• http://www.metacritic.com/

• http://monoskop.org/
• http://artcontext.org/
• http://web.archive.org/web/20081221113539/http://www.absurd.org/
• http://zombo.com/
• http://www.zoomquilt.org/

• http://hakim.se/experiments/html5/sketch/
• http://nnnnn.org.uk/

• http://www.yyyyyyy.info/

• http://bechdeltest.com/

• http://anasomnia.com/

• http://www.contextfreeart.org/ [19]

• http://www.arkadia.xyz/

other

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

• http://www.elasticspace.com/2013/03/no-to-no-ui

• http://webdesignledger.com/
  • http://webdesignledger.com/tips/web-design-trends-for-2010

• http://carsonified.com/toolkit/
• http://somerandomdude.com/work/

• https://github.com/adactio/Pattern-Primer

• http://www.brainpickings.org/index.php/2011/03/08/the-transformer-isotype/

• http://llgd.net/

• https://golden-layout.com/ [20]

• https://dribbble.com/tags/logo

• http://rotary-system.tumblr.com

Flat

• http://speckyboy.com/2012/12/11/the-flat-design-aesthetic/ - shit, where did i put those other flat style links
• http://sachagreif.com/the-flat-sink/
• http://daringfireball.net/2013/01/the_trend_against_skeuomorphism
• http://news.ycombinator.com/item?id=5086991
• http://en.wikipedia.org/wiki/Metro_(design_language)
• http://www.matthewmooredesign.com/almost-flat-design/ [21]
• http://blog.wells.ee/less-aesthetic-more-design
• http://sachagreif.com/flat-pixels/
• http://fltdsgn.com/
• http://designmodo.com/flat-design-principles/
• http://www.smashingmagazine.com/2013/07/16/authentic-design/

• http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/

• http://designmodo.com/flat-design-colors/
• http://flatuicolors.com/

• http://dev.hubspot.com/blog/flatten-the-web-with-this-bookmarklet [22]

Examples

• http://land-book.com/
• http://dribbble.com/
• http://forrst.com/

• http://panasonic.net/
• http://happycog.com/

• http://www.pcc-cic.org.uk/

• http://www.creativebloq.com/web-design/top-examples-css-912710

• http://vandelaydesign.com/blog/galleries/attention-to-detail/

• http://pitchfork.com/features/cover-story/reader/bat-for-lashes/

• http://www.webcreme.com/
• http://cssremix.com/
• http://www.cssmania.com/
• http://thethemelist.com/
• http://patterntap.com/

• http://www.behance.net/
• http://www.designkindle.com/
• http://www.premiumpixels.com/
• http://designmoo.com/

• http://capptivate.co/

• http://www.lingscars.com/ - er, attention grabbing
• http://themostamazingwebsiteontheinternet.com/

• http://randomwire.com/why-japanese-web-design-is-so-different [23]

Futurism

• YouTube: Futurist Cusine

Brutalism

• Brutalism and Antidesign -

Glitch

• https://github.com/osromusic/Glitch-Arts-Resources - A curated list of resources for all arts glitch.

Ratios

• http://retinart.net/graphic-design/secret-law-of-page-harmony/

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

• Good stories, pity they're not true - On fact and fiction re the golden ratio.

Colour

See Colours

Logos

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

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

• http://www.paul-rand.com/foundation/thoughts_logosflags

• github: octodex - play on a logo

• http://briandelaney.me/design-inspiration-negative-space-logos-and-symbols

• http://www.brandsoftheworld.com/

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

Borders

• http://webdesignerwall.com/tutorials/css-decorative-gallery

Shadows

• http://bmccreative.com/blog:subtle-css3-box-shadows
• http://der-auftritt.de/testcase/gradientshadow.html
• http://devblog.xing.com/frontend/a-flexible-shadow-with-background-size/

• https://coderwall.com/p/dw61mg - radial drop shadow

• http://sandbox.juan-i.com/longshadows/

Backgrounds

• http://bradjasper.com/subtle-patterns-bookmarklet/#

• http://www.smashingmagazine.com/2009/03/31/backgrounds-in-web-design-examples-and-best-practices-2/
• http://designwoop.com/2012/02/30-examples-of-subtle-background-textures-in-web-design/
• http://designshack.net/articles/css/create-seamless-web-background-textures-in-minutes/

• http://mudcu.be/bg/

Textures

• http://webdesign.tutsplus.com/tutorials/visuals/the-what-why-and-how-of-textures-in-webdesign/

• https://www.toptal.com/designers/subtlepatterns/
  • https://github.com/atlemo/SubtlePatterns
  • http://line25.com/articles/20-examples-of-subtle-texture-use-in-web-design

• http://rappdaniel.com/noisy/ - png generate

Patterns

• http://www.world-mysteries.com/sar_sage1.htm

• http://lea.verou.me/css3patterns/
  • http://24ways.org/2011/css3-patterns-explained/

• http://www.patternify.com/

• http://patterns.alistapart.com/

• http://www.fleen.org/

Ornamental flourishes

• http://vector.tutsplus.com/articles/web-roundups/250-free-vintage-graphics-flourish-vector-ornaments/
• http://all-silhouettes.com/flourishornaments/
• http://designshack.net/articles/freebies/weekly-freebies-flourishes-and-ornaments/
• http://moorstation.org/typoasis/ornaments/index.htm

Also; dingbat flourish fonts

• http://stackoverflow.com/questions/8903074/technique-for-adding-flourishes-to-div-corners-and-borders-css3-multiple-backgr

• http://www.daveperrett.com/articles/2014/04/07/recreating-the-reeder-two-tone-horizontal-rule-in-pure-css/

Images

• http://xkcd.com/1264/

• http://www.deepart.io/

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

Buttons

• http://www.chrisnorstrom.com/2012/11/invention-multiple-choice-windowed-slider-ui/ [24]

• http://css-tricks.com/circular-3d-buttons/

Icons

See Typography#Webfont icons and Graphics#Icons

Seperate icons for each menu or list item can be good.

common?;

• About - pages
• FAQ - ?
• Help/Support - !
• Blog - scroll?
• Contact - envelope
• Twitter
• Facebook
• Google+
• RSS

Social icons/brands

• Facebook deep blue; #3B5998
• Twitter blue; #4099FF
• Google plus red; #C85D42

• http://mattbrett.com/blog/design/2005/the-new-standard-feed-icon/

Canvas

• http://asserttrue.blogspot.ca/2012/01/procedural-textures-in-html5-canvas.html

Vector

See also Graphics#SVG

• http://danielmall.com/articles/svg-workflow-for-designers/

Architecture

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