Well, I know there are no plans to redesign the pinegrow UI, but it’s kind of fun to think of a new way…
I sincerely believe that pinegrow would gain a lot if its UI was redone, maybe it’s my impression, but I believe that this is what is missing, because it’s really mysterious how little known this tool is… maybe a new look would help.
I tried to compress and make it cleaner but without going too far with this layout.
In no way do I believe that this is the best way to do it, but these days I was excited and decided to draw something without much pretension.
This post from 6 months ago offers UI design criteria restrictions for Pinegrow, maybe you’ve already seen it.
Indeed a puzzlement given all that is presently offered by Pinegrow. It seemingly continues to struggle gaining widespread positive recognition throughout the design / development community at large.
That’s a tasty UI, congrats @lucaspchara. I also think that the current interface would benefit from a little coat of paint, at least. A formal UX audit wouldn’t hurt either. I don’t know if something like that has already been done, but It would be nice to match the UI choices with actual user behavior and expectations, in a controlled setting.
The response I get from almost everyone I recommend Pinegrow is that the user interface is quite overwhelming.
Most designers don’t want to mess with code, and developers often want to work with IDEs and terminals. Pinegrow sits in the middle of that, so it’s naturally challenging to reach its typical user, a “visually oriented developer”. We have a job market where professionals are quite siloed in their ways of working, specially in the enterprise environment.
But I have seen some movement in the design community towards adopting more coding into the process, to better integrate with engineering. Even Figma, with its new variables feature, is slowly moving in that direction. Some people are even proposing to simply remove the handoff phase from projects, working with real code from the start.
If this is the future of the UI/UX design market, Pinegrow would be a good fit, I think.
Many tools have already emerged in this space in the last 5 years. Some went defunct and disappeared, others are still private beta/alpha or went stagnate altogether, some have been bought out, while others have changed their scope and premise entirely, lastly a few persist. The one thing congruent about all of them is/was the effort to find conciseness of visual and code as to not inundate the user or get in the way of either facet of execution, while seeking to allow each side to derive the same outcome.
The chasm between design and development certainly persists even with so many tools continually trying to bridge the gap. @matjaz mentioned his desire to condense the gap from the design perspective but it was last mentioned close to four years ago. Perhaps it was determined to not be congruent or fit with Pinegrow’s core intentions.
Even so, each aspect has slowly continued to improve in various ways since the initial inception of Pinegrow. From either perspective a person willing to become familiar with the Pinegrow UI/UX can certainly find benefit. Though each of these aspects within Pinegrow can assuredly still be improved further to reduce the burden and improve overall efficiency. However an evident gap will inevitably remain for each groups requirements regardless.
Indeed Pinegrow overall is already uniquely positioned to more adequately bridge this chasm of dichotomy eventually. No easy task however as the divide seems about as old as time itself, with expectations and mindset entrenched on both sides, the struggle rages on.
I’m fundamentally happy with the flexibility and organization of the UI. A facelift would be nice, and I wholeheartedly think that it needs to be more a11y friendly since it’s literally impossible to use without a mouse, but overall I think it works well once you know where things are and what they do.
The bigger issue, in my opinion, is that it’s overwhelming to new users, especially those who are already struggling with their HTML and CSS skills. There are so many panels, options, choices, and decisions to make with very little handholding.
Take the margin and padding control, for example. The tab order was probably set by a drunken sailor, but it’s otherwise exactly what I need and nothing I don’t need. There are no pre-defined units constraining me, it’s visually easy to see the box model, and the equals signs make it simple to set one value and use it for all sides. Plus, the logic behind the scenes even converts to shorthand syntax.
Compare it to this abomination from Webflow, and you’ll see how much more efficient Pinegrow’s control is as long as you know what to put in those little boxes.
And even Brick Builder for WordPress uses two controls for some unknown reason.
And this is just one example.
Is the Pinegrow UI perfect? Not by a long shot. Can it be improved? Absolutely! I would hate to see any UI changes come at the expense of efficiency for the sake of beginner-friendliness or take away from other critical fixes/features the team is working on.
@lucaspchara thank you for the UI proposal! Appreciate the work you put into it, and for taking action instead of complaining about the current UI
A similar topic came up a while ago with @kpirkovic redesign initiative. At that time I said we are interested in the redesign, but will have to wait for a couple of important features (AI Assistant) / products (Vue Designer) to land. Which did actually happen now, with a slight six months delay.
UI redesigns are tricky, as evident from this thread. They tend to disturb the familiarity, which when it comes to Pinegrow, was hard won through a steep learning curve. But they can benefit users who are just starting out.
What is the main pain point with the current PG UI: is it the actual design (colors, icons, labels…) or the complexity of the UI (lots of panels, properties, functions…)?
To be honest, I think it’s a mix of both. This is entirely my personal opinion, of course, without any knowledge about what the user base would think about it. So, take it with a grain of salt, but I would say that the UI already feels a little bit outdated.
I’m specifically referring to the aesthetic side of it, which some may not consider the most crucial aspect. However, it’s indeed the kind of thing that influences first-time users the most, igniting their initial desire to engage with a tool they’re just starting to learn.
The choice of icons, colors, typography, and the app’s overall flair play a significant role. It determines how it is presented in comparison with other options in the field. In a way, it’s part of a branding/marketing problem that could positively impact the issue of complexity.
Speaking of complexity: Pinegrow is a professional tool. Considering its unique approach to web development, a high level of complexity in the UI is expected. I don’t think there’s any way around it in this case.
Simply removing options would turn it into a tool for hobbyists with entry-level knowledge of the web. There’s nothing against that, but there are already numerous tools targeting those types of users.
However, its peculiar approach poses challenges for people who are just starting out in the field, especially considering that Pinegrow is not as widespread as it deserves to be.
Of course, a UI redesign would not solve this on its own, but anything that can make the app more attractive and inviting to users helps.
Personally I really think Pinegrow has a significant marketing problem. Especially now that Vue designer is released. It is not clear whether this is a standalone program or a plugin for Pinegrow. Combine that with all the other products about which the website also does not make any distinction whether they are standalone or plugin product. This needs to be streamlined first. I would suggest using Pinegrow as the company name (or perhaps emphasise it a little more as “pinegrow studios” or something like that) and renaming the individial products with their own name.
Pinegrow webdesigner could become: PineWeb
Vue designer: PineVue
Pinegrow Wordpress plugin: PinePress
Pinegrow snapshots: PineShots
Pinegrow theme converter could become:
And then the plugins could be named like this (as they are all connected to PineWeb):
Well stated @marc_io, I had planned to echo the very same sentiment concerning the UI aesthetics not being a trivial aspect regarding the potential unconscious impact relating to (new) user engagement.
I won’t speak on complexity, though various aspects remain concerning opportunity for workflow simplification if so desired.
In general they themselves have historically stated and acknowledged this being the case.
For me, the most important thing is aesthetics. Around the same time I learned about pinegrow and webflow and decided to go with webflow. One of the reasons was aesthetics. Of course, now I regret not choosing pinegrow. What I like about the webflow interface is the high readability of the icons.
I also really like contextuality, which means that, for example, when working on a display block, I don’t have to scroll through all the flexbox options.
In the pinegrow interface, I am missing a clear indication of the css values that are changed in the current css rule. In webflow, given elements are simply highlighted in color, which speeds up their viewing and editing.
The biggest problem for me is handling breakpoints in pinegrow. The interface is not very clear to me. I’ve noticed that it takes me a long time to figure out what I’m actually doing.
Pinegrow, on the other hand, has a much more customized interface. I can work on two monitors and adjust the panels to my preferences. This is great and webflow is far from such a solution.
I think as @adamslowe stated the UI can certainly benefit from an update, but some of the efficiencies that ‘visual developers’ (like @marc_io) mentioned aren’t helped by some ‘for design only’ purposes. For me the hardest part is a clean recognizable layout that clearly defines its own panel sections. I have to identify which barely visible graphic corresponds to what type of css adjustment for example. The ‘Redo’ icon looks too similar to the ‘Reload’ icon, but those things are 'relativly easy" fixes. There is a lot of wasted space in the viewerwith the padding between that and the next panel. While I can almost drag every panel around not all will fit where I’d like em to be. But thats just me.
Much worse the the window management as a whole since its not a native app, so I can use anything other than predefinded (and not to my liking) keyboard shortcuts or a mouse.
I do like that I can edit code and see it reflected immediately. I do like the lastest CSS display, but they are still a bit “off” to me as I prefer to work with css or better yet partials in scss/sass. But a great step forward.
The fact that when I unplug my monitor to go mobile on my laptop and my rearranged windows are now no longer visible and can’t be dragged (their are off screen) forced me to use a prebuilt workspace, and due to the wasted space don’t really fit my smaller 14in laptop. But changing the method of window management is a bigger undertaking, if not huge. I think i’d be much advised to streamline the existing interface, add custom keyboard shortcuts to anything (much easier said then done I’m sure) and just clean up some of the iconography / UI / color usage. The breakpoints vs device choices might be addressed better.
Compare that to VScode and its need for full fledged server running just to display and HTML file this is nicer. While that works, it certainly removes all the visual aspects, which I do think are important. But thats just my experience with Pinegrow and I am having a hard time with it in general, maybe because of my dev background… Just my 2 cents…
Doing a re-design will be a puzzle, taste is a very different thing for many people.
For me, I agree that clearer icons would be welcome.
But my biggest issue is the fluidity and speed, since I switched from webflow to pinegrow, until today I always felt that I work slower in pinegrow, but this is not just a UI issue…
Some points that come to mind would be:
Lots of unnecessary information.
There are many things that appear (mainly in the style tab) that I never, or rarely use, and that I think it would be interesting to have a “see more” option so that it would be faster to find what I’m really going to edit.
compress information
There are many items that could take up less space, in addition to avoiding blank spaces
better organization
I know that everyone will think differently, but flex box, for example, is at the bottom, for me it should be at the top because I use it a lot more than other things
Currently I’m already used to the UI the way it is, I like the idea of a different design, but I agree that I would rather have other improvements first than purely design…
