• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Portfolio bewerten - Layout und Code

majo

Neues Mitglied
Hallo zusammen,

ich habe (mal wieder) ein neues Portfolio für mich gebastelt. Bitte bewertet das Layout und den Code. Für jegliche Kritik oder auch ein Lob bedanke ich mich schonmal im voraus.

Bevor ich's vergesse, hier ist der Link: Marius Margraf - Webdesign Portfolio
(Der Twitter- und der RSS-Link gehen noch nicht.)

Anbei gleich noch eine Frage: Wie schaffe ich es, dass unter "Kontakt" die Beschreibung zu dem jeweiligen .png-Bild sich, falls sie sich aufgrund der Breite des Viewports nach unten verschiebt, dann in der passenden Spalte unter dem jeweiligen .png und nicht am linken Rand des Div's anordnet?

LG majo
 
Werbung:
Hallo !

Was mir so auffällt:

- fehlende alt-Texte bei <img>-Tag
- fehlende width- und height-Attribute bei <img>-Tag
- fehlende title-Attribute bei <a>-Tag
- leere href="" bei <a>-Tag
- Navigation wandert sonstwohin bei text-zoom
- kleine Schrift für Absätze und geringe Zeilenhöhe.
- Nichit offizell verwendete Logos für Facebook und Twitter
- wenig Inhalt

+ Design ist simpel gehalten und wenig anspruchsvoll
+ wenig Inhalt



Gruß
Loon3y
 
Hallo majo,
auf den Code wurde großteils schon eingegangen, deshalb zum Layout und Design. Zunächst, was mir gefällt:

Dein Layout ist flexibel. Es sieht auch noch gut aus, wenn du das Fenster stark verkleinerst - bis auf den Link "Home", der unter dem RSS-Icon verschwindet und die unsortierte Ansammlung an Wörtern und Icons unter "Kontakt". Aber sonst vom Layout gut gelöst.
Die Farbkombination finde ich auch interessant.

Was mir negativ auffällt:

Das Hintergrundbild ist viiiiieeeel zu groß! 760 Kilobyte sind nicht vertretbar, vor allem nicht für eine Hintergrundtextur. Es surfen noch genug Leute mit langsamer Internetleitung und schon genug über mobiles Internet.
Die Schrift ist teilweise schlecht zu lesen. Das liegt zum einen an der Größe der Schrift (im Absatz wäre größere Schrift angenehmer). Zum anderen wird die Lesbarkeit durch die Hintergrundtextur beeinträchtigt - hier sind die Kontraste zu hoch, die dunkleren Stellen verwirren das Auge im Fließtext. Ich würde die Textur etwas verschwommener machen und/oder die Kontraste verringern. Und natürlich die Dateigröße drastisch verkleinern.
Die Navigation finde ich etwas überflüssig. Wer einen ausreichend großen Bildschirm hat, der versteht nicht, was die Links sollen. Du musst daher entweder jeden Bereich höher machen (durch Inhalt oder durch CSS), oder du lässt die Links ganz weg, da sie bei so wenig Inhalt keinen Sinn ergeben. Der Besucher scrollt die Seite dann sowieso durch.

Die Icons unter Kontakt, aber auch das RSS-Icon wolltest du dem Stil der Website anpassen - was an sich nichts schlechtes ist - aber in meinen Augen sieht das leider billig aus und die Original-Icons von Facebook und Twitter lassen sich eher nur erraten anhand des Textes daneben. Die Farbverläufe sind unpassend (im Logo und in den Streifen sind keine), die runden Ecken würde ich weglassen, da sie sich sonst nirgends im Design finden. Da solltest du wenigstens die Proportionen der Original-Icons 1:1 übernehmen oder gleich die Original-Icons nehmen.

Im Portfolio sind die Vorschau-Grafiken durch falsche Breiten- und Höhenangaben gequetscht und verkleinert. Sieht komisch aus. Die Grafiken sollten in ihrer vollen Größe angezeigt werden oder im Grafikprogramm passend geschrumpft werden.

Nun zum Logo: der blaue horizontale Streifen hat dieselbe Farbe wie das Logo - sieht nicht gut aus. Das Logo sollte sich davon abheben. Abgesehen davon sieht es wie eine unprofessionelle Kopie des Blog-Logos von Chris Spooner aus ... sein Tutorial dazu war wahrscheinlich eher als Inspiration gedacht.

Meine Meinung: Insgesamt keine schlechte Idee, nur wirkt die Website durch diese paar Dinge unprofessionell.

lg
kruschimappel

P.S.: Deine Frage habe ich nicht verstanden :D
 
Werbung:
Mir ist ein inhaltlicher Fehler aufgefallen:

Seit ich durch eine AG in der Schule die Skriptsprache Html kennengelernt habe, (...)

HTML ist keine Scriptsprache (wie z.B. JavaScript) sondern eine Auszeichnungssprache.

Außerdem heißt es "HTML" und "CSS" (alles Buchstaben werden groß geschrieben).
 
Werbung:
Okay. also eins nach dem anderen:

@Kruschimappel
Logo: Du hast recht, ich habe mich an dem Tutorial orientiert. Allerdings kannte ich nur die Adresse Blog.SpoonGraphics und wusste daher nicht, dass er das auch als eigenes Logo verwendet. Vllt. denke ich mir noch etwas anderes aus.

Icons: Die Idee war, alles, inklusive jeglicher Icons selber zu machen, auch keine Freebies etc zu verwenden. Ihr habt mich aber überzeugt, werde die offfiziellen nehmen + die Email maskieren.

Zum Hintergrundbild: Abgesehen von der Dateigröße, die ich wirklich noch ändern muss: Ich habe eben festgestellt, dass dass auf meinem Bildschrim heller aussieht - und somit lesbarer ist. War gerade bei nem Kumpel - und habe gesehen, wie es "wirklich aussieht". Werde dass daher aufjedenfall noch ändern.

@Loone3y
Code Fehler werde ich beheben.

Vielen Dank für das umfangreiche Feedback. Ich werde mich die Tage dransetzen und die Sachen überarbeiten.

LG
 
Werbung:
Zurück
Oben