GUI design

[Spogg]

Hello playmates!

I thought I’d open this topic to cover any aspect of GUI design you lovely folk might like to share. Could be anything from a link to a full blown tutorial on your chosen subject, or maybe a useful tip or trick.

Stuff like:

Knob design
Layout best practice
Relative scaling of control element sizes, text and plugin size etc.
Ideas for “borders”
Methods for creating appealing backgrounds
Workflow from first idea to final release
Choice of colours used
“How I did this” step by step guides
Favourite programs for design and/or good plugins to use with them
Online resources for any aspect
Basically anything you think might add something of value, in terms of GUI design and practice, and are willing to share.

I would ask that you don’t simply upload your work to this topic without any instructive element. You can show off your work but please give some insight into how your work was created, what decisions you made and also what you rejected.

Some guys have posted information on this subject before, so it would be good to get a topic link or even a re-post here.

I do hope this will be welcomed and supported.
I feel we could make a great collection of helpful and inspirational material.

Cheers

Spogg

[Nubeat7]

Here is the link to my gui toolkit with some useful stuff.
viewtopic.php?f=3&t=6383

[tulamide]

Here's a thread I started 3 years ago or so. It even has the same title. Keep reading, because it gets better and better, and you'd really miss a lot when ignoring this one!

http://www.dsprobotics.com/support/viewtopic.php?f=2&t=3750&start=0

[Spogg]

Here's a thread I started 3 years ago or so. It even has the same title. Keep reading, because it gets better and better, and you'd really miss a lot when ignoring this one!

http://www.dsprobotics.com/support/viewtopic.php?f=2&t=3750&start=0

Oh dear

I did a search first but it didn't hit that topic for some reason but now I remember!
I shall re-read those posts, and many thanks for adding the link.

Do you think I should delete my topic and just bump that one?

Cheers

Spogg

[tulamide]

Do you think I should delete my topic and just bump that one?

Of course not! That thread was heavily "moderated" by myself to stick to just a few topics (layout, coloring). It doesn't enclose things like programs for drawings, tools to create knobs, etc. I strongly feel that this thread is a more general one, that points to the other one as an aspect of many.

[Phil Thalasso]

Hello all,

I am working mostly with Adobe's Creative Suite (Photoshop, Illustrator and After Effects) feeding results either into Knobman or a bitmap strip directly into a FS module.

A free alternative to Photoshop could be Autodesk's Sketchbook (http://www.chip.de/downloads/Autodesk-S ... 65414.html) and for vector work (Illustrator) it could be Ink Scape (https://inkscape.org/de/).

A good tool for a cad-like approach is google-sketchup (https://www.sketchup.com/de). With that free program you can "tool" your knobs and buttons, whatever, and colour them in sketchbook.

There are tons of tutorials on youtube on how to create all sorts of graphics potentially useful for flowstoners.

As far as colour theory is concerned, the following may be helpful: https://monoskop.org/images/4/46/Itten_ ... _Color.pdf

A useful book on layout may be: https://monoskop.org/images/a/a4/Muelle ... no_OCR.pdf

Posting these links should be ok, as both books have long been out of print.

I must say, however, that for colour choice I use a sneaky simple trick that produces eye-pleasing results for me.

Maybe you want to try the following: Find any photograph that colour-wise is appeling to you, for example on tumbler, like here:

https://iamthereluctantoptimist.tumblr.com/archive (caveat, may occasionally contain nudity, Photos are grouped by colours, blogger displays strong political beliefs)

or

https://waternymph55.tumblr.com/archive (contains lots of nudity, blogger displays strong political beliefs)

and just pull the colour-set from it with the photoshop eye-dropper tool. Sounds like cheating? Well, I leave that up to you to decide.

Edit: Here is a link how you can do that using Lightroom and Photoshop:
https://create.adobe.com/2018/8/14/spec ... speci.html?


With great interest I read the thread Tulamide started in 2015. Maybe you want to have a look at the following links too:

https://www.quickanddirtytips.com/educa ... i-sequence

and / or:

https://www.intmath.com/numbers/math-of-beauty.php

and finally:

https://www.interaction-design.org/lite ... principles

Ya'll have a good sunday

Regards
Phil

[Spogg]

WOW Phil!

What a great post with loads of links.

Many thanks for taking the time to do that.

Cheers

Spogg

[Phil Thalasso]

Hello all,

I did some net-mining and found the following link to an old Adobe Creative Suite which Adobe offers for download. The serials for activation are included. CS2 is over ten years old, but hey, you still can work with it in terms of GUI design.
So, if you want to take a look and try for yourself, here's the link:

https://helpx.adobe.com/creative-suite/ ... d=19SCDRQK

It says on the Adobe page that cs2 is limited to windows xp and previous windows versions. I just installed it on an old windows 7 64 bit machine and it's working.

For those who want to give it a try:

https://www.webpagefx.com/blog/web-desi ... photoshop/

I also came across the following link that serves as a hub to free online-material on the subject of user-design. I did not try all links, but some of them. Maybe you find that interesting too:

https://userbrain.net/blog/free-ebooks- ... #ui-ebooks

And finally this one, which is not a complete book on-line, but offers interesting sample pages.

I wish you all a good week-end.

Regards
Phil

[Spogg]

Many thanks Phil

Now I just need the creative talent

Cheers

Spogg

[nix]

My programs I use are:
PS- the staple, combining filters can be freakish
Illustrator- I export vector curves from pen lines here
PNG stitch- stitch animations
AWicons- all u need for icons. A cheat is just to make the biggest one 2048 or 4096
3DS Max- intuitive 3D
Knobman- the JAVA version is broken, I think it's v 1551 that is the latest native one and won't frustrate like the Java one

Honourable mentions: Xara(vector drawing)Blender(3D)