Looking forward to ffmpeg-by-example! I think it is a great thing to have a minimalist website at our disposal to better learn ffmpeg, and being able to point to a website for lots of concrete examples to be used eventually.
This issue is aimed at providing UI improvement suggestions for the website: colors, responsiveness, eye candy, consistency, basically styling.
Although, I'll make sure not to suggest too "bloated" suggestions (a bunch of animations for instance) as keeping the website minimal is a quality in and of itself.
If I find various things or nitpicks that I think could be improved, I will report them here. If I have time, maybe I could also contribute some CSS on my own.
However, I'm no professional designer by any means. I am just sharing what I think would be better; so if an actual designer wants to correct me on something, I'll gladly stand corrected!
General design
The sidebar should clip to the side in an absolute position, so that only the center-right scrolls down. Right now, it stays at the top, which I think isn't ideal.
I think a better arrangement, more inline with other websites having a side and top bar, would be Home | Discord | Contribute | About. About is generally at the end of the top bar for example.
The main color seems to be red in the homepage, but purple in the example page. Sticking with one main color will probably be more consistent? Although using colors as a means of semantics (one for home, the other for examples) can help as well...
Home page
The font is different between the sub-header and the example title. It kinda confuses me that it's sans-serif in the sub-header and serif in the example title. Out of all the nitpicks so far, this one is by far the least relevant though.
The red dotted border makes it look like the div is being debugged. Maybe put a light solid border not too far from but still darker than the background color instead?
Tags in the sidebar and tags under the example titles don't have the same font, which I find a bit inconsistent. I hope that making all tags monospace can fix that, plus the > tags: part is already monospace.
Not enough contrast on the subtitle, darkening it a bit should fix the issue.
Despite the underline, using pure black for the hyperlinks can be confusing. I suggest using the page's main color instead: purple, or red if that changes.
Inline code has a much bigger font size than normal text, which I don't think is right. A suggestion would be to either just use same-sized monospace, or that plus encapsulating the inline code in a little box like Markdown does on GitHub, Discord and other websites, to better distinguish between code and normal text.
On the contrary, code inside code blocks has a much smaller font size. This is not a problem in itself, but the design of the block is not very space-efficient. I think there is too much padding and border size. Reducing both by taking inspiration once again on websites such as GitHub and Discord can help.
There we go, my... starts counting 10 cents on the topic :)
Looking forward to
ffmpeg-by-example! I think it is a great thing to have a minimalist website at our disposal to better learnffmpeg, and being able to point to a website for lots of concrete examples to be used eventually.This issue is aimed at providing UI improvement suggestions for the website: colors, responsiveness, eye candy, consistency, basically styling. Although, I'll make sure not to suggest too "bloated" suggestions (a bunch of animations for instance) as keeping the website minimal is a quality in and of itself. If I find various things or nitpicks that I think could be improved, I will report them here. If I have time, maybe I could also contribute some CSS on my own.
However, I'm no professional designer by any means. I am just sharing what I think would be better; so if an actual designer wants to correct me on something, I'll gladly stand corrected!
General design
Home | Discord | Contribute | About.Aboutis generally at the end of the top bar for example.Home page
> tags:part is already monospace.Example page
encapsulating the inline code in a little boxlike Markdown does on GitHub, Discord and other websites, to better distinguish between code and normal text.There we go, my... starts counting 10 cents on the topic :)