Jonathan-Eyler-Werve

Some readings for grounding yourself in product design practice.

The foundations

• Design is a Job, Mike Montiero (short book); mindset of a designer as a skilled advisor and maker.

• About Face 4th edition or newer, Alan Cooper; solid overview of the interaction design discipline's conventional wisdom.

• Just Enough Research, Erika Hall (short book); What are we doing when we talk to users?

Jonathan-Eyler-Werve

Here are some links about DESIGN SYSTEMS, a methodology for creating consistent (and consistently good) user experiences in enterprises with many products.

Design systems make it faster and safer to produce high quality user interfaces, and are the only reliable path to consistent and accessible frontends across several product teams. Nearly all large digital orgs, and an increasing number of transitioning enterprises have dedicated teams managing their design system. But small teams can get much value from low-cost, iterative system efforts.

The basics

https://www.designbetter.co/design-systems-handbook/introducing-design-systems

What this looks like in practice

https://medium.com/git-out-the-vote/pantsuit-the-hillary-clinton-ui-pattern-library-238e9bf06b54

Jonathan-Eyler-Werve

<div class="wrapper">
  
   <div class="row">
    <input type="button" class="button first negative one" value="no access">
    <input type="button" class="button muted" value="read only">
    <input type="button" class="button muted" value="needs approval">
    <input type="button" class="button muted " value="reply only">
    <input type="button" class="button muted last" value="full">
  </div>
  

Jonathan-Eyler-Werve

// parse a Link header
//
// Link:<https://example.org/.meta>; rel=meta
//
// var r = parseLinkHeader(xhr.getResponseHeader('Link');
// r['meta'] outputs https://example.org/.meta
//
function parseLinkHeader(link) {
    var linkexp = /<[^>]*>\s*(\s*;\s*[^\(\)<>@,;:"\/\[\]\?={} \t]+=(([^\(\)<>@,;:"\/\[\]\?={} \t]+)|("[^"]*")))*(,|$)/g;
    var paramexp = /[^\(\)<>@,;:"\/\[\]\?={} \t]+=(([^\(\)<>@,;:"\/\[\]\?={} \t]+)|("[^"]*"))/g;

Jonathan-Eyler-Werve

Keybase proof

I hereby claim:

• I am jonathan-eyler-werve on github.
• I am eylerwerve (https://keybase.io/eylerwerve) on keybase.
• I have a public key whose fingerprint is 96DB B7B5 105B FFA6 201E 8008 9604 30F0 DEEE 47BB

To claim this, I am signing this object:

Jonathan-Eyler-Werve

Keybase proof

I hereby claim:

• I am jonathan-eyler-werve on github.
• I am polyeylerwerve (https://keybase.io/polyeylerwerve) on keybase.
• I have a public key whose fingerprint is CA04 9805 EEC3 A881 0E96 7CA0 6810 CC22 02F4 76D4

To claim this, I am signing this object:

Jonathan-Eyler-Werve

Design references

Documenation

http://www.google.com/design/spec/material-design/introduction.html

http://www.up.co/communities/usa/chicago/startup-weekend/4009

https://stripe.com/docs/api

Jonathan-Eyler-Werve

Desktop

Anti-social

• Blocks social networks until time expires
• customizable blocklists
• Mac, Windows app
• http://anti-social.cc/

Floodgate

• Mutes Twitter content that contains abusive, sexist or racist keywords

Jonathan-Eyler-Werve

Things to do in Memphis

Museums:

http://www.yelp.com/biz/stax-museum-of-american-soul-music-memphis#query:Stax%20rock%20and%20soul

http://www.yelp.com/biz/national-civil-rights-museum-memphis

BBQ:

Jonathan-Eyler-Werve

 
<style TYPE="text/css">
  
  body  {
    background-color: black;
    color: #ffffff;
    font-size: 180%;
    font-family: 'Josefin Slab', serif;
    background-image: url('http://mentoring.devbootcamp.com/assets/heart.png'); 
    background-repeat: no-repeat;