Die grafische Charta<\/h2>\nWas ist eine grafische Charta?<\/h3>\n
Die Grafikcharta ist ein wichtiges Dokument, das von einem Designer erstellt wird und alle Regeln enth\u00e4lt, auf denen die Visual Identity Ihres Unternehmens<\/a> beruht oder beruhen wird. Sie dient als Leitfaden f\u00fcr alle, die etwas f\u00fcr Sie entwerfen, einschlie\u00dflich der Webagentur, der Sie die Gestaltung Ihrer Website anvertrauen.<\/p>\n Die Grafikcharta hat den Zweck, eine grafische Abstimmung zwischen all Ihren Touchpoints mit Kunden oder Partnern zu schaffen: Dies beinhaltet z.B. Visitenkarten, Flugbl\u00e4tter, Werbemittel, Fahrzeuge, E-Mail-Signaturen und nat\u00fcrlich auch auf Ihre Website. Internetnutzer, Kunden und Lieferanten k\u00f6nnen dadurch auf einen Blick erkennen, dass es sich um Sie, Ihre Website oder ein von Ihnen ausgestelltes Dokument handelt, da sich Ihre Corporate Identity bereits in deren Ged\u00e4chtnis eingepr\u00e4gt hat<\/strong>.<\/p>\n Das Logo und die Art und Weise, wie es verwendet wird, spielen in der grafischen Charta eine wichtige Rolle.<\/p>\n Ein wirksames Logo ist in der Regel einfach, originell, leicht zu erkennen und spiegelt die Besonderheiten Ihres Unternehmens wider.<\/em><\/p>\n Das Logo ist meist das Erste, was ein Nutzer anschaut. Es repr\u00e4sentiert das Gesamtbild des Unternehmens, indem es seine Werte und Verdienste widerspiegelt. Zu diesem Zweck muss das Logo hervorgehoben und oben auf der Seite platziert werden. Es ist zu beachten, dass das Logo nicht nur f\u00fcr die Optimierung der visuellen Qualit\u00e4t unverzichtbar ist. Es spielt auch eine wichtige Rolle bei der Verbesserung der Qualit\u00e4t der Navigation, wodurch es die User Experience verbessern kann. Daher ist es wichtig, sicherzustellen, dass das Logo Besucher automatisch auf die Startseite der Website zur\u00fcckbringen kann.<\/p>\n Farbe hat einen Einfluss, der \u00fcber das Erscheinungsbild der Website und das Image Ihres Unternehmens hinausgeht. Sie schafft eine Atmosph\u00e4re und hilft, Inhalte zu strukturieren. Dabei besteht das Ziel nat\u00fcrlich auch darin, dass sich der Nutzer Ihrer Website Ihre Farben leicht merken und erkennen kann. Obwohl die Nuancen unendlich sind, ist hier weniger oft mehr! Begn\u00fcgen Sie sich mit einigen wenigen Farben, die auch an Ihre verschiedenen Medien angepasst werden k\u00f6nnen.<\/p>\n Ma\u00dfgeschneiderte Elemente wie Icons, Illustrationen oder Fotos k\u00f6nnen Ihre visuelle Identit\u00e4t zus\u00e4tzlich zum Logo zu verst\u00e4rken. Um sicherzustellen, dass diese grafischen Elemente Ihr Image in den K\u00f6pfen der Internetbenutzer widerspiegeln, sollten Sie dar\u00fcber nachdenken, deren Verwendung in Ihrer grafischen Charta festzuhalten. Der einfachste Weg, sie im Ged\u00e4chtnis Ihrer Nutzer zu verankern, besteht darin, diese Elemente regelm\u00e4\u00dfig an allen User Touchpoints anzuzeigen.<\/p>\n Die Wahl der Typografie ist nicht auf die leichte Schulter zu nehmen.<\/strong> Jede Schriftart hat ihren eigenen Charakter. Je nach Ihrem Zielpublikum und der Botschaft, die Sie vermitteln m\u00f6chten, werden Sie sicherlich eine Schriftart der anderen vorziehen. Durch die Auswahl verschiedener Gr\u00f6\u00dfen und Formen k\u00f6nnen Sie Ihrer Website Relief hinzuf\u00fcgen und Ihrem Inhalt Struktur geben. Es ist jedoch wichtig, dabei immer den Komfort des Lesens zu gew\u00e4hrleisten.<\/p>\n Selbst wenn Sie volles Vertrauen in Ihre Web-Agentur haben, k\u00f6nnten Sie ihr zu Beginn des Projekts einige Ideen f\u00fcr die Art des Designs geben, das Ihren W\u00fcnschen und Bed\u00fcrfnissen entspricht. Hier finden Sie einige aktuelle Trends im Webdesign:<\/p>\n Jeder gute Webdesigner muss sich bewusst sein, dass ein ausgezeichneter kreativer Geist nicht ausreicht, um eine professionelle Website zu erstellen. <\/em><\/p>\n Ein Gitter oder Raster ist die Grundlage f\u00fcr viele gute Praktiken im Webdesign. Eine gut strukturierte Vorlage kann den Unterschied ausmachen, um dem Auge den Weg auf der Seite zu erleichtern. Das Raster bietet dann einen echten Lesekomfort f\u00fcr Ihre User.<\/p>\n Den Augen die Bewegung auf der Webseite zu erleichtern und das Lesen angenehmer zu machen. Das ist der Zweck der Verwendung eines Rasters. Es gibt dabei verschiedene Modelle f\u00fcr User Interfaces. Vertikale und\/oder horizontale Achsen bilden das grundlegende Raster. Um den Inhalt zu strukturieren, werden die Achsen durch Intervalle, „Rinnen“ genannt, voneinander getrennt.<\/p>\n Internetnutzer warten wirklich nicht gerne, bevor sie auf Informationen zugreifen k\u00f6nnen. Die M\u00f6glichkeit, Seiten in L\u00e4ngsrichtung zu betrachten, wird daher als perfekte L\u00f6sung angesehen. Mit nur wenigen Mausklicks haben die User Zugang zu allen Informationen. In \u00e4hnlicher Weise wird den Internetnutzern durch die Fixierung der des Headers und der Top Navigation der Website ein langer Weg zur\u00fcck zum Anfang der Seite erspart.<\/p>\n Der Call-to-Action<\/strong>, auf Deutsch als „Aufruf zum Handeln“ \u00fcbersetzt, sind Mittel, die den Nutzer dazu anregen sollen, verschiedene von der Website vorgeschlagene Aktionen vorzunehmen. Typischerweise werden diese Aktionen als Buttons angezeigt, die strategisch so platziert sind, dass sie von den Besuchern gut wahrgenommen werden. Die vorgeschlagenen Aktionen werden speziell vom Webdesigner ausgew\u00e4hlt, um den Nutzer l\u00e4nger auf der Website zu halten, zu einer Conversion zu bringen oder an das Unternehmen zu binden. Dies beinhaltet z.B. die Anmeldung f\u00fcr einen Newsletter, das Hinzuf\u00fcgen von Artikeln zum Warenkorb oder das Liken von Social-Media Kan\u00e4len des Unternehmens.<\/p>\n Webdesign hat nicht nur die Aufgabe, das Lesen von Inhalten und Informationen zu vereinfachen. Es geht auch darum, User m\u00f6glichst schnell zum Ziel der Website zu f\u00fchren und dadurch daf\u00fcr zu sorgen, dass sie immer wieder zur\u00fcckzukommen. Die Integration einer Suchmaschine in die Website erm\u00f6glicht es Internetnutzern dann, die gew\u00fcnschten Informationen leicht zu finden und auf sie zuzugreifen. Wenn Sie es Ihren Nutzern vereinfachen, Medien oder Produkte auf Ihrer Website zu finden, wird Ihre Seite die erste Wahl Ihrer Kunden sein!<\/p>\n \u201cWireframing<\/a>“ oder Website-Modellierung ist ein wesentlicher Schritt bei der Erstellung Ihrer Website. Diese Modelle sind eine Art Skizze, die es Ihnen erlaubt, die folgenden Aspekte schematisch zu visualisieren:<\/p>\n Das Ziel besteht darin, den roten Faden der Entwurfsphasen so einzurichten, dass alle Beteiligten: Sie, die Webagentur oder die Webdesigner und -entwickler, sich bestm\u00f6glich abstimmen k\u00f6nnen.<\/p>\n Das Funktionsmodell, auch als „Wireframe“ bekannt, ist die erste Aufgabe, die den Beginn der Erstellung einer Website darstellt. Sie besteht darin, auf einer schwarz-wei\u00dfen Seite die verschiedenen Elemente und Hauptinhalte der Webseite anzuordnen und zu organisieren. Balsamiq<\/a> zum Beispiel ist eine der bekanntesten funktionalen Modellierungssoftwares, die Ihnen dabei hilft.<\/p>\n Bei der Modellierung werden Sie wahrscheinlich die folgenden Techniken nutzen:<\/p>\n Diese Phase folgt auf die funktionelle Modellierung. Dabei werden mehr Details in das Erscheinungsbild der Website eingebracht: Farben, Logo, Formen, Texte, usw. Dadurch werden die funktionellen Inhalte grafisch angereicht und f\u00fcr den Nutzer attraktiver gemacht. In der Regel wird das grafische Modell mit Grafikdesign-Software wie Adobe Photoshop oder Illustrator<\/a> erstellt.<\/p>\nIhr Logo<\/h3>\n
Farbcodierung<\/h3>\n
Visuelle Elemente<\/h3>\n
Schriftart<\/h3>\n
Das Design der Website<\/h2>\n
![\"Website](\"https:\/\/blog.sortlist.de\/wp-content\/uploads\/2020\/12\/content_design_site_web.jpg\")
<\/p>\nArt des Designs<\/h3>\n
\n
Verwendung eines Gitters<\/h3>\n
![\"Website](\"https:\/\/blog.sortlist.de\/wp-content\/uploads\/2020\/12\/designer-to-web-1.jpg\")
<\/p>\nEin cleverer Header<\/h3>\n
Erstellen von CTAs<\/h3>\n
Suchmaschine<\/h3>\n
Seitenlayouts<\/h2>\n
Was ist ein Seitenlayout?<\/h3>\n
\n
![\"Website](\"https:\/\/blog.sortlist.de\/wp-content\/uploads\/2020\/12\/pexels-picjumbocom-196645-scaled.jpg\")
<\/p>\nFunktionelles Modell<\/h3>\n
\n
Grafisches Modell<\/h3>\n
Wer wird Ihr Webdesigner?<\/h2>\n