Support

If you have a problem or need to report a bug please email : support@dsprobotics.com

There are 3 sections to this support area:

DOWNLOADS: access to product manuals, support files and drivers

HELP & INFORMATION: tutorials and example files for learning or finding pre-made modules for your projects

USER FORUMS: meet with other users and exchange ideas, you can also get help and assistance here

NEW REGISTRATIONS - please contact us if you wish to register on the forum

GUI design

For general discussion related FlowStone

GUI design

Postby Spogg » Thu Jun 21, 2018 4:21 pm

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
User avatar
Spogg
 
Posts: 3318
Joined: Thu Nov 20, 2014 4:24 pm
Location: Birmingham, England

Re: GUI design

Postby Nubeat7 » Fri Jun 22, 2018 2:36 pm

Here is the link to my gui toolkit with some useful stuff.
viewtopic.php?f=3&t=6383
User avatar
Nubeat7
 
Posts: 1347
Joined: Sat Apr 14, 2012 9:59 am
Location: Vienna

Re: GUI design

Postby tulamide » Fri Jun 22, 2018 3:52 pm

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
"There lies the dog buried" (German saying translated literally)
tulamide
 
Posts: 2686
Joined: Sat Jun 21, 2014 2:48 pm
Location: Germany

Re: GUI design

Postby Spogg » Fri Jun 22, 2018 5:14 pm

tulamide wrote: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 :oops:

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
User avatar
Spogg
 
Posts: 3318
Joined: Thu Nov 20, 2014 4:24 pm
Location: Birmingham, England

Re: GUI design

Postby tulamide » Fri Jun 22, 2018 5:36 pm

Spogg wrote: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.
"There lies the dog buried" (German saying translated literally)
tulamide
 
Posts: 2686
Joined: Sat Jun 21, 2014 2:48 pm
Location: Germany

Re: GUI design

Postby Phil Thalasso » Sun Jul 01, 2018 8:52 am

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
Last edited by Phil Thalasso on Tue Sep 04, 2018 7:16 pm, edited 1 time in total.
User avatar
Phil Thalasso
 
Posts: 148
Joined: Tue Jun 27, 2017 12:42 pm
Location: Munich, Germany

Re: GUI design

Postby Spogg » Mon Jul 02, 2018 8:42 am

WOW Phil! :o

What a great post with loads of links.

Many thanks for taking the time to do that.

Cheers

Spogg
User avatar
Spogg
 
Posts: 3318
Joined: Thu Nov 20, 2014 4:24 pm
Location: Birmingham, England

Re: GUI design

Postby Phil Thalasso » Fri Jul 06, 2018 9:52 am

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
User avatar
Phil Thalasso
 
Posts: 148
Joined: Tue Jun 27, 2017 12:42 pm
Location: Munich, Germany

Re: GUI design

Postby Spogg » Fri Jul 06, 2018 10:39 am

Many thanks Phil :D

Now I just need the creative talent :lol:

Cheers

Spogg
User avatar
Spogg
 
Posts: 3318
Joined: Thu Nov 20, 2014 4:24 pm
Location: Birmingham, England

Re: GUI design

Postby nix » Sun Jul 08, 2018 6:38 am

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)
User avatar
nix
 
Posts: 817
Joined: Tue Jul 13, 2010 10:51 am

Next

Return to General

Who is online

Users browsing this forum: No registered users and 45 guests

cron