Mein neues Design

[Kropff]

Da das aktuelle Design meiner Seite mittlerweile auch schon über drei Jahre auf dem Buckel hat, dachte ich mir, mach mal was Neues. Da ich aber weiß Gott nicht der begnadete Designer bin, stelle ich hier einfach mal ein Konzept zur Diskussion.

Ihr findet es hier. Getestet habe ich das bisher nur im FF. Sagt einfach mal, was ihr davon haltet und was euch stört. Btw: Das ist im Moment nur eine Alpha. Da hakt es noch an einigen Stellen. Aber bevor ich weitermache, wollte ich mal eure Meinung dazu hören. Legt los.

Peter

[wahsaga]

Na ja, die absolute Revolution oder Neuerfindung der Seite ist's schon mal nicht ... aber das war vermutlich auch nicht dein Ziel.

Die alte Farbwahl gefiel mir aber irgendwie besser. Dieses blau-weiß-unterkühlte - da fühle ich mich an den frisch aufgesetzten Standard-Skin von irgendeiner Blogging-Software erinnert.

Ob mir der Wechsel zu einer Serifen-Schriftart gefällt, weiß ich spontan gar nicht. Wenn schon eine solche, solltest du auf jeden Fall die Schriftgröße erhöhen, die Zeilenhöhe vllt. sogar auch etwas. (Das Ding will ja in erster Linie gelesen werden, und nicht „aussehen“.)

Die extra Druckversion halte ich für verzichtbar - überflüssiges wie Navi und Sidebars ausblenden könntest du auch per @media print machen.

Und insgesamt ist mir die Seite etwas zu nüchtern. Für ein Tutorial vermutlich gewollt - trotzdem verweile ich lieber auf Seiten, die etwas Auflockerung bieten. Schon sparsamer Grafikeinsatz, vielleicht ein zur Seitenthematik oder deiner Person passendes Logo, könnte das ganze etwas aus dem trockenen “beware, technical documentation ahead”-Style herausheben.

[Kropff]

Na ja, die absolute Revolution oder Neuerfindung der Seite ist's schon mal nicht ... aber das war vermutlich auch nicht dein Ziel.

Nö, war's nie.

Die alte Farbwahl gefiel mir aber irgendwie besser. Dieses blau-weiß-unterkühlte - da fühle ich mich an den frisch aufgesetzten Standard-Skin von irgendeiner Blogging-Software erinnert.

Da hst du nicht ganz unrecht.

Ob mir der Wechsel zu einer Serifen-Schriftart gefällt, weiß ich spontan gar nicht. Wenn schon eine solche, solltest du auf jeden Fall die Schriftgröße erhöhen, die Zeilenhöhe vllt. sogar auch etwas. (Das Ding will ja in erster Linie gelesen werden, und nicht „aussehen“.)

Werd ich noch mal selber testen

Die extra Druckversion halte ich für verzichtbar - überflüssiges wie Navi und Sidebars ausblenden könntest du auch per @media print machen.

Das sind Uraaaalt-Lasten von 2005. Werde ich wohl irgend wann mal rausschmeißen.

Und insgesamt ist mir die Seite etwas zu nüchtern. Für ein Tutorial vermutlich gewollt - trotzdem verweile ich lieber auf Seiten, die etwas Auflockerung bieten. Schon sparsamer Grafikeinsatz, vielleicht ein zur Seitenthematik oder deiner Person passendes Logo, könnte das ganze etwas aus dem trockenen “beware, technical documentation ahead”-Style herausheben.

Oh Gott, ich als Anti-Designer? Nee, lieber nicht, das gibt einen Katastrophe. Es sei denn, jemand hat eine gute Idee.

Danke für die Hinweise
Peter

[Kropff]

Naja, da das keinen hier interessiert, lass ich erst mal alte "Design" und konzentrier mich auf die Inhalte. Oder sollte ich wieder einen Wettbewerb auschreiben?

Peter

[derHund]

[x] Wettbewerb

So richtig was zu sagen kann ich leider auch nicht, das alte Design spricht mich aber (bis auf seine Navi) auch mehr an - ich kann aber nicht genau sagen, woran es liegt, wahrscheinlich an der vermeintlichen 3D-Optik der Elemente (der neuen Version).

Probleme beim Lesen hatte ich bisher nicht, trotz Serifen. Allerdings hab ich

body {
  font-size: 15px; /** Wieso eigentlich px? **/
  line-height: 1.5;
  max-width: 1400px;
}

verwendet - bei maximiertem Browserfenster macht das Lesen sonst keinen Spass. Generell brauchst du glaub ich mehr Weißraum und eine individuelle Note, damit man dich wiedererkennt - was das sein kann, weiß ich aber auch nicht. Beim Verkleinern des Fenster verhalten sich die Elemente deiner Seite ungewöhnlich, vll. mal min-width definieren ...

Bei hohen Fensterbreiten passt auch irgendwie die Relation zwischen Textbereich und Navigationsspalten nicht mehr, vll. solltest du mal mit relativen Breiten experimentieren.

[Kropff]

... verwendet - bei maximiertem Browserfenster macht das Lesen sonst keinen Spass.

Ich arbeite im Firefox immer mit Strg und +.

Generell brauchst du glaub ich mehr Weißraum und eine individuelle Note, damit man dich wiedererkennt - was das sein kann, weiß ich aber auch nicht. Beim Verkleinern des Fenster verhalten sich die Elemente deiner Seite ungewöhnlich, vll. mal min-width definieren ...

Das sind Liquid-Columns. Ich wollte es so flexibel wie möglich umsetzen.

Bei hohen Fensterbreiten passt auch irgendwie die Relation zwischen Textbereich und Navigationsspalten nicht mehr, vll. solltest du mal mit relativen Breiten experimentieren.

Mach ich doch. ;-)

[fireweasel]

Naja, da das keinen hier interessiert, ...

Sorry, ich hab diesen Thread gerade erst entdeckt.

... lass ich erst mal alte "Design" und konzentrier mich auf die Inhalte.

Keine schlechte Idee.
Vernünftige Browser geben einem doch sowieso die Möglichkeit, per Benutzer-definiertem Style-Sheet die Darstellung dem eigenen Geschmack anzupassen.

Na dann mal los:

0. Allgemeiner Eindruck: Gefällt mir gut und sieht besser|frischer aus als die alte Variante.

1. Im User-Mode (also "mit ohne" Stylesheet") sieht alles sehr übersichtlich und strukturiert aus (als Gegenbeispiel nehme man etwa dieses Forum hier). Das gefällt mir und sicher auch allen Menschen, die auf die übliche Browser-Darstellung verzichten müssen.

2. Schrift, Größen: Serifen-Schriften im Web-Design fand ich früher doof. Mittlerweile bin ich aber der Meinung, dass sie die Lesbarkeit verbessern (wenn die Zeichen groß genug sind). Bei mir sind sie es. Überschriften (und die oberen Navigationselemente) solltest du aber mal in einer serifen-losen Variante ausprobieren. Das sieht meistens besser aus.
Die h2- und h3- Überschriften scheinen die gleiche Schriftgröße zu besitzen. War das Absicht? Beispielsweise beim Text:

4. Potentielle Zielgruppen
Experten mit langjähriger Erfahrung

wirkt das komisch. Man kann nicht erkennen, dass beide Überschriften zu einer unterschiedlichen Hierarchie-Tiefe gehören.

3. Farben und Kram: Ich mag keine Pseudo-3D-Effekte. Ist aber Geschmackssache.
Falls die Hintergrundfarbe der Seite weiß sein sollte: Du hast vergessen, sie zu definieren. Nicht alle Browser sind so eingestellt, dass sie die MSIE-Darstellungs-Eigenheiten übernehmen.

4. Sonstiges: Ich bevorzuge Links unterstrichen. So lassen sie sich besser von anderen Text-Teilen unterscheiden, die die gleiche Farbe haben.

Übrigens: <q>-Tags machen sich ganz gut an Stelle von (typografisch inkorrekten) doppelten Hochkommas.

Die "liquid columns" scheinen beim Verringern der Seitenbreite nicht ganz so flüssig mitzuschwimmen. Einige Hintergrundboxen verlieren ihren Text und Textteile der blauen Navigationsleiste ihren Hintergrund. Ges(ch)ehen mit Opera 9.27 (okay, der zählt ja nicht) aber auch mit Feuerfuchs 3.6.schlagmichtot.

[litterauspirna]

Ich finde von der Sache her den neuen Designentwurf besser als den alten. Nur solltest du die Schrift denke ich auf Arial setzen, da dies die am besten zu lesende Schriftart ist.

Du solltest in dem neuen Design lediglich auf warme Farben wechseln, denn da das ein Tutorial ist darf das die Augen nicht lange anstrengen und das tun kalte Farben leider.

Ansonsten ist der Aufbau vollkommen OK und für den Sinn der Sache absolut ausreichend.

Gruß Litter

[Kropff]

Also mir gefällt das Blau eigentlich ganz gut. Selbst beim langen Lesen strengt es nicht an. hab noch mal ein paar Modifikationen vorgenommen. Schaut es einfach nochmal hier an.

Peter

PS. Das blau bei links gefällt mir noch nciht so gut, aber ich arbeite daran.

[onemorenerd]

Mir gefallen die Änderungen. Entstaubt, aber nicht zu modern. Nach wie vor steht der Inhalt im Zentrum. Das Design lenkt nicht ab, nimmt sich aber auch nicht zu sehr zurück. Fein.
Aber ein wenig Kritik habe ich doch. Das Blau (hint.gif) ist recht kräftig, etwas abgetönter, pastelliger wäre besser. Vielleicht solltest du auch noch mit anderen Farbtönen spielen, z.B. erstmal jeder Bereich (PHP, MySQL, etc.) mit eigenem Farbton – in direkter Gegenüberstellung kann man sich leichter entscheiden.
Über den Überschriften dürfte für meinen Geschmack mehr Abstand sein. Generell würde etwas mehr Weißraum den Text auflockern.
Der Link zum Weiterblättern ist zu dezent und es fehlt das Pendant für zurück. Noch besser wäre das komplette Set "Back, Up, TOC, Next", wie es sich in Online-Büchern bewährt hat.

[Kropff]

Das Blau (hint.gif) ist recht kräftig, etwas abgetönter, pastelliger wäre besser.

Mal sehen, vielleicht nehme ich es aus der Überschrift raus, dann ist der Kopf nicht zu blau.

Vielleicht solltest du auch noch mit anderen Farbtönen spielen, z.B. erstmal jeder Bereich (PHP, MySQL, etc.) mit eigenem Farbton

Also wenn ich irgendwas hasse, dann einen Farbton pro Bereich. Viele mögen das, ich nicht. Außerdem müsste ich dann alles umfrickeln und der Aufwand ist mir zu hoch. Und mein Auftritt soll ja auch nicht wie ein Papagei aussehen.

Über den Überschriften dürfte für meinen Geschmack mehr Abstand sein. Generell würde etwas mehr Weißraum den Text auflockern.

Denke ich auch. Werde heute Abend mal ein wenig herumspielen.

Der Link zum Weiterblättern ist zu dezent und es fehlt das Pendant für zurück. Noch besser wäre das komplette Set "Back, Up, TOC, Next", wie es sich in Online-Büchern bewährt hat.

Wäre eine Idee.

Das Problem an dert Sache ist, dass das Abends immer wunderschön aussieht, aberf am nächsten Morgen irgendwie nicht mehr. Hätte vielleicht im Juni damit anfangen sollen.

[onemorenerd]

Also wenn ich irgendwas hasse, dann einen Farbton pro Bereich.

Ich meinte das nur zum Testen verschiedener Farbgestaltungen. Wenn du uns heute Blau und morgen Rot präsentierst, können wir es nicht direkt miteinander vergleichen. Färbst du die Bereiche unterschiedlich, können wir hin und her springen. Ein Style-Switcher hätte den selben Vorteil, wäre aber vermutlich aufwändiger umzusetzen.
Nach dem Relaunch solltest du wirklich nur eine Farbe für alle Bereiche verwenden, schließlich sind es keine unabhängigen Themenbereiche sondern alles hängt irgendwie zusammen.

[Kropff]

Ich meinte das nur zum Testen verschiedener Farbgestaltungen. Wenn du uns heute Blau und morgen Rot präsentierst, können wir es nicht direkt miteinander vergleichen. Färbst du die Bereiche unterschiedlich, können wir hin und her springen. Ein Style-Switcher hätte den selben Vorteil, wäre aber vermutlich aufwändiger umzusetzen.
Nach dem Relaunch solltest du wirklich nur eine Farbe für alle Bereiche verwenden, schließlich sind es keine unabhängigen Themenbereiche sondern alles hängt irgendwie zusammen.

Ach so. Naja, ich hab schon mehrere Sachen ausprobiert und dieser Farbton passte meiner Meinung nach am Besten. Vielleicht spiele ich später noch mit den Farben herum.

[Kropff]

So, der aktuelle Stand ist oben. Viel mehr fällt mir nicht ein. Sieht ganz ok aus und wenn nicht zig Leute rumnörgeln, schalte ich das die Tage scharf. Mal abwarten, was meine "Kunden" sagen.

Peter

PS: Anmerkungen sind natürlich jederzeit willkommen.

[wahsaga]

Also ich wäre auch dafür, dass du den Überschriften noch etwas mehr Abstand gönnst (v.a. auch nach oben, was die Kapitelüberschriften angeht), und auch die Abstufung von h1 bis h4 noch durch absteigende Schriftgröße etwas hervorhebst.