KICKOFF

Afgelopen week lanceerde Spline z'n alpha release. Bij GRRR hebben we met de tool geëxperimenteerd om te zien wat het in huis heeft. Hier mijn findings. Geen uitgebreide review, maar eerste indrukken.

Wat is het? Spline is software om interactieve 3d-graphics te maken voor het web. Je ontwerpt snel en makkelijk ruimtelijke objecten en exporteert naar code (Canvas-element die WebGL 3d graphics draait).

Use cases? Ruimtelijke, illustratieve elementen op een website: header visuals, app-icons, loopjes, character design, buttons, device mockups, enz.

Steile leercurve? Valt mee. De interface is een combinatie van Cinema 4D en Figma/Sketch. De features zijn basic en de tutorials helder.

Pluspunten

• Laagdrempelig. Niet zo intimiderend als Cinema 4D.

• Eenvoudig toevoegen van interactiviteit aan objecten.

• Een library met 3d assets.

• Preview in de browser met een public url.

• Output is code dus lichtgewicht te integreren in html.

• Gratis te gebruiken, hoewel de Pro-versie meer export-opties heeft.

Minpunten

• Je kunt vector-objecten niet importeren of copy-pasten uit bijv. Illustrator. Daardoor ben je genoodzaakt om objecten binnen Spline te ontwerpen.

• Geen pathfinder-opties zoals exclusion. Onhandig want hierdoor ben je beperkt tot basic shapes zoals kubussen, bollen, kegels, cilinders, enz.

• Interactiviteit kun je koppelen aan mouse-states, maar niet aan scroll position.

• Deze alpha voelt echt als 1.0. De features zijn basic, je loopt snel tegen beperkingen aan.

Hoewel de mogelijkheden nog beperkt zijn, zie ik veel potentie. Het gemak waarmee je snel iets ruimtelijks ontwerpt dat kan animeren en interactief is, is super. Heel benieuwd naar de volgende grote update!

Download Spline

Spline tutorials op Youtube

READING LIST

How to design a digital museum — frameweb.com

Matt Pyke (van Universal Everything) vertelt hoe VR iets wezenlijks kan toevoegen aan de online beleving van een museum. "If you're just trying to make the work accessible, I think you're better off simply looking at a high-resolution flat image on a typical website."

How to Make Badass Shadows — blog.prototypr.io

Een aantal gouden regels voor het ontwerpen van realistische schaduwen.

Designing micro-interactions with Figma interactive components — bootcamp.uxdesign.cc

Figma lanceert de mogelijkheid om interactie binnen de app te ontwerpen en te previewen. In-app prototyping dus – een absolute gamechanger. Een tutorial over hoe het werkt vind je trouwens hier.

Dinamo Typeface Release: ABC Arizona — abcdinamo.com

Arizona is één happy variable font superfamily die van sans-serif naar serif strekt. Je herkent 'm misschien als brand typeface voor de Glyphs app én van de San Francisco Symphony identity.

IN JE FACE

Zach Lieberman ontwierp het artwork voor een artikel in The New York Times Magazine over gezichtsherkenning en Clearview AI. Waanzinnig mooi eenvoudig sterk.

Codrops is een web design/dev playground met soms verrassend mooie ui-experimenten. Zoals deze spiral text intro animatie. En als je 'm zelf wil inzetten, download je gewoon de source code.

MUST: RINDOR GOLVERDINGEN

Rindor is creative director en mede-oprichter van Vruchtvlees.

Must read

Junior Designers vs. Senior Designers – Een artikel uit 2014, maar iets waar ik nog veel aan denk. Voormalig VP of design bij Facebook Julie Zhuo zet in dit artikel heel simpel uiteen hoe het ontwerpproces werkt van een junior ontwerper naast een senior ontwerper. Ik sluit me volledig aan bij haar introductie; simpele tekeningen kunnen complexe gedachten gemakkelijk overbrengen.

Must see

Royal Jarmon – Het werk van de in Brooklyn werkende Royal Jarmon geeft een verrassende en speels-naïve kijk op de wereld. Fijn om af en toe herinnert te worden aan de maakbaarheid van je eigen realiteit; doe lekker wat je leuk vindt!

Must use

I Love Hue – In I Love Hue puzzel je de gehusselde kleurvlakjes terug tot een kloppend kleurverloop. Goed om je oog voor kleur te trainen, en je hoofd even uit te zetten.

FRESH FONTS

TOOLS

• Editor X is een website builder met veel ontwerpvrijheid, vergelijkbaar met Readymag.

• Mesh Gradients is een Sketch-plugin voor mesh gradients.

• Mesh genereert ze ook, maar dan in de browser.

• Zoom Escaper voegt hele nare omgevingsgeluiden aan je Zoom call toe zodat iedereen je eruit gooit en jij verlost bent van die hele nare Zoom call.

• Haikei genereert SVG shapes, achtergronden en patronen.

• Post-it x Miro is een Miro-plugin die foto's van papieren post-its converteert naar digitale post-its.

• Dither Me This dithert (wat is het Nederlandse woord?) foto's.

All caught up.

Tot over twee weken! 👋

Jeroen.