In deze feed deel ik interessante nieuwsberichten, artikelen, boeken en video's over UI, UX, webdesign, Design Systems, Drupal, nieuwe media en technologie.
Dark mode, het tonen van lichte tekst op een donkere achtergrond, is volgens onderzoeken van de NN Group alleen voor de esthetiek, dus omdat gebruikers het mooi vinden. In uitzonderlijke gevallen kan het bijdragen aan een verbeterde toegankelijkheid. Geef de gebruiker echter altijd de mogelijkheid om te switchen tussen Dark en Light mode. Maar het is niet minder vermoeiend voor de ogen en zorgt voor een minimale besparing van energie. Het is daarom beter andere zaken prioriteit te geven, zoals een verbeterde gebruiksvriendelijkheid, dan het ontwikkelen van een Dark mode.
Dit is een mooi voorbeeld van 'zo kan het ook'. In plaats van een onduidelijke en onoverzichtelijk PDF formulier, welke lastig in te vullen is, heeft Nicolas een gebruiksvriendelijke online formulierentool gebouwd. Stap voor stap met een duidelijke uitleg.
Daarbij zouden mannelijke landen zoals Amerika, Italië, Griekenland gebruik maken van een agressievere stijl en staat competitie (de sterkste wint) centraal.
In vrouwelijke landen zoals Nederland, Denemarken en Noorwegen wordt er met gevoel ontworpen waarbij de nadruk op foto's ligt in plaats van op harde feiten. Ook wordt er meer witruimte gebruikt.
Hoewel er geen sterke wetenschappelijke onderbouwing is het een interessante observatie die tot nadenken stemt.
Een verzameling van presentaties van bedrijven zoals Apple, OpenAI en Zapier waarbij extra aandacht is besteed aan design.
En beargumteert dat een ui/ux designer meer gefocust is op de gebruiker en onderzoeken vanwege de academische oorsprong. De product designer is meer gericht op de business kant omdat deze functie oorspronkelijk is ontstaan in Silicon Valley.
Voer een MP3 in. Wacht even... kan best lang duren. En je krijgt losse tracks terug van de drums, vocals, bass en eventueel andere partijen.
Interessant vind ik voornamelijk dat hij aangeeft dat je niet moeilijk moet doen als het aankomt op geld uitgeven aan boeken. Ook al haal je maar 1 ding uit een boek wat je leven verandert, dan is het nog steeds meer dan de moeite waard.
Waaronder die van Amerika, Canada, UK en ook Nederland. Werkt een Design System eigenlijk wel? De meningen zijn er over verdeeld want zoals gebruiker ProxCoques terecht opmerkt is het makkelijk om een repository met gelikte components en patronen te maken. Maar dat het correct implementeren van het Design System in legacy systemen een heel ander verhaal is. De andere reacties zijn ook de moeite waard om te lezen voor iedereen die zich bezig houdt met Design Systems.
Op Hackernews ontstaat een interessante discussie over 'realistische' webdesign inspiratie waar onder andere Pixelfika, Siteinspire, CSSline, Admire The Web en Mobbin getipt worden.
De Martime Deftons Type Foundy is een goedkoop (begint bij 19 euro) alternatief voor Google Fonts als je op zoek bent naar unieke fonts voor je volgende project.
Redmine is een gratis open source projectmanagement tool dat als vervanging kan dienen van bijvoorbeeld JIRA.
SVGmix is een verzameling van gratis SVG iconen en illustraties.
David Heinemeier Hanson, CTO bij 37 Signals, beargumenteert dat Figma een mooie tool is om te schetsen, maar als je ontwerpt voor het web moet je dit uiteindelijk toch met HTML, CSS en Javascript doen.
Louise North geeft op Web Designer Depot een mooie uitleg over de Bento UI trend. Onderdelen worden visueel netjes in vakjes ingedeeld zoals bij Japanse maaltijdboxen, waar de naam Bento vandaan komt.
Een verzameling van handige 'UX wetten' waar je rekening mee moet houden als je aan het ontwerpen bent.
Freefaces.gallery is een verzameling van gratis lettertypes. Ik ben vooral gecharmeerd van Outward.
Een interessante benadering van Chris How van Clearleft om in een spreadsheet te beginnen als je een redesign gaat doen. Hij deelt een methode om eerst de huidige content (tekst en afbeeldingen) te verzamelen en op basis van deze content designkeuzes te maken voor het nieuwe ontwerp.
Archives.design is een archief met (voornamelijk retro) graphic design gerelateerde boeken. Handig om inspiratie op de te doen.
svghub is een verzameling aan SVG krabbels, kronkels en vormen die je kan gebruiken om je design op te leuken.
Flowbite icons biedt een set van meer dan 400 gratis SVG iconen.
De rebranding van Team GB door thisaway is een mooi voorbeeld van maximalisme. Een welkome breuk van het strakke, simplistische (maar ook saaie?) minimalisme.
Een mooi collectie van de logo trends in 2023.
Adam Silver geeft goede argumenten waarom je geen tooltips moet gebruiken en wat mogelijk alternatieven zijn.
Prachtige retro computer advertenties!
Een uitgebreide lijst met SVG background pattern generators.
Set aan makkelijk te volgens design regels opgesteld door Anthony Hobday. Hiermee kunnen designers (en niet-designers) hun designs flink mee verbeteren.
Archief met vintage illustraties (1940-1970)
Robin Rendle demonstreert hoe nieuwe CSS functies ervoor zorgen dat je geen hacks meer hoeft te passen voor om fatsoenlijke typografie te tonen op een website.
Uitgebreide verzameling met logo's ter inspiratie.
Artikel van de Washington Post over een wetenschappelijk onderzoek welke suggereert dat de grootste maaltijd hebt ontbijt moet zijn, gevolgd door een bescheiden lunch en een weinig avondeten.
Deze handige tool MuscleWiki laat je een spiergroep kiezen die je wil trainen en geeft je dan passende oefeningen.
Waarom je niet blindelings moet vertrouwen op hoe een browser native HTML elementen toont. In dit geval gaat het om Safari en het tonen van een datumveld wat voor problemen zorgt. Ook is te lezen hoe de developer het uiteindelijk heeft opgelost.
Tutorial om een cool skewed highlight effect te maken achter text.
Uitgebreide patronen generator more.graphics (zoals gradients en geometrische vormen). Genereert ook SVG bestanden (dus kleine file sizes = duurzaam).
Cool CSS experiment met layering, filtering en masking door Jeff Zych.
Chris Coyer bejubelt de ondergang van specifieke publicatieformaten van grote tech bedrijven zoals Google (AMP) en Facebook (Instant articles), waar gebruikers door hoepels moesten springen om content op een bepaalde manier aan te bieden. Wat blijft er over? Het oude vertrouwde HTML formaat. Dit geeft maar weer eens aan hoe robuust de fundamenten van het internet zijn.
Lucide: Een nette set aan open source iconen.
Wanneer gebruik je een link en wanneer maak je een button? Normaal gesproken zorgt een link ervoor dat je naar andere pagina op plek gaat en wordt een button gebruikt om een formulier te verzenden. Maar het ligt niet altijd zo voor de hand zoals Killian Valkhof ondervindt in deze blogpost.
Scott VandeHey laat door middel van een paar inspirerende demo's zien hoe je CSS blend modes kan gebruiken om tot unieke resultaten te komen. Ik ben vooral geïnteresseerd in de half tone filter die afbeeldingen een stripboekachtig effect geven.
Een eerste set aan color fonts zijn gepubliceerd op Google Fonts. Hoewel dit fonttype nog niet door alle browsers ondersteund wordt is het een eerste mooi stap richting een kleurrijker web.
Je kan de fonts bekijken door op Google Fonts 'Show only color fonts' aan te klikken.
Een uitgebreide roadmap, gemaakt door Andy Chan, die aangeeft welke skills je nodig hebt om UI/UX designer te worden.
CSS Doodle is een Javascript bibliotheek die het mogelijk maakt om patronen en illustraties te generen op basis van CSS.
Een goed alternatief voor (grote) afbeeldingen en video's waardoor een website minder CO2 uitstoot.
Matthias Ott bevestigt in deze blogpost iets waar ik de laatste tijd veel over aan nadenken ben: het maken van een HTML/CSS prototype is de beste manier om een design te maken.
Figma, Penpot en Adobe XD zijn oké maar er gaat niks boven een 'shitty' prototype als het gaat om interactiviteit en responsiveness. Ook kan de gebruiker het prototype direct gebruiken in plaats van dat het naar een paar plaatjes moet staren.
Een interessante discussie op Hacker News over de schaalbaarheid van Penpot, het open source alternatief van Figma. De CEO van Penpot reageert ook en stelt twijfelaars gerust dat het met de schaalbaarheid van Penpot wel goed zit.
Gave CSS-only techniek die gebruik maakt van blend modes om hologram effecten te simuleren op afbeeldingen. Scrol maar eens naar onderen, dan zie je het vanzelf :)
Een interessante techniek waarbij je geen gebruik meer maakt van webfonts (zoals Google Fonts) maar uitgaat van de (systeem) fonts die geïnstalleerd staan op het apparaat.
Dit heeft als voordeel dat:
- De fonts direct geladen worden, ze staan immers al op het apparaat van de gebruiker
- Het is duurzaam omdat er geen fonts gedownload hoeven te worden (dus minder KB verspilling)
- Het een uniforme visuele ervaring geeft omdat de gebruiker het font herkend van andere (native) applicaties
- System fonts zijn altijd zeer uitgebreid qua stijlen en unicode. Iets waar het bij webfonts nog weleens aan schort
SVG illustraties hebben de toekomst. Ze zijn het lichtgewicht alternatief (aanzienlijk minder KB) voor afbeeldingen en video's. Wat betekent dat je website sneller laadt en het is duurzamer omdat je minder data verspilt. Je kan er ook hele gave dingen mee doen zoals verzameld door Smashing Magazine.
Is Google stervende? Volgens dkb.io is dit wel degelijk het geval.
Dit komt onder andere door:
- Steeds meer advertenties die de organische zoekresultaten wegdrukken
- SEO specialisten weten het algoritme steeds beter te bespelen waardoor niet de beste resultaten getoond worden maar de resultaten die het beste voldoen aan de regels.
Wat is het alternatief? Steeds meer mensen (inclusief mijzelf) voegen 'reddit' toe aan hun zoekopdracht. Hierdoor krijg je direct advies van echte mensen in plaats van SEO geoptimaliseerde content waarvan de betrouwbaarheid twijfelachtig is.
Wat hoort er allemaal thuis in je Design System? Brad Frost beargumenteert dat een Design System alleen bedoeld is voor User Interfaces. Dus als het gaat om branding, tone of voice, content, performance, persona's, etc. dan krijgt het alleen een plek in het Design System wanneer het van belang is voor de User Interface.
Figma is niet je Design System, aldus Robin Rendle. De front-end is de enige waarheid. Ik kan niet anders dan Rendle gelijk geven. Nu ik bezig ben met opzetten van een Design System voor RVO merk ik dat er niks gaat boven het ontwerpen en maken van componenten in HTML/CSS. Je ziet meteen hoe het component werkt in een daadwerkelijke website en waar de pijnpunten zitten. Iets wat lastig in te schatten is wanneer het een geïsoleerd component is in Figma of Storybook.
Wil je onthouden wat je geleerd hebt tijdens het lezen? Het moment dat je een boek dichtslaat vervliegt het merendeel van alle opgedane kennis.
Niet als je gebruik maakt van Readwise. Je krijgt dagelijks een e-mail toegestuurd met daarin een x aantal (zelf in te stellen) van je highlights die je bijvoorbeeld op je Kindle hebt gemaakt. Hierdoor krijg je de voor jou meest waardevolle passages van een boek te zien en blijft de kennis bewaard.
Je betaalt er $4.49 per maand voor, maar dat is het voor mij meer dan waard.
Nathan Baschez maakt in dit artikel een interessant punt over hoe webdesign aan het evolueren is van het gebruik van grote foto's naar illustraties en animaties.
Tegenwoordig is het gemakkelijk en goedkoop om hoogstaande foto's te gebruiken op je website dankzij websites zoals Unsplash en Pexels. Door zelfgemaakte illustraties en animaties te gebruiken laat een organisatie zien dat zij de resources hebben om deze kostbare afbeeldingen te laten ontwikkelen. Hiermee geven ze het signaal af dat ze 'fit to survive' zijn.
"Quirky and minimalist interfaces don’t make users feel awesome — obvious, inclusive, and robust interfaces do." Adam Silver in Form Design Patterns.
Je kan een super gelikt formulier hebben met allemaal flashy interacties maar als het daardoor minder makkelijk te gebruiken is heb je er niks aan. Silver pleit in zijn boek Form Design Patterns voor het maken van duidelijke, inclusieve en robuuste formulieren die snel en makkelijk in te vullen zijn.
De toekomst van (web)fonts? Google heeft vorige week het aanpasbare lettertype Roboto Flex uitgebracht. Er zijn 12 verschillende manieren om het font te tweaken zoals dikte van de lijnen of de hoogte van de stammen van de letter 'p' of 'd'. Probeer het zelf.
Is het nodig om een progress indicator (de te nemen stappen) te tonen bij je formulier? Misschien niet zoals GOV.UK ondervond wanneer ze de stappen weg lieten en geen verschil zagen in het aantal ingevulde formulieren of de tijd die de gebruiker hiervoor nodig had.
De volgende grote ontwikkeling op het gebied van web/ux/ui design is het ontwerpen en ontwikkelen van klimaatvriendelijke en duurzame websites.
Je staat er misschien niet bij stil maar websites kunnen enorme energieverslinders zijn. Door slimmere keuzes te maken kun je als designer jouw websites aanzienlijk groener maken. Direct beginnen? Het boek Sustainable Web Design van Tom Greenwood is een goed startpunt.
Welk lettertype is online het beste leesbaar? Helaas geven recente onderzoeken geen uitsluitend antwoord. Het verschilt per gebruiker. Desalniettemin bevatten de onderzoekresultaten zeer bruikbare inzichten.
'Ruined by Design' door Mike Monteiro is voor elke designer verplichte kost. Het legt uit hoe wij, designers, kritische vragen moeten stellen bij alles wat wij ontwerpen. Of zoals Mike het zelf zegt: 'There is no such thing as neutral software. We all bring our own biases to the things we design—our own ethical code, and our own garbage.'