PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Brauche Hilfe/Inspiration bei Design


Mark
2008-07-01, 13:08:47
Ich versuche seit 3 Tagen ein neues Design für meine Website zu erstellen, nach 10 erfolglosen Versuchen habe ich halbwegs was hinbekommen:

http://666kb.com/i/azzps07u586s4grlz.jpg

Doch finde ich es selbst fade und langweilig, einfallslos und unkreativ. Habt ihr vielleicht eine Idee um das Ganze irgendwie aufzupeppen?

kasir
2008-07-01, 13:12:08
Auf den 1. Blick würde ich eine feinere, nicht weichgespülte Schrift wählen und die die Contentbreite verkleinern.

Flipper
2008-07-01, 17:33:55
Das rot da unten fühlt sich etwas einsam. Nirgends sonst taucht es auf, wirkt wie "dazugepappt".
Die Wolken gefallen mir ganz gut, aber eine Verbindung zum Parkettboden seh ich auch nicht wirklich - das stört aber auch nicht.

Bei der Schrift rechts oben würd ich statt Schatten andere Effekte probieren. Die passt auch nicht wirklich ins Gesamtbild. Die Links (Start, Portfolio, ...) sollten allerdings eine normale Schrift bleiben)

DanMan
2008-07-01, 17:46:32
Andere Schrift im Kopf (serifenlos), das rot überall im Hintergrund, und nur die eigentliche Seite auf dem Parkett. Außerdem nicht so viele graue Schatten, sondern lieber weiße oder so - macht die Seite freundlicher.

frix
2008-07-01, 18:10:58
Die keyword methode find ich immer ganz gut.
Überleg dir drei adjektive die das audrücken, was du mit deiner homepage
darstellen willst. Anhand von denen kannst du dann das Design aufbauen.
z.B.:
- elegant
- technisch
- futuristisch

Was ich gar nicht beim screendesign mag sind serifen schriften.
Das wirkt finde ich irgendwie altbacken. Die bessere Lesbarkeit bei
Serifenschriften ist nur im print bereich vorhanden.

Deine Thumbnail Pics die dich zu den verschiedenen Kategorien führen finde ich
nur sehr schwer lesbar. Vor allem die ersten 3 mit ihrem unruhigen Hintergrund wirken überladen.

Zum generellen Vorgehen, wenn du deine keywords hast
Überleg dir wo und wie du deine schlüsselelemente platzieren willst.
-Hauptnavigation
-Nebennavigation
-Banner (key-visual)
-Content
-Wichtig ist auch sich zu überlegen, was und wie der Content bereich alles darstellen soll: Bilder? Texte?
Bilder und Texte in kombination? Darstellung in Spalten?
Nachdem du dir dann so eine grobe struktur blockartig angelegt hast. Kannst du loslegen und design details hinzufügen.

rotalever
2008-07-02, 10:57:21
Also ich würde dieses Parkett und Wolken Zeug wegmachen. Lieber klare Linien, abstrakte Formen, ein paar Buzz-Words reinpacken, Serifenlose Schriften und die Startseite nicht "Start" oder "Home" nennen...

Mark
2008-07-02, 11:02:20
danke für die anregungen :)

die website soll übrigens diese hier ersetzen:
www.skyworxx.de
(ja, tabellen sind böse, ich weiß)

die website ist mir irgendwie zu "web2.0"

rotalever
2008-07-02, 12:06:58
Mal ne andere Frage: Wozu soll diese Seite dienen?

RattuS
2008-07-02, 13:43:39
Sieht nach einer typischen Personal Homepage aus. Referenzen zu eigenen Projekten, Unterstützungen, Teilnahmen, Arbeiten etc.

Um ehrlich zu sein gefällt mir die Idee mit dem Parkett irgendwie so gar nicht. Der Inhalt wirkt viel lebendiger als dein Design.

Mark
2008-08-11, 05:20:04
So, ein zweiter Versuch :)


http://666kb.com/i/b14y8ic5ocwet0rca.jpg

http://666kb.com/i/b14ya9qwu9zugl3ze.jpg

Hab versucht bei diesem Holz-Thema zu bleiben und das Ganze schlicht aussehn zu lassen ohne dabei zu sehr nach web2.0 auszusehn

cbs_66
2008-08-11, 12:00:29
gefällt mir sehr gut. ich würde aber das was in der rechten Spalte steht (description, image information) weiter nach links in Richtung vom Bild rücken. Sonst sieht das da rechts irgendwo so "abgeschlagen" aus.

Mark
2008-08-11, 12:37:35
Danke für den Vorschlag. Ich wollte die rechte Spalte eigentlich bündig mit dem oberen Kasten abschließen. Vorher war die Spalte größer und es sah seltsam aus.

Ich hab hier noch was ausprobiert, ich weiß aber noch net wozu ich des gebrauchen könnte, sieht aber schick aus:

http://666kb.com/i/b159cm04j5192zyo5.jpg

Genial wäre es, wenn man eine Art Coverflow daraus machen könnte. Man blättert quasi rechts die kleinen Seiten durch und beim Anklicken einer, fährt diese nach links und wird groß angezeigt. Aber sowas steht weit außerhalb meiner Fähigkeiten.

rotalever
2008-08-11, 14:46:58
Genial wäre es, wenn man eine Art Coverflow daraus machen könnte. Man blättert quasi rechts die kleinen Seiten durch und beim Anklicken einer, fährt diese nach links und wird groß angezeigt. Aber sowas steht weit außerhalb meiner Fähigkeiten.
Ich finde sowas überhaupt nicht genial. Es hat 1. keinen Mehrwert und 2. ruckelt es bei meinem PC die ganze Zeit rum. Solche Seiten schließe ich meist sofort wieder.

Mark
2008-08-11, 21:09:15
So, ich habe jetzt einen Teil davon in html umgesetzt (diesmal kein pöses tabellenlayout):

http://mark-schramm.de

Gibt es eigentlich ein elegantere Lösung ein Bild zu hovern damit das ganze im ie6 auch funktioniert? Hab bisher nur die Möglichkeit mit einem Platzhalterbild gefunden. Zwar würde auch Javascript gehn, aber solangs mit CSS hinhaut wär mir das lieber

RealHotzenplotZ
2008-08-12, 10:31:29
So, ich habe jetzt einen Teil davon in html umgesetzt (diesmal kein pöses tabellenlayout):

http://mark-schramm.de

Gibt es eigentlich ein elegantere Lösung ein Bild zu hovern damit das ganze im ie6 auch funktioniert? Hab bisher nur die Möglichkeit mit einem Platzhalterbild gefunden. Zwar würde auch Javascript gehn, aber solangs mit CSS hinhaut wär mir das lieber

gefällt! =)

Mark
2008-08-12, 11:17:06
Danke :)

Ich habe aber noch ein Problem bei Browsern mit geringer Auflösung. z.b. 1280*800. Da ich nach unten hin einen Mindestabstand von 75px habe, sieht man als User mit dieser Auflösung den oberen Bereich der Seite garnicht mehr. lasse ich den Abstand nach unten weg, sehen zwar alle auch den oberen Bereich, aber bei größeren Auflösungen sieht die Website mies aus, weil sich eben alles am unteren Rand befindet.

Gerne würde ich es dynamisch machen, aber das geht nicht, weil der Transparenzeffekt dann fehlen würde, da der IE6 die pngs nicht korrekt anzeigen kann. Den Hack kenne ich bereis, aber dann funktionieren keine anderen Attribute bei Hintergrundbildern.


Eine sehr unsaubere Möglichkeit, wäre es mittels Javascript die Auflösung abzufragen und bei einer vertikalen Auflösung von unter 1024 einfach ein anderes Stylesheet zu laden, aber wie gesagt, sehr unsauber

Mark
2008-08-12, 14:35:48
Der IE7 ist schon lustig...

Das Javascript, welches ich jetzt einsetze um eine andere CSS zu laden, funktioniert nur wenn ich ganz am Anfang der Datei ein "-" schreibe

DanMan
2008-08-12, 19:30:03
Gefällt. Nur der Schatten, den die Seite wirft sieht unecht aus, weil das Licht zwar von hinten kommt, aber auch hinter der Seite Schatten zu sehen ist. Mach ihn so, dass er nur nach vorne hin fällt.

Ansonsten schick. Auch wenn ich kein Freund von solchen großen Hintergrundbildern bin.
Eine sehr unsaubere Möglichkeit, wäre es mittels Javascript die Auflösung abzufragen und bei einer vertikalen Auflösung von unter 1024 einfach ein anderes Stylesheet zu laden, aber wie gesagt, sehr unsauber
Warum ist das unsauber? Da finde ich dein blank.gif schlimmer.

Was die Hover angeht:
Sliding Doors of CSS (http://www.alistapart.com/articles/slidingdoors/)
CSS Sprites: Image Slicing’s Kiss of Death (http://www.alistapart.com/articles/sprites/)

Man beachte das jeweilige Artikeldatum. ;)

Mark
2008-08-12, 19:34:48
Viele haben Javascript ausgeschaltet, deswegen find eich die Lösung unsauber. Aber naja, abstriche gibts immer irgendwo...

DanMan
2008-08-12, 19:40:59
Viele haben Javascript ausgeschaltet, deswegen find eich die Lösung unsauber. Aber naja, abstriche gibts immer irgendwo...
Vor allem beim Frauenarzt.

Im ernst, das ist so ein Gerücht was sich gut hält. Die Mehrzahl der Leute hat JS aktiviert. Warum auch nicht.

rotalever
2008-08-12, 19:50:32
So 90-95% haben aktiviert, je nachdem welcher Statistik man glaubt. Die die das dann nicht haben sehen dann halt einfach eine schlechtere Version der Seite..

Mark
2008-08-12, 21:36:11
Ich verstehe immernoch nicht warum das Script im IE nur funktioniert wenn man "-" also irgendeinen Mist in die erste Zeile schreibt. Aber dadurch besteht die Seite nicht den W3C Validator. Es hat nichts mit dem Quirks-Mode zu tun, denn egal ob Quirks oder normal, es geht im IE nur wenn Mist in der ersten Zeile steht

DanMan
2008-08-12, 22:40:15
Ich verstehe immernoch nicht warum das Script im IE nur funktioniert wenn man "-" also irgendeinen Mist in die erste Zeile schreibt. Aber dadurch besteht die Seite nicht den W3C Validator. Es hat nichts mit dem Quirks-Mode zu tun, denn egal ob Quirks oder normal, es geht im IE nur wenn Mist in der ersten Zeile steht
Damit ist er zumindest schon mal garantiert im Quirks.

Aber was soll das Script denn bewirken? Sieht zumindest sehr... komisch aus. Selbst geschrieben? Ich würde da keine verschiedenen .css Dateien ins Dokument schreiben, sondern direkt auf das betroffene Element zugreifen und dementsprechend ändern.

Mark
2008-08-12, 23:00:35
das script ermittelt die bildschirmhöhe, bei einer höhe unter 700 wird eben das stylesheet reingeschrieben.

aber wenn ich das "-" weglasse, dann passiert rein garnichts.

Hier:
http://mark-schramm.de/index-ie.php

Dies scheint einfach nicht zu klappen:
if (hoehe > 700) {
document.write('<link rel="stylesheet" href="css/normal.css" type="text/css">');
}
else {

document.write('<link rel="stylesheet" href="css/klein.css" type="text/css">');
}


//edit
es klappt nichtmal wenn ich
hoehe = 701
direkt davor schreibe :confused:

RattuS
2008-08-12, 23:41:02
Mir gefällt das Design nicht so sonderbar. Es ist trocken und langweilig.

Zu JS: Meine Statistiken nach 2 Monaten sagen 98 % der Besucher haben JS aktiviert.

DanMan
2008-08-13, 08:25:05
Hab gerade nicht viel Zeit. Wie wärs denn damit:
if (hoehe > 700) {
document.open();
document.write('<link rel="stylesheet" href="css/normal.css" type="text/css">');
document.close();
} else {
document.open();
document.write('<link rel="stylesheet" href="css/klein.css" type="text/css">');
document.close();
}

Aber wie gesagt, ich würde z.B. direkt dem zu ändernden Element die Klasse anhängen, oder ist wirklich alles komplett anders?

edit: Habs noch schnell verglichen. Wegen 2 Änderungen ein komplettes Stylesheet? :|

Mark
2008-08-13, 11:26:47
Funktioniert leider immernoch nicht, trotzdem danke für den Versuch.

Wie ändere ich denn direkt die 2 Elemente?

Dan@work
2008-08-13, 12:49:34
Funktioniert leider immernoch nicht, trotzdem danke für den Versuch.
Wie ändere ich denn direkt die 2 Elemente?
Nun in etwa so:

if (document.all) { // kennt nur IE
var cdiv = document.getElementById('content');
cdiv.style.bottom = 70 + 'px';
document.body.style.backgroundImage = 'Bilder/bg-klein.jpg';
}

Ist auswendig geschrieben - Fehler vorbehalten.

Mark
2008-08-15, 15:11:04
Danke, ich habs jetzt mit folgendem gelöst:

<script type="text/javascript" >

var diemnsionArray = windimension();
var cdiv = document.getElementById('content');

hoehe = diemnsionArray[1];

if (hoehe > 700) {
document.open();
cdiv.style.bottom = 70 + 'px';
document.getElementsByTagName("body")[0].style.backgroundImage = "url(Bilder/bg.jpg)";
document.close();
}

</script>


funktioniert im Firefox und IE, jeweils auch ohne "-" am Anfang des Dokuments

DanMan
2008-08-15, 17:23:01
Danke, ich habs jetzt mit folgendem gelöst:[/code]
funktioniert im Firefox und IE, jeweils auch ohne "-" am Anfang des Dokuments
Na ist doch dufte. Könnte man noch optimieren, aber wenns läuft, dann läufts, gell?

Die <font> Tags sind wohl temporär, hoffe ich.
Außerdem würde ich die ganzen nutzlosen <div>s mit den Bildern rausschmeißen. Gib den Bildern doch direkt die ID - oder noch besser - eine Klasse (IDs sind eher für Skripts, und man sollte immer Klassen benutzen, bis es nicht mehr anders geht).

Allerdings verstehe ich auch nicht, warum du die überhaupt gesliced hast. Du hättest das komplette Hintergrundbild als ein einziges JPG abspeichern können. Das wären mit Sicherheit auch nicht mehr KB geworden, hätte dir aber eine Menge Arbeit erspart, und den HTML Code entschlackt.

Mark
2008-08-16, 12:32:44
Ja, die <gont>-Tags wandern später noch ins stylesheet.

Ich habe das Design gescliced weil ich es garnicht anders gewohnt war. ich habe früher immer nur mit Tabellen gearbeitet und da ging es nicht anders. Das das mit divs ja garnicht nötig ist, ist mir erst hinterher aufgefallen.

DanMan
2008-08-16, 17:21:09
Ja, die <font>-Tags wandern später noch ins stylesheet.

Ich habe das Design gescliced weil ich es garnicht anders gewohnt war. ich habe früher immer nur mit Tabellen gearbeitet und da ging es nicht anders. Das das mit divs ja garnicht nötig ist, ist mir erst hinterher aufgefallen.
Ja, hinterher ist man immer schlauer. Den Fehler hab ich am Anfang aber auch noch gemacht, falls dir das ein Trost ist. Dauert eben ein bisschen, bis man 'outside-the-box' denkt. :)

Mark
2008-09-04, 13:54:03
Ich habe jetz nochmal das Design etwas geändert, vorallem weil mir der Hintergrund dann nicht mehr so gefallen hat. War irgendwie zu dunkel und langweilig.

www.mark-schramm.de

Im Moment gibt es 4 verschiedene Hintergründe. Der Internet Explorer 6 wird im Moment nicht wirklich unterstützt, da ich alphatransparente PNGs verwende. Entweder ich versuch das ganze mit diesem pngbehavior-trick zu umgehen oder lass die Transparenz für den IE6 komplett weg.

Mark
2008-10-17, 12:44:35
//hier stand müll

Tommes
2008-10-17, 14:01:28
http://www.twinhelix.com/css/iepngfix/