notebook pattern

An Event Apart Notes 2017

Motion In Design Systems: Animation, Style Guides, and the Design Process 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

When presenting try slowing down the animation. This can be done with dev tools.

Don’t Be Dogmatic

In then end you might need all or none or one part of the process.

Guidelines

Animation has a place in your styleguide.

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

Only add what you need.

Come Up With Ideas

Make small changes to make process better.


New CSS Layout Meets the Real World 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

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

Create template areas by selector and then define them in grid-template-areas. Grid template areas are great for controlling source order.

AUTO Alert

The auto property behaves differently in each browser as of May 2017

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

  • 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

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 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

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

These are two things I should think about with my next layout.

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

Verticality. The web is a vertical medium. Vertical print layouts happen in Asia in print.

Flexibility

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

It’s part of the css spec. Learn it. It’s not going anywhere.


Design for Real for Life 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

Overcompensate when stress testing an interface. Bridges are built to withstand more weight than necessary


The Case for Progressive Apps 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?

  • 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

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

App shell means the first paint happens quickly and improves percieved performance.

Does Everything Need to be Progressive

Probably not.

What Makes Something a Web App

Who knows.

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 Josh Clark

Mobile has been the driver of the last decade of Design. Whats’s the next Thing? What’s the next mobile?

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

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?

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

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

  1. Tim says:

    Do machines have an overconfidence problem, or is it the programmers…?

    1. Paul Kinchla says:

      A good question. I am going to say the programmers.

Comments are closed.