Halfvet #106

Mobile navigation patterns

KICKOFF

Ontwerpen voor apps lijkt voor het grootste deel op ontwerpen voor websites, maar er zijn een paar duidelijke verschillen, vooral qua navigatie. Ook lijsten (table views), date pickers, switches en notificaties zijn anders. Ik heb zelf niet heel veel ervaring met app-design; de grootste waar ik aan werkte was de app van De Slimste Mens, zo’n twee jaar geleden. De komende tijd gaan we bij Bravoure een app ontwikkelen voor een device dat de luchtkwaliteit in ruimtes meet, dus ik las met gespitste oren (ogen?) Modern iOS Navigation Patterns van Frank Rausch.

In het artikel geeft Frank een overzicht van de meest voorkomende navigatie patterns, zoals drill-downs, modals, pyramids en sequences. Ik kende alleen modals, dus er was een hoop te leren 🙂 Deze patterns worden uitgebreid uitgelegd:

Structural Navigation

  • Drill-Down

  • Flat

  • Pyramid

  • Hub-and-Spoke

Overlay Navigation

  • High-Friction Modal

  • Low-Friction Modal

  • Non-Modal

Embedded Navigation

  • State Change

  • Step-by-Step

  • Content-Driven

Ik vond het artikel zeer verhelderend en super bruikbaar. Frank Rausch noemt het zelf een onofficieel bonushoofdstuk van Apple’s Human Interface Guidelines. Zo is het. Lees ‘m helemaal op frankrausch.com/ios-navigation

En als je gaat app-designen, dan komen deze twee ook vast van pas:

READING LIST

Ook Spotify krijgt een TikTok-esque revamp. Minder statisch artwork en meer discovery door snippets, previews en personalized AI. Klinkt als een logische stap.

 

Frontend developer Josh Collinsworth geeft tien tips over hoe je perfecte microanimaties en transities maakt. Must read voor developers én designers!

 

Wist jij dat het contrast tussen de kleurvulling van een button en de achtergrond waarop de button staat óók minstens 4.5:1 moet zijn? Ik niet 🙂 En Oliver Schöndorfer ook niet dus weet hij er een artikel en video aan.

IN JE FACE

In de nieuwe identity die Base ontwierp voor The Rock & Roll Hall of Fame reageert typografie op geluid. Dat levert mooie lettervormen op. De witte letters, het serif logo-font en de animatie op basis van geluid doen me wel een beetje veel denken aan Collins werk voor de San Francisco Symphony…

 

De vorige keer liet ik de very shiny button van Alex Widua zien. Jordan Singer maakte dit antwoord: a reflective UI. Tiny trend geboren?

MUST

Teunis Marseille

Teunis is Halfvetter, visual designer en muziekproducer.

Portfolio om je vingers bij af te likken:

Héél vet vind ik het werk van Jason Galea, de 8e Beatle van King Gizzard. 3D met een prehistorische Playstation-look, glitchy video synthese en eindeloos gedetailleerde grafische posters.

Interessante AI-toepassing:

Stel je maakt met AI een plaatje van een LP, print die vervolgens uit en speelt hem af op de pickup. Dat is wat Riffusion doet, zonder fysiek spul.

Dit brengt de nerd in mij naar boven:

De nieuwe Geometry Nodes feature in Blender. Je bouwt zonder te coderen een systeem dat graphics genereert. Zo heb ik bijvoorbeeld een oneindige serie posters gemaakt, volgens een bepaalde set regels. Als je eenmaal iets ontwerpt of animeert op deze manier, kan je niet meer zonder.

FRESH FONTS

Dorset (Positype)

Calhern (Frost)

Caliste (A is for)

JOBS

Jouw vacature in Halfvet? Voeg ‘m toe.
Voor in de rij bij sollicitaties? Join de Halfvet Talent Collective.

TOOLS

HeadshotPro: gegenereerd / gênant

👋

Vorige week was de soft launch van twee musea-websites die we bij Bravoure ontwierpen: die van het Limburgs Museum en de Oude Kerk in Amsterdam. Trots op m’n team!

Tot over twee weken,

Jeroen.

You like? Deel deze Halfvet

Join the conversation

or to participate.