Beginners

Wireframes vs. mockups: How to use both for better design

Wireframes and mockups offer a tangible roadmap for refining your best ideas. Each has a unique role in the creation pipeline.

Code

What are design tokens? A complete guide

Design tokens create a single source of truth for design decisions, making your design system more maintainable, scalable, and consistent.

Beginners

9 UI design tips for smarter marketing project designs

To stand out from the crowd, you’ll want to focus on making your UI as usable and effective as possible — these design tips can truly separate you from your competition.

Penpot

Transform Your Designs Into Code With Penpot

Used for everything from mobile apps to e-commerce sites, the design-to-code approach has helped teams turn out fantastic work in less time.

Design

Accessible Design Checklist

Improve your design’s accessibility with this quick reference checklist and Penpot plugin.

Code

7 ways Penpot empowers developers to do their best work

Read about how Penpot is changing the way developers work for the better. We’ve identified some of the ways they can see results right away from making the switch

Beginners

Product designer skills: 5 skills employers are looking for in 2025

We've identified the five areas most likely for hiring teams to find valuable in 2025.

Beginners

How to choose a color palette and use it to build your brand

Colors play a crucial role in shaping brand identity. Since the 15th century, color theory has guided designers worldwide in selecting the ideal combinations to enhance and elevate their designs.

Beginners

How to make a mood board for your next app or website design

When you go through the process of creating a mood board, you get a better idea of the feeling your product should evoke for users. Here’s how to make a mood board you can be proud of. 

Tutorial

Design systems best practices with Penpot

If you want to create a design system using Penpot, I’ve got some tips, tricks, and best practices for you.

Code

How to create interactive image hover effects with CSS

Learn how to create effective hover effects in different ways and how they help designers provide a better user experience

Beginners

7 wireframing examples for better designs

Wireframes are an integral part of designing any app or website. These analog or very low-fidelity drawings have one purpose: to show the basic layout and navigation of your idea.