Green Webdesign

N

Naruto123

abgemeldet
20 Juli 2009
3.790
122


Habe es eigentlich nur gemacht, damit ich mit (X)HTML und CSS üben kann, aber wollte auch mal wissen, wie es geworden ist. :)
 
Zuletzt bearbeitet:
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.
 
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 schrieb:
Mal ganz doof gefragt... Warum zeigst du dann hier ein Bild und nicht die fertige Seite?

Gruß Aru
Zum Vergrößern anklicken....

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 schrieb:
Sorry, aber die "Umsetzung" wäre hier die einzige Leistung...
Das kannst du, bis auf zwei Grafiken direkt in HTML/CSS erstellen :roll:

Gruß Aru
Zum Vergrößern anklicken....

Um mit ":roll:" 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
 
topfkanne schrieb:
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.
Zum Vergrößern anklicken....
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
 
Ja, habt gewonnen. :D
Muss wohl noch beim Thema Design Erstellung noch lernen. :roll:


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

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

<html xmlns="https://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>

Code: 
/* 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...
 
Zuletzt bearbeitet:
Naruto123 schrieb:
Muss wohl noch beim Thema Design Erstellung noch lernen. :roll:
Zum Vergrößern anklicken....
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
 
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.
 
Naruto123 schrieb:
Ein Design, das ich erstelle sollte seine Funktion erfüllen und schön übersichtlich sein.
Zum Vergrößern anklicken....
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.
Zum Vergrößern anklicken....
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
 
  • Like
Reaktionen: MiD
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. ;)
 
Zuletzt bearbeitet:
Das sieht schlicht und übersichtlich aus, aber wozu brauchst du da noch Grafiken ? Lässt sich alles mit HTML/CSS machen. Ich meine das umzusetzen währe sinnlos. Du solltest das als Vorlage verwenden und das ganz in CSS und HTML machen
 
Werde es auch nur mit HTML und CSS umsetzen ganz ohne Grafiken. Das wird nur als Vorlage verwendet...
Bin jetzt soweit, dass ich den Header habe und die Navigation oben mache, aber irgendwie bekomme ich den Header nicht unter die Navigation...
Das liegt wohl an dem "float: left", das ich bei den Buttons verwendet habe, aber habe dafür keine Lösung gefunden.

So sieht das aus:
https://deevil.funpic.de

Und hier die Codes:

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

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

    <head>
        <title>2. Design Umsetzung</title>
        <link href="style.css" type="text/css" rel="stylesheet" />
    </head>
    
    <body>
        <div id="navigation-buttons">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
                <li><a href="#">Home</a></li>
            </ul>
        </div>
        <div id="navigation-linie">
        </div>
        <div id="header">
            <div id="header-inhalt">
                <h6>Lorem Ipsum</h6>
                <p>
                Lorem ipsum dolor sit amet, consetetur sadipscing elitr, 
                sed diam nonumy eirmod tempor invidunt ut labore et 
                </p>
            </div>
        </div>
    </body>

</html>

Code: 
* {
    margin: 0;
    padding: 0;
}
body { 
    background-color: #fff6bc;
}

#navigation-linie {
    background-color: #b9e14b;
    width: 100%;
    height: 5px;
}

#navigation-buttons li {
    background-color: #b9e14b;
    width: 125px;
    height: 40px;
    margin-left: 5%;
    margin-top: 100px;
    text-align: center;
    float: left;
}

#navigation-buttons ul {
    list-style: none;
}

#navigation-buttons a:link {
    text-decoration: none;
}

#navigation-buttons a {
    text-decoration: none;
}

#header {
    background-color: #302d23;
    height: 150px;
    width: 100%;
}

#header-inhalt {
    background-color: #423f33;
    width: 359px;
    height: 95px;
    margin: 0px 0px 0px 10%;
}

#header-inhalt h6 {
    font-family: Arial, Verdana, sans-serif;
    font-size: 0.8em;
    font-style: normal;
    color: #fff5bc;
    padding: 12px 0px 0px 52px;
}

#header-inhalt p {
    font-family: Arial, Verdanan, sans-serif;
    font-size: 0.8em;
    color: #fff5bc;
    padding: 5px 15px 15px 30px;
}
 
bob777 schrieb:
Eher an "margin-top: 100px;" ;)
Zum Vergrößern anklicken....

Warum das? Die Buttons sollen doch einen Abstand von 100px nach oben haben... Aber werde mir das mal im Firebug anschauen, danke! ;)

Habe das margin weggemacht und etwas an den anderen margins rumgefummelt, aber jetzt ist zwar alles bis auf die Buttons auf der richtigen Höhe, aber die Buttons sind unterhalb der Trennlinie...
Die sollen, aber oberhalb der Trennlinie sein.
 
Zuletzt bearbeitet:
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben