Neues Webseiten-Design ...


Stephanie78

Unterstützendes Mitglied
... erstmal testweise, deshalb die Screenshots:


#neu

Sie müssen kostenlos registriert oder eingeloggt sein, um Bilder sehen zu können. Eine Registrierung ist unverbindlich und in einigen Minuten abgeschlossen. Ausserdem unterstützen Sie mit einer Registrierung dieses wundervolle Projekt. Vielen Dank!



#alt

Sie müssen kostenlos registriert oder eingeloggt sein, um Bilder sehen zu können. Eine Registrierung ist unverbindlich und in einigen Minuten abgeschlossen. Ausserdem unterstützen Sie mit einer Registrierung dieses wundervolle Projekt. Vielen Dank!


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

malo61

NF-F Premium Mitglied
Ja! Unbedingt.

Dadurch wird weniger vom eigentlich Wichtigen abgelenkt ... den Bildern.
 
Kommentar

clemmi

Sehr aktives Mitglied
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

kabrueggen

Unterstützendes Mitglied
... erstmal testweise, deshalb die Screenshots:


#neu

Sie müssen kostenlos registriert oder eingeloggt sein, um Bilder sehen zu können. Eine Registrierung ist unverbindlich und in einigen Minuten abgeschlossen. Ausserdem unterstützen Sie mit einer Registrierung dieses wundervolle Projekt. Vielen Dank!



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:

Sie müssen kostenlos registriert oder eingeloggt sein, um Bilder sehen zu können. Eine Registrierung ist unverbindlich und in einigen Minuten abgeschlossen. Ausserdem unterstützen Sie mit einer Registrierung dieses wundervolle Projekt. Vielen Dank!


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

PeMax

Nikon-Clubmitglied - NF-F "proofed"
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

comabird

Auszeit
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

kabrueggen

Unterstützendes Mitglied
Kab ist offensichtlich Profi, das war nicht mal mir aufgefallen ;), aber er hat recht.
Naja, wenn man ein Studium also Solches ansieht.. dann ja :D

Ach ja, mir ist noch aufgefallen ,dass die Schriftfarbe gelb nicht identisch ist.

FotoGrafie ist: #e69d02
Navigation ist: #e59c00

LG
Kab
 
Kommentar

anderson

Unterstützendes Mitglied
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
N

Norden

Guest
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

anderson

Unterstützendes Mitglied
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.:
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

Stephanie78

Unterstützendes Mitglied
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

Stephanie78

Unterstützendes Mitglied
Hier hab ich jetzt die Schrift im Header an der des Menüs angepasst (beides
Arial Narrow, im Header aber bold):


Sie müssen kostenlos registriert oder eingeloggt sein, um Bilder sehen zu können. Eine Registrierung ist unverbindlich und in einigen Minuten abgeschlossen. Ausserdem unterstützen Sie mit einer Registrierung dieses wundervolle Projekt. Vielen Dank!



Besser jetzt oder ist die Schrift jetzt zu fett?
 
Kommentar

kabrueggen

Unterstützendes Mitglied
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:
Sie müssen kostenlos registriert oder eingeloggt sein, um Bilder sehen zu können. Eine Registrierung ist unverbindlich und in einigen Minuten abgeschlossen. Ausserdem unterstützen Sie mit einer Registrierung dieses wundervolle Projekt. Vielen Dank!


Mit dem Viewer hab ich noch nicht gearbeitet, kann ich leider nichts zu sagen.
 
Kommentar

kabrueggen

Unterstützendes Mitglied
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

duospilus

Unterstützendes Mitglied
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

Stephanie78

Unterstützendes Mitglied
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.


Sie müssen kostenlos registriert oder eingeloggt sein, um Bilder sehen zu können. Eine Registrierung ist unverbindlich und in einigen Minuten abgeschlossen. Ausserdem unterstützen Sie mit einer Registrierung dieses wundervolle Projekt. Vielen Dank!
 
Kommentar
N

Norden

Guest
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

Wocket

Sehr aktives Mitglied
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

kabrueggen

Unterstützendes Mitglied
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
Oben Unten
LiveZilla Live Chat Software