PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Designentwurf: Kritik bitte


Henrik
2005-01-18, 19:09:16
Ich hab mal was in Photoshop gepinselt:

http://img52.exs.cx/img52/8243/layout1td.th.jpg (http://img52.exs.cx/my.php?loc=img52&image=layout1td.jpg)

Die Seite ist - wie man hoffentlich sehen kann - für die kath. Kirchengemeinde in meinem Kaff.

Für den Content-Teil muss ich mir wohl noch was ausdenken :|

Ich hab schon Kritik für das Baby-Blau im oberen Teil des Hintergrunds bekommen - wie seht ihr das? Was würdet ihr sonst noch anders machen?

Nase
2005-01-18, 20:30:04
Die Farbverläufe sind durchaus stimmig. Der Header beinhaltet auch ein stimmiges Bild, würde aber bestimmt noch besser hervorstechen, wenn du das Logo der Kirchengemeinde auf der linken Seite mit einarbeitest.
Das mit dem IFrame kannst du aber vergessen. Kann man auch ganz normal mittels CSS realisieren.
Die Hinweise zur Seite (Impressum, Kontakt, usw.) solltest du mittig unter die Seite bringen. Wirkt so einfach schief.
Ob es Sinn macht, die Schriftgröße zu verringern bzw. zu erhöhen, seh ich momentan nicht. Wenn mir die Schrift zu klein/groß ist, kann ich das auch direkt im Browser bewerkstelligen.
Der schwierigere Teil ist es jetzt aber, den Inhalt angemessen darzustellen. Hier würde ich dir empfehlen, gut leserliche Schrift zu nehmen und die Texte klar zu gliedern (durch Absätze, Überschriften).

darph
2005-01-18, 20:56:37
Nimm ein div. Iframes sind :nono:

Henrik
2005-01-18, 21:25:47
So, ich hab mal ein bischen weitergebastelt und versucht, die geäußerte Kritik miteinzubringen:

http://img44.exs.cx/img44/2756/layout28py.th.jpg (http://img44.exs.cx/my.php?loc=img44&image=layout28py.jpg)

Nase
2005-01-18, 22:27:40
Hmm, nein, gefällt mir nicht. Da wirkt der Inhalt sehr verloren. Vielleicht dann doch lieber ein Zwei-Spalten-Layout für den Text (wie in einer Zeitung). Vor allem aber eine größere Schriftart, einen höheren Zeilenabstand, vielleicht farbige Überschriften, die sich auch von Schriftgröße und -art deutlich vom Text abheben.

Henrik
2005-01-18, 22:57:16
Mmh mist, zu spät gelesen :rolleyes:

Ich hab das Ganze mal fertig gemacht, damit man sich ein besseres Bild verschaffen kann.

http://img85.exs.cx/img85/5295/layoutfertig5sn.th.jpg (http://img85.exs.cx/my.php?loc=img85&image=layoutfertig5sn.jpg)

Der Content würde aber nach oben nachrücken und die "große Schrift | kleine Schrift"-Buttons würden auch wegfallen.

astanoth
2005-01-18, 23:20:20
Mmh mist, zu spät gelesen :rolleyes:

Ich hab das Ganze mal fertig gemacht, damit man sich ein besseres Bild verschaffen kann.

http://img85.exs.cx/img85/5295/layoutfertig5sn.th.jpg (http://img85.exs.cx/my.php?loc=img85&image=layoutfertig5sn.jpg)

Der Content würde aber nach oben nachrücken und die "große Schrift | kleine Schrift"-Buttons würden auch wegfallen.

Ok wenn du gut bist in Kunst oder etwas Farbgefühl hast, dann würde ich dir raten, die einzelnen Sektionen einer Farbe zuzuordnen.
Ansonsten so lassen - schlicht sieht auch ganz ok aus.

Um deinem design etwas nettes einzigartiges, nicht 0815-mäßiges, zu geben, würde ich an deiner Stelle ein bischen auf www.csszengarden.de surfen.
Ich lasse mich da auch immer "inspirieren" und entdecke immer wieder neue nette Dinge.

Wenn du umschaltbaren Schriftgrößen drin lassen möchtest(finde ich besonders für ältere Betrachter nett), dann würde ich es eventuell in eben den drei oder zwei Schriftgrößen darstellen.
z.B. AAA

just my 2 cents

Henrik
2005-01-19, 15:45:22
Könntest du das mit der Farbe nochmal erklären?
Soll ich jede Rubrik einfärben?

Wenn du (und Nase natürlich auch, aber der hat afaik PSP) Photoshop hast, ich habe die PSD Datei hochgeladen. Könntet ihr das vielleicht eben so umpinseln, wie ihr euch das vorstellt?
Download PSD Datei (http://rapidshare.de/files-de/388918/layout.zip.html)

Auf CSS Zen Garden habe ich mich mal umgeschaut: die Seiten sehen natürlich genial aus, vor allem diese hier (http://www.csszengarden.com/?cssfile=/142/142.css&page=0).
Nur sind die imo etwas "extravagant" für meinen Zweck, mit Ausnahme von diesem hier (http://www.csszengarden.com/?cssfile=026%2F026%2Ecss), hier finde ich das Layout sehr gelungen.
Ich stelle mir etwas schlichtes, seriöses und trotzdem noch schickes vor :rolleyes: ;)

Nase
2005-01-19, 16:11:54
Sorry, aber bekomme es zur Zeit nicht mal hin, die Ideen für meine eigenen Designs umzusetzen. Kann da leider nichts zu beitragen.

Henrik
2005-01-19, 17:16:25
So, ich hab mal die Felder für die Überschriften eingefärbt, eine Suchmaske hinzugefügt und den Vorschlag von astanoth für die umschaltbaren Schriftgrößen mit reingesetzt.

--> http://img116.exs.cx/img116/8169/layoutfertig5fi.jpg

Henrik
2005-01-19, 17:51:55
Das Rot fand ich dann doch etwas zu agressiv, das habe ich jetzt gegen Ocker ausgetauscht:

http://img78.exs.cx/img78/4750/layoutbunt22ha.jpg

edit: was ist denn hier los http://brede10c.userhost.de/forum/images/smiles/icon_surprised.gif ? Keine Antworten?

astanoth
2005-01-19, 19:17:44
Ja genau so hab ich mir das mit den Farben vorgestellt.
Die Schriftgröße passt so aber irgendwie nicht ins Gesamtbild.
ka wie man as besser machen könnte. Evtl. wirklich nur die Beispielbuchstaben?
z.B. "AAA"

Ein Fehler hast du aber leider begangen... mit den Farben muss man so rumspielen, dass der Betrachter immer eine Ahnung hat, wo die Navigation ist und wo der content. Bei dir ist jetzt die navi/logo sehr blass und der content prägnant. Der Suchkasten sollte auch irgendwo eingebettet werden.

Versuch dich auch mal von dem striken tabellendenken zu entfernen - sieht schöner aus ;) z.B. rück die Kästenüberschriften etwas in den Kasten rein(nach links unten).

Ich persönlich würde die Krätze bekommen, wenn ich alles mit Photoshop machen würde...

Henrik
2005-01-19, 20:52:07
So, neuer Entwurf mit mehr Kontrast im Header und weiß gefärbter und nach rechts versetzter Schriftzug: http://img107.exs.cx/img107/3550/layoutbunt35rc.jpg

Wenn ich den Schriftzug schwarz und links lasse, sieht das echt unmöglich aus, der Kontrast geht gegen Null.

Henrik
2005-01-19, 21:14:00
Die Schriftgröße passt so aber irgendwie nicht ins Gesamtbild.
ka wie man as besser machen könnte. Evtl. wirklich nur die Beispielbuchstaben?
z.B. "AAA"

Mmmh ich weiß nicht .... ich befürchte, dass nicht jedem klar ist, was AAA bedeuten soll...
Vielleicht lasse ich das auch ganz weg, genauso wie die Suchfunktion, da ich nicht genug PHP und gar kein SQL kann, was die Sache doch irgendwie schwierig macht ;)

Ein Fehler hast du aber leider begangen... mit den Farben muss man so rumspielen, dass der Betrachter immer eine Ahnung hat, wo die Navigation ist und wo der content. Bei dir ist jetzt die navi/logo sehr blass und der content prägnant. Der Suchkasten sollte auch irgendwo eingebettet werden.

Das Logo hat ja jetzt mehr Kontrast, der Suchkasten fliegt sowieso vorerst.

Versuch dich auch mal von dem striken tabellendenken zu entfernen - sieht schöner aus ;) z.B. rück die Kästenüberschriften etwas in den Kasten rein(nach links unten).

Sehe sicherlich besser aus, aber ich scheue den zusätzlichen Aufwand bei der Umsetzung :rolleyes: - ich mach' das schließlich ehrenamtlich.

Ich persönlich würde die Krätze bekommen, wenn ich alles mit Photoshop machen würde...

Ich mache ja nur die Grafiken in PS, den Code schreibe ich in Phase 5 ;)

astanoth
2005-01-19, 22:10:50
Ich mache auch keine hp rein mit PS.
Skizzen solten per pedes bzw. per manus gemacht werden ;)
Einfacher und schneller.
Der zweite Schritt wäre die Grobstruktur(evtl. mit PS oder auch schon in html+css)
Der dritte Schritt wäre dann die komplette Umsetzung, wobei ca 30% der Dinge geändert werden oder wegfallen(Erfahrungssache).
So mach ich das...


Das mit dem "Nach-Links-Unten-Rücken" geht relativ einfach mit css.
Wie gesagt lass dich von csszengarden inspirieren. Selbst ehrenamtlich bringt es Spass, wenn du dir selbst etwas beibringst.
Ehrenamtlcihes ohne Spass schafft man wohl in 5min.
Du scheinst dir allerdings Gedanken zu machen...

Nase
2005-01-19, 22:32:02
Ok, nochmal Kritik von mir.

Den Header finde ich immer noch recht ansprechend, auch wenn ich immer noch der Meinung bin, dass man das Logo/Wappen, das die Kirchengemeinde eigentlich besitzen müsste, einarbeiten sollte.
Das Menu ist vom Design ebenfalls gut gelungen, geht in dem Wirrwarr von Kästen aber unter.
Das Suchfeld und die Links für größere/kleinere Schrift müssen da weg. Wenn die Features trotzdem beibehalten werden sollen, würde ich das woanders unterbringen.
Da dein Design- und Layoutentwurf anscheinend der Startseite entsprechen soll, würde ich diese nicht mit so viel Inhalt überladen. Falls nicht vorhanden, bitte den Verantwortlichen (z.B. Pfarrer), einen kurzen Text zu verfassen, der die Besucher Willkommen heißt. Zusätzlich würde ich noch eine kurze Zusammenfassung auf die Startseite stellen, damit der Benutzer weiß, mit was er auf dieser Homepage rechnen kann und, eventuell, was er wo findet.
Zur Darstellung des Inhalts: Der Inhalt sollte nicht auf mehrere Boxen verteilt werden, sondern in einem Kasten zusammengefasst sein. Die Größe dieser Box hängt von der Menge und Länge der Texte ab. Wenn du kurze Texte hast, kannst du auch mal darüber nachdenken, ein Zwei-Spalten-Layout für den Text zu nehmen. Als Hintergrundgrafik für diese Inhaltsbox hab ich gerade etwas vor Augen, das nach Papier aussieht. Also nicht einfach nur weiß, sondern Papier mit Struktur (ganz leicht gelb/gräulich). In diese Box kannst du dann auch gleich dein Suchfeld ganz dezent z.B. oben rechts hinsetzen.
Hmm, mehr fällt mir gerade auch nicht ein. Und ich hör auch lieber mal auf, ist eh schon alles durcheinander geschrieben hier :).

Henrik
2005-01-20, 17:23:06
Ich mache auch keine hp rein mit PS.
Skizzen solten per pedes bzw. per manus gemacht werden ;)
Einfacher und schneller.
Der zweite Schritt wäre die Grobstruktur(evtl. mit PS oder auch schon in html+css)
Der dritte Schritt wäre dann die komplette Umsetzung, wobei ca 30% der Dinge geändert werden oder wegfallen(Erfahrungssache).
So mach ich das...

Ich mache ja einen Designvorschlag, da ist es sehr hilfreich, wenn sich alle davon ein gutes Bild machen können - und nicht nur ich, der seine Vorstellungen im Kopf hat ;)
Darüberhinaus finde ich PS dafür aber recht komfortabel, vor allem Abstände und Layouts lassen sich imo so besser ein- und abschätzen.

Die a's kannst du z.B. da (http://www.bakademiker.de/) finden.

Ich finde deine Lösung auch eleganter, bloß sehe ich das Problem mit dem Verständnis. Ich überleg's mir nochmal.

Das mit dem "Nach-Links-Unten-Rücken" geht relativ einfach mit css.
Wie gesagt lass dich von csszengarden inspirieren. Selbst ehrenamtlich bringt es Spass, wenn du dir selbst etwas beibringst.
Ehrenamtlcihes ohne Spass schafft man wohl in 5min.
Du scheinst dir allerdings Gedanken zu machen...

Ich hatte eigentlich vor, den Inhalt in Tabellen zu quetschen, ganz einfach aus Gründen der besseren Kompatibiliät zum IE.
Ich hab' mal eine Seite komplett mit CSS gelayoutet - es war nicht möglich, ein einheitliches Design hinzubekommen :rolleyes:
Ich werd' deine Idee am fertigen Code aber mal testen.

Henrik
2005-01-20, 17:34:56
Ok, nochmal Kritik von mir.

Den Header finde ich immer noch recht ansprechend, auch wenn ich immer noch der Meinung bin, dass man das Logo/Wappen, das die Kirchengemeinde eigentlich besitzen müsste, einarbeiten sollte.

Das mit dem Logo hab ich bisher irgendwie überlesen :D
Ist aber eine gute Idee, auf die ich selbst noch gar nicht gekommen bin :rolleyes:
Mal sehen, ob es bereits ein Logo gibt, dass man entweder einscannen kann oder das bereits als Grafik vorliegt. Vektorzeichen etc. kann ich nicht.

Das Menu ist vom Design ebenfalls gut gelungen, geht in dem Wirrwarr von Kästen aber unter.
Das Suchfeld und die Links für größere/kleinere Schrift müssen da weg. Wenn die Features trotzdem beibehalten werden sollen, würde ich das woanders unterbringen.

Das die Kästen wirre wirken, hatte ich eigentlich dadurch zu verhindern versucht, auf Schnörkel und Spielereien zu verzichten und stattdessen einfache Kästen zu benutzen :confused:


Da dein Design- und Layoutentwurf anscheinend der Startseite entsprechen soll, würde ich diese nicht mit so viel Inhalt überladen. Falls nicht vorhanden, bitte den Verantwortlichen (z.B. Pfarrer), einen kurzen Text zu verfassen, der die Besucher Willkommen heißt. Zusätzlich würde ich noch eine kurze Zusammenfassung auf die Startseite stellen, damit der Benutzer weiß, mit was er auf dieser Homepage rechnen kann und, eventuell, was er wo findet.

Den Begrüßungstext hat ja irgendwie jeder :D
Bei Seiten wie 3dcenter.de oder gmx.de (naja, das Beispiel ist vielleicht nicht ganz so optimal ^^) muss man ja auch viel scrollen, bis man den ganzen Content sieht.
Also ist die Idee mit dem "Anlesen" jedes Themas doch nicht so der Bringer?


Zur Darstellung des Inhalts: Der Inhalt sollte nicht auf mehrere Boxen verteilt werden, sondern in einem Kasten zusammengefasst sein. Die Größe dieser Box hängt von der Menge und Länge der Texte ab. Wenn du kurze Texte hast, kannst du auch mal darüber nachdenken, ein Zwei-Spalten-Layout für den Text zu nehmen. Als Hintergrundgrafik für diese Inhaltsbox hab ich gerade etwas vor Augen, das nach Papier aussieht. Also nicht einfach nur weiß, sondern Papier mit Struktur (ganz leicht gelb/gräulich). In diese Box kannst du dann auch gleich dein Suchfeld ganz dezent z.B. oben rechts hinsetzen.
Hmm, mehr fällt mir gerade auch nicht ein. Und ich hör auch lieber mal auf, ist eh schon alles durcheinander geschrieben hier :).

Sollte ich die Boxform den beibehalten - nur ohne die Ränder - oder sollte ich lieber gleich alles untereinander schreiben wie bsw. in einem Forum?

edit: juhu - mein 3000. Beitrag

:ucatch: :ucatch: :ucatch: :ucatch: :ucatch:

Henrik
2005-02-03, 22:45:13
Ich hab noch ein - bewusst sehr schlicht gehaltenes - Design entworfen:

http://img215.exs.cx/img215/5715/entwurf27ay.th.jpg (http://img215.exs.cx/my.php?loc=img215&image=entwurf27ay.jpg)

Auch wenn man das vielleicht schlecht vergleichen kann, aber welches findet ihr besser und was könnte man noch verbessern?

astanoth
2005-02-04, 00:03:25
Ich hab noch ein - bewusst sehr schlicht gehaltenes - Design entworfen:

http://img215.exs.cx/img215/5715/entwurf27ay.th.jpg (http://img215.exs.cx/my.php?loc=img215&image=entwurf27ay.jpg)

Auch wenn man das vielleicht schlecht vergleichen kann, aber welches findet ihr besser und was könnte man noch verbessern?

X-D sieht aus als wäre es eine reine Trauergemeinde. Bin zwar Atheist, aber eine Kirche soll doch was fröhliches sein oder? Das menü würde ich noch überarbeiten. Kleine Boxen mit netten hovereffekten kommen immer gut ;)
(natürlcih mit PS nicht darstellbar X-D)
Ich fand den Entwurf vorher besser.

Diene entwürfe gehen in die Richtung von sowas. (http://www.csszengarden.com/?cssfile=http://www.naganooch.com/csszengarden/zg_final/sample2.css)

darph
2005-02-04, 01:12:43
Mach diese >> weg. Das mag auch einer IT-Seine cool sein, aber ... paßt hier net. :)

Henrik
2005-02-04, 15:56:08
X-D sieht aus als wäre es eine reine Trauergemeinde. Bin zwar Atheist, aber eine Kirche soll doch was fröhliches sein oder?

Okay stimmt, das Foto sieht tatsächlich etwas traurig aus.
Was hälst du denn davon ;)

edit: der schlaue Spruch stammt übringens aus meinem Relibuch :ugly:

http://img238.exs.cx/img238/7882/skaterlayout3zb.th.jpg (http://img238.exs.cx/my.php?loc=img238&image=skaterlayout3zb.jpg)

Das menü würde ich noch überarbeiten. Kleine Boxen mit netten hovereffekten kommen immer gut ;)
(natürlcih mit PS nicht darstellbar X-D)

Ja, Hover war auf jeden Fall geplant.

Ich fand den Entwurf vorher besser.

Naja, der hat mich bestimmt auch 5x soviel Zeit gekostet ;)

Diene entwürfe gehen in die Richtung von sowas. (http://www.csszengarden.com/?cssfile=http://www.naganooch.com/csszengarden/zg_final/sample2.css)

Da komme ich zwar nicht dran, aber trotzdem danke ^^

Henrik
2005-02-04, 15:57:24
Mach diese >> weg. Das mag auch einer IT-Seine cool sein, aber ... paßt hier net. :)

Ist mir noch gar nicht aufgefallen, dass das auf IT Sites häufiger Verwendung findet :D

Was würdest du denn stattdessen einsetzen?

astanoth
2005-02-04, 18:31:35
Ist mir noch gar nicht aufgefallen, dass das auf IT Sites häufiger Verwendung findet :D

Was würdest du denn stattdessen einsetzen?

Wie gesagt Boxen und denn diesen Trennstrich unter dem menu wegmachen.