Design

still hashing about.

Lorem ipsum

General

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

• 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

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

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

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

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

• 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

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

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

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

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

HCI

See also Computing#History

• https://en.wikipedia.org/wiki/Human-computer_interaction
• https://en.wikipedia.org/wiki/Outline_of_human%E2%80%93computer_interaction

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

• https://en.wikipedia.org/wiki/Human_interface_guidelines
• https://en.wikipedia.org/wiki/Interaction_technique

• https://en.wikipedia.org/wiki/Fitts's_law - a model of human movement primarily used in human–computer interaction and ergonomics that predicts that the time required to rapidly move to a target area is a function of the distance to the target and the size of the target. Fitts's law is used to model the act of pointing, either by physically touching an object with a hand or finger, or virtually, by pointing to an object on a computer monitor using a pointing device. It was proposed by Paul Fitts in 1954.

• http://www.1up.com/news/playstation-1-design - C-f buttons

• http://bost.ocks.org/mike/scroll/ [13]

Web design

• A List Apart: Articles
• Smashing Magazine
• .net mag

• https://news.layervault.com/

• Stop Redesigning! Lean Rapid Interface Iteration Thoughts and Tips

• The Elements Of Design - series of blog posts
• Google I/O 2012 - Advanced Design for Engineers

• Startups, this is how design works

• http://weavora.com/blog/2012/10/21/web-design-trends-we-love/ [14]
• http://www.creativebloq.com/web-design/attention-grabbing-homepages-11121253
• http://contrastrebellion.com/
• http://colly.com/comments/bauhaus_ideology_and_the_future_of_web_design/

• http://csszengarden.com/
• http://css1k.com/

• http://www.siteinspire.com/
• http://unmatchedstyle.com/gallery
• http://webcreme.com/
• http://patterntap.com/

• http://hackdesign.org/

• http://betterfrontend.com/

• http://bounceapp.com - critique a page

• http://www.spurapp.com/ - alternate views for design considerations

• http://designmodo.github.com/Flat-UI/ - templates

• http://econsultancy.com/uk/blog/62335-14-lousy-web-design-trends-that-are-making-a-comeback-due-to-html5

• http://goodui.org/

• http://shouldiuseacarousel.com/ [15]

• http://blog.getprismatic.com/list-beats-grid-linear-feeds-perform-two-to-three-times-better-than-grids-2/

• http://twentyoheight.wordpress.com/2014/03/03/this-is-a-motherfucking-website-and-its-fucking-not-completely-perfect/ [16]

Commercial

• https://creativemarket.com/

Usability

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

• Words - "This is a web page."

• Usability First - We want to provide valuable information about usability for anyone interested in the design of software or websites, from beginners to experts, in academia or in industry.

• useit.com: Alertbox - Jakob Nielsen's Current Issues in Web Usability articles

• http://www.uxcheck.co/

• Accessites.org - We aim to prove that accessible, usable web sites built with universality and standards in mind need not be boring. We will show you artfully crafted sites made by some of today’s most progressive web developers.

• http://en.wikipedia.org/wiki/Information_foraging - applies the ideas from optimal foraging theory to understand how human users search for information, based on the assumption that, when searching for information, humans use "built-in" foraging mechanisms that evolved to help our animal ancestors find food
• http://en.wikipedia.org/wiki/Choice_architecture - describes the way in which decisions may (and can) be influenced by how the choices are presented (in order to influence the outcome)

• Userim - Usability Checklist

• The User is Drunk

• http://www.goodui.org/

User Interface

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

• https://en.wikipedia.org/wiki/Category:User_interface_techniques

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

• UI-Patterns.com is the work of Anders Toxboe – a Danish web developer seeking to categorize what has before seemed like ad hoc approaches to developing web applications.
• Interaction Design Pattern Library - Welie.com

• https://medium.com/solve-for-x/x-to-close-417936dfc0dc [17]

• http://thomasbyttebier.be/blog/the-best-icon-is-a-text-label [18]

• https://uimovement.com/

User Experience (UX)

• http://en.wikipedia.org/wiki/User_experience - involves a person's behaviors, attitudes, and emotions about using a particular product, system or service. User experience includes the practical, experiential, affective, meaningful and valuable aspects of human-computer interaction and product ownership

• UX Crash Course: 31 Fundamentals [19]
• UX for the masses - These articles are written by Neil Turner - A UK based UX designer. I like to share, discuss and comment on UX ideas, tips, insights and practices that everyone can use to help design a better user experience for all.
• PDF: The User Experience Guide Book For Product Managers

• UX Archive - mobile UX pattern examples

• 25 Excellent Usability/UX Articles and Resources
• Ask HN: Recommendations for learning and improving UX/UI skills?
• Ask HN: What do you wish you knew about UI/UX design?

• How to get a UX job and what it’s like - June 10, 2012
• UX Consultant - Certainty Spectrum

• UX Movement - a progressive user experience blog devoted to promoting usable and intuitive user interface design. We publish practical and insightful articles that show designers better and innovative ways to design for their users.
• UX Magazine is a central, one-stop resource for everything related to user experience. We provide a steady stream of current, informative, and credible information about UX and related fields to enhance the professional and creative lives of UX practitioners and those exploring the field.

• UX Strategy: The Heart of User-Centered Design
• Expanded user journey maps: combining several UX deliverables into one useful document

• UX Drinking Game

Information Architecture

See also ontology in general.

• Information Architecture - The importance of having a well-structured website comes from how information and data is related to each other. The thorough planning and gathering of ideas to form a structured and meaningful arrangement of this data is Information Architecture.

• So what’s an Information Architect?
  • study of information structure for a defined purpose
  • define the architecture of content relative to database construction and user-interaction
  • organize and qualify the appropriate use of metadata schemas, controlled vocabularies, folksonomies, ontologies etc.
  • articulate and produce meaningful information visualizations
  • help to structure information for easy digestion in digital applications

• COPE: Create Once, Publish Everywhere

Specifics

• http://en.wikipedia.org/wiki/Persona_(user_experience)

• UX Myths collects the most frequent user experience misconceptions and explains why they don't hold true. And you don't have to take our word for it, we'll show you a lot of research findings and articles by design and usability gurus.

• Design patterns search
• Pagination 101 [20]
• http://www.kapilkale.com/blog/the-worst-ui-pattern-in-existence/
• http://danwin.com/2013/01/infinite-scroll-fail-etsy/3
• http://www.magicscroll.net/ScrollTheWeb.html
• https://artsy.github.io/blog/2014/07/09/retain-scroll-position-in-infinite-scroll/

• What the hell does ≡ do, anyway?
• The Billion Dollar Mind Trick: An Intro to Triggers
• http://lmjabreu.com/post/why-and-how-to-avoid-hamburger-menus/ [21]

• https://bold.pixelapse.com/minming/share-the-icon-no-one-agrees-on [22]

• Skeumorphism & Storytelling - "An interface that is not only easy to use, but fun to use, engages the user and creates an experience where obstacles are easier to overcome, and thus an experience where the product is easier and more effortless to use. Done right, skeuomorphism can retain the simplicity and ease of use of an interface while empowering users to act."
• Can We Please Move Past Apple’s Silly, Faux-Real UIs?
• http://quicksprints.com/post/32792397474/how-we-increased-landing-page-conversion-from-5-to-55

• http://ux.stackexchange.com/questions/31359/should-error-messages-apologize

• http://usabilitypost.com/2014/05/24/the-scroll-up-bar/ [23]

• http://msdn.microsoft.com/en-us/library/windows/apps/hh465319.aspx - semantic zoom

• http://news.ycombinator.com/item?id=5330998 - large menus, field focus, etc

• http://www.slideshare.net/billwscott/lean-ux-antipatterns
  • http://limi.net/checkboxes-that-kill

• http://tabcloseddidntread.com/

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

• http://www.nngroup.com/articles/the-top-ten-web-design-mistakes-of-1999/ [24]

• http://dangrover.com/blog/2016/01/31/more-chinese-mobile-ui-trends.html [25]

Reviews

• Buffer’s UX | “Buffer” as a Good Thing - great site review
• Alpha.gov.uk - A quick usability review

• http://jay-machalani.squarespace.com/blog/2013/12/12/fixing-windows-8

Search

• UICloud - search ui examples

Navigation

• http://ninjasandrobots.com/website-design-you-cant-go-home-again

Other

• http://blog.maxrudberg.com/post/38958984259/if-you-see-a-ui-walkthrough-they-blew-it

Social

See communication

• many2many

etc

GUI and HCI

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

svbtle, kudos;

• http://dcurt.is/codename-svbtle [26] [27], [28]
• 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/

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

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

• http://www.brandsoftheworld.com/