I have some ui I'd like to design. I'd like to get to the professionalism of art that is found on sites like dribbble.com. I eventually just need an image for the design I make.

I'm just wondering if I should do it with html/css (and take a screenshot) or use a vector program (my current favorite is graphic by autodesk, it works like illustrator for those that aren't familiar with it).

But what I've found difficult about designing with a vector program is let's say I'm designing a table (ie datagrid), and then I want to change the size of the rows; with a vector application I need to go and change every little vector box that makes up that grid, align the whole thing, etc.

Whereas with html I can just change the code really quick (size of rows) and see the result without as much work. So I'm just wondering for ui designers if they ran into this issue and what have they done? maybe there's something I'm missing?

  • 1
    Hello @foreyez. Unfortunately, this crosses into the implementation domain (i.e. specifically how to work with tools to accomplish a task). These questions aren't currently considered to be on topic for this stack. If you'd like, you might search on the web for articles comparing creating wireframes in vector programs vs web technologies. Good luck! – maxathousand Aug 13 '18 at 21:33
  • @foreyez if you initially have done the wireframe and finalized the wireframe designs, then the design as in dribble.com can be easily done in your graphics tools. But if you are in a stage that your wireframe is not the initial requirement tool, then your graphic design needs frequent changes. So, based on the capability and how comfortable you are with the tool, choose HTML/CSS or graphic design. – NPN Aug 14 '18 at 0:01

From my experience, I have realized that it unless you know what exactly you want it takes a lot longer to code in HTML/CSS than a vector art software. I understand your concern about having to change repetitive components. I would suggest you have a look at some modern vector softwares like Figma, Sketch. These softwares allow you to create components and its instances. If you change the master component, all its instances would reflect that change. They even have some smart padding options.


You can achieve this using components in Figma for example but if your HTMl/CSS skills are strong enough that you feel it would be faster to build it in code then do that. The best tool is the tool you know best.

Framer X also solves this use case quite nicely but is currently in invite only beta.

  • yeah my html/css skills are strong plus I type fast so using that for now. but I may look into these programs you've listed they sound interesting. – foreyez Aug 14 '18 at 19:58
  • Yeah I often find for certain projects prototyping in code is faster and more efficient depending on the needs of the team(s) i'm working with. You might be interested in screely.com for after you've taken your screenshots – Julian Aug 14 '18 at 20:06
  • love it! thanks. You think it's possible to get to the quality of dribbble with css/html alone though or does vector make it crispier? – foreyez Aug 14 '18 at 20:09
  • 1
    Wouldn't you rasterize the vector file before you uploaded it to dribble? If you need Vectors of html/css though this question might be up your alley: stackoverflow.com/questions/12005860/… – Julian Aug 14 '18 at 20:11

Not the answer you're looking for?Browse other questions tagged or ask your own question.