Wireframing: New Penpot Hands-on Demo!

Looking to level up your wireframing skills in Penpot?

Join the new Penpot Hands-on Demo on Aug. 27th!

Laura Kalbag, Design and Developer educator at Penpot, will demonstrate how to create wireframes for web and app designs super easily with Penpot templates, and answer your questions about wireframing.

  • Date: Tuesday, August 27th 2024

  • Time: 4 - 5 PM (CEST) 7- 8 AM (PDT) 10 AM (ET) 7:30 - 8:30 PM (IST)

  • Save the date and watch it on YouTube or LinkedIn.

She’ll cover what a wireframe is, how to use libraries and templates, and how to create quick wireframes with components. She’ll also explain how to build clickable wireframe prototypes and more.

Do you already have a question about wireframing at Penpot? Leave it here, in the comments section below, or ask it live on Tuesday, August 27th.

Get started quickly with wireframes using Laura’s guide on designing, presenting, and sharing with Penpot and our Wireframing Kit library.

:star2: This episode is part of an exciting brand-new series of live demos that will help you get the grips of Penpot! In our first live session, Laura walked us through all the key points for getting started with Penpot prototypes.

5 Likes

Thank you everyone who joined us for the live stream!

If you want to check out the file I worked on during the demo, you can download it here:
Hands-on Wireframing Example.penpot (6.8 MB)

You can find the Minimalist Wireframing Kit on the Libraries and Templates page or download the kit’s file directly from this link.

1 Like

Very useful tutorial for starters. Thank you, Laura!

I’d apreciate if you go foward to a “Level 2” (or 3?) on using Flex or Grid layout when designing a full website page which demands different components and aligments on sections and/or columns. I’ve tried a while ago and it was a complete disaster :sweat_smile:

A webpage like this would fit as a great example:

May we have a hands-on file of it to check the settings?

2 Likes

Hi @godoicami!

Last week Laura showed how Grid and Flex layout work and shared this file that you may find useful: Introduction to CSS Grid & Flex Layout: Hands-on Demo! - #10 by LauraKalbag

We’ll probably launch a more advance (level 2 or 3) Grid & Flex layotus Hands On Demo in the future. : )

In the meantime, here are some additional resources you can take a look at:

Thanks!

2 Likes

Lol. A just realized that I sent a comment to the wrong forum. I had jus watched the “Introduction to Flex and CSS Grid Layouts | Penpot Hands-On Demo” and it was a respond to it.

I’ll be happy to watch a tutorial for a more advanced use =)

Thanks y’all!

2 Likes

Hi! I figured that’s what happened, no worries about you posting here. :slight_smile: The upcoming hands-on demos are Color palettes and libraries, on Oct 30th, and an introduction to the Design system by the end of November. The advanced layouts session isn’t planned yet, but stay tuned!