Indie game storeFree gamesFun gamesHorror games
Game developmentAssetsComics

Some ideas for the Dotgrid UI and features

A topic by noa created Nov 10, 2017 Views: 967 Replies: 5
Viewing posts 1 to 5
(1 edit) (+2)

While using Dotgrid, I noticed a few things that could be improved.

  1. Not every action that has a hotkey has an icon. Not every action that has an icon has a hotkey. It's not that straight forward to remember all the controls.
  2. The third dot's location can be changed by clicking somewhere else on the grid, while the other two dots just stay in place until you hit Q, which will delete all the points at once.
  3. If you drew an arc in the wrong direction (e.g. counter-clockwise instead of clockwise), you have to press W and replace all the points before being able to try the other direction. This is also the case for drawing a bezel without knowing exactly how it will look.
  4. When the cursor is hovering over a line with a thick stroke width, you can't see it - the mouse cursor is lower than the dot cursor on the grid, so you have to guess where to click. Again, one mistake and you have to redraw three dots.
  5. If you make multiple projects but you want a consistent stroke width, you have to guess.
  6. If you don't have the correct software, exporting as .svg could be useless for you.
  7. The lines are cut-off in the corners. This is unexpected behaviour because the canvas seems to be bigger than the grid.

Now, some possible solutions for each point:

  1. Show a few icons at the bottomand make them all turn light gray when not needed, but group them: one icon for all the line types (and one button that will cycle through them instead of asdf), one icon to cycle through mirror modes (horizontal, vertical, both, none), one icon for toggling linecap (normal, short, round), one button to erase the last line, one to close the path and one to export. 5 icons. What about the rest? I'll get to them later. Oh, and the icons should also change when you use the keyboard, making it easier to learn them. You would also need to know less controls.
  2. The Q button isn't needed. Clicking somewhere after already placing 3 dots should just remove the first one and place a new last one. Right clicking could remove all of them, maybe.
  3. After placing your dots, just pressing the line button to cycle between straight lines, arcs and bezels should be possible. You should be able to do this as long as you want until you place new dots so that you can try all options. Using the back button will still always show the 3 dots of the line you removed last. 
  4. The part of the cursor that is on a dark background (the lines you drew) should become inverted and be light gray / white. Maybe add a dark mode to Dotgrid as well? :)
  5. What if there was an even easier way to change stroke width, AND it would tell you the thickness as a number? One way to do this could be to change it with the mouse scroll wheel, and displaying a number in a corner of the window or at the cursor while scrolling.
  6. You should be able to switch between exporting as .svg and .png (or .jpeg?). That would be really useful. Maybe it's to difficult to implement, I don't really know.
  7. The parts of the lines that exceed the border could be displayed in a light gray. When exporting, maybe make it possible to toggle between auto cropping to fit everything or to crop perfectly at the sides.

Btw, I really like Dotgrids minimalism! However, I believe these changes wouldn't make it less minimal, maybe even simpler (less controls, less icons, easier to use)

I hope that you will take these into consideration because it took some time to write :) (I also hope the english is ok)


Developer (1 edit)

On it :D Your english is great btw.


While I tackle for control point issues, if you want a dark mode, just download this repo. And drag the themes over Dotgrid.

The latest version already exports both a .PNG and a .SVG


Added multi-mirror modes!


The last version addresses most of your suggestions :)

Yeah, I saw it on Twitter! Awesome!