# Design für Portfolio/Blog



## nchristoph (24. August 2008)

Hallo erstmal

Ich hab mich jetzt durchgerungen, wieder mal eine Seite für mich selber zumachen. Ich bin allerdings punkto Design eine eher grössere bis grosse Null.

Ich dachte mir ich poste mal den Fortschritt den ich bis jetzt habe und hole mir von euch ein paar Profitips.

Das ganze ist ca. ne halbe Stunde Arbeit bis jetzt.

Freue mich über jede Hilfe.

Falls ich im falschen Forum gepostet habe, bitte ins richtige Verschieben.

mfg


----------



## nchristoph (24. August 2008)

Hier nach ner Stunde Arbeit jetzt V2.


----------



## mAu (24. August 2008)

Tipp Nummer 1: schalte in Photoshop die Kantenglättung für die Schriften aus.


----------



## nchristoph (24. August 2008)

Wie geht das?


----------



## mAu (24. August 2008)

Wenn du im Textmodus (oder wie man das nennt) bist, kannst du oben neben Schriftart und -größe auch auswählen, ob die Schrift geglättet werden soll.


----------



## ink (24. August 2008)

Moin
Schaut n bissl langweilig aus oder?
Mach mal nen schönen Header und dämpfe des giftige Grün a bissl.
Die Suche finde ich da auch net optimal plaziert.

mfg


----------



## nchristoph (24. August 2008)

@mAu
Meinst du so?

@nesk
Wo würdest du die Suche hinpacken?
Was verstehst du unter schönen Header?

Wie gesagt ich bin Designtechnisch nich gerade begabt.


----------



## nchristoph (24. August 2008)

So eine weitere halbe Stunde Arbeit investiert.

Hab das grün entschärft, die Suche woanders hingepackt und die Schrift überarbeitet.

Jetzt brauch ich nur noch eine Idee für den Header. Kann mir wer eine geben?


----------



## ink (24. August 2008)

Jo, die Suche passt da besser (somit hast du Platz für den Header)

Da du eine Programmier-Seite machst, würde ich des Thema im Header auch aufgreifen.
Farblich angepasste Codes + einige grafische Elemente.
Oder auch eine nachempfundene Konsole oder Interfaces könnten hier recht gut passen.

Es gibt sehr nette Tutorials im Netz, auch könnte DeviantArt zur Ideenfindung beitragen.
(Ideenfindung, nicht klauen )


mfg


----------



## nchristoph (24. August 2008)

Ist nicht nur eine Programmierseite sonder sollte auch mein Portfolio bzw Persönlicher Blog werden.

Weis noch nicht wie ich die Seite nenne. Bin bei solchen Sachen noch schlechter als bei Designsachen


----------



## Klein0r (24. August 2008)

mAu hat gesagt.:


> Tipp Nummer 1: schalte in Photoshop die Kantenglättung für die Schriften aus.



Warum sollte er die aus machen?
Sieht doch nun total verpixelt aus 

Ich finde es auch noch ein wenig sehr langweilig. Bisher kann man die Seite ohne Bilder komplett so formatieren... Dafür muss man kein Photoshop bemühen!

Jeder Anfang ist schwer 
Schaffste schon


----------



## nchristoph (24. August 2008)

Tja ich wurstel mich so durch mit dem Versuch was halbwegs Ansehnliches hinzukriegen.

Hier mal V5 & V5.1 nach insgesamt 2.5 stunden Arbeit


----------



## ink (24. August 2008)

Du hast absolut keine Vorstellung was du nehmen sollst?
Irgendwas hast du doch sicher im Kopf 

PS: Des mit der Schrift verstehe ich auch net.


----------



## nchristoph (24. August 2008)

Im Kopf hab ich schon was nur glaub ich würde das komisch aussehen wenn ich da ein Gehirn hinpacke oda?

Ne im ernst: In der Schule hatte ich in Künstlerischer Erziehung immer ne 5. Wegen dem Fach wäre ich beinahe Sitzen geblieben, und das 8 Jahre lang


----------



## Klein0r (24. August 2008)

Lol "künstlicherische Erziehung" - wie geil  Aber Naja...

Ich finde das mit der Bewegungsunschärfe schon wesentlich schöner. Aber mal ne andere Idee wenn du da Sourcecode mit drauf haben willst: Nimm doch ein längeres Stück Quelltext (nicht unbedingt hallo welt...) und mach die schrift kleiner. Wahlweise könntest das auch mit nem Screenshot aus nem Editor machen damit das Syntax-Highlighting nicht verloren geht. Das sieht sicher besser aus. 
Und dann nicht ganz so steil gelegt und einfach nur die Deckkraft nen bischen runter.

Naja wirst schon was finden - einfach nen bischen rumspielen!
Siehst ja auch selbst wann was gut aussieht und was nicht - hoffe ich zumindest 

Nur versuch wirklich das zu schaffen was du dir vorstellst und finde dich nicht mit "Notlösungen" ab wo du nur aufhörst weil du es Technisch im ersten Moment nicht hinbekommst aber eigentlich ne super Idee hast!

lg


----------



## nchristoph (24. August 2008)

Ich wäre schon mal mit ner Notlösung zufrieden

Wie mach ich nen Screen und werd dann den Hintergrund des Editors los?


----------



## Klein0r (24. August 2008)

Ausschneiden? 

Im Anhang findest mal was was ich so auf die schnelle gemacht habe als kleine Anregung. Evt gefällts ja?!

lg


----------



## Klein0r (24. August 2008)

Oh man ich habe gerade wirklich Langweile....
Sorry wenn ich an deinem Design rumpfusche 

Hier nochmal was - jetz lasse ich es und lege mich vorn Fernseher...
Wenn du die PSD-Datei haben willst schick mir deine mail-Adresse per PN...


----------



## ZodiacXP (24. August 2008)

Kein Apostroph klein0r und nchristoph  "Christophs Portfolio"


----------



## mAu (24. August 2008)

Das mit der Schriftglättung war nur für den Blocktext und die Navigation gemeint, denn Firefox glättet die Schrift ja auch nicht... Der Logotext bzw. alle als Grafiken eingebundene Texte können nach belieben geglättet sein.

Ich mache das immer aus, damit ich mir ein Bild machen kann, wie es wirklich aussehen wird/würde.


----------



## Klein0r (24. August 2008)

ZodiacXP hat gesagt.:


> Kein Apostroph klein0r und nchristoph  "Christophs Portfolio"



Jetz wo dus sagst... Habe es einfach so übernommen ohne nach zu denken 



mAu hat gesagt.:


> Das mit der Schriftglättung war nur für den Blocktext und die Navigation gemeint, denn Firefox glättet die Schrift ja auch nicht... Der Logotext bzw. alle als Grafiken eingebundene Texte können nach belieben geglättet sein.
> 
> Ich mache das immer aus, damit ich mir ein Bild machen kann, wie es wirklich aussehen wird/würde.



Achsooo - na das macht ja dann eh keinen Unterschied weil das doch eh nur nen Beispieltext ist... Aber gut zu wissen ^^ Dachte Schriftglättung unterstützten alle Browser?! Hab ich mich wohl getäuscht 

lg


----------



## nchristoph (25. August 2008)

klein0r das sieht ja geilo aus

Das hat mich gleich mal auf eine Idee gebracht
Mach ich heute nach der Arbeit gleich mal.


----------



## Klein0r (25. August 2008)

Freut mich wenns dir gefällt.
Hoffe jetz haste nen paar Ideen die du umsetzen kannst...

Bin auf die Ergebnisse schon gespannt


----------



## Security (25. August 2008)

Naja, das kann schon noch geiler, aber egal, erstmal zu deinem Seitenaufbau?
Forum; Chat? Was wird das denn für ne Seite, mit wievielen Besuchern am Tag rechnest du denn, damit du einen Chat brauchst?

Ich würd das Design ne bisschen heller machen. Schwarze Schrift auf weißem Vordergrund liest das Auge immernoch am liebsten


----------



## Klein0r (25. August 2008)

Security hat gesagt.:


> Forum; Chat? Was wird das denn für ne Seite, mit wievielen Besuchern am Tag rechnest du denn, damit du einen Chat brauchst?



Ja das habe ich mich auch gefragt - meine erste Seite sah aber nicht viel anders aus... Da denkt man noch man braucht sowas. Gibt ja auch genügend Foren im Netz mit 3 angemeldeten Benutzern, 20 leeren Foren und 3 Themen (die dann die Regeln enthalten). 

Die Erfahrung muss man dann schon selbst machen denke ich.
_Solche Begriffe kommen einem aber auch schnell in den Sinn wenn man nicht weiß was für Content auf seine Seite stellen soll!_

Und - sicher ist das Design noch steigerungsfähig - aber ich wollte Ihm ja erstens nicht die ganze Arbeit abnehmen und zweitens nur nen kleinen Denkanstoß geben  Umsetzen sollte er das schon selbst 

lg


----------



## nchristoph (25. August 2008)

So erstmal danke für die ganze Hilfe bis jetzt.

Hier mal V6.

Ich glaub ich werfe die Navi wie sie jetzt is und bau Buttons ein, wäre sicherlich besser vom Design her oder?


----------



## Klein0r (25. August 2008)

Naja mein Fall ist es noch nicht.
Sieht halt noch sehr unsauber aus und schnell zusammengeklickt.
Schwer zu sagen...

Der Kalender gefällt mir aber ganz gut an der Stelle und auch die Farbwahl
und Positionen der Elemente (bis auf das Suchen-Feld).

lg


----------



## nchristoph (25. August 2008)

Ich hab jetzt mal etwas herumprobiert.

Wie schaut das hier aus?

V8


----------



## nchristoph (26. August 2008)

Hm klein0r eventuell?


----------



## Klein0r (26. August 2008)

Ja bin doch da  Wo brennts denn? 

Also mir ist das ganze zu verzerrt...
Der Home-Button braucht auch noch nen bischen Feinarbeit.

Davon ab hängt nicht alles von mir ab 
Arbeite mal ein bischen länger an einer Version die du dir vorstellst und machs dafür nen bischen sauberer. Deine Ergebnisse sehen leider aus wie immer 2min Arbeit - und das ist nicht Sinn der Sache finde ich... Lass dir mehr Zeit - lass das ganze auf dich Wirken und änder selbst an den Ecken die dir noch nicht so gefallen.
Das siehst du sicher auch - auch wenn du nich gut in Kunst bist 

Weiterhin finde ich das Suchen-Feld immernoch zu groß und die Schriftglättung kannst du bei den größeren Texten auch wieder an machen 

lg


----------



## nchristoph (26. August 2008)

An der Version hab ich eh 2.5 stunden gewerkelt

Naja ich werd mal mein bestes Versuchen.


----------



## ZodiacXP (26. August 2008)

Mal so als Idee:
Wenn ich ein neues Design machen muss dann mach ich 7 verschiedene per Hand. Die häng ich an die Wand und nehm' jeden Tag eins weg (das was am meisten nervt).
Die von den ersten 3 Tagen kommen direkt in die Tonne.
Die von den nächsten 2 Tagen kommen in ein Ordner, falls ich mal wieder schnell eins brauch 
Das vom nächsten Tag wird fein beiseite gelegt und später als zweiter Skin oder so verwendet.
Zum Schluss bleibt nur noch eins über, das den letzten Tag über den letzten Schliff erhält aufm Papier.

Mann kann auch 10 machen und dann 4 Müll-3 Ordner-2 Beiseite.

Wie Klein0r schon sagt: "Arbeite mal ein bischen länger", denn Design brauch Zeit.


----------



## Klein0r (26. August 2008)

ZodiacXP hat gesagt.:


> Wenn ich ein neues Design machen muss dann mach ich 7 verschiedene per Hand. Die häng ich an die Wand und nehm' jeden Tag eins weg (das was am meisten nervt).
> Die von den ersten 3 Tagen kommen direkt in die Tonne.
> Die von den nächsten 2 Tagen kommen in ein Ordner, falls ich mal wieder schnell eins brauch
> Das vom nächsten Tag wird fein beiseite gelegt und später als zweiter Skin oder so verwendet.
> Zum Schluss bleibt nur noch eins über, das den letzten Tag über den letzten Schliff erhält aufm Papier.



Ich glaube das übersteigt hier gerade ein bischen seinen Zeitplan  Ich halte das aber für eine sehr gute Lösung! Gefällt mir gut 
Werde ich beim nächsten mal versuchen!

lg


----------



## nchristoph (26. August 2008)

Och Zeitplan hab ich keinen

Muss als erstes die Firmenexterneseite online kriegen dann kann ich mich voll dem Designen und meiner privaten Seite kümmern.


----------



## nchristoph (27. August 2008)

So jetzt hab ich ne Weile dran gewerkelt.

Hier V10. V9 hab ich gleich wieder in die Tonne geworfen.

Buttons überarbeitet, Header überarbeitet und Suchefeld kleiner gemacht.


----------



## ZodiacXP (27. August 2008)

Ich find da ist ein Tal zu viel von den Wellen. Genau das was hinter den Buttons ist. Das stört i-wie. Vielleicht die Welle nach links verschieben das sie über die Buttons geht oder langziehen bis sie über die Buttons geht.

Vielleicht kann mir auch mal jemand auf diesem Wege sagen was aus dem guten alten Form-Follows-Function geworden ist.


----------



## Klein0r (27. August 2008)

Die Welle könnte nen bischen Schärfer sein und nen bischen weniger Deckkraft 

Die Idee von ZodiacXP finde ich auch klasse


----------



## nchristoph (27. August 2008)

Was für ne Funktion?

Ok ich hoffe mal ich habs richtig verstanden was ihr beide gemeint habt.

V11


----------



## Klein0r (27. August 2008)

Ja hast du (so habe ich es zumindest verstanden).

Aber ich finde die Welle immernoch zu unscharf. Die Kante könnte nen bischen härter sein.

lg


----------



## nchristoph (27. August 2008)

Wie kann ich die Kante schärfer machen?

Ich hab das erste mal mit Pfaden gewerkelt.


----------



## Klein0r (27. August 2008)

Naja wenn du den Pfad erstellst dann direkt in der richten Größe (also nachher das Ergebnis nicht mehr transformieren).

Dann aufpassen wenn du eine Auswahl erstellst das du bei Radius 0 Pixel einstellst und Glätten aktiviert hast - das wars eigentlich... Bei mir sehen die dann eigentlich besser aus  Weiß aber auch nicht mit wieviel DPI du arbeitest. Denke aber mal 72, oder?

lg


----------



## nchristoph (27. August 2008)

Jup 72 dpi 

Ok ich hab 1 Pixel genommen.

Dann werd ich das morgen nomma machen und schaun ob ichs besser hinkriege


----------



## Klein0r (27. August 2008)

Ob der eine Pixel was ausmacht weiß ich nicht...

Mir sieht es eher so aus als ob du das ganze ohne ende gestreckt hättest...
Komisch  Aber das bekommste schon noch hin ^^

lg


----------



## nchristoph (28. August 2008)

Ok ich hab jetzt sicher die Wellen 100 mal neugemacht und das hier ist das beste Ergebnis.


----------



## Klein0r (28. August 2008)

Sieht doch ganz gut aus 
Bis auf die kleine Delle etwas weiter vorne über den Icons ;P


----------



## nchristoph (28. August 2008)

Habs gerade nochmal überarbeitet und finde das passt jetzt perfekt wie es ist

Oda was würdet ihr sagen?


----------



## Klein0r (28. August 2008)

Hast ja schon wieder Treppen reingezaubert


----------



## nchristoph (28. August 2008)

Habs geschafft.

hier v14


----------

