Interfaces
The Design Engineering Magazine
What makes an interface feel great?
I think a lot about what makes an interface feel great.
When you go from using a good product to a great one, you can feel the difference. It's often hard to point to what makes it though.
It's usually not a single thing, but instead a lot of small things that add up.
Designing interfacesDesigning interfaces that feel natural and intuitive
Great design is invisible. It guides users without them ever noticing.
Designing interfacesDesigning interfaces that feel natural and intuitive
Great design is invisible. It guides users without them ever noticing.
In the age of artificial intelligence, shipping fast is no longer an advantage. When anything can be replicated in minutes, just building something isn't enough.
Products that are going to stand out and last are those that are built extremely well, with intent and extraordinary care.
That's what Interfaces focuses on.
Read by designers, engineers and design engineers at
About Interfaces
Articles on my website have been read more than one million times and it makes me very happy that people find them useful.
Interfaces is where I share everything I know and continue to learn about building great interfaces and products.
I cover a variety of topics from animation and typography to layout, color and everything else that is a part of building a great interface.
How it works
Once you subscribe, you get full access to the Interfaces platform. This includes all previously released issues with interactive demos and code snippets.
At least one new issue is released every month.
You also get access to a curated library of resources, tools I personally use, agent skills and a private Discord community.
New issue every month
At least one new issue is released every month.
Interactive demos
Concepts are explained through interactive demos instead of text only.
<AnimatePresence mode="popLayout" initial={false}>
<motion.div
key={isCopied ? "check" : "copy"}
initial={{ opacity: 0, scale: 0.25, filter: "blur(4px)" }}
animate={{ opacity: 1, scale: 1, filter: "blur(0px)" }}
exit={{ opacity: 0, scale: 0.25, filter: "blur(4px)" }}Source code
Most examples and demos include the source code.
Agent skills
Skill covering many of the topics explored in the magazine.
Bookmarks and tools
A curated library of resources and tools I personally use.
Private Discord community
Discord community to discuss issues and meet like-minded people.
Nice to meet you, I'm Jakub
I'm a founding design engineer at Interfere. I write articles about a variety of design engineering topics on my website and I built oklch.fyi.
I care deeply about craft and quality and I like to make people feel something through my work. I'm obsessed with details and I often spend an unreasonable amount of time on them.
Previously, I worked at OpenSea and a few other companies. You might have seen some of my work on Twitter or my code on GitHub.
Read three issues for free
Get a feel for Interfaces. Each issue covers a different topic from start to finish.
┌───────────────────────────────┬──────────────────────────────────────────────┐ │ Issue │ Chapters │ ├───────────────────────────────┼──────────────────────────────────────────────┤ │ Typography manual for the web │ - Choosing a typeface │ │ │ - Anatomy of a typeface │ │ │ - Loading fonts on the web │ │ │ - Static vs variable fonts │ │ │ - OpenType │ ├───────────────────────────────┼──────────────────────────────────────────────┤ │ Working with type │ - Spacing, sizing and rhythm │ │ │ - Lines, wrapping and overflow │ │ │ - Case and punctuation │ │ │ - Underlines and selection │ │ │ - Forms and editable text │ │ │ - Decorative text │ │ │ - Accessibility │ │ │ - Conclusion │ ├───────────────────────────────┼──────────────────────────────────────────────┤ │ What are OKLCH colors? │ - Color models │ │ │ - Gamut │ │ │ - Structure │ │ │ - Consistent brightness │ │ │ - Predictable shades │ │ │ - Gradients │ │ │ - Color space support │ │ │ - Maximum chroma │ │ │ - Browser support & fallbacks │ └───────────────────────────────┴──────────────────────────────────────────────┘
┌────────────────────────────────────────────┐ │ Typography manual for the web │ ├────────────────────────────────────────────┤ │ - Choosing a typeface │ │ - Anatomy of a typeface │ │ - Loading fonts on the web │ │ - Static vs variable fonts │ │ - OpenType │ ├────────────────────────────────────────────┤ │ Working with type │ ├────────────────────────────────────────────┤ │ - Spacing, sizing and rhythm │ │ - Lines, wrapping and overflow │ │ - Case and punctuation │ │ - Underlines and selection │ │ - Forms and editable text │ │ - Decorative text │ │ - Accessibility │ │ - Conclusion │ ├────────────────────────────────────────────┤ │ What are OKLCH colors? │ ├────────────────────────────────────────────┤ │ - Color models │ │ - Gamut │ │ - Structure │ │ - Consistent brightness │ │ - Predictable shades │ │ - Gradients │ │ - Color space support │ │ - Maximum chroma │ │ - Browser support & fallbacks │ └────────────────────────────────────────────┘
These issues are free to read and give you a glimpse into what the magazine is about, how the issues are structured and what the content looks like.
Start building great interfaces today
Quality matters more than it ever has in software. If you care about craft, you like to sweat the details and want to learn more about design and engineering, I think you’ll enjoy the magazine.
New issue every month
Resource library
Interactive demos
Source code
Agent skills
Private Discord community
New issue every month
Resource library
Interactive demos
Source code
Agent skills
Private Discord community
Everything in Monthly and Yearly, plus:
Early access to new issues
Lifetime member badge
Vote on upcoming topics
Newsletter
Subscribe to get notified when a new issue is released, along with design engineering resources and other newsletter-exclusive content.
Join 2,124 other subscribers.
