Neue Homepagedesign [Kritik]
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
anschauen
beispiel
blatt
code
dank
design
grafikprogramm
http
inhalt
machen
paar
richten
sache
sagen
setzen
teil
text
umsetzung
verwenden
webseite
-
Hallo
Habe mich mal an meine private Homepage gewagt.
Hier die erste Entwurf:
http://otto2.lima-city.de/new-ws/index.html
(Arts und Photos funktionieren schon)
Würde mal gerne wissen, was ihr dazu sagt.
MfG
otto2 -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Erst einmal: Sehr schön designed und umgesetzt. Jedoch finde ich den Grauwert etwas zu hoch, zum Beispiel ist oben (rechts neben dem Logo) sehr viel ungenutzter Freiraum und der Content fängt erst weit unten an. Je nach Auflößung ist das etwas störend. Bei dem Submenu (\"Seite 1 - Seite 2 - ...\") hast du Abstände zwischen den einzelnen Punkten, jedoch nicht links beim ersten. Im Footer hast du \"Links\" aufgelistet, es wäre evtl. eine Überlegung, dies auch im Mainmenu aufzunehmen, da man dies nicht im Footer erwartet. Zudem brauchst du in Deutschland keinen Copyright-Hinweis setzen, da hier automatisch das Urheberrecht gilt. Außerdem passt die Schriftgröße im Footer nicht ganz zum Rest, ich würde diese kleiner machen (ca. 80-90%). Deine Seite verfolgt einen einheitlichen Aufbau. Dies ist zwar Benutzerfreundlich, auf der anderen Seite wirkt es aber sehr schnell langweilig, da jede Seite zu sehr der anderen gleicht und dem (fortgeschrittenen) Besucher somit keine Möglichkeit gegeben ist, sich mit der Seite auseinander zu setzen. Als Tipp kann ich dir noch mitgeben, den Doctype in die allererste Zeile zu schreiben (dort befindet sich momentan ein leeres Kommentar <!-- -->), da sonst der IE in den Quarks-Modus schaltet, falls der Doctype nicht in der ersten Zeile steht. Außerdem solltest du noch Alt-Atribute für die Image-Tags setzen, damit es XHTML-Valide ist. Zudem könntest du Strict statt transitional verwenden, macht mehr Sinn, da du dich streng danach richten willst und transitional für den Übergang zwischen HTML 4.1 und XHTML 1.0 steht und für die Leute gedacht ist, die sich zwar dannach richten wollen aber aus irgendwelchen Gründen es noch nicht nach strict hinbekommen.
Ansonsten: Sehr gut gelungen, Kontraste sind vorhanden, die Farbumgebung ist auch gut überlegt und man sieht, dass du dir Mühe gegeben hast, weiter so! -
wenn sich jeder so viel mühe geben würde, hätten meine augen mehr worüber sie sich freuen können.
ich finde das ganze ist durchweg gelungen. -
erstmal Danke an trueweb für solch ein ausführliche Kritik. Sowas bringt einen wirklich weiter; dann gehe ich mal eins nach dem andren durch:
Erst einmal: Sehr schön designed und umgesetzt. Jedoch finde ich den Grauwert etwas zu hoch, zum Beispiel ist oben (rechts neben dem Logo) sehr viel ungenutzter Freiraum und der Content fängt erst weit unten an. Je nach Auflößung ist das etwas störend.
Da könntest du recht haben. Ich hab mirs aber auch in 1024x768 angeschaut und da isses noch ok. Aber vll ändern ich da noch was.
Bei dem Submenu (\"Seite 1 - Seite 2 - ...\") hast du Abstände zwischen den einzelnen Punkten, jedoch nicht links beim ersten.
Das habe ich gestern Abend erst eingebaut und ist deshalb noch nicht ganz ausgereift.
Im Footer hast du \"Links\" aufgelistet, es wäre evtl. eine Überlegung, dies auch im Mainmenu aufzunehmen, da man dies nicht im Footer erwartet.
Gebe ich dir völlig Recht. Mein Navi war zeitweise noch größer und da hatte es dann nicht mehr reingepasst
Zudem brauchst du in Deutschland keinen Copyright-Hinweis setzen, da hier automatisch das Urheberrecht gilt.
Ich weiß
Ich wollte aber da unten noch irgendwas stehen haben... (Eventuell lasse ich mir da auch noch was anderes einfallen
Jetzt wo dus sagst: hast Recht
Außerdem passt die Schriftgröße im Footer nicht ganz zum Rest, ich würde diese kleiner machen (ca. 80-90%).
Deine Seite verfolgt einen einheitlichen Aufbau. Dies ist zwar Benutzerfreundlich, auf der anderen Seite wirkt es aber sehr schnell langweilig, da jede Seite zu sehr der anderen gleicht und dem (fortgeschrittenen) Besucher somit keine Möglichkeit gegeben ist, sich mit der Seite auseinander zu setzen.
Interessant so hatte ich das noch nicht gesehen. Mal sehen ob ich da noch was machen kann
Als Tipp kann ich dir noch mitgeben, den Doctype in die allererste Zeile zu schreiben (dort befindet sich momentan ein leeres Kommentar <!-- -->), da sonst der IE in den Quarks-Modus schaltet, falls der Doctype nicht in der ersten Zeile steht.
Genau das war mein Ziel, weil ich gehofft hatte damit die Layoutfehler im IE zu beheben. Letztendlich bin ich dann aber nicht um ein weiteres Stylesheet drumherum gekommen.
Außerdem solltest du noch Alt-Atribute für die Image-Tags setzen, damit es XHTML-Valide ist. Zudem könntest du Strict statt transitional verwenden, macht mehr Sinn, da du dich streng danach richten willst und transitional für den Übergang zwischen HTML 4.1 und XHTML 1.0 steht und für die Leute gedacht ist, die sich zwar dannach richten wollen aber aus irgendwelchen Gründen es noch nicht nach strict hinbekommen.
Jo werd ich noch machen
Ansonsten: Sehr gut gelungen, Kontraste sind vorhanden, die Farbumgebung ist auch gut überlegt und man sieht, dass du dir Mühe gegeben hast, weiter so!
Danke soweit
Danke auch an Robin für die positive Kritik
-
Sehr guter erster Eindruck.
Mir ist allerdings die Navi fast schon zu mächtig/groß. Zudem verschwindet der linke Teil im Nichts, wenn ich die Auflösung herabsetze (800x600).
BTW: Sehr schöne Fotos
-
Also ich muss mal sagen: Respekt! Sehr geil designt und gut umgesetzt. Am Inhalt mangelt\'s noch ein bisl, außerdem funzen \"About\", \"Downloads\" und \"Contact\" net.
Wie schon gesagt wurde, ist die Schrift im Foot-Bereich etwas zu groß.
Oben links das Logo könntest Du noch als Link zur Startseite einrichten.
Die Buttons und der Hintergrund sind super.
Fehlt halt nur noch der Inhalt ;) -
Inhalt kommt erst dann rein, wenn Design und Html-Quelltext feststehen. Sonst muss ich ja doppelt und freifach die Sachen ändern.
in 800x600 verschindet tatsächlich ein Teil der Seite, aber bei einem Marktanteil von 2% ist das mMn zu vernachlässigen (Quelle: http://www.webmasterpro.de/portal/webanalyse-systeme.html)
Neustes Update:
->xhtml 1.0 strict eingefügt
->schrift im footer kleiner gemacht
->Links-Button eingefügt
->Header verlinkt
-
Erst mal Lob: Das Design sieht wirklich gut aus, vor allem den Hintergrund
Jetzt kommt die Kritik:
* zu eintönig
- vll keine schwarzweißen Icons in Navi, sondern farbige
* die Hintergrundfarbe des Footers passt nicht richtig
* in \"Arts\" überlappt sich das Hover Hintergrundbild der Subnavi über den Schatten des Headers
* Ich weiß, das klingt jetzt vll ein bisschen zu aufwendig, aber deine Seite ist
- Nicht valide (wurde ja schon erwähnt), obwohl du einen Doctype eingefügt hast
- Überhaupt nicht \"narrensicher\"
+ wenn der Text im #content höher als 410px ist, hast du Pech gehabt
+ wenn man den Text ein paar Stufen hochzoomt (Accessibility) können sich die Texte in Header, #content und #footer überlagern => Unlesbarkeit
# Wie man das macht, wird in dem Buch Bulletproof Web Design (http://www.amazon.de/Bulletproof-Webdesign-Ausgabe-publishing-imaging/dp/382732629X/ref=sr_1_1/028-2434408-1105366?ie=UTF8&s=books&qid=1211192521&sr=8-1) von Dan Cederholm ganz gut erklärt. Kann ich nur empfehlen ;)
Ryan
Beitrag geändert: 19.5.2008 12:25:00 von ryanblack -
Dafür das es eine private homepage ist fehlt da so bisschen der Pepp in der Sache.. aber sehr übersichtlich und schick gehalten.. dezent halt.. ich find sie toll .. :D
-
Danke für die Antworten ich pick mir mal ein paar Sachen raus:
* in \"Arts\" überlappt sich das Hover Hintergrundbild der Subnavi über den Schatten des Headers
Kannst du mir sagen, welchen Browser du verwendest? Habe die Unter-navi jetzt erst in FF 2.0.0.14, Opera 9.27 und Safari 3.1.1 getestet und da ist alles in Ordnung
- Nicht valide (wurde ja schon erwähnt), obwohl du einen Doctype eingefügt hast
Doch jetzt schon, hatte nur vergessen die veränderte Datei hochzuladen. (Also zumindest index.html nach w3c.org)
- Überhaupt nicht \"narrensicher\"
soll heißen?
+ wenn der Text im #content höher als 410px ist, hast du Pech gehabt
Hab ich jetzt geändert. Jetzt muss ich zwar nen Content-Teil mit <br /> künstlich groß halten. Aber so ist vll doch besser. Oder gibts in CSS ne Mäglichlkeit eine minimale Größe anzugeben?
Beitrag geändert: 19.5.2008 14:33:04 von otto2 -
Kannst du mir sagen, welchen Browser du verwendest? Habe die Unter-navi jetzt erst in FF 2.0.0.14, Opera 9.27 und Safari 3.1.1 getestet und da ist alles in Ordnung
Komisch... Ich benutz auch FF 2.0.0.14... Hier ein Screenshot, was ich damit meine: http://ryanblack.lima-city.de/yaiu/p/1512066352-285417719.png
\" - Überhaupt nicht \'narrensicher\'\"
soll heißen?
Steht alles drunter (die + und # punkte sollen Unterpunkte darstellen *gg)
\" + wenn der Text im #content höher als 410px ist, hast du Pech gehabt\"
Hab ich jetzt geändert. Jetzt muss ich zwar nen Content-Teil mit <br /> künstlich groß halten. Aber so ist vll doch besser. Oder gibts in CSS ne Mäglichlkeit eine minimale Größe anzugeben?
Es gibt aber auch einen einfacheren Weg als min-height: Einfach #footer clearen:
#footer { [...] clear: both; }
Dann platziert sich #footer automatisch unter der #nav und #content ;) . Außerdem: <br />s als Platzhalter gilt als schlechter Stil.
Ryan
Beitrag geändert: 19.5.2008 15:24:12 von ryanblack -
ich finde die seite total gut.wie hast du das gemacht.hab keine ahnung wie das geht.is auch egal...sieht total cool aus
gruß
kanuflo -
Die Seite sieht wirklich Spitze aus. Hast du die Bilder und den Hintergrund selbst gemacht? Und wenn ja, mit welchem Programm?
-
#footer { [...] clear: both; }
Ah danke. Manchmal kanns so einfach sein.
Das mit dem Navilight habe ich mir nochmal angeschaut. Ich muss dir recht recht geben, eigtl es gehört untendrunter. Ich hätte mir meine PSD-Datei mal näher anschauen sollen. Habe jetzt nochmal ein verändertesbackground-image hochgeladen. So siehts mMn besser aus.
Zur Entstehung dieser Seite:
1. Überlegung was will ich machen.
2. Inspiration holen
[Bei mir: 500 Webseiten angeschaut. (Nicht nur ein paar wenige anschauen, sonst kupfert man unbewusst ab)]
3. Ideensammlung auf einem Blatt
4. Sribble der späteren Seite auf einem Blatt.
5. Erst jetzt das ganze ein Grafikprogramm umsetzen (a la Photoshop, Gimp, etc)
4. Grundgerüst der Html-seite
5. CSS-Umsetzung
6. Benötigte Grafiken aus Photoshop heraus speichern und einbinden.
7. Das ganze hochladen und mit verschiedenen Browsern testen (Insbesondere IE 6 macht da in der Regel Probleme)
8. Feinschliff (da bin ich jetzt)
9. Website mit Inhalt füllen.
Und ja, ich habe alle meine Grafiken selbst erstellt. (Mit Photoshop. Geht aber auch mit jedem anderen Bildbearbeitungsprogramm)
Gruß
Beitrag geändert: 19.5.2008 21:48:02 von otto2 -
Zur Entstehung dieser Seite:
1. Überlegung was will ich machen.
2. Inspiration holen
[Bei mir: 500 Webseiten angeschaut. (Nicht nur ein paar wenige anschauen, sonst kupfert man unbewusst ab)]
3. Ideensammlung auf einem Blatt
4. Sribble der späteren Seite auf einem Blatt.
5. Erst jetzt das ganze ein Grafikprogramm umsetzen (a la Photoshop, Gimp, etc)
4. Grundgerüst der Html-seite
5. CSS-Umsetzung
6. Benötigte Grafiken aus Photoshop heraus speichern und einbinden.
7. Das ganze hochladen und mit verschiedenen Browsern testen (Insbesondere IE 6 macht da in der Regel Probleme)
8. Feinschliff (da bin ich jetzt)
9. Website mit Inhalt füllen.
In der Industrie arbeitet man in etwa so:
0. Auftrag erhalten oder Idee für ein Projekt
1. Mainidea -> Was will ich machen? Beispiel: Portofolio
2. Analyse -> Was will ich mit der Webseite erreichen? Beispiel: Kunden finden, Rückmeldung der User
3. Anforderungsanalyse -> Was braucht die Webseite? ZB Kommentarfunktion, Bewertungsfunktion, Gästebuch, Kontaktformular, Bestellmöglichkeiten
4. Zielgruppenanalyse -> Was sind das für Menschen, die auf die Webseite kommen sollen? Soziales Umfeld? Alter? Geschlecht? Userstatus (Anfänger, fortgeschrittener, professioneller Surfer; mit was kann man den User konfrontieren?), wie viel Zeit ist die Zielgruppe im Internet? Wieviel Gehalt bekommt sie ungefähr? Welche Religion? usw
5. Skizzen (Skizzenblock) -> Dabei die vorstehenden Punkte beachten, zB kann man einer männlichen Zielgruppe kein Pinkes Design vorlegen, evtl. Inspiration ähnlicher Seiten
6. Userinterface gestalten -> Wie setze ich Buttons, Menüs, Formulare, Eyecatcher, Interaktionselemente, ... ein?
5. Umsetzung der Skizzen im Grafikprogramm (Quasi-Industrie-Standard: Photoshop) unter der Beachtung der bevorstehenden Punkte. Jede Seite(!) wird im Grafikprogramm layoutet (evtl. auch ein Layoutprogramm verwenden), jeder Hovereffekt, einfach alles
6. Umsetzung des Layouts in (X)HTMl+CSS (würde ich nicht unbedingt trennen, ich mache beides parallel aber ist Geschmakssache)
7. Evtl. Integration in serverseitige Scriptsprache (am besten mit Templatesystem)
8. Inhalte einfügen
Das Wesentliche ist, dass Punkt 8. von Otto2 heraus fällt, da man sich vor der Umsetzung des Design Gedanken macht und nicht hinterher. Darum ist es von Vorteil, vor der Umsetzung des Layouts in HTML nachfragt. -
@Mod
Ich sehe grade, dass ich (aus irgendeinem mir nicht ersichtlichen Grund) das selbe 3mal gepostet habe. Könnte ja einer löschen wenn er Lust hat.
Edit: Danke
_____________
Zum Post oben:
Ja stimmt Html und CSS Umsetzung habe ich relativ gemacht. Keine Ahnung warum ich das in der Aufzählung getrennt aufgeführt habe.
Bezüglich punkt 8:
Es kommt doch immer wieder vor, dass auch zu einem relativ späten zeitpunkt der Umsetzung der Auftraggeber noch etwas ändern will. Kommerzielle Azfträge haben idR den Vorteil, dass schon Farben, Inhalte etc feststehen, aber leider ist man auch viel stärker an den Willen des Auftraggebers gebunden. Also sowas wie Feinschliff bleibt mMn immer
Beitrag geändert: 19.5.2008 22:07:50 von otto2 -
also 1.
:D
ich finde die page sowohl vom design als auch vom inhalt super,
leider hab ich nich so ein geübtes auge wie trueweb, aber ich glaube selbst dann würde ich nichts finden was mich stört
das einzige was fehlt ist das \"about\" und \"download\" noch nicht funktioniert (was du warscheinlich noch machen wirst ^^), und ich würde noch einbauen das man komentare schreiben und die bilder bewerten kann. -
Hallo
Nochmal ein Update von mir:
Ich habe mir jetzt ein anderes Logo überlegt. http://blue-frog.de.vu Was sagt ihr dazu?
Ansonsten habe ich noch bei \'Contact\' eine Farbänderung eingebaut. Ich wollte mal fragen, welchen Eindruck das auf euch macht. (Abgesehen davon, dass es sich mit dem Blau ziemlich beißt)
-
Hi,
als ersters muss ich sagen das die Homepage wirklich gut gelungen ist, jedoch gefällt mir der Orange Hintergrund wenn man auf Kontakt klickt eindeutig besser weil das Logo besser zu erkennen ist.
mfg
hansi -
Ich finde das Homepage Designe echt gelungen.
Das war sicher viel Arbeit.
Wäre toll, wenn es mehr so gut gemachte Websiten gebe.
Mach weiter so.
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
