Design Bottle Challenge! (aka sneak peek into Penpot's future onboarding process)

Well, well, well… I was so excited about our new Penpot’s on-boarding flow that I volunteered to do a live stream where I unveiled part of what’s coming (soon!).

You can watch the my particular “How a web design goes straight to hell” drama on our Youtube channel. You also get to know what’s so exciting about the new Penpot’s onboarding process.

Witness how I go off-rails…

Here’s my “deliverable”. Left is my abomination^C^C^C^C^C^C^C^C creation.

You can either watch the video (just 25 min) in which I go through the design bottle tutorial to learn Penpot’s basics (made by the amazingly talented @Ester) and then pick up the challenge or… just try it yourself with no spoilers.

Instructions are easy.

  • Step #1 Import this penpot file into any of your Penpot projects.
    Penpot Design Bottle Challenge.penpot (6.8 MB)

  • Step #2 Design your own bottle and take a screenshot of the pair.

  • Step #3 Share it here and/or elsewhere with #MadeWithPenpot

This challenge is perfect for seasoned designers wanting to get to know Penpot’s UI as well as for inexperienced designers such as myself (I use Penpot for UX, presentations and idea sketching) to have some creative fun while learning Penpot’s basics.

I want to see your bottles! All bottles are beautiful! Don’t let anyone tell you otherwise!

Oh! I almost forgot, please feel free to share your feedback on this tutorial here. Your contributions will be part of its official release for all users on our upcoming official Penpot launch (no longer BETA!).

7 Likes

This is my Bottle:

5 Likes

I took slight liberties in mine

9 Likes

:joy: Freedom is overrated.

4 Likes

wow! that’s next level bottle! I hope I can make the easy one

This is my mana bottle :slight_smile:

6 Likes

My Pixbottle!

7 Likes

Just tested, have to say I was not expecting to miss so many features :frowning: inkscape and Figma spiled me :smiley:
(rounded corners for arpitrary path, transformation over selected nodes, control over dash stroke sizes, offset of path, gradeint with more then two colors, drgabale inputs fields)

Anyway here is small result

9 Likes

Nice bottle @Adam.Belis ! Poison made by a mad doctor, maybe?

We also want to spoil graphic designers and we know that we are still not there, but at least we are on the way. I’ll try to summarize the state of everything you mentioned:

  • Gradients at Pepot are in an early stage. Good news is that we have already designed further improvements (multiple points, different shapes and freeform). We even have an Epic at Taiga to track all these changes, which are strong candidates to be among our next priorities.
  • Rounded corners for paths are also ready to be developed.
  • About paths, we have a list of improvements and this very week we talked about updating it. We are planning to have some time focused on implementing most of them soon. You can take a look at them by filtering the backlog using the word “path”: Taiga
  • Dash / dotted stroke sizes are in our plans too. This one is still not designed but it looks more like an enhancement than a major effort.
  • Offset path: to be honest, we still didn’t consider this one (I don’t think it is in Figma either, but I could be wrong). We will discuss it internally and we will consider it.
  • What we already discussed more than once is draggable inputs, but it seems that is not on our backlog, so I’ve just created (still with little definition) because it is something that we definitely want to do.

Thank you for taking the time to draw your bottle :test_tube: and give us feedback, it is very very valuable to us :slight_smile:

8 Likes

Glad to see that you are working on most of this shortcomings

5 Likes

H-Bottle
#MadeWithPenpot

6 Likes

Nice! This could be a good program for some pixel art for game devs.

4 Likes

Actually, the Kaleidos team (creators of Penpot) use other tools for pixel art. You can read a bit more about this going to a blog post on one of the projects during our latest PiWEEK hackathon at the company.

They mention https://libresprite.github.io/ for that.

4 Likes