UI templates

[jmidt]

We need UI templates that contains color palettes, linewidth examples, etc. This is to make it easier to get started with UI design.

• For Illustrator
• For Inkscape

[timm052]

Hi Guys

Decided to have a stab at this as my first contribution since it's tagged as a good first issue. Tried to follow the UI guidelines as closely as possible so i hope i got the spirt of the ui correct. I also had a stab at porting it over to inkscape but am having issues getting it see the font so maybe someone who uses inkscape as their main application can get it going.

OTTO_UI_Template.zip

[jmidt]

I like this as a good visual explanation. Could you add some of the same elements to just a single 'screen' of the right size, so it would be a good starting point for converting to canvas code. I haven't done that myself, so I am not really sure how that works, though

[timm052]

Not sure what you mean by some on the same elements are you refering to the parameter values and names?

[jmidt]

Yeah, like a collection of typical things on a screen. So some text, some numbers, examples of lines and circles, the color palette. All on a single screen of the correct size.
My idea was that this would make it faster to go to something that can be converted to canvas code. But as I said, I haven't actually tried it.
It would be good to get Albert's take on this?

[timm052]

Yeah that makes sense give people something they can export right away and see how all the elements work.

On the issue of canvas code the UI design article in teh wiki links to the github for Ai -> Canvas where the latest release is only compatible with AI CC 2014 and gives instructions of compiling the plugin youself which i have been unable to sucessfully do. However if you go to the guys blog he has precompiled plugins for CS6, CC 2014 and CC 2019 along with a nice little introductory tutorial would be a much better idea to point people directly there https://blog.mikeswanson.com/ai2canvas

[jmidt]

That's a good point. I have edited the wiki so that link comes before the github link.

[timm052]

I've put a little time looking into how canvas works and based on it's need for specific layer names and structure for correct exporting I think it would be too confusing to have the canvas components into a template for people who would not be familiar with java script and would make it quite confusing to work with. As such i think the best approach would be to have a basic and advanced template the basic template would be ideal for graphic designer interested in helping out with designs but no real understanding of the javascript while the advanced template would include a screen set up for export to the html canvas with the specfic formating style requirements of the coders (not sure what those are).

Eg. seeing this kind of thing in a template might be a little intimidating if you're just wanting to do a basic design

[jmidt]

I think that's a good plan. So far it has not been possible for us to make templates that work 'out-of-the-box', i.e. without some heavy rewriting after exporting it to canvas, to get it to fit into OTTO. This is not so bad as it sounds, since it actually doesn't take as long as you might think.
So a basic template that puts everything in the right place with the right colours, is already 80% of the work done.
If it's possible to configure something that will use the correct namespaces for colors, and nanocanvas-functions - that would be amazing, but I suspect that it is more trouble than it's worth