Hello, my name is: Amy

An Event Apart Chicago - Day 2

Back at it again today! A little sleepier than the day before, but lucky for us, our morning speaker was just perfect.

Animation in Design Systems and Process, Val Head

You want a carousel? 2 carousels? 5 carousels? I'm not busy.

Make animation a true design citizen

Improving Animation Communication.

How are you supposed to communcate what you're looking for? Val had an awesome idea about actually getting people together to talk about and define what common words mean, like 'pop'. Sort of creating your own animation dictionary.

Talk about animation early, often, and as specific as you can.

I want to try and make a SVG animation.

Things that can help in getting people to know what you're talking about


Beginning of the process for encouraging feedback (as it's still rough and people are more likely to say 'that sucks' on something that looks like you didn't spend a lot of time on. Briefly show what's supposed to happen frame by frame, flip book style. Never really thought of conveying web animations this way. Interesting to try out and play around with.

Ask: How could animation make this screen easier to understand?

Eva-Lotta Lamb -> Sketching animations

Motion Comps

Video tool that shows the quality of motion. Aftereffects/Animate CC, Principal, Flint? for mac. Perhaps not something I would bother with since Aftereffects has way too many buttons for me, but perhaps this does a better job of explaining exactly what you are trying to get at.

Never be afraid to dance out the details.

The hand off (Ask for these things if you get a motion comp!!).

  • Duration and delay values.
  • Easing curves.
  • repeat values; iteration counts

Interactive Prototypes

Using real data; checking to make sure it feels okay to interact with; does it feel right in the context. Great way to be testable.

tools -> atomic.io; framer; lots of tools to choose from. smart defaults. (Or, create your own!)

Motion audits

gather 'em all up in one place. see how many fading animations you have. Add these to your style guide.

Define and Document

'Define your brands personality' -> woudl be good to ahve some examples of how animations convey emotion. It's easy to say convey this, but what does it actually mean. Perhaps an animation workshop?

There's a great diagram she used that defines time in ms, and where general animations should fall w/in that time (fade in/moving over long distance)

make your own ease-in, ease-out, eas-in-ease-out <-- Have to get better at this! She showed an awesome example of documenting different animations with scale / translate examples. Create an ease in palette.

I'm very excited about this stuff, sorry!

Create a spectrum of animation.

I'm just trying to click a button and the button's like "Yaaay!"

designinginterfaceanimation.com UIANIMATIONnewsletter.com

Performance Under Pressure, Mat Marquis (bocoup)

Super interesting comments on performance and getting your page speed index high (Bocoups is 99%). But more on how to get people to care about performance, and help participate in it.

If it's inaccessible to the poor it's neither radical nor revolutionary.

Tools don't matter. interested in what you can do with those tools. End measure is what matters.

we have power over access. people using the web don't have this power.

cognitive load associated with stressful situations for waiting for a mobile page to load is similar to that of watching a horror movie.

Look Into the media attribute on link element. perhaps will help with loading style-sheets asynchronously.

Critical CSS, then load the rest of your css with javascript. critical css should be 14kb. Second time hearing about this, I should try with mattjenkinscomic.com There are some tools that could help you automate this for large scale - Use grunt-criticalcss, helps you figure out what the first 14kb of code should be.

CSS Font loading Module Level 3 'snap in fonts after effect' store a flag in the browser cache as to if it should need to load the fotns again

critical web fonts - basically create a subset font (that's only minimal for what you need). use javascript to add the full-class after the full font is later.

grunt-perfbudget, auto manages your performance budget. Works locally which might not be the best solution

calibreapp.com (actually against real app., slack interaction)

CSS Grid, Rachel Andrews

Defining a Grid

why use fr instead of percentage? Seem like the same thing.

track is the space between two grid lines. Line numbers are important. Starts with outside borders being 1. Her slides are excellent so definitely go back through them.

Much magic.

With grid and flexbox items can know about the things that are around them. So that's why you can easily make vertical height the same for all containers versus with floats heights stagger.

Prototyping is a great way to play around with shiny new layout methods to learn them. Grid makes it very easy to play around with layout rather than having to finagle the col-md-4 col-lg-12 classes in the markup.

Extreme Design, Derek Featherstone

OMG. thoroughly enjoyed this. Basically the idea was that if you design for the extreme cases, everyone will be better off.

Straw Test - People w/Low Visibility

Try and complete your task on the web while looking through your 'straw' blocking out a good porition of the screen.

Perhaps try and play around with cell headers on large data-tables to see if I can come up with a easy way to identify what that data is w/o scrolling to the top of the pg.

Design for people who forget things

Classic example of the placeholder label.

One Direction Test

If someone is using a vocal drag and drop they can usually only drag in one direction.

Design for Andre (Huge Fingers)

Try and create a minimum viable interaction.

Compassionate Design - Eric Mayer

I'd previously watched Eric speak about this in a recorded video, so I kind of knew where it was going. It still felt fresh and interesting though.

Liked the idea of having a project 'premortem' and get everyone together and ask people to come up with ways that this project could go horribly wrong.

Book: Forms that Work

Conservative in what you send; Liberal in what you accept.

Josh Clark

wowowow. Talking about extending the web out of our typical frame of mind.

w3.org/standards/techs/js <-- all of the ways you can interact w/devices using the web.

You can get a beacon button (AWS IoT Button, bt.tn) to program (even using ifthisthenthat) to do things, apparently fairly easily.

Creating a physical presence for a digital action.

She would wear it even if it wasn't magic

Apparantly there are these shoes by Lechal that will actually guide you rather than you looking at your phone all the time for directions thus allowing our attention to return to the world.

An artist created a basic email clock thing that was comissioned by Mail Chimp. Super cool.

QR Code is a blob of android barf.

What really is the difference of a QR code and a beacon?? Minus the downloaded software. More easily changeable??


Happy Together App

Grab Magic App

Open Hybrid