Motion In Design Systems: Animation, Style Guides, and the Design Process Jump link for Motion In Design Systems: Animation, Style Guides, and the Design Process
A nice approach can be to break up animation process into three phrases:
- Story Boarding
- low fidelity
- get the jist
- drawing. (what a concept)
- Motion Comps
- hi fidelity
- should be in code? probably not if enough details have been provided
- hand off can be tricky (details along with actual comps)
- Interactive Prototypes
- next level fidelity
- validates how it is to actually use an interface with animation
- validates context and feel
Get Buy In Jump link for Get Buy In
When presenting try slowing down the animation. This can be done with dev tools.
Don’t Be Dogmatic Jump link for Don’t Be Dogmatic
In then end you might need all or none or one part of the process.
Guidelines Jump link for Guidelines
Animation has a place in your styleguide.
Be Consistent With Easing and Durations Jump link for Be Consistent With Easing and Durations
(The thing I need to most work on). Start small. Document durations and possibly what they are used for. less one off business. be more systematic.
Be Choosy Jump link for Be Choosy
Only add what you need.
Come Up With Ideas Jump link for Come Up With Ideas
Make small changes to make process better.
New CSS Layout Meets the Real World Jump link for New CSS Layout Meets the Real World
During the advent of css layouts became boring. People invested the spec are invested in changing how we think about layout. Perhaps its about having the web grow up, having css grow up. Making the case for moving to grid today.
Components Jump link for Components
Focusing on components first makes fall backs easier to implement. Avoid using markup as layout styling hooks. Writing CSS Mobile first simplifies device support.
Defining Template Areas Jump link for Defining Template Areas
Create template areas by selector and then define them in grid-template-areas. Grid template areas are great for controlling source order.
AUTO Alert Jump link for AUTO Alert
The auto property behaves differently in each browser as of May 2017
Non Traditional Elements Jump link for Non Traditional Elements
We can use a pseudo element for half borders using grid row and grid columns. Overlaying elements can be achieved much easier than with absolute positioning. Use CSS shapes.
How We We Define Support Jump link for How We We Define Support
- progressive enhancement (big suprise)
- structured markup is always a good choice
- enhance from the middle
- the modern web is an ever changing middle
- shapes fallback nicely most of the time (not grid)
- feature queries (easy when enhancing from the middle because only evergreen supports @supports)
- most likely we will have two layouts (it’s small but it is two layouts)
- overides work great
- grid says take a hike floats
- items with block and inline block become grid items
- they way ovverides work was well thought out with the spec. there is intention!
Vendor Prefixes Jump link for Vendor Prefixes
Don’t use them. New features have been pushed behind experimental flags. Good riddance! Auto prefixer will work with grid but don’t use it. It’s more trouble than it’s worth. There is a polyfill for grid but polyfills are icky. Yeah don’t use polyfills. Most polyfills were last updated well before the spec was adopted by browsers (again, don’t use)
Designing with Grid Jump link for Designing with Grid
Web is a medium. Use grid. We are at the very beginning. Early web design liked circles. Early design patterns came from cd roms. Then came the layout holy grail and the 12 column grid.
What is its nature Jump link for What is its nature
Rows are a really big breakthrough. Asymmetry is much easier. Grid will encourage you to mix fixed width elements and fluid elements/ smart elements (auto). Breaking the grid becomes easier which is the key to how to use grids in the first place.
Proximity and Asymmetry Jump link for Proximity and Asymmetry
These are two things I should think about with my next layout.
Scrolling and layout Jump link for Scrolling and layout
Scrolling should have an influence on layout. How are things positioned while the user scrolls through the page. The viewport is your frame. Meaning can be conveyed through the scrolling the experience.
Looking back to look forward Jump link for Looking back to look forward
Verticality. The web is a vertical medium. Vertical print layouts happen in Asia in print.
Flexibility Jump link for Flexibility
Percent might go away. Think in ratios and about relationships with content. Think about how the content will react with these units:
Learn Grid Jump link for Learn Grid
It’s part of the css spec. Learn it. It’s not going anywhere.
Design for Real for Life Jump link for Design for Real for Life
The operating system of our country. The federal regulations and tax code. 80 linear feet. Windows alot more. Google a whole lot more (a lot). Your design decisions have a larger implications than you realize most likely. We tend to think of our users as people like us. As a user we feel that the digital universe revolves around us. As a designer we don’t get to ignore that.
Everything is amplified when a user is under distress.
Humor is often used as part of the conversation when interacting with an interface. Humor is not always appropiate, especially under stress.
Connected devices makes all this more complicated. Your talking parrot can trigger unwanted actions through Alexa.
Stress testing Jump link for Stress testing
Overcompensate when stress testing an interface. Bridges are built to withstand more weight than necessary
The Case for Progressive Apps Jump link for The Case for Progressive Apps
Pushback, why have a fancy name for best practices. Yes it’s a label to make it easy to understand but the benefit is real.
Making the Case? Jump link for Making the Case?
- adds the ability to home screen
- messaging is pretty useful
- offline capabilities may be a benefit
- makes your site secure
- provides a fast experience
- with manifest.json findability is improved.
Microsoft has just started giving priority to PWA sites in Bing search results. Folks at Google have hinted that they will do the same. Safari might be supporting the service worker API soon. The Washington Post ended up making there site faster across the board by making it a progressive web app.
The Effect of Going Chromeless Jump link for The Effect of Going Chromeless
You cannot rely on controls. There is comfort with browser UI. You also don’t have to recreate the wheel. The display mode media query can help detect and act accordingly for fullscreen features. How does something get shared within a Chromeless web app.
App Shell Jump link for App Shell
App shell means the first paint happens quickly and improves percieved performance.
Does Everything Need to be Progressive Jump link for Does Everything Need to be Progressive
What Makes Something a Web App Jump link for What Makes Something a Web App
Decide What to Cache Jump link for Decide What to Cache
You probably cant cache third party services. Smashing Magazine caches only the most recent articles. Maybe let people choose what to cache offline
Every piece of the puzzle for progressive web apps adds value on it’s own!
What Shall We Make Jump link for What Shall We Make
Mobile has been the driver of the last decade of Design. Whats’s the next Thing? What’s the next mobile?
Bots! Jump link for Bots!
the Washington Post has something called Heliograf that writes and publishes articles. Machine learning is fast becoming an intergral part of the landscape. Amazon and Google have machine learning API’s. Microsoft’s emotion API is something else.
Machines Are Great But They Make Mistakes Jump link for Machines Are Great But They Make Mistakes
Televsion anchor tiggered viewers Alexa to purchase dollhouses by reciting “Alexa buy me a dollhouse” Collabration and working together can help solve these problems. Machines have an overconfidence problem.
How Do We Add Humility? Jump link for How Do We Add Humility?
I don’t know may be a better answer than the wrong answer. Be explicit when artificial intelligence comes into play. If algorithim confidence comes into play expose that data. Put people where the Pipes go. When something is being gamed step in.
Auditing Logic Jump link for Auditing Logic
If we don’t know how machines make decisions than most likely it will make the wrong ones at some point.
We know more about how our dogs think than our algorithims.
Machines only know what we give them.
Machines lack cultural sensitivity, this needs to be tested for.
Let’s not codify the past with data bias. “When we shape the information we change the course of lives” Eric Meyers
The data we believe is under our control is not.
In the end of the day you are your bot. Take responsibility. You are what you put into the world. Be kind to each other.