Is this you? As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.
Claim your profile
Articles by Lukas Oppermann
Design tokens with confidence
Design tokens with confidence Why the W3C design token standard is your new foundation. Press enter or click to view image in full size In this article you’ll learn why aligning with the official standard make your tokens work across the entire product spectrum and how you set up design tokens that follow the new standard.
Conceptualization and Realization of a Vibrating Intrinsic Reverberation Chamber for Plant Exposure to Radio Frequency Electromagnetic Fields
DAC days after cutting DAE days after end of exposure EMC electromagnetic compatibility ICNIRP International Commission on Non-Ionizing Radiation Protection MSRC mode-stirred reverberation chamber PAR photosynthetic active radiation RF-EMF radio frequency-electromagnetic fields VIRC vibrating intrinsic reverberation chamber 1 Introduction The last decades were characterized by a significant increase in the use of mobile communication devices and wireless data transfer.
Design tokens for non-designers
Design tokens for non-designers Understanding design tokens as a developer, product owner or project manager Design tokens represent a fundamental shift in how we manage design decisions in modern software development. They serve as the smallest building blocks of visual design, storing and distributing design decisions across platforms and teams¹.
Throw-away tooling
Lean tools to do one job well. Source of 3D illustration: OpenAI What is a throw-away tool A throw-away tool is a custom solution developed to address a specific problem. Despite its name, these tools can see frequent and long-term use. The “throw-away” aspect refers not to the tool’s lifespan, but to its intended scope and audience. These tools are built to solve the developer’s own problems. Because of this they focus on solving specific issues over broad applicability.
The ultimate Design Tokens setup or how to manage design tokens across your org
The ultimate Design Token setup Or how to manage design tokens across your company Before we dive into this, let me tell you that there is no one right or perfect way to do design tokens. If what you are doing works for you — great. No need to change it. However, I do feel that one can learn from others and there are always things to improve. Goal Every action has a cost. So, we need to think about the goals for our design token system. Which aspects do we want to optimize for?
Optimizing Figma variables and components
Optimizing Figma variables and components Learn how to build a flexible and responsive design system in Figma using tokens and components. Our goal is to build a design library that represents our code components as closely as possible. We also want users to be able to change between themes and viewport sizes without having to manually set the properties on every component. Approach Using a Card component, I will demonstrate some ideas, techniques and conventions that help us…
Maintaining a design system in Figma
Maintaining a design system in Figma Design systems evolve over time and so do the platforms they are built on. As maintainers, we need to make sure to keep them up to date. This includes Figma and your Figma design system library. Figma has only a basic versioning, so we need to be careful with changes. But there are some techniques to make sure we don’t release updates that break consumers Figma projects.
Maintaining a design system in Figma
Maintaining a design system in Figma Design systems evolve over time and so do the platforms they are built on. As maintainers, we need to make sure to keep them up to date. This includes Figma and your Figma design system library. Figma has only a basic versioning, so we need to be careful with changes. But there are some techniques to make sure we don’t release updates that break consumers Figma projects.
How to achieve more and become a top performer
How to achieve more and become a top performer While I am not old yet, I am also not young anymore. I worked as a freelancer, a contractor, a consultant, a small business owner, and a full-time employee for years and in many different companies. Through this I gained experience in different work environments and company cultures. Over the years I learned things from friends, colleagues, and the internet. Things that are supposed to make you a top performer*. I tested a lot of them in the field.
Design Systems vs. AI: will the robots take over?
Design Systems vs. AI: will the robots take over? source: https://starwars.fandom.com/wiki/C-series_protocol_droid I first discussed this topic in a meetup at dayone together with Sarrah Vesselov. If you want, you can view a recording of the talks. Due to the amount of interest, I decided to write some more about it. In this post, I will discuss whether artificial intelligence (AI) will take over design systems. I will also consider if AI has a place in a human-led design system workflow at all.
How to start building a design system
A step-by-step guide to bring a design system into your company without losing your mind. A design system can solve your problems with quality, speed, maintainability, and more. It is seen as a drop-in solution that everyone should have. But is this actually true? Should you start building a design system for your company? And if so, how do you start? This article provides steps to evaluate if you need a design system. It also shares my recommended steps to start building your design system.
Stakeholder management for design systems
Stakeholder management for design systems The success of a design system depends more on stakeholder management than on the quality of its components. Stakeholder management (also project stakeholder management) is a critical component in the successful delivery of any project, program or activity. Stakeholder management is a continuous process of developing a communication strategy² for your project and influencing stakeholders through engagement.
Getting started with native design tokens in Figma
Your text and color styles, shadows, etc. can be represented as design tokens. The important part is to share design tokens between all parts of the product team. The goal is for design and development to use the same tokens from the same source of truth. With design tokens, both hand-off and global changes get easier. If set up correctly, any design token change must be done at one place only, the design token source of truth.
Presentational colors
Presentational tokens bring the color into data visualisation¹ and customizable UI elements. They are the colors used for labels or folders and similar elements. What makes them specific in design token terms is, that they don’t have a semantic meaning. Unlike danger and success color tokens, presentational color tokens are used for anything. However, unlike the base tokens in your color scales, presentational colors still change depending on the current theme.
GitHub celebrates developers with disabilities on Global Accessibility Awareness Day
At GitHub, our favorite people are developers. We love to make them happy and productive, and today, on Global Accessibility Awareness Day, we want to celebrate their achievements by sharing some great stories about a few developers with disabilities alongside news of recent accessibility improvements at GitHub that help them do the best work of their lives.
Design's journey towards accessibility
As a design organization we have the opportunity to make a significant impact on making GitHub inclusive for all developers. Designing complex interactions for users with a wide range of abilities is challenging. It’s easy to fall into traps where checks pass but the resulting experience isn’t actually a good experience for anyone, including those with disabilities. We are early on our path to accessibility, but we’ve also come a long way.
Navigation and search improvements for accessibility
GitHub has recently made some significant user interface changes to navigation and search. Our vision is to be the home for all developers–including those with disabilities–so as we’ve built these features, we included accessibility throughout the development process. If you’re a developer with a disability or an engineer that is new to accessibility, you might be wondering: What are accessibility features? What do accessibility features look like at GitHub?
Unlocking inclusive design: how Primer's color system is making GitHub.com more inclusive
Over 100 million developers around the world come to GitHub to build software. Primer, GitHub’s open source design system, is responsible for creating inclusive, responsive and efficient experiences for a diverse range of users. The Primer team aims to enable all user interface (UI) components to be built leveraging Primer. At Primer’s foundation is our color system, a way of defining and applying consistent colors across the Primer UI components and themes.
11 Benefits of Design Systems to Know
In this article I will talk about the known and not-so-well known benefits of implementing a design system. And before you get the wrong idea: No, you can’t fire all designers. A design system is an ever-evolving, living system. It needs to grow and adapt and for this you need designers and developers. What Is a Design System? A design system is a collection of design and code decisions that everybody uses.
W3C Design Tokens with Style Dictionary
The World Wide Web Consortium (W3C) is an international community¹. It's led by Tim Berners-Lee² and Jeffrey Jaffe. Together with organizations, a full-time staff, and individual...
Getting WCAG color contrast right
Actionable tips on how to nail WCAG 2.1 color compliance. Web Content Accessibility Guidelines (WCAG) define rules, that make your product accessible to people with disabilities.¹* The WCAG is an open standard developed by the w3c together with individuals and orgs around the world. (Like all other w3c standards). * Being general guidelines following the WACG won’t make your product 100% accessible for everyone.
Getting the WCAG color contrast right
By Lukas Oppermann Actionable tips on how to nail WCAG 2.1 color compliance. Web Content Accessibility Guidelines ( WCAG) define rules, that make your product accessible to people with disabilities.¹* The WCAG is an open standard developed by the w3c together with individuals and orgs around the world. (Like...
Designing dark mode
By Lukas Oppermann Design considerations for crafting a great dark mode. In this article I discuss the key aspects to consider when designing a dark mode/theme. Everything from colors and shadows to icons and typography. This is a two part series: Implementing dark mode Designing dark mode
How to implement dark mode with as little effort as possible
How to implement dark mode with as little effort as possible This article discusses everything from triggering dark mode, to setting up design tokens to get automatic dark mode for all components. This is a two part series: 1. Implementing dark mode 2. Designing dark mode (coming soon) Source: Material.io¹ You can guess it from the quote of the googles material design documentation, it is simply a dark theme. With a color palette that consist mainly of black and greys.
Gestalt Theory: A Refresher on the Psychological Principle Every Designer Should Know
Recently gestalt theory (also gestaltism) has gained immense popularity, especially for designers. In fact, it seems to be a trend. However, gestalt principles are very helpful and designers should know about them. Most authors discuss gestalt principles in an abstract form. Others focus on print design. There are few articles about gestaltism in digital products. While different at first, digital and print products adhere to the same layout rules.
Creating an Npm-Only Build Step for JavaScript - the Easy Way
Nowadays it is impossible to write frontend code without a build tool. We work with TypeScript and Sass to bundle and optimize our code. Gulp was my choice for the last three years. But lately I have been growing frustrated with the overhead it brings. Doing what you want can be very hard, especially if what you need does not exist in a ready-made recipe. And if you try to write your own plugins, streams and buffers can scare you off.
11 Benefits of Design Systems for Designers, Developers, Product Owners, and Teams
In this article I will talk about the known and not-so-well known benefits of implementing a design system. And before you get the wrong idea: No, you can’t fire all designers. A design system is an ever-evolving, living system. It needs to grow and adapt and for this you need designers and developers. What Is a Design System? A design system in its most basic form is a collection of design and code decisions that everybody uses.
Building better products with a design token pipeline
Getting design tokens from design tools to code. You may know what design tokens are and what benefits they can bring. But you may wonder how exactly to start using them and how you can integrate them into your workflow. I this article you will learn just that: How to lean on design tokens to make better design decisions How to use them when specifying and documenting your designs How to integrate design tokens into the development pipeline Design tokens are an integral part of any design system.
Show More
loading
Actions
Is this you?
As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.Get in touch with Lukas
Contact Lukas, search articles and posts on X, monitor coverage, and track replies from one place.
Learn more about Muck Rack