Webdesign

Blues Man

13.01.2011, 02:28

Hi Leute!

Ich bin gerade dabei, unter anderem, eine Webseite zu machen, mit mir als Thema, weil ich son krasser Typ bin! Ich habe dabei versucht ein Design zu entwickeln, welches meiner Person und meinen Vorstellungen von gutem Design entspricht. Das hat mich nun einiges an Überlegung gekostet. Ich bin noch nicht mit allem zu hundert Prozent zufrieden, aber ich hab erst morgen Abend Zeit weiter zu machen.

Vielleicht hat ja in der Zwischenzeit jemand lust etwas dazu zu sagen:
http://www.jagodesign.de/test.png

Wenn sich also jemand veranlasst fühlt, ich bin für alles offen.

Zum Seitenanfang

zweisamstreit

Meister

Beiträge: 2 164

2

13.01.2011, 17:12

Finde das Design sehr gut, schlicht und einfach gehalten, mehr braucht man auch nicht.
Allerdings finde ich dieses schmutzige Gelb überhaupt nicht schön und ansprechend. Aber das ist geschmackssache.
Was mich interessiert: Gibt es irgendwelche Tools, um solche Design-"Bilder" in html/css umzuwandeln, oder wird das zu Fuß gemacht?

Zum Seitenanfang

(ﾟ∀ﾟ)

Erleuchteter

Beiträge: 4 451

3

13.01.2011, 18:11

Photoshop kann Slices von Designs direkt in HTML einbetten. Aber zu Fuß machen ist schöner.

Und ja, das Gelb ist nicht der Kracher aber Geschmacksache. Finds schlicht, also gut

Zum Seitenanfang

Tim0

Boehse Onkelz

Beiträge: 354

Wohnort: Hessen

Beruf: Schüler

4

13.01.2011, 20:18

Zitat von »zweisamstreit«

Finde das Design sehr gut, schlicht und einfach gehalten, mehr braucht man auch nicht.
Allerdings finde ich dieses schmutzige Gelb überhaupt nicht schön und ansprechend. Aber das ist geschmackssache.
Was mich interessiert: Gibt es irgendwelche Tools, um solche Design-"Bilder" in html/css umzuwandeln, oder wird das zu Fuß gemacht?

Habe mir mal die Mühe gemacht und das ganze für dich kurz in 4 Schritten beschrieben:

Schritt 1:
schritt 1.jpg

Schritt 2:
schritt2.jpg

Schritt 3:
schritt 3.jpg

Schritt 4:
schritt 4.jpg

Zitat

Hi Leute!

Ich bin gerade dabei, unter anderem, eine Webseite zu machen, mit mir als Thema, weil ich son krasser Typ bin! Ich habe dabei versucht ein Design zu entwickeln, welches meiner Person und meinen Vorstellungen von gutem Design entspricht. Das hat mich nun einiges an Überlegung gekostet. Ich bin noch nicht mit allem zu hundert Prozent zufrieden, aber ich hab erst morgen Abend Zeit weiter zu machen.

Vielleicht hat ja in der Zwischenzeit jemand lust etwas dazu zu sagen:
http://www.jagodesign.de/test.png

Wenn sich also jemand veranlasst fühlt, ich bin für alles offen.

zum eigentlichen Thema... xD

Ja schlicht ist es finds auch gut aber wie schon zweisamstreit &(ﾟ∀ﾟ) gesagt haben das gelb find ich auch zu krass.

Dieser Beitrag wurde bereits 2 mal editiert, zuletzt von »Tim0« (13.01.2011, 20:25)

Zum Seitenanfang

zweisamstreit

Meister

Beiträge: 2 164

5

13.01.2011, 20:35

Danke, aber ich hab kein Geld für Photoshop. Benütze nur freie, bzw. kostenlose Software. Sonst gibt's keine Tools?

Zum Seitenanfang

Tim0

Boehse Onkelz

Beiträge: 354

Wohnort: Hessen

Beruf: Schüler

6

13.01.2011, 20:38

Zitat von »zweisamstreit«

Danke, aber ich hab kein Geld für Photoshop. Benütze nur freie, bzw. kostenlose Software. Sonst gibt's keine Tools?

puh ^^ ehm google sagt mit gimp + plugin müsste es klappen...
hier der link http://www.gimpforum.de/archive/index.php/t-551.html kannst es ja mal durchlesen oder einfach weiter suchen in google "gimp slice werkzeug"

nochmal zum thema:

würde vielleicht den Hintergrund noch bisschen ändern hab mal aus spaß 2 gemacht

gelb.jpg
gelb2.jpg

Zum Seitenanfang

(ﾟ∀ﾟ)

Erleuchteter

Beiträge: 4 451

7

13.01.2011, 22:51

Zitat von »Tim0«

Zitat von »zweisamstreit«

Finde das Design sehr gut, schlicht und einfach gehalten, mehr braucht man auch nicht.
Allerdings finde ich dieses schmutzige Gelb überhaupt nicht schön und ansprechend. Aber das ist geschmackssache.
Was mich interessiert: Gibt es irgendwelche Tools, um solche Design-"Bilder" in html/css umzuwandeln, oder wird das zu Fuß gemacht?

Habe mir mal die Mühe gemacht und das ganze für dich kurz in 4 Schritten beschrieben:

Schritt 1:
index.php?page=Attachment&attachmentID=21144

Schritt 2:
index.php?page=Attachment&attachmentID=21145

Schritt 3:
index.php?page=Attachment&attachmentID=21146

Schritt 4:
index.php?page=Attachment&attachmentID=21148

Zitat

Hi Leute!

Ich bin gerade dabei, unter anderem, eine Webseite zu machen, mit mir als Thema, weil ich son krasser Typ bin! Ich habe dabei versucht ein Design zu entwickeln, welches meiner Person und meinen Vorstellungen von gutem Design entspricht. Das hat mich nun einiges an Überlegung gekostet. Ich bin noch nicht mit allem zu hundert Prozent zufrieden, aber ich hab erst morgen Abend Zeit weiter zu machen.

Vielleicht hat ja in der Zwischenzeit jemand lust etwas dazu zu sagen:
http://www.jagodesign.de/test.png

Wenn sich also jemand veranlasst fühlt, ich bin für alles offen.

zum eigentlichen Thema... xD

Ja schlicht ist es finds auch gut aber wie schon zweisamstreit &(ﾟ∀ﾟ) gesagt haben das gelb find ich auch zu krass.

Danke, genau das ist mMn nen negativ-Beispiel.

Du kannst das auch mit Gimp machen.
Stelle markieren->Copy->neues Bild->einfügen->speichern.. das wiederholste mit jedem objekt, was du für die umsetzung in html/css brauchst und hast somit nur die wichtigen bilder und nicht den ganzen abfall der mitgesliced werden muss/kann

Zum Seitenanfang

Opodeldox

Blues Man

Beiträge: 4 006

8

14.01.2011, 01:53

Danke an alle die etwas zum Design gesagt haben, ich werde sehen was ich daraus machen, wenn Interesse besteht kann ich das Ergebnis dann ja hier auch präsentieren.

Zitat von »zweisamstreit«

Finde das Design sehr gut, schlicht und einfach gehalten, mehr braucht man auch nicht.
Allerdings finde ich dieses schmutzige Gelb überhaupt nicht schön und ansprechend. Aber das ist geschmackssache.
Was mich interessiert: Gibt es irgendwelche Tools, um solche Design-"Bilder" in html/css umzuwandeln, oder wird das zu Fuß gemacht?

Für mich ist das nur die Vorlage zu der Umsetzung in Html+CSS, die ich von Hand mache. Zuerst beginne ich mit einem ganz einfachen Scribble. Dieses setze ich dann zuerst in InkScape um, weil das sehr schnell geht und nahe am Ergebnis liegt. Formen die ich benötige, z.B. runde Ecken, Kreise, Sprechblasen usw. usw. setze ich auch in InkScape um und exportiere sie in ein Pixelformat. Alle eckigen Flächen kann man auf jeden Fall in CSS umsetzen, Texturen auf z.B. Hintergründen versuche ich zu vermeiden was komplett gar nicht geht, sind Verläufe in Hintergründen.

Wenn das Layout dann komplett in Html+CSS geschrieben ist, mache ich mich an die Typografie der Webseite, die muss man natürlich bei der Wahl der Farben schon beachten. Wenn die Regeln dazu erarbeitet sind, dann setze ich den ganzen Inhalt nach ihnen um und fertig ist die Webseite. Auf dieser Webseite z.B. wird der Text nicht der Mittelpunkt sein, darum kann man z.B. mit Farben ein wenig gewagter umgehen und einen Font wählen, der zwar gut passt, aber für lange Texte nicht unbedingt geeignet wäre. Für z.B. ein Forum muss man anderen Regeln folgen. Genauso will ich meinen Inhalt nicht mit meiner Webseite überblenden, die soll bitte im Hintergrund bleiben, das ist etwas was auch ein Forum können muss.

Design ist meiner Meinung nach dann gut, wenn man es nicht mitbekommt.

Mit solchen Sachen wie Slicen brauchst du gar nicht erst anfangen. Davon abgesehen ist es möglich ohne professionelle Software professionelle Ergebnisse zu haben. Mir fällt nicht ein wozu ich Photoshop Gimp vorziehen sollte. Wichtig ist zu wissen was man tut.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »Opodeldox« (14.01.2011, 02:28)

Zum Seitenanfang

zweisamstreit

Meister

Beiträge: 2 164

9

14.01.2011, 13:24

ja, CSS ist 'ne feine Sache, muss ich mir unbedingt mal genauer anschauen. Vom slicen bin ich auch nicht begeisert, Der Zweck rechtfertigt nicht die Mittel

Zum Seitenanfang

Masaku

Meister

Beiträge: 2 514

10

14.01.2011, 15:46

Die Farben find ich i.O. Auch die Aufteilung vom Platz.
Was mir nicht so gefällt, sind die Abstände der "Blöcke" zu den Navipunkten (zu eng) und die Schrift der Navi, wobei ich nicht weiß, was du da typografisch noch vor hast. Jedenfalls fügen die sich ganz schlecht ins Gesamtbild ein, da du im Titel eine Serifenschrift (was völlig ok ist), im Contentbereich eine serifenlose (ebenfalls völlig ok) aber in der Navi eine Monospace hast. Und das will so gar nicht zusammenpassen. Ich schätze, es würde besser aussehen, einen anderen Stil zu nehmen und die Laufweite zu erhöhen. Damit hast du einen ähnlichen Effekt und die Schrift fügt sich besser ins Gesamtbild ein.

Zitat von »Tim0«

Habe mir mal die Mühe gemacht und das ganze für dich kurz in 4 Schritten beschrieben:

Spoiler

Schritt 1:
index.php?page=Attachment&attachmentID=21144

Schritt 2:
index.php?page=Attachment&attachmentID=21145

Schritt 3:
index.php?page=Attachment&attachmentID=21146

Schritt 4:
index.php?page=Attachment&attachmentID=21148

Deine Mühe in allen Ehren, aber wenn du Grafiken so extrahierst, steigt dir jeder Webdesigner aufs Dach.

Wir müssen [...] der Versuchung widerstehen, ein Geflecht von Gesetzen herzustellen, hinter dem eines Tages die Freiheit unsichtbar wird. - Helmut Schmidt[/size]

Zum Seitenanfang

Opodeldox

Blues Man

Beiträge: 4 006

11

14.01.2011, 17:12

Danke!

Also die Blöcke habe ich gestern schon reguliert, das habe ich nämlich genauso gesehen. Was die Fontsangeht bin ich noch nicht am Ende angelangt, das is ja leider immer die schwierigste Entscheidung. Für den Text habe ich ja nur die Auswahl zwischen den paar Fonts die ich überall antreffen kann. Für den Kopf will ich auf jeden Fall keine Grotestkschrift verwenden und für die Navigation irgendetwas das heraussticht. Mal sehen wie ich den Schriftcocktail mische. Vermutlich werde ich die gleiche für den Kopf und für den Text verwenden und eine zweite für die Navis.

Zum Seitenanfang

Daddi

Administrator

Beiträge: 8 172

Wohnort: Berlin

12

15.01.2011, 00:35

Wenn du keine spezielle Zielgruppe hast, kannst du auch abgerundete Ecken und Schatten komplett in CSS machen, auch da braucht man keine Rasterbilder mehr

Auch Farbverläufe lassen sich mit CSS umsetzen, wirklich Grafiken braucht man nur für alte Browser oder wenn es halt wirklich ein Bild / Logo sein soll

Wenn du etwas Arbeit sparen willst, schau dir mal folgende Seite an:
http://www.blueprintcss.org/

Damit kannst du sehr einfach ein Design im Gridformat umsetzen und bist damit Cross-Browser mässig immer gut mit dabei ^^

Zum Seitenanfang

Masaku

Meister

Beiträge: 2 514

13

15.01.2011, 00:50

Ist zwar noch etwas "fortschrittlich" für heutige Browserverhältnisse, aber wenn du Lust hast, kannste dich ja mit dem Einbetten von Fonts in Webseiten beschäftigen. Legst die Schriftart also als Grafik auf dem Server ab und lässt diese statt die Standardclientfonts (Verdana, Arial, Times, etc) laden. Nachteil ist, dass momentan nicht alle Browser das einwandfrei unterstützen.
Ansonsten halt Bildchen.

Wir müssen [...] der Versuchung widerstehen, ein Geflecht von Gesetzen herzustellen, hinter dem eines Tages die Freiheit unsichtbar wird. - Helmut Schmidt[/size]

Zum Seitenanfang

Daddi

Administrator

Beiträge: 8 172

Wohnort: Berlin

14

15.01.2011, 01:03

Das geht auch relativ einfach, ohne sich wirklich gross damit beschäftigen zu müssen

http://code.google.com/intl/de-DE/apis/webfonts/ ist die Lösung die Google bietet, was vor allem schnell, einfach und komplett frei ist (nur freie Schriften zur Auswahl)

Zum Seitenanfang

Opodeldox

Blues Man

Beiträge: 4 006

15

17.01.2011, 23:05

Danke für die Tipps, der google Dienst sieht wirklich gut aus und besonders Blueprint werde ich mir ansehen.

Ich habe im Moment folgendes Ergebnis erzielt:

http://www.jagodesign.de/jagodesign/

Zum Seitenanfang