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

Erstes Portfolio Grunddesign

Status
Für weitere Antworten geschlossen.
Timmer

Timmer

Mitglied
Hi, ich hab mich gerade 15 Minuten hingesetzt, da ich ein Portfolio brauche.

Dabei ist das rausgekommen: Grunddesign v1

Der blaue Balken oben ist die Navi und der hellblaue Teil ist der Contentbereich. Die Navi bekommt natürlich noch einen schönen Mausovereffekt und Icons :P

Lohnt es sich, daran weiterzuarbeiten?

Neue Version: Grunddesign v2
 
Zuletzt bearbeitet:
Meiner Meinung nach lohnt es sich nicht, daran weiter zu arbeiten, weil es einafch nicht mein Geschmack ist, solche Layouts hatten wir schonn 100te Mal.

Bin auch kein Fan, von solchen designs, bei mir sollte es eher modern/schlicht sein...


Finde es, ganz ehrlich, nicht so gut.
 
Das sieht zwar schon gut aus, hinterlässt aber diesen Eindruck von "zu viel auf einmal". Verlauf, Rahmen und Schlagschatten für die ganz normalen Navigationspunkte sind einfach zu viele Effekte; beim hover-Effekt ist es noch härter -- insgesamt solltest du einfach die schiere Anzahl von Effekten in der Navigation reduzieren.
Mir fällt allerdings auch auf, dass diese vertikalen Trennstriche keinen Effekt (besonders keinen Schatten!) haben. So liegen sie optisch auf der gleichen Ebene wie der Hintergrund der Navigation, und somit hinter den einzelnen Navigationspunkten, wodurch sie ihre Aufgabe als Trenner so gut wie verlieren.
Fazit: Schrift in der Navigation: Keine oder kaum Effekte; Trennstriche: Dezenter Schatten.

Allgemein würde ich mir an deiner Stelle mal Gedanken darüber machen, wie das in Code umgesetzt werden soll. ;)
 
Wenn ich das sehe, stellt sich mir automatisch die Frage, ob das WWW-geeignet ist, oder ob der Aufwand, das Layout so umzusetzen, dass es sich sowohl an die Viewport-Größe als auch an die Schriftgröße anpasst, womöglich ziemlich hoch ist.
 
@Efchen: So schwer ist das nun auch wieder nicht; bis zu dem notwendigen Niveau an CSS sollte man schon vorgestoßen sein, wenn man sich ein Webdesign-Portfolio baut. :mrgreen:

Aber: Mein Viewport ist beispielsweise 1130 Pixel breit. Würde man die Seite tatsächlich so bauen, dass sich die Schrift über die gesamte Breite erstreckt, erschwert das die Lesbarkeit. Ich müsste extra den Viewport verkleinern und das ist nicht benutzerfreundlich.
 
Nein, so schwer ist das wirklich nicht immer.
Aber ich habe hier mal pauschalisiert. Die meisten, die ihre Layouts mit einem Grafikprgramm malen, slicen das hinterher und bauen es mit Tabellen ein, oder sie machen ein pixelgenaues Layout daraus. Beides ist Mist. Und davor wollte ich warnen.

Mein Viewport ist derzeit sogar 1400px breit. "Sich an den Viewport anpassen" heißt ja nicht zwangsläufig "immer so breit wie der viewport". Zumindest wollte ich das so verstanden wissen. Es heißt aber, dass eine Seite nicht 1400px nutzen sollte, wenn nur 640px verfügbar sind.
 
In der CSS-Umsetzung liefe das wohl auf max-width hinaus (oder was schlägst du vor?), was zum üblichen Problem führt, dass Internet-Explorer-6-Benutzer mit abgeschaltetem JavaScript keine brauchbare Seite bekommen.
Das ist natürlich Schuld des Internet Explorers, aber dessen Benutzer würde ich ehrlich gesagt (noch) eher berücksichtigen als Leute mit Smartphone oder weiß-der-Himmel-was.
 
ingoS schrieb:
Das sieht zwar schon gut aus, hinterlässt aber diesen Eindruck von "zu viel auf einmal". Verlauf, Rahmen und Schlagschatten für die ganz normalen Navigationspunkte sind einfach zu viele Effekte; beim hover-Effekt ist es noch härter -- insgesamt solltest du einfach die schiere Anzahl von Effekten in der Navigation reduzieren.
Zum Vergrößern anklicken....


Alexander hat es genau getroffen, schlicht bedeutet für mich wenig Effekte.
Es soll nicht heißen, garkeine zu verwenden.

Man erreicht mit wenigen Effekten viel mehr als mit vielen, sobald die wenigen gut ausgerichtet sind!
 
ingoS schrieb:
Fazit: Schrift in der Navigation: Keine oder kaum Effekte; Trennstriche: Dezenter Schatten.
Zum Vergrößern anklicken....

Meinst du mit Keine oder kaum Effekte die Schrift im normalzustand oder beim Hovereffekt?

Bei Schlagschatten der Trennstriche ist es so, dass man den Schatten kaum sieht oO Wenn ich den hinzufüge und die gleichen Einstellungen, wie bei der Schrift, einsetze, dann sieht man ihn nicht... Ich kann höchstens den Abstand vergrößern und die Transparenz verringern, was doof aussieht...

Also hier hab ich das ganze mal mit mehreren Versionen, also jeder Menüpunkt hat andre Effekte. Sagt mir mal, welcher am Besten ist, also Home, About, Works oder Contact...
Die dritte Trennlinie hat jetzt auch den Schlagschatten und der der Navi wurde rausgenommen

>>>Klick mich<<<

Ich setz mich dann lieber erstma an die Buttons, Felder und und den groben Aufbau =)

Ein Rahmen für Bilder ist auch schon fertig, nur weiß ich noch nicht genau, wie ich das umsetzen soll, also ob ich die Bilder einfach per Photoshop einfügen soll oder ob ich das über nen Code mache (aber wie??): Klick
Und hier mals als verbundene Version: Klick
 
Zuletzt bearbeitet:
Wie ich Dich verstanden habe, möchtest Du auf der Seite mehrere Bilder einfügen, die das von Dir gezeigte Bild als Rahmen haben. Damit das so einfach geht, sollten die Bilder alle etwa die gleichen Abmessungen haben, damit sie in den Rahmen passen.

Mir fallen auf Anhieb zwei Ansätze ein:

Die erste, einfacherere Variante erfordert eine weitere Vereinfachung: Keine Überlappung des Rahmens auf das Bild. Dann kannst Du den "Rahmen" als Hintergrundbild setzen und dem Bild einen Innenabstand geben:
Code: 
img {
    display: block;
    padding: 50px 90px;
    background: url(bilderrahmensd2.png) top left no-repeat;
}

Da es aber einen schönen Effekt geben könnte, wenn der Zacken des Sterns oben links auf das Bild ragt, folgt auf dem Fuße eine zweite Variante. Sie ist etwas komplizierter und erfordert einen Workaround für den IE.
Ich gehe davon aus, dass Du die Bilder in eine Definitionsliste packst.

Code: 
/* ungetestet! */
dt {
    position: relative;
}
dt:before {
    content: url(bilderrahmensd2.png);
}
dt img {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

Da ich es selber noch nie so gemacht habe, würde ich mich über Feedback oder sogar einen Link freuen :-D

Gruß
Junny
 
Ja das soll dann halt so aussehen:

pictureus0.png


+

bilderrahmenjx7.png


=

bildmitrahmenxy6.png
(Ergebnis von Photoshop ;D)

Aber ich versteh jetzt nicht genau, was du mit Definitionsliste meinst...
 
OK, das meinte ich mit Überlappung. Habe mal ein Beispiel erstellt und angehängt (mein Webspace ist leider immernoch down).

Eine Definitionsliste wird verwendet, weil diese am ehesten der Beziehung zwischen dem Bild und einem beschreibenden Text widerspiegelt. Wenn Du die Bilder ohne beschreibenden Text einfügst, musst Du halt eine andere sinnvolle Auszeichnung des Inhalts finden.

Gruß
Junny

edit-3: Dritte Version. Im IE 5.5+ läufts jetzt auch, aber der Bild überragt bis IE 7 den Rahmen. Um das richtigzustellen, fallen mir keine sinnvollen Wege mit HTML/CSS ein. Mit Javascript ginge es ohne Probleme.
 

Anhänge

Zuletzt bearbeitet:
Genauso hatte ich mir das vorgestellt, danke :D

Werde an dem Code noch ein bisschen rumtüfteln, vielleicht ein kleiner Hovereffekt oder so. Bring dazu hier auch mal ein Beispiel, wenn du willst =)
 
Möchtest Du für den Rahmen einen Hovereffekt erstellen, geht das recht einfach: Pack das Bild in einen Link, sodass man beim Anklicken das Bild in Originalgröße sehen kann (direkt auf das Bild verlinken).
Dann änderst Du die CSS-Regeln derart, dass der Link für den Rahmen zuständig ist. Wenn Du das gemacht hast, kannst Du mit der Pseudoklasse hover die Links selektieren, auf denen die Maus gerade ist. Die Kombination von hover und before lautet
Code: 
a:hover:before
Jetzt kannst Du ganz einfach andere Rahmenbilder für das hover-Bild auswählen.
Wenn Du willst, wende die Regeln auch für das Bild an, das jemand per Tastaturnavigation (Tab-Taste) im Focus hat:
Code: 
dl.gallery dt a:hover:before, dl.gallery dt a:focus:before {
    /* ... */
}
Für den IE das Ganze analog mit dem Filter bzw. Hintergrundbild.

Übrigens bin ich heute Morgen davon überzeugt, dass Du dem dt eine feste Höhe geben solltest. Kommentiere mal die before-Selektoren mit Regeln aus und schaue Dir an, was beim Ignorieren dieser Regeln sonst passiert.

Gruß
Junny
 
Ja gut, so blöd bin ich nun auch wieder nicht xD Hab den Hover-Effekt schon mehrmals in Seiten eingebaut und bisher ist das auch immer gelungen ;D

[EDIT]

So, das ist jetzt dabei rausgekommen:

Code: 
dl.gallery dt a:before {
        content: url(rahmen.png);
}
dl.gallery dt a:hover:before, dl.gallery dt a:focus:before {
        content: url(rahmenhover.png);
}
>>>Livepreview<<<

Ich finds auch toll, dass die Grafiken jetzt auch nicht mehr gespeichert werden können per Rechtsklick (jedenfalls bei Firefox...)

Mit Internet Explorer funktioniert das ganze noch nicht (jedenfalls bei mir ;D), ich arbeite später am Fix.
 
Zuletzt bearbeitet:
Ich finds ehrlich gesagt auch super wie es geworden ist, hab mir gleich ein bischen was abgekupfert :wink: (nich böse sein)

Aber hey, Timmer, ich hoffe wirklich, dass der Code später beim Portfolio besser aussieht (20 Fehler innerhalb von diesen paar Zeilen! Respekt!) und du dir das nicht angewöhnst! :grin:
 
Ja *hehe* das is mein CSS halt xD Ich versuch mich zu bessern =) Kannst mich ja korrigieren, wenn du willst :P

Bin nur grad ein bissel abgelenkt, weil ich nen Account Stealer beim Steamsupport melden muss^^
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben