benbrignell / principles.design

An open source collection of design principles and methods.

Please note: This repo is a work in progress, I've pushed it public for performance testing and feedback. Feel free to report any bugs or issues. Feedback welcome. Just remember it's not finished. There's stuff on the roadmap…

Contributing

You don't need to be able to code but you will need a (free) GitHub account in order to contribute.

Adding an example

• Getting Started
• Adding an example the easy way
• Adding an example the hard way

Features

Please discuss any new features before working on them

Meta data and terminology

Here's an explanation of what an example page is comprised of.

Required

• title
• author
• link
• principles

Optional

• overview
• overview-author
• summary

principles.design's Issues

css grid fallback issues

Minor issues on h1 spacing
Navigation isn't accessible on homepage (intro text sits on top of it)

Calm Technology example isn't calm

The example is ironic when compared to the original.

Implement tags

Better tagging and categorising for surfacing mixed resource types

search - display a message when there's no results

Something like:

"Nothing found. If something you're looking for is missing you can add it here"

Contribution prompt
Either utilising the ghost tile to prompt to contribute or within a link as part of the message

Versioning of examples

Design principles are designed to iterate and change over time. It would be good to factor in how to display changes over time. I can't quite think about how to do that in a simple way for contributors. Needs some thought.

Search is broken

I think I may have borked something, works locally but not on production. Might be related to #60

Sort favicon for multiple resolutions

React design principles

https://reactjs.org/docs/design-principles.html

yaml multiline issues

Line breaks are not being processed.

Example:

overview: |
  Multi line yaml should support

  line breaks like this.

  I think it's a jekyll issue.

Renders:

Multi line yaml should support
line breaks like this.
I think it's a jekyll issue.

Example of where this isn't working:
Raw: https://raw.githubusercontent.com/benbrignell/principles.design/master/_examples/mercedes-benz.md

Production: https://principles.design/examples/mercedes-benz

Add newsletter signup

• Add newsletter signup
• Reorganise footer content

Create json file from examples/help wanted for twitter bot

Improve build times

Summary for @hankchizljaw:

main.scss exists in _includes so I can inline it on all pages but it means every single page (which in total is about 200) has to be rebuilt when css changes are made. Build times are 20-30 seconds and occasionally the build runs twice (I think because sass compiles slightly out of sync and the include is seen as modified and the build runs again) which means it's a minute to preview a change.

When working on html/markdown changes an incremental build is a fraction of a second.

I'd like to be able to have some kind of dev mode which links to a css file instead of inlining it.

---

FYI I have tried:

sass:
  style: uncompressed

and it is actually 0.7s slower.

Create list and grid view modes for /examples

Add OG stuff

Give each unique principle its own page

Would be great to have a canonical place for each principle. Makes it easy cite in writing an Our Principles list or in conversational media. And to resolve similar-but-not-the-same principles.

The principle profile would list Examples where it was used, a gist describing the principle, and pointers on where to learn more. Each Example would link to the individual principle pages.

It's one thing to read five or even twenty lists. But few people will read more than 100. But one page where you can read everyone's principles in one long list? Scannable. We could even cluster related principles together.

scroll search input on focus to top of screen on single column/mobile devices

Currently there's not much space to see the results filtering behind the keyboard

List examples by author

Make homepage less stupidly big on large screens

No visual queue to scroll

Need a little padding for examples

Home Footer - Unexpected value rendering with the Twitter image on homepage

Hello there, not sure if this bug has been reported already but:

js is being included on all pages

js should only exist on /examples

Etsy design principles

https://medium.com/etsy-design/creating-etsys-design-principles-4faf31914be3

Excerpt examples

An author has requested that his example be excerpted.

• Add excerpted: true logic
• Truncate summaries (adding "Read more" link) to x characters
• make source URLs canonical

word-wrapping has gone horribly wrong

Example:

I've tried a few things, nothing that smart

Transport of London Design Themes and Principles page no longer exists

I found these two possible alternatives:
https://content.tfl.gov.uk/tflpropertydesignprinciples.pdf
https://www.centreforlondon.org/reader/building-for-a-new-urban-mobility/chapter-3-design-principles/

I'd be happy to update the page, I'm just not sure which of the new links is better for this use.

add search/filtering

Screenshots for README.md

Please do not delete this issue:

Examples

Create new file

Paste

Guide on how to create your own Design Principles

work in progress

Generate styleguide from _components

Make tiles hyperlinks

add 404 page

Last modified date not showing

Works locally, this gem is supposed to work on gh-pages, need to investigate

It's like ten thousand spoons when all you need is a knife

Isn't it ironic, don't you think?

/contribute page

The contribute page should be a bit friendlier than a jump to github.

Brief intro on contributions.

• Super easy way - a submit form (not sure about this but might be better for everyone except me)
• Link to GH: Easy-ish way to submit an example without knowing how to code
• Link to GH: Hard-ish way, via jekyll for more than submitting examples

Articles section

Maybe "resources" combined with talks

Principles count

Should each list of design principles have a counter? e.g. Gov UK Design principles (10)

Translation to other languages

Hi, it's possible to translate to another language?

If it is possible I have interesting to translate to Portuguese Brasil.

Guide/Suggestion of open licenses

The subtitle of the project is An open source collection of Design Principles and methods., but looking at the contributing page there is no suggestions, advise or similar regarding which open source license to use when posting original content. Similarly, links to companies' content don't show a specified license, making them not open. By default, any personal/company posts are copyrighted unless specified otherwise [1]. This feels against the point of the spirit shared by the page. As it stands, users may misunderstand that all links appearing on the site are under an open license. Similarly, contributors or original content may mistakenly assume by sharing a link of their post it makes the content open as well.

A brief intro to the licenses the team/maintainer is comfortable could close this gap. Also, links to sites that could help someone new in open source to choose the license for them. [2] Or links for people to learn more about them in general, which could in turn help them choose one for their work that will be shared here. [3]

CreativeCommons licenses are popular as well, and although not open, may also maintain the spirit of collaboration of the site. [4]

Finally, if an open license is not a requirement, perhaps there's a way to phrase the association with open source that makes clear the expectations and assumptions of the site/maintainer for the users/contributors.

[1] https://choosealicense.com/no-permission/
[2] https://choosealicense.com/
[3] https://fossbytes.com/open-sources-license-type/
[4] https://creativecommons.org/choose/

Examples page sort order

The default ascending sort order that jekyll spews out on the https://principles.design/examples page a) isn’t correct/smart, for example you have the order:

10 Principles of Codecademy
10 Usability Heuristics for User Interface Design
20 Guiding Principles for Experience Design
37 Signals Principles
5 Guiding Principles for Experience Designers
5 Principles for the wearable revolution
…

and b) when you click on the sort button to sort true ascending, it re-sorts it to actual ascending order which is just a weird thing to happen on first click. (note if the order is truly ascending order then this doesn't happen when the sort button is clicked, it sorts descending)

5 Guiding Principles for Experience Designers
5 Principles for the wearable revolution
5 rules for incorporating AI tech into design
7 Principles of Rich Web Applications
8 Design Principles for Organizational Transformation
8 fundamentals for user friendly product development
…

I’ve tried adding sort_natural to my array but it doesn’t do anything. The only sort filter I can find that works is reversed there doesn’t seem to be anything else. Any ideas?

For the time being I may force the sort button to do sort descending first, then if you click it again and sort to ascending you'll get the true ascending order. But it's a bit rubbish.