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
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
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!)
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!"
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.
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).
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
- CSS Grid Layout
- Box Alignment (https://drafts.csswg.org/css-align)??
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.
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.
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