Layoutentwurf: Cambridge Veterinary School Alumni

[Daniel]

Hallo zusammen!

Habe für die Alumni Seite der Cambridge Veterinary School einen Layoutentwurf gemacht (ehrenamtlich)

Verbesserungsvorschläge etc. sind willkommen:


Das Layout ist ein klein wenig an das offizielle University of Cambridge Layout (http://www.cam.ac.uk) angelehnt, ist allerdings nicht Pflicht. Ich habe sozusagen komplett freie Hand was das angeht und werde mir noch ein Layout überlegen, was nicht mehr ganz so stark daran angelehnt ist.

Die drei verschiedenen Quadrate unterhalb der Navigation stehen für:
1. aktive Seite
2. a:hover (mouseover)
3. Normalzustand

Mittlerweile finde ich, dass ich etwas zu viele Linien habe, aber was anderes fällt mir auch nicht ein. Habe es deshalb versucht etwas aufzulockern.

Unterhalb die unterste Linie kommen noch sonstige rechtliche Informationen wie eben auch bei der offiziellen University of Cambridge Webseite.

Wie gesagt, Kritik, Kommentare und Verbesserungsvorschläge sind erwünscht.

Gruß

Daniel

[Alex]

Hi,
also Erstmal wusste ich echt nicht was ich hier noch reinschreiben könnte
auf den ersten Blick sieht das Design super professionell, schön, übersichtlich, und seriös aus. Was will man eigentlich mehr?
Saubere Arbeit!

Mittlerweile finde ich, dass ich etwas zu viele Linien habe

Ich habe mir zuerst das Bild angeguckt, und dann den Text gelesen, mach ich immer so, mir ist es wirklich nicht aufgefallen, dass zu viele Linien drinn sein könnten, nachdem ich es aber gelesen habe, ist es mir auch aufgefallen. Doch ich denke, wenn der Inhalt drinn ist, wird das Ganze sicher doch auch noch etwas ausgedehnt und nach unten gezogen, sodass es nicht mehr auffällt. Obwohl es Jetzt auch noch nicht mal besonders auffällt.
Du kannst es denke ich so lassen.

Ich hab hier doch noch was gefunden,
das Bild von dieser Cambridge School (oben Rechts) sieht bisschen verpixelt aus kann das sein? Ich weiß ist unwichtiger Kleinkram aber ich muss ja wenigstens etwas zu meckern haben. Also schau da einfach nochmal drüber.


Vagabond

[Daniel]

Hi,
also Erstmal wusste ich echt nicht was ich hier noch reinschreiben könnte
auf den ersten Blick sieht das Design super professionell, schön, übersichtlich, und seriös aus. Was will man eigentlich mehr?
Saubere Arbeit!

Danke!

Mittlerweile finde ich, dass ich etwas zu viele Linien habe

Ich habe mir zuerst das Bild angeguckt, und dann den Text gelesen, mach ich immer so, mir ist es wirklich nicht aufgefallen, dass zu viele Linien drinn sein könnten, nachdem ich es aber gelesen habe, ist es mir auch aufgefallen. Doch ich denke, wenn der Inhalt drinn ist, wird das Ganze sicher doch auch noch etwas ausgedehnt und nach unten gezogen, sodass es nicht mehr auffällt. Obwohl es Jetzt auch noch nicht mal besonders auffällt.
Du kannst es denke ich so lassen.

Ich hab hier doch noch was gefunden,
das Bild von dieser Cambridge School (oben Rechts) sieht bisschen verpixelt aus kann das sein? Ich weiß ist unwichtiger Kleinkram aber ich muss ja wenigstens etwas zu meckern haben. Also schau da einfach nochmal drüber.


Vagabond

Aus dem Grund habe ich meine eigene Kritik / Erklärung auch erst nach dem Bild eingefügt. So kann man sich erst mal eine "Jungfräuliche Meinung" bilden. Passt also schon.

Wegen den Linien, ich werde mal schauen, dass ich zwischen der Navigation und dem Content Bereich etwas mehr Abstand lasse, dann wirkt es sicher auch gleich ganz anders. Außerdem habe ich jetzt die Linien bei Navigation auch etwas farblich abgeschwächt, hatte ich bei dem Bild noch vergessen, sollten eigentlich in der Farbe wie auch "Navigation" sein.

Das mit dem Bild (verwechselt da einer Rechts und Links?) kann schon sein. Ich habe ein recht großes Ursprungsbild und hab es jetzt einfach mal sehr grob und schnell so verkleinert. Da es dann sehr unscharf war habe ich noch den Standard-Schärfe Filter von PS benutzt.

...

Mit dem Layout was ich nicht an das University of Cambridge Standardlayout anlehnen will, komm ich gerade überhaupt nicht auf einen grünen Zweig

...

Danke und Gruß

Daniel

[Michael]

Hi Daniel,

hier ist mal wieder der Spiegel-Meister

Also auf den ersten Blick gefällt mir das Layout ganz gut. Was mich aber stört ist das Bild (oben LINKS ). Ich finde dadurch, dass das Gebäude diesen Bogen macht und nach links hin geöffnet ist, grenzt sich das Bild vom Rest sehr stark ab. Probier doch mal (ausnahmsweise ) das Bild zu Spiegeln. Ich habs mal gemacht.



Mir persönlich gefällts besser. Was meinst du (ihr)?

Aber noch ne Frage zu den Linien: Auf der rechten Seite der Punkt mit den Past Events. Rückt der später noch weiter runter, wenn da die Upcoming Events inhaltlich länger werden oder sind die beiden Punkte positionsmäßig fest verankert?

Wenn das der Fall wäre (also verankert) würde ich gucken, dass die Linie von Past Events und die links über University of Cambridge auf gleicher Höhe liegen, da das sonst ein bischen irrietiert.

[Manuel]

Ich finds langsam echt traurig, dass Michael echt alles spiegelt und es dann auch noch tatsächlich besser aussieht...tztz...unfassbar *lacht*

[Daniel]

@Michael

Ich wusste schon, dass das kommt und weiss auch, dass es dadurch besser wirkt, aber dann stimmt leider das Bild nicht mehr und ich glaub nicht, dass das jemandem dort gefällt.

Ich habs auch mal Testweise an den rechten Rand gemacht, aber da gefällts mir gar nicht.

Weder Past Events noch die untere Linie der Navigation sind jetzt schon da wo sie mal sein werden, ersteres hast Du richtig erkannt und zweiteres stimmen die Navigationspunkte noch nicht, da kommt wohl noch einiges dazu. Aber werde das mal für die Präsentation übereinstimmend machen, also danke für den Tipp.

Thanks und Gruss

Daniel

[Michael]

Ich finds langsam echt traurig, dass Michael echt alles spiegelt und es dann auch noch tatsächlich besser aussieht...tztz...unfassbar *lacht*

Kann nix dafür... wir werden in der Uni von unserer Dozentin in Gestaltungslehre dazu konditioniert .. bin absolut unschuldig. Uns hats auch erst immer ein bischen gewundert, wenn die sagte "spiegelt das doch mal".. aber als wirs gemacht haben war die Wirkung in vielen Fällen verblüffend. Deshalb teste ich das immer als eine der ersten Sachen.

Ich wusste schon, dass das kommt und weiss auch, dass es dadurch besser wirkt, aber dann stimmt leider das Bild nicht mehr und ich glaub nicht, dass das jemandem dort gefällt.

Weiss gar nicht, wie du dadrauf gekommen bist
Das mit dem Bild habe ich schon befürchtet, wollte es aber dennoch mal ins Gespräch bringen.

Ich habs auch mal Testweise an den rechten Rand gemacht, aber da gefällts mir gar nicht.

Das hätte ich als nächstes vorgeschlagen. Aber wenn du schon sagst, dass es da nicht passt, hats sich ja erledigt. Aber gibt es vielleicht ein Bild der Uni, auf dem das Gebäude von der andern Seite drauf ist? Das würde dein Problem ja beheben.

[Ellie]

Hallo Daniel,

überleg... na ja, die Linien könnten etwas feiner sein, meinst Du nicht? Sieht ein wenig nach Autobahn-Mittelstreifen aus. Und sie Rubrik-Überschriften erscheinen mir etwas zu klobig, auch hier würde ich eine zierlichere Variante vorziehen.

Äh, könnte man das Bild, ich meine den Bogen, nicht gestalterisch mit einfliessen lassen? So als schwungvollen Bogen bis unten zur Navigation? Verstehst Du was ich meine? Das würde dem Ganzen einen kleinen Schwung geben und dann braucht man es auch nicht mehr spiegeln *ggg*.

LG,
Ellie


OT: Was mich wundert ist die Tatsache, daß aus ergonomischer Sicht eine Anordnung der Navleiste auf der rechten Seite angebracht wäre. In einer Welt voller Rechtshänder, jedenfalls haben die meisten Leute die Maus in der rechten Hand, wäre es dort richtig untergebracht. Aber sind ja Engländer *fg*, die dürfen falsch herum...

Gleiches gilt für das Camebridge-Logo, political correct wäre Bauhaus... rechts unten.

So habe ich es gelernt, aber ich bin alt und was früher war mag heute nicht mehr zählen...lach. Wollte ich mal so einwerfen. /OT

[Daniel]

Aber gibt es vielleicht ein Bild der Uni, auf dem das Gebäude von der andern Seite drauf ist?

Ne leider nicht, gibt nur noch eines von vorne, aber das gefällt denen nicht so besonders und findet schon auf einer anderen Seite Gebrauch.

Hallo Daniel,

überleg... na ja, die Linien könnten etwas feiner sein, meinst Du nicht? Sieht ein wenig nach Autobahn-Mittelstreifen aus. Und sie Rubrik-Überschriften erscheinen mir etwas zu klobig, auch hier würde ich eine zierlichere Variante vorziehen.

Die Linien der Rubriküberschrift sind ja nur 2px groß, 1px wirken wie ich finde in dem Fall fast gar nicht mehr. Und die anderen Linien sind so groß wie im Original, an das ich ja dieses Layout angelehnt habe. Aber wie gesagt, ich arbeit noch an einem zweiten Entwurf.

Äh, könnte man das Bild, ich meine den Bogen, nicht gestalterisch mit einfliessen lassen? So als schwungvollen Bogen bis unten zur Navigation? Verstehst Du was ich meine? Das würde dem Ganzen einen kleinen Schwung geben und dann braucht man es auch nicht mehr spiegeln *ggg*.

Wie gesagt ist das ganze sehr stark ans Unilayout angelehnt und da gibts keine Bögen, aber den Tipp werde ich mir merken und mal schauen ob ich sowas in den zweiten Entwurf einbauen kann, hört sich jedenfalls sehr gut an!

OT: Was mich wundert ist die Tatsache, daß aus ergonomischer Sicht eine Anordnung der Navleiste auf der rechten Seite angebracht wäre. In einer Welt voller Rechtshänder, jedenfalls haben die meisten Leute die Maus in der rechten Hand, wäre es dort richtig untergebracht.

Nicht nur deshalb, auch der Scrollbalken ist rechts, und gerade deshalb verwundert es mich, dass die Navigation links ist, irgendwer hat mal damit angefangen die halt links zu positionieren. Mittlerweile gibt es aber genug Layouts, die die Navi auch rechts haben, jedenfalls Bloglayouts. Trotzdem finde ich noch immer, die Navi gehört links und der Text schön daneben. Hat das vielleicht damit zu tun, dass wir von links nach rechts lesen? Könnt ich mir jedenfalls gut vorstellen, das weiss dann sicher Michael oder Manu.

Würde ich das ganze jetzt rechts machen, wäre es ein ganz schöner Stilbruch im Vergleich zu den eigentlich Uniseiten, wo die überall links ist.

Gleiches gilt für das Camebridge-Logo, political correct wäre Bauhaus... rechts unten.

So habe ich es gelernt, aber ich bin alt und was früher war mag heute nicht mehr zählen...lach. Wollte ich mal so einwerfen. /OT

Rechts unten? Okay, ich glaub ich hab noch keine Seite gesehen, wo das Logo rechts unten platziert wurde. Im Original ist das Logo links oben, aber da wollt ich das Bild platzieren und oben rechts gefällt mir weder das Bild noch das Logo, aber vielleicht kann ich das Logo unterhalb die unterste Trennlinie rechts einbauen, was würdest dazu sagen?

@Manu

Hab eigentlich erwartet von Dir etwas Farbkritik zu hören, was ist?

Danke und Gruß

Daniel

[Manuel]

Tja, was ist zum Farbmanagement zu sagen? Ich würde mich auf die Farben beschränken, die auch auf der vorhandenen Seite gegeben sind. Zumindest jetzt, da du die Seite wieder so ähnlich gestalten willst. Falls du sie komplett umstruktuieren willst wären natürlich die Farben aus dem Wappen sinnvoll.

Was wäre noch zu sagen...wie schon gesagt: Die Striche würd ich dünner machen. Dann würde ich die Schrift Cambridge... oben auch weiß machen. Aber das sieht man besser, wenn man die Seite codet.
Logo nach unten rechts und vielleicht etwas kleiner. Überschriften kleiner, denn die sind eindeutig zu groß finde ich.
Schau doch einfach mal auf "Konkurrenzseiten", wie diese aufgebaut sind.

Und was ich auch wegmachen würde wären die 2 Farben im Rahmen des Bildes. Dann lieber einen ganz dünnen einfarbigen Rahmen, aber das ist sicherlich auch Geschmacksache

Lg,
Manuel

[Michael]

OT: Was mich wundert ist die Tatsache, daß aus ergonomischer Sicht eine Anordnung der Navleiste auf der rechten Seite angebracht wäre. In einer Welt voller Rechtshänder, jedenfalls haben die meisten Leute die Maus in der rechten Hand, wäre es dort richtig untergebracht.

Nicht nur deshalb, auch der Scrollbalken ist rechts, und gerade deshalb verwundert es mich, dass die Navigation links ist, irgendwer hat mal damit angefangen die halt links zu positionieren. Mittlerweile gibt es aber genug Layouts, die die Navi auch rechts haben, jedenfalls Bloglayouts. Trotzdem finde ich noch immer, die Navi gehört links und der Text schön daneben. Hat das vielleicht damit zu tun, dass wir von links nach rechts lesen? Könnt ich mir jedenfalls gut vorstellen, das weiss dann sicher Michael oder Manu.

@Ellie und Daniel: Dieser jemand, der damit angefangen hat die Navigation links zu setzen war aber nicht dumm (oder lag per Zufall richtig). Das menschliche Hirn hat eine ganz bestimmte Art der Wahrnehmung und Steuerung. So steuert die linke Hirnhälfte die rechte Körperhälfte (und damit auch das rechte Auge) und umgekehrt. Das heisst also, dass das linke Auge die Signale an die rechte Hirnhälfte schickt. Diese Hirnhälfte ist für räumliches Vorstellungsvermögen (also auch räumliches Sehen) und konzeptionelles Sehen verantwortlich. Sie macht also zuerst mal das "Grobe", wenn wir was sehen (deshalb kommen im Theater u.ä. auch fast immer die Helden von links auf die Bühne, weil wir sie dort zuerst wahrnhemen und in der Wichtigkeit höher einstufen). Die linke Hirnhälfte tritt dann später (also ein paar 1000stel Sekunden) in Aktion und übernimmt die Organisation des ganzen. Dann erreicht erst die rechte Seite des Sehfeldes eine fast ausgleichende Wichtigkeit, wie die linke.

Kurz: Das erste, was wir wahrnehmen ist alles links von uns. Daher macht es durchaus Sinn, die Navigation (die ja sehr wichtig ist) links anzuordnen.
(Ich glaube ich war ein bischen ausschweifend sorry!)

Gleiches gilt für das Camebridge-Logo, political correct wäre Bauhaus... rechts unten.

So habe ich es gelernt, aber ich bin alt und was früher war mag heute nicht mehr zählen...lach. Wollte ich mal so einwerfen. /OT

Keine Angst. Das mit dem Logo rechts unten lernen wir heute auch noch. Dazu sollte man sagen, dass ein Logo, was rechts unten steht von den meisten Betrachtern als seriöser angesehen wird. Wäre also eine Überlegung Wert bei einer Uni-Homepage mit Tradition. Andererseits wäre es wohl im Sinne des Leseflusses (der auf einer Homepage wohl dominiert) sehr unpraktisch.

Hoffe ich habe nicht zu viel hier reingeschrieben, da es ja eigentlich um eine Homepage und nicht um unser Hirn geht

[Ellie]

Moin,

deshalb schrieb ich auch OT, weil es nicht in eine Kritik gehört, also Daniel, hier ging es mir um Theorie und die muß nicht immer realitätsnah sein. Die Seite finde ich so schon vollkommen ok und wahrscheinlich wirken die Linien hier im Screenshot einfach fetter als später "in echt".

Von TakaBo habe ich Einblick in die Softwareergonomie bekommen, lach, hab mir einen kleinen Vortrag dazu von ihm angehört, und die gleichen Regeln sollten auch für Onlineauftritte gelten. Sinn einer Navi auf der rechten Seite wäre, daß man nicht "quer über den Tisch" greifen muß um an Werkzeuge und Schlater zu gelangen. Kein Mensch sortiert so seinen Arbeitsplatz. Entweder liegen die Dinge oben am Kopf oder rechts (es sei denn man ist Linkshänder).

Da sich Regeln aber bekanntlich ändern und sich meistens das durchsetzt was alle machen (power by the flies - lol, gerade erfunden), ist es ja schon ok die Navi links zu setzen. Und das Logo/Bild auch oben links.

Ist interessant zu lesen, was heute gelehrt wird. Ich habe hier ein Buch über die Schriftsetzerprüung von 1964, mein Dad hat noch im Bleisatz gelernt und es ist erstaunlich wieviel Regeln heute noch gültig sind.

LG,
Ellie

[Manuel]

Hi Ellie!

Das ist aber nett, dass er dir einen eigenen Vortrag darüber gehalten hat
Aber wo er Recht hat...ich denke jeder der programmiert oder codet sollte einmal etwas mit Softwareergonomie zu tun gehabt haben.
Dass alle Regeln, die für Programme gelten, auch im WWW gelten stimmt jedenfalls nicht so ganz. Was die rechte obere Seite angeht usw. schon, aber im Internet herrschen logischerweise andere Standards. Das fängt schon bei der Anzahl der Menüpunkte und Untermenüs an.

Wen soetwas brennend interessiert:
http://www.uni-koblenz.de/FB4/Institute ... e%20Guides

Dies ist der Link zu unserer Softwareergonomieseite, auf der viele Styleguides verlinkt sind. Der Bekannteste davon ist soweit ich weiss der Yaleguide.

Lg,
Manuel

[Ellie]

Hallo Manu,

ich darf mir öfter Vorträge anhören, lach, und gerade in "unserer" Branche, also Medien und Programmierung, schlagen sich die Leute um das was "richtig" und was "unprofessionell" ist.

Die Leute vergessen darüber oft, daß der Kunde entscheidet und das tut er nach Gefallen und nicht nach irgendwelchen Regeln.

Daniel leistet gute Arbeit, denn er nimmt seinen Kunden ernst und schaut trotzdem nach Usability und guter Gestaltung. Das ist was zählt finde ich.

LG,
Ellie

[Manuel]

Da muss ich dir vollkommen Recht geben Ellie! Ich halte ehrlich gesagt auch nicht mehr so wirklich viel von SE, denn jeder Styleguide sagt etwas anderes, manche widersprechen sich sogar. Ich finde es dennoch wichtig, soetwas mal gehört zu haben, da man sich vorher gar nicht bewusst macht, wie man auf einer Seite überhaupt arbeitet, was schneller geht, worauf man achten sollte damit der User schneller zum Ziel kommt usw. Daher finde ich gewisse Regeln auf jeden Fall einleuchtend, denn wer will zum Beispiel ein Menü mit 50 Unterpunkten. Das wäre grausam für jeden User