Designs auf grafischer Basis (Fragen, Anregungen, Bemerkungen, Kritik)

[Quax]

Moin

Da es bis jetzt nur Threads für das Coden gibt, wollte ich einfach mal einen Thread erstellen, in dem ihr eure Designs auf grafischer Basis reinstellen könnt.
Zu diesen werden, wie im "Allgemeine Diskussion (Fragen, Anregungen, Bemerkungen, Kritik)"-Thread Hilfestellungen gegeben, Fragen beantwortet und kritisiert.
So, ich fang gleich mal an:
http://www.directupload.net/file/d/1104/eCUD7wTo_jpg.htm
Gefällt euch das Design?
Lässt es sich verwicklichen?
(Copyright liegt bei mir..)
Danke
MfG Quax

 

[mpeg.exe]

Sieht nett aus, allerdings kannst du dann auf eine Seite nur begrenzt viel Text einbauen

 

[Quax]

Nicht unbedingt, ich weis schon wie ich es schaffe, dass es frei gezeichnet aussieht und trotzdem viel Text passt.

 

[Crizzo]

Ich fange die meisten Seite an, im dem ich mir eine Skizze erstelle. Was ist hieran jetzt so besonders?

Verwirklichen lässt sich grundsätzlich fast alles, man muss nur wissen wie.
Wenn du den Text scrollbar machst, bist du auch nicht begrenzt

 

[Quax]

Nee, kein scrollbarer Text, sieht nicht schön aus..
Eine Skizze soll das Design nicht sein, es soll nur so aussehen..
Ich mag eben schlichte Designs, diese Effektüberladung sieht nicht fein aus. :/

 

[Crizzo]

Naja, dann einfach Plan der Seite, aber nichts basiert auf einer jpg Datei, denn du hast dir damit nur ausgemalt, wie sie aussehen soll. Den Aufbau der Seite bestimmt immer noch die CSS Datei und deine XHTML Syntax.
Sprich deine Überschrift/Thread hat für mich keinen Sinn

Entweder fragt man, wie man etwas umsetzen kann oder wie den anderen die fertige Website gefällt, aber man lässt doch keine blanken Grafiken beurteilen.

 

[rotfuchs]

Der aufwändigste Teil der Site wird die Navigation, sofern die schwarzen Flächen verlinkt werden sollen. Tools wie Fireworks machen es aber trotzdem möglich. Stichwort: Imagemap

Die Kanten links und rechts (im Hauptteil) könnte man schlicht mit einem fortlaufenden Hintergrundbild lösen.


Meine Skizzen für neue Layouts erstelle ich schlicht Bleistift und Collegeblock.

 

[mpeg.exe]

Wie kann man ein Mouseover machen? Also, wenn man über einem Button ist klappt sich eine Leiste aus. In etwa so: http://www.directupload.net/file/d/1105/wQjHNLJt_png.htm

 

[Crizzo]

Das nennt sich Dropdownmenü und ist schon etwas aufwendiger, ich suche mal schnell was raus.
*such*

Horizontal Drop: http://www.alistapart.com/articles/horizdropdowns/
Vertikal Drop: http://www.cssplay.co.uk/menus/final_drop.html
Mal was auf Deutsch: http://www.creuz.de/artikel/Horizontales+Men%FC/

oder hier: http://www.htmldog.com/articles/suckerfish/dropdowns/

 

[rotfuchs]

Allgemein ist das eine Sache mit JavaScript.

Es gibt Tools mit denen man sich solche DropDown Menüs zusammen klicken kann (bestes Beispiel: Fireworks), trotzdem sollte man dafür wenigstens CSS beherrschen da sonst kleine Änderungen zu einer Qual werden.

 

[Crizzo]

Ich finde die Lösungen mit CSS wesentlich besser, vor allem da sich auch sehr barrierefrei sind und auch ohne Java laufen.

 

[rotfuchs]

Ich finde die Lösungen mit CSS wesentlich besser, vor allem da sich auch sehr barrierefrei sind und auch ohne Java laufen.

Ohne JavaScript lässt sich das eine oder andere Menü aber nicht realisieren. Zumal moderne Browser die Script-Spache beherrschen müssen, man denke nur an die unzähligen Web2.0 Anwendungen.

 

[Crizzo]

Nenn mir mal solch ein Menü.

 

[rotfuchs]

Zum Beispiel der Hover-Effekt auf looki.de bei dem die Leiste langsam ausfährt, wenn man das schnell hintereinender macht, überlappen sich die Felder sogar. Ich wüsste nicht, wie man das ausschließlich mit CSS bewerkstelligen könnte.

Nicht ganz DropDown Menü aber ähnlich ist auch die in 4 Farben aufgelistete Navigation auf der Startseite von mootools.net. Die Felder verschieben sich elegant und geben ein Bild zum Vorschein. Nicht das man dass Layout von mootools.net nicht in CSS hinbekommen könnte, einige Teile sind aber nur mit Ajax möglich.

 

[Crizzo]

Gut, solche Gleiteffekt bekommt man afaik nicht mit CSS hin.