Heim Web-Frontend CSS-Tutorial Hochwertiges Webdesign und Fähigkeiten Nr. 4 (Organisation von Elementen)

Hochwertiges Webdesign und Fähigkeiten Nr. 4 (Organisation von Elementen)

Dec 26, 2016 pm 03:53 PM
网页设计

Der Beruf des Designers ist für viele Menschen attraktiv, weil der Prozess der Schaffung von Kreativität wirklich interessant ist. Ich weiß, dass das Organisieren von Inhalten nicht so interessant ist, aber wenn Sie erst einmal eine gute Angewohnheit entwickelt haben, Inhalte zu organisieren, werden Sie feststellen, dass es nicht so langweilig ist, wie Sie denken. Die Art und Weise, wie Sie Inhalte organisieren, hängt immer von der Situation ab. Um welche Art von Website handelt es sich beispielsweise? Wie wichtig ist ein bestimmter Inhalt auf der Seite?

Es gibt so viele mögliche Variationen, wie und wo Inhalte platziert werden sollen. Es gibt aber dennoch einige Tipps, die es zu beachten gilt. Am grundlegendsten ist es, zunächst zu entscheiden, welche Wirkung Ihr Design erzielen soll. Erstellen Sie beispielsweise eine Website, auf der Dinge verkauft werden? Ist es für die Inhaltsanzeige? Oder erstellen Sie eine Benutzerregistrierungsseite? Werbeseite? Warten Sie...

Business by Design: 37Signals
Schauen Sie sich diese beliebte Website von 37 Signals an. Es ist nicht nur Glück, dass sich ihre Sachen so gut verkaufen. Ihre Website macht es Ihnen so einfach wie möglich, mehr über ihre Produkte zu erfahren und Ihnen bei Ihrer endgültigen Entscheidung zu helfen. Alles, was Sie sehen, ist exquisit gestaltet und präsentiert.

Wie im Bild gezeigt, bieten sie Ihnen vier Gründe, ihre Produkte zu kaufen. Aufmerksamkeit erregen ist der erste Schritt. Sie haben einen schwarzen Bereich erstellt, eine kurze Einführung zum Produkt eingefügt und einen fetten Titel verwendet. Anschließend verwenden sie einige schöne Illustrationen, um Ihr Interesse zu wecken (Interesse) und die Vorteile des Produkts vorzustellen. Dann möchten sie Sie zum Kauf bewegen, was sie durch die Platzierung von Kundenbewertungsangeboten und Produktauszeichnungszertifikaten erreichen können. In diesem Fall taten sie dies durch mehrere Videos mit dem Titel „Was unsere Kunden zu sagen haben“. Das Letzte, was erreicht werden soll, ist die Förderung von Kaufaktionen (Aktion); die Website von 37Signals verfügt über eine große Anzahl von Aktionspunkten (Links, die Benutzer zum nächsten Schritt führen), da die Seite sehr lang ist und mehr Aktionspunkte aufweist Am Ende der Seite sind viele Aktionspunkte platziert.

Hochwertiges Webdesign und Fähigkeiten Nr. 4 (Organisation von Elementen)

Entworfen für Inhalte (Blog): Well Medicated
Ganz anders sieht es bei der Gestaltung von Blogseiten aus. Sie müssen nicht hart arbeiten, um Ihre Benutzer davon zu überzeugen, Ihrem Produkt zu vertrauen, Ihr „Produkt“ wird ihnen bereits angezeigt – also Ihr Blog-Inhalt. Sie müssen lediglich sicherstellen, dass Benutzer Ihre Artikel problemlos lesen, den Inhalt erkunden und sich mit Ihnen und Ihrem Blog verbinden können.

Der Inhalt sollte (einer) der ersten Teile Ihres Blogs sein, die den Lesern angezeigt werden. Im folgenden Beispiel erregt ein fetter rosa Titel Ihre Aufmerksamkeit und leitet Sie direkt zum Inhalt des Artikels. Auf der linken Seite befindet sich ein Vorschaubild in geeigneter Größe und auf der rechten Seite befinden sich zwei oder drei Absätze mit einer Artikelzusammenfassung und ein Link zum Weiterlesen. Natürlich gibt es auch die Standard-Datums- und Autorenangaben. Dies ist ein perfektes Beispiel dafür, was ich als „Content-Design“ bezeichne. Die Aufmerksamkeit kann auf alles Interessante gelenkt werden. In diesem Beispiel steht der schöne RSS-Abonnement-Button im Mittelpunkt. Ganz zu schweigen davon, dass dieser Fokus den Lesern das Gefühl gibt, mit dem Inhalt verbunden zu sein, aber er trägt auch dazu bei, dass die Website mehr Abonnements gewinnt. Um Ihre Leser zum Erkunden Ihrer Inhalte zu ermutigen, müssen Sie lediglich eine Liste mit Links zu Ihren neuesten oder beliebtesten Artikeln in der Seitenleiste hinzufügen, ein Dropdown-Menü erstellen oder eine effiziente Liste anderer Inhalte organisieren, die Sie verbreiten möchten. Es ist einfach durchzuführen, aber dennoch effektiv genug, insbesondere für Blogger. Ein Blog ist eine private Domain, wenn Sie den Lesern Ihre Kontaktinformationen (Connect) über verschiedene Kanäle mitteilen. Dies kann ihnen helfen, Sie zu verstehen, und es kann auch unerwartete Vorteile mit sich bringen.

Hochwertiges Webdesign und Fähigkeiten Nr. 4 (Organisation von Elementen)

Tipps zum Organisieren Ihrer Inhalte
Natürlich kann es vorkommen, dass Sie die Regeln brechen und etwas Ungewöhnliches tun müssen, aber Sie können diese einfachen Tipps trotzdem befolgen . Um eine gute Inhaltsstruktur und Lesereihenfolge sicherzustellen.

Warum entwerfen Sie?
Bestimmen Sie, wie oben erwähnt, das Ziel des Entwurfs.
Verwenden Sie Raster
Raster helfen Ihnen, das Beste aus Ihren Seiten herauszuholen.
Elementposition testen
Untersuchen Sie die Benutzerfreundlichkeit des Inhalts aus Besuchersicht.
Alle unnötigen Elemente entfernen
Unnötige Dinge sollten eliminiert oder zumindest nicht an auffälligen Stellen platziert werden
Ausgewogenheit der Aufmerksamkeit
Manche Dinge müssen vereinfacht werden, damit andere Dinge heller leuchten

Das Obige ist der Inhalt des vierten hochwertigen Webdesigns und der Fähigkeiten (Organisation von Elementen). Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!


Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Entdecken Sie die einzigartigen Vorteile der absoluten Positionierung im Webdesign Entdecken Sie die einzigartigen Vorteile der absoluten Positionierung im Webdesign Jan 23, 2024 am 08:16 AM

Entdecken Sie die einzigartigen Vorteile der absoluten Positionierung im Webdesign. Im Webdesign ist die absolute Positionierung eine häufig verwendete Layoutmethode. Durch die Verwendung der absoluten Positionierung können Elemente präzise an bestimmten Stellen auf der Webseite platziert werden und einige spezielle Layouteffekte lassen sich leicht erzielen. Dieser Artikel untersucht diese Vorteile und veranschaulicht sie anhand konkreter Codebeispiele. Präzise Positionierung von Elementen Die absolute Positionierung ermöglicht eine präzise Steuerung der Position von Elementen auf einer Webseite. Durch Angabe der oberen, rechten, unteren und linken Attribute des Elements kann das Element sein

Webdesign-Fähigkeiten und praktischer Erfahrungsaustausch basierend auf CSS3 Webdesign-Fähigkeiten und praktischer Erfahrungsaustausch basierend auf CSS3 Sep 08, 2023 pm 07:07 PM

Vermittlung von Webdesign-Fähigkeiten und praktischen Erfahrungen auf Basis von CSS3 Im heutigen Internetzeitalter wird Webdesign immer wichtiger. Mit der Einführung von CSS3 können Designer nun eine Vielzahl beeindruckender Effekte nutzen, um Benutzer anzusprechen. In diesem Artikel werden einige auf CSS3 basierende Webdesign-Fähigkeiten und praktische Erfahrungen vermittelt, um den Lesern dabei zu helfen, ihr Webdesign-Niveau zu verbessern. 1. Verwenden Sie Übergangseffekte, um sanfte Animationseffekte für Elemente von einem Zustand in einen anderen zu erzeugen. Durch die Verwendung der CSS3-Übergangseigenschaft können wir dies tun

So verwenden Sie das CSS-Positionslayout zum Entwerfen eines Kartenlayouts für Webseiten So verwenden Sie das CSS-Positionslayout zum Entwerfen eines Kartenlayouts für Webseiten Sep 28, 2023 am 08:17 AM

So verwenden Sie das CSSPositions-Layout zum Entwerfen von Kartenlayouts für Webseiten. Im Webdesign ist das Kartenlayout eine gängige und beliebte Designmethode. Es unterteilt den Inhalt in unabhängige Karten, jede Karte enthält bestimmte Informationen und kann leicht einen ordentlichen und vielschichtigen Seiteneffekt erzeugen. In diesem Artikel stellen wir vor, wie Sie das CSSPositions-Layout zum Entwerfen des Kartenlayouts einer Webseite verwenden, und fügen spezifische Codebeispiele bei. Erstellen Sie die HTML-Struktur. Zuerst müssen wir die HTML-Struktur erstellen, um das Kartenlayout darzustellen.

Untersuchen Sie die Auswirkungen der Einführung von CSS-Frameworks von Drittanbietern auf das Webdesign Untersuchen Sie die Auswirkungen der Einführung von CSS-Frameworks von Drittanbietern auf das Webdesign Jan 16, 2024 am 10:32 AM

Untersuchung der Auswirkungen der Einführung von Drittanbieter-Frameworks in CSS auf das Webdesign. Einführung: Mit der rasanten Entwicklung des Internets ist Webdesign immer wichtiger geworden. Um die Benutzererfahrung zu verbessern und umfangreichere Funktionen bereitzustellen, müssen Entwickler häufig Frameworks von Drittanbietern verwenden, um Design und Entwicklung zu unterstützen. In diesem Artikel werden die Auswirkungen der Einführung von CSS-Frameworks von Drittanbietern auf das Webdesign untersucht und spezifische Codebeispiele aufgeführt. 1. Was ist ein CSS-Drittanbieter-Framework? Ein CSS-Drittanbieter-Framework ist eine Reihe vordefinierter CSS-Stile und -Komponenten, die beim Erstellen einer Webseite direkt aufgerufen werden können. Diese Frameworks sind reich an Inhalten,

Anwendungsgebiete von Elementselektoren im Webdesign Anwendungsgebiete von Elementselektoren im Webdesign Jan 13, 2024 am 10:35 AM

Die Anwendung von Elementselektoren im Webdesign erfordert spezifische Codebeispiele. Im Webdesign sind Elementselektoren ein sehr wichtiger CSS-Selektor, der uns helfen kann, den Stil von Elementen auf Webseiten zu steuern und anzupassen. Durch den flexiblen Einsatz von Elementselektoren können verschiedene exquisite Webdesign-Effekte erzielt werden. 1. Grundlegende Syntax und Verwendung von Elementselektoren Der Elementselektor ist der einfachste Typ von CSS-Selektoren. Er wählt das entsprechende Element aus, indem er den Tag-Namen des HTML-Elements angibt. Die grundlegende Syntax des Elementselektors lautet: Tag-Name {

Eine einfache Anleitung: Erstellen Sie ein großartiges CSS-Framework, um die Professionalität und Schönheit Ihres Webdesigns zu verbessern Eine einfache Anleitung: Erstellen Sie ein großartiges CSS-Framework, um die Professionalität und Schönheit Ihres Webdesigns zu verbessern Jan 16, 2024 am 09:02 AM

In fünf Schritten erfahren Sie, wie Sie das perfekte CSS-Framework erstellen: Machen Sie Ihr Webdesign professioneller und schöner. Ein professionelles und schönes Webdesign zu pflegen ist der Traum eines jeden Webdesigners. Und die Etablierung eines perfekten CSS-Frameworks ist der Schlüssel zum Erreichen dieses Ziels. Das CSS-Framework besteht aus einer Reihe vordefinierter Stylesheets und Regeln, die Designern dabei helfen, schnell Webseitenlayouts und -stile zu erstellen. Heute stelle ich Ihnen eine fünfstufige Methode vor, die Ihnen bei der Erstellung eines perfekten CSS-Frameworks hilft. Die konkreten Schritte sind wie folgt: Schritt 1: Analysieren Sie die Anforderungen und legen Sie zu Beginn die Rahmenstruktur fest

Wie sieht H5 aus? Wie sieht H5 aus? Apr 01, 2025 pm 05:29 PM

HTML5 (H5) ist die fünfte Version von HTML, die die Flexibilität und Funktionalität der Webentwicklung verbessern soll. Die Hauptmerkmale von H5 sind: 1) neue semantische Tags wie et al.; 2) Eingebettete Audio- und Videounterstützung, wie z. B. et al.; 3) API von Leinwand zeichnen; 4) Geolocation API. Diese Funktionen werden über die JavaScript -Engine des Browsers implementiert, wodurch Webseiten dynamischer und interaktiver werden.

So verwenden Sie die CSS3-Technologie, um coole Webseiteneffekte zu erstellen So verwenden Sie die CSS3-Technologie, um coole Webseiteneffekte zu erstellen Sep 11, 2023 pm 12:54 PM

Wie man mithilfe der CSS3-Technologie coole Webseiteneffekte erstellt. Mit der Entwicklung des Internets wird Webdesign immer wichtiger. Das Aufkommen der CSS3-Technologie hat Webdesignern mehr Inspiration und kreativen Raum gebracht. CSS3 verfügt über umfangreiche Funktionen und Effekte, mit denen sich problemlos coole Webseiteneffekte erzielen lassen. In diesem Artikel werden einige häufig verwendete CSS3-Funktionen vorgestellt und anhand von Beispielen gezeigt, wie diese Funktionen zum Erstellen cooler Webseiteneffekte verwendet werden können. Randeffekt Rand ist ein häufiges Element im Webdesign. Mit der Randfunktion von CSS3 können Sie dem Rand weitere Effekte hinzufügen.

See all articles