Tutorial-Website: Welches Layout?

[x3Ro]

Tutorial-Website
WELCHES LAYOUT PASST?

Ich bin zur Zeit in einem Projekt tätig, dass sich um die Erstellung einer Tutorial Website dreht. Wir können uns derzeitig nicht auf ein Layout einigen.
Ich möchte mal mehr als eine Handvoll Meinung einholen.

Layout #1:
http://img3.imagebanana.com/img/4xtnws3i/normal_beigeblue.gif
Das erste Layout. Soweit schon komplett in Illustrator umgesetzt, damit man Farben ändern kann und sieht wie es auf einem Bildschirm wirkt.

Layout #2:
http://img3.imagebanana.com/img/9tj443sg/layout2.jpg
Das zweite Layout. Ist noch nicht über das erweiterte Scribble-Stadium hinweg.
Dazu gibt es noch zusagen, dass die "Welle" links nicht unbedingt die Finale-Form ist. Sie kann gerne noch geändert werden. Es geht halt um das Prinzip einer dynamischen Form, in der weitere Infos gegeben werden können. Alternativ soll das per Klick ein- und ausfahrbar sein.
Das angedeutet Menu ist auch schon gescribbelt. Das könnt ihr hier einsehen.


Ich weiß das die beiden Varianten in ihrer Qualität nicht zu vergleichen ist. Das erste wurde schon in Illustrator umgesetzt. Das zweite ist bisher auf dem Stand eines Scribbles.
Es reicht also wenn ihr das "Grundkonzept" des Layouts bewertet.

Grob-Konzept der Tutorial-Seite:
Zielgruppe:

Wir wollen diejenigen ansprechen, die sich für Mediengestaltung interessieren und Hilfe benötigen.

Technische Bedingungen

Die Website sollte folgendes beinhalten:
• Interaktion des Users während der Tutorials/dem User Freiheit lassen
• Eine Art Netzwerk sollte aufgebaut werden (bsp. „Siehe auch“ bei Wikipedia) – Hypertext
• Barrierefrei
• Uniform, d.h. der Betrachter sollte bei jeder Auflösung unser gewünschtes Layout sehen
• Standardisierte, normgerechte Technik und Begriffe (Valide)
• Inhalte sollten leicht auszutauschen sein/Website sollte leicht zu administrieren sein
• Komplexe Vorgänge mittels Video erklären
• Vorher-Nachher Vergleiche zeigen/Am Anfang den Ausgang zeigen

Gestaltung der Website

Die Website soll ein klares Layout haben. Die Farben sollen nicht zu bunt sein. Insgesamt soll die Website seriös wirken.
Die Website soll mit den neusten Techniken des Webdesign umgesetzt werden.

Wenn euch zusätzlich noch gute Ideen und Tipps einfallen, dann bin ich natürlich dankend offen

[schnuppel]

Hallo,

Mhm... also für ein Layout und gewollte Verbesserungswünsche sind beide Layouts nicht aussagekräftig.
Es fehlt hier an Details.

Es sollen die neusten Techniken verwendet werden...!?
Im ersten Layout wirkt die moderne Technik wie ein Photoshop 3 Slice

Ja klar... es sind ja nur Rohentwürfe. Aber was bitte soll man denn da bewerten?
Ich erkenn da kaum was. Weder im Illulayout noch auf dem Scribble.

Macht mal bitte verständliche Layouts. So mit ner lesbaren Navigation, ausgearbeiter Typographie u.s.w.

Gruß

Schnuppel

[Manuel]

Hi x3Ro!

Euer Vorgehen halte ich für sehr strukturiert und das ist auf jeden Fall eine gute Basis. Die beiden Layouts sollte man ebenfalls nur als Basis sehen, denn die Details kommen ja meist erst später.
Was passt besser ist immer so die Frage wen ihr ansprechen wollt. Das beige Design wirkt sehr langweilig und bider, aber dennoch einfach und übersichtlich, was nicht zu unterschätzen ist, da es um den Inhalt geht und nicht um das perfekte Aussehen, auch wenn das natürlich auch meist gewünscht ist.
Das andere Layout mag mir vom Stil her gar nicht gefallen. Das würde ich für ein Hotel in der Nähe eines Flusses nehmen beispielsweise, denn es ist etwas origineller, aber auch sehr unruhig, zu viel Grafik, somit längere Ladezeiten und genau das wollt ihr ja nicht, wenn ihr möglichst alle ansprechen wollt.

Ein Tipp für beide Designs: Die Kopfbereiche sind viel zu groß. Bei einer niedrigen Auflösung ist der Bildschirm 1/3 Banner, der für den Nutzer spätestens beim 2ten Besuch vollkommen uninteressant ist.

Viel Erfolg,
Manuel

[x3Ro]

Danke für die Antworten bisher

Ich habe extra keine genaueren Details genannt, da es hier wirklich nur um die Anordnung der einzelne Elemente an sich geht.

Wir haben uns als Aufgabe gesetzt, neben schriftlichen Tutorials, auch interaktive Tutorials zu machen. So soll auch die Seite gestaltet sein. Daher sollte das Layout auch "interaktiv" sein. Allerdings stehen natürlich die Informationen im Vordergrund.
Und diese Gratwanderung ist garnicht so einfach

Ich lass mich einfach noch ein wenig zu den Layouts und Hintergrundinfos aus.

Layout1:
Dieses Layout ist in kurzer Zeit auf dem Papier entstanden und in Illustrator umgesetzt. Das haben wir gemacht, damit wir diverse Farbkompositionen testen konnten. Es ist sehr schlicht gehalten, da hier die Infos im Vordergrund stehen.
Im weiteren Verlauf des Layouts haben wir uns überlegt, was für gestalterische Komponenten das Layout aufweist. Und dort ist uns bis auf der "Schlichtheit" nichts ein- oder aufgefallen. Es gab einfach keine Argumente warum, der Contentbereich 600px breit ist, anstatt 700px. Und eben diese Argumente, sind Teil unser eigenen Zielsetzung. Wir wollen kein spontan erstelltes Layout sondern eins für das es Argumente gibt.

Daraus ist dann das zweite Layout enstanden:
Hier hat sich im großen und ganzen nichts verändert. Außer:
Der Bereich für Header und Menu ist um knapp 20px höher geworden.
Der Contentbereich ist um 35px breiter geworden.
Und sie ist nun "linksbündig".

Zu dieser Entscheidung bin ich gekommen, da ich ein Raster des Goldenen Schnittes erstellt habe. Und in dieses Raster, das Layout neu eingesetzt habe. Dadurch sind halt diese minimalen Änderungen entstanden.

Als größte Änderung hat sich dann die "Seitengrafik" herrausgestellt. Diese dient als zusätzliche Informationsquelle für den User in welchem Bereich er sich aufhält.
Beispiel:
Frank ist über einen Direkt-Link auf ein Tutorial, von seinem Kumpel, auf die Seite aufmerksam geworden. Da dieser Link eventuell nichts sagt (../tuts/tutorial2918/13.html), soll Frank nicht lange suchen (und lesen) müssen, bis er herausfindet, dass er im Bereich Photoshop ist.
Deshalb ist die Seitengrafik hinzugekommen. Da sich die Interaktivität der Seite aber von Grundsätzlichen Layout noch nicht gesteigert hatte, habe ich mir gedacht, "der User soll die Möglichkeit haben, die Seitengrafik auszublenden, wenn er sich zum Beispiel auf ein Tutorial konzentriert"


Details wie Font-Family und -Size stehen zur Zeit noc h etwas in der Schwebe, interessieren aber bei der Layoutfrage er weniger.

EDIT:
Über die Größe habt ihr euch noch beschwert
Das ist bei einer Bild-Orientierten Seite immer sehr schwer, daher haben wir uns gesagt, wir optimieren die Seite auf 1024x768, denn ein kleinerer Bildschirm wir heute kaum verwendet. (15"TFT schafft die 1024px ja schon). Außerdem ist die Seite für "Interessierte an Mediengestaltung", ich habe noch nie einen Gestalter mit einer Auflsung von unter 1024x768 gesehen;)
Außerdem passt das sonst nicht in den Goldenen Schnitt hinein, zumindest beim 2.Layout.

[schnuppel]

Hallo,

nun ja... ich will ja jetzt nicht Nasebohren... aber zu nem Layout; von dem sprecht Ihr ja im Thread, gehören durchweg Elemente wie Typographie und eben Details. Andernfalls spricht man von einem Rohentwurf, oder eben einem Raster.

Es fällt Euch bestimmt leichter eine Entscheidung über das zukünftige Layout zu treffen wenn Ihr das Raster etwas weiter ausbaut.

Zur Farbgestaltung: Auch wenns dezent und seriös wirken soll... Farben wie dieses Fliegengeschißgraugrünbraungemisch (damit meine ich die Farbe hinter der Navi) passen nicht wirklich... aber gut alles Geschmackssache - nur Euch gefällts ja auch nicht wirklich, sonst hättet Ihr Euch ja schon entschieden :D

Versuchts doch mal etwas kontrastreicher, würde der ganzen Sache bestimmt gut tun. Im Graubreich kommen Verläufe eigentlich immer ganz gut. Grau und diese Volltontöne sind irgendwie arghhhhh.

Gruß

Schnuppel