Layoutkonzept Portfolio zum bewerten
lima-city → Forum → Die eigene Homepage → Grafikdesign
all
aufbau
boxen
dank
design
detailansicht
face
frage
hintergrund
http
inhalt
navigation
nutzen
realisieren
referenz
schrift
schriftart
url
weben
zeigen
-
Heyho Limaner :D
Es ist Zeit, mein Portfolio zu überarbeiten. Ich habe dazu ein erstes Layoutkonzept kreiert, welches ich euch gerne vorstellen möchte.
Die Positionierung der einzelnen Elemente ist eig. mehr oder weniger definitiv, die Farben brauchen wohl noch eine kleine Überarbeitung/harmonisierung, den Inhalt bitte nicht beachten da ich den einfach zusammenkopiert habe.
Das Konzept:
- http://download.globals.ch/newpage/v2_webdesign.png (Mehrheitlich dieser Aufbau)
- http://download.globals.ch/newpage/v2_referenzen.png (Übersicht über die Referenzen, bei hover wird es in dem dunklesten grün/blauton hinterlegt und der Titel des Projektes untenstehend aufgeführt.)
- http://download.globals.ch/newpage/v2_referenzen_detail.png (Detailansicht einer Referenz)
Nun, folgendes möchte ich von euch wissen:
- Sind die Farben harmonisch?
- Ist der Inhalt genügend lesbar?
- Stimmt das Gesamtbild?
- Reicht die unterteilung / der abstand zwischen den einzelnen elementen?
- Allgemeines Feedback :)
Ich danke euch bereits jetzt!
Gruss Sublime
Edit: Links klickbar gemacht
Beitrag zuletzt geändert: 21.2.2011 10:04:01 von all-web -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Champagne & Limousines ist eine geniale Schriftart :)
Auf den ersten Blick ist das Ganze eine schöne Sache.
Mir stellen sich nur Fragen bei der Realisierung.
Wie willst du die Schriftart in der späteren codierten Seite anzeigen?
Wie willst du den Hintergrund realisieren? Ist ja ein riesiges Bild -> Ladezeit.
Die Navigationselemente sind m.M. zu groß.
Die Referenzen sehen aus, als ob sie einfach reingeklatscht wurden,
vielleicht solltest du da einen leichten Schlagschatten o.Ä. nutzen.
Grün ist eine feine Farbe ;) -
sneppa schrieb:
Champagne & Limousines ist eine geniale Schriftart :)
Auf den ersten Blick ist das Ganze eine schöne Sache.
Mir stellen sich nur Fragen bei der Realisierung.
Wie willst du die Schriftart in der späteren codierten Seite anzeigen?
Wie willst du den Hintergrund realisieren? Ist ja ein riesiges Bild -> Ladezeit.
Die Navigationselemente sind m.M. zu groß.
Die Referenzen sehen aus, als ob sie einfach reingeklatscht wurden,
vielleicht solltest du da einen leichten Schlagschatten o.Ä. nutzen.
Grün ist eine feine Farbe ;)
Heyho
Danke dir für dein Feedback!
Champagne & Limousiness kommt nah an diese Schriftart heran, ist es aber nicht ^_^ (sondern Century Gothic)
Die Schriftart werde ich mit CSS importieren, siehe dazu http://de.selfhtml.org/css/eigenschaften/schrift_datei.htm#font_face
Jau der Hintergrund wird sicherlich die grösste Datei der Seite. Ich werde wohl einen guten Kompromiss zwischen Qualität und kompression wählen und diesen im interlaced-format abspeichern, damit es von beginn an angezeigt wird und laufend besser aussieht. Auch werde ich darauf achten, dass ab ~1400px breite und ~1000px höhe der hintergrund in eine durchgehende farbe endet, damit es auch nicht zu gross sein muss.
Jau du hast recht, die Navigationselemente werde ich wohl ca. 2-4px kleiner mahen. Auf einen Schatten bei den Referenzen werde ich verzichten: Evtl. der Kasten, welche bei hover erscheint, durchgehend in einer anderen, nicht dominanten Farbe zu zeigen wäre nicht schlecht.
Thanks so far!
-
all-web schrieb:
Heyho
Danke dir für dein Feedback!
Champagne & Limousiness kommt nah an diese Schriftart heran, ist es aber nicht ^_^ (sondern Century Gothic)
Alles klar, ich war zwischen den beiden am überlegen ;)
all-web schrieb:
Die Schriftart werde ich mit CSS importieren, siehe dazu http://de.selfhtml.org/css/eigenschaften/schrift_datei.htm#font_face
Beunruhigt dich dieser Satz nicht?
Von diesen in CSS2 eingeführten Angaben wurde nur @font-face vom Internet Explorer und Netscape 4.x unterstützt. Da sie weder in den Mozilla-Nachfolgern noch in anderen aktuellen Browsern implementiert sind, gehören sie in CSS 2.1 nicht mehr zum Standard!
all-web schrieb:
Evtl. der Kasten, welche bei hover erscheint, durchgehend in einer anderen, nicht dominanten Farbe zu zeigen wäre nicht schlecht.
So etwas meinte ich. -
sneppa schrieb:
Beunruhigt dich dieser Satz nicht?
Von diesen in CSS2 eingeführten Angaben wurde nur @font-face vom Internet Explorer und Netscape 4.x unterstützt. Da sie weder in den Mozilla-Nachfolgern noch in anderen aktuellen Browsern implementiert sind, gehören sie in CSS 2.1 nicht mehr zum Standard!
Hmm, hab die Seite nur rasch verlinkt um zu zeigen wie ich es realisieren will. Dass dies nicht (mehr) gültig ist, war mir gerade nicht bewusst. Nun gut, da muss ich wohl auf Verdana oder Helvetica umswitchen - schade, aber muss wohl so sein. Denn den Text als einzelne Bilder rein zu hauen wäre stumpfsinnig. Vllt. die Überschriften werd ich so reinhauen, aber den Content sicherlich nicht. Danke für den Hinweis, da muss ich noch einmal über die Bücher.
EDIT: Es scheint, als wäre es nach der Abschaffung mit CSS3.0 wieder ins Programm genommen werden. So hat mich http://www.font-face.com (erstaunlich, für was es alles heutzutage einzelne seiten gibt^^) darüber informiert, dass firefox, chrome, safari und opera es nun auch unterstützten. Mit IE zsuammen sinds doch so gut wie alle, also werd ich es wohl über @font-face + alternative schriftarten realisieren.
Beitrag zuletzt geändert: 21.2.2011 11:20:59 von all-web -
Hi,
hier eine Überlegung:
In der Referenzübersicht keine Vorschaubilder, sondern textmäßige Gliederung in Branchen/Komplexität/was auch immer...
In der Detailansicht dann die grafische Darstellung.
-
Heyho
peroom schrieb: Hi,
hier eine Überlegung:
In der Referenzübersicht keine Vorschaubilder, sondern textmäßige Gliederung in Branchen/Komplexität/was auch immer...
In der Detailansicht dann die grafische Darstellung.
Mir sind die grafischen Aspekte in dieser Kategorie wichtiger. Hostingkunden werde ich aber wahrscheinlich in einer von dir erwähnten Auflistung. Unten die erneuerten Bilder, anstatt fix nach Jahr geordnet plane ich jetzt eine dynamische Sortierung einzuführen.
sneppa schrieb:
Die Referenzen sehen aus, als ob sie einfach reingeklatscht wurden,
vielleicht solltest du da einen leichten Schlagschatten o.Ä. nutzen.
Siehe links unten, habe es nun angepasst, sieht für mich wesentlich besser aus. Ein aktives Element ist auch vorhanden, beim rolllover schiebt sich der Titel so rauf^^
- http://public.globals.ch/newpage/v3_webdesign.png (Mehrheitlich dieser Aufbau)
- http://public.globals.ch/newpage/v3_referenzen_auswahl.png (Übersicht über die Referenzen, bei hover wird es in dem dunklesten grün/blauton hinterlegt und der Titel des Projektes untenstehend aufgeführt.)
- http://public.globals.ch/newpage/v3_referenzen_detail.png (Detailansicht einer Referenz)
Ich habe die Struktur überarbeitet und noch verstärkt die Struktur betont und das Design schlichter und eleganter versucht umzusetzen.
Die Fragen bleiben wie erhabt, Thx so far! :D
Beitrag zuletzt geändert: 28.2.2011 21:05:48 von all-web -
Die Referenzen sehen nun wesentlich besser aus, gut gemacht!
Kannst dich ja mal an die Programmierung machen und währenddessen noch ein wenig Detailarbeit machen ;)
Du solltest dir vielleicht noch Gedanken wegen der Navigation machen, die sieht noch ein wenig lieblos und schwebend aus.
Vielleicht ein wenig mit Boxen experimentieren. -
Ich finde das Design sieht schön aus. Das mit der Navigation ist natürlich Geschmackssache aber auch ich würde diese ändern. Vielleicht machst du die Schrift der Unterpunkte etwas kleiner und rückst diese noch etwas mehr ein.
Wenn du dich an die Programmierung wagst würde ich dir raten die Seite in der Breite festzulegen und bei breiteren Bildschirmen einfach die Hintergrundfarbe auf den Farbwert zu setzten welchen das Bild ganz rechts aussen hat.
Nach unten würde ich nur so weit gehen wie tatsächlich auch Content da ist. Der Footer immer unten lassen auch wenn du weniger Content hast als der Browser hoch ist. Informier dich am besten über "Wrapper" so nennt sich diese Funktionalität. Ist eine ziemlich verstrickte Sache und nicht einfach zu verstehen aber ich denke du wirst es schon hinbekommen wenn du es einbauen möchtest.
Gruß S.Brosch -
Heyho
Das Design habe ich weiterentwickelt, ich glaube langsam kommt es gut:)
- http://public.globals.ch/newpage/v4_startseite.png
- http://public.globals.ch/newpage/v4_webdesign.png (Seite aus den Leistungen, merhheitlich dieser Aufbau)
- http://public.globals.ch/newpage/v4_referenzen.png (Ansicht der EInträge, Rollover wie bei Stadtnomaden.ch)
- http://public.globals.ch/newpage/v4_detail.png (Detailansicht eines EIntrages)
sneppa schrieb:
und
Du solltest dir vielleicht noch Gedanken wegen der Navigation machen, die sieht noch ein wenig lieblos und schwebend aus.
Vielleicht ein wenig mit Boxen experimentieren.
software-brosch schrieb:
Das mit der Navigation ist natürlich Geschmackssache aber auch ich würde diese ändern. Vielleicht machst du die Schrift der Unterpunkte etwas kleiner und rückst diese noch etwas mehr ein.
Mit Boxen kommt das einfach nicht schön... und ich möchte es auch weit offen lassen/viel Raum lassen.
Ich bin eher in Richtung von software-bosch's Vorschlag gegangen, habe die Schrift und das Spacing bisschen experimentiert und ich glaube so siehts gut aus :)
Dass die Linie zwischen Titel und Inhalt oben weg ist, was sagt ihr dazu?
Deine progammiertechnischen Hinweise werde ich alle wie von dir gennant umsetzen :)
Grüsse Sublime -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
