Similar to Sketch or Figma but Open Source https://github.com/penpot/penpot
Have a try if you haven't! I wish one day I could replace my Figma workflows
Wow, I've wanted something like this for literally years!
Pencil is OK, but fiddly to use, lacking in stencils, and basically unmaintained. Figma is a really powerful tool, but is too expensive unless you're a full-time UI/UX person (in which case, it's actually a good deal).
It's so great to have a powerful OSS prototyping tool - and one that looks like it's had thought put into it's own UI/UX. Can't wait to try this out and see if it meets my expectations, thanks so much for posting this!
Penpot looks incredible! I am super curious about design tools such as these but I have very little experience in the field. What is the workflow to get a design made with these working as a proper web or application? Even some pointers would be great. Sorry if the question is very basic.
Cheers!
- Someone come up with what something should do when X
- Designers create the UX and UI to support that feature
- Developers start reviewing the UX/UI, create a list of things designers/product managers forgot to think of when doing the design/product requirements
- Designers finishes the design
- Developers manually try to copy the design into code. How this happen depends a lot
In 90% of the companies, this is how I've seen it being done. Some places are trying to make that last step automatic nowadays, but the progress and results are nowhere near production-ready yet.
Let me know if you have more specific questions :)
Very cool but why do we have to use GUI "prototyping" (mockups) nowadays, why we can't compile a prototype straight into release code anymore like we did during the Delphi and WinForms days?
> why we can't compile a prototype straight into release code anymore like we did during the Delphi and WinForms days?
You probably can if you're making something with zero styling for one version of one OS on a 640x480 non-touch screen in one language that can't be deeplinked into from other applications for people with no accessibility requirements.
Ok, sure. Why can't we start with something that works with zero styling for one version of one OS on a [fixed resolution] non-touch screen in one language that can't be deeplinked into from other applications for [some people] and figure out if we're even building the right thing before we go "zOMG web-scale" and pretend we're making the next iPhone?
I'd also argue that "zero styling" means "standard controls" which often already have good accessibility, and everything (including accessibility?) can be added (re-written in?) after you have a winner.
We can and do start with things like that. E.g. bubble.io can be good. People also often start with Excel, or Google Forms and Google Sheets. Or just use a tool like pencil and go more design-first.
I'm an Architect and/or Tech Lead (depending on project), rather than a UI/UX person, but sometimes I work on smaller projects that don't have a UI/UX Designer assigned to them.
At the start of a project, I generally have several workshop meetings with relevant people from the customer. After finding out a bit about what they want, I use Figma to start building UI mockups - I can adjust these on the fly during calls, based on the discussion. Being able to make tweaks in seconds (basically in real-time with the conversation) is really important. Having these visualisations always helps generate/foster discussion.
It's mostly because of the job specialization - In a project, there is an engineer and there is a UX person. There are also UX-minded engineers and these people tend to skip the mock-up and just dive into the code. The semi-WYSIWYG editing in IDEs still aren't that bad.
Giving non-developers a communication tool that lets them compile their needs into a form developers can work with rather directly is extremely valuable to organizations.
Pencil is fantastic and I used it many times for visualizing architecture. It's one of the few good diagramming tools available on Linux. I think I've donated a couple times to support them.
That said, portability and collaboration are important to me which has drawn me to cloud solutions like draw.io.
I used this for a couple of years, way back. Grew tired of bugs and limitations, found WireframeSketcher and haven't looked back since. https://wireframesketcher.com/
draw.io is great for flowcharts and similar diagrams, but every time I've tried to mock up UIs with it I quickly find myself spending 90% of my time fighting snapping and being unable to do precise movements. Perhaps it's just me not knowing how to use it properly.
The github readme mentions that it used to be built on top of the old Mozilla XUL stuff but recently switched over to Electron. That's probably why it only ran on old FF.
Big fan of the sketches-only approach for those reasons, but more for getting the "client" to engage on usability and functionality before trying to nail look.
Hard to find fully convincing sketch only tools, but do have a decent set of sketch style templates and stencils for Omni Graffle on MacOS (such as Konigi's sketch stencils: https://konigi.com/blog/omnigraffle-sketch-stencils-now-avai... ) along with a subset of not-quite-architectural handwriting fonts.
With sketches the feedback from users, managers, stakeholders, and clients, is much more substantive and on track for iterating usability and flow.
> It's a pity that the tool hasn't gained much traction in the mean time.
The project’s very rough looking website is not helping. It’s hard to take a GUI tool seriously when your features page includes 90s style “clip art” as one of its billet points. I hate saying something negative about an open source project since it’s usually someone’s unpaid work, but if they want more traction, they’ll need help from someone with some design chops.
Pencil used to by my go-to tool, but over time it has slowly grown more complex and less useful. More recently, I am using Google Slides for quick GUI prototypes - if I need something more robust, I hire a designer, but my necessity for solid wireframes as a communication tool is low enough that it's not worth learning a new tool.
Similar to Sketch or Figma but Open Source https://github.com/penpot/penpot Have a try if you haven't! I wish one day I could replace my Figma workflows