Web UI design tools
-
@Pete-S said in Web UI design tools:
https://youtu.be/S6-q5BheEYU?t=63
As I understand the guy is using a software called Sketch to modify UI elements.
It's macOS only though.Is there something similar for linux or windows?
Oh we use that thing alot in my company, and we are the leading Drupal company in the entire MENA
-
I've always stayed away from these types of tools. They always add way more complexity/elements than are needed. Sticking with Frameworks like CSS Grid, Flexbox, Zurb, Bootstrap, etc and theming from those are cleaner IMO.
-
@stacksofplates said in Web UI design tools:
I've always stayed away from these types of tools. They always add way more complexity/elements than are needed. Sticking with Frameworks like CSS Grid, Flexbox, Zurb, Bootstrap, etc and theming from those are cleaner IMO.
Me too. Not totally opposed to them, but rarely decide that I want to use them. Having a good one available would be nice, though. Especially on Linux.
-
@Pete-S what is the exact intended use case for this? Sketch can be used in several different ways, and I don't want to recommend something (or suggest something, I'm in no position to recommend a tool of this nature as this isn't in my skill scope) that does the wrong feature set.
-
@scottalanmiller To test out different designs and tweak them visually - instead of hacking css directly. It looked easy in the vid above.
-
I also kind of assumed that Sketch would work with the CSS directly.
-
@Pete-S said in Web UI design tools:
I also kind of assumed that Sketch would work with the CSS directly.
That would be cool. But as CSS can be automatically generated and doesn't itself contain the components, I'm not sure what Sketch would be doing.
-
OK, after some searching I found that the equivalent tool for windows is Adobe XD. XD is cross platform but it's a vector based UI designer tool, like Sketch.
It seems like since they are both general tools for UI design (apps, web, whatever) they are not specifically made for editing CSS, which I had hoped. Still useful though to get the design visually done, before working on the CSS.
-
@Pete-S said in Web UI design tools:
OK, after some searching I found that the equivalent tool for windows is Adobe XD. XD is cross platform but it's a vector based UI designer tool, like Sketch.
It seems like since they are both general tools for UI design (apps, web, whatever) they are not specifically made for editing CSS, which I had hoped. Still useful though to get the design visually done, before working on the CSS.
Vector tools means that it is drawing app, which is for artists to envision an interface. But useless for making the interface itself. So for that, which is what I was wondering, Inkscape is the common choice.
-
@Pete-S
I'm not sure of the generated CSS quality. I mean, tools can generate CSS but it is usually "machine CSS", not something intended to be easily modifiable by the developer.
I'm playing with Pinegrow, working directly on the HTML/CSS. I like it a lot. -
@dave_c said in Web UI design tools:
I'm playing with Pinegrow, working directly on the HTML/CSS. I like it a lot.
Not too expensive. What are you making with it?
-
@scottalanmiller
We are developing an Student information System for a customer. Pinegrow + VS Code are a nice combination -
@stacksofplates said in Web UI design tools:
I've always stayed away from these types of tools. They always add way more complexity/elements than are needed. Sticking with Frameworks like CSS Grid, Flexbox, Zurb, Bootstrap, etc and theming from those are cleaner IMO.
I think when you have clients and you wish to work with regarding the design and prototyping, you can use those tools to give them power to view and edit better . thats what i understood.
-
@dave_c Just looked at Pinegrow and I think its interesting. Will try it out eventually.
-
@jmoore
I am not a designer, I am a programmer. But when doing web based software I like to see what I am coding while I am coding it. Pinegrow is wonderful for that. You have access to the full power of HTML & CSS
And it is great if you use Bootstrap or Foundation because it has full support for them. I prefer Bulma, and it works well with it because Pinegrow is a general purpose tool.
I will stop now, as I feel like I am selling something -
@dave_c lol, thanks for the insight though. I love a good tool
