Anzeige

[WIP] Portfolio V3

[WIP] Portfolio V3 | PSD-Tutorials.de

Erstellt von Weichzeichner, 03.10.2008.

  1. Weichzeichner

    Weichzeichner Alles muss funktionieren.

    221
    Dabei seit:
    28.06.2007
    Beiträge:
    2.166
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Stift & Papier.
    Kameratyp:
    Auge.
    [WIP] Portfolio V3
    So, und nun ist es wieder so weit. Mittlerweile gefällt mir mein altes Portfolio-Design nicht mehr. Oder sagen wir, es passt jetzt einfach nicht mehr zu meinem Stil. Da ich versuche, mich in Richtung 'minimalistisches Design' vorzuarbeiten, möchte ich dies an meinem Portfolio umsetzen.

    Allerdings habe ich nicht gerade die größte Ahnung vom Webcoding (html oder php mit CSS krieg ich aber noch hin! :D ) habe, muss ich mal schaun wie es umgesetzt werden soll. Am liebsten wäre es mir mit Flash, da die minimalistische Seite doch ohne 'Bewegung' sehr starr daherkommen wird, und gerade durch ein dynamisches Design wirkt das ganze besser und 'verkauft sich gut'.

    Nun denn, hier mal die ersten 'Entwürfe'. Auch wenn man nicht Entwurf sagen kann, allerdings hoffe ich hier auf Verbesserungsvorschläge.


    Home (ohne Mouseover)

    [​IMG]


    Home (mit Mouseover)
    [​IMG]


    Portfolio
    [​IMG]


    Contact
    [​IMG]


    About

    [​IMG]

    Zu den Designs: Von dem Moment an, als ich die Schräglage von Text und Layout sah, hat es mich fasziniert. Gerade diese Schräglage scheint die Website dynamischer zu machen. Vertikal und Horizontal wirkt starr doch Diagonal ist anders....
    Und da ich noch jung bin, soll das Design genau das austrahlen:
    Junge Kreativität, der Hang zum Intuitivem.
    Ich hoffe ich habe das erreicht.

    Natürlich wie immer die Fragen:
    - Wie gefällt es euch?
    - Was kann man verbessern?
    - Habe ich meine Auflagen in euren Augen erreicht?


    Natürlich bin ich auch für Kritik offen, ab und zu ein Lob kann auch nicht schaden, das motiviert sagt man :D

    @ Mods: Ich hoffe es macht euch nichts aus, wenn ich einen neuen Thread eröffne, denn ich möchte schließlich nur spezifische Vorschläge zu meinem Design, und nicht noch zu meinen anderen Bildern. Danke!
     
    #1      
  2. ZackBag

    ZackBag I think, I spider!

    31
    Dabei seit:
    30.03.2006
    Beiträge:
    1.076
    Geschlecht:
    männlich
    Ort:
    Bad Hersfeld
    Software:
    Photoshop CS3
    Kameratyp:
    Digikam
    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    Gefällt mir relativ gut!
    Hätte da 2 Punkte:

    -Der Hover-Effekt auf der Startseite gefällt mir mäßig. Da sich ja die gesamte Hintergrundfarbe ändert. Das kommt doch sehr verwirrend und durch die verschiedenen Farben (wie ich es zumindestens denke) wird das sehr "undurchsichtig"

    -Die Portfolio Seite sagt mir nicht wirklick zu. Sollen da nur 4-8 Bilder gezeigt werden?
    Außerdem hat es eine weile gedauert , bis ich überhaupt geblickt habe, das die Bilder zum "beklicken" sind. Außerdem ist grade diese Seite NICHT minimalistisch, in meinen Augen.

    Ansonsten, passt das gut zu deinem bisherigen Style, da gibts nix zu meckern.

    Gruß
    ZackBag
     
    #2      
  3. PuN1mon

    PuN1mon piehmkay

    621
    Dabei seit:
    25.06.2008
    Beiträge:
    327
    Geschlecht:
    männlich
    Ort:
    Essen
    Software:
    CS3/CS4
    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    Also den Hoover effekt finde ich jetzt auch nich gut. Dagegen gefällt mir der Rest sehr! Die idee mit dem Portfolio find ich gut! :)
     
    #3      
  4. Weichzeichner

    Weichzeichner Alles muss funktionieren.

    221
    Dabei seit:
    28.06.2007
    Beiträge:
    2.166
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Stift & Papier.
    Kameratyp:
    Auge.
    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    Ok, danke für das Feedback!
    Ja ich glaube das ganze ist noch zu 'eng' um minimalistisch zu sein. Außerdem etwas 'too much' ich tu mich da immer etwas schwer :D

    Zu Punkt 1:
    Ja, hast schon recht, allerdings möchte ich diese rote Fabe (von dem jeweiligen Bereich) sehr umfassend einbringen.
    Es ist fast wie V2: Jeder Bereich hat seine eigene Farbe. Home ist immer grau, da man die Farbe (also den Bereich) noch auswählen muss.
    Allerdings kannst du es dir wohl auch nicht so vorstellen, wie ich es im Kopf habe:
    Beim überfahren eines Buttons wechselt der Hintergrund sehr langsam seine Farbe (sagen wir über einen Zeitraum von 5 seks). Klickt man nun auf den Button, zoomt das ganze auf den Schriftzug, sodass das ganze so zu sehen ist wie ich es gepostet habe. Das zum Thema Dynamik :D

    Zum 2ten:
    Das Portfolio ist ebenfalls wieder etwas schwierig zu 'kapieren'.
    Man kann durch die gesamte Reihe scrollen, jedes Bild ist ein Balken. Klickt man auf ein Bild öffnet sich ein Image viewer. Das scrollen selbst soll so passieren:
    Man geht mit der Maus an den linken oder rechten Rand des Bereichs, in dem die Balken sind und es scrollt.

    Hoffe nun ist Klarheit geschaffen. ^^

    EDIT: Danke PuN1mon, na da muss ich wohl dann nochmal schaun, wie ich es verändere.
     
    #4      
  5. Weichzeichner

    Weichzeichner Alles muss funktionieren.

    221
    Dabei seit:
    28.06.2007
    Beiträge:
    2.166
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Stift & Papier.
    Kameratyp:
    Auge.
    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    Sry für den Doppelpost, aber nochmal was ganz anderes:
    Ich werde das ganze mal in meinem Magix versuchen zu animieren. So ist die umsetzung besser vorstellbar. Mal sehen wie lange es dauert. In der zwischenzeit bin ich natürlich für jedes Feedback offen!
     
    #5      
  6. PaMe

    PaMe Guest

    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    hallo,
    schön das du dich auch zu dem absolut einfachem hinarbeiten möchtest :)

    nun zu deinem layout:
    das schräge gefällt mir gut. nur ist mir die 45° ausrichtung zu einfach. ich würde das ganze mit einem deutlich kleineren winkel versuchen. da können 10°-15° vollkommen ausreichen. a) wirkt es interessanter und b) hat es wiederum etwas eigenes. vorteil dabei wäre auch, du könntest (bei ausrichtung der navi unten) deinen kompletten content oben drüber packen. platz wäre genug da. es ist besser, wenn man die winkelung nur einem ausmacht, bei dir die navi. somit wirkt sie eigenständig und erklärt sich von selbst. hoffe du verstehst das so wie ich es meine.

    dann zu den farben. die wirken z zt noch ein wenig blass und irgendwie nich stimmig. auch hier mein vorschlag, den hover auf die navi zu begrenzen und die farbänderung beim content nur in den überschriften und meinetwegen kleinen grafischen spielerein wieder aufzugreifen. wirkt denke ich aufgeräumter und klarer. farbanzahl und verwendung hat auch viel mit dem reduzierten gestalten zu tun.

    typo, besonders die der navi, finde ich auch nich grade glücklich. das angeschnittene finde ich gut, aber die is zu dünn. vllt gibts die in ner medium oder bold?! oder man nimmt eine von den "großen". deine wirkt zu sehr aus dem standard windows katalog (gern pm, wenn du willst).

    vllt so in der art was die form betrifft. 36 sek schnellschuss.

    [​IMG]


    grüße PaMe
     
    #6      
  7. Weichzeichner

    Weichzeichner Alles muss funktionieren.

    221
    Dabei seit:
    28.06.2007
    Beiträge:
    2.166
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Stift & Papier.
    Kameratyp:
    Auge.
    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    Na darauf habe ich doch mal gewartet :D
    Hmmm du meinst ich sollte der Navi einen kleineren Winkel geben und den Content 'normal' darüber stellen?
    Ich weiß nicht.
    Das ganze würde defintiv zu unsymmetrisch wirken! Außerdem wollte ich alles irgendwie ineinander verzwickt haben (ich hoffe du weißt, was ich meine), würde ich nur die Navi diesen einen Winkel geben, wäre sie stark distanziert vom Rest und glaube ich nicht passen... Hmmm, aber der gedanke mit dem eigenem hat was.
    Naja mal sehen, ich werds mal ausprobieren.

    Bei den Farben hast du recht, aber ganz knallige Farben wollte ich auch nicht nehmen ;)
    Ich habe schon gesehen, dass ich den Kontrast gerade bei contact und about von dem Textfeld zur umgebung stark erhöhen muss. Ich dachte da an beinahes Schwarz.
    Beim Hover hast du recht, wollte ich auch erst machen, aber ich weiß nicht wirklich, wie ich das anstellen soll. Wenn ich das weiß erhalten will, dann kann ich schließlich nur die Schrift färben, und das sähe blöd aus. Hast du da eine Idee?
    Bei der Farbwahl selbst stimme ich dir zu, also was soll ich da als Grundfarbe nehmen? Ein sehr dunkles Grau vielleicht?

    Beim Typo hast du recht, den wollt ich eigentlich auch viel Dicker haben, aber leider hat die Font 'Spyroclassics' kein Bold, italic oder ähnliches. Für andere Vorschläge wäre ich äußerst dankbar!

    Werde mal schauen, wie sich dein Vorschlag so macht. Vielen dank für die Hilfe!
     
    #7      
  8. PaMe

    PaMe Guest

    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    hiho,
    in dieses topic schau ich selten rein. mich interessieren keine dollen neuen signaturen. webseiten-entwürfe gehören in den webbereich :) auch wenns nur wips sind. ich hab da min 15 threads leigen, hat noch keinen mod gestört ;)

    deine typo in der navi sieht der avantgarde sehr ähnlich. die hast du auch def in ner bold irgendwo rumliegen. das wäre die windows-datenbank alternative. die "großen", wie die din, meta, metro, dax, signa usw kosten natürlich ne menge geld. aber solche schriften dürfen das auch zu recht. das sind wunderbare auszeichnungsschriften, die sich eben für solche sehr gut eignen. die haben alle etwas ganz besonderes, weg vom standart. und wenns nur ein schönes kleines g ist. aber ich denke bei dafont lässt sich auch etwas kostenfreies und schönes finden. am besten den ganzen schrftsatz anzeigen lassen und auf details achten. die machen ne typo aus, gleich nachm satz.

    wegen der winkelung, dass musst du selbst entscheiden. nur denke ich, täte es der aufteilung gut tun.

    was die auszeichnung mit farbe betrifft, da hast du tausend und 7 möglichkeiten. du kannst nur die überschriften färben, oder nur die icons, oder simple grafik rahmen oder oder oder. jedenfalls sollte die farbe des fließtextes schwarz sein und bleiben (oder weiß, aber kein misch-masch). das is klar und funktioniert und wird auch von jedem begriffen. ausserdem ist es neutral und einfach gewohnt. da sollte man die gimmicks in die grafik legen. kleine sachen, hübsche sachen, nix übertriebenes. schick einfach, was das schwerste is ;)


    viel spaß beim tüfteln!
     
    #8      
  9. Weichzeichner

    Weichzeichner Alles muss funktionieren.

    221
    Dabei seit:
    28.06.2007
    Beiträge:
    2.166
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Stift & Papier.
    Kameratyp:
    Auge.
    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

     
    #9      
  10. gegenwind

    gegenwind liebt Pizza.

    Dabei seit:
    18.01.2006
    Beiträge:
    806
    Geschlecht:
    männlich
    Software:
    CS6
    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    Mir gefällt die Seite optisch ziemlich gut. Aber dynamisch wird sie wohl nicht oder?
    Ich mache immer nur zu gerne 4 Streifen, statt 3 - wegen Adidas..., ich weiß nicht wie weit die Streifen geschützt sind.
     
    #10      
  11. ZackBag

    ZackBag I think, I spider!

    31
    Dabei seit:
    30.03.2006
    Beiträge:
    1.076
    Geschlecht:
    männlich
    Ort:
    Bad Hersfeld
    Software:
    Photoshop CS3
    Kameratyp:
    Digikam
    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    Gefällt mir schon um einiges besser! ...
    Bin auf die Umsetzung gespannt, die dürfte wohl nicht allzu einfach sein

    Gruß
    ZackBag
     
    #11      
  12. rapzitis

    rapzitis Guest

    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    die site geht mal steil würd ich sagen. das neue, bei dem du nur mit wenigen farbakzenten arbeitest find ich persönlich besser, das andere konzept ist aber auch sehr gut.

    Fließtext würd ich aber deutlich größer setzen, ebenso einen größeren zab. Ist angenehmer zu lesen und lässt es ein bissle mehr aussehen, falls man auch gar nicht so viel schreiben will ;)

    Bin auf jeden fall gespannt auf eine umsetzng. Flash würd sich da denke ich auch am besten anbieten - wenn die einzelnen streifen reingeschossen kommen oder ähnliches - sieht bestimmt sehr gut aus am ende.
     
    #12      
  13. Weichzeichner

    Weichzeichner Alles muss funktionieren.

    221
    Dabei seit:
    28.06.2007
    Beiträge:
    2.166
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Stift & Papier.
    Kameratyp:
    Auge.
    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    @ Redro: Ganz genau, die verwechslung möchte man tunlichst vermeiden :D

    @ Zack: Uhhhhh, ich ehrlich gesagt auch :D
    Ich muss mich in Flash ersteinmal einarbeiten, aber mein erster Eindruck war: Sehr kompliziert! :D

    @ Rapzitis: Schön, dass es dir gefällt! Größe des Fließtextes möchte ich extra klein halten, weil es besser aussieht wenn man mehr Wörter in einer 'Reihe' hat, und es soll erst recht nicht Platzfüllend wirken. Eher das Gegenteil. Zab ist ein guter Punkt, da muss ich mal sehen. Wie gesagt, die Umsetzung wird sehr knifflig, ich muss mir das wohl wieder irgendwie beibringen, oder ist hier zufällig ein Flasher mit viel Zeit? :D

    PS: Wir brauchen mehr Lachende Emotis! :D
     
    #13      
  14. Weichzeichner

    Weichzeichner Alles muss funktionieren.

    221
    Dabei seit:
    28.06.2007
    Beiträge:
    2.166
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Stift & Papier.
    Kameratyp:
    Auge.
    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    So, ein paar kleinere Änderungen:

    _______________________________________________________________


    index
    [​IMG]

    portfolio

    [​IMG]

    about
    [​IMG]

    contact
    [​IMG]

    _______________________________________________________________

    Ist es nun so gut? Oder sollte ich noch grundlegende Änderungen vornehmen?
     
    #14      
  15. PaMe

    PaMe Guest

    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    hallo,
    also die helle version finde ich auch um einiges klarer und ansehnlicher.

    aber:
    das angeschnittene würde ich jetzt nich auf "alle" elemente anwenden. ich fande das als "überschrift" echt genug und absolut ausreichend! so ballerst du dieses gestaltungselement wieder mitm hammer überall drauf und das schöne detail geht unter.

    dann sind bei der navi deine wörter nich identisch in der form. also besonders bei "portfolio" is es deutlich zusehen, dass es nach unten rausrutscht.

    den fließtext finde ich zu gequetscht. ich mach das gern in ner verdana 11 auf 14 mit 25er laufweite. kannst es ja mal testen.

    wie werden eigtl deine sachen im ganzen präsentiert? wo geht dann die auswahl hin? wie funktioniert da die navigation?

    über das grün als schmuckfarbe kann man sich jetzt auch totstreiten. die is ok, würde da aber auch noch einmal versch farbvarianten testen. weiss, das braun, ich könnte mir da auch ein schönes dreckiges blau vorstellen. is aber geschmackssache, echt!

    ein bruch in der gestaltung is auch noch, das du nich überall die überschrift mit rein nimmst. fehlt beim portfolio. generell würde ich die funktion und das konzept der portfolio seite noch mal überdenken. ich kann es mir nur so vorstellen, dass sie absolut benutzerunfreundlich ist und sau schwer sein wird, diese zu pflegen (ich mein die unterseite portfolio, nich die gsamte ;)).


    war jetzt vllt ein bissl viel, aber konstruktiv :)


    grüße PaMe
     
    #15      
  16. Weichzeichner

    Weichzeichner Alles muss funktionieren.

    221
    Dabei seit:
    28.06.2007
    Beiträge:
    2.166
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    Stift & Papier.
    Kameratyp:
    Auge.
    [WIP] Portfolio V3
    AW: [WIP] Portfolio V3

    ööhm, welches meinst du jetzt? :D

    Hmmm, stimmt, hast recht, da werd ich nochmal schaun.

    Ok, breitere Laufweite. Werde wohl sowieso nicht so viel hinschreiben im Endeffekt.

    Meine Dinge werden dann im Endeffekt über ein seperates Fenster präsentiert. Uff wie hieß das jetzt noch? Dieses weiße Fenster, das sich Aufklappt, hier häufig auch bei den Bildervotings zu sehen. Letzendlich wird jedes Bild einen Balken bekommen. Man kann weiter 'blättern' indem man auf den Pfeil klickt.

    Das Blau habe ich auch schon ausprobioert, das kam mir dann aber etwas zu 'seicht', der Kontrast zwischen BG, Balken und Schrift war einfach nicht schön. Das Grün passt, finde ich.

    Hmmmm, ja stimmt, die Überschrift lässt sich allerdings auch schwerlich hineinsetzen, ohne das ganze Grundlegend zu ändern.
    generell würde ich sagen, dass die Portfolioseite etwas außen vor steht. Sie ist eines der wichtigen Seiten, insofern finde ich den Stilbruch sogar noch hervorhebend. Eventuell mache ich die Balken noch schmaler, sodass man in einem Rutsch mehr Bild betrachten kann, aber ich finde es so schon fast perfekt.

    Nein, das war so sehr gut, du hast viele Sachen nochmal aufgegriffen, die ich vorher nicht gesehen hatte, danke dir!
     
    #16      
x
×
×
teststefan