Mathematik ist schön, das war ich mir sicher, als ich anfing zu entwerfen. Mathematik ist so langweilig. Sie werden überrascht sein, dass die schönsten Designs, Kunstwerke, Objekte und sogar Menschen alle etwas Mathematisches gemeinsam haben. Insbesondere der Goldene Schnitt, auch bekannt als der göttliche Schnitt, dargestellt durch den griechischen Buchstaben Φ (phi). In diesem Tutorial wird das Layout einer Website erläutert und erläutert, wie man sie in goldene Schnitte unterteilt
Webseitengerüst
Dies sind die Hauptelemente von Webseiten. Es gibt viele verschiedene Möglichkeiten, sie zu organisieren, aber dieses Layout ist vielleicht das am häufigsten verwendete.
Container
Alle Webseiten verwenden einen Container, hauptsächlich für den gleichen Zweck: um einige Seitenelemente zu enthalten. Diese Methode wird jedoch unterschiedlich implementiert. Zum Beispiel das Body-Tag oder das am häufigsten verwendete div. Sogar die Tabelle, die in der Vergangenheit häufig verwendet wurde (verwenden Sie die Tabelle nicht als Container, dies ist eine fehlerhafte Methode). Stellen Sie sich einen Container als die Außenwand Ihres Hauses vor, in der sich Schlafzimmer, Küche, Wohnzimmer usw. befinden.
Containertyp:
Flüssigkeit: Entsprechend der Browserbreite füllen.
Behoben: Die angegebene Breite ändert sich nicht entsprechend der Browserbreite.
Kopfzeile
Der Header ist eigentlich kein spezifisches Element, obwohl einige Leute argumentieren würden, dass dies der Fall ist. Es wird eher auf der obersten Ebene der Webseite verwendet, wo Sie Ihr Logo, Ihre Navigationsleiste und Ihren Slogan platzieren. Viele Leute ziehen es vor, diese Elemente in ein Div einzuschließen, um die Trennung von Seitenstil und Inhalt zu erleichtern. Der Header wird als Container betrachtet, daher gibt es zwei Arten von Optionen, nämlich flüssig oder fest, wie oben erwähnt.
Logo
Ihr Logo ist Ihre Identität und Marke. Die am häufigsten verwendete Methode besteht darin, das Logo in der oberen linken Ecke Ihrer Kopfzeile zu platzieren. Unsere Lesegewohnheit ist von links nach rechts und von oben nach unten, daher sollte Ihr Protokoll so platziert werden, dass Besucher es auf den ersten Blick sehen können.
Navigation
Die Seitennavigation ist eines der wichtigsten Elemente; Ihre Besucher benötigen sie, um Ihre Website zu nutzen. Es sollte leicht zu finden und zu verwenden sein, weshalb die meisten Leute es in der Kopfzeile platzieren, zumindest oben auf der Seite.
Navigationstyp:
Horizontal: horizontale Anzeige, „Navigation“ genannt
Vertikal: vertikale Anzeige, genannt „Menü“
Hauptinhalt
Jeder sollte wissen, dass Inhalte das A und O sind, wenn Besucher Ihre Website besuchen. Es sollte der Mittelpunkt der Webseite sein, damit Besucher schnell finden, wonach sie suchen.
Seitenleiste
Die Seitenleiste ist ein Element, das Ihre sekundären Inhalte platziert, wie z. B. einige Anzeigen, Website-Suche, Abonnement-Links (RSS, Twitter, E-Mail usw.), Kontaktmethoden usw. Dieses Element ist nicht erforderlich, obwohl es von vielen Websites verwendet wird. Meistens wird es rechts platziert, Sie können es aber auch links oder auf beiden Seiten platzieren, sofern es das Durchsuchen des Hauptinhalts nicht stört. Websites verwenden eine horizontale oder vertikale Navigation und Seitenleisten verwenden häufig eine vertikale Navigation.
Fußzeile
Am Ende einer Webseite befindet sich immer eine Fußzeile, um Ihren Besucher darüber zu informieren, dass er das Ende Ihrer Webseite erreicht hat. Wie die Kopfzeile ist auch die Fußzeile kein spezielles Element. Fügen Sie in Ihrer Fußzeile Informationen zu Urheberrecht, rechtlichen Hinweisen und primären Kontaktinformationen ein. Es empfiehlt sich, einige wichtige Links einzufügen, z. B. eine Homepage, eine Kontaktseite usw. Einige Websites nutzen diesen Bereich, um relevante Materialien oder andere wichtige Informationen bereitzustellen.
„Leerraum“
Möglicherweise haben Sie den starken Wunsch, die Lücken auf diesen Seiten auszufüllen, aber bitte tun Sie das nicht. Auch der „Leerraum“ ist sehr wichtig. Sie können sehen, wie die NetTuts-Website den Leerraum effektiv nutzt, um eine Seitenbalance zu schaffen und ein gutes Gefühl zu vermitteln.
Das Obige ist das Grundgerüst der Webseite. Schauen wir uns nun an, wie diese Elemente in goldene Abschnitte unterteilt werden.
Der Goldene Schnitt und die Verwendung von Rastern
Erinnern Sie sich, als ich vorhin sagte, Mathematik sei schön? Wir glauben, dass die visuelle Attraktivität auf Proportionen (z. B. dem Goldenen Schnitt) basiert. Seit Jahrtausenden nutzen Künstler, Designer, Architekten usw. bewusst oder unbewusst ein gemeinsames Verhältnis, um die Schönheit ihrer Werke zu steigern. Was ist diese magische Zahl? 1,62 (eigentlich 1,618...) Ich werde Ihnen nicht den Ursprung dieser Zahl verraten, aber ich werde Ihnen sagen, wie man sie verwendet.
Die Verwendung des Goldenen Schnitts ist sehr einfach. Beispielsweise möchten Sie möglicherweise die Breite Ihrer Hauptinhalts- und Seitenleistenlisten ermitteln. Sie nehmen die Gesamtbreite Ihres Inhaltsbereichs und dividieren diese durch 1,62. Das ergibt 555,55 Pixel. Wir müssen nicht so genau sein, also verwenden wir einfach 555 Pixel. Jetzt wissen Sie, dass Ihr Hauptinhaltselement 555 Pixel breit und Ihre Seitenleiste 345 Pixel groß ist. Sehen Sie, wie einfach es ist?!
Aber warten Sie, der Spaß hört hier nicht auf! Sie können den Goldenen Schnitt auch auf die Breite und Höhe anderer Elemente anwenden.
Verwendung von Rastern
Wenn Sie wie die meisten Menschen sind, möchten Sie nicht jedes Mal einen Taschenrechner in der Hand halten müssen, um den Goldenen Schnitt zu berechnen. Dann ist es am einfachsten, Grid zu verwenden. Sie müssen also Ihre Breite oder Höhe in Drittel teilen.
Um ein detaillierteres Raster zu erstellen, teilen Sie es einfach weiter in Drittel auf. Wenn Sie den vorherigen Artikel „Intimer Kontakt mit dem Blueprint CSS Framework“ lesen, werden Sie feststellen, dass das Blueprint CSS Framework ein detailliertes Rastersystem verwendet. Das Rasterdesign ist nicht nur einfacher und schneller, sondern es entsteht auch ein schönes Layout. Wenn Sie Grid Design noch nicht verwendet haben, ist dies eine großartige Gelegenheit, es auszuprobieren. Sie können Rastervorlagen für Feuerwerk, Photoshop oder andere Software von http://960.gs herunterladen.
Wie Sie sehen, folgt NetTuts dem Goldenen Schnitt sehr gut. Das obere Drittel der Seite ist wiederum in Drittel unterteilt, ganz nah am Goldenen Schnitt. Kein Wunder, dass das Design von NetTuts so attraktiv ist!
Wenn Sie ein neues Design erstellen möchten, empfehle ich Ihnen dringend, einige beliebte Websites zu finden und deren Layouts sowie die Anwendung des Goldenen Schnitts und des Rasters zu überprüfen. Nehmen Sie sich dann etwas Zeit, um den Umgang mit dem Goldenen Schnitt und der Verwendung von Rastern in Ihren Layouts zu üben.