Re-Design XPUsermanager Homepage

[pustekuchen]

Try this

Code:

.navigation {
    background-color: lightblue;
    border-bottom: 2px solid #818485;
    border-left: 2px solid #818485;
    border-right: 2px solid #818485;
    margin-bottom: 20px;
    padding: 5px;
    text-align: right;
}
body {
    background-color: #F8F8FC;
    font-family: Arial,Sans-Serif;
    font-size: 90%;
    margin-left: auto;
    margin-right: auto;
    width: 840px;
}
h1.title {
    background-color: lightblue;
    border-left: 2px solid #818485;
    border-right: 2px solid #818485;
    border-top: 2px solid #818485;
    color: white;
    font-style: italic;
    margin: 0;
    padding: 5px;
}
h2, h3 {
    margin: 0;
    padding: 0;
}
p {
    margin: 0;
    padding: 0;
}
font.em {
    font-weight: 600;
}
.navigation a {
    color: black;
    font-weight: bold;
}
.middle {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
}
div.body {
    background-color: #E8E8E8;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    text-align: justify;
    width: 800px;
}
div.bottom {
    margin-left: 0;
    margin-right: 0;
    padding-top: 0;
    width: 880px;
}
div.boxes {
    background-color: #E8E8E8;
    float: left;
    margin-left: 0px;
    margin-right: 5px;
    margin-top: 15px;
    padding: 15px;
    width: 28%;
}
div.footer {
    clear: both;
    font-size: small;
    padding-top: 10px;
    text-align: right;
}
div.hintbuy {
    font-weight: bold;
    text-align: right;
}
div.downloadlink {
    font-weight: bold;
    text-align: center;
}
table {
    border: 2px solid gray;
    border-collapse: collapse;
    font-size: 90%;
}
th {
    border-style: solid;
    border-width: 1px;
    font-weight: bold;
    padding: 3px;
    text-align: left;
}
td {
    border-style: solid;
    border-width: 1px;
    padding: 3px;
}

Und die mittlere Box wieder auf

Code:

class="boxes"

Kleiner Tipp: Falls du Firefox benutzt, lad dir das Addon Firebug runter. Damit kannst du on the fly die Daten ändern und siehst direkt das Ergebnis.

[Florian Hämmerle]

.bottom muss noch 840px breit werden wie alles darüber ;)

Du hast .body width auf 800px und padding auf 20px => absolute Breite = padding-left + width + padding-right = 20 + 800 + 20 = 840px.

mfg Florian

[Luckie]

Zitat:

Zitat von Florian Hämmerle (Beitrag 1076162)

.bottom muss noch 840px breit werden wie alles darüber ;)

Du hast .body width auf 800px und padding auf 20px => absolute Breite = padding-left + width + padding-right = 20 + 800 + 20 = 840px.

mfg Florian

Verdammt, das wars. Jetzt passt es.

So, bleibt noch ein vernünftiges Farbschema. Was würdet ihr da vorschlagen? Ich habe für so was kein Auge.

[Florian Hämmerle]

Farbschema: ich würde ein dunkleres blau für den header nehmen.. das jetzige sieht irgendwie etwas "ausgewaschen" aus. Color-Code: #024978;

Was für einen Browser verwendest du denn?
Firefox? --> Addon Firebug
Chrome? Maus-Rechtsklick->Element untersuchen
dann kannst du die einzelnen HTML-Nodes ansehen und bearbeiten ohne jedesmal direkt in der Datei etwas zu ändern.

[Luckie]

Firebug habe ich installiert. Das kenne ich. Ich lade es nur hoch, damit ihr seht, wie es aussieht.

OK, den Banner ein etwas dunkleres Blau und den Rest so lassen?

[Florian Hämmerle]

gut (:

ich will dich jetzt nicht von meinem Geschmack beeinflussen aber ich finde es sehr angenehm, wenn der haupttextblock (bei dir div.body) einen (sehr) dezenten Rahmen hat (also nur etwas dunkler als die Hintergrundfarbe).

Ansonsten am Design fällt mir nichts mehr auf, nur noch am Aufbau der HTML-Datei. Da gäbe es noch einige Dinge die man machen könnte um es leichter wartbar zu halten.
.wrapper
.header
.footer

<hr /> ist eigentlich nicht notwendig, dafür kann man auch .footer einen border-top verpassen.

das nur als Anregung.

mfg Florian

[Bernerbaer]

Hallo Luckie, ich hab dir mal ein alternatives Template als PM gesendet (da ich noch immer nicht besonders begeistert bin von deinem Template :wink:).

[Luckie]

Ich habe jetzt vom berner Bären ein Template bekommen. Das werde ich mal bei mir hochladen. Aber ich muss euch waren, dagegen sieht meins mehr als bescheiden aus. Hätte ich das zur Veröffentlichung von XP gehabt, könnte ich mich jetzt zur Ruhe setzen. ;)

[Luckie]

Es gibt eine neue Version. Wie schon angekündigt, wird jetzt das Template von Bernerbaer verwendet.

http://www.michael-puff.de/Privat/Dev/XPUsermanager_BB/

[stahli]

Das ist RICHTIG KLASSE!
Sieht super aus (professionell aber schlicht) und ist sehr übersichtlich.

Nur die Schriftgröße im Impressum passt (noch) nicht.

[RWarnecke]

Und die E-Mail Adresse im Impressum würde ich noch maskieren, so dass Sie im Quelltext nicht lesbar ist. Damit hälst Du Dir den Spam fern.

[DeddyH]

Das nenn ich doch mal ein Design :thumb:

[Luckie]

Finde ich auch. Öhm, die Schriftgröße muss die gleiche sein. Sie kann nicht anders sein. Das muss eine Täuschung sein.

[patti]

Zitat:

Zitat von Luckie (Beitrag 1076206)

Das muss eine Täuschung sein.

Das wäre aber eine extreme Täuschung... (siehe Screenshot)

[mirage228]

Vom Design her finde ich das ebenfalls sehr gut und professionell :)
Allerdings könnte dieser Farbverlauf mit der Box im Header eine geringere Höhe haben (oder alternativ der Text weiter oben beginnen), da sonst quasi genau dieser (nicht viel aussagende) Farbverlauf im Blickfeld des Benutzers ist, wenn er die Seite zum ersten mal besucht (Stichwort "goldener Schnitt").
Was hier noch untergeht ist diese "Alles auf einen Blick" (Text, Download-Link, Lizenz-Link, Features-Box)-Ansicht. Das gefiel mir persönlich bei Deinem Neuentwurf besser.

Viele Grüße

[Luckie]

Was für ein Browser? Bei mir sieht es korrekt aus. Aber da war ein tag nicht richtig geschlossen. Das muss der Firefox korrigiert haben.

[patti]

Mein Browser ist Opera 11, hab ich vergessen zu erwähnen.

Allerdings habe ich die Seite gerade im IE 8 getestet, da ist leider noch einiges verrutscht...

[stahli]

Jetzt ist das Menü versetzt und ein paar Pixel fehlen vom linken Text.
Vorher war das i.O. (IE8)

[mirage228]

Zitat:

Zitat von patti (Beitrag 1076212)

Mein Browser ist Opera 11, hab ich vergessen zu erwähnen.

Den habe ich auch, kann allerdings keines der von Dir beschriebenen Probleme nachvollziehen...

[Luckie]

Bernerbaer! Hilfe!

mirage228: Es ist auch korrigiert. ;)

[BUG]

Sieht gut aus (:thumb:), aber eine Kleinigkeit:
Anhang 33142
(Firefox 3.6.13)

[Luckie]

Den habe ich auch, da stimmt es aber. :gruebel:

Sollte jetzt auch im IE8 funktioniere und ich bekenne mich schuldig, ich hab's kaputt gemacht. ;)

[RWarnecke]

Hallo Michael,

eine Kleinigkeit habe ich noch. Das sollte doch bestimmt "Weitere Programme" heißen und nicht "Weiter Programme" oder ?

[stahli]

Ist wieder hübsch :-D

Wie bastelt man denn so ein schönes Box-Bild?
Ich habe sicher in ein paar Jahren auch mal Bedarf :stupid:

[Bernerbaer]

Zitat:

Zitat von stahli (Beitrag 1076225)

Ist wieder hübsch :-D

Wie bastelt man denn so ein schönes Box-Bild?
Ich habe sicher in ein paar Jahren auch mal Bedarf :stupid:

Mit Coreldraw erstellt man das Layout und die box, mit Corel Photopaint, die Verläufe, Schatten und Glanzlichter.

[Bernerbaer]

Noch ein Tipp zur HP: erstell Dir noch ein Favicon

[Namenloser]

Zitat:

Zitat von BUG (Beitrag 1076217)

Sieht gut aus (:thumb:), aber eine Kleinigkeit:
Anhang 33142
(Firefox 3.6.13)

Habe das gleiche Problem wie BUG.

[Luckie]

Ja, schöne Idee, nur hapert es an der Umsetzung, deswegen hatte die Seite nie eins. ;)

[pustekuchen]

Wo hats da denn gehapert? Designtechnisch oder Codetechnisch?

Wenn letzteres, dann such dir ein 16x16 Bild raus. Falls es noch nicht im ico format ist, wandel es um.(Tipp)
dannach uploaden und nur noch in der index Datei folgendes schreiben:

Zitat:

<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico">

Falls es aber ehr von der Designtechnischen Seite Probleme gab, könnte dir ja bestimmt jemand eins machen ;)

Hab leider grade nur Paint zur Hand :P

Zum neuem Template:
Vom Design her, natürlich besser als deine Variante. Doch auf der anderen Seite fand ich den Aufbau in deinem Template besser. Es wirkte sehr übersichtlich und man hatte direkt alles im Blick.
Man könnte das Template ja an den anderen Aufbau anpassen :)

Gruß
Marc

[freak4fun]

Ohne den ganzen CSS-Kram gelesen zu haben:

• DownloadSeite: Abstand zwischen Tabelle und Überschrift vergrüßern
• LizenzErwerben: Abstand oben und unten tabelle - text erhöhen
• Impressum: Schrift ist ja risieg :shock:
  
  
  

Sieht cool aus die neue Seite. ;)

[Luckie]

Zitat:

Zitat von freak4fun (Beitrag 1076302)

Impressum: Schrift ist ja risieg :shock:

Mach mal bitte einen Screenshot. Das kann doch gar nicht mehr sein. :roll:

[taveuni]

Vielleicht solltest Du mal in Deinem ersten Post die mittlerweile 3 Links auflisten.
Und dann über welchen man konkret schreibt.
Wenn man nicht alles liest kann das schon verwirrend sein?

[Luckie]

Also jetzige Version: http://xpusermanager.de
Meine neue Version: http://www.michael-puff.de/Privat/Dev/XPUsermanager/
Und bernerbaers Version: http://www.michael-puff.de/Privat/Dev/XPUsermanager_BB/

Letztere ist mein Favorit.

[Namenloser]

Was mir an deiner neuen Variante gegenüber der von bernerbaer gefällt ist die Schlichtheit. Aber du musst es wissen...

[Luckie]

Das stimmt, aber meine finde ich gegenüber nernerbaers einfallslos.

[youuu]

Für mich ist die letztere die vom Style her schönste und dennoch schlicht und übersichtlichste Seite.
Modern, aber nicht zu extrem, gerade richtig.

[DerFree]

Ich finde deine Überarbeitete Version auch schöner, bei der BB-Version ist mir die Grafik ein bisschen zu groß. Ich sehe auf den ersten blick nur ca. 2/3 der Website bei einer Auflösung von 1920x1080.

Ich Persönlich finde deine Version auch ansprechender weil sie nicht so Professionell aussieht, weil wenn ich die beiden Seiten jetzt vergleiche macht die BB-Version den Eindruck auf mich, als wolle mir hier jemand was verkaufen und deine bietet mir ein nützliches Programm an was ich auch kaufen kann.
Hört sich vielleicht alles ein bisschen komisch an aber ich hoffe du versteht was ich damit meine.

[Matze]

Die von Bernbaer ist prinzipiell nicht schlecht, aber sie erinnert mich an eine von vielen Websiten, die genau so aufgebaut sind. Website-Baukästen haben ähnliches im Angebot.
Wenn du deinem Entwurf einen etwas moderneren Header verpasst, gefällt mir der besser.

Dann noch ein zusätzlicher, kleinerer Screenshot, der nicht vom Browser herunterskaliert wird (das ist immer sehr schlecht, da es einfach bescheuert aussieht aufgrund fehlendem Antialiasing) und gut.

Ein ganz schnell zusammengemaltes Beispiel:

Anhang 33148

Der Text ist übrigens besser lesbar, wenn er nicht direkt aneinander klebt. Zumindest empfinde ich es so. Also ruhig ein paar Abstände einfügen bzw. herum probieren:

Anhang 33149

Die CSS-Eigenschaften nennen sich "line-height" und evtl. "margin" für die Abstände z.B. zum Screenshot-Untertitel" (die habe ich im letzten Beispiel verändert neben der Schriftart auf Verdana, aber das ist Geschmacksache).

[alfold]

Zitat:

Zitat von Luckie (Beitrag 1076484)

Das stimmt, aber meine finde ich gegenüber nernerbaers einfallslos.

Nein :wink:

Zitat:

Zitat von DerFree (Beitrag 1076490)

... als wolle mir hier jemand was verkaufen.

Das ist ja auch so bei Software schmieden, die müssen!

Zitat:

Zitat von DerFree (Beitrag 1076490)

...
und deine bietet mir ein nützliches Programm an was ich auch kaufen kann.....

:thumb:

Den Rest hatte ich ja schon weiter oben angemerkt

Gruss alfold

@Bernerbaer: Dies soll keine Abwertung deines Vorschlags sein. Ich finde die natürlich Top, als Verkaufsstratigie für eine Softwarefirma, daran gemessen das es ja nur ne kleine exe ist :thumb:

[Luckie]

Also, ihr macht es einem aber wirklich nicht einfach. Also besser gefallen tut mir im Moment Bernerbaers Version, weil sie auf mich einen professionelleren Eindruck macht. OK, es könnte der Eindruck entstehen, als ob sie mit einem Baukasten erstellt wurde, wie es sie zu Hauf im Internet gibt. Auf der anderen Seite finde ich meine Version eher etwas zu schlicht.
Und was spricht dagegen, wenn sie professioneller wirkt? Die Frage ist ja, welche Seite weckt mehr vertrauen in die Software und von welcher Seite würdet ihr eher eine Demoversion runterladen und bei gefallen kaufen?