Ich denke, deiner Seite fehlt es an Konsistenz. Links/Buttons, Überschriften, Bilder, Hintergründe, ... - auf jeder Seite sieht es immer wieder anders aus. Die ungünstige Platzaufteilung von verschiedenen Elementen verstärkt diese Unruhe. Dazu gesellen sich Unfeinheiten im Positionieren und Anordnen einiger Inhalte. So wirkt die Seite oft nicht ästhetisch.
Zuallererst würde ich dir empfehlen, dir zu überlegen, welchen Stil du denn nun vertreten möchtest und was tatsächlich zu dir passt. Wenn ich mir den Header anschaue, erwarte ich zuerst ein eleganteres Auftreten. Die Farben und die Schrift lassen sich zu einem Musiker der Klassik gut zuordnen. Wenn ich nun auf die About-the-artist-Seite gehe, schlägt mir plötzlich ein völlig anderer, jugendlicherer Stil entgegen. Ohne Kontext könnte man vielleicht das Electronic-Musikgenre vermuten. Dazu steuert nicht nur dein nächtliches Profil mit Kapuze bei. Es sind vor allem die unterschiedlichen Schriftstile, die hier verwendet werden.
Suche Stichworte, die dich / deine Musik tatsächlich repräsentieren und schau dann, welche Farben/Farbstimmungen und Schriftstile dazu passen könnten. Das wird ein wenig Ausprobieren erfordern, evt. kann Adobe Color dabei helfen. Lass dich ebenso von anderen Künstlerportfolios inspirieren, die sich deinem Style ähneln.
Es sollte nur nicht mehr alles je Seitenelement gegeneinander laufen.
Ein Negativbeispiel sind bei dir die Bilder, die manchmal an den Ecken abgerundet sind, manchmal wiederum nicht, ohne dass sich daraus eine Logik ableiten lässt.
Ein zweites großes Konsistenzproblem liegt in der Gestaltung von Navigationselementen und der Texthierarchie.
Bei dir wechselt sich der Style für Überschriften von Seite zu Seite, Sektion zu Sektion immer wieder ab. Mal ist die Überschrift unterstrichen, mal hat sie eine andere Farbe, mal besteht sie nur aus Großbuchstaben, mal ist es ein anderer Schriftstil, mal ist sie linksbündig - dann wieder zentriert. Im HTML-Code sieht es an der Stelle ebenfalls nicht gut aus. Ebenen (z.B. h1, h2, h4) werden übersprungen und HTML-Elemente wie strong oder u zweckentfremdet (sie sind nicht dazu da, Überschriften zu kennzeichnen!).
Gehe all deine Seiten besser noch einmal durch, sammel die Inhaltsmodule, die du verwenden möchtest (Linklisten, Teaser, einfache Textmodule) und schaffe dazu ein einheitliches Modell, bei dem die Texthierarchie deutlich wird (sowohl im Markup, als auch visuell - bspw. mittels Schriftgröße und Farbe). Vermeide nach Möglichkeit Sprünge zwischen Schriftstilen, horizontaler Ausrichtung und Farben.
In dem Zuge könntest du zugleich die CTAs (Buttons, Links) überarbeiten, sodass immer klar erkennbar ist, dass es sich gerade um die Navigationselemente der Seite handelt. Plane Status wie Hover, Fokus mit. Es hilft Nutzern ungemein, wenn ein interaktives Element bei Interaktion seinen visuellen Status anzeigt.
Auffällig ist zudem, dass du oftmals nicht geprüft hast, ob ein Mindestkontrast zwischen Vorder- und Hintergrundfarbe gegeben ist. Schwarz auf Schwarz, Rot auf Graubraun - das beißt sich. Generell würde ich die Hintergrundfarbe nicht je Seite immer wieder ändern und auf Farbverläufe gänzlich verzichten.
Einige weitere Punkte zum Design/Inhalt, die mir beim Durchschauen der einzelnen Seiten aufgefallen sind (ich habe mir nur die englische Sprachversion angesehen):
- Der BCP47-Wert des HTML-Dokuments (lang-Attribut auf html-Element), der die Sprache angibt, ist (da habe ich doch einmal kurz geprüft) in fast allen Sprachversionen wohl nicht ganz richtig. Für EN ist es en-PH (philippinisches Englisch), für DE ist es de-AT, in ES ist es es-AR. Das solltest du nochmal unter die Lupe nehmen. Berücksichtige dabei deine URL-Struktur. Wenn du z.B. explizit de-AT anbieten möchtest, würde ich der Eindeutigkeit halber die URLs auch auf /de-AT/ ändern.
- Der Menüpunkt Home ist eigentlich überflüssig, da bereits das Logo auf die Startseite verlinkt.
- Die Menüpunkte in der mobilen Navigation nach rechts zu positionieren, statt linksbündig oder zentriert mit Klickfläche über die komplette Breite, halte ich für keine gute Idee. Es ist schwieriger, Untermenüs zu öffnen.
- Deine Inhalte sind nicht nach dem ersten Viewport ausgerichtet, was vor allem bei der Stage auffällt. Das heißt, ich muss erst scrollen, bevor ich den Titel "Pianist / Artist..." sehen kann. Auf einigen anderen Seiten (z.B. About-the-artist, Gallery, Upcoming-music-projects) könntest du die Inhalte weiter nach oben ziehen. Auf diese Weise hältst du Besucher eher auf der Seite, da sie einen früheren Einstiegspunkt zu deinen Inhalten finden.
- Die Erzählperspektive (He...) ist etwas distanziert. Überlege doch einmal, ob es nicht besser passen würde, dich aus der Ich-Perspektive zu präsentieren. Es schafft jedenfalls eher eine Bindung zum Leser.
- Die Follow-zigapiano-on-Seite würde ich vermutlich löschen. Im Footer würde ich die Icons für die Social Links nutzen, jedoch in der Breite deutlich gestaucht. Die Icons auf der Stage würde ich des Weiteren entfernen, denn sie passen dort inhaltlich nicht wirklich hin.
- Die Boxen auf Listen-to-zigapiano sehen ehrlich gesagt grausam aus. Sie wirken wie lieblos eingefügte Fremdkörper. Der Button ist unverständlicherweise immer wieder anders positioniert, obwohl sich die Höhe der Boxen eigentlich nicht ändert und die generelle Anordnung ist ungünstig, denn sie zwingt den Nutzer zum Scrollen, obwohl der Inhalt selbst auf den ersten Viewport passen würde. Als allgemeine Maßnahme würde ich die Links zu einer zusammenhängenden vertikalen Liste zusammenfassen, evt. in einer horizontal zentrierten Box. Die 37 weiteren Musikplattformen... wären vielleicht trotzdem (in einer Aufzählung in einem Paragraph) erwähnenswert? Warum findet sich so eine Detailinformation nur im FAQ?
- Die Teaser auf Releases sind in ihrer Form nicht einheitlich (unterschiedliche Bildgrößen und Bildeckvarianten, ungeordnete Texte und Buttons).
- Die Recording-session-Seite ist in ihrem Stil eine der geordnesten Seiten. Allerdings sind die Textboxen unter den Bildern nicht auf gleicher vertikaler Linie, "Take a look at the Studio" ist entgegen der Erwartungshaltung kein CTA und der rote Pfeil davor wirkt wie ein Fragment, welches besser komplett entfernt werden sollte. Beim Übergang von der untersten Inhaltssektion zum Footer fehlt eine visuell trennende Kante, da beide Sektionen die gleiche Hintergrundfarbe verwenden.
- Die Bildauswahl ist ab und an nicht optimal. Einige Bilder sind verpixelt (Bsp.: erstes Bild unter Home Session oder verzerrt - siehe Releases). Bei gleichen Inhaltselementen (s. Upcoming-releases) würde ich möglichst gleiche Bildschnitte verwenden.
- In der Gallerie würde ich alle Fotos entfernen, die du schon auf anderen Unterseiten verwendest. Fotos, die sich nicht direkt auf dein Fokusthema (deine Musik) beziehen, würde ich vermutlich streichen oder in einen anderen Kontext setzen. Wenn deine Musik beispielsweise von einer Reise besonders inspiriert war, könnte man das entsprechend präsentieren. Wenn es dir wichtig ist, deinen Hund zu zeigen, würde ich das dennoch auf ein Bild reduzieren, welches ihn evt. im Studio zeigt und das dann unter die anderen Studiobilder mischen. So integrierst du Persönlichkeit, aber verlierst dennoch nicht den inhaltlichen Fokus. Das Chill-time-Foto würde ich entfernen, denn es erscheint qualitativ besser als alle anderen Bilder - ein merkwürdiger, ganz sicher ungewollter Kontrast.
- Manchmal gibt es große leere Bereiche (z.B. am Footerende oder unter Orchester Recording) und einige Abstände zwischen Sektionen könnten stärker reduziert werden. Auf Upcoming-releases würde ich den Abstand zwischen Songname und Bild etwas vergrößern.
- Einige Menüpunkte beginnen mit einem Kleinbuchstaben.
- Auf Upcoming-music-projects ist am Ende der ersten Sektion aufgrund eines fehlenden Stylings ein kompletter Satzteil nicht sichtbar.
- Denn Sinn des FAQ würde ich deutlich hinterfragen. Die meisten Fragen beantwortest du bereits auf deinen Unterseiten. In gewisser Weise nimmst du so den Anreiz, überhaupt auf eine der Detailseiten zu gehen.
- Schöner wäre es, Songs direkt über einen Musikplayer einzubinden, statt auf eine externe Seite zu verweisen. So wird ein Nutzer nicht von deiner Seite weggeleitet. Spotify bietet Embeds an.
- Die Kontaktformulare würde ich zu einem Formular zusammenführen. Eine Auswahlbox kann dazu dienen, den Zweck auszuwählen.
- Die Platzhaltertexte deiner Formularfelder sollten sich farblich stärker vom Hintergrund abheben. Im Grunde könntest du sie aber auch gleich entfernen, denn sie bieten keinen Mehrwert. Platzhalter sind eigentlich dazu da, zu verdeutlichen, welcher Typ an Eingabe bzw. welches Format erwartet wird (z.B. mittels eines Beispielswerts). Die Feldbeschriftung übernimmt das Label.
- I agree to the Privacy Policy*: Ich würde den Text als Label für die Checkbox wählen. Zu dem Sternchen gibt es übrigens keine Fußnote.
- Den E-Mail-Link unter deinem Formular kann man nicht selektieren oder anklicken. Zudem zeigt er auf ein falsches Ziel https://). Verwende eine mailto-Adresse.
- Der Footer ist zu sehr durch Links aufgebläht, die bereits in der oberen Navigation vorhanden sind. Das macht bei Seiten mit so wenig Scrollfläche keinen Sinn. Bezüglich der Textmarke würde ich zum einen hinterfragen, ob es sie braucht (der Name wird im Header und auf der Stage erwähnt) und wieso sie dort in Großbuchstaben geschrieben wird. Gerade bei Künstlernamen ist es doch besser, Klarheit zu haben, welche Schreibweise denn nun richtig ist.
- Der Legal-Notice-Link im Footer verweist auf /impressum (Deutsch). Richtig wäre /legal-notice.
- Zum Impressum: Schau dir die unteren Paragraphen an. Der Text startet oftmals auf der falschen Zeile.
Ein paar zusätzliche rechtliche Hinweise:
- Dein Hinweis über Google Fonts auf Privacy-Policy ist ungenügend, denn ich habe keine Möglichkeit, diesem Tracking zu widersprechen. Wenn ich mir die aktuelle Lage aber anschaue, werden die Schriftdateien stattdessen über cdn.zyrosite.com eingebunden.
- Es macht keinen guten Eindruck, wenn ich direkt sehe, dass deine Legal-Texte mit Copilot zusammengebaut wurden.
Auf Ebene der technischen Umsetzung sieht es leider auch nicht gut aus. Das HTML ist voller Fehler (z.B. falsche Verschachtelungen, invalide/fehlende Attribute und Attributwerte), wie bereits oben angesprochen, werden einige Elemente zweckentfremdet, die Texthierarchie ist falsch und das DOM ist überhäuft mit Inline-Styles und leeren Kommentaren. Da du offensichtlich Zyro nutzt, hast du darauf sicherlich nur begrenzt Einfluss. Prüfe zumindest überall, wo du selbst HTML eingefügt hast, ob es valid ist.
Für Textunterstreichungen wäre CSS vorzuziehen:
<span style="text-decoration:underline">Some text</span>
Das u-Element dient für Fälle, in denen du bspw. einen Eigennamen oder ein Fremdwort in einem Text besonders kennzeichnen möchtest.
Bei deinen Bildern wäre außerdem zu prüfen, in welcher Form du sie einsetzt und ob sie dementsprechend eine Bildbeschreibung (alt/Alternative Text) brauchen. Grundsätzlich gilt: Wenn das Bild aktiv zum Inhalt beiträgt (also nicht dekorativ ist), braucht es einen Alternativtext. Das wäre zum Beispiel bei all deinen Bildern aus der Gallerie der Fall. Der Alternativtext sollte kurz, prägnant beschreiben, was auf dem Bild zu sehen ist. Zum einen wird er angezeigt, sollte das Bild beim Nutzer aus irgendeinem Grund nicht geladen werden und zum anderen wird er von Screenreadern (Hilfsmittel für Menschen mit Sehschwäche, Blindheit) erfasst.