|
||||
Konzeptidee: "Optische Führung"
Hallo,
ich hab für eine Internet-Community zu einem ziemlich bekannten und verrufenem MMORPG eine Seite designt & erstellt auf Wordpress-Basis. Diese Community hat natürlich auch einen "Bewerbungs-Bereich" und dazu galt es eine Info-Page zu erstellen. Im Grunde ist das reiner Fließtext. Meine Idee war nun, die Information in Kästen darzustellen und das jeder Kasten auf den nachfolgenden "zeigt". Da viele Leute sich ja vor größeren Fließtexten scheuen und ungern durch die Gegend scrollen um nach den Inhalt zu suchen, der sie wirklich interessiert. Es scheint mir nur nicht wirklich gelungen zu sein. Ich habe kaum Resonanzen bekommen - im Grunde nur eine negative. Da ich das ganze wirklich nur noch auf Hobby-Basis fahre und ich diese Informationsdarstellung zum ersten mal probiert habe, dachte ich mir, ich lass da mal ein paar Profis drüber schauen. join us bereich.png Das wäre besagter Bereich. Mein Problem ist eben auch, dass das Bild oben links (die eigentliche Überschrift h2) keine Information beherbergt und somit rechts die erste Information kommt, daher muss der nächste Info-Kasten auch direkt unter dem rechten Kasten sein, ansonsten sieht es verwirrend aus (welches ist nun die erste Info?). Allerdings sind die meisten Menschen es ja gewöhnt von links nach rechts zu lesen, d.h. man wird nach dem ersten Kasten automatisch auf den linken unter dem Bild stoßen anstatt auf den rechts, oder sehe ich das falsch? Wäre es also logischer, mit der Information nach dem ersten Info-Kasten unten links zu starten, also alle nachfolgenden Kästen spiegelverkehrt darzustellen? Das Markup dazu sähe btw so aus: HTML-Code:
<div class="box round fright right"> <h3 class="icon_star"><span></span>Überschrift</h3> <p>Test</p> </div> Für die Pfeile benutze ich das leere span-Tag in der Überschrift und positioniere es absolut in der relativ positionierten Überschrift. Der leere Tag ist nicht wirklich schön, ich werde das demnächst vermutlich direkt dem H3 geben - bin mir nur nicht ganz sicher, wie ich dann die Formatierung beibehalten kann, da dem H3 dann eine Höhe zugewiesen werden muss und ich die p-Tags wohl hochziehen müsste. Wenn da also wer noch n Tipp hat, bin ich dankbar. Bin für Kritik, Anregungen, etc offen. Grüße, Florian
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
Sponsored Links |
|
||||
muss es überhaupt mit so kleinen kästen sein? würde es nicht gehen die kästen über die gesamte Breite zu legen?
Weil so wie es aktuell ist, ist es zu verwirrend.
__________________
Hier ein immer gültiges Statement: Überarbeite deine Code, lerne die Grundlagen, widersprich mir nicht, wehre dich nicht, ich habe Recht, wir sind Lolgion, wir sind viele.. potato... All meine Angaben sind ohne Gewähr, es könnte also trotz meiner Unfehlbarkeit dazu kommen dass ich falsch liege www.richard-thiel.de | Müssen Websiten überall gleich ausschauen? |
Sponsored Links |
|
||||
Zitat:
Es sollen schon einzelne kompakte Texte sein, wo das Auge nicht weit *wandern* muss. Zitat:
join us spiegelverkehrt.png Es ist so etwas angenehmer. Aber wie Thielo schon andeutete, sind einige Kästchen zu klein. Werde mal die mittigen beiden kleinen versuchen zusammenzufassen bzw. eines wegzulassen. Denn es wird erst bei den beiden "verwirrend", meiner Meinung nach. Aber: Dellen im Blech? Sind die Pfeile so unsauber gearbeitet? Dellen haben für mich immer etwas ungerades... Ich grübel über die Pfeile noch mal..
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
|
||||
Für mich sind das keine Pfeile. Mal ohne Mist jetzt, das mag sich bescheuert anhören, aber das sieht aus wie Dellen. Entweder ist mein Blick brutal schief, aber du hast Dellen designt. Ich bin ja für die zweite Möglichkeit.
Ich würde es evtl. besser finden, wenn der "alte" Kasten jeweils einen Pfeil hat, der in den "neuen" Kasten übergreift. Also eine deutliche Hervorherbung der Pfeile.
__________________
Manchmal fühle ich mich von WordPress ja schon verarscht. |
|
|||
Versuch doch mal, die umsandeten Kästen wegzulassen und stattdessen mit richtigen Pfeilen von einem Text zum nächsten zu zeigen. Ich dachte (ohne Deinen Text gelesen zu haben), man kann vielleicht die Kästen dahin ziehen, wo die Dellen hinzeigen - Wozu auch immer
__________________
... Meine Meinung |
|
||||
Durch die natürliche Leserichtung (oben > unten, link > rechts) hast du doch schon deine "optische Führung", dabei würd ich es belassen - sollte für deine Zielgruppe ausreichend einfach erfassbar sein. Außerdem bist du dann nicht gezwungen, sämtliche Informationen hierarchisch zu ordnen.
Ich würde die Container noch jeweils auf der selben Höhe anfangen lassen (sieht schicker aus) und die Spalten der zweiten Zeile vertauschen, erscheint mir sinniger, eure Erwartungen vor Infos zur Orga zu platzieren.
__________________
Die Zeit hat ihre Kinder längst gefressen: hund (back in black) | ??? | ??? | ... |
|
||||
Zitat:
Zitat:
Aber ich denke, ich werde das folgendermaßen lösen: links => rechts mit herausstechenden Pfeil vom linken auf den rechten Kasten und schauen, wie es dann ausschaut.
__________________
CSS-FAQ beantwortet die meisten Fragen | Retro coding gegen Divitis | Code validieren & posten für Hilfe |
|
|||
Davon abgesehen ist die Seite zu clean.
Sieht so WoW aus?? Nie. Der WoW-Style, wenigstens das Feeling, der mood, fehlt, muss aber rein für eine Anwerbeseite - zwingend! Vielleicht sieht es so im Hinterzimmer eines Aktbosses aus, der dort von fähigen Ärzten wieder für den nächsten RAID aufgemöbelt wird... Die Idee an sich finde ich gut, nur fürs Thema unangemessen.
__________________
Grüsse Andreas- auch mal wieder da... Design isn't about the tools, it's about creating the best experience for the user. A design should be based on usability, accesibility, aesthetics, but never on floats, lists or background images. ( by Cameron Adams) Wiedergelesen: > hier und hier [Foren-Links] Dein Post? Klar, DAS vorher gelesen? Hilft. ## User-Landkarte |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|