Überlegungen zum Rasterdesign von Webseiten
|
<br />Ursprüngliche Adresse: http://andymao.com/andy/post/82.html Schmutz, Unordnung und schlechte Qualität im Webdesign sind Probleme, denen wir während des Designprozesses häufig begegnen. Normalerweise wird "schmutzig" durch unsachgemäße Verwendung von Farben verursacht, und die schlechten Auswirkungen, die durch unsachgemäße Verwendung von Farben verursacht werden, werden auch in "blumig und grau" unterteilt. Blumig und grau sind das, was wir hier als "schmutzig" bezeichnen. Ich habe in einigen meiner früheren Artikel bereits über meine Ansichten zur Verwendung von Farbe im Design gesprochen. Interessierte Freunde können sich „Farberklärung“ ansehen. Die „schlechte“ Leistung ist im Wesentlichen auf unsere mangelnden technischen Kenntnisse zurückzuführen. Beispielsweise werden die Details nicht richtig behandelt und die Auswirkungen einiger lokaler Bereiche sind grob. Dies kann als „mangelhaft“ bezeichnet werden, insbesondere wenn es um Designarbeiten mit 2D-Effekten geht, kommt diese Situation häufig vor. Aber worüber ich in diesem heutigen Artikel sprechen möchte, ist „Chaos“. Was ist Chaos? Das Chaos bezieht sich hier nicht auf die chaotische Verwendung von Farben oder den chaotischen Inhalt, sondern bezieht sich hauptsächlich auf das chaotische Layout. Ich hatte in der Vergangenheit die Möglichkeit, mit Grafikdesign in Kontakt zu kommen und mir dadurch viel Wissen und Techniken anzueignen. Unter ihnen ist das „Rasterdesign“ eine Theorie, die sich mit dem Layout im Grafikdesign beschäftigt. Bisher studiere ich noch „Grid Design“. Denn es gibt wirklich keine bessere Sprache, die dieses Wort sehr prägnant und klar zusammenfassen könnte. Dies ist eher etwas, das durch kontinuierliche Übung verstanden werden muss. So oft sind wir nicht in der Lage, es zu sagen. Beim Design ist dieses Raster jedoch ein sehr nützliches Werkzeug, das uns dabei helfen kann, bessere Arbeiten zu erledigen. Ich kann nicht behaupten, dass ich ein tiefes Verständnis von Grid-Design habe. Ich wende mein Wissen über Grid-Design nur auf Webdesign an. Ich hoffe, dass ich damit mehr Freunden etwas Inspiration geben und vielleicht einigen von ihnen den Horizont erweitern kann. Da es für Designer unmöglich ist, den Text geduldig alleine zu lesen, verwenden wir immer noch die alte Methode und Diagramme als Erklärungsmodelle. Dieses Mal verwenden wir zur Erklärung die Websites von Microsoft, IBM und ASTRO. Ich hoffe, dass ich durch die Analyse der Website-Designs dieser drei Unternehmen mein Verständnis von Rasterdesign vermitteln kann. Schauen wir uns ohne weitere Umschweife das Diagramm an:  Wir können erkennen, dass es im Design der Microsoft-Website keine offensichtlichen Linien zur Trennung der einzelnen Blöcke gibt. Wenn wir es jedoch mit einer Schicht Gaze bedecken und dann jeden Teil mit durchgezogenen Linien zeichnen, stellen wir fest, dass die Website tatsächlich in Form eines Gitters angeordnet ist. Der Inhalt dieses Arrays ist bereits sehr klar und wir haben festgestellt, dass die Positionen vieler Blöcke auf der Seite überraschend organisiert sind und einige Blöcke, die nicht zusammen sind, tatsächlich ein bestimmtes Muster aufweisen. Natürlich könnten manche Leute sagen, dass es organisiert und ordentlich wirkt, wenn alles mit Linien gezeichnet ist. Genau hier liegt das Problem: Unsere Webseiten lassen sich alle durch vertikale und horizontale Linien unterscheiden. Einige schlecht gestaltete Websites weisen jedoch möglicherweise eine große Anzahl vertikaler und horizontaler Linien auf. Es gibt zu viele vertikale und horizontale Linien und sie sind alle zusammengedrängt, was bedeutet, dass das Layout der Website zu chaotisch erscheint. Oder es ist zu organisiert und wirkt eintönig, kontrastlos und unschön. Tatsächlich können Sie möglicherweise erkennen, wo das Problem liegt, wenn Sie diese Methode zur Analyse Ihrer eigenen Designarbeit verwenden. Werfen wir einen Blick auf die Aufschlüsselung der IBM-Website:  Wir können sehen, dass sich das Raster von IBM stark von dem von MS unterscheidet. Bei IBM gibt es einige Raster ähnlicher Größe, aber es ist zu beachten, dass diese Raster tatsächlich von mehreren sehr kleinen Blöcken unten erzeugt werden und diese Blöcke auch als horizontale Blöcke betrachtet werden können. Wir können hier erkennen, dass das Layout-Design von IBM symmetrisch ist. Allerdings ist diese Symmetrie auf den vertikalen und horizontalen Linien nicht leicht zu erkennen. Dies ist eine sehr clevere Technik. Werfen wir einen Blick auf die Website von ASTRO. Diese Website ist unterhaltsamer und interessanter als die Websites der beiden oben genannten Unternehmen.  Auf diesen drei Websites können wir drei verschiedene Rasterdesignstile sehen. Obwohl sie unterschiedlich sind, können wir dennoch feststellen, dass alle drei ihr Bestes geben, um die wichtigsten Informationen in den visuellen Mittelpunkt zu stellen. Ob links, rechts oder in der Mitte, sie alle erhalten die größte Rasterfläche und erhalten genügend Aufmerksamkeit! Unser Sehzentrum ist ganz natürlich darauf ausgerichtet! Dennoch bin ich der Meinung, dass ich die Rolle des Rasterdesigns nicht klar erklärt habe. Hierfür sind wir auf die Meinung unserer Freunde und Besucher angewiesen. Ich werde auch in Zukunft auf das Rasterdesign achten und hoffe, seine Rolle im Webdesign deutlicher zu machen! |
<<: So erstellen Sie einen Tabellenindex in MySQL
Artikel empfehlen
Vue+Openlayer Batch-Einstellung von Flash Point-Implementierungscode (basierend auf dem Postrender-Mechanismus)
Effektbild: Implementierungscode: <Vorlage>...
Implementierung der Graustufenversion mit Nginx und Lua
Installieren Sie memcached yum install -y memcach...
So stellen Sie Solidity-Smart-Contracts mit ethers.js bereit
Wenn Sie DApps auf Ethereum entwickelt haben, hab...
Detaillierte Schritte zur Installation einer virtuellen Maschine und Verwendung von CentOS 8 mit VMware 15
Vorwort: Ich lerne derzeit Linux und .Net Core un...
Detaillierte Schritte zum Starten des Django-Projekts mit nginx+uwsgi
Wenn wir ein Webprojekt mit Django entwickeln, wi...
Details zur MySQL-Sicherheitsverwaltung
Inhaltsverzeichnis 1. Vorstellen gemäß der Bestel...
Datenbankprobleme und Fallstricke bei der Verbindung zu Cloud-Servern mit Navicat Premium15
Bei Verwendung eines Cloud-Servers stellen wir ma...
So verwenden Sie Nginx, um domänenübergreifende Front-End-Probleme zu lösen
Vorwort Bei der Entwicklung statischer Seiten, wi...
Erstellen Sie ein Docker-Image mit Dockerfile
Inhaltsverzeichnis Erstellen Sie ein Docker-Image...
Docker-Compose erstellt eine Brücke, fügt ein Subnetz hinzu und löscht eine Netzwerkkarte
1. Erstellen Sie eine Docker-Netzwerkkarte [root@...
Bringen Sie Ihnen bei, wie Sie die rekursive Methode von MySQL8 verwenden
Ich habe zuvor einen Artikel über rekursive Abfra...
So konfigurieren Sie die Portweiterleitung für Docker unter CentOS 7, damit sie mit der Firewall kompatibel ist
Wenn wir unter CentOS 7 den Host-Port mit einem B...
Eigenschaften und Quellcode der Echarts-Legendenkomponente
Die Legendenkomponente ist eine häufig verwendete...
So installieren Sie Elasticsearch und Kibana in Docker
Elasticsearch erfreut sich derzeit großer Beliebt...
So kompilieren und installieren Sie OpenCV unter Ubuntu
Einfache Installation von opencv2: conda installi...