search

tenacityteam / tenacity-legacy

THIS REPO IS NOT MAINTAINED ANYMORE. Please see https://codeberg.org/tenacityteam/tenacity for Tenacity, which is maintained.
https://tenacityaudio.org
Other
6.75k stars 255 forks source link

Website Redesign #163

Closed JYamihud closed 3 years ago

JYamihud commented 3 years ago

Current website

2021-07-08_17-18 This is a very basic text site with a few problems.

tenacity-site

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

nbsp commented 3 years ago

Also, this may be a bit off-topic (and may exist already), but I could do some work on the docs.

Yep, we could use a readthedocs theme with Jekyll or Hugo or something

Songtech-0912 commented 3 years ago

That's... a really old commit you got there. git am won't even apply it. Could you git pull --rebase, then fix the problems?

Yeah, no problem. In fact, I think I'll also add a few other changes to make the entire page a bit more responsive. I'll probably make an updated version of that gist tomorrow, it's quite late here where I live.

Songtech-0912 commented 3 years ago

@SFR-git I've directly sent the patch to ~tenacity/tenacity-dev@lists.sr.ht using Sourcehut's web UI, but here's the updated gist if it's necessary: https://gist.github.com/Songtech-0912/16c18643a642b3e5d945340402945998

nbsp commented 3 years ago

I'll have a look. Note that when sending one commit you don't necessarily need a cover letter.

Songtech-0912 commented 3 years ago

The others have rejected the patch for now, and they've got good reasons for doing so. I think I had sent 3 separate emails instead of 1 singular one, because I forgot to squash the commits.

NotAProton commented 3 years ago

~I think we should use Hugo for the site, its opensource and openring works with it.~

We don't need it rn

NotAProton commented 3 years ago

The colour of the new logo won't fit into the current palette of the site.

rolandixor commented 3 years ago

Has this been finalized yet?

I could pitch in if needed. Just let me know.

Songtech-0912 commented 3 years ago

I'll do a full redesign of the site, as I don't think making patches is the way to go ahead - designing using actual graphical software allows us to iterate much faster. I'll send the design drafts in a few hours in Penpot, we can go from there.

Also, all UI designers here, feel free to work on it with me!

Songtech-0912 commented 3 years ago

@rolandixor By no means! The website can always be improved, and we should improve it anyway. I don't mean to be disrespectful for the website maintainers, but Tenacity's website should be IMO even better than Audacity's if we want to make Tenacity a truly appealing piece of software.

rolandixor commented 3 years ago

@rolandixor Tenacity's website should be IMO even better than Audacity's if we want to make Tenacity a truly appealing piece of software.

This.

I'm a web designer myself, so I know the importance of a good design for catching attention. I'll wait and see what you come up with, but I'm open to contributing as well, if needed.

Songtech-0912 commented 3 years ago

Here's my progress so far:

image

EchedelleLR commented 3 years ago

The link to the repository should show optionally the SourceHut one too.

Songtech-0912 commented 3 years ago

Ok, I'll add that. Here it is:

image

Songtech-0912 commented 3 years ago

I've finished the re-redesign, view it here: https://www.figma.com/file/Y9bZR02MQHkiutuFkgyp3u/Tenacity-Website-Redesign?node-id=1%3A7 (and for the viewable version, link is here)

(Unfortunately I made it in Figma, but rest assured, I made it in a free/libre version of Figma and just viewing the page doesn't collect user data or telemetry)

EchedelleLR commented 3 years ago

Well, that free/libre version is just a wrapper for the website over Electron, which is just executing the same client-side code and using the same service.

In the other side, the website is pretty good.

I only have a question about the 4-column footer which repeats some part which could be replaced by 3-column footer if we don't have nothing additional to put in the "About" section which would be complete with the "Help" section.

About the "View Source" button, I don't know what would release given that a text under it is clarifying that the source is in two platforms.

That make me think that would react to mouse events to show a two more options.

Just asking, the rest of that design can be implemented without JS but what is about that part?

RoaddogLabs commented 3 years ago

Looks good. Concise, clean, modern. Some bullet points of features somewhere around the screenshot and perhaps including the documentation in the top link.

Well done.

Songtech-0912 commented 3 years ago

@EchedeyLR The entire design can be made without JS. Using the CSS ::before pseudo-selector, different Z-indexes and relative positioning is enough.

Well, that free/libre version is just a wrapper for the website over Electron, which is just executing the same client-side code and using the same service.

True but I couldn't have made this design in Penpot, due to its subpar positioning tools. I would have wished to, but realistically it is impossible.

About the "View Source" button, I don't know what would release given that a text under it is clarifying that the source is in two platforms.

I am preparing to show a modal when the button is clicked (which can be done in CSS) to show both the SourceHut and Github repos. However you're right in saying that the discoverability of this is poor. I could instead make this button a select menu with the options listed below.

@RoaddogLabs I've added a "Learn" link on the navbar, which will have a documentation link under it. Features are also added, but below the hero section.

rolandixor commented 3 years ago

Can I ask why the massive aversion to JS altogether? It seems a bit like unnecessary hype.

Sometimes you need a menu (for instance, on mobile devices, where showing multiple links in a navbar is not very feasible), unless you're planning to design the mobile version without any navbar whatsoever?

BTW, I am comfortable design/developing without JS (I do it all the time, eg: https://rolandixor.pro/anole), but I don't see why you should cater only to users who panic over nothing (no offence intended; just being realistic here, as a web designer).

EchedelleLR commented 3 years ago

Never played with ::before for that specifically. Good to know something new as a WebDev student.

rolandixor commented 3 years ago

It's doable, but there are major limitations. CSS is not built to handle events. You can use trickery to get around this (I have), but it's not advisable, nor necessarily accessible. I'd highly suggest just using JS as it is designed to be used. A simple onclick="showMenu()", where showMenu() does nothing more than add or remove a class, is not collecting anyone's data.

Songtech-0912 commented 3 years ago

@rolandixor The aversion to JS in free/libre software circles is because of something called "nonfree JavaScript". One way of thinking of it is to imagine that you create a webapp with React and Webpack. If you were to read through the massive amount of obfuscated, minified javascript, the source code would make no sense, and (more importantly) you wouldn't be able to identify if there was a function that collected a large amount of telemetry and sensitive user data. That makes it "nonfree" in the sense that it's effectively proprietary code.

EchedelleLR commented 3 years ago

@rolandixor The navbar is the first thing that doesn't need JS even in responsive mode.

Just dealing with CSS transitions you can deploy or hide a menu in a good way to show a little example.

In WebDev vocational training that is taught in the very first year.

Songtech-0912 commented 3 years ago

I agree that the semantic solution would be to use JS in certain cases, for e.g. dropdowns (though the semantic <select> element is probably enough). However, due to the issue of "nonfree JavaScript" many people here don't even turn on JS in the browser. We need a gracefully-degrading and accessible solution should such a situation occur - so why not do everything in CSS and semantic HTML?

rolandixor commented 3 years ago

@EchedeyLR See the link I posted, as an example. You can do this, I didn't say you couldn't — but it's not accessible. I only did it with Anole as a proof of concept, but later decided for future projects to just use Vanilla JS. If you simply use CSS and :hover, for instance, you're going to run into problems on mobile devices, and block users who use the keyboard to navigate.

Also @Songtech-0912 , React is open source, and minified source code can easily be turned into human-readible code and searched for problems by any seasoned dev. None of these reasons are actually based on facts (and again, I'm not insulting anyone or whatever, I'm being honest).

Either way, you don't need highly complicated JS for any of this. I use simple functions like this all the time, and it's wiser to use JS for menus (which clearly, your design has).

BTW, I have no issue with your design, it looks great and all. I'm just saying, if you're going to have dropdown menus, using CSS and pseudo-elements to activate them is probably not advisable. Also, the average Joe or Jane is not disabling JS in their browser, and probably has an Ad-Blocker + anti-tracking solution, which removes or blocks actually harmful JS scripts.

If you're trying to reach the masses, you shouldn't cater first to the obscure set of users who are panicking over misinformation, nor should you encourage it.

Songtech-0912 commented 3 years ago

@rolandixor I respect your opinion and you did make valid points. Also your project (https://rolandixor.pro/anole) is really cool!

However, this community (AKA Tenacity's) is a very specific community in that it is staunchly anti-whateverCanBeUsedToInfringeOnUserPrivacy. According to the FSF's guidelines, all JavaScript that is not appropriately licensed will be flagged and disabled, see https://www.gnu.org/philosophy/javascript-trap.html. Thus, we are hesitant to use any JavaScript whatsoever because the process of compliance to the "free javascript" guidelines are, let's face it, VERY tedious (I've done this before for a webapp I made, it takes up to an hour to license all the scripts).

rolandixor commented 3 years ago

That all sounds........ exhausting. I'll just watch from the sidelines and probably use the end product/file bugs. Not a fan of misinformation being used to restrict true freedom under the guise of protection.

Thanks for the compliment btw, and all the best with your design! You can still ping me if assistance is needed; but otherwise I'll watch from the sidelines.

mc776 commented 3 years ago

The current website is perfect as it is. Why would it need any more features?

Anyone who actually needs to use the program would likely find it by asking around and those people would probably link them the download page or the Github project or something.

Words like Repository, Mailing Lists and IRC are understood only by very advanced users. I'd change them to Download and Community.

Agreed.

The website is not very attractive for potential users.

The main point of my original reply, as someone who'd be comfortable with this but is actively repelled by things that look like they have to advertise to me. I'm pretty sure this ad-fatigue is not that rare nowadays - or even with older normie boomers who grew up with unskippable commercials on TV.

There is only one page on the website. More things should be done from the site directly.

Like what? Discussion? Help? This seems to be a vastly bigger undertaking that is completely unrelated to Web page design.

Songtech-0912 commented 3 years ago

@mc776 I think it would be best to discuss your specific opinion in private as we have extensively discussed it here: https://github.com/tenacityteam/tenacity/discussions/159#discussioncomment-1017378. What do you say?

Songtech-0912 commented 3 years ago

Also, I would like to hear the opinions/criticisms of the project maintainers - namely, these 8 wonderful people. I would recommend that the current site be continued as a text-only mirror of the site (similar to https://text.npr.org/). Anyone who hates the redesign can just keep looking at the plaintext version at https://text.tenacityaudio.org. Without maintainer approval, however, I'm not sure if I should go ahead with this or not - especially as there are such huge divides of opinion around this design.

nbsp commented 3 years ago

I've finished the re-redesign, view it here: https://www.figma.com/file/Y9bZR02MQHkiutuFkgyp3u/Tenacity-Website-Redesign?node-id=1%3A7 (and for the viewable version, link is here)

(Unfortunately I made it in Figma, but rest assured, I made it in a free/libre version of Figma and just viewing the page doesn't collect user data or telemetry)

I'm supposed to be taking a break, but I had to give my opinions and criticisms. In general, I like the overall design of the webpage, but I have a couple of questions/complaints/suggestions:

If you don't mind, I'm going to continue my break now. Feel free to email me sol@solfisher.com if you want my opinion on anything.

RoaddogLabs commented 3 years ago

The current website is perfect as it is. Why would it need any more features?

Anyone who actually needs to use the program would likely find it by asking around and those people would probably link them the download page or the Github project or something.

In order for Audacity to get 110 million downloads over the years they didn’t do it on a source control site or from developers. It’s by word of mouth and the general internet. The program needs to appeal to the masses. My observation is as an Audacity user from since the beginning as well as a full time audio pro for the last several decades exposed to thousands of non professional content creators (many of them damn good). If you want people to use it you’re going to need to appeal to them. A text based site and repo doesn’t cut it these days.

One particular facet of this project is several of those that are participating aren’t really in tune with who is using the program, how they use it and why. That’s not bad in and of itself but when the discussion turns inward focusing on what devs think the users want and need based on the devs own philosophies it misses the mark by ignoring the majority of use cases. By and large the users don’t know what Github or Sourcehut or whichever source control and build package are used. In fact largely they don’t care. They care about getting a free program with which to edit and perhaps record a bit of audio. They’re in bands, DJs, podcasters or other content producers that need quick and easy ways to edit and record audio. I see it literally every single day and have for years. It’s biggest with the hobby and part time music and content creators. It’s an excellent solution for them.

My suggestion would be not to push back on making the site more accessible and appealing to mass users. Look at other projects, GIMP. Inkscape, Ardour, OBS and others and see how they provide user facing information. It’s not plain text HTML 1.0 sites. It’s from modern, lightweight sites with contemporary graphics. In fact none of those programs listed above have text only sites. Strictly limiting the public facing web presence to a neo minimalist is the edge case. It’s not how most people consume content these days on either traditional desktops or mobile.

I have a challenge. Show us a consumer facing, popular open source program that’s a media creation desktop app that has a text only page with little to no info and only has distribution from a code repo. If you find one see how many downloads there are. That exercise will prove that in order to gain traction the project needs to provide a warmer, more inviting front.

n0toose commented 3 years ago

I've finished the re-redesign, view it here: https://www.figma.com/file/Y9bZR02MQHkiutuFkgyp3u/Tenacity-Website-Redesign?node-id=1%3A7 (and for the viewable version, link is here)

This looks considerably awesome. I'd be for replacing our current website with it, and reserving the current website's format for documentation.

n0toose commented 3 years ago

One particular facet of this project is several of those that are participating aren’t really in tune with who is using the program, how they use it and why.

Some of the feedback presented by @SFR-git earlier is indeed valid, but it's also true that we shouldn't fall into the trap of developing software for other developers rather than ordinary users. Finding the fine line between being free and marketable to everyone is very hard and will require some good cooperation.

You should seriously consider joining our chatrooms, @Songtech-0912.

n0toose commented 3 years ago

I read some additional concerns presented in the thread, especially the "we shouldn't cater to FUD" deal that I absolutely agree with and would like to directly acknowledge. I'd like to also bring up that this matter isn't simply up to the 8 people that have currently set their organization affiliation status as public (there are more, and if you exclude my very formal tone that I use for the sake of keeping every civil, I and others are not "lead" developers either) and that more people should have a say in this/we need additional feedback.

As far as my personal web development endeavors are concerned, I've avoided JavaScript in the past because I like keeping things simple and because I felt like it was the easiest way to ensure accessibility. I have used Lynx before in order to check whether my websites are accessible, it's an amazing piece of advice. I'm a fan of not wasting a lot of resources. Options such as redirecting people who fall under the category of a power-user to the text-only version exist? However, that definitely isn't my field and would gladly take a step back here.

NotAProton commented 3 years ago 
I've finished the re-redesign, view it here: https://www.figma.com/file/Y9bZR02MQHkiutuFkgyp3u/Tenacity-Website-Redesign?node-id=1%3A7 (and for the viewable version, link is here)

(Unfortunately I made it in Figma, but rest assured, I made it in a free/libre version of Figma and just viewing the page doesn't collect user data or telemetry)

Doesn't fit the project, screams corporate. IMO, we should present Tenacity as software built by a lively diverse community, not an indifferent corporation. https://gimp.org does it really well.

For those who just quickly want to be on their way:

For those who are checking out the project:

Design stuff:

sosasees commented 3 years ago

The current (as of writing) website does not need much changing. It's almost perfect as-is. It is not corporate, the color and font choices alone make it look very professional, and it is Very Informative. These are very important qualities that would be lost in some of the more radical redesigns suggested.

When I look at the current website, I can immediately and quickly read everything I need to know before installing Tenacity and I get the feeling that it is a passion project. This makes the current website, in my opinion, a better Tenacity Website than most of the Redesigns suggested.

The only changes I would suggest right now, are just small modifications to the current website:

NotAProton commented 3 years ago

@Sosasees

quoting @RoaddogLabs :

If you want people to use it you’re going to need to appeal to them. A text based site and repo doesn’t cut it these days.

Songtech-0912 commented 3 years ago

@all First, I am incredibly happy that so many of you have stated your opinions on the design. Any design will most definitely evolve, my design is no exception to this rule. Thank you all very much.

If anyone wishes to take a break, by all means! No need to respond immediately.

Second, I understand that many of you don't like my design very much. That's alright. However, please don't think I'm oblivious to these concerns:

Third, I really do want to join the IRC channels and chatrooms but I am absolutely new to IRC and furthermore the country that I live in right now causes IRC to break easily. Thus, I understand the frustration, but I do ask for patience and understanding, until I figure it out.

After the valuable feedback from everyone in the community, including criticisms, I have decided to enact the following changes:

nbsp commented 3 years ago

I would again like to thank you for your enormous dedication and amount of time put into this endeavour.

And accessibility is an essential part of design for me. However, I can (and do) forget about accessibility during the initial stages of design as well, so thanks for pointing accessibility issues to me as well.

I don't expect sites to be accesible immediately in the first drafts, but it is something we need to keep in mind going forward.

and furthermore the country that I live in right now causes IRC to break easily.

Do you have a Matrix account? A friend of mine had trouble accessing irc.libera.chat but connecting through Matrix seemed to work for him.

I will add more elements of "liveliness" to distinguish the design, such as perhaps some soft gradients, shadows, avatars, and friendly graphics

If someone with proffesional experience is able to provide a couple of illustrations, please join the IRC channel and discuss it with us!

Creative Commons (and specifically CC-BY or CC0) is my choice for a license

Heads up that CC is not a code license. My site, for example, has its code licensed under MIT, and the content under CC-BY-SA.

I'll add in a way to access Tenacity's RSS feed in the future

Don't worry about that for now -- that's not our problem. Once sourcehut sorts it out, I'll set it up.

We will go with a graceful-degrading approach, where we will design the site to work with LibreJS-compliant JS, which will degrade to CSS3, which will degrade to CSS2 + HTML, which will degrade to just semantic HTML

If JS helps you translate your ideas into code, it's perfectly acceptable to use it for a proof-of-concept (as long as it's degradable).

I will contact people who are working on the current website and collaborate with them over this design (I know that @emabrey is working on it, and a few others)

and me :)

Sciss commented 3 years ago

thanks, I agree with most points mentioned. the page design looks fine in principle, perhaps use less "slogan"/sales wording, ease the black-to-white contrast. on Linux, would be nice if one wasn't greeted with a Mac screenshot. good if the important links/features are accessible when in reader-mode.

Songtech-0912 commented 3 years ago

@Sciss Haha funny thing, the screenshot is on Linux :P it’s my customized version of Awesome WM

sosasees commented 3 years ago

Today I made my own version of the Tenacity webpage. I remade the original (because I couldn't find the source code) and then I added the changes that I suggested myself.

You can try my working prototype here.

Light Mode Webpage Scresnshot Dark Mode Webpage Screenshot

I considered typing "Community" instead of "Source", but then I didn't because there's also this eMail and IRC stuff that could also be labelled as "Community", so having 2 sections titled "Community" would be confusing. So I kinda just left this stuff as the basic links they were before which isn't too great as everything else has been upgraded to buttons.

But I do believe that I very much improved the webpage by highlighting the important part which is the Download button, and by adding a screenshot over Anything else so that it'd be even more guaranteed to be the very first impression on the page and give a very good idea of what Tenacity is before the visitor could even think about reading the text.

In the end, the main goal of the page is still to get interested people to consider downloading Tenacity. And in that respect, this design succeeds more than the previous one.

I am looking forward to constructive feedback and your own working websites.

Semisol commented 3 years ago

because I couldn't find the source code

https://git.sr.ht/~tenacity/tenacityaudio.org

Semisol commented 3 years ago

And the width might be too small, but I'll see later.

Songtech-0912 commented 3 years ago

@Sosasees It does work quite well, but I have 2 major issues with it.

I do hope this constructive feedback will be helpful.

Songtech-0912 commented 3 years ago

@Sosasees Also would you mind collaborating together on Penpot? It is a free-as-in-freedom platform for designing websites and applications, and we can work on separate designs at the same time. And we can give instant feedback to each other. Most designs start like this, having a lot of separate designs by different people, and slowly the good things of each are combined together until we have a final design.

sosasees commented 3 years ago

I made a few adjustments to my previous redesign, which was based on the original design that I did not make.

This is the old design:

Light Theme Screenshot Dark Theme Screenshot

This is the new design:

Light Theme Screenshot Dark Theme Screenshot

The notable changes are:

  1. The page now responds more intelligently to different Window Sizes. I want to thank @Songtech-0912 for making me aware of CSS Flexbox. I then found out about CSS Grid by myself. These techniques really made it easy to make the page responsive.
  2. There's now a proper "Community" section with all the Community buttons.
  3. The Screenshot now switches between a Light variant and a Dark variant depending on the Theme. (It is undesired that both Screenshots have a different aspect ratio. As Tenacity is still not ready for release and I don't have any experience compiling programs myself, I could only use the Screenshots I found in this discussion. But this possibility for adapting between Light/Dark Themes is used, and my opinion is that having the Screenshot adapt between Light/Dark Themes is much better than it not doing so, despite this minor problem.)
  4. The Download and Source buttons no longer stick to the top of the screen.
  5. The Features list now decorates every Item with a decorative icon. I am using the Tenacity Icon as a Placeholder. Unique Icons representing each feature will come soon. I originally wanted to make them Red like the Tenacity Logo, but then I decided to make them text-colored so that they wouldn't be too distracting, as these Icons are much more decorative and much less informative by nature, even after they're replaced from the Tenacity Logo to the Final icons.

I want to hear your general reaction and feedback: What did I improve? What did I do not so good and how could that be improved?

RoaddogLabs commented 3 years ago

The mockups look good.

When a user thinks "community" they don't think source, IRC or any of the geeky stuff. They think about help and community in the actual use of the program. You aren't going to get that many devs coming and downloading the project. The overwhelming bulk of the traffic will be from users that want to edit audio not pound out code. I doubt many if any regular users of the program will build from source or as stated a few times prior know what Github or source hut are. I don't build any of the FOSS software I use in everyday settings if I'm not contributing or helping a project.

The page should focus on end users of the program. Dev outreach can be on the platforms like sourcehut and Github where the devs hang. That's not to say there shouldn't be any outreach to devs on the main program page but remember those coming to the site are looking to use a program not develop it. Don't reinvent the wheel. Look and see how other successful FOSS programs present to the users and follow that as a model applied to Tenacity. Not necessarily copying but more as inspiration and guidance based on what those program teams have learned over the years presenting to users.

nbsp commented 3 years ago

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.