In this feed I will share interesting news, articles, books and video's about UI, UX, web design, Design Systems, Drupal, new media and technology.
McGovern indicates that AI is simply a variation of the advertising model. And if access to the AI is free, then you are the product.
Adam Silver argues why HTML prototypes are better than Figma prototypes. In summary: Figma is less realistic (for example, you can't fill out a form), you can't test it with a screen reader, you can't test responsiveness (from landscape to portrait), and hand-off to developers is more difficult.
Previously, Robin Rendle was responsible for maintaining a Design System. Now, as a product designer on the other side, he realizes that a Design System should not be too restrictive. It's fine to have predetermined colors and button sizes, but don't be too rigid, or designers won't use it.
On his blog, Omar Itani explains why you should create more than you consume. Research shows that spending 45 minutes a day on creative activities reduces stress. Additionally, consumption is pointless compared to creation, where in the end, you have something tangible. This resonates with me because it's about the process rather than the end product. The (creative) journey is more important than the goal.
Provided royalty free by the Getty Museum.
"The thing that’s wrong about imposter syndrome is that for the most part no one is thinking about you at all. They’re too busy with their own doubts and their own work."
When you write by hand, the brain is active in a different (and better) way. Because you have less time and space when writing by hand, you have to handle the information more carefully. During this process, you immediately weigh what is important, which helps you remember it better. Therefore, my intention is to make handwritten notes during meetings from now on and then process them digitally later.
Handy collection of inspiring web designs which are not too experimental and still useful for corporate websites.
Daniel Immke shares a method to get a cool 'noisy' effect on SVGs.
Dark mode, displaying light text on a dark background, is, according to research by the NN Group, primarily for aesthetics, because users find it visually appealing. In exceptional cases, it can contribute to improved accessibility. However, always provide users with the option to switch between Dark and Light modes. Nevertheless, it is not less tiring for the eyes and results in minimal energy savings. Therefore, it is better to prioritize other matters, such as improved user-friendliness, rather than developing a Dark mode.
This is a great example of 'how it can be done'. Instead of an unclear and confusing PDF form that is difficult to fill out, Nicolas has built a user-friendly online form tool, step by step, with clear instructions.
In addition, masculine countries like the United States, Italy, and Greece would employ a more aggressive style, with competition (the strongest wins) being central.
In feminine countries like the Netherlands, Denmark, and Norway, design is approached with a focus on emotion, emphasizing photos over hard facts. Additionally, more white space is used.
Although there is no strong scientific basis, it is an interesting observation that prompts reflection.
A collection of presentations from companies such as Apple, OpenAI, and Zapier, with extra emphasis on design.
And argues that a UI/UX designer is more user-focused and research-oriented due to its academic origins. The product designer is more oriented towards the business side because this role originally emerged in Silicon Valley.
I find it particularly interesting that he emphasizes not being hesitant to spend money on books. Even if you only get one thing from a book that changes your life, it's still more than worth it.
Including those of America, Canada, the UK, and also the Netherlands. Does a Design System actually work? Opinions are divided because, as user ProxCoques rightly points out, it's easy to create a repository with polished components and patterns. But correctly implementing the Design System in legacy systems is a whole different story. The other responses are also worth reading for anyone involved in Design Systems.
Enter an MP3. Wait a moment... it can take quite a while. And you will receive separate tracks of the drums, vocals, bass, and possibly other parts.
On Hackernews, an interesting discussion is taking place about 'realistic' web design inspiration, where websites such as Pixelfika, Siteinspire, CSSline, Admire The Web, and Mobbin are being recommended.
The Martime Deftons Type Foundy is a reasonable priced (starting a 19 euros) alternative for Google Fonts if you're looking for some unique fonts for your next project.
Redmine is a free open source project management tool which can be used to replace similar tools like JIRA.
SVGmix is a collection of free SVG icons and illustrations.
Louise North gives a detailed explanation on Web Designer Depot about the new Bento UI trend. Components are neatly tucked in square compartments just like the Japanese meal boxes, where the name Bento originates from.
A collection of handy 'UX laws' which you should keep in mind while designing.
Interesting approach by Chris How of Clearleft to start in a spreadsheet when doing a redesign. He shares a method to first index the current content (text and images) and base design choices for the new design on this index.
Freefaces.gallery is a collection of free fonts. I really like Outward.
David Heinemeier Hanson, CTO at 37 Signals, argues in his blog that is Figma is a cool tool to do some sketching, but when you design for the web you ultimately do this with HTML, CSS and Javascript.
Archives.design is an archive with (mainly retro) graphic design-related books. Handy for finding inspiration.
svghub is a collection of SVG squiggles, scribbles and shapes you can use to enrich your designs.
Flowbite icons offers a set of over 400 free SVG icons.
The rebranding of Team GB by thisaway is a beautiful example of maximalism. A welcome departure from the sleek, simplistic (but also boring?) minimalism.
A beautiful collection of the logo trends in 2023.
Adam Silver provides good arguments why you shouldn't use tooltips and what possible alternatives are.
Loving these old school computer ads!
An extensive list of SVG background pattern generators.
Great set of easy to follow visual design rules by Anthony Hobday for designers and non designers to improve their designs.
Archive with vintage illustrations (1940-1970)
Robin Rendle demonstrates how new CSS functions make typography hacks a thing of the past.
Extensive collection of logo's which can be used for inspiration.
Article from the Washington Post about scientific research suggesting your biggest meal should be breakfast followed by a moderate lunch and a small dinner.
This handy tool MuscleWiki let's you pick a muscle group you want to train and gives you fitting exercises.
Goldmine of useful tips to create resilient and usable forms by Adam Silver.
A cautionary tale on how you should not rely on browsers to always provide usable native elements. In this example it's about the way Safari renders the Date element and how to fix it.
Tutorial on how to create a cool skewed highlight effect behind text.
Extensive pattern generator more.graphics (such as gradients and geometric shapes) which also generates SVG files
Cool CSS experiments regarding layering, filtering and masking by Jeff Zych.
Chris Coyer celebrates the demise of proprietary syndication formats such as Google's AMP or Facebook's Instant articles forcing publishers to jump through hoops. What still remains? Plain old HTML.
Lucide: a clean looking set of open source line icons.
When do you use a link and when do you create a button? Normally a link points you to a new place and a button submits a form. But it's not always that obvious as Killian Valkhof explains in this blog.
Scott VandeHey displays a collection of inspiring demo's to showcase the power of CSS blend modes. I'm especially intrigued by the halftone filter which can give images comic book feel.
First batch of color fonts released on Google Fonts. Not widely supported yet, but a good first step in a more colorful web.
See the fonts in action by going over to Google Fonts and ticking the 'Show only color fonts' box.
Extensive guide by Andy Chan on all the skills you need in order to become a self-taught UI/UX designer.
CSS Doodle is a JavaScript library which enables you to create patterns and illustrations based on CSS.
A good alternative for (big) images and video's reducing the CO2 footprint of a website.
Matthias Ott confirms in this blog post what I've been thinking about a lot lately: HTML/CSS prototypes are the best way to design. Figma, Penpot and Adobe XD are nice but nothing beats a 'shitty' prototype in HTML/CSS when it comes to interactivity and responsiveness.
Interesting discussion happening in this Hacker News post about the scalability of Penpot, the open source Figma alternative. Even the CEO of Penpot chimes in with some reassuring comments.
Very cool CSS-only technique using blend modes to creating a hologram effect on images.
An interessting technique which uses system fonts instead of external webfonts.
The advantages:
- Fonts are directly loaded so quicker and more sustainable
- Uniform user experience as the font is similar to font used by the device
- System fonts have a broad range of style and unicode compared to webfonts
SVG illustrations have the future. They are the lightweight (less KB) alternative to images and videos meaning they will load quicker and waste less bandwidth making them more sustainable. You can also do very cool things with them as portrayed by Smashing Magazine.
Is Google dying? According to dkb.io it is. Because of Ads (increasingly more) and SEO (quality of SERP deteriorates). People are adding reddit to their search to get more 'human' results. I caught myself doing this as well lately.
What needs to be in your Design System? Brad Frost argues that a Design System is meant for User Interfaces. If we're talking about branding, tone of voice, content, performance, persona's etc. it only gets a place in a Design System as it pertains to User Interfaces.
Figma is not your Design System, according to Robin Rendle. The front-end is your source of truth. And I have to agree. Nothing works better than just building components in HTML/CSS giving the best insight in how components will eventually work in the wild.
Want to remember what you learned while reading? The moment you close a book most of the learned knowledge is gone. Not if you use Readwise. It will send you a daily digest with of all the highlights you've made. Easily worth the $4.49 a month.
Nathan Baschez makes an observation about how (web) design is evolving from using photo's to illustrations. High quality photo's are (now) cheap where creating costly custom illustrations/animations signals the organisation is wealthy and fit to survive.
"Quirky and minimalist interfaces don’t make users feel awesome — obvious, inclusive, and robust interfaces do." Adam Silver in Form Design Patterns
The Future of (web) fonts? Google just released Roboto Flex, a customizable web font. There are 12 different ways to tweak it, like thickness, stroke width and case heights. Try it out.
Do you really need to show a progress indicator above your form? Maybe not as GOV.UK found out when omitting it didn't result in any chance concerning completion rate and time.
The next big thing in web design will be sustainable websites. If you want to dive in right now read Sustainable Web Design by Tom Greenwood.
What is the best font for online reading? Unfortunately no definitive answer but still, some great new insights worth checking out.
Every designer should read 'Ruined by Design' by Mike Monteiro. It explains how we, designers, have to question everything we (are asked to) design.