Green Webdesign

[Naruto123]

Habe es eigentlich nur gemacht, damit ich mit (X)HTML und CSS üben kann, aber wollte auch mal wissen, wie es geworden ist.

[Renegade]

Also entweder bin ich farbenblind, oder das Design ist nicht Blue sondern Green

[Naruto123]

Zitat von Renegade

Also entweder bin ich farbenblind, oder das Design ist nicht Blue sondern Green

Du hast recht. Mein Fehler.

[Killerbear]

rgb(22%, 75%, 69%)
jo.
grün hat mit 6% mehr Anteil gerade so gewonnen.

Das nennt man dann Türkis.

Sieht einfach und klar strukturiert aus.
Da man deshalb nicht viel auf an der Gestaltung meckern kann, widme ich mich der Komposition.

Der Inhalt in der Mitte war ganz schön erschlagen von den riesigen Balken ben und unten.
Beim lesen fühlt man sich förmlich erdrückt.
Dazu kommt noch, dass die Schriftfarbe weiß ist.
Das alleine ist noch nicht ganz so schlimm aber strengt das lesen etwas mehr an, als schwarze oder dunkle Schrift.
Aber die weiße Schrift in Kombination mit dem sehr sehr grellem Türkis, macht das Lesen unmöglich.

Solche grellen Farben sind generell nur dezent zu Gebrauchen.
Sie lockern das Design im ganzen auf und sorgen für Akzente.
Aber die komplette Seite mit solch einer intensiven Farbe zu füllen, sorgt für Augenkrebs.

Was mich auch noch wundert: zwei Navigationsleisten?
Bei der oberen Leiste sind de auch noch Bezeichnungen eingefallen.
Aber die Links in der Mitten sind so sinnlos, dass sie selbst von dir keinen richtigen Namen bekommen haben.
Oder wofür ist die zweite Navigationsleiste?
Damit der User immer auf beiden Navigationsleisten suchen muss?
Ich denke, dass eine Leiste vollkommen ausreichend und auch für die User angenehmer ist.

[Naruto123]

Die zweite Navigation war sozusagen eine unter Navigation wie bei Klamm mit den ausfahrenden Boxen nur hier ist es dann halt eine einzelne Box.

[Arusiek]

Zitat von Naruto123

Habe es eigentlich nur gemacht, damit ich mit (X)HTML und CSS üben kann, aber wollte auch mal wissen, wie es geworden ist.

Mal ganz doof gefragt... Warum zeigst du dann hier ein Bild und nicht die fertige Seite?

Gruß Aru

[Naruto123]

Zitat von Arusiek

Mal ganz doof gefragt... Warum zeigst du dann hier ein Bild und nicht die fertige Seite?

Gruß Aru

Habe es gestern gemacht und keine Zeit mehr gehabt es umzusetzen und wollte einfach schonmal wissen, wie es geworden ist, weil ich auch vielleicht mal das ein oder andere Design machen will in nächster Zeit und dann habe ich es gepostet, damit ich vielleicht Kritik dazu bekomme.

[Arusiek]

Zitat von Naruto123

Habe es gestern gemacht und keine Zeit mehr gehabt es umzusetzen

Sorry, aber die "Umsetzung" wäre hier die einzige Leistung...
Das kannst du, bis auf zwei Grafiken direkt in HTML/CSS erstellen

Gruß Aru

[topfkanne]

Zitat von Arusiek

Sorry, aber die "Umsetzung" wäre hier die einzige Leistung...
Das kannst du, bis auf zwei Grafiken direkt in HTML/CSS erstellen

Gruß Aru

Um mit "" fortzufahren:

Ich denke das kaum jemand selbst solch ein Design aus dem Kopf heraus in HTML/CSS schreibt, ohne es nachträglich zig mal nachzubessern oder abzuändern. Stichwort vor allem: Farben.
Du verstehst.


... sry : P

[Arusiek]

Zitat von topfkanne

Ich denke das kaum jemand selbst solch ein Design aus dem Kopf heraus in HTML/CSS schreibt, ohne es nachträglich zig mal nachzubessern oder abzuändern. Stichwort vor allem: Farben.

Als Skizze ist das ja o.k.
Aber doch nicht zum veröffentlichen, vor allem nicht mit dem Hinweis, daß man die Umsetzung lernen wollte.

Warum scheint hier jeder zu denken, daß ein "Design" unbedingt zu 100% aus einer Grafik bestehen muss?
Auch wenn das I-net immer schneller wird muss man doch nicht unbedingt jede einfarbige Fläche als Grafik darstellen und laden lassen, wenn 16-32 Byte Code zum selben Ergebnis führen...

Und als Grafik ist das "Design" nun wirklich keine grosse Leistung, Das bekommt jeder hin, der sich mal einen halben Tag mit Paint.net beschäftigt.
Sauber und optimiert in HTML/CSS umgesetzt sähe die Sache schon anders aus, ich behaupte mal, daß kann hier kaum einer richtig

Gruß Aru

[Naruto123]

Ja, habt gewonnen.
Muss wohl noch beim Thema Design Erstellung noch lernen.


Habe mich an das umsetzen gewagt, aber die Contentbox rechts bekomme ich einfach nicht rechts neben die Navigationsbox.
Hier mal die Codes:

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="de">
  
  <head>

    <meta http-equiv="content-type" content="text/html; charset=windows-1250" />
    <title>Türkis Design - Übung</title>
    <link href="style.css" type="text/css" rel="stylesheet" />
  
  </head>
  
  <body>

    <div id="header">
      <img src="Bilder/page-header.jpg" alt="Beispielname.de" width="370px" height="103px" />
    </div>  
    
    <div id="main-navi">
      <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">Startseite</a></li>
      </ul>
    </div>
       
    <div id="sub-navi">
      <div id="sub-navi-header">
        <div id="sub-navi-ueberschrift">
          Navigation
          <div id="hyperlinks">
              <ul>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
                <li><a href="#">Hyperlink</a></li>
              </ul>
          </div>
      </div>
      
      <div id="content-box">
        <div id="content-box-header">
          <div id="content-box-ueberschrift">
          Navigation
          </div>
        </div>
      </div>
    </div>
    
    </div>

  </body>

</html>

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:
53:
54:
55:
56:
57:
58:
59:
60:
61:
62:
63:
64:
65:
66:
67:
68:
69:
70:
71:
72:
73:
74:
75:
76:
77:
78:
79:
80:
81:
82:
83:
84:
85:
86:
87:
88:
89:
90:
91:
92:
93:
94:
95:
96:
/* CSS Document */

body, html {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

body {
  background-color: #007A6D;
}

#header {
  position: relative;
  width: 370px;
  height: 103px;
  margin: 0px auto;
}

#main-navi {
  background-image: url(Bilder/page-main-navigation.gif);
  position: absolute;
  width: 100%;
  height: 46px;
  background-repeat: repeat-x;
}

#main-navi ul {
  margin-left: 100px;
}

#main-navi li {
  list-style: none;
  float: left;
  padding: 0px 0px 0px 10px;
  font-weight: bold;
  font-size: 0.8em;
}

#main-navi a:link, a:visited, a:active {
  text-decoration: none;
  color: #ffffff;
}

#sub-navi {
  float: left;
  margin-top: 103px;
  background-color: #39beb0;
  width: 175px;
  height: 300px;
  padding-top: 1px;
  margin-left: 150px;
}

#sub-navi-header {
  background-color: #168479;
  width: 173px;
  height: 32px;
  margin-left: 1px;
}

#sub-navi-ueberschrift {
  color: #1fbead;
  font-size: 0.7em;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-weight: bold;
  text-align: center;
  padding-top: 8px;
}

#hyperlinks {
  list-style: none;
  padding: 10px;
}

#hyperlinks a:link, a:visited, a:active {
  text-decoration: none;
  color: #ffffff;
}

#hyperlinks a:hover {
  color: #000000;
}

#hyperlinks li {
  padding: 5px;
  margin-right: 66px;
}

#content-box {
  background-color: #39beb0;
  width: 600px;
  height: 300px;
  padding-top: 1px;
  margin-left: 300px;
}

Habe ich es überhaupt richtig gemacht mit den ganzen div-Tags oder ginge das auch einfacher und schlanker?
So sieht es aus, aber die Contentbox soll auf der gleichen Höhe wie die Navigationsbox links sein...

[Arusiek]

Zitat von Naruto123

Muss wohl noch beim Thema Design Erstellung noch lernen.

Das kommt drauf an, was du willst.

Viele verstehen einfach den Unterschied zwischen Grafiker und Designer nicht und denken daher, ein Seitendesign müsste möglichts viel Grafik und unbedingt ganz tolle Effekte haben.

Ein Design sollte aber in erster Linie der Funktion und Ergonomie dienen und trotzdem gut aussehen.
Ich finde z.B. das Design der Google-Startseite genial
Als reine Grafik wäre es halt eher lächerlich...

Gruß Aru

[Naruto123]

Ein Design, das ich erstelle sollte seine Funktion erfüllen und schön übersichtlich sein. Effekte können auch drin sein, aber sollten nicht damit überladen sein.

[Arusiek]

Zitat von Naruto123

Ein Design, das ich erstelle sollte seine Funktion erfüllen und schön übersichtlich sein.

Dann gehst du ja in die richtige Richtung, die Kunst ist es halt den Grat zwischen funktionell und langweilig zu finden

Effekte können auch drin sein, aber sollten nicht damit überladen sein.

Effekte, oder besser Akzente, kann man aber auch z.B. durch einen geschickten Schriftsatz oder eine dezente Farbgestaltung erzielen.
Von daher finde ich dein Design noch eher überladen...

Vor allem die Farben sind, wie schon geschrieben wurde, nicht so der Brenner.
Insgesamt finde ich die Kombination gar nicht so schlecht, aber es ist viel zu viel.
Durch die gewählte Schrift und den Kontrast tut das zudem nach einiger Zeit in den Augen weh... (Stichwort: Ergonomie)

Versuch doch mal einen weissen Hintergrund zu verwenden und die benutzten Farben nur in einige Elemente einfliessen zu lassen.

Gruß Aru

[Naruto123]

Hallo,

Habe mich mal in der Zeit an ein neues Design gesetzt und das hier ist dabei rausgekommen:


Dieses hier ist meiner Meinung nach um Längen besser als das erste Design. Die Zeile, wo die Überschrift reinkommt im Content ist vielleicht etwas zu schlicht geworden, aber ich wusste nicht, was ich da noch machen könnte...
Habt ihr da vielleicht Ideen? Wie auch bei dem anderen Design werde ich auch bei diesem versuchen es umzusetzen.