Website Redesign

[JYamihud]

Current website

This is a very basic text site with a few problems.

• Words like Repository, Mailing Lists and IRC are understood only by very advanced users. I'd change them to Download and Community.
• The website is not very attractive for potential users.
• There is only one page on the website. More things should be done from the site directly.

  Design 2.0

I made this picture in GIMP in a few minutes. Which already reads like a way better looking website. After features, icons that describe features, with a quick explanation of them, could be added.

We could copy the aesthetic of the www.audacityteam.org site. Or could make it look more like the list. Even a special page for Features could be added. Focusing on latest news on the main page. But then somebody will need to write those news articles.

A pretty screenshot of Tenacity is required. I used Audacity 2.3 for this image. But a true Tenacity screenshot with a true tenacity theme should be the one shown.

Originally posted by @JYamihud in https://github.com/tenacityteam/tenacity/discussions/162

[RoaddogLabs]

Dev outreach can be on the platforms like sourcehut and Github where the devs hang.

That's only half correct. The contributing guidelines specifically say only to file an issue for bugs or feature requests, not for end-user support, so GitHub definitely isn't the place to redirect to, however:

#tenacity on irc.libera.chat and ~tenacity/tenacity-discuss on lists.sr.ht are the places designated for support and general non-development discussion. Nowhere else.

Please take my comments in the spirit intended with no disrespect.

You've misinterpreted what I'm saying. I'm saying outreach to devs for contributing to the project should be through a repo/forge. In the case of the people that use this program "community" doesn't mean devs. It means user docs and forums. It doesn't mean a repo/forge. My point is and has been that dev interaction and end user interaction are two different animals.

I don't think the difference between end users of the program and those developing the program is appreciated or even recognized in many cases. An example of this is your post where you refer end users to IRC and mailing lists. That's simply not how users of this sort of program look for support. You're presupposing developer communication platforms in place of consumer side users. They go to social media gathering points like forums, FB groups and the like. A light, clean site and traditional style of docs, wiki or whatever, are what these users look for and are interested in.

Another place I see opinions of what it takes to support users as being out of the realm of how this software is used is the insistence of some sort of minimalist site or discounting the importance of user docs. The project looks to be growing big enough that this sort of inward focus on devs may not impact the potential user base much (assuming feature parity and reliability to whatever version of Audacity is shipping). Those of us that use and have used the program can take up that slack offering support and guidance as we do in other areas of pro audio for other pros and enthusiasts. It has to be in an appropriate mechanism in which the users are used to dealing in.

My concern at this point is the project not being able or willing to support users in a way where they feel welcome to the program. In fact I don't see it necessarily the duty of the core team to support end users nor is it an obligation. I would posit there are others of us here willing and capable of supporting users/sharing info on how to use the tool. I think it's a better proposition to engage the potential volunteers as given their experience with the pre fork and audio in general they are likely a more authoritative, appropriate source of information about using an audio editing program.

[nbsp]

Oh, of course, docs are very important and should be added sooner rather than later. I was referring to real-time support.

That's simply not how users of this sort of program look for support. You're presupposing developer communication platforms in place of consumer side users.

Sorry, but that's just incorrect. Since when is email a "developer communication platform"? How is IRC different to Slack or Discord, apart from it being open source software? Many projects, primarily those started before the inception of GitHub, use mailing lists to this day. ^{1 2 3 4}

Mailing lists are the easiest form of communication. They have zero barrier of entry -- you don't even need an account. If you can't figure out how to send an email, you have bigger problems.

[sosasees]

I updated the page again. This time it's just the placeholder Feature Icon replaced with the "final" ones and the "Community" section split as suggested by @RoaddogLabs: You can try my working prototype here. What are your thoughts on the site itself or on the changes I made?

And if you wonder why my latest commit to the webpage prototype is unverified: I haven't fully figured out verifiying command line commits, but I feel I'm close.

[sosasees]

As Tenacity will go in a slightly different direction than Audacity, the info from the Audacity Docs & Forums will not stay 100% compatible with Tenacity.

Because of this, Tenacity will need to have its very own Documentation and Forums.

To prepare for this, I added the "Documentation" and "Forums" buttons on my prototype website (leading to a Placeholder Page because the Documentation and Forums don't exist yet)

What do you think of these buttons' placement, or the page in general?:

[sosasees]

Oh Boy, what a Departure! This Discussion began as different people sharing their ideas for the Tenacity Website to exclusively changelogs from myself of my prototype of a possible Tenacity website. After my experience, I don't think this "Linear Discussion" format is very good for mid-term collaboration like this. Please explain me this Penpot thing.

[nbsp]

Heads up that logo4poop is working on a wiki, so please don't start work on one yourself. It'd be great if all of you joined the IRC channel and we could have a more real-time discussion. #tenacity-dev on irc.libera.chat.

As for the design, @Sosasees:

• SourceHut has its H capitalized
• Why is there both a "Forums" and a "Mailing Lists"? The mailing lists are the forums. See my previous message:

  #tenacity on irc.libera.chat and ~tenacity/tenacity-discuss on lists.sr.ht are the places designated for support and general non-development discussion. Nowhere else.

[Songtech-0912]

@Sosasees I fully agree. Penpot is basically like Inkscape but online and with collaborative interface. It gives you the ability to directly leave comments on other people's designs like little annotations. Using this we can work on one shared "artboard" with the current designs (my design, your design, the current site) and take bits and pieces of each to build a better website together. Importantly, Penpot is free and open-source software.

I've created a penpot organization already, though I would need everyone's emails in order to invite everyone onto the team. Here's the (currently empty) org:

As for IRC - I have just successfully joined it. We can keep talking about the website design on IRC.

[RoaddogLabs]

The shots posted are right on the money. Simple, informative, light. Well done.

IRC and Penpot are excellent dev tools and good choices for collaborating and the development of a docs interface/site (or software in general). When soliciting opinions from rank and file users I find it best to post screen caps or link to a dev mock up site in a place where users will more likely be. That way one can get the widest possible audience for the preview.

A frank exchange of views, as we have here, is constructive to the development of user facing information. Some views will be direct and perhaps contradictory to some other opinions. The key is doing it in a non confrontational manner. A dismissive comment of “if the users can’t send email they have bigger problems” is insulting to users in general and certainly not inclusive. It’s not because they can’t. It’s because they have other methods that are more common. Like most of the internet population in general. It’s like suggesting the project use Gopher and Archie for a manual when there are better technologies and implementations available today. The reason real time chat apps like Slack are Teams are deployed far more than command line IRC or an IRC wrapper is that they have been found to be more productive tools for the end users.

Many of the Audacity (and potentially Tenacity) users have deep, authoritative knowledge of using the program and the editing and creation of audio across all levels of the discipline. Insulting them is not productive. It’s a fundamental choice for the project. Does Tenacity want to be a niche fork for geeks?(I use that as a term of endearment, I self identify as a geek) Or does the project want to have a wider footprint among those currently using Audacity?

[nbsp]

I might've been a little too harsh in my last comment -- I'm sorry. I just have very strong opinions regarding free software.

The primary reason for Tenacity's inception was to say no to corporate overtaking and to free software violations. This is why I also championed so hard for using sourcehut. To me, IRC is a free, widely used and lightweight alternative to Slack, with no clear disadvantage, except for the fact it's less known.

Speaking of which: that's an ad populum logical fallacy. Just because more people use Discord doesn't make it better. That's exactly why we ditched the CLA.

[RoaddogLabs]

“Better” is an ambiguous term in many if not most cases driven by personal preference. If Tenacity wants to acquire user converts from Audacity the project needs to meet users where they are not where the philosophical mores of the free software lie.

[sosasees]

As for IRC - I have just successfully joined it. We can keep talking about the website design on IRC.

How have you joined IRC? I couldn't figure this out.

[nbsp]

https://web.libera.chat/gamja/?channels=#tenacity-dev

[sosasees]

Thanks very much.

[emabrey]

@Songtech-0912 Can you invite me to the PenPot? emabrey@tenacityaudio.org Also, access to the current assets is located at https://github.com/tenacityteam/assets just in case you didn't know.

[Songtech-0912]

@emabrey Sure, I've sent an invitation to you. Thanks for making me aware of the assets repo as well, I've got a repo at https://github.com/Songtech-0912/tenacity-design that I used for sharing design work on Tenacity previously.

[sosasees]

Can I also get invited? My Penpot account's eMail address is sosasees@protonmail.com

[Songtech-0912]

@Sosasees Yup, you're in too.

[Songtech-0912]

@all I have a request for everyone: please address website design issues in a objective manner, not subject to personal preferences. Here's a quote demonstrating this principle:

“I usually call these endless [UI] discussions “religious debates,” because they have a lot in common with most discussions of religion and politics: They consist largely of people expressing strongly held personal beliefs about things that can’t be proven…

The right kind of question to ask is “Does this [function], with these items and this wording in this context on this page create a good experience for most people who are likely to use this [software]?” -Steve Krug

While I am grateful for the feedback everyone has shared, please keep in mind that when we are giving feedback, let's start doing feedback like this:

I believe that [e.g. the use of accent colors such as pastel red], for the purpose of [e.g. increasing accessibility via greater color contrast] in the context of [e.g. the features section], creates a better experience for most people who are likely to visit our website.

Or like this:

I believe that your design's use of [e.g. a faint gradient], for the purpose of [e.g. removing associations with bold block colors used by corporate designers] in the context of [e.g. the landing page], may not create a better experience for most people who are likely to visit our website, but instead cause the adverse effect of [e.g. adding unnecessary clutter to the page].

I'm sure that my opinions will not align with everyone else's completely, but if we continue with feedback using this approach, we can work much more constructively.

[Semisol]

Please add me: https://semisol.dev/contact (e-mail obfuscated) [offtopic] and here is a greylisting rant because my Penpot registration got delayed by it [/offtopic]

[Songtech-0912]

@Semisol Yup, sent you an invite.

[sosasees]

@Songtech-0912 Thanks very much.

[sosasees]

No-one but me has edited the Penpot document for the Webpage Design.

I have the suspishion that the webpage I made is so good that no-one can give feedback to improve it.

[Semisol]

I guess everyone forgot.

[RoaddogLabs]

No one forgot. By using dev tools only and not posting proofs where others can see them without a barrier to entry you intentionally limit who is willing to offer feedback.

What is posted on your Github looks fine. It’s got what someone needs to get started.

Great start. I’d push it into production.

[sosasees]

I recently inserted a full-page screenshot of that page into the Penpot document. This way, the "Tenacity Design" Penpot team can overlay annotations and comments on top of that Screenshot.

By "barrier of entry", @RoaddogLabs means that everyone who wants to help with the design on Penpot has to first register to Penpot and then publically post their eMail address in this comment section to get invited. I see why barely anyone joined the "Tenacity Design" team: This sounds much more complicated than it was for me, and not everyone is willing to publish their eMail address like this.

An alternate way to help with the design is to post an issue or pull request on the website prototype's GitHub, but even that has a barrier of entry: You first need the link to the webpage's GitHub source code (so I put it on the webpage itself). And then you need to be a person who would have a GitHub account, which is mostly limited to developers.

[sosasees]

What is posted on your Github looks fine. It’s got what someone needs to get started.

Great start. I’d push it into production.

Somebody besides me (precisely @RoaddogLabs), even if not a member of the Tenacity Team, considering that my website is good to publish as the official Tenacity website, sounds like good news to me. I added some final improvements for this occasion.

[NotAProton]

@Sosasees wow, I really like the screenshots changing based on the theme.

[nbsp]

One thing that looks odd to me is the "Documentation" part, where the title and button both say the same thing. Maybe change the button text to "Tenacity wiki"?

Other than that and some polishing of the text, I think this looks very good. I'd gladly push it into production.

[nbsp]

Note that I might heavily rewrite and rebase the commit logs to fit our contributing guidelines. @Sosasees: Could you sign-off your commits?

[nbsp]

Also: are the screenshots licensed under CC BY 4.0? If not, they should be.

[sosasees]

Could you sign-off your commits?

I have just read the term "sign off" for the first time today. I'm not experienced enough to edit previous commits, but now that I know that signoff is a thing and what it is, I will use this for my future commits.

Also: are the screenshots licensed under CC BY 4.0? If not, they should be.

I don't think the Screenshots are licensed at all. I just took them from other Discussions on this repository.

But this is an opportunity to make new Screenshots that are both in the 16:9 Aspect Ratio (because currently the Screenshot changing size when switching the Theme can cause a confusing scroll position change when switching the Theme).

[sosasees]

One thing that looks odd to me is the "Documentation" part, where the title and button both say the same thing. Maybe change the button text to "Tenacity wiki"?

I have already considered something like this: I was not yet sure which form the official documentation will take, but I have already put the following bullet point in my readme file, in the section titled "If you are the Tenacity Team and want to host this webpage as the official Tenacity website, please consider doing this":

• If the Documentation is the Wiki, replace the text in the "Documentation" button with "Wiki"

Now that I am certain that the documentation is the wiki, I will replace have replaced the button text with "Wiki".

Update: I have now replaced the button text. With this change, the suggestion to so for the Tenacity Team has been removed from the readme.

[nbsp]

I'm not experienced enough to edit previous commits, but now that I know that signoff is a thing and what it is, I will use this for my future commits.

NACK. The contributing guidelines to the project explicitly say that your commits must be signed off. Look up how to do that.

I don't think the Screenshots are licensed at all. I just took them from other Discussions on this repository.

Not licensed == All rights reserved. We have a light-themed screenshot courtesy of @vchernin -- perhaps he could supply a dark one as well?

[sosasees]

I have just found that I can sign off my previous commit with git commit --amend --signoff. But this will not help much right now. I need a way to sign off every commit from a specified range (ex.: everything from 4d45615 to 161a398)

[vchernin]

Not licensed == All rights reserved. We have a light-themed screenshot courtesy of @vchernin -- perhaps he could supply a dark one as well?

I tried taking one the same as before, except now I changed to dark mode in Tenacity preferences.

It might look better if I use the non-default adwaita dark theme, I'll try that out and report back.

If you do like this one it is licensed under CC BY 4.0 as before (and I can email it to @SFR-git now or later).

[RoaddogLabs]

In the US any creative work generated by default has a copyright of the person that created it as long as there are no other stipulations. For example a work for hire. Screen caps count.

What is the UI/use case for changing Documentation to Tenacity Wiki? It’s getting back into the territory of not fully understanding who the users of the program at scale actually are.

[nbsp]

What is the UI/use case for changing Documentation to Tenacity Wiki? It’s getting back into the territory of not fully understanding who the users of the program at scale actually are.

So that it doesn't say "Documentation: Documentation"

[sosasees]

Yes, this section of the webpage looks like this:

If I didn't change the text on the button, it would spell "Documentation" Twice.

[vchernin]

With Adwaita-dark:

With HighContrastInverse:

Both themes set under gnome tweaks. Licensed under CC BY 4.0 as always.

@SFR-git do these look good? I can email them or just PR them right to the assets repo.

[nbsp]

With HighContrastInverse:

This one definitely looks better. I'm out of the house; could you open a PR on the tenacityteam/assets repo? Make sure to follow the naming convention and sign the commit off.

[sosasees]

I am lost: I need to know how to sign all my commits. Please answer in this discussion.

[sosasees]

I am lost: I need to know how to sign all my commits. Please answer in this discussion.

Update: Big thanks to @Semisol and @SFR-git who answered the linked discussion. I now successfully signed off all commits for my tenacity webpage.

[Songtech-0912]

@Sosasees Awesome work on the project! I apologize for my recent lack of activity. I would love to give design suggestions if possible, as well as coding the html/css, but my internship is heavily interfering in this regard.

Also, check out this color scheme: https://yeun.github.io/open-color/. I think the design would be even better if you could use the open color palette.

I will temporarily take a "break" from the web redesign, due to personal considerations. I hope that everyone understands.

[sosasees]

Thanks for the suggestion. I did not yet recolor þe webpage, because I first needed to plan þe colors in an image. I changed þe non-brand colors, but þe brand colors stay unchanged (except for þe dark theme variant of þe gradient, which was originally just þe regular gradient at 80% opacity).

Please say which color schemes are best and why, and how they could still be improved.

Palette	Light Theme	Dark Theme
Original
Open Color

Download original SVG image file: website-colors.svg (zipped)

[nbsp]

I prefer the OpenColor version, especially for the dark theme. A nice, muted grey works better with the red than blue, IMHO.

[fugidev]

The Open Color version look really nice IMO!

[sosasees]

I have done some notable changes to the layout of the webpage. You can compare both versions and see which one is better. Before / After

Here is a changelog:

• Changed colors palette except for the brand colors
• Upgraded the "features list" from a simple list to a responsive grid that feels much better to read on larger screens
• Restricted the maximum size of the screenshot to fix the perception of "too much whitespace"
• Screenshot and logo moved off the Bright Red background onto the much gentler background that the rest of the webpage has
• Moved the "Wall of Buttons" to the bottom of the page. The most important links from that wall are now also in a Top Bar.
• Added @Semisol's tenacity mascot, Key the Cat, to the bottom of the page:

  
               /\_/\
      ________(' - ')
  _____(              )
  /     (______________)
  '     | |          | |
     | |          | |  hello
     '"'          '"'

- I have also taken some creative liberty with the coloring of the tenacity logo:
Instead of having [black text in light theme](https://github.com/tenacityteam/assets/blob/master/PNG/tenacity-logo-light-readme.png) or [blue text in dark theme](https://github.com/tenacityteam/assets/blob/master/PNG/tenacity-logo-dark-readme.png) like officially intended,
I have colored the text in the same red gradient as the icon:
![](https://user-images.githubusercontent.com/66305550/130336312-262fc62c-cbd3-473e-a326-058c08eae44b.png)

[vchernin]

It's looking quite nice! I think the responsive feature list fits quite well here (and it works well). Nitpicks:

• Do you want to link the Matrix Space instead? @Semisol should your homeserver be used here? (that's the only way I was able to link to the Space).
• There's a typo in my name at the bottom, "vchernin" not "vchermin". I do wonder though is it necessary to cite the screenshot source on the same page they're shown? Does it make any sense to condense that into one "Website contributors" page or something?

Subjective:

• I think it flows better reading wise to put the Download, Documentation, and Community & Source Code buttons underneath the logo and short caption (but above the screenshot). Not sure if that's just me though.

+infinite points for adding Key, that alone makes this website amazing.

[fugidev]

• I think it flows better reading wise to put the Download, Documentation, and Community & Source Code buttons underneath the logo and short caption (but above the screenshot). Not sure if that's just me though.

I agree, it would look nicer.

[nbsp]

Looks great! I don't think we should have the licensing on the webpage itself, though. We could add this:

Website source code (MIT et al.)

And the repository would have a LICENSE file which explains everything.