Webdesign-Tutorial (3): Designschritte und Denkweise
|
<br />Vorheriges Tutorial: Webdesign-Tutorial (2): Über Nachahmung und Plagiat. Anders als die vorherigen Schritte ist dies der eigentliche Arbeitsschritt. Dieser Artikel enthält die allgemeinen Schritte und Spalten, Bilder und sogar die Auswahl eines Symbols usw. und kann viele Dinge auslassen. Sie können gerne etwas hinzufügen. Ich gebe Ihnen nur einen Denkanstoß. Dieses Kapitel enthält definitiv nicht die Standardproduktionsschritte für Webseiten. Ich glaube, es gibt keine Standardproduktionsschritte. Die Designschritte in diesem Kapitel basieren auf dem ersten Schritt des Webdesigns (Schritte und Gesamtansicht). Möglicherweise sind einige Kenntnisse im Bereich Grafikdesign und der Vergleich zwischen Webseiten und Grafikdesign erforderlich. Auf den Unterschied zwischen Webseiten und Grafikdesign werde ich später eingehen. Dieses Kapitel basiert auf der PHOTOSHOP-Software. Dieses Kapitel beweist, dass 90 % einer Webseite aus Typografie bestehen. Befolgen Sie die Reihenfolge vom Ganzen zum Teil. 1: Finden Sie anhand der Positionierung heraus, was Sie tun möchten. Dieser Satz bedarf eigentlich keiner weiteren Erklärung. Was Sie verstehen müssen, ist, welche Wirkung die Website, die ich erstellen möchte, haben wird, und Sie müssen Beispiele im Kopf haben. Zu welcher Branche gehört diese Website und was sind die gemeinsamen Merkmale von Websites in dieser Branche. 2: Was sind Ihre Ziele/Wirkungen und welche Ziele/Wirkungen hoffen Sie zu erreichen? Sind die von Ihnen festgelegten Ziele mit den Zielen Ihrer Kunden und Unternehmensleiter vereinbar? Wo liegen die Unterschiede? 3: Wie gehen Sie dabei vor, welche Methoden verwenden Sie, um Ihr Ziel/Ihren Effekt zu erreichen. Und welche Art von Design verwenden Sie, um diesen Effekt zu verstärken und hervorzuheben. 4: Wie sollte Ihr Layout zu Ihrem Design passen und wie Ihre Ideen hervorheben? 5: Gibt es unterschiedliche Stile? Ist es nur eine Farbänderung? (Alle Hintergrundebenen mit Farbe beibehalten) Diese Schritte sollten vor dem Start aufgeschrieben werden. Es gibt noch detailliertere Funktionen und Layouts, sodass Sie es selbst herausfinden können. Im Folgenden sind die eigentlichen Schritte des praktischen Designs aufgeführt. 1: Bestimmen Sie die Auflösung und die entsprechenden Effekte bei unterschiedlichen Auflösungen. Der Unterschied zwischen Webseiten und flachen Medien führt dazu, dass Webseiten über flexiblere Ausdrucksformen verfügen als flache Medien. Das Konzept des Vollbilds einer Site wird eigentlich in relativ und absolut unterteilt. Relativ bedeutet Vollbild für die aktuelle Auflösung. Absoluter Vollbild bedeutet, dass verschiedene Monitore und verschiedene Auflösungen Vollbild sind. Im Allgemeinen gebe ich eine Mindestauflösung und eine Maximalauflösung von unendlich an. Relativer Vollbild, beispielsweise 1024 × 768, 800 × 600 usw. Am besten definiert man ihn mit absoluter Breite, also Pixeln. Absoluter Vollbild, verwenden Sie den Prozentsatz. Nachdem Sie die Auflösung bestimmt haben, sollte Ihr PS-Bild größer sein als das eigentliche Design. Überlegen Sie, wie die Webseite dargestellt wird, wenn der Benutzer eine höhere Auflösung als Ihr Design verwendet, ob links, in der Mitte oder rechts. 2: Der Haupthintergrund, 3 Hilfslinien und Randbearbeitung. Struktur (die ungefähre Position von Kopf, Mitte und unten.) Gibt es einen Hintergrund für das Ganze? Linke Grenzlinie, rechte Grenzlinie und Mittellinie. Wenn das Design eine absolute Breite hat, gibt es eine Trennung zwischen dem Inhalt und dem zusätzlichen Bildschirm, wenn der Benutzer mit einer höheren Auflösung surft? Die Struktur, ob es sich um eine Oben-Mitte-Unten-Struktur, eine Links-Mitte-Rechts-Struktur oder etwas anderes handelt. Welcher Inhalt wird in welchen Block eingefügt?  3: Navigation und Beschilderung. 100-1 % einer Website besteht aus Navigation. Dies ist ein Satz, der schon viel zu oft verbreitet wurde. Ist Ihre Navigation lang oder kurz? Ist sie horizontal oder vertikal? Oder ist sie gekrümmt? Gibt es ein Dropdown-Menü? Wie lang ist jedes davon? Wo ist das Logo? Wo ist der Zugang zu den einzelnen Sprachseiten? Wo ist der Login (Backend-Verwaltung/Benutzer/MAIL)? Gibt es eine hervorgehobene Anzeige neben dem Logo? Okay, fahren wir mit dem nächsten Schritt fort.  4: Banner, Navigation und Übergang. Sind Navigation und Banner getrennt oder zusammen? Wenn sie zusammen sind, verwenden Sie Flash, um sie zu erstellen? Wenn nicht, ist der von Ihnen entworfene Hintergrund zum Zuschneiden in einen gekachelten Hintergrund geeignet? Wie kann die Größe des Hintergrundbilds minimiert werden? Denken Sie daran, keinen 2×2-Hintergrund zum Kacheln zu verwenden. Nimmt das Banner die gesamte Breite ein oder nur einen Teil? Wenn es ein Teil ist, was planen Sie, in den leeren Raum zu setzen? 5: Hauptinhaltsteil. Ist mein Zentrum eine Links-Rechts-Struktur, ein großes Stück oder eine Links-Mitte-Rechts-Struktur? Welche Methode wird zum Unterteilen der einzelnen Stücke verwendet? Welche Regeln gelten für Farbwechsel? Füllen Sie dann den Inhalt aus. 6: Copyright-Informationen und weitere Informationen unten. 7: Verschiedene Anpassungsarten. Das ist im Grunde alles. Ich komme nicht dahinter und bin mit dem, was ich geschrieben habe, nicht zufrieden, aber es kann mir helfen, viele Probleme zu vermeiden. Zur Auswahl der Bilder und kleinen Icons: Die Bildauswahl folgt folgenden Elementen: 1: Es muss ein klares Thema geben. 2: Das Bild sollte möglichst spannend sein. 3: Es gibt nur einen hervorgehobenen Inhalt (das Bild hat nur einen hervorgehobenen Inhalt und das Layout ist dasselbe) 4: Betrachten Sie die Bildauswahl aus der Perspektive des Zielobjekts bzw. Zieldienstleistungsobjekts. 5: Seien Sie gut darin, Hintergründe zu erstellen. 6: Versuchen Sie als Anfänger, so viel Leerraum wie möglich zu lassen. 7: Anfänger sollten Arc mit Vorsicht verwenden. Hinweise zur Symbolauswahl: 1: Die Bedeutung des Symbols sollte mit dem Titel übereinstimmen 2: Gleiche Farbe oder einheitlicher Stil. 3: Lernen Sie, durchzubrechen (Symbole sind nicht durch den Titelhintergrund eingeschränkt) 4: Achten Sie besonders auf die Symbolgröße. 5: Machen Sie guten Gebrauch von abgerundeten Ecken (anders als Bögen) 6: Machen Sie es leicht zu merken. 7: Vermeiden Sie Wiederholungen so weit wie möglich (außer bei reiner Dekoration und wiederholten Stimulationseffekten) |
<<: Reines CSS3 zum Erstellen eines Beispielcodes für Seitenwechseleffekte
>>: Teilen Sie einige ungewöhnliche, aber nützliche JS-Techniken
Artikel empfehlen
Der Prozess der schnellen Konvertierung eines MySQL-Left-Joins in einen Inner-Join
Während des täglichen Optimierungsprozesses stell...
Führen Sie die Schritte zum Einrichten automatischer Updates in CentOS 8 aus
Das Beste, was Sie für Ihre Daten und Computer tu...
Drei Eigenschaften von Javascript-Objekten
Inhaltsverzeichnis 1. beschreibbar: beschreibbar ...
Beispiel für die Implementierung eines kreisförmigen Fortschrittsbalkens in Vue
Die Anzeige von Daten ist seit jeher eine Forderu...
So lösen Sie das Problem zu vieler geöffneter Dateien in Linux
Die Ursache liegt darin, dass der Prozess zu eine...
Detailliertes Tutorial zur Installation von JDK1.8 unter Linux
1. Reinigung vor der Installation rpm -qa | grep ...
Erweiterte benutzerdefinierte JavaScript-Ausnahme
Inhaltsverzeichnis 1. Konzept 1.1 Was sind Fehler...
Grafisches Tutorial zur Installation der komprimierten Version von MySQL 8.0.15
In diesem Artikel wird die Installationsmethode d...
Docker nginx Beispielmethode zum Bereitstellen mehrerer Projekte
Voraussetzungen 1. Docker wurde auf dem lokalen C...
So richten Sie eine automatische tägliche Datenbanksicherung in Linux ein
Dieser Artikel verwendet das Centos7.6-System und...
Detaillierte Erläuterung der MySQL Limit-Leistungsoptimierung und der Paging-Daten-Leistungsoptimierung
MySQL Limit kann Datenbankdaten segmentweise abfr...
Richtige Methode zum Laden von Schriftarten in Vue.js
Inhaltsverzeichnis Schriftarten mit font-face ric...
Detaillierte Erklärung dreier häufig verwendeter Webeffekte in JavaScript
Inhaltsverzeichnis 1 Element Offset-Serie 1.1 Off...
Ausführliches Tutorial zur Konfiguration der kostenlosen Installationsversion von MySQL 8.0.23
Der erste Schritt besteht darin, die kostenlose I...