An Event Apart Notes 2017
Motion In Design Systems: Animation, Style Guides, and the Design Process fragment anchor
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 fragment anchor
When presenting try slowing down the animation. This can be done with dev tools.
Don’t Be Dogmatic fragment anchor
In then end you might need all or none or one part of the process.
Guidelines fragment anchor
Animation has a place in your styleguide.
Be Consistent With Easing and Durations fragment anchor
(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 fragment anchor
Only add what you need.
Come Up With Ideas fragment anchor
Make small changes to make process better.
New CSS Layout Meets the Real World fragment anchor
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 fragment anchor
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 fragment anchor
Create template areas by selector and then define them in grid-template-areas. Grid template areas are great for controlling source order.
AUTO Alert fragment anchor
The auto property behaves differently in each browser as of May 2017
Non Traditional Elements fragment anchor
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 fragment anchor
- 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 fragment anchor
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 fragment anchor
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 fragment anchor
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 fragment anchor
These are two things I should think about with my next layout.
Scrolling and layout fragment anchor
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 fragment anchor
Verticality. The web is a vertical medium. Vertical print layouts happen in Asia in print.
Flexibility fragment anchor
Percent might go away. Think in ratios and about relationships with content. Think about how the content will react with these units:
Learn Grid fragment anchor
It’s part of the css spec. Learn it. It’s not going anywhere.
Design for Real for Life fragment anchor
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 fragment anchor
Overcompensate when stress testing an interface. Bridges are built to withstand more weight than necessary
The Case for Progressive Apps fragment anchor
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? fragment anchor
- 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 fragment anchor
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 fragment anchor
App shell means the first paint happens quickly and improves percieved performance.
Does Everything Need to be Progressive fragment anchor
What Makes Something a Web App fragment anchor
Decide What to Cache fragment anchor
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 fragment anchor
Mobile has been the driver of the last decade of Design. Whats’s the next Thing? What’s the next mobile?
Bots! fragment anchor
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 fragment anchor
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? fragment anchor
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 fragment anchor
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.
2 thoughts on “An Event Apart Notes 2017”
Do machines have an overconfidence problem, or is it the programmers…?
A good question. I am going to say the programmers.