Neues Webseiten-Design ...

Thread Status
Hello, There was no answer in this thread for more than 30 days.
It can take a long time to get an up-to-date response or contact with relevant users.

Stephanie78

Sehr aktives NF Mitglied
Registriert
... erstmal testweise, deshalb die Screenshots:


#neu

1783648d0a994e1a28.jpg



#alt

1783648d0a994bc271.jpg


Wie gefällt euch das neue Design?
Schaut's besser aus als das alte ?
 
Anzeigen
Ja! Unbedingt.

Dadurch wird weniger vom eigentlich Wichtigen abgelenkt ... den Bildern.
 
Kommentar
Hallo Stephanie,
mir gefällt das neue Design besser - ich mag schlichte Eleganz. Je weniger aufdringliche, vom Foto ablenkende Elemente zu sehen sind, um so besser.
"Impressum" und so weiter kommt bestimmt noch als Menüoption oder?
Hast Du eigentlich eine Zustimmung deine Sohnes zur Veröffentlichung der Bilder ;)?
Grüße
Clemens
 
Kommentar
... erstmal testweise, deshalb die Screenshots:


#neu

1783648d0a994e1a28.jpg



Wie gefällt euch das neue Design?
Schaut's besser aus als das alte ?

Nun, du hast kein Gestaltungsraster und 5 verschiedene Schriften angewandt. Benutze max. 2 differente Schriften auf ein und der selben Seite um Ruhe reinzubringen.
Des Weiteren würde ich ein Gestaltungsraster anzuwenden, siehe hier:



Die blauen Linien sind ein angedeutetes (Nicht)Gestaltungsraster (d.h. Ausrichtung von Texten/Bildern/Buttons/etc.), die roten Markierungen stellen "Ausbrüche" dar. Ich würde immer versuchen, Elemente auszurichten, ist angenehmer fürs Auge ;)
Weiters wirkt der Spiegelungseffekt bei einer so dünnen Schrift in der Headline überhaupt nicht, die Buttons würde ich minimaler Gestalten (keinen Aqua-Style).
 
Kommentar
Kab ist offensichtlich Profi, das war nicht mal mir aufgefallen ;), aber er hat recht.

Das neue Design finde ich auch besser, es wirkt klarer. Ich finde es auch gut, dass Du das nicht komplett anders gemacht hast, es wirkt immer noch vertraut.

Allerdings würde ich versuchen, die Titelleiste kleiner, d.h. nicht so hoch zu gestalten, die Schrift bei den Menüpunkten muss m.E. auch nicht so groß sein sein.
 
Kommentar
Reduktion ist offensichtlich immer ein Fortschritt, hin zu Klarheit und Übersichtlichkeit. Was man zu Typo und Ausrichtung anmerken könnte, hat Kab ja schon deutlich gemacht.
 
Kommentar
Hallo Stephanie,

fällt mir sehr schwer, da eine Entscheidung zu treffen. Auf den ersten Blick wirkt die noch aktuelle Seite bedienungsfreundlicher. Ich bin ein Freund von der zusätzlichen kleinen Linkleiste am unteren Rand auf der man ruckzuck z.B. Impressum, Kontakt, etc. erreichen kann.

Eleganter wirkt auf mich allerdings die neue Version. Vielen Dank an dieser Stelle an Kab für die sehr anschauliche Erläuterung zu Ausrichtungen. Man muss ja nicht alles ausrichten, aber wenn nicht, dann bewusst.

Klasse finde ich übrigens, dass Dein Programmierstil genauso schlicht und elegant wie Deine Seite ist! Wieder eine Seite, die auf Tabellen zum Layouten verzichtet (was das Ausrichten nicht gerade einfacher macht). :up:
Eine CSS-Auslagerung auf eine externe Datei wäre noch zu überlegen. Dann wird der Quelltext richtig schlank! Aber vielleicht kommt das ja eh bei der neuen Version.

Gruß
Anderson
 
Kommentar
Mir gefällt die neue Version auch besser. :up:

Klasse finde ich übrigens, dass Dein Programmierstil genauso schlicht und elegant wie Deine Seite ist! Wieder eine Seite, die auf Tabellen zum Layouten verzichtet (was das Ausrichten nicht gerade einfacher macht). :up:

Was ist denn so schlimm an der Benutzung von Tabellen? Ganz ehrlich und neugierig nachgefragt. :)
 
Kommentar
Was ist denn so schlimm an der Benutzung von Tabellen? Ganz ehrlich und neugierig nachgefragt. :)

Schlimm ist das bestimmt nicht. Schöner ist es aber, wenn es ohne geht finde ich als interessierter Laie:

1.) Der Quelltext ist nicht so aufgebläht und unübersichtlich.

2.) Stichwort semantisch korrektes HTML: Die Tabellentags sind ja dazu da, tabellarischen Inhalt auszuzeichnen. Böse Zungen sprechen hier von Missbrauch von HTML-tags.

siehe z.B.:
http://de.selfhtml.org/html/allgemein/stil.htm unter: HTML-Elemente nicht zweckentfremden

3.) Stichwort barrierefreies Internet: Es scheint problematisch zu sein z.B. mit einem Screenreader (etwa für Blinde) einigermaßen erträglich Inhalte von Seiten zu erfassen, die durch ein Tabellenlayout strukturiert sind.

Wie gesagt, schlimm finde ich das nicht, aber schön wenn's ohne geht.

Gruß
Anderson
 
Kommentar
Vielen Dank für eure Antworten!

Zum Gestaltungsraster:

Muss das unbedingt sein?
Ehrlich gesagt, habe ich nach sechs Stunden Neu-Codierung und Neu-
Designing (;)) keine große Lust , nochmal allesneu zu machen :fahne: ...

Schriftarten:

Die Schrift im Header oben werde ich an die Schrift des Menüs anpassen,
mal schauen, wie's dann aussieht.
Die Schrift in der Galerie weiß ich leider nicht zu verändern, der Simple Viewer
bietet dazu glaub' ich , keine Möglichkeit - wenn jemand weiß, wie und ob's
doch geht, bitte sagen :).

Glasbuttons:

Diese sind auch Menüelemente und sind Verlinkung von "Startseite", "Gäste-
buch", "Blog", "Links" und "Impressum" (in dieser Reihenfolge).
Mit dem Einsatz dieser Buttons habe ich auf die Fussleiste verzichten
können, mir sah letztere auch zu überladen aus.
Der etwas abweichende Orange-Ton kommt übrigens durch die Bearbeitung
der Glasbuttons, fällt mMn aber nicht allzu stark ins Auge.

Tabellen:

Tabellen-Einsatz finde ich furchtbar - der Quelltext ist dann derart aufge-
bläht und unübersichtlich, das es erstens keinen Spass macht, diesen zu
bearbeiten und zweitens die Ladezeiten länger werden.

Simple-Viewer:

Noch ein Problem, das ich festgestellt habe - Ich habe als Hintergrundfarbe
für die Galerie #818181 eingegeben, das ist derselbe Wert, wie auch Header,
Menüleiste und Inhalt haben.
Problem: In Firefox3 sehe ich eine deutliche Abweichung, da Simple-Viewer
den Grauton ohne Farbmanagement darstellt.
Gibt es eine Möglichkeit, den Hintergrund des Simple Viewers transparent
zu gestalten, so, dass das in allen modernen Browsern funktioniert?
 
Kommentar
Hier hab ich jetzt die Schrift im Header an der des Menüs angepasst (beides
Arial Narrow, im Header aber bold):


1783648d0e170912ec.jpg



Besser jetzt oder ist die Schrift jetzt zu fett?
 
Kommentar
Du musst gar nix müssen :)

Du hattest nur um Rat gefragt und den hab ich gegeben.
Beim nächsten Mal würde ich vorschlagen, du machst 2-3 exemplarische Seiten in nem Bildbearbeitungs-Programm und lässt jemanden drübersehen, der sich mit Gestaltung auskennt. Dann kann man noch korrigieren und wenn geschehen -> programmieren ;)

Ich find Tabellen gut und übersichtlich. Ladezeiten interessieren mich bei ner 16.000 Leitung weniger bei Beachtung von Tabellen, eher von Javascript, Flash und grossen Bildern. Und mit Verlaub, wenn du die Imageviewer-Applikation einbettest, dann ist die höhere Ladezeit von 0,002 Sek. für die Tabellen grad mal Wurscht.

Die abweichenden Farben bezog ich nicht auf die Buttons, sondern auf:

Mit dem Viewer hab ich noch nicht gearbeitet, kann ich leider nichts zu sagen.
 
Kommentar
Bitte keine Arial Narrow :), das sieht imho zu gepresst aus.

Wie wär's mit ner Verdana?

Weiters würde ich ein wenig mit Groß/Kleinschreibung spielen.
 
Kommentar
Hallo,
ich finde die Schrift "Portait - Natur - Digi-Art - Objekte - Street - Makro" zu groß.
Die Hälfte würde schon genügen und komplett mit Kleinbuchstaben könnte es auch gut aussehen.
Wie schon bemerkt wurde, würde auch ich kein Arial Narrow verwenden.

Vielen Dank für eure Antworten!
Zum Gestaltungsraster:
Muss das unbedingt sein?
Ehrlich gesagt, habe ich nach sechs Stunden Neu-Codierung und Neu-
Designing (;)) keine große Lust , nochmal allesneu zu machen :fahne: ...

Nichts muss, aber mir würden von 20 Kunden 19 in den Allerwertesten treten.


Simple-Viewer:

Noch ein Problem, das ich festgestellt habe - Ich habe als Hintergrundfarbe
für die Galerie #818181 eingegeben, das ist derselbe Wert, wie auch Header,
Menüleiste und Inhalt haben.

Die Hintergrundfarbe der Galerie ist so wie du sie eingegeben hast,
aber der Header hat einen anderen Wert (ca. #7e7f83)
 
Kommentar
Verdana gefällt mir nicht - ich könnte das Arial Narrow aber etwas in der
Höhe stauchen und dünner machen, ich stell's gleich mal rein.


1783648d0e747e6213.jpg
 
Kommentar
Schlimm ist das bestimmt nicht. Schöner ist es aber, wenn es ohne geht finde ich als interessierter Laie

Ah ok, ich verstehe. Bei der Formatierung von Text gebe ich dir sicher recht. Ich dachte, es wäre auch "verboten", Tabellen zu benutzen, um z.B. Bilder in einem Raster anzuordnen.
 
Kommentar
Ich find Tabellen gut und übersichtlich. Ladezeiten interessieren mich bei ner 16.000 Leitung weniger
Die Ladezeit von Tabellen ist sowieso Banane, auch mit analoger Leitung.
Es ist verlockend sie gestaltend einzusetzen, aber sie sind nicht dafür gedacht, sondern sie sollen Daten (im engeren Sinne) enthalten.
Schon seit geraumer Zeit funktioniert die Gestaltung über div, span etc. sehr gut und sollte verwendet werde, was Stephanie auch tut.

Ehrlich gesagt, habe ich nach sechs Stunden Neu-Codierung und Neu-
Designing (;)) keine große Lust , nochmal allesneu zu machen :fahne: ...
Ich habe mal ein wenig in deinen Code geguckt und stelle fest, dass der doch recht aufgeräumt ist.

Eine erste Möglichkeit deine Seiten konsistent umzugestalten wäre es die css-Teile in eine zentrale Datei auszulagern, die du dann oben nur noch über
Code:
<link rel="stylesheet" href="style.css" type="text/css"/>
einfügen musst. Noch kürzerer Code und alle Änderungen an der Datei wirken sich unmittelbar auf alle Seiten aus, die sie verwenden. Das solltest du auf jeden Fall tun, der Aufwand ist sehr gering.

Wie sieht es mit Javascript-Kenntnissen aus? Mit rudimentären Javascript kann man wunderbar Menüs genauso zentral in einer Datei definieren.

Eine weitere Vereinfachung könnte der Einsatz ein paar einfacher PHP-Befehle sein, oder auch etwas weniger Flexibel Server Side Includes.
Dies wiederum würde dir erlauben auch das HTML-Grundgerüst an einer zentralen Stelle zu definieren.
 
Kommentar
Die Ladezeit von Tabellen ist sowieso Banane, auch mit analoger Leitung.
Es ist verlockend sie gestaltend einzusetzen, aber sie sind nicht dafür gedacht, sondern sie sollen Daten (im engeren Sinne) enthalten.
Schon seit geraumer Zeit funktioniert die Gestaltung über div, span etc. sehr gut und sollte verwendet werde, was Stephanie auch tut.

So wars von mir auch gemeint :D
 
Kommentar
-Anzeige-
Zurück
Oben Unten