Modern redesign of entire website

[thomsste]

Description
I propose the following changes in my PR:

• Redesign and „Rebranding“ of TUfast
• One-Pager instead of multiple sites
• More modern design

References
I like to design stuff, so I designed this to look more modern and fun.

Changes in detail

• Design changes across the page
• Redesign of the entire page to fit in one-pager (recycled pages as components)
• Revised Texts (German and English)
• Breakdown of features in cards
• Reinforcement and repetition of CTAs
• Member images now have a fallback image, no more endless looping when fetching missing images from external sources.
  On that note: @Noxdor Your image is not available from your site anymore.
• Adjustments for mobile and improved contrast
• Added optimized favicon
• Using tabler icons now, instead of phosphor icons
  On that note: I'm working on a update of the settings page and implemented tabler icons there as well, since they allow importing them globally.
• Team expanded to include AKORA, Tom, "You?" and myself (pretty please)

Testing
I tested my changes on Chrome and Firefox, both on desktop.
Couldn't test on mobile, only checking with dev tools responsive-tool.

[OliEfr]

Very exciting! I'll check sometime next week. I might have some minor wording suggestions.

[Noxdor]

• On that note: @Noxdor Your image is not available from your site anymore.

Oh damn I forgot that I was hosting a file there for TUfast, I took that server down last week or so. Do you remember what file was hosted/pulled from there? Maybe I still have it and can provide it to you so that you can find another way to integrate the photo into the webapp.

[thomsste]

It was your profile picture, we could use your github profile picture link instead

[OliEfr]

Very good! I really like the modern look and design choices.

I will leave a few comments:

• The favicon is white, giving no contrast on my white browser theme. I assume you work in dark mode, and there it looks better? I assume that many of our users are not tech-savvy and don't change the default white browser theme.
• I like the "You / Du?"
• I think hyperlinks are missing for some keywords (Datenschutzerklärung, Open-Source, Stifterverband, output.dd). Maybe this was intentional to not guide users away from the page? I think that at least GitHub should still be linked somewhat prominently, as we also want to attract developers. For the rest, it would be good if everything is linked at least once, but I leave the choice to you of how and where, eg, it could also be only at the bottom of the page.
• For the long text "An der TU Dresden jonglieren": Blocksatz
• "4000 Studierenden und Mitarbeitern"
• Team: Maybe sort by active and former? I'd prefer that, but leave it up to you.
• Can you remove "oder bei matrix"?
• FYI, you linked your website that is password-protected
• I don't like "Weniger Klickstress", it is a rather negative connotation compared to "The Productivity Tool". "Less click stress" also sounds kinda weird. I think it should be a more positive phrasing. "TU Dresden" is already there, but maybe make it more prominent again so that the students feel addressed immediately.

I just looked at this during a train ride and had internet the entire time 🚆

[thomsste]

Hi Oli, thanks for reviewing! I addressed all your comments.

• I changed the favicon to blue which works for both dark and bright interfaces.
• Added all hyperlinks
• Did not change the about text to justified: I would argue against justified text because, although it may look visually appealing, it reduces readability.
• text adjusted
• team sorted
• matrix removed
• removed my website
• changed the headline
• updated noxdor's profile picture link to be from github

By the way, internet during the entire train ride? Sounds like a story from the Paulaner Garden

[OliEfr]

Alright, looks good.

I don't want to be nitpicky, but I am still trying to think on how the heroTitle can be improved. Currently the linebreak is weird for me

I like the: "Dein Produktivitätstool", and the "Für Studierende, von S..." line.

Maybe just bold and additionally bright white "TU Dresden" in the seoncd line? (Just an example)

Or

First line: "Dein Produktivitätstool"
Second line: "Für TU Dresden Studierende (und Mitarbeiter)" or "Schneller die Online-Tools der TU Dresden navigieren" or as is <-- entire line bright white or just the "TU Dresden"
Third line (as is): "Für Stu..."

Do you also want to add "🔥 Firefox on mobile" to available devices? I'd then release that first.

---

One could indeed assume I relax in a beer garden here in munich all day.

[OliEfr]

I just saw for the german version the linebreak is more suitable

Maybe hardcoding linebreaks is an option, but I guess it depends on windows size..

[thomsste]

I wasn't entirely happy with the hero section myself, so no worries bringing it up again! I experimented a little bit and created a few variations. I know you liked the line with the short info, but it was just not in the right place. My favourite is Layout 2, Text 4 – only „von Studierenden“. What do you think?

https://drive.google.com/drive/folders/1kGNVRk_cQtnzEX6ej7F0Ef21upElHhxc?usp=sharing

For line breaking and window size issues, I think we will be able to handle that just fine with CSS. :)

[OliEfr]

Alright, cool. I think all of the versions are fine, as the purpose of TUfast is immediately clear on all of them.

My favs are
L1 T3
L1 T4 only ...
L2 T3
L2 T4 only ...

I think that for L2 the "Jetzt auch für FF mobile" is maybe a bit too prominent, even above the main title and with the flame. It might be a bit slightly better fitting as in L1 to the other available browser, as the user would expect it there. I'd definetly keep the flame in any case.

[thomsste]

I adjusted the hero design according to our favs. Line breaks look good now as well.
And fixed the error on build.

[OliEfr]

If you ever need a reference for Deutschlandstipendium or something let me know.