Read the latest articles from Ariel Salminen.
I’ve worked with web components for nearly a decade and built various enterprise-scale design systems with them. While I love what they offer on paper, the same pain points keep coming back: Layout shifts, flash of unstyled content, poor server-side rendering support, too much reliance on client side JavaScript, doesn't play well with frameworks like React Server Components, accessibility issues,…
Hi 👋🏻, I’m Arielle , a Design Systems Architect working with Kesko . I’m currently helping to strengthen the existing design systems team in the organization, whose main responsibility is building and maintaining Kesko’s design and frontend infrastructure. Right now, we’re looking for an experienced Design Engineer to join this newly founded team. Someone who has a hybrid designer/developer…
I have been recently contemplating the intricate relationship between my personal life and the work I do , particularly how these domains inevitably get intertwined and influence one another. It’s not always easy to keep these separate, especially when one’s vocation transcends mere occupation to become a genuine passion and source of fulfillment. A job, much like a relationship , often starts…
Large Language Models are increasingly relying on information found on the web, but often struggle to handle most websites in their entirety because the context windows are too small. In an attempt to solve this, there is a new emerging standard called llms.txt . This proposal aims to standardize on using an /llms.txt file to provide information to help LLMs use a website at inference time. The…
As mentioned in my previous post , we recently introducing a completely new section for the Nord Design System, called Community Assets . These are product-specific assets from feature teams built using the Nord Design System’s tools . These are not part of the core system, but may eventually be migrated into Nord for usage across all products. Community Assets in Nord Design System . My colleague…
I’m intrigued to see Figma announce their own Model Context Protocol server to help LLMs achieve design-informed code generation. I’ve been also prototyping one utilizing Figma Context MCP that would provide a deeper integration between the Figma Toolkit and the code based tools such as Web Components in the Nord Design System. Text and layer names for the current Figma selection show up in the…
Over the past six weeks, my colleague and I have been working on a new major update for the Nord Design System . The latest 4.0 version launched a few weeks ago now unifies Nordhealth’s two design system platforms into a single platform that can serve all of the feature teams across the entire organization and various business units within. We identified this consolidation as a necessary step to…
If you’ve worked with CSS for a longer period, you’ve probably seen and used about a dozen different ways to center block-level elements on the page. These methods used to vary between a combination of negative margins , CSS translations , Flexbox , and more. Heck, I’ve even used the infamous display: table back in the day. Fortunately, we today have a solution that requires only two lines of CSS,…
View Transitions are probably one of my favorite CSS features at the moment. You can enable them for any site today by adding the following code snippet into your CSS. This will immediately make the experience of using your website smoother by fundamentally changing the behavior of what happens when people navigate from one page to another: @view-transition { navigation : auto ; } Setting…
One of the features that I’m quite happy about on my new website is the built-in search functionality and how the search index gets built for it. You can test it out yourself by pressing Ctrl + K and entering a search query into the input that is revealed: Screenshot of the search feature. I’ve built this feature using Eleventy and some custom filter logic that I will attempt to explain in this…
Webfonts play a crucial role in giving our websites personalized feel, but they can also be a hidden culprit behind sluggish load times. If you’ve ever wondered why your beautifully designed site isn’t performing optimally, inefficient font loading strategy might be to blame. In this article, we’ll delve into practical strategies to enhance your webfont performance, ensuring a better user…
Over the past month I’ve been slowly handcrafting a new website for myself to better showcase what I do and have a future home for experiments I may want to tinker with. Designing the whole thing in the browser using HTML , CSS , and a tiny bit of plain JavaScript has been truly a joy. The current version is the 10th iteration of this website, although there’re even older versions which I’m not…
Sometimes I find vintage technology fascinating and since I couldn’t find a Design Systems Webring (remember those things from the 90s?!), I just created one. Feel free to join if you’re into design systems and want to add some 90s vibes onto your website: https://design-system.club . If you don’t know what a Webring is, here’s a short explanation: Webring is human-curated list of websites…
This challenge has been recently making rounds on the Internet and as I’ve seen a lot of my friends and people I follow in the tech industry take part, I figured that I want to, as well. So this is me answering a set of questions about how and why I blog on this website. Why did you start blogging in the first place? # I’ve learned most of what I know now about building for the web by following…
On the terrace of my old home, I ponder in silence the fairy tale I now live in. The love that was born when I met you. In that beautiful part of Helsinki, surrounded by those adorable little shops that sell the most exquisite pastries and merchandise. You’ve given my life countless new meanings. You, who lift me above this frozen city. And I, watching the sun gleaming through the mist, hovering…
I recently sat down with the team behind the Design System Guide to talk about Nord Design System and how it’s been shaping our work at Nordhealth . We discussed the challenges of building a design system in a fast-paced environment, the importance of collaboration, and the impact design systems have on the organization and people involved. I also shared some of the lessons we’ve learned along the…
A frozen lake, stars gazing above I can hear them play my song And I’m swiveling. Vague as a fog, barely visible Hauling through the zephyr Snowflakes falling on my thighs. Touching, melting Altering their shape As I once were.
Nord Design System was recently nominated for the Best Design System award at Grand One competition and won an honorable mention for the best developer experience. Read more
I’ve been leading various successful design systems teams over the past years and in this post I wanted to share a simple set of fundamental rules we’ve followed. These rules have allowed those teams to get to the highest level of productivity while benefiting both the company and the team members. Running a design systems team has some minor differences compared to a more traditional product team…
Dark mode is an user interface mode that displays light text on a dark background. Dark mode is helpful for those viewing device screens at night, in dark environments, or otherwise find darker UI more accessible. The reduced brightness can reduce eye strain in low light conditions. A typical scenario is that we already have a light theme on a website, and want to build support for a darker…
A Design Systems Lead role includes driving the vision, strategy, roadmap, build and implementation of a design system. This person has a systems-mindset to build and integrate consistent, efficient components across the product portfolio with emphasis on the complete systems life-cycle, from establishing a practice and vision that endures to design, build, document, and maintain a library used by…
In the context of design systems, a Product Design Architect provides strategic and creative direction for the design system. This person partners with executives and other cross functional leadership to scale a design system across a family of products by defining adoption, contribution, governance, quality, and partnership programs. A Product Design Architect is a systems thinker; designing for…
I’ve been years watching everyone around me change. Seasons coming and going. People growing roots. Building houses. Giving birth to their babies. Becoming stable parents. And I’ve tried hard to change as well. Become that, understand it. I’ve been through these things, but I feel like I’m still the same scrawny kid full of dreams and restlessness. Eventually, I’ve started becoming part of…
Nord Design System was recently nominated for the Jamstack Conf Jammies award in “Project of the Year” category. Winners will be announced live at Jamstack Conf on November 7 – 8. Nord was nominated for outstanding achievement in delivering best-in-class experiences to customers through innovative use of technologies across the Jamstack and its ecosystem. You can read more about the award on the…
I was recently interviewed by Lovers Magazine about what led me into design and what type of things inspire me as a designer. I think it was refreshing to answer their questions and really dive into the deep end of what ultimately took me where I am today. I sometimes tend to forget that I’ve been working in this profession for two decades and many of the people I meet inside and outside of work…
We’re excited to announce the first major release of Nord Design System , v1.0 . With this release, our design systems team is shipping a number of new tools and features to improve the experience of designing, building, and shipping products at Nordhealth . Looking back in time, we started our design systems journey at the end of 2020 with initial user research, but the concrete design and…
You’re reading the ninth Nord Design System monthly update. During the past month we’ve been preparing the system for official launch and making sure we offer stable API and comprehensive docs. Looking back in time, we started our design system journey at the end of 2020 with initial user research. We did this because we wanted to first better understand the challenges we’re trying to solve at…
You’re reading the eigth Nord Design System monthly update. This month I wanted to give a little more insight into how we’ve architectured Nord’s packages and how they’re interconnected. One of the recent major changes in Nord is that we’ve re-designed the underlying package architecture. The reason why we decided to do such a big fundamental change this close to our official release, is that we…
You’re reading the fifth Nord Design System monthly update. This month we’ve gained great momentum and have published four new packages, and made many improvements to Nord documentation. As Nord Design System is still quite young, we feel like it’s a good idea to once in a while repeat why we are building these tools and what’s really the scope of our work. To us, a “design system” is a collection…
You’re reading the fourth Nord Design System monthly update. This month we’ve been working on making sure that everyone at Nordhealth understands how and why we’re building a design system. We started the design systems work at Nordhealth in late 2020. The way I usually recommend starting this work is via user research, which helps us to figure out what are the challenges on organization, team,…
You’re reading the third Nord Design System monthly update. This month we’ve been focusing on onboarding new team members and also rolling out the new brand guidelines into the documentation. In the beginning of the month, Eric Habich , our new product designer, joined Nord Design System team. I’ve personally worked with Eric in the past with various clients when I was still living in the San…
You’re reading the second Nord Design System monthly update. Since February, we’ve been busy rethinking our design processes and brand identity that was launched a few weeks ago. During the past months our team has been busy rethinking our brand identity from the ground up. We wanted to go through this effort to mirror the growth and transformation of our company into the leading cloud-based…
I’m happy to announce Three Plus Group’s and Finnish Net Solutions’ new name and corporate identity, Nordhealth . The name change is a result of a rebranding that I did for the company earlier this year. It’s designed to mirror the growth and transformation of the company into the leading cloud-based provider of software for therapy clinics in the Nordics and veterinary clinics globally. Charles…
You’re reading the first ever Nord Design System monthly update. We’re just starting our design systems journey at Nordhealth and have created this documentation platform to support these efforts. The aim of this platform is to serve as a hub for Nordhealth’s user interface design and frontend development work in the future. We’re pushing towards automating most parts of the documentation…
Nordhealth hired me in 2020 to help reimagine what the company’s approach to designing, building and shipping digital products at scale should look like. I started this work by conducting a series of user research activities and workshops to reveal a lack of alignment and personal biases across business units, products and teams to understand how the design system could help them. When we had a…
Why does it feel like the devices we use are getting slower over time? A smartphone I bought a few years ago seems to be losing its edge when browsing websites. My computer struggles to play audio. Even my car’s interface can’t keep up anymore after all the updates. Am I just imagining or were they always like this? No, these devices aren’t actually getting slower, it’s the software that is…
When we started working on Duet Design System early last year, one of our goals was to create similar component playgrounds as I had previously built for Vue Design System . While this seemed like an obvious decision at first, we soon realized that maintaining a code editor of our own required far too much effort, especially since Duet’s documentation is a custom built platform created for a…
You’re reading the ninth Duet monthly update. During the past month we’ve been busy improving the existing features, fixing bugs, and open sourcing Duet Date Picker . As our team working on Duet Design System couldn’t find an existing date picker that would’ve ticked all the requirements we had for accessibility and performance, we decided to build one and open source it so that others could…
Following this tutorial you will learn how to build simple page layouts using Duet’s Design Tokens, CSS Framework, Web Components and other features. For the sake of simplicity, this tutorial is framework agnostic and imports the different parts of Duet directly from JSDelivr . For production usage we recommend that you install the packages using NPM and host the different parts yourself. Getting…
You’re reading the eighth Duet monthly update. Last month we asked from our users how we’re doing and what we could improve. We’ll share some of the results in this post. In the beginning of May we sent out a user research survey to 106 Duet users. Roughly 55% of the people we reached out to answered our survey, which we consider a pretty solid number. We used Duet’s existing Web Components to…
You’re reading the seventh Duet Design System monthly update. This time last year we published our first Web Components package, version 0.0.1-alpha.1 . As our Web Components turn one year old today, it’s a good time to reflect back and see what we’ve accomplished so far. The road here hasn’t always been straight nor without obstacles. When we started last year there were more open questions than…
Following this tutorial you will learn how to utilize Duet’s Command Line Interface to create simple websites that can be shared via GitHub Pages, Amazon S3, and Azure Storage. Before moving further, please make sure you have Node.js 12.x or newer installed. You can install the latest version through their website. For guidance on deploying prototypes created with the Duet CLI to Github pages,…
You’re reading the sixth Duet Design System monthly update. This time the update covers both February and March as it looks like we forgot to push an update out last month. At the time of writing, Duet is now being utilized in 23 different web applications at LocalTapiola and Turva. This number is almost twice as high now compared to last November . As a result of this quick adoption rate, we’ve…
You’re reading the fifth Duet Design System monthly update. This update focuses on new feature and component improvements we’ve been working on. The past month has kept us rather busy. We’ve spent most of our time helping developers working in the different product teams to get their applications production ready, while also improving the accessibility of Duet Design System’s Web Components .…
Following this tutorial you will learn how to server side render Duet Design System’s Web Components using Eleventy and other static site generators. For this particular tutorial we’re assuming you already have a working Eleventy website up and running with Duet’s Fonts and CSS Framework . If you aren’t familiar with Eleventy, its documentation provides easy to follow getting started instructions…
It’s August, 2018. I’m at the office, sitting by the window staring rain pouring down from the sky. A warm cup of tea in my hand, about to sip it, but the phone suddenly rings. I don’t recognize the number. I hesitate for a moment whether to pick it up or not. Maybe it’s again a telemarketer trying to sell me something? Thinking of this particular autumn evening today, a year and a half later,…
Ever read an article praising design systems and how they magically solve design and frontend challenges? I’ve sure seen this being repeated in one form or another. Maybe not with these exact exaggerated words, but the underlying message has been close. While there might be a spark of truth there somewhere, it can be quite misleading to make this kind of statements without explaining what’s really…
You’re reading the fourth Duet Design System monthly update. In this update we’ll share statistics and feedback we’ve received regarding Duet’s public launch. Last month marked a major milestone for us as we launched Duet publicly. A little under a month has gone by, and we’ve seen more than 12.000 unique visitors from all over the globe. Most of the visitors are coming from United States,…
You’re reading the third Duet Design System monthly update. This month marks a major milestone for us as we’re launching our new design system publicly. After ten months of hard work , we’re extremely happy to announce that we’ve removed the authentication and made the documentation public. This change will make sharing and collaboration between different teams and third party vendors much easier.…
You’re reading the second Duet Design System monthly update. This update focuses on accessibility and performance updates that we’ve been working on. During the past month we’ve focused on getting more components ready for production usage together with some big accessibility and performance improvements. At the time of writing, we now have 25 production ready components together with 5 example…