Interface design with UI kits | Hands-on Demo, March 26th

A new Hands-on demo is coming your way! Mark your calendar for March 26th! :date:

@LauraKalbag, designer, developer, and educator at Penpot, will showcase how UI kits can save time, maintain consistency across projects, and serve as an excellent foundation for your own design system.

UI kits are a great way to create user interfaces quickly with pre-made components. Laura will explain how both designers and developers can use UI kits to save time and how you can even use a UI as a starting point for your own design system.

Event details

:spiral_calendar: Date: Wednesday, March 26th

:watch: Time: UTC 3-4 PM (Convert to your local timezone with ZoneStamp)

:play_button: Stream on: PeerTube, YouTube or LinkedIn

Key discussion points

  • The advantages of using a UI kit
  • Best practices for developers using UI kits
  • Penpot’s UI kit library options
  • Interface design with UI kits
  • How UI kits contribute to scalable design systems

Join us for a live session where you’ll learn, interact, and , of course, get your questions answered in real time. You can also ask your questions in the comments below, and Laura will answer them live.

:backhand_index_pointing_right: This is a new session from the full series. Check out the complete Hands-on demo playlist!

3 Likes

Thanks @Elena_Alcalde_Rueda!

And as ever, if anyone wants to see anything specific or has any questions ahead of the livestream, drop them in here :grin:

1 Like

@LauraKalbag is it possible to show how to use some of the new features released in V2.5 in the upcomming tutorial?

1 Like

Hi @BDV, @LauraKalbag already showed some of them at the last Hands-On Demo. A bold move, considering the features just dropped hours before :slight_smile:

And we’ve also published this walkthrough showing the main 2.5 features and enhancements.

2 Likes

These are the demo files I created for/during the hands-on:

(The links are to Google drive as the files are too big to upload here! That’ll be my massive sketches…)

And below you can download the Material Design Light icons library:
Material Design Light icons.penpot (1.9 MB)

Some links for other resources I mentioned during the demo:

1 Like

Hey, @LauraKalbag see that the theme for the Demo in April has already been chosen and is obvious

For the demo in May, would it be possible to show how to use Penpot in bussines branding and possibly how to use a design from Penpot on hosting sites like e.g. Create personalized web apps with Vercel

Don’t know if you’ve already done this but maybe it could be useful to think of the demo of month x as part 1 and the demo of month y as part 2. Where at the start of the demo of month y, you use the end result of demo x as a starting point. By this you can realise a more complex example than starting from scratch each time.

I like the idea of building on a previous demo, that’s really cool.

would it be possible to show how to use Penpot in bussines branding

Do you have any particular business branding use cases in mind? I’d be happy to do something on how you might use Penpot for brand design, but the needs of a business/brand can be quite unique.

If I think back to the days when I used to do branding as part of my freelance work, this would be creating a logo, a colour scheme, perhaps a typography scheme, and something like a digital banner or business card to demonstrate how the brand could be used. Is this the kind of thing you’re talking about?

And possibly how to use a design from Penpot on hosting sites like e.g. Create personalized web apps with Vercel

There’s not really a way to go directly from Penpot → Vercel without a lot of steps in between, and it would really depend on what you’re designing. For example, a simple landing page has a very different development process from a blog that has a content management system and an interface for writing posts, or a web app that has functionality like user accounts, billing systems and so on. (Vercel might be overkill for a landing page or blog!)

Though I am totally up for exploring how you can use Penpot’s HTML and CSS (and design tokens!) in a development process, if anyone else would be interested in that. Maybe a lot of developers know how they’d do that for their codebase anyway? Perhaps it would be more useful for designers who want an insight into how developers work?

Yes exactly, the only additional thing I thought of is possibly a flyer.

At Vercel, they also have templates just like at Penpot. The following template looked potentially interesting to me:

Personally, I see this as rather an advantage, when you have a platform where you barely have headroom you are soon forced to change platforms because it no longer meets the requirements of the project as it grows, and Vercel’s templates include examples for blogs.