Kritik zum Design meiner Website?

11 Antworten

Vom Fragesteller als hilfreich ausgezeichnet

Erster Eindruck:

Die Seite ist sehr simpel aufgebaut, bietet kein optisches Feuerwerk o.ä. doch das ist ok. Der Nutzer behält den Überblick und die Farbstimmung ist ausreichend harmonisch. Das finde ich positiv. Interessant wäre letzten Endes nur, wie du Fotos / Bilder präsentieren möchtest.

Ein Vorschlag:

Zumindest die erste Sektion könntest du in der Höhe auf 100vh bringen. Die Icon-Box würde ich weiter nach oben schieben (und nicht als Trenner verwenden), die Überschrift vergrößern und den Introduction Text verbreitern und in seiner Lage zur Box anpassen (so wie es passt). Das könnte den ersten Viewport viel interessanter gestalten.

Da die 2. und 3. Sektion viel kleiner sind, könnten sie sich einen Viewport teilen (jeweils 50vh einnehmen).

Probleme:

a) Da beißt sich einiges in der Anordnung der verschiedenen Elemente auf deiner Seite. Es entsteht der Eindruck, dass du dich nicht entscheiden konntest, ob du alles zentriert ausrichtest, oder rechtsbündig oder linksbündig. Selbst wenn das so gewollt sein sollte, läge die Navigation nicht auf einer vertikalen Linie (Linkskante) mit weiter unten liegendem Text (Hey! (....)).

Am deutlichsten wird dies, wenn man sich die Seite auf einem mobilen Endgerät anschaut.

b) Das nächste Problem sind die Abstände zwischen den einzelnen Textzeilen. Das sticht vor allem heraus, da du die komische Angewohnheit hast, dauernd Artikeltext (hierarchisch gesehen) über deine Überschriften zu platzieren, wo er nicht hingehört. Über einer Überschrift steht, wenn, nur eine Tagline und die ist viel kleiner und ja - hat auch anderen Inhalt. Der Text über codezz bspw. stellt inhaltlich schon eher eine Tagline dar.

c) Wenn ich mir die Seite mobile (landscape) anschaue, rutscht der Introduction Text unter die große Icon-Box und das Satzende verschwindet dadurch sogar.

d) Links sind nicht als Links erkennbar. Ich würde hierbei nicht auf eine Farbänderung setzen, sondern die Texte einfach nur klassisch unterstreichen. Ich denke, dies dürfte am besten passen.

Ein Gegenstück dazu ist die Icon-Box. Deren einzelne Punkte erscheinen wie eine Hauptnavigation, doch keiner der Punkte stellt einen Link dar. Diese Erwartung wird vor allem durch die Position der Box gesät, da sie zwischen erster und zweiter Sektion liegt, als sei sie ein Navigationselement, welches den Nutzer durch den folgenden Content navigiert.

e) Welchen Mehrwert liefert der Hover-Effekt auf den Skill-Diagrammen? Eigentlich keinen, weshalb ich den Effekt entfernen würde. Stattdessen könnte die Textfarbe für die Prozentangaben dunkler gestaltet werden - vielleicht sogar gleich schwarz oder in der jeweiligen Diagrammfarbe.

Und da ich gerade dabei bin: Wieso haben die Diagramme für CSS und Discord eigentlich die gleiche Farbe? Derzeit reißen die Farben außerdem etwas heraus - du hast mit blau und grün kalte Farben, die einzige warme Farbe ist orange. Biete doch einen Wechsel an. HTML z.B. in gelb, Discord in grün, der Rest bleibt. Oder.. wenn ich die Diagramme in Relation zu dem gesamten Seitendesign anschaue, wäre vielleicht eine einheitliche Farbe (z.B. nur blau) passender oder eine andere Farbe, die sich mehr an die bisher gewählten anlehnt.

f) Bei dem Button im Kontaktformular könntest du dir bezüglich seines Stylings nochmal etwas überlegen. Derzeit wirkt er ein wenig wie ein Fremdkörper.

Inhaltliche Kritik

a) Ratschlag: Benenne dein Impressum als das, was es ist: Impressum. Der Abschnitt Datenschutz ist leer. Wenn dort nichts folgt, muss er raus. Ich kann mir eh nicht vorstellen, wozu deine Seite diesen Abschnitt brauchen sollte, außer, du möchtest Besucherdaten bspw. via Google Analytics tracken.

b) Ratschlag: Mach aus deiner E-Mail-Adresse einen mailto-Link. Das ist benutzerfreundlich. Genauso könntest du den Hinweis auf gammelsalon.de als Link verknüpfen und den Discord-Nutzer im Footer (dann sehen alle Footer-Items auch endlich gleich aus).

c) In deinem Footer gibt es zweimal den Link zum Kontaktformular. Da die zweite Spalte mit nur einem Link (und einer eher unpassenden Überschrift, immerhin dreht sich die gesamte Seite um dich) eher sinnlos ist, würde ich sie an deiner Stelle rausschmeißen. Das, was übrig bleibt, ist nicht viel. So solltest du überlegen, inwiefern dein Footer überhaupt noch Sinn macht. Scrollwege werden dadurch bisher nicht verkürzt.

d) Rechtschreibfehler / Korrekturvorschläge:

  • andem - wird nicht zusammengeschrieben
  • sieben tausend - wird zusammengeschrieben
  • Money - das hört sich seltsam an, wieso nicht einfach Geld?
  • (...) umfasst der Server umfasst (...) mehr als 300 Nachrichten (...) - er überträgt sie wohl eher
  • Zum fotografieren (...) - Fotografieren ist in dem Fall ein Substantiv
  • Bei mir begann alles im Februar 2017 wo mich (...) - fehlendes Komma und besser: Bei mir begann alles im Februar 2017, als mich (...)
  • (...) eine eigene Webseite erstellte. - (...) eine eigene Webseite erstellt hatte.
  • Mittlerweile versuche ich, mich (...) - Komma raus
  • entwickel - entwickle
  • Nutze bei jedem Feldlabel (Kontaktformular) einen Doppelpunkt am Ende, um stringent zu bleiben.

Technische Kritik

Mir ist bewusst, dass deine Seite noch nicht fertig ist. Dennoch gibt es schon einige Punkte, die ich bereits ansprechen möchte.

  • Bei der Meta-Angabe für den Viewport hast du dich im Attributnamen vertippt, es muss device-width heißen.
  • Da deine Seite über HTTPS läuft, muss jeglicher eingebundener Inhalt ebenso über HTTPS geladen werden, ansonsten werden einige Browser das Zertifikat ignorieren. Lade jQuery daher über die HTTPS-Adresse. Danach dürften Funktionalitäten wie die mobile Navigation auch wieder funktionieren.
  • Nimm Inline-Styles aus deinem Markup heraus, regele wenn möglich alles in deiner CSS-Datei.
  • Schmeiße überall die align-Attribute heraus und verwende stattdessen CSS. Das align-Attribut ist veraltet.
  • Das type-Attribut auf script-Tags benötigst du nicht mehr.
  • Bei der Pfadangabe zu Font Awesome verwendest du Backslashes statt Slashes. Auf der Kontaktseite nutzt du zudem noch den Pfad von deinem lokalen Projekt.
  • Hier fehlt ein Leerzeichen zwischen den Attributen:
<section align="center"class="discord">
  • So etwas kannst du verkürzen:
margin: 0 auto 0 auto;
  • Die circle.css wird derzeit nicht geladen (und gibt daher einen 404-Fehler zurück). Womöglich fehlt sie.
  • Eine angepasste 404-Seite könntest du bei der Gelegenheit noch einpflegen. 😁
  • Wieso unterscheiden sich deine head-Sektionen überhaupt? Gibt es mehr als den Grund, dass du für bestimmte Seiten bestimmte CSS-Dateien verwendest?
  • Nutze Font-Awesome für das Burger-Menu-Icon (http://fontawesome.io/icon/bars/)
  • In der CSS-Klasse .header-content-all gibst du dem Property vertical-align den Wert center. Dieser ist aber invalid, richtig wäre middle.

Weiter schaue ich mir das CSS nun nicht an.

Bezüglich SEO ließe sich natürlich noch einiges machen - bspw. in der Benennung der CSS-Selektoren, Dateinamen, etc. oder beim Markup (jede Seite sollte eine h1-Überschrift haben, usw. ...). Ich denke allerdings, dass dies vorerst nicht so wichtig für dich ist. Wenn doch, dann würde ich dir empfehlen, vorerst Suchmaschinen zu blockieren. Entweder via meta-Tag oder robots.txt (http://www.robotstxt.org/meta.html). Wenn die Seite fertig und optimiert ist, könntest du dies wieder rausnehmen / anpassen, um einen besseren Start bei Google & Co. zu haben.

Außerdem könntest du deinen CSS-Code durch einen Minifier/Uglifier schicken, vielleicht sogar dein HTML. Beides ist für die Seite nicht wirklich notwendig (da sie ja klein ist), verhilft dir allerdings zu Pluspunkten beim Google Ranking.

Hi,

dein Flatdesign macht (abgesehen vom Font), einen ansprechenden Eindruck. 

Optische Verbesserungsvorschläge

Der Header ist ziemlich hoch. Ich wurde sein Höhe verringern und den Text vor einer weiße Box, mit geringem padding, border-radius und box-shadow platzieren.

Text würde ich an einer Seite ausrichten, solange ich kein mehrspaltiges Grid-System nutze.

Insgesamt würde ich den Contentbereich auf 60-80% verringern, da der Text ziemlich lang ist. Auf größeren Bildschirmen ist das unangenehm.

Technische Verbesserungsvorschläge

Ich würde bei der Positionierung der "work-box" folgendes präferieren (anstatt von margin-top). Diese Lösung ist smarter:

.work-item {
  position: relative;
  top: -5em;
}

Sofern die Attribute für die linke und rechte Seite eines Elements zutreffen, brauchst du bei margin nur zwei Attribute mitgeben.

/* Lange Version */
.example { margin: 0 auto 0 auto; }

/* Kurze Version */
.example { margin: 0 auto; }

Grüße

Fuer einen 13 jaehrigen echt gut! Work-in-progress wie es scheint.

Sehr gut finde ich die Farbpalette - gut gelungen.

Ein paar Anregungen:

In der Desktopversion wuerde ich die Zeilen schmaler machen - Menschen haben ein Problem, lange Zeilen zu lesen. Ein Webfont koennte auch gut kommen, muss aber nicht.

Wenn du schon gern fotografierst, dann zeig das auch :) Ich wuerde statt dem ersten Wllkommens-Text deine Fotos tun - der Text wiederholt sich danach ja sowieso.

Die Skill-Seite wuerde ich ganz rausnehmen (nicht boese gemeint), weil 1) Du hast die (Webdesign-)Skills noch nicht, und haettest du sie, wuerdest du sie nicht so praesentieren 2) Die Seite hat keinen erkennbaren Zweck.

Ich verstehe aber, dass du die Skillkreise cool fandest :) - ueberleg mal ob du sie anders gebrauchen kannst - die kann man teilweise kreativ fuer ganz andere Effekte einsetzen.

Die Kontaktseite ist ein Downer, ehrlich. Schau dir mal im Web Kontaktseiten an und ueberleg dann wie du auf deine persoenliche Art, als der kreative mensch als den du dich darstellst, deine Zuschauer dazu stimulieren kannst, dir zu schreiben.

Homepage Aufbau wichtige Begriffe

Hallo zusammen,

ich muss jobbedingt die wichtigsten Begriffe für das Design/den Aufbau einer Homepage wissen. Damit meine ich nicht allgemeine Internetbegriffe wie Content Management oder ähnlich, sondern z.B. Slider, Sidebar u.s.w. Kennt jemand eine gute Seite auf der die Begriffe alle stehen? Oder könnte vielleicht sogar jemand ganz kurz die allerwichtigsten erklären?

Gruß

...zur Frage

Theme für Webseite WordPress

Hallo,

Und zwar wollen wir nun eine Webseite mit einigen Funktionen aufbauen.

Die Seite soll mit WordPress gemacht werden und vom Aufbau so wie im Bild sein.

Hat jemand ein vernünftiges theme das diesem Schema entspricht.

Leider finden wir da nichts was diesen Aufbau hat. Wäre echt klasse und bedanke mich für eure Hilfe.

...zur Frage

CSS "Updates" werden vom Browser nicht geladen?

Hey,

Info: ich arbeite grade an einer Seite, wo ich beim Header und der Nav meistens ein dunkles Bild als Hintergrund verwende.

Es war jetzt aber schon mehrmals so, dass der Browser meine Style-Updates wenn ich weiter arbeite nicht aktualisiert (zB wenn auf einen Div +4rem Padding ist sieht man es nach neuladen immer noch nicht). Normalerweise hänge ich da an den Datei-Namen (zB style.css) einfach ein \v2 oder so dran, dann geht es auch. Nur dann sind meistens die Bilder die ich einbinde (in dem Fall das Header-Bild) weg. Es taucht auch nicht mehr auf.

Was bei mir grad nur hilft ist wenn ich den Datei-Namen änder, aber auf dauer ist das bisschen mühselig. Kennt wer noch einen anderen Trick wie ich den Browser dazu bewegen kann, dass Design zu aktualisieren?

Grüße.

...zur Frage

Sitemap anzeigen lassen

ich würde mir gerne die sitemap einer webseite anzeigen lassen. es gibt auf der seite aber keinen menüpunkt "sitemap". gibt es ein tool oder webseite wo man die url eingibt und es zeigt einem den aufbau? oder irgendwas anderes? ich benutze chrome oder safari (mac). danke für eure antworten!

...zur Frage

Was möchtest Du wissen?