Improve supportive images of GUI in documentation

[ninavizz]

The problem you're addressing (if any)
In #6135 I noticed that some of the illustrations in the documentation to break-down and clearly identify UI components unique to Qubes, are a bit unclear. As such, I thought I'd share in here some that I made last year, for a turorial. cc'ing @deeplow should you have interest, too.

Describe the solution you'd like
Where illustrations exist in the docs that do not with 100% certainty clearly point-to and identify a named component, and with a clean visual hierarchy—replace with one of these, or communicate a request in this ticket for me to make new ones?

Where is the value to a user, and who might that user be?
Clearer images to break-down a new GUI to folks in documentation are always helpful. :)

Describe alternatives you've considered
Crying.

Additional context
Made these last year for a QubesOS training for non-technical journalist users, and am happy to make new/additional ones as documentation needs arise.

Qubes101-2021.zip

[andrewdavidwong]

Very nice!

@hackerncoder, would you be willing to submit a PR that uses these images where appropriate? I ask because you're probably the most familiar with the current locations of Qubes screenshots right now. 🙂

[hackerncoder]

Seems I have become the master of the images... Yes, I'll take a look.

Describe alternatives you've considered
Crying.

Thank you for making me laugh.

[ninavizz]

Thx fellas!

@hackerncoder I just looked briefly at two of the PNGs, and realized that with the updated UI the components weren't clearly enough visible through my highlights. Fixed that, in the attached PNGs here. Apologies for bein' a yo-yo, hopefully I have a credit in your bank for the laugh.

[hackerncoder]

Qubes only comes with one sys-whonix, so there is only one Whonix Time sync in the tray.

Edit: Which is gray.

[hackerncoder]

We don't show anything like CDD, NM, QU, or Whonix (from your zip file), however they are very nice and I think we should add them or something similar.

[ninavizz]

LOL @hackerncoder I have no idea what CDD, NM, or QU are. Sorry, I got involved in Qubes via another project I work on (SecureDrop) that is built on top of Qubes. I just do wireframes and research to hand off to engineers so they can write code to make things usable, to what the system architects spec and build into the packages. Happy to provide updated screenies with only one SysWhonix, and with the other stuff omitted.

Is the other stuff in the App Menu slide?

[hackerncoder]

Well, I just took the names in your zip file and shortened them (e.g. ClipboardDomainsDevices.png = CDD). I am especially looking at CDD, very nice, IMO we should really add that (or similar).

I'm not quite sure what you mean with App Menu slide?

[ninavizz]

@hackerncoder slide = corporate American jargon for "images."

Ok, so there's nothing to explain the Tray tooling in the documentation—it's not UI elements in my customized setup of Qubes (other than the dual whonix qubes) that's at issue?

[hackerncoder]

Nope, there isn't anything to explain the tray items other than the one you saw in #6135. No issues with your setup, not for tray and toolbar at least.

With a new tray region image with only one whonix time-sync it should be mostly drop in replacement for qubes-attachment wiki/GettingStarted/r4.0-q40_widgets.png.

As for the toolbar, we don't show it by itself like in your image.

[deeplow]

Seems like I'm late to the party. Thanks @ninavizz for these goodies. Seems like @hackerncoder (the master of images) will be taking the job.

I also feel the need for moar pictures on the docs. Made one the other day:

But it's not as neat as @ninavizz's.

If as part of the integrated tutorial I'm working on (#1395) I produce some interesting images, I'll share as well to the docs.

[ninavizz]

@deeplow I studied graphic design, I can't help it, lol! Not at all late to the party, you started the party on the Qubes side! I also only did the ones I'd done, because our trainers at FPF used images already in the Qubes docs, for our journalist training programs... and, well, they were much more difficult to understand in that context.

A party's a party, and you're the DJ of this one. Dance on!

[hackerncoder]

Hey @ninavizz what program do you use to make images like that?

[ninavizz]

@hackerncoder Sketch, usually. Sometimes Photoshop. Whichever will bog down my computer less, which is usually Sketch.

I also use a Mac as my daily-driver, and have been using Adobe tooling on a Mac for +30yrs... so more use it when I do because it's a brainless default, than because I have some affinity for Adobe or luxury laptops. I actually kind of detest Adobe, for all the same reasons most FOSS folks do (and because they have zero interest in prioritizing system performance for users). It's just easier for me to use as few tools as possible—and you can't do advanced pre-press/printing stuff with libre tools. Many designers in FOSS use Figma, which I've tried but find to be problematic for various reasons.

If you have Sketch or Photoshop or other tools that could import my files, I'd be happy to share 'em with ya! :)

BTW, this is the double-Whonix-free update on that Tray menu. Sorry to suck at getting it to you more timely!

[deeplow]

If you have Sketch or Photoshop or other tools that could import my files, I'd be happy to share 'em with ya! :)

@hackerncoder there is also photopea.com which is essentially photoshop but browser-based. 99% of the functionalities one would ever need are present. Plus it opens and exports to photoshop assets (.psd) as well as many other formats.

[hackerncoder]

@ninavizz I don't know if I have any, of course I can always use photopea for photoshop, but yes if you would share them that would be nice.

[ninavizz]

@hackerncoder Figma would probably be the easiest way for me to share stuff, tbh. I curse at it, but moreso dislike the operating silo my bouquet of proprietary software boxes me into. Photoshop I only use these days when needing to do elaborate doctoring of screenshots. For the multi-layered stuff, Figma is the way to go. I'll put something together over the weekend.

@deeplow That is a RAD tip, thank you! The fancy preepress stuff it won't have, but tbh 99.999% of folks just never need that part of things (and for digital, nobody does, lol).

[ninavizz]

Ok! @hackerncoder @deeplow I have the stuff up in Figma, now, but have to figure-out how to get my sweet proprietary fonts up there. Nope, I am not a fan of open source fonts. If that won't work, I'll switch to using some open source fonts. Yes, I like to ensure type designers get paid. It's a very specialized craft, and one it takes years for people to become good at. Anyone can make a font, but few make them well. And yes, I am a type snob, lol.

Will post the share link here, once I've got the font stuff figured out. :)

[hackerncoder]

Wow, already a month. As always time flies. I can see you have a lot on your plate, so no rush @ninavizz.

[ninavizz]

Aack! Yes, the appmenu user research proved to be quite the time-bandit. This, and the community-created Simple User Guide, are both on my radar, though! Catching up with another patient client this week, tho. :D