Webdesign Webagentur


Webdesign bezeichnet die Gestaltung (Design) einer Website in visueller, struktureller und funktionaler Hinsicht. Weitere Elemente des Webdesigns sind User Interface Design (UI), User Experience Design (UX), Suchmaschinenoptimierung (SEO) sowie Content Management.

Ziel des Webdesigns ist es, die Website zum Zentrum der Online-Aktivitäten zu mach.

Was macht gutes Webdesign aus?

Ein gutes Webdesign sollte immer auf die Bedürfnisse und Ziele der Zielgruppe und der Nutzer in allen Phasen der Customer Journey abgestimmt sein. Je benutzerfreundlicher und zielgerichteter das Webdesign ist, desto höher ist die Konversionsrate (Conversions) und desto höher ist das Ranking der Website bei Google.

  • Klar strukturiertes Layout - visuelle Ausgewogenheit und ausreichend Weissraum
  • Einheitliche, konsistente Strategie sowie Rhythmus der visuellen Elemente (Benutzerfreundlichkeit, Wiedererkennungswert)
  • Intuitive und unkomplizierte Benutzerführung
  • Einige Highlights - aufmerksamkeitsstarke Videos/Bilder
  • Weniger ist mehr - zu viele visuelle Elemente können verwirrend sein
  • Kurze Ladezeiten
  • Visuelle Hierarchie und klare Benutzerführung
  • Klare Call-to-Action-Strategie zur Benutzerführung
  • Responsive Design (optimiert für Desktop und Handy)

Zusammenfassend lässt sich sagen, dass es bei gutem Webdesign darum geht, die Ziele und Bedürfnisse der Zielgruppe zu erfüllen.

Hier sind Ästhetik, Freiraum und eine klare Struktur wichtig.

 

Responsive Design

Mit responsive («reagierendes») Design ist ein Webdesign gemeint, welches sich an die Bildschirmgrösse des Endgeräts anpasst. Je nach Grösse des Bildschirms, werden die Elemente der Website, z.B. Bilder, Texte, Grafiken in anderen Grössen und Formen angezeigt, oder auch ganz weggelassen.

Ziel des responsive Design ist es, der Zielgruppe die bestmögliche Ansicht der Website zu ermöglichen. Neben gestalterischen Elementen spielt die Frage des Page Speed (Seitenladegeschwindigkeit) im Bereich der mobilen Website eine zentrale Rolle. Je langsamer die Website geladen wird, desto grösser ist die Gefahr, dass der Nutzer von der Website abspringt und damit die Absprungrate steigt.

 

Funktionale Elemente

Funktionale Elemente des Webdesigns sind verantwortlich für Bedienbarkeit (User Interface) und die Schnelligkeit (Pagespeed) der Website. Ziele des funktionalen Webdesigns sind die Erstellung eines User Interfaces welches eine hohe User Experience schafft, sodass der Nutzer zufrieden mit der Benutzerführung ist und sich intuitiv zurechtfindet.

Die wichtigsten funktionalen Elemente des Webdesigns sind:

Navigation und Layout

Navigation und Layout sind zentrale Elemente welche an die Erwartungen der Zielgruppe, den zu erreichenden Zielen sowie an die User Experience ausrichten sollen. So wird z.B. das Webdesign eines Stararchitekten im Layout und in der Benutzerführung anders sein als das Webdesign eines Schuhgeschäfts in der Vorstadt, da die Erwartungen der Zielgruppe komplett unterschiedlich sind.

Pagespeed, Website Geschwindigkeit, Performance

Verkürzte Ladezeiten sind ein Faktor, um die Nutzererfahrung und die Google-Rankings so weit wie möglich zu verbessern. Die Erwartungen der Nutzer an kürzere durchschnittliche Wartezeiten steigen von Jahr zu Jahr, und die Seitengeschwindigkeit wird in Zukunft entsprechend wichtiger werden.

Geräte- und Browserkompatibilität

Das Webdesign muss die gängigsten Betriebssysteme (Windows, iOS, Android) sowie die meistbenutzen Bildschirmgrössen abdecken. Ziel ist, dem Benutzer die grösstmögliche Funktionalität zu gewähren.

 

Visuelle Elemente

Farbschemata

Das menschliche Auge erkennt zuerst Farben einer Website. Farbschemen und Farben sind das erste, was die Menschen mit einer Marke assoziieren, und es ist auf den ersten Blick offensichtlich, dass eine angemessene Farbgestaltung sehr wichtig ist.

Bei der professionellen Farbauswahl muss die Psychologie der Farben fast genauso berücksichtigt werden wie ihre visuelle Kraft.

Die wichtigsten Aspekte bei der visuellen Gestaltung des Webdesigns sind

  • Harmonie der Farben
  • Farbkombinationen
  • Animationen
  • Farbeffekte
  • Branchenspezifische und produktspezifische Farben

Als Farbanzahl sollten mindestens drei Farben gewählt werden.

  • Primärfarbe, die vorherrschende Farbe
  • Eine zweite Farbe, richtig platziert (psychologisch am wichtigsten)
  • Akzentfarben werden zur Hervorhebung verwendet (insbesondere für Click to Action CTA).

Typografie (Schriftarten und Schriftbilder)

Der wichtigste Faktor bei der Typografie und der Auswahl einer Schriftart ist die Lesbarkeit. Das bedeutet Lesbarkeit auf allen Geräten! Ansonsten ist die Wahl der Schriftart sehr ähnlich wie die Wahl der Farbe. Wie bei den Farben sollten Sie verschiedene Schriftarten sparsam verwenden, in der Regel drei Schriftarten.

  • Die häufigste Schriftart für Überschriften
  • Die am besten lesbare Schriftart für Fliesstext
  • Die verspieltesten Schriftarten für Akzente

Bild- und Videomaterial

Wir leben in einer Welt voller Bilder, Farben, Videos und kurzer Aufmerksamkeitsspanne.

Das Webdesign muss sich stark auf die Optik einer Website konzentrieren und mit starken Bilder und Videos die Aufmerksamkeit der Zielgruppe erreichen um z.B. ein Markenimage zu vermitteln. Alle Bilder, Videos und Grafiken müssen zielgerichtet und harmonisch sein, um das Gesamtbild der Marke zu verstärken.

Aufruf zum Handeln – call to action (CTA)

CTAs umfassen alles, was oben definiert wurde. Auch hier gibt es drei Varianten, die an verschiedenen Orten verwendet werden.

Primäre Buttons

Primäre Buttons (Schaltflächen) sind so gestaltet, dass sie am deutlichsten hervortreten und den Benutzer direkt zum Anklicken auffordern. Sie sind fett und sollten immer mit einer Farbe ausgefüllt werden, um sie hervorzuheben.

Sekundäre Buttons

Sekundäre Buttons (Schaltflächen) werden auch als "Geistertasten" bezeichnet. Sie sind diskreter, haben transparentere Farben und nur einen Rand. Ziel ist es, den Fluss des Textes nicht zu unterbrechen und dem Nutzer trotzdem die Möglichkeit zu geben, mehr zu erfahren.

Tertiäre Buttons

Der tertiäre Button (Schaltfläche) ist die am wenigsten diskrete und besteht in der Regel nur aus Text ohne Umriss oder Hintergrund. Sie werden aus Gründen der Lesbarkeit verwendet, in der Regel zum Löschen und Schliessen, aber auch für Einzahlungsanfragen und Autorenlinks.

 

Webdesign mit Standard Layout

In den letzten Jahren haben sich im Webdesign Standards entwickelt. Insbesondere durch die weite Verbreitung von Standard-Templates entwickelten sich Design-Standards, wie z.B.

  • Header-Bereich, meistens mit einem Header-Bild in voller Bildschirmbreite, z.B. Fotohintergrund
  • Header-Navigation, hier ist das Menü der Website, also das zentrale Inhaltsverzeichnis
  • Body, Inhaltsbereich, 
  • Ein zentrierter H1-Text mit einem CTA-Button
  • 3 Spalten mit kurzem Fliesstext
  • Am Fussende (Footer) Kontaktdaten mit dem Kontaktformular

 

Web­design

Der Ablauf eines Domaintransfers hängt hauptsächlich von der Endung Ihrer Domain ab.
Für die gängisten Domains haben wir Ihnen die entsprechenden Abläufe hier zusammengestellt.

Allgemein

Nachdem Sie eine Bestellung bei uns getätigt haben, erhalten Sie automatisch eine Rechnung per E-Mail. Nach Zahlungseingang werden Sie von uns per E-Mail über die Einleitung des Transfers benachrichtigt und erhalten einen Informations-Link für das weitere Vorgehen des Transfers. Für viele Transfers wird ein Auth-Code benötigt. Diesen erhalten Sie von Ihrem Altprovider. Domaintypische Transferinfos finden Sie hier.

Was macht eine gute Webadresse aus?

Welche Fehler Sie vermeiden sollten und welche Tricks Vorteile bringen.

Webadressen in Werbung und Marketing

Das sollten Sie tun, ...

  • Sichern Sie sich nach Möglichkeit Ihren Firmen- oder Markennamen als .de-Domain.
  • Ist Ihr Firmenname schon vergeben, suchen Sie sich lieber gleich einen neuen. Eine .net- oder .eu-Adresse ist kein Ersatz.
  • Wenn Sie eine Kampagne starten, benutzen Sie den Slogan für die URL.
  • Benutzen Sie unterschiedliche Farben oder Fettungen, um Wörter voneinander abzusetzen.
  • Bindestriche sind vor allem bei Slogans sinnvoll, damit sich die einzelnen Wörter gut voneinander abheben.
  • Richten Sie Subdomains für Unterseiten ein, auf die Sie hinweisen wollen.

... das besser lassen.

  • Sparen Sie sich das www. vor der Webadresse.
  • Das https:// nimmt nur Platz weg – lassen Sie es weg.
  • Komplett klein geschriebene Adressen sind bei zusammengesetzten Begriffen nur schwer lesbar.
  • Hüten Sie sich vor URLs, die vollständig aus Großbuchstaben bestehen.
  • Lassen Sie die Finger von Umlaut-Domains.
  • Verkneifen Sie sich Werbung mit Links auf Unterseiten.
  • Abkürzungen, Akronyme oder Ziffern taugen nicht für URLs, es sei denn, Ihre Marke ist allgemein bekannt dafür.
  • Verstecken Sie Ihre Webadresse nicht irgendwo klein ganz unten. Niemand wird mit der Lupe danach suchen.

Schritt für Schritt zur eigenen Emailadresse

Sie haben ein Hosting für eine Domain (folgend nennen wir diese beispiel.ch) und möchten nun eine Emailadresse einrichten - wir nennen diese Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein! , wobei dies natürlich nur zu Anschauungszwecken gilt.

Grundlagen

Als erstes müssen einige Grundlagen festgelegt werden, damit Sie diese Anleitung auch richtig nutzen können.

Emailadresse können in zwei grundverschiedenen Formen existieren:

Ein Postfach ist ein virtueller Briefkasten. Nachrichten an die Emailadresse werden auf einem Server abgelegt und aufbewahrt, bis Sie diese abrufen.

Eine Weiterleitung ist ähnlich einem Nachsendeantrag bei der Post - die Weiterleitung reicht alle eingehenden Mails weiter, ohne diese zu speichern - eine Weiterleitung (manchmals auch Email Alias genannt) kann nicht abgerufen werden, nur das Zielkonto erhält die Emails und speichert diese.

 

 

Kontaktieren Sie uns

und erfahren Sie mehr.

Ihr Anschrift
Ihre Angaben
Mitteilung

Von Montag bis Freitag, 9.00–17.00 Uhr

Für Sie da!

dynamic-duo
webdesign/-publishing
Alte Landstrasse 1
8707 Uetikon am See

Publish the Menu module to "offcanvas" position. Here you can publish other modules as well.
Learn More.