Neues Website Design(mal wieder)

Übersicht Ressourcen Grafik & Design

Gehe zu Seite 1, 2  Weiter

Neue Antwort erstellen

Xaymar

ehemals "Cgamer"

Betreff: Neues Website Design(mal wieder)

BeitragDo, Nov 12, 2009 18:20
Antworten mit Zitat
Benutzer-Profile anzeigen
Ich entwickle derzeit für mich eine Seite auf der ich die Projekte vorstelle.
Die Kategorien Downloads, Projekte und Links sind noch nicht fertig und beanspruchen noch etwas zeit.

Das Design hab ich mir in etwa abgeguckt von Windows Aero(Transparenz, kurvige Ränder).
Das ganze wird auf php basis betrieben, mit einem selbsterstellten Template System, das ungefähr so abläuft:
Zitat:
PHP Parser
Arrow Hauptdatei
Arrow Arrow MySQL Daten holen
Arrow Hauptdatei
Arrow Arrow Template


Website

Kritik und Vorschläge sind erwünscht.
Warbseite
  • Zuletzt bearbeitet von Xaymar am Mo, Nov 16, 2009 1:02, insgesamt einmal bearbeitet

Xeres

Moderator

BeitragDo, Nov 12, 2009 18:32
Antworten mit Zitat
Benutzer-Profile anzeigen
Ich finde, das Logo passt da nicht wirklich rein. Da solltest du konsequent die unverschnörkelte Schrift wie auf dem Rest der Seite verwenden - oder wenn schon was anderes, dann klare Linien verwenden.

Achtung: Beinhaltet kein Kunstverständnis
Win10 Prof.(x64)/Ubuntu 16.04|CPU 4x3Ghz (Intel i5-4590S)|RAM 8 GB|GeForce GTX 960
Wie man Fragen richtig stellt || "Es geht nicht" || Video-Tutorial: Sinus & Cosinus
T
HERE IS NO FAIR. THERE IS NO JUSTICE. THERE IS JUST ME. (Death, Discworld)

Eingeproggt

BeitragDo, Nov 12, 2009 19:03
Antworten mit Zitat
Benutzer-Profile anzeigen
In Opera sieht die Menüleiste oben so aus:

http://www.speedyshare.com/684945509.html

Sie überlappt an den äußeren Positionen.

mfG, Christoph.
Gewinner des BCC 18, 33 und 65 sowie MiniBCC 9

DaysShadow

BeitragDo, Nov 12, 2009 19:52
Antworten mit Zitat
Benutzer-Profile anzeigen
Eingeproggt, das stimmt nur bedingt, wenn ich mich recht entsinne nutzt du eine 9.x oder 9.2x Version von Opera, da mag es vielleicht stimmen, in Opera 10 wird alles korrekt angezeigt.

MfG DaysShadow
Blessed is the mind too small for doubt

Xaymar

ehemals "Cgamer"

BeitragDo, Nov 12, 2009 20:04
Antworten mit Zitat
Benutzer-Profile anzeigen
Oh der Bug ist mir komplett neu. Den erhalte ich nicht mal im IE. und da die dinger eine table sind kann ich nur von einem ausgehen: Browser outdated.

Mozilla Firefox 3.5: Alles korrekt
Opera 10: Alles korrekt
Internet Explorer 8: Alles korrekt

Übrigends ist die Website fast komplett nach W3C standard aufgebaut. Ein paar fehler gibt es noch, aber bald nicht mehr.

Validate index.php
Validate anews.php
Validate about.php
Warbseite

Eingeproggt

BeitragDo, Nov 12, 2009 20:15
Antworten mit Zitat
Benutzer-Profile anzeigen
Gut aufgepasst DaysShadow Smile

Jap, ich nutze 9.27. Die ist doch aber noch gar nicht sooo alt, stoße aber leider immer wieder auf Seiten die nicht richtig geladen / angezeigt werden bzw. Plugins die nicht so tun wie sie zB unter Firefox tun.

Wird langsam Zeit dass ich umsteige... Auf FF, weil die neuen Opera Versionen haben mir nicht wirklich zugesagt, aber diese Diskussion brauchen wir gar nicht anfangen - ist rein subjektiv.
Gewinner des BCC 18, 33 und 65 sowie MiniBCC 9

Xaymar

ehemals "Cgamer"

BeitragMo, Nov 16, 2009 1:02
Antworten mit Zitat
Benutzer-Profile anzeigen
Habe nun meiner Website eigenen Webspace gegeben und die Kategorie Downloads fertiggestellt
http://xproductions.bplaced.net/

Bitte austesten und gegebenfalls Kritik ausüben Smile
Warbseite

Tobchen

BeitragMo, Nov 16, 2009 10:11
Antworten mit Zitat
Benutzer-Profile anzeigen
Die Serifen-Schriftart passt, wie ich finde, überhaupt nicht zum Schriftzug.
Und dann sind die Überschriften auch noch in anderer Schriftart als die Inhalte. Ist nicht schön so.
Ich empfehle dir durchgehend Verdana oder Arial. Auch im Menü.
Tobchen - die Welt von Tobi!

Arrangemonk

BeitragMo, Nov 16, 2009 14:10
Antworten mit Zitat
Benutzer-Profile anzeigen
Helvetica!(Arial, wenns nicht anders geht)

+ man sollte maximal 3 formatierungen pro schriftstück/seite machen um professionell zu wirken

sprich am besten alles selbe schrift art, überschrift bold/grösser und hervorgehobenes unterstichen/kursiv
und das wars

desweiteren solltest du dir eine art maskotchen oder ein logo basteln, das in der überschrift ist
[lol]z.b. ein akte x- X wegen deinem komischen c productions ding[/lol]

edit:
http://colorschemedesigner.com/ (um auch wirklich jeden post eines anderen zu verwerten)
ingeneur
  • Zuletzt bearbeitet von Arrangemonk am Mo, Nov 16, 2009 14:15, insgesamt 2-mal bearbeitet

orpheus_2003

BeitragMo, Nov 16, 2009 14:13
Antworten mit Zitat
Benutzer-Profile anzeigen
Die Fenster schieben links/rechts.
Wenn man von Home auf Projekte wechselt und zurück verschiebt sich der Schirm.

Außerdem, rein subjektiv, ist die Page zu dunkel. Und die Schriftarten passen mir irgendwie auch nicht.
Alles in allem finde ich das Design nicht berauschend.

Aber ich bin halt ein Graphik Fetischist....

Gruß Orpheus

Firefox 3.5.4 verwendet......
GazerStar - the beginning
http://gazerstar.lexigame.de/
Wizard (Worktitel)
http://wizard.lexigame.de

Xaymar

ehemals "Cgamer"

BeitragMo, Nov 16, 2009 21:10
Antworten mit Zitat
Benutzer-Profile anzeigen
orpheus_2003 hat Folgendes geschrieben:
Die Fenster schieben links/rechts.
Wenn man von Home auf Projekte wechselt und zurück verschiebt sich der Schirm.

Huh? Das ist mir Komplett neu

orpheus_2003 hat Folgendes geschrieben:
Außerdem, rein subjektiv, ist die Page zu dunkel. Und die Schriftarten passen mir irgendwie auch nicht.
Alles in allem finde ich das Design nicht berauschend.

Die Page bei mir recht hell Confused

Arrangemonk hat Folgendes geschrieben:
[lol]z.b. ein akte x- X wegen deinem komischen c productions ding[/lol]

Anfangs ein X nu ein C ne?^^ aber mal gucken was ich da machen kann

Zitat:
Die Serifen-Schriftart passt, wie ich finde, überhaupt nicht zum Schriftzug.
Und dann sind die Überschriften auch noch in anderer Schriftart als die Inhalte. Ist nicht schön so.
Ich empfehle dir durchgehend Verdana oder Arial. Auch im Menü.

Die Schriftarten sehen nur halb so passend aus Sad Viel zu eckig auf der Größe
Warbseite

hectic

Sieger des IS Talentwettbewerb 2006

BeitragDi, Nov 17, 2009 0:11
Antworten mit Zitat
Benutzer-Profile anzeigen
Generell hab ich mal ein paar Vorschläge:

1) Das ewige Grau und dann etwas farbige Elemente drin, die dann auch wieder sehr schwach ausfallen, kommt nicht besonders gut. Versuche etwas mehr Kontrast da rein zu bringen. Also etwas auffälliges. Die Seite so ist eine der langweiligsten die ich in den letzten Jahren gesehen habe.

2) Die Schriftart ist wirklich unpassend. Nimm mal etwas moderneres und vor allem ohne Serifen.

3) Das ganze Design ist nicht aufeinander abgestimmt. Du hast einmal den diagonalen Hintergrund welcher sonst nirgens mehr auftritt. Das stört. Dann hast du noch im Content alles geradlinig (horizontal/vertikal) gemacht, aber nicht im Menüsystem, da ist es geschwungen. Dieser Mischmasch wirkt sich komplett störend auf den Betrachter aus.

4) Das Menüsystem mit den gleich breiten Buttons, dafür aber unregelmässigen Leerraum zwischen den Texten erscheint wie eine Webseite aus dem letzten Jahrzehnt. Mach da mal was anderes hin.

5) Unter Download (Mirror #1, Mirror #2) wird beim Hover der Text fett angezeigt, dadurch wird dieser breiter und der übrige Satz verschiebt sich dadurch. Das nervt.

6) Die Farben an sich sind alle sehr blass. Ich hab das Gefühl, als würde ich unter Farbschwäche leiden. Suche dir eine dominierende sätingende Farbe aus, und versuche diese dann mit einem bestimmten Design zu versehen und im übrigen weiter fortzusetzen.


Außerdem versuche nicht jeden Tipp mit Gegenargumenten zu kontern. Wir alle nehmen uns Zeit dir ein paar Tipps zu geben und haben sonst nichts davon. Bisher würde ich nahezu alle Tipps die gegeben wurden auch so unterschreiben.
Download der Draw3D2 V.1.1 für schnelle Echtzeiteffekte über Blitz3D

Xaymar

ehemals "Cgamer"

BeitragSo, Dez 20, 2009 15:46
Antworten mit Zitat
Benutzer-Profile anzeigen
So habe nun (endlich) mal ein neues template angefertigt. Komplett fertig ist es noch nicht(admin.php fehlt noch) aber es ist funktionsfähig Smile

Helleres Template
Warbseite

WüstLing

BeitragSo, Dez 20, 2009 16:21
Antworten mit Zitat
Benutzer-Profile anzeigen
Du solltest keine Tabellen für designtechnische Zwecke verwenden!
Schau dir mal <div> an!

hectic

Sieger des IS Talentwettbewerb 2006

BeitragSo, Dez 20, 2009 17:02
Antworten mit Zitat
Benutzer-Profile anzeigen
Beispiel Y-Menü:

Code: [AUSKLAPPEN]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
      <link rel="stylesheet" type="text/css" href="menue_y.css" />
      <title>####</title>
   </head>
   
   
   <body>
      <div id="menue">
         <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">Anmeldung</a></li>
            <li><a href="#">Impressum</a></li>
         </ul>
      </div>
   </body>
</html>


CSS

Code: [AUSKLAPPEN]
* {
   margin: 0px;
   padding: 0px;
}

#menue {
   position: absolute;
   background-color: #666;
   left: 10px;
   top: 10px;
   width: 200px;
   height: 200px;
}

#menue ul {
   background-color: #888;
   list-style-type: none;
}

#menue ul li a {
   font: bold 1em Arial,Verdana;
   text-decoration: none;
   padding: 5px 10px;
   display: block;
   color: #000;
   height: 20px;
}

#menue ul li a:hover {
   background-color: #aaa;
}


Aber du kannst auch mit border-top... auch wieder so ein altmodischen 3D-Effekt da rein machen. Auch mit CSS.
Download der Draw3D2 V.1.1 für schnelle Echtzeiteffekte über Blitz3D

Xaymar

ehemals "Cgamer"

BeitragSo, Dez 20, 2009 17:03
Antworten mit Zitat
Benutzer-Profile anzeigen
Was ist an Tabellen so schlimm? div's würden die "border: 1px lightblue;" versetzen. Warum also Div's?
Und div hab ich mir schon angeschaut. Man lese mal den Quellcode >_>
Warbseite

sirokuhl

BeitragSo, Dez 20, 2009 17:15
Antworten mit Zitat
Benutzer-Profile anzeigen
Was mich an der Seite am meisten stört ist der fehlende Innenabstand in der Contentbox (Der Inhalt klebt ja direkt am Rand) und die Schrift. Würd da was serifenloses empfehlen. Wink

Xaymar

ehemals "Cgamer"

BeitragDi, Dez 22, 2009 18:05
Antworten mit Zitat
Benutzer-Profile anzeigen
Hab nun das Standard template durch das neue ersetzt.
http://xproductions.bplaced.net/

Hinzugekommen sind übrigends Ein/Ausklappbare Newsboxen. Einfach auf den umrandeten Teil klicken und der Beitrag kann gelesen werden.

Als nächstes werde ich mal die Downloads fixen und dann prjcts.php fertigstellen

@hectic: Und was soll ich damit? Solche Beispiele finde ich zu hauf in meinem Projekte\Web\Failed\ Ordner. Zusätzlich kann ich mit CSS keine Transparenz definieren.

@sirokuhl: hab jetzt nen Padding reingesetzt und die Schrift auf Tahoma geändert. Sieht wirklich um einiges besser aus.
Warbseite

Jan_

Ehemaliger Admin

BeitragDi, Dez 22, 2009 18:11
Antworten mit Zitat
Benutzer-Profile anzeigen
Weiß auf Hellblau...
between angels and insects

hectic

Sieger des IS Talentwettbewerb 2006

BeitragDi, Dez 22, 2009 19:11
Antworten mit Zitat
Benutzer-Profile anzeigen
Cgamer, wenn du schon zu Hauf solche Codebeispiele auf deinem Projekte\Web\Failed -Ordner hast, dann solltest du diese auch nutzen. Tabellenkonstrukte für Designzwecke sind nicht wirklcih sauberer HTML-Code (wurde weiter Oben auch schon erwähnt). Transparenz geht im übrigen auch mit CSS, jedoch noch nicht von W3C standardisiert (siehe: opacity). Aber in deinem Design sehe ich auch keinen Grund unbedingt Transparenz nutzen zu müssen. Das leichte faden der Buttons mit dem Hintergrund fällt eh kaum auf. Für längeres surfen würde mich der Blauton nerven. Etwas entspannteres wäre vielleicht angebrachter.

Noch ein Verlaufstipp:

Von Unten nach Oben Blau, dann kommt eine Grenze ab wo es anfägt ins Türkis zu gehen. Das kommt daher, das der Verlauf ab der Grenze eben linear ansteigt. Schau mal in deinem Grafikprogramm auf eine Funktion, die ein sanftes ansteigen per Kurve erlaubt. Falls das nicht ist, so kann man auch mit Blau/Alpha=0 zu Türkis/Alpha=1 auch so ein Verhalten simulieren. Zum Beispiel mit PhotoFiltre geht das sehr gut.

user posted image

Erstes Beispiel: ~Dein Bild mit linearem Anstieg von 250 Pixeln. Grenze ist sichtbar
Zweites Beispiel: Neues Bild mit Kurvenanstieg von 350 Pixeln. Grenze ist nicht sichtbar
Beispielbild hat 400 Pixel, die Grenze ist nicht sichtbar.
Download der Draw3D2 V.1.1 für schnelle Echtzeiteffekte über Blitz3D

Gehe zu Seite 1, 2  Weiter

Neue Antwort erstellen


Übersicht Ressourcen Grafik & Design

Gehe zu:

Powered by phpBB © 2001 - 2006, phpBB Group