29 dec, 2020

Halfvet #55 – Kunnen jullie dit zien? – 2020 Highlights 💫

Voordat het nieuwe jaar losbarst, kijk ik nog één keer achterom. Veel ontwikkelingen in digital design, zijn ontstaan, gekleurd of versneld door de pandemie - dat zal je niet verbazen. Ik heb de cases, reads en tools die me het meest zijn bijgebleven op een rij gezet. Ze zijn verdeeld over negen thema’s die kwamen bovendrijven:

Collaborative by design
Data viz schiet te hulp
Designers vs. Corona
No-code disrupt
Soft UI
Working apart together
High contrast typefaces
CSS innovaties
Next level video calls

Enjoy!

COLLABORATIVE BY DESIGN

Samenwerking was dé killer feature van veel nieuwe tools dit jaar. Bij GRRR werd Miro de goto tool voor collaborative creation. Maar er was meer interessants…

Miro

Kinopio

Kinopio is een brainstorming/mindmap tool die handig werkt én er gezellig uitziet 😎

kinopio.club

MakeSpace

MakeSpace combineert realtime samenwerken met videocalls en ziet er waanzinnig uit. Helaas nog in ontwikkeling, maar meld je aan voor early access.

makespace.fun

Mural

Mural is een soort eenvoudige Miro.

www.mural.co

Pitch

Pitch gaat het samenwerken aan presentaties verbeteren: het wordt makkelijker en mooier.

pitch.com

Walkie

Walkie laat je met collega’s praten, walkie-talkie style.

www.walkie.chat

Picter

Picter is een collaborative workspace voor visual content.

www.picter.com

Board

Board is een super eenvoudig online whiteboard om samen op te krabbelen.

letsboard.co

Witeboard

Witeboard doet hetzelfde als Board :)

witeboard.com

DATA VIZ SCHIET TE HULP

In een jaar dat barstte van data, zorgden grafieken en data visualisaties voor inzicht.

De Flatten The Curve curve

The story behind ‘flatten the curve’

Hoe ontstond eigenlijk het idee voor die grafiek?

www.fastcompany.com

Move over, data visualization. The era of ‘data simulation’ is here

Het artikel Why Outbreaks like Coronavirus Spread Exponentiallyis de best bezochte pagina op The Washington Post website aller tijden. Je hebt ’m vast gezien: interactieve simulaties van verschillende corona-outbreak scenario’s. Een voorbeeld van de groeiende trend om data niet te visualiseren maar te simuleren.

www.fastcompany.com

Mapping coronavirus, responsibly

Cartograaf Kenneth Field schreef een interessant artikel over hoe bepaalde Covid-19-visualisaties lezers misleiden.

www.esri.com

Population density in Europe

Een visualisatie die droge, demografische data invoelbaar maakt. Alasdair Rae visualiseerde de Europese bevolkingsdichtheid dmv 3d-mapping.

www.statsmapsnpix.com

Zo maken kaarten in de media ons onbewust negatiever over migranten

Dit is je periodieke herinnering dat alle design politiek is. Dus ook eenvoudige infographics die ogenschijnlijk neutraal lijken. Niet dus.

decorrespondent.nl

Land doesn’t vote. People do.

Een visualisatie van de Belgische ontwerper Karim Douïeb van een jaar geleden werd opeens actueel en ging viral. Hoewel het cijfers zijn van de Amerikaanse presidentsverkiezingen van 2016, is de boodschap ook nu relevant: Land doesn’t vote. People do. Dit is de kracht van data visualisatie. Meesterwerk. 👌

try-to-impeach-this.jetpack.ai

DESIGNERS VS. CORONA

De coronacrisis was ook een inspiratiebron. Ontwerpers zochten naar manieren om een positieve bijdrage te leveren.

Stay Sane / Stay Safe

Studio Lennarts & De Bruijn maakte een poster om de Nederlandse zorg te bedanken. Hier bleef het niet bij en ze begonnen andere posters te verzamelen. Inmiddels is het de grootste online verzameling van corona-visuals met meer dan 2000 inzendingen uit 85 landen.

www.stay-sane-stay-safe.com

Window Swap

Zo eenvoudig, zo sterk: Window Swap laat je uit het raam van een vreemde kijken. In corona-tijden is deze travel without moving precies wat ik nodig heb. Als je blijft klikken zie je mijn raam :)

www.window-swap.com

Officesss

Officesss biedt Zoom-backdrops van lege ontwerpbureaus. Kun je remote in je agency-of-choice werken.

www.officesss.online

Mibo

Mibo is videochatten met fun in plaats van awkwardness. Ontwikkeld door Q42.

getmibo.com

Postcards from Isolation

Postcards from Isolation is een serie interactieve visuals over het lockdown-leven. Zitten paar pareltjes bij.

isolation.is

Distance Disco

De makers van Duodisco lanceerden Distance Disco, een game en party in één, waarbij je op zoek moet naar degene die op jouw muziek danst.

distancedisco.nl

Give A Sheet

In maart werd de wc-rol hét icoon van de coronacrisis. Give A Sheet nodigt ontwerpers uit om één vel wc-papier als canvas te gebruiken.

give-a-sheet.com

NO-CODE DISRUPT

Dit jaar werd de no-code beweging mainstream. Ik was onder de indruk van Readymag, waarmee je een website bouwt alsof je in Figma zit en die met één druk live staat. Zonder development dus.

Readymag

Play

Play laat je websites ontwerpen en bouwen vanaf je mobiel.

www.createwithplay.com

Spline

Spline belooft eenvoudig 3D web experiences te maken zonder code.

spline.design

Fotomat

Fotomat is een visual site builder, met name geschikt voor websites met veel foto’s en video’s.

fotomat.app

V.One

v.one is een no-code app builder.

www.yourvone.com

DraftXR

DraftXR is een Adobe XD plugin waarmee je voor VR ontwerpt en prototypet.

www.draftxr.com

Universe

Universe laat je websites bouwen op je telefoon.

onuniverse.com

SOFT UI

UI werd minder plat en monochroom. Welkom fluffy gradients, 3d-illustraties en snoepkleuren.

How Apple makes soft-UI the future

Apple kondigde het einde van MacOSX aan en introduceerde een OS dat visueel nauwelijks meer is te onderscheiden van iOS, iPadOS en WatchOS . Het ziet er Dribbblig uit, met nog meer ronde elementen, zachte kleuren en een vleugje skeuomorphisme.

uxdesign.cc

HUMA branding

Ok, HUMA’s nieuwe branding is een doorsnede van todays aesthetics, maar die gradients werken wel erg mooi hoor.

www.creativeboom.com

How to create dreamy color blurs in Adobe Illustrator

Tutorial: zo maak je die wollige kleur blurs in Illustrator.

dribbble.com

WORKING APART TOGETHER

We zaten met z'n allen in het grootste remote working experiment ooit. Hoe we hier bij GRRR mee omgingen, las je in Halfvet #52. Veel inzichten gaan we toepassen in post-corona.

2020 in één gifje

GitLab’s radical vision for the future of remote work

Nu het wereldwijde thuiswerk-experiment wellicht deels permanent wordt, is het interessant te kijken naar hoe GitLab (the world’s largest all-remote company) dingen aanpakt. Transparantie blijkt daarbij een essentieel onderdeel.

www.fastcompany.com

The reason Zoom calls drain your energy

Ik merk dat videocalls me veel meer energie kosten dan fysieke meetings. Zelfs bij calls met vrienden heb ik last van Zoom fatigue. Ik blijk heel normaal te zijn.

www.bbc.com

Thuiswerktoolkit

Thuiswerktoolkit geeft thuiswerk-lifehacks-inspiratie.

thuiswerktoolkit.nl

Options, Not Roadmaps

De makers van Basecamp en HEY geloven niet zo in product roadmaps. Dat zorgt alleen maar voor stress en teleurstellingen. Beter werk je met opties; mogelijke oplossingen. Een soort lange termijn agile. Super interessant voor eigen projecten, maar ook voor bijv. je carrière 😎

m.signalvnoise.com

HIGH CONTRAST TYPEFACES

Veel nieuwe lettertypes uit 2020 waren high contrast: letters met dikke en extreem dunne details.

Migra (Pangram Pangram Foundry)

Eklektyk (Laïc: Type Foundry)

Swear (Oh No Type)

New Forest (Beasts of England)

Span (Jamie Clarke Type)

CSS INNOVATIES

Verrassend veel nieuwe, interessante CSS-specificaties werden gelanceerd.

sRGB (het gekleurde deel) binnen LCH (de cilinder)

LCH colors in CSS: what, why, and how?

Binnenkort ondersteunt CSS nieuwe kleurruimtes en dat is een big deal. Websites gaan straks kleuren gebruiken die eerder niet mogelijk waren.

lea.verou.me

Leading-Trim: The Future of Digital Typesetting

Een van mijn grootste irritaties bij ui-design zijn marges rond text-boxes. Die zijn niet makkelijk te standaardiseren, je moet alles op het oog doen. Dat ligt aan typografische principes die nog uit de loden lettertijd stammen, maar op het web geen functie meer hebben. Gelukkig is er een nieuwe CSS-specificatie ingediend - hopelijk wordt die overgenomen, dat zou veel hassle schelen 😩

medium.com

Dark mode and variable fonts

Dit is waar variable fonts kunnen shinen! Witte tekst op een zwarte achtergrond lijkt vetter dan zwarte tekst op wit. Hierdoor kan tekst in dark mode slecht leesbaar zijn. Door witte tekst op zwart iets slanker te maken, fix je het probleem. Hoe? Koppel een variable font aan CSS et voilà.

css-tricks.com

:focus-visible Is Here

Ik heb me altijd afgevraagd waarom de :focus pseudo-classvisueel zichtbaar moet zijn om door de toetsenborden van blinde gebruikers te kunnen worden herkend. Gelukkig is er nu de:focus-visiblepseudo-classdie een deel van de :focus-stijlen overbodig maakt.

matthiasott.com

NEXT LEVEL VIDEO CALLS

Onze webcams draaiden overuren. In Halfvet #43 besprak ik een aantal tips voor remote presenteren. En over de twee variable font workshops die ik met Thomas Dahm online organiseerde, schreef Thomas een blog met learnings. Video call tools zijn aan vernieuwing toe en daar zitten we midden in.

Kunnen jullie dit zien?

Mmhmm

Mmhmm is de volgende die videobellen gaat disrupten. Maar echt, dit zijn de ideeën die we nodig hebben. Als ze een half jaar eerder waren, was dit de Zoom van nu geweest.

www.mmhmm.app

Pliim

Pliim zorgt ervoor dat wanneer je je scherm deelt tijdens een videocall, je notificaties uitstaan, je bureaublad schoon is, andere apps worden verborgen en meer.

pliim.app