Das Design von YAMLit geht in die dritte Runde

[santscho]

Version 1 diente der Sache. — Im Vordergrund stand das Erstellen der Artikel.
Version 2. — Damit es in allen Browsern etwa gleich daher kommt.

Das Erscheinungsbild war recht schwer und düster. Zum Teil war Text schwer zu lesen und auch zu klein. Die Farben waren zu "dreckig".

Die neue Version von YAMLit ist nun spritziger, leichter, heller, freundlicher. Knufflige Icons und runde Ecken.

Das Artikel-Listing unter News verwendet für die runden Ecken eine CSS-Klasse. Leider nur sichtbar in FireFox. IE-Surfer müssen sich mit den zwei runden Ecken am Fuss begnügen, welche vom Hintergrund-Bild kommen, falls die "Abrundung-CSS" nicht greift. Die runden Ecken für die Artikelkopf-Daten und den Navi-Container (links) belasse ich als Grafiken.

Was in den nächsten Tagen/Nächten noch gemacht werden muss:
- Icons für Teaser-Navigation (Impressum...)
- Anpassen von alten Formularen (Kontakt/Suche/Newsletter)
- Anpassen von alten Buttons
- Anpassen von alten CP-Templates (Teaser/Fileselector...)
- Anpassen von Content-CSS (Zeichenerklärungen/h3-h6/a/a:hover/....)
- Anpassen vertikale Navigation

http://yaml.phpwcms.org

Grüsse
Santscho

[marcus@localhorst]

wenn ich mich recht erinnere, hatte das logo in der 2. version, so nen spiegeleffekt, das sah gut aus mit dem schrägen logo, jetzt irgendwie nicht mehr.
naja - ändere nur nicht zu oft
grüße marcus

[Toflar]

I like...wunderschön santscho - Kompliment!

[Rainer G]

Das sieht doch schon recht peppig aus und ist wesentlich übersichtlicher.

Das Logo wirkt allerdings irgendwie an den oberen Rand geklebt. Und irgendwie fehlt dem Logo noch der phpwcms-Bezug. Der phpwcms würde sich rechtsbündig darunter sicherlich gut machen. Links uns rechts vom Hauptteil könnte man einen Farbverlauf der Headerfarbe zur Randfarbe machen. Aber das ist alles Geschmacksssache und über Geschmack kann man sich bekanntlich nicht streiten .

[santscho]

Und wie wärs mit sowas?



Hier zum Vergleich vorher:



(Achtung: Farben unterschiedlich, da oben Screenshot aus Adobe Illustrator und unten Screenshot aus FireFox)

[bogus]

Hi

Bin nur privater Anwender *gg Daher eine kleine Frage, die vielleicht total blöd daher kommt. Wieso nimmt man für Logo immer Programme, die mit den Web eigentlich nichts so gemein haben ? Ich mein der llulastrator ist doch eigentlich mehr als für den Druck gedacht oder irre ich mich ? Auch wenn ich so sehe, das leute, ok meist professionelle Webdesigner, bei ihren freien Templates, Themes etc. .psd Dateien dabei legen. Ok, nun kann Gimp und paar andere Grafikprogramme, die für free sind, diese Dateien lesen, aber dabei geht doch einiges verloren oder ?
Ich mein damit, man müsste bei solchen Sachen eher auf Dateiformate zurückgreifen, die auch jeder, wenn es so gewollt ist, auch bearbeiten bzw. benutzen kann oder irre ich mich ?

Das soll aber nicht die Arbeit schmälern, die dahinter steckt. Im Gegenteil, ich bin immer sehr beeindruckt was die Leute so mit den Programme erstellen können. Was mir nie gelingen würde

[santscho]

Hallo Bogus

Die Programme von Adobe (Photoshop/Illustrator) sind für Web und Print geeignet. Beide Programme bieten mächtige Tools für das Erstellen von Templates an. Zum Beispiel kann man die ganze Gestaltung in Photoshop oder Illustrater machen und danach alles als Webgrafiken (inkl. html) exportieren.

Der Vorteil — Ein paar Beispiele

- Effekte bleiben nativ in der PSD/AI Datei erhalten. Ändern des Schlagschattens aller Buttons? — Kein Problem... Doppelklick auf den Effekt, abänder, OK, Buttons erneut exportieren.
- Arbeiten mit Ebenen... Photoshop/Illustrator Ebene 1: Button | Photoshop/Illustrator Ebene 2: Rollover-Effekt | Photoshop/Illustrator Ebene 3: Button Text.
- Man kann extrem schnell eine Website gestalten und diese dem Kunden präsentieren, ohne eine Zeile html zu schreiben. Will man dem Kunden noch Dummy-Menüs präsentieren, exportiert man aus Illustrator/Photoshop in das Programm Fireworks. Dort lassen sich schnell ein paar funktionierende Navigationen einbauen. Am Schluss kann man auch alles noch nach Dreamweaver exportieren und dort das definitive Template erstellen.
- Du kaufst ein Template auf www.templatmonster.com. Jetzt möchtest Du einen grünen Hintergrund anstatt blau und die Header-Grafik ist Dir auch zu gross. Dank Photoshop-Ebenen kannst Du das ganze Design Deinen Wünschen anpassen.

Antwort genügend?

Liebe Grüsse

Ralph

[flopi]

Wirklich sehr schön. Das einzige was du vllt. noch ändern könntest wären die Icons im Menü.
Das man die mit einem Effekt versieht, dass sie tiefergesetzt aussehen. Ebenso beim Suchfeld.
Aber ansonsten very nice.
Deine tutorials haben mir sehr geholfen yaml schön einzubinden.

mfg
flopi

[bogus]

Hi santcho

Ja die Antwort war sehr gut, hatte eigentlich was anderes erwartet in negativen ;D Aber ein problem bleibt für mich persönlich, die Programme sind ziemlich teuer Aber bin auch kein professioneller Webdesigner, daher brauche ich diese Art von programme eigentlich nicht so ;D

Danke für die schöne Antwort

[santscho]

hatte eigentlich was anderes erwartet in negativen

Als ich noch in der Schweiz gelebt habe, war ich unter Anderem Betreuer von 3 AZUBI. Hier in Singapore unterrichte ich manchmal an der Republic Polytechnic. Ich bin mir wirklich die kuriosesten Fragen gewohnt. Glaub mir, Deine hat durchaus ihre Berechtigung.

Übrigens: Die Adobe CS3 Design Standard (Photoshop, Illustrator, InDesign, Acrobat) kostet hier in Singapur für Privatanwender 330 Euro. Die Adobe CS3 Web Standard (Dreamweaver, Flash, Fireworks, Contribute) ebenfalls 330 Euro.

[Toflar]

OMG ist das günstig...^^

Ich arbeite immer noch mit Photoshop 7.0 und der reicht vollkommen aus.
Und ich bin ein Feind von WYSIWYG-Editoren wie Dreamweaver oder Frontpage...

[bogus]

OMG ist das günstig...^^

Und ich bin ein Feind von WYSIWYG-Editoren wie Dreamweaver oder Frontpage...

Freund von den Programmen bin ich auch nicht. Man kann genau sehen, ob eine Webseite mit Frontpage erstellt wurde, Dreamweaver geht ja noch.

Zu den Preis, das ganze wird bestimmt in englisch sein, obwohl würde mir auch nichts ausmachen, gibt ja genug gute Tutorial Seiten. Aber ist schon kurios, das da so billig ist und hier massig bezahlen muss.

[santscho]

Es handelt sich ja auch nur um die Standard-Versionen der CS3-Pakete. Diese "billigen" Versionen sind für Studenten und Heimanwender gedacht. Gibt es in Deutschland sicher auch, oder?

[Toflar]

Ich bin nich von Deutschland xD
Aber Studentenversionen gibts eh überall, aber da musst du erstmal Student sein