Skip to content

Instantly share code, notes, and snippets.

@ryanve
Last active November 1, 2017 17:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ryanve/ac07024b5bb0c04aa3ebd667ed9edb03 to your computer and use it in GitHub Desktop.
Save ryanve/ac07024b5bb0c04aa3ebd667ed9edb03 to your computer and use it in GitHub Desktop.
An Event Apart 2017 notes

brad frost let's business core values the culture engine com ubuntu design voice and tone special snowflake syndrone carbon design sys unity glue good kickoff meetings vote on outcomes prioriyt votes for principles what won? what lost? why> design principles process | product best thing the easiest grab it quick crowd proof tech agnostic opposites strong and direct sketch libs photoshop etiquette com intra/inter style guide guide concurrent work content choreography brains chaos vs rigidity humanity

donna @dlichaw in 2004 all you need ot know about story from breaking bad beg mid end |_ intrigue over time exposition hero goal inciting incident rising action crisis climax (resolution) denouement (falling action) learned and accomplished end twist narrative parsing cannot move fwd life is a story you are the hero 2-in-1 example fantasical autocomplete rising action better than before system feedback happy socks who goal cta flow impediment value finish measure diff teams are diff story part peak end rule utility usability desireability value choice who is the hero what do they want how do they get there

eric 80ft on this day unknowns good will overcomes stumbles stress test moment of crisis test cheatin' uh unjust accusation assumptions humor not diffusing tension pokestops "what's being assumed?" Connected Whopper video ad inclusive design at microsoft recognize exclusion learn from diversity solve for one, extend to many design for real life: DFRL-AEA17 "our assumptions come back to haunt us" practice "don't assume too much"

ethan non-ideal collab gap

  1. visual inventory
  2. pattern naming
  3. code kss fractal.build/guide styleguide generator roundup naming and language consistent atomic ambiguity glossary velocity words language of modular design pattern naming collab css arx via design help articulate dp vox: uniq, resize, clarity, rwd, a11y airbnb: unified, iconic, convo smartphone syria refugee example the next billion stars

a11y @feather how to fix what went wrong a11y lives in: people, process, tools Perfect. Better. 20 things mini sprint unachievable vs achievable real-world usability testing proximity muscle memory straw test keyboards magnifying text resize background noise no captions prioritize: keyboard, media, forms because they accounts for 2/3 of logged issues accidently accessible: oranges in plastic waffle house cheat sheet interaction tables elevator scotish speech build for the future

higgins build trhu ix personal focus continue discovery duolingo chatbot after 3 lessons change aversion lapse opps: initial, coninued, redesign, lapse diverse methods diff paths from: first exposure, diff platform, competitor default states vis hier task skeleton (air wander) inline guideance to weave info reactive guidance (twitter mute example) proactive guidance (duolingo direct example) on-demand guidance (discoverable help) weaverbird look back to find key actions breakdown into modules: trigger activity follow-up reinforce spaced repitition reps prevent 1-time use mindset choose appropriate methods < exploring - on mission > < established - novel > | lightweight - prominent _ general - focused set learning checkpoints 5s test onboarding is over time learn all the time (churn example) when does onboarding end? never? onboarding: everyday guidance

ml speech pattern data bias iaas apis

  • amazon
  • google
  • ibm watson
  • ms cognitive services
    • emoition api
  • wit.ai -> intents
  • giorgio cam ml is design material machines make mistakes chijuahj or muffin raw chicken or trump picdescbot anticipate weirdness embrace uncertainty

presentation

our anw machin have an overconf prob creative humility

  • favor accuracy over speed
    • perf is speed of answer (not page)
    • but gotta be the right answer
    • idk can be better
  • allow for ambiguity
  • signal confidence. ask for help
  • add human judegement
  • put ppl where the pipes will go
  • hostile info zones
  • advocate sunshine (transparency)
  • scale, importances, secrecy
  • CivicScape
  • import the data (data bias)
  • weaopons of match destruction
  • "letd's not codiu the past"
  • make it easy to contribute accurate data
  • the machines eat us
  • give ppl data control
    • right to erase
    • transparent access
  • be loyal to user
  • take responsibility

technical advance dillisionment critique

juvet agenda org

ml speech pattern data bias iaas apis

  • amazon
  • google
  • ibm watson
  • ms cognitive services
    • emoition api
  • wit.ai -> intents
  • giorgio cam ml is design material machines make mistakes chijuahj or muffin raw chicken or trump picdescbot anticipate weirdness embrace uncertainty

presentation

our anw machin have an overconf prob creative humility

  • favor accuracy over speed
    • perf is speed of answer (not page)
    • but gotta be the right answer
    • idk can be better
  • allow for ambiguity
  • signal confidence. ask for help
  • add human judegement
  • put ppl where the pipes will go
  • hostile info zones
  • advocate sunshine (transparency)
  • scale, importances, secrecy
  • CivicScape
  • import the data (data bias)
  • weaopons of match destruction
  • "letd's not codiu the past"
  • make it easy to contribute accurate data
  • the machines eat us
  • give ppl data control
    • right to erase
    • transparent access
  • be loyal to user
  • take responsibility

technical advance dillisionment critique

juvet agenda org

  • charts nivo.rocks
  • shape morphing
    • greensock
  • css line drawing
    • d: path()
    • offset-path
    • bodymovin
    • stroke-dasharray drawing
  • ui animation
    • insertion
    • cut away mask
    • loading
    • password
    • audio
  • icon system
    • svg sprite and
    • include inline "jist inulcde them"
  • do art
    • scenes
    • turbulence filter
  • diagrams
    • data viz
    • text transform code example
    • ads
  • headline lockups
  • real world
  • explain your product
    • teaching
    • delight

motion and meaning podcast it depends

css

low barrier to entry (gateway drug) clear states mq limited events predefined some places it can't wuite get to

css + js

motion + logic effortless perf

js

3+ sequence transform physics narrative or immersive drag n drop bouncy timeline raf gs vel anime complex dom svg canvas react ref transition group plus react motion for springs fiber cartoon talk: lin clark

svg

just numbers and math logos, ills, icons, dataviz, fluid responsive scaling zooming shapes morphing squishing css svg transform not in ie or edge prog enhance only way to do motion on path accelerated: scale translate rotate opacity style > layout > paint > composite paint flashing css declaritive js impoertive canvas acceleratable svg accel only in ff today

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment