Hi, I want to design an interactive mock up of a website project, but I’m stuck at the very begining.
I need to design several web pages with some forms and interactions between elements and pages.
How should I organize the work ?
I can’t find the logic between layers, boards and pages.
I checked the tutorials, open a few downloaded designs, but it still doesn’t click.
Anyone can help ?
Michel
Hello @Michel_Parmentier . First of all sorry for the delay. I hope this information can help you 
The first thing you have to do is familiarize yourself with Penpot’s interface and basic elements. Here is some useful information that may help you.
I can give you some advices in terms of processes and organization of a file. I would recommend you start by creating boards that will act as screens for your prototype. At this point it is important to know the screen resolutions and the devices you want to work on.
It should be noted that in Penpot the pages do not work as screens. To do that function you need to use boards.
The next step would be to create the interface elements that are going to be needed on those screens. To do this you can use Penpot’s drawing tools (rectancgle, text, import icons,…) or use a library that already has these elements (like the one I use in the example). Here are some examples to choose from.
If there are several interface elements that you are going to reuse, it would be very interesting to learn how to handle components and shared libraries.
Once we have our screens with the desired interface elements we can proceed to create a prototype. To do this we have to go to the prototyping tab of the sidebar. Here we will find the necessary actions to be able to connect and navigate between screens. We can also use other types of advanced interactions such as overlays, element behavior, flows, etc… For more information on prototyping, I recommend this video.
We have made a lot of progress! To see the result of our work we have to open the View mode. You will see an icon like this in the upper right corner of the workspace. Once we are there, we can browse our prototype, leave comments, see the code of our elements and share our work. This is the section you will want to share with your stakeholders.
I hope this overview will help you. You have commented that you have checked examples and tutorials. I encourage you to visit the Penpot Help Center if you have any questions. We also have a lot of content and examples on our YouTube channel. We will be happy to help you in any way we can from this community.
Hola Juan ! (desde Orihuela)
great tutorial, I wish I had it whan starting, because I think the initial learning curve is to steep at the begining.
I had to watch 2 or 3 times every video about Penpot ever published on YT (I need to check the last one on 1.16).
I also downloaded all the libraries and played with them.
So, very tough start !
I suggest you make it a tutorial on the basic naming convention and functions, like you do here (I don’t think you published this before).
Once I understood the core principles though, now it’s really a pleasure to work with !
I could realise a mockup with 3 or 4 main boards, plus all the interaction / prototype boards, and I’m pleased with the result.
I never used Figma, but did design a lot of web pages with webflow previously.
Great product !
Muchas gracias !
Michel.
also, could you consider using a Discord server for support ?
I forgot that you could start doing this beginners tutorial which explains all the UI drawing basics.
The beginning in this kind of complex tools is usually difficult. Thank you for your words and suggestions. We will consider them. In fact, we are working on improving onboarding as much as possible. Even with new prototyping tutorials for newcomers.
Thank you very much for giving Penpot a chance
I also did that onboarding tutorial, but got stuck in the end as I probably missed some basic understanding (I will retry it later).
Interesting, but not helpful for a beginner, imo, as it’s not the most likely type of work I would do as a beginner (I might be wrong, very personal, of course).
I think of Penpot as a mockup tool primarily (again, my personal view).
