Skip to content

Frontier Conference 2016

I recently attended what I hope will be the first Frontier Conference held in London. The event was a mix of design & development, with some experienced speakers and some who are fairly new to public speaking. I benefited from the opportunity to network as well as listening to these insightful talks.

Opening Keynote: Aral Balkan — The Matrix Inverted

I really enjoy listening to Aral speak. As well as being a really good speaker, the things he says are important, and offer a fresh perspective on where the web is at the moment. It’s often pretty scary, but Aral doesn’t shy away from the facts.

Aral opened by describing how Facebook works. Facebook wants to use our data to influcence the services we get. “It’s your data — but it’s really Facebook’s.” — why is it Facebook’s? Because they create a simulation of you in order to predict your behaviour, your relationships, your emotions.

The Internet of things isn’t

It’s not just companies like Facebook who are interested in the Internet of Things. It’s also insurance companies. They want to know what’s in your fridge. It can tell them more about your lifestyle. That way, they can charge you more based on your lifestyle choices.

That’s pretty scary.

China already has a pilot program to use a social media behaviour to influence your citizen score. If you’re a good citizen, your kids will get to go to a better school. Black Mirror S03E01 “Nose Dive”.

Matrix - live in a virtual space, physically farmed. Today we live in a tangible space, being farmed in a virtual space. Not our bodies, our minds.

When MZ buys a house, he buys the 4 houses that surround his house. His privacy is not dead - yours is.

MZ is 1 of 62 ppl who have as much wealth as 50% of the world’s poor combined. That’s 3.5bn ppl. Systemic inequality.

What do you do?

  1. Build walls around. Protect your stuff.
  2. Keep an eye on the rest of the world. They might be up to no good.

There are only 2 industries that call ppl who use their products “users”. Us, drug dealers.

Users - store data, analyze. Create profiles of users. A similation of the user. More higher fidelity as we go. FB owns this similation. This similation - insight - is what we sell to customers.

What is “data”? A valuable asset. “The new oil” Data is used to describe about a rock and a human. !!Alarm bells!!

What is the nature of data about people? If a statue, have enough data, can replicate. What can I do if I have enough data about you? Exploit & manipulate your behaviour.

Enough Data about a thing starts approaching the thing itself. Data is not about people, it is people. “Users” dehumanise. Easy to step to “dumb user” - it’s already “the other”, perhaps we need to remove dichotomy.

What is the nature of the “Self” in digital age? You + boundaries around biological self. Outside system & laws to protect the self. Fought & died for these rights. Ppl understand that.

If I have an idea, do I write it down. Does my phone respond? If someone intercepts, surveillance = message capture between two parties.

If mind extended so I store not in my biological brain, but in my phone. It would make sense to extend the boundary aroudn our biological self to include our phone.

What does surveillance become?

An assault on the self. Not a message interception. Have a body of laws & regulations.

We don’t need new digital rights — we need what we already have.

Creating new digital rights - want them to be lesser than human rights.

“surveillance capitalism”

Technology is an amplifier. Exponential.

Server farms. What is being farmed? It’s us.

Massage for cow - not for cow’s benefit, it’s for the beef.

“When you bought a personal computer it didn’t spy on you.” It was magical. Weren’t thinking how many ppl can I farm.

Very lucrative business.

Case studiy for why capitalism worked so well. Deregulated slavery. Wanted business to do the slavery. “It could be better” = “we could be better at marketing slaves”.

Slavery = property law applied to humans.

Peple farmin is property law for everything else about a person that makes them who they are apart from their physical body.

This is the business model of the cloud. Other people’s computers.

Every piece of tech today. Gathering data is a fact of life. It’s not broken, it’s how technology works.

? Who owns & controls this data?

  1. We do

Everything’s OK. Compatiblw with freedom

  1. Corporations, made available to govts.

= a social problem. Corporatocracy.

That is what we have. We are living in a corporatocracy. “We’re sleep walking into this” - no, we’re already there.

Where do we go forward?

  1. Regulate

Curb current abuses. Notice, and stop it. Always playing catchup.

  1. Legislate

Need consitutional protection from ones who know & respect self in digital age. But these empower me here & now.

  1. Create alternatives

Decentralise. Charachter is important. “Zero knowledge systems”. Put data on users machine. End-to-end encryption.

It’s actually centralised. Server is inside capitalism. Centers. Peer-to-peer typology.

TBL is working on it.

Current web is the problem. “everything is OK” is a daydream.

Need to be convenient, every day things.

Cars - build the cars that ppl drive to work every day. Create enthusiasts from every day people.

Regulation - doesn’t work

Why? Julia Reda: “copyright proposals will strengthen google” Inadvertently? No.

Google can put an identifier on anyting being uploaded by you, so it can be traced back to you.

Who spends the most lobbying politicians? Google.

“Revolving doors” go working at tech, go to govts, and back. “Public private partnerships.” Multistakeholderism. Perhaps a \$n bn.

“Coregulation.” “How would you like to be regulated?”

= insituational corruption. Influence of corporate finance on public bodies.

Can only regulate effectively if we remove it.

Business model = “how do you make money” - “I don’t know” “we haven’t decided yet” = about the data.

“We sell products to people” - old school, works.

LifeBuzz coss ppl mob \$4m in data to be tracked. You’re paying to be tracked.

Forbes = 5s x 46m users. = Every year, over 87 years of human life are lost to one door slam (interstitial) on one site.

If you’re UA is Google, you get in.

Forbes! Journalism is part of a free society.

“The core business is to delivery ads to its visitors. Jounalistic content is just a vehicle.”

What is the free press? BAIT.

Bild - detect & blocked Better. Are saying to visitors, “I do not want you to block trackers.” Disable JS = disable site.

A game of chess. The browser always wins (the person using it).

3 Strickes: if you’re using malware, will block you (removed from the web). You don’t deseve your place on the web.

we are sharded beings. We are cyborgs. Extend ourselves using technoogy. Human rights should protect you.

Create alternatives. Ethics. Respect.

  1. Human rights

Decent & open

  1. Human effort

Build things that are functional & reliable.

  1. Human experience

Delightful.

Main problem: no respect.

What do the other layers mean? Decorating. Taking a core out. It’s makeup. Experience design / user design is just decoration.

All design is influence. Design without ethics is decoration.

Decoration camurlages an unpalatable systems os it is not rejected by people targeted for exploitation.

no. of 0’s on paycheck might make us ignore ugly facts.

VC do not invest in ghe business - they invest in the exit. They invest in the sale. Not long term. Startups are disposable. Fail / sold. A silicon valley brand.

“Stay-ups”

Heartbeat - peer-to-peer, no man in the middle.

What if every user had their e-2-e encrypted node. All their devices connected p2p. Interoperatable for other companies to provide.

Funded from commons (taxes). Free to create new functionality. Have to give back to the commons = free & open source.

MIT licence - can be taken & close it off, not share back changes.

Corporatious can compete on quality of service, not lock-in.

We create a world where we own our technology.

What is the future I want to live in?

Built on reason, rights, justice & democracy.

Web Typography - Richard Rutter

“every designer should get good training in typography” Shaping written information.

Most of the web is still unreadable, uninviting.

Billboards & novels - interruption & novels

There’s not enough seduction on the web … “good quality typography is responsible for greaer engagement.”

Good typography puts you in a good mood.

Choosing a typeface …

You can have an impact before it’s even read. Conveys tone, trust, preconcieved ideas.

“Multi sensory typogaphy” - visual communicates to our amygdala. Instinct.

Jellybean font test - Sarah ? “I can make crisps taste saltier by the typeface”.

Tap into complex library of associations. When you’ve see n a font you build a profile of where you first saw it.

It can feel “Spanish” “American” Costa = 60s / 70s.

Mid Century Magazine.

Batrice Warde, The Pople who love ideas must love words.

What do you want your type to be?

Youthful, secure, hipster? Make a statement. Let the world know what you stand for. Connect with spirit & personality, develop a relationship with the person who’s using it.

“Good design is first about making people want to read.”

2 kinds of display fonts:

  1. Workhorse - do whatever you want them to do (Helvetica, Futura, Proxima Nova. Found everywhere. Takes skill & practice.
  2. Add the detail

Questa - Questa Grand. Display font has more interest, because it’s being used big.

.type {
	font-variant-alternates: swash(1);
	@supports not(font-variants ..
}
.ligatures {
	font-variant-ligatures: discrationary-ligatures;
	font-feature-settings: delig(1);
}

Pelican Brandon Text not Grotesque - larger x-height, more childlike, accessible. Tightened tracking for display slightly.

Set huge “in order to create a feeling”

Can you have same impact on small screen

How close do you hold your phone? Right up to your face.

Size Calculator

Setting text bigger.

ios uses 32, 34, 19, 16, (13) for default type sizes

Scale Text with the Viewport

VW unit

== vmin smaller of proportions.

{font-display: swap;}

(not available yet)

parachute

(vw will use the reported measurement of the browser screen).

Don’t be reverential, dogmatic, or ordinary.

Flexbox Today — Zoe

Designer && Developer

Its not so much about learning when to use it, and steps that works within real-world constraints.

When

What browsers do I need to support?

Nearly always irrelevant. It’s progressive enhancement. 97% coverage. Booking.com support ie7/8 and use fb as an enhancement.

Do I need my content to dictate size / content or should my design dictate?

Flexbox is mega-useful when content is unknown and variable, or readability is a top priority.

Don’t use flexbox because you can - have a reason for it.

Content driven, user-made sizes

“there was no reason to keep it consistently ugly for all users”

Things always look a little bit different, anyway.

flex: 0 0 23px // does not flex

flex: 1 0 auto // grows with 1 share, does not shrink

flex: 1 1 auto // grows with 1 share, shrinks with 1 too

This always adds up to 100% width. Leaves the maths to the browser.

Flex items remain in the flow, unlike absolutely positioned items. Can evenly distribute unknown items on an unknown width.

Ordering only works on child elements of a flex container. You’re not re-ordering the tab order - make sure the content is tabbably in a logical order.

Use flex to move the image to the top on small, text below.

mobile

order: -1;

desktop

display: flex; // on parent

Zoe recommends skipping the ‘09 syntax. Use the non-flexbox version. Unfortunately, Autoprefixer bundles the lot.

Flexbox will not override absolute positioning.

display: flex;
display: inline-flex; // like inline-block

Least buggy syntax is writing out. Hidden default values can lead to mistakes. Explicit is best. Also avoids IE10 / 11 bugs.

Decide flex-basis in reverse order, ie basis, then grow then shrink.

flex: 0 0 32px; // this item cannot grow or shrink.

flex: 0 1 32px; // this item can grow but not shrink

flex-shrink: always have at least 1 item per line that can shrink or wrap, or both as a last resort. Otherwise breaks can occur.

Leave extra space alone? flex-grow: 0

Flex: 0 1 auto; // this is the default

Flexbox just takes over if the browser understands it.

Browsers are not perfect.

PostCSS -> https://github.com/luisrudge/postcss-flexbugs-fixes

Sidetracked - John S

The thing that decides what get purchased / noticed is what’s remarkable. It’s worth thinking about.

Releasing an online magazine didn’t work - got a lovely traffic spike which was gone in 24hrs and never seen again. Drip feeding was more consistent.

That’s the absolute beauty of digital design, you can keep tweaking it, refine it, test it and keep coming back to it to see what works.

Grid Systems — Josef Müller-Brockmann

It’s critical to give credit where credit is due - at every stage in the process.

“Design isn't just how it looks. Design is what it does.” —Steve Jobs