Modernes Webdesign - Gut oder Schlecht

Liebe GF-Gemeinde,

ich möchte eine Diskussion über modernes Webdesign anstoßen und eure Meinungen dazu hören. Ist es gut oder schlecht? Mir persönlich kommt das heutige Webdesign ineffizient und unübersichtlich vor, insbesondere im Vergleich zu den Jahren 2012 bis 2016, als Websites noch mäßig bis kaum JavaScript verwendet haben.

Mittlerweile scheint es notwendig zu sein, für jede Kleinigkeit eine JavaScript-Animation zu integrieren. Ein dickes, fettes Button-Design öffnet oft animierte Menüpunkte, was die Rechenleistung des Geräts unnötig beansprucht. Früher war das Webdesign simpler und fokussierter auf die Benutzerfreundlichkeit, ohne übermäßige Effekte und Animationen.

Hier sind ein paar Punkte, die ich zur Diskussion stellen möchte:

1. Performance und Effizienz:

- Viele moderne Websites belasten die Rechenleistung und Akkulaufzeit von Geräten stark. Vor allem bei älteren Geräten oder schwächerer Hardware kann dies zu einem langsamen und frustrierenden Benutzererlebnis führen.

- Ist die zunehmende Nutzung von Animationen und dynamischen Inhalten wirklich notwendig oder geht sie auf Kosten der Effizienz?

2. Benutzerfreundlichkeit:

- Durch die Vielzahl an Animationen und Effekten kann die Benutzerfreundlichkeit leiden. Nutzer müssen oft mehr klicken und warten, um zu den gewünschten Informationen zu gelangen.

- War die Benutzerfreundlichkeit früher besser, weil die Seiten einfacher strukturiert waren?

3. Designtrends und Ästhetik:

- Natürlich spielt auch der ästhetische Aspekt eine Rolle. Moderne Websites sehen oft beeindruckend aus und bieten eine ansprechende visuelle Erfahrung.

- Ist dieser ästhetische Fortschritt die zusätzliche Rechenleistung und mögliche Unübersichtlichkeit wert?

Ich bin gespannt auf eure Meinungen!

Internet, Webseite, Design, JavaScript, Webdesign
Wie React Icons ausfüllen / Alternative?

In meiner React Component (siehe unten) ist leider das Icon ArrowUpCircleSharp von "react-icons" innen unausgefüllt was nicht schön aussieht wenn es sich über Text und Bilder bewegt, andere Icons wie von FontAwesome Material Icons haben das gleiche Problem. Ich habe es versucht mit den Props Stroke, Fill und mit CSS background, ändert aber nur das Schwarze außen und nicht innerhalb vom Icon.
Was kann ich tun ? Will jetzt nicht umbedingt eine ganze Library einbinden für das Icon, bei react-icons hab ich den Vorteil das es nur die benutzen auch wirklich nutzt,

'use client';
import { useEffect, useState } from "react";
import "../.././assets/styles/components/ScrollToTop/ScrollToTop.scss";
import { IoArrowUpCircleSharp} from "react-icons/io5";


export const ScrollToTop = () => {

const [ScrollY,setScrollY] = useState<number>(0);

useEffect(() => {
    window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))

    return () => {
        window.addEventListener("scroll",() => setScrollY(document.documentElement.scrollTop))
    }
}, [ScrollY])

    return(

        <div
            onClick={()=>{ScrollY > 100 ?
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : 0})
            :
            window.scrollTo({
                behavior : "smooth",
                left : 0,
                top : document.body.scrollHeight});
            }}
        className={`ScrollToTop ${ScrollY > 100 ? " ScrollToTop_Up" : "ScrollToTop_Down"}`}>
                <IoArrowUpCircleSharp/>
        </div>
    )
}
Bild zum Beitrag
App, HTML, Webseite, programmieren, CSS, JavaScript, Informatik, Programmiersprache, Webentwicklung, Frontend, React, node

Meistgelesene Beiträge zum Thema Webseite