Re-Design XPUsermanager Homepage

[BUG]

Zitat von stahli:

Der blaue Kopf passt nicht dazu. Der Fußteil wirkt etwas zerrupft (sollten vielleicht 3 farblich abgesetzte Zellen sein?).

An den Zellen müsstest du auf jeden Fall noch was machen

Ich hätte noch einen Vorschlag bezüglich des Bildes:
XPUsermanager - Eine Benutzerverwaltung für Windows_1295394000907.jpg

Typo:

Zitat:

zuweisen und entziehgen von Privilegien

Ansonsten sieht es frischer aus

[Luckie]

Das sieht gut aus mit dem Bild neben dem Text. Wie bekommt man das hin? Habe es hinbekommen.

Und du meinst, ich solle die Boxen vertauschen?

[mirage228]

Was mir auffällt, ist, dass die Navigation bei hoher Auflösung (hier: 1920x1200) sehr weit nach rechts rückt. Bei westeuropäischer Leserichtung von links nach rechts wirkt das sehr ungewohnt. Auch wird die Seite langgezogen, was den oberen Text schwieriger lesbar macht (sehr lange Zeilen). Da hat die alte Seite den Vorteil, dass die Breite begrenzt wird und der Text durch Absätze strukturiert ist. Ein wenig mehr Abstand zwischen den Elementen der Navigation würde meiner Ansicht nach zu einer besseren Übersicht dort beitragen.

Die Aufteilung und das Layout der Seite finde ich ansonsten gelungen . Besonders wirkt es optisch frischer als das alte Layout. Die Hervorhebung von "Download", "Features" und "Lizenz erwerben" finde ich sehr sinnvoll, obgleich der Text unter "Features" mir noch etwas karg vorkommt. Denn letzterer Abschnitt ist eventuell das erste was ein neuer Besucher sich anschaut, bevor er eventuell den längeren Text oben liest, daher solltest Du da wirklich die "Key Features", die neue Kunden mitnehmen soll, formulieren. Den Preis würde ich eventuell noch unter "Lizenz erwerben" nennen (falls nur ein Preis ist).

Ansonsten: Die Bilderqualität des Screenshots (stark verpixelt) sowie des Download-Buttons (stark verwaschen) würde ich noch überarbeiten.

Viele Grüße

[Luckie]

OK, ich habe mal Absätze eingefügt. Dass es bei hoher Auflösung so breit wird, da kann ich nichts machen. bei niedriger Auflösung würde es dann wieder ziemlich gequetscht aussehen. Oder hättest du eine Lösung dafür?

Der Screenshot wird nur vom Original (drauf klicken) runterskaliert, der kann eigentlich nicht pixelig sein. Das Downloadbild ist eine Grafik, die ich vergrößert habe, weil ich nichts brauchbares in der Größe gefunden habe.

Was den Text angeht, ich bin wie gesagt kein großer Texter diesbezüglich.

[mirage228]

Zitat von Luckie:

OK, ich habe mal Absätze eingefügt. Dass es bei hoher Auflösung so breit wird, da kann ich nichts machen. bei niedriger Auflösung würde es dann wieder ziemlich gequetscht aussehen. Oder hättest du eine Lösung dafür?

Du könntest versuchen über die CSS-Eigenschaft "max-width" die Größe der Seite oder einzelner Elemente zu beschränken (z.B. auf 800px).

Zitat:

Der Screenshot wird nur vom Original (drauf klicken) runterskaliert, der kann eigentlich nicht pixelig sein.

Also Du hast selbe Bild wie in der Großansicht eingeblendet, nur mit anderer Größenangabe? Bei mir sieht es derzeit so aus wie im Anhang (man sieht die Kanten recht deutlich finde ich). Eventuell könntest Du die kleinere Graphik separat mit einem Graphikprogramm erzeugen...

Zitat:

Was den Text angeht, ich bin wie gesagt kein großer Texter diesbezüglich.

Die Featureliste soll ja gerade mit wenig Text viel Aussagen ... ansonsten könntest Du auch mit Kursiv oder Fettschrift im obigen Text arbeiten, um wichtige Inhalte hevorzuheben (alternativ).

[Luckie]

Ja, so sieht die Grafik bei mir auch aus.

Das mit max-width werde ich mal ausprobieren.

Das mit den Hervorhebungen ist eine gute Idee.

[s.h.a.r.k]

Das mit dem max-width ist mir auch gleich aufgefallen. Nutze im Moment eine Auflösung von 1920x1200 und da ist die Seite schon verdammt breit.

Zudem zerschieß das Image auf der Seite das Layout (Firefox 3.6.x).

Evtl. kannst du auch mal runde Ecken ausprobieren, was bei den neueren Browsern wunderbar funktioniert. Du kannst ein paar Sachen auf dieser Seite sehen. Ist vom Design her sehr simpel gehalten und auch kein Meisterwerk. Brauche neulich auch nur mal eines für meine jQuery-Plugins.

PS: Erhöhe mal das Padding des div.body und setz es ruhig mal auf 20px. Heutzutage hat man meist recht viel Platz auf dem Screen wodruch man gerne große Abstände wählen darf.

[stahli]

bei 2560 px verschiebt sich die Fußzeile etwas...

[Luckie]

So ich habe jetzt ein festes Layout genommen von ungefähr 800 Pixeln Breite. Leider habe ich Probleme mit den drei Boxen am unterem Rand. Ich bekomme sie nicht zentriert und auf die richtige Breite.

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

Mein Stylesheet:

Code:

/*
   Bildschirm Stylesheet für xpusermanager.de
   2011-01-20
*/

.navigation {
   text-align: right; 
   margin-bottom: 20px;
   padding: 5px;
   background-color: lightblue;
   border-left: 2px solid #818485;
   border-right: 2px solid #818485;
   border-bottom: 2px solid #818485;
}

body {
   font-family: Arial, Sans-Serif;
   font-size: 90%;
   width: 840px;
   margin-left: auto;
   margin-right: auto;
   background-color: #F8F8FC;
}

h1.title {
   font-style: italic;
   background-color: lightblue;
   color: white;
   margin: 0px;
   padding: 5px;
   border-left: 2px solid #818485;
   border-right: 2px solid #818485;
   border-top: 2px solid #818485;
}

h1 {
   padding: 0px;
}

h2, h3 {
   padding: 0px;
}

p {
   padding: 0px;
}

font.em {
   font-weight: 600;
}

.navigation a {
    color: black;
   font-weight: bold;
}

div.body {
   text-align: justify;
   width: 800px;
   padding: 20px;
   margin-left:auto;
   margin-right:auto;
   background-color: #E8E8E8;
}

div.bottom {
   width: 800px;
   margin-left:auto;
   margin-right:auto;
   padding-top: 5px;
}

div.boxes {
   float: left;
   width: 200px;
   padding: 20px;
   margin: 5px;
   background-color: #E8E8E8;
}

div.footer {
   clear: both;
   padding-top: 10px;
   text-align: right;
   font-size: small;
}

div.hintbuy {
   text-align: right;
   font-weight: bold;
}

div.downloadlink {
   text-align: center;
   font-weight: bold;
}

table {
   border-collapse: collapse;
   border-width: 2px;
   border-style: solid;
   border-color: gray;
   font-size: 90%;
}

th {
   text-align: left;
   border-width: 1px;
   border-style: solid;
   padding: 3px;
   font-weight: bold;
}

td {
  padding: 3px;
  border-width: 1px;
  border-style: solid;
}

Und wem ein besseres Farbschema einfällt..nur her damit. Denn damit bin ich auch noch nicht zufrieden.

Ach so, warum ist das Padding oben und unten in der großen Box größer als am Rand? Das Padding von den Überschriften habe ich doch auf null gesetzt?

[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?