Design System

[sosasees]

@bitsper2nd wrote in this comment:
The first step would be to actually do a Design System for Tenacity.

A Design System is a documentation of design elements
for making collaborative design easier and consistent.

þis thread is for shaping þe tenacity design system, because we don't have one yet.

[sosasees]

Let's start with þe colors, because any good design system has good colors.
¿How about þese ones based on my tenacity webpage design?:

[bitsper2nd]

Well here is you're my feedback. This time with some visuals to help you and anyone else reading this. I will start with saying; Good job on the color scheme! Color are greats and have nice contrast. This was tested on Firefox.

light theme

dark theme

Here is how the site looks on a phone and tablet:

iphone X

ipad

Now you may wonder as to why I am posting screenshots of the site? Well is to compare them to the desktop.

Desktop

As you can see there is a lot of wasted space on this version of the site. One easy fix for this would be to make content below the header use two columns.

Buttons

Finally, the buttons in the documentation are inconsistent. They should have the same width and height. Some of those buttons could serve better in a navigation bar. This is all the feedback I have for now. Hope you can find it helpful.

PS: Not really relevant, but just in case someone is curious. The system font you see on the screenshot is called Metro Nova.

[sosasees]

Thank you very much for the suggestions.
I have put them into my webpage design.

These are the relevant changes:

• Moved the "wall of buttons" to the bottom of the page,
  repeated the most important buttons in a top bar
• Resized the buttons on the "wall of buttons" to be either full-witdh or half-width
  with no inbetwens like before
• Changed the "features list" from a simple list to a responsive grid
• Limited the size of the screenshot to further remove the perception of "too much whitespace".
  Whitespace is only too much if it's much more than on most of the website.
  Previously, the screenshot being much wider than anything else
  created the perception of a lot of unused space on the left and right sides of the page.

[n0toose]

Feedback gathered from Mastodon and Twitter:

• not a huge fan of the max text width, feel that it should be a bit bigger on desktop, I really like the Features section tho
• Looks better on mobile. (Followed by an "I agree")
• Really like seeing the download, docs, and source code links up top. Projects tend not to do that anymore, this is refreshing. I'd say, personally I'd prefer to see more text there and a couple more screenshots, but all in thumbnail form, below some of the useful text that's now below the large screenshot.
• Looks really good. The download button is way too big.
• It looks great! A clean design is always so welcome. The first sentence tells the visitor what Tenacity does and then immediately gives easy access to the three top locations we'd want to visit next. Only then do the graphics and more in-depth detail follow. I'd go for a slightly more...dynamic(?) showcase graphic. If that's even possible for an audio editor! The features section looks slightly haphazard and is perhaps missing a feature: respect. "No opt-out tracking or telemetry". (Note: Audacity's tracking is opt-in now, by the way)
• Clear, approachable, and zero learning curve! Well done sosasees :)

[n0toose]

An interesting idea would be moving Key from the website to the web console instead!

[sosasees]

¿what's þe web console?