Share
Mathe ist schön. Klingt das ein bisschen seltsam? Das habe ich mir schon gedacht, als ich mit dem Design angefangen habe. Mathe ist so starr und oft langweilig, dachte ich. Sie wären überrascht zu erfahren, dass ästhetisch ansprechende Designs, Kunstwerke, Objekte und sogar Menschen Mathematik gemeinsam haben. Insbesondere der Goldene Schnitt, auch bekannt als der göttliche Anteil, der mit dem griechischen Buchstaben Φ (Phi) bezeichnet wird. In diesem Lernprogramm werden die Anatomie und das Layout einer Website sowie die Beziehung zwischen Goldener Ratio und Goldener Ratio behandelt.
Die Elemente einer Webseite sind wie Organe; Sie sind wichtig für eine ordnungsgemäß funktionierende und ästhetisch ansprechende Webseite.
Dies sind die Hauptelemente einer Webseite. Es gibt viele verschiedene Möglichkeiten, sie zu organisieren, aber dies ist möglicherweise das am häufigsten verwendete grundlegende Layout, das online verwendet wird.
Alle Webseiten verwenden zu demselben Zweck einen Container. um Seitenelemente zu enthalten, variiert die Art und Weise, wie sie ausgeführt wird. Beispielsweise wird am häufigsten das Body-Tag oder ein Div verwendet. In der Vergangenheit wurde sogar eine Tabelle verwendet (verwenden Sie keine Tabelle als Seitencontainer, es handelt sich um eine abgeschriebene Methode). Stellen Sie sich den Behälter als die Außenwände Ihres Hauses vor, in denen Ihre Schlafzimmer, Küche, Wohnzimmer usw. platziert werden.
Arten von Containern:
Die Kopfzeile ist nicht wirklich ein bestimmtes Element, obwohl einige dies für möglich halten. Es wird allgemeiner verwendet, um auf den oberen Bereich Ihrer Webseite zu verweisen, in dem sich Ihr Logo, Ihre Navigation, die Tagline usw. befinden. Viele Leute ziehen es vor, diese Elemente in einem Div zu behalten, um das Seitenlaying, die Elementtrennung und / oder die Elementeinfassung zu erleichtern. Der Header würde als Behälter betrachtet, so dass er zwei Arten zur Auswahl hätte: flüssig oder fest wie oben erwähnt.
Ihr Logo ist Ihre Identität und Ihr Branding. Die häufigste Platzierung für das Logo befindet sich in der Kopfzeile, links ausgerichtet. Wir lesen von links nach rechts und von oben nach unten, so dass Ihr Logo wahrscheinlich das erste Element ist, das Ihre Besucher betrachten.
Seitennavigation ist eines der wichtigsten Elemente; Ihre Besucher benötigen es, um Ihre Website zu nutzen. Es sollte leicht zu finden und zu verwenden sein, weshalb es fast immer in der Kopfzeile oder zumindest oben auf der Seite liegt. Manchmal werden beide Arten von Navigation für Websites mit hohem Inhalt verwendet.
Arten der Navigation:
Wie jeder weiß (oder sollte), ist Inhalt König! Wenn Menschen Ihre Website besuchen, wird dieses Element in erster Linie gesucht. Es sollte der Hauptschwerpunkt einer Webseite sein, damit Besucher schnell finden, wonach sie suchen.
Die Seitenleiste ist das Element mit sekundären Inhalten wie Werbung, Seitensuche, Abonnementlinks (RSS, Twitter, E-Mail usw.), Kontaktmethoden usw. Dieses Element ist nicht erforderlich, obwohl viele Websites es verwenden. Es ist meistens rechtsbündig ausgerichtet, kann aber linksbündig oder beidseitig (zwei Seitenleisten) ausgerichtet sein, solange die Anzeige des Hauptinhalts nicht beeinträchtigt wird. Bei Websites, die horizontale und vertikale Navigation verwenden, wird die Seitenleiste häufig durch das vertikale Navigationselement ersetzt.
Am Ende einer Webseite sollte immer eine Fußzeile verwendet werden, damit Ihre Besucher wissen, dass sie die Fertigstellung Ihrer Webseite erreicht haben. Wie die Kopfzeile ist die Fußzeile nicht wirklich ein bestimmtes Element, sondern eher ein umfassender Abschnitt. In Ihrer Fußzeile werden in erster Linie Copyright-, Rechts- und Kontaktinformationen angezeigt. Es ist eine gute Idee, ein paar Links zu den wichtigsten Abschnitten Ihrer Website, z. B. zum Anfang der Seite, zur Startseite, zur Kontaktseite usw., hinzuzufügen. Einige Websites nutzen diesen Bereich als Gelegenheit, auf diesbezügliches Material oder andere wichtige Informationen hinzuweisen.
Dies ist ein Bereich der Webseite, der nicht durch Typografie oder andere Inhalte abgedeckt wird. Möglicherweise verspüren Sie den starken Drang, so viel leeren Raum wie möglich zu füllen, aber tun Sie es nicht! Leerer Raum ist für ein gutes Webseiten-Design ebenso wichtig wie der zu verwendende Inhalt. Sie können sehen, wie die NetTuts-Site den leeren Raum sehr effektiv nutzt, um Besucher durch Inhalte zu führen, einen Seitenausgleich zu schaffen und eine gute Trennung der Inhalte zu erreichen.
Das deckt also die Anatomie einer Webseite ab. Lassen Sie uns nun einen Blick darauf werfen, wie sich der Goldene Schnitt auf diese Elemente bezieht.
Erinnern Sie sich an früher, als ich sagte, Mathe sei schön? Wir sehen die visuelle Anziehungskraft basierend auf dem Verhältnis (d. H. Dem Goldenen Verhältnis). Seit Jahrtausenden verwenden Künstler, Designer, Architekten usw. in ihrer Arbeit absichtlich oder unabsichtlich ein gemeinsames Verhältnis, das ästhetisch ansprechend ist. Was ist die magische Zahl? 1.62 (eigentlich 1.618…) Ich werde mich nicht mit den Ursprüngen dieser Nummer befassen, aber ich werde Ihnen sagen, wie man sie benutzt.
Die Verwendung des Goldenen Schnittes ist sehr einfach. Nehmen wir an, Sie möchten die Breite Ihrer Spalten "Main Content" und "Sidebar" ermitteln. Sie nehmen die Gesamtbreite Ihres Inhaltsbereichs (wir verwenden 900px für dieses Beispiel) und dividieren diese durch 1.62. Wie im obigen Beispiel gezeigt, teilen wir 900px durch 1.62 und erhalten 555.55px. Wir müssen nicht genau sein, also runden wir sie auf 555px ab. Jetzt wissen Sie, dass Ihr Hauptinhaltselement 555 Pixel breit und Ihre Seitenleiste 345 Pixel groß sein wird. Wie einfach ist das?!
Aber warte! Der Spaß hört hier nicht auf. Sie können den Goldenen Schnitt auch auf die Breite eines anderen Elements in Bezug auf seine Höhe anwenden oder umgekehrt. Dadurch entstehen ästhetisch ansprechende Elemente mit den Proportionen des Goldenen Verhältnisses.
Wenn Sie jedoch wie die meisten Menschen sind, möchten Sie nicht jedes Mal einen Taschenrechner mitnehmen, wenn Sie dieses Verhältnis verwenden möchten. Um den Prozess zu vereinfachen, können wir ein einfaches Raster verwenden. Sie müssen lediglich Ihre Breite und / oder Höhe durch ein Drittel teilen.
Jede Division kann um ein Drittel weiter reduziert werden, wodurch ein detaillierteres Raster entsteht. Wenn Sie den vorherigen Artikel "Ein genauer Blick auf das Blueprint-CSS-Framework" lesen, werden Sie feststellen, dass das Blueprint-CSS-Framework ein detailliertes Rastersystem verwendet. Das Raster vereinfacht und beschleunigt nicht nur, sondern erzeugt auch ein ästhetisch ansprechendes Layout! Wenn Sie beim Entwurf noch kein Gitter verwenden, ist jetzt ein guter Zeitpunkt, um es auszuprobieren. Sie können eine Rastervorlage für Feuerwerk, Photoshop und mehr von http://960.gs herunterladen. Dies ist ein weiteres fantastisches CSS-Framework, das Raster verwendet.
Wie Sie sehen können, hält sich Tuts + an die Goldene Ratio. Das obere Drittel der Seite ist wiederum in drei Drittel unterteilt, um zu zeigen, wie selbst der Kopfbereich in kleinere Drittel-Schritte zerlegt wird, sehr nahe am Goldenen Schnitt. Kein Wunder, warum das NetTuts-Design so ansprechend ist!
Wenn Sie noch nicht mit dem Design vertraut sind, empfehle ich Ihnen dringend, einige beliebte Websites zu finden, deren Layout und das Goldene Verhältnis und die Raster zu bewerten. Nehmen Sie sich dann etwas Zeit, um den Goldenen Schnitt mit Ihren Elementen zu üben und sie mithilfe eines Rasters in Ihrem Layout zu platzieren.
Accentsconagua