AW: Websitenlayout ... Kritik erwünscht
Hallo Alex,
Hallo,
...ich arbeite mit einem Raster...
tut mir leid, aber es ist für mich definitiv KEIN Raster erkennbar.
Daher hier nun auch erstmal ein zur Anschauung. Daran werde ich mich im ersten Teil meiner Kritik orientieren.
Wie man unschwer erkennen kann, variieren die Breitenangaben. Die Breite deines Layouts ist 982px. Hier geht es bereits los. Ich vermute, Du hast dich an die 980px orientiert und dann der Headergrafik einen äußeren Rahmen mit einer 1px-Stärke gegeben? 982px machen den Bock nun nicht fett, aber ist halt eben auch etwas krumm um nun vernünftig im Raster weiter arbeiten zu können.
Die Contentbreite beträgt bei dir 943px. An dieser Stelle muss ich nochmal sagen: Du arbeitest nicht nach einem Raster, denn Du müsstes nun 314,3333333333333 px einstellen, um dein Layout in 3 gleich große Spalten einteilen zu können. Definitiv nicht machbar.
Im Footer hast Du erneut 2 Pixel unterschlagen, denn hier sind es lediglich 941px.
Bzgl. der Gesamtbreite hast Du nun zwei Möglichkeiten:
1) Du erweiterst den breitesten Teil im Header auf 1000px INKL. Rahmen und passt den Content auf eine Breite von 960px oder 980px, oder
2) Du entscheidest dich für 945px für den Contentbereich. Der lässt sich immerhin schön durch 3 teilen und Du musst nicht so viel umbauen.
Wie viel Aufwand Du nun für ein gutes Ergebnis aufbringen willst, bleibt natürlich dir überlassen.
So wirkt es aber schon auf dem ersten Blick unruhig und unstrukturiert. Weitere Dinge, wie Textabstände etc. führen ebenfalls dazu, dass das Layout keinen sauberen Eindruck macht.
Bei der Navigation musst Du dich entscheiden. Entweder ist der Bereich zwischen den Trennlinien immer gleich, oder aber der Abstand zwischen Link und Trennlinie (z.B. 10px). Nicht aber mischen.
Bei den drei Boxen und dem Footer werden die Fehler bzgl. der Gesamtbreite deutlich, wenn Du die roten senkrechten Linien verfolgst. Da Du dich für ein Drei-Spalten-Layout entschlossen hast, solltest Du die Boxen auch selbstverständlich gleich breit halten.
Textabstände sollten ebenfalls gleich sein.
Im Content geht es weiter. Hier sind die Absätze irritierend. Der Abstand der Absätze beträgt bei dir 28px. Der Abstand vom Text zu den Bildern hingegen nur 25px. Nun mag man das kleinlich nennen - da die Bilder aber keinen Bezug zum Textinhalt haben, stellen Sie einen Absatz dar - ergo auch den Abstand einhalten.
In der Sidebar ist mir der doppelte Zeilenabstand ein Rätsel. Reduzier auch hier auf einen normalen Zeilenabstand. Entferne außerdem die Silbentrennung und benutze bei der späteren Programmierung "justify" um den Text auszurichten. Das wirkt kompakter.
Außerdem erschließt sich mir hier auch nicht der Abstand nach rechts der Sidebar. Setze Sie bündig zur Außenkante. Willst Du bewusst einrücken, rücke auch den Content von links ein.
Du benutzt verschiedene Höhen zwischen Headline und Fließtext. 17px in den Boxen, 15px im Content und 20px in der Sidebar. Entscheide dich - das wirkt gleichmäßiger.
Der Abstand zwischen Content und Footer ist mir persönlich zu gering.
So viel zum Aufbau - nun möchte ich noch kurz auf das gestalterische zu sprechen kommen:
Ist das Logo ein Entwurf von dir, oder eine Vorgabe der Firma? Ich bin der Meinung, dass es optisch nicht zu dieser Branche passt. Irgendwer erwähnte hier in einem Post schon, dass der Stilbruch aus "Plastik" und "Stahlbau" recht konfus wirkt. Vllt. würde sich eine metallische Textur eher eignen?!
Die Kontur um die Navigationspunkte finde ich störend und unsauber.
Wenn Du unbedingt in Anlehnung an das Logo arbeiten willst, behalte die Kontur wenn überhaupt bei den Headlines bei. Und wo wir schon bei den Headlines sind: die Überschriften der Boxen und der Sidebar solltest Du Rechtschreibkonform (Groß-Klein) abändern. Du mischt Stile zu krass. Auch das wirkt unstrukturiert. Die Kontur muss auf jeden Fall auch aus dem Inhalt des Footers - oder willst Du hier nur ein einziges Bild einfügen?
Entferne die Kontur auch hinter den Pfeilen im Header. Warum? Weil der Header bisher ausschließlich aus Grafiken besteht. Nicht gut für die SuMa (Suchmaschinen).
Das Tor im Header passt überhaupt nicht rein. Würdest Du ein silbernes wählen, vielleicht eher, aber da es schwarz ist und Du nicht ein Funken schwarz benutzt, fällt es vollkommen raus. Allerdings ist es das einzige, was mich an die Branche erinnern lässt. Lass dich bei der Farbgestaltung also von dem Tor inspirieren.
In den Boxen benutzt Du Grafiken zur Abgrenzung. Im Footer moderne Linien. Kann man machen - muss man aber nicht. Auch hier gilt wieder: die Linien wirken neumodisch. Alle Bilder deines Kunden zeigen zu 90% Schörkel. Deine Seite hingegen wirkt plastisch und schnörkellos. Stilbruch schön und gut, aber hier nicht angemessen.
Die Links (das blau) passt ebenfalls nicht. Bleib hier bei der Schriftfarbe.
Meine Meinung ist nur eine von vielen und wie ich gelesen habe, bin ich wohl die Einzige, die das so sieht
- dennoch: mache dir nochmal Gedanken zu deinem Layout. Du willst eine KUNSTSCHMIEDE präsentieren. Da steckt das Wort KUNST schon drin und alles was Du bietest ist eine plastische Seite.
Entweder passt Du dich dem Stil des Auftraggebers an, oder aber Du arbeitest minimal und bringst so die Arbeiten des Auftraggebers in den Vordergrund. So könnte ich nun aber die vier Bilder gegen Computerteile austauschen und es wäre eine Seite für einen Händler.
Jegliche Aussagen sind gut gemeint und dienen der Hilfe. Wieviel davon nun angenommen und umgesetzt wird, bleibt dir natürlich selbst überlassen.
Liebe Grüße