Create better branding / marketing design for Qubes

[bnvk]

This is a large in scope issue / goal and something I am working on at the moment. I am filling this issue as a place to track and post my progress along on the way and for the community to review / offer feedback. Will be posting soon!

[bnvk]

I've created a first pass at a variations of fonts, colors, and styles for the Qubes branding. To explain this part of my design process: this is a simple template to easily compare different styles in a rapid & easy way. I hope to get feedback / favorites / etc... from the rest of the team on which "styleboard" seems to be a favourite or which one needs more exploring. From there, I will apply these styles to the actual site designs & icons I have been working on.

[bnvk]

I've created a first pass at a variations of fonts, colors, and styles for the Qubes branding. To explain this part of my design process: this is a simple template to easily compare different styles in a rapid & easy way. I hope to get feedback / favorites / etc... from the rest of the team on which "styleboard" seems to be a favourite or which one needs more exploring. From there, I will apply these styles to the actual site designs & icons I have been working on.

[mfc]

styleboards 1, 2, and 3 are all nice in different ways. 1 is most similar to current style, 2 is the most chill (probably my favorite). Both 2 and 3 have a three-tone Q while version 1 has a two-tone Q, I prefer the two-tone Q.

font-wise they both seem fine, the open sans Q is very different from the logo, Ostrich may look a little more like the logo. I dunno if that's what you're going after.

love the filler text :)

[mfc]

styleboards 1, 2, and 3 are all nice in different ways. 1 is most similar to current style, 2 is the most chill (probably my favorite). Both 2 and 3 have a three-tone Q while version 1 has a two-tone Q, I prefer the two-tone Q.

font-wise they both seem fine, the open sans Q is very different from the logo, Ostrich may look a little more like the logo. I dunno if that's what you're going after.

love the filler text :)

[bnvk]

Both 2 and 3 have a three-tone Q while version 1 has a two-tone Q, I prefer the two-tone Q.

@mfc correct. The idea for a three-tone Q came to me while at OTF when we discussed the idea of switching the term "VM" to "Qube" and I had this vision of a big spinning qube with different colored sides that then each represent different "Qube" sections. This also builds on top of the idea of Style 3 & 4 which draws upon the colored borders.

Ostrich may look a little more like the logo. I dunno if that's what you're going after

I suppose I could try some of the more colored versions with Ostrich as well. I'll wait to hear @rootkovska and @marmarek thoughts first!

[bnvk]

Both 2 and 3 have a three-tone Q while version 1 has a two-tone Q, I prefer the two-tone Q.

@mfc correct. The idea for a three-tone Q came to me while at OTF when we discussed the idea of switching the term "VM" to "Qube" and I had this vision of a big spinning qube with different colored sides that then each represent different "Qube" sections. This also builds on top of the idea of Style 3 & 4 which draws upon the colored borders.

Ostrich may look a little more like the logo. I dunno if that's what you're going after

I suppose I could try some of the more colored versions with Ostrich as well. I'll wait to hear @rootkovska and @marmarek thoughts first!

[rootkovska]

1. I like the three-tone Q over the two-tone one. It makes the 3D effect (which is quite a cool thing IMHO) more noticeable.
2. Color-wise: storyboard 01 or 02.

[rootkovska]

1. I like the three-tone Q over the two-tone one. It makes the 3D effect (which is quite a cool thing IMHO) more noticeable.
2. Color-wise: storyboard 01 or 02.

[marmarek]

Generally I like 02, but it looks a little sad.

[marmarek]

Generally I like 02, but it looks a little sad.

[rootkovska]

Yeah, a bit IBM-ish...

[rootkovska]

Yeah, a bit IBM-ish...

[bnvk]

Generally I like 02, but it looks a little sad... Yeah, a bit IBM-ish...

Lol. I based that palate on the "Disk encryption login screen" which I felt was the nicest bit of design in the current Qubes. That's good feedback though. We definitely don't want to be sad & IBM-ish, as Qubes is way more exciting!

Here is a slightly tweaked version of that + colors from 03. My thinking is that I can work those colors in throughout the website + ideally use them within the OS itself to create a nice harmonious user experience!

It seems like 02 is a winner amongst us four, so considering that (plus these color additions), I think i'll start plugging them into the actual site designs and architecture diagrams I've been working on unless any of you really want me to do more exploring like this!

[bnvk]

Generally I like 02, but it looks a little sad... Yeah, a bit IBM-ish...

Lol. I based that palate on the "Disk encryption login screen" which I felt was the nicest bit of design in the current Qubes. That's good feedback though. We definitely don't want to be sad & IBM-ish, as Qubes is way more exciting!

Here is a slightly tweaked version of that + colors from 03. My thinking is that I can work those colors in throughout the website + ideally use them within the OS itself to create a nice harmonious user experience!

It seems like 02 is a winner amongst us four, so considering that (plus these color additions), I think i'll start plugging them into the actual site designs and architecture diagrams I've been working on unless any of you really want me to do more exploring like this!

[rootkovska]

Still looks a bit cold, mainframe-like. Reminds me of these wast cubicle offices of one particular processor vendor.

Can we try to start from the storyboard 01, which I find much more joyful and just make it: 1) three tone, 2) potentially also add other colors to the palette?

[rootkovska]

Still looks a bit cold, mainframe-like. Reminds me of these wast cubicle offices of one particular processor vendor.

Can we try to start from the storyboard 01, which I find much more joyful and just make it: 1) three tone, 2) potentially also add other colors to the palette?

[bnvk]

@rootkovska Hehe. Ok how's this? Any less vast endless cubicles of gloom and doom?

How's everyone else feeling about this @mfc @marmarek ?

[bnvk]

@rootkovska Hehe. Ok how's this? Any less vast endless cubicles of gloom and doom?

How's everyone else feeling about this @mfc @marmarek ?

[marmarek]

I like this one :)

[marmarek]

I like this one :)

[rootkovska]

Yup, the 2nd one.

[rootkovska]

Yup, the 2nd one.

[mfc]

👍

[mfc]

👍

[andrewdavidwong]

Nice work, @bnvk. :)

Just one small request: I'd like to avoid too much low-contrast, black-on-gray text, since this discourages sustained reading and can cause eye strain for some users. The selected gray background color is fine, but we should make sure that code blocks, for example, don't just consist of black text on an even darker shade of gray under the new scheme. Rather, we should try to distinguish them in some other way.

[andrewdavidwong]

Nice work, @bnvk. :)

Just one small request: I'd like to avoid too much low-contrast, black-on-gray text, since this discourages sustained reading and can cause eye strain for some users. The selected gray background color is fine, but we should make sure that code blocks, for example, don't just consist of black text on an even darker shade of gray under the new scheme. Rather, we should try to distinguish them in some other way.

[bnvk]

Here is my first pass of three variations of colors / backgrounds for the new qubes-os.org website. This also touches on #1200 as I shifted around + condensed some of the things at the top.

Note: once image opens, tap on it to zoom it to full size

1. Mostly White

2. Gray with white

3. Colors of plenty

As you can see, the content in these is pretty much the same. The "Gray with white" version has some slight changes to what content boxes exist ("Our Research"). You'll notice in 2 and 3 I played with the Qubes logo a tad bit as it seems to flow a tad bit better (to my eye) instead of having two "Q"s for the logo + the name.

Personally, as a designer I am happy with all three of these and would happily start bringing it to code. The Colors version was kind of a fun experiment I just tossed together to see what being wildly different would look like. Not sure it's a serious option, but had fun :)

[bnvk]

Here is my first pass of three variations of colors / backgrounds for the new qubes-os.org website. This also touches on #1200 as I shifted around + condensed some of the things at the top.

Note: once image opens, tap on it to zoom it to full size

1. Mostly White

2. Gray with white

3. Colors of plenty

As you can see, the content in these is pretty much the same. The "Gray with white" version has some slight changes to what content boxes exist ("Our Research"). You'll notice in 2 and 3 I played with the Qubes logo a tad bit as it seems to flow a tad bit better (to my eye) instead of having two "Q"s for the logo + the name.

Personally, as a designer I am happy with all three of these and would happily start bringing it to code. The Colors version was kind of a fun experiment I just tossed together to see what being wildly different would look like. Not sure it's a serious option, but had fun :)

[rootkovska]

I like all of these, but I think the 2nd (gray on white) looks most appealing to me.

[rootkovska]

I like all of these, but I think the 2nd (gray on white) looks most appealing to me.

[rootkovska]

BTW, should we reach to these people we want to quote on the Website (djb, Micah, Snowden) if they're fine to be used for Qubes promotion? Or is the mere fact they made the statements about Qubes in public enough for that purpose? /cc @mfc?

[rootkovska]

BTW, should we reach to these people we want to quote on the Website (djb, Micah, Snowden) if they're fine to be used for Qubes promotion? Or is the mere fact they made the statements about Qubes in public enough for that purpose? /cc @mfc?

[rootkovska]

One more Q: what toolstack do you plan to use to create the actual website? Would it be easy for others to later introduce modifications -- e.g. put new propaganda quotes in, etc?

[rootkovska]

One more Q: what toolstack do you plan to use to create the actual website? Would it be easy for others to later introduce modifications -- e.g. put new propaganda quotes in, etc?

[bnvk]

what toolstack do you plan to use to create the actual website?

I was going to look into SemanticUI for the CSS / JS framework, but will probably use Bootstrap since it's my normal tool + tight timeline!

Would it be easy for others to later introduce modifications -- e.g. put new propaganda quotes in, etc?

Things are hardly changing from the current stack. Some files will need to be .html instead of .md, but will basically be adding styling to the current Jekyll site, so yes adding / removing propaganda quotes will be "super" simple ;)

Cool, well I start coding on the Gray with white option. The only content things I need are

• The little blurbs of text for the "What's going on inside of Qubes" section
• Any suggested changes to the information architecture proposed

[bnvk]

what toolstack do you plan to use to create the actual website?

I was going to look into SemanticUI for the CSS / JS framework, but will probably use Bootstrap since it's my normal tool + tight timeline!

Would it be easy for others to later introduce modifications -- e.g. put new propaganda quotes in, etc?

Things are hardly changing from the current stack. Some files will need to be .html instead of .md, but will basically be adding styling to the current Jekyll site, so yes adding / removing propaganda quotes will be "super" simple ;)

Cool, well I start coding on the Gray with white option. The only content things I need are

• The little blurbs of text for the "What's going on inside of Qubes" section
• Any suggested changes to the information architecture proposed

[rootkovska]

Just make sure that:

1. Everything needed for the website is in git repo(s)
2. It works out-of-the-box with our qubes-doc repo
3. It's possible to make content adjustments without any proprietary tools.

[rootkovska]

Just make sure that:

1. Everything needed for the website is in git repo(s)
2. It works out-of-the-box with our qubes-doc repo
3. It's possible to make content adjustments without any proprietary tools.

[bnvk]

@rootkovska yes to all three- that is why i'm staying with the current Jekyll architecture. I really like this git based approach to static websites. Thanks for clarifying your concerns!

[bnvk]

@rootkovska yes to all three- that is why i'm staying with the current Jekyll architecture. I really like this git based approach to static websites. Thanks for clarifying your concerns!

[marmarek]

FWIW I also like the second layout (Gray with white). Really nice!

[marmarek]

FWIW I also like the second layout (Gray with white). Really nice!

[mfc]

BTW, should we reach to these people we want to quote on the Website (djb, Micah, Snowden) if they're fine to be used for Qubes promotion? Or is the mere fact they made the statements about Qubes in public enough for that purpose? /cc @mfc?

yes I will reach out to them to get their okay.

[mfc]

BTW, should we reach to these people we want to quote on the Website (djb, Micah, Snowden) if they're fine to be used for Qubes promotion? Or is the mere fact they made the statements about Qubes in public enough for that purpose? /cc @mfc?

yes I will reach out to them to get their okay.

[adrelanos]

Speaking from experience, The Tor Project has been protective about their trademark. I advice to check if using the Tor logo below the Whonix logo is safe. Perhaps asking for permission.

• https://www.torproject.org/docs/trademark-faq.html.en
• https://www.whonix.org/wiki/Dev/TPO_Trademark

Personally I am not against it. It looks good the way it is!

BTW, should we reach to these people we want to quote on the Website (djb, Micah, Snowden) if they're fine to be used for Qubes promotion? Or is the mere fact they made the statements about Qubes in public enough for that purpose? /cc @mfc?

Apart from the legal possibility, I'd ask them. Even if legal, better to avoid to generate a "hater".

---

Please prefer the Qubes logo that has a Q and that is not just a qube. (gray one)

I like all designs. The gray one most. To reach different types of users, perhaps it would make sense to alternate these the gray and the colorful one every half year or so. Getting metrics about bounces. ;) Just a crazy idea.

[adrelanos]

Speaking from experience, The Tor Project has been protective about their trademark. I advice to check if using the Tor logo below the Whonix logo is safe. Perhaps asking for permission.

• https://www.torproject.org/docs/trademark-faq.html.en
• https://www.whonix.org/wiki/Dev/TPO_Trademark

Personally I am not against it. It looks good the way it is!

BTW, should we reach to these people we want to quote on the Website (djb, Micah, Snowden) if they're fine to be used for Qubes promotion? Or is the mere fact they made the statements about Qubes in public enough for that purpose? /cc @mfc?

Apart from the legal possibility, I'd ask them. Even if legal, better to avoid to generate a "hater".

---

Please prefer the Qubes logo that has a Q and that is not just a qube. (gray one)

I like all designs. The gray one most. To reach different types of users, perhaps it would make sense to alternate these the gray and the colorful one every half year or so. Getting metrics about bounces. ;) Just a crazy idea.

[mfc]

The little blurbs of text for the "What's going on inside of Qubes" section

Instead of "use the OS you prefer" maybe it should highlight "use all your favorite apps" or similar? since that is more the user-facing benefit since we are not talking about running an entire OS (HVM-style) inside of Qubes, but rather OSes that have been integrated into Qubes.

Any suggested changes to the information architecture proposed

For right now, I would make sure that you implement the things that already have content, so that you don't have to create new content. So Tour > Videos is probably not ideal since we don't have a Videos page yet. So I would recommend having an intermediate info architecture step that is just re-ordering of existing content, and then highlighting the end-goal info architecture that we can work on with content after next week and roll out over time.

re: Awards & Grants, OTF dislikes being described as providing grants, and it sounds like you also want to incorporate in Partners into this category. So maybe just say "2015 & 2016" (remove "received grants") and remove "Access" from "Access Endpoint Security finalist"

[mfc]

The little blurbs of text for the "What's going on inside of Qubes" section

Instead of "use the OS you prefer" maybe it should highlight "use all your favorite apps" or similar? since that is more the user-facing benefit since we are not talking about running an entire OS (HVM-style) inside of Qubes, but rather OSes that have been integrated into Qubes.

Any suggested changes to the information architecture proposed

For right now, I would make sure that you implement the things that already have content, so that you don't have to create new content. So Tour > Videos is probably not ideal since we don't have a Videos page yet. So I would recommend having an intermediate info architecture step that is just re-ordering of existing content, and then highlighting the end-goal info architecture that we can work on with content after next week and roll out over time.

re: Awards & Grants, OTF dislikes being described as providing grants, and it sounds like you also want to incorporate in Partners into this category. So maybe just say "2015 & 2016" (remove "received grants") and remove "Access" from "Access Endpoint Security finalist"

[andrewdavidwong]

Nice work, @bnvk. I'm a fan of 1 and 2. 3 is a bit too colorful for me. :)

[andrewdavidwong]

Nice work, @bnvk. I'm a fan of 1 and 2. 3 is a bit too colorful for me. :)

[mfc]

everyone is fine being quoted.

The little blurbs of text for the "What's going on inside of Qubes" section

in case you still need some copy, here's a draft:

Security that Works

Qubes brings to your personal computer the security of the Xen Project hypervisor -- the same software relied on by major hosting providers to isolate websites and services from each other. If it breaks, so goes the global digital economy.

Use the OS and Apps You Like

Can't decide which Linux distribution you prefer? Still need that one Windows program for work? With Qubes you don't need to pick a favorite or compromise.

Get Serious with Privacy

With Whonix integrated into Qubes, you can easily route network traffic through the Tor anonymity network.

[mfc]

everyone is fine being quoted.

The little blurbs of text for the "What's going on inside of Qubes" section

in case you still need some copy, here's a draft:

Security that Works

Qubes brings to your personal computer the security of the Xen Project hypervisor -- the same software relied on by major hosting providers to isolate websites and services from each other. If it breaks, so goes the global digital economy.

Use the OS and Apps You Like

Can't decide which Linux distribution you prefer? Still need that one Windows program for work? With Qubes you don't need to pick a favorite or compromise.

Get Serious with Privacy

With Whonix integrated into Qubes, you can easily route network traffic through the Tor anonymity network.

[bnvk]

Closing this issue, as it served the purpose to get the site and branding to better place. Will track further improvements & things elsewhere!

[bnvk]

Closing this issue, as it served the purpose to get the site and branding to better place. Will track further improvements & things elsewhere!