Heeello everyone 👋

Warm welcome to the next edition of Decoding Design, especially to all the new subscribers who joined us since the Ways Conf 2024 conference that I was speaking at 2 weeks ago.

Today, I’m trying a new format. Will try to keep to brief, one small topic each week. Plus some links, from time to time, is I have anything worth sharing. Let me know how you like it!

Let’s start with what seems as one of the most overlooked bit of technical knowledge among designers:

What is a framework and what is a library?

Both things are reusable code that programmers use to build with. You can think about them as resources that help you work faster and so you don’t have to do a lot of highly complex but repetitive work from scratch every time.

Library provides specific functionality (or functionalities). It's like a toolbox you can pick and choose from as needed. You're in control of when and how to use these tools in your code.

An example of a library can be React, which allows you (among a thousand other things) to write components in a declarative way, e.g. <Button variant="primary"> .

A library can also be used for a small specific purpose, like a library to correctly pluralize nouns or add animations.

Framework, on the other hand, is a more comprehensive structure that provides a foundation for whole applications or certain aspects of them. It often dictates the architecture of your project and how components should interact. When using a framework, you're fitting your code into its predefined patterns and following their rules.

An examples of a framework used to build web applications are Next.js and Ruby or Rails. Tailwind is an example of a CSS framework.

Framework defines your architecture but doesn’t define your UI. If you’re starting a project with code that already includes things like content, styles and components, that is what you would usually call a template or a starter.

Example

Last week, I released a template. It is build with React (a library) using a Next.js (framework). It uses a lot of other tools, both frameworks and libraries. If you’d like to take a look at it, the design is available on Figma and the code is on Github.

Why should you care?

When you work on a product company it likely built with specific frameworks and libraries. In case of agencies, some would have a very strong stance on what tools they build with and others would allow more flexibility, e.g. by selecting the most suitable front-end framework for each project individually.

What tools are used by your team matters because it has a major impact on user experience through aspects such as performance, navigation and interactions. Choice of a framework might define which data on the page can be dynamic, has fast it will be loading, how the application is handling errors etc. It can also impose some very real limitations and constraints that would impact your design decisions.

TL;DR

Frameworks and libraries are tools used to build digital products. They impact a lot of aspects of user experience. You should care about what libraries and frameworks are and how they are used to built the things you design.

🔥 This week Mikolaj’s favourites

• [code] talwindcss v4.0 is getting closer, a new major release of the most popular CSS framework

• [design] Mariana Castilho on Dive Club podcast is a fantastic story to listen about how designer can get more technical and skyrocket their career this way in just a few years

• [design + code] Launch UI – Did I mention that I released a new side project?

That's all for this time! As always, feel free to reply with any questions or topics you'd like me to cover in future editions.

Until next time,

Mikolaj