An Event Apart Notes 2017

Motion In Design Systems: Animation, Style Guides, and the Design Process # fragment anchor

Val Head

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

Rachel Andrew

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

Jen Simmons

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:

• minmax
• maxmin
• fr
• auto

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

Eric Meyer

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

Jason Grigsby

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

Probably not.

What Makes Something a Web App # fragment anchor

Who knows.

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

Josh Clark

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.