In deze feed deel ik interessante nieuwsberichten, artikelen, boeken en video's over UI, UX, webdesign, Design Systems, Drupal, nieuwe media en technologie.
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.
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.'