10 Einsteiger-Tipps für erfolgreiches Webdesign

    Inhaltsverzeichnis:

 title=

Was ist Webdesign?

Webdesign, oder Webgestaltung genannt, ist ein Berufsbereich des Mediengestalters. Speziell Webdesign umfasst die gesamte visuelle, funktionale und strukturelle Umsetzung einer Webseite.

Für die Besucher einer Webseite ist es nicht erkenntlich, wie viel Arbeit und Aufwand dahinter steckt. Überwiegend ist den Unsern wichtig, dass die Seite funktioniert und sie zu Ihrem Ziel kommen. Der User würde sich nicht annähernd so wohl fühlen, wenn kein Webdesign vorhanden wäre. Oftmals nehmen Nutzer, die sich in der Branche nicht auskennen, den Aufwand hinter einer Webseite nicht wahr.

Webdesign ist wichtiger als je zuvor, mittlerweile wird der Onlineauftritt stetig wichtiger und muss präsent und funktional dargestellt werden. Aus diesem Grund möchten wir Dir mit dieser Themenwelt den Einstieg ins Webdesign erleichtern. Sie soll Dir helfen, dass der User Deiner Webseite angesprochen wird, sich wohlfühlt, zurechtkommt und wiederkehrt.

10 Einsteiger-Tipps für erfolgreiches Webdesign

Im Folgenden erfährst Du 10 wichtige Grundregeln für den Aufbau einer Webseite mit erfolgreichem Webdesign:

1. Domain überlegen und sichern

Du solltest Dir darüber bewusst sein, dass Deine Webseite Dein Unternehmen oder Deine Marke präsentiert. Zu einem professionellen und vor allem seriösen Auftritt gehört eine vertrauenswürdige Domain.

Eine universelle Empfehlung in der Online-Welt ist KISS.

1Kiss-Grafik-Themenwelt-Webdesign

KISS ist die Abkürzung von: „keep it short and simple“.

Kurz gesagt: Kürzere Domains sind einfacher zu merken und bleiben länger im Gedächtnis. Du solltest darauf achten, dass Deine Domain nur einer möglichen Schreibweise entspricht. Falls das nicht der Fall ist, könnte es Dir passieren, dass mögliche potenzielle Nutzer Deine Webseite nicht finden und Dein durchdachtes Webdesign verborgen bleibt. Deine Domain sollte für Deine Marke oder für Dein Unternehmen stehen und dessen Leistung erklären, sobald Du diese hörst oder liest.

www.sophies-photoparadies-mtk.de

Hier siehst Du ein Beispiel für eine negativ auswirkende Domain. Folgende Punkte sind bei dieser Domain zu kritisieren:

  • Durch die gewählten Worte sind mehrere Schreibweisen möglich
  • Lange Domain, die Du definitiv kürzer und aussagekräftiger formulieren kannst
  • Es ist nicht erkenntlich, dass Sophie sich auf Hochzeitsfotografie spezialisiert hat
2Domain-Sophie-Grafik-Themenwelt-Webdesign2

Diese Grafik veranschaulicht Dir die möglichen Schreibweisen der gewählten Domain, die bei jedem potenziellen User als selbstverständlich klingen können. Am Ende zeigt Dir die Grafik einen optimalen Änderungsvorschlag, der die oben aufgeführten Kritikpunkte berücksichtigt.

www.wäscheservice.de

Hier siehst Du ein weiteres Beispiel für eine schlecht gewählte Domain. Folgender Punkt ist bei dieser Domain zu kritisieren:

  • In der Domain ist ein Umlaut vorhanden. Umlaute gibt es in anderen Sprachen nicht. Dieser Umlaut wird als Canonical ausgegeben.
3Wascheservice-Grafik-Themenwelt-Webdesign3

In dieser Grafik siehst Du die Veränderung von der gewählten Domain und wie sich das Canonical bemerkbar macht. Am Ende haben wir Dir noch einen potenziellen Änderungsvorschlag platziert, der den oben aufgeführten Kritikpunkt berücksichtigt.

Untenstehend findest Du ein Beispiel, für eine professionell gewählte Domain. Folgende Punkte sind an dieser Domain durchdacht:

www.omt.de
  • OMT wird als Marke präsentiert und rankt mit Keywords

Du solltest Dich entscheiden, ob Du als Marke (wie der OMT) auftreten möchtest oder ob Du mit Brand Building auf reine Keywords gehst, damit Du schnell und erfolgreich rankst.

2. Weißraum als Gestaltungselement

Jeden freien Platz auf der Webseite zu nutzen um Inhalte, Links oder Fotos zu platzieren ist verlockend, aber definitv nicht sinnvoll. Der Weißraum im grafischen Webdesign kreiert Harmonie, Struktur und Gleichgewicht. Weißraum bildet ein fundamentales Element bei der Webseitenerstellung.

Durch Einhaltung dieses Tipps ist die Lesbarkeit auf der Webseite gewährleistet und verschafft dem User einen angenehmen Lesefluss. Hier spricht man von einer visuellen Atempause des Users. Ebenfalls ist das gesamte Erscheinungsbild des Webdesigns verbessert. Der Weißraum balanciert und separiert, grafische und textuelle Elemente separat aus. Die Wahrnehmung der einzelnen Elemente wird verstärkt und das wirkt sich positiv auf das gesamte Erscheinungsbild und die Effektivität der Webseite aus. Laut Statistiken nehmen User, den Inhalt von Webseiten mit größerem Weißraum, um 20% mehr wahr.

3. Suchfunktion einbauen

Du solltest Dir darüber klar sein, dass eine Suchfunktion auf Deiner Webseite, die mit Deinem Webdesign harmoniert, vorhanden sein sollte. Viele Webdesigner unterschätzen, wie wichtig für die User der Webseite eine solche Suchfunktion ist. Heutzutage sind User oftmals in Eile und haben nicht die Zeit sich einen langen Artikel durchzulesen.

Im schlimmsten Fall verlassen diese potenziellen User die Webseite ohne fündig geworden zu sein. Um diese User überhaupt nicht erst zu verlieren, ist eine Suchfunktion ab Grundaufbau der Webseite zu empfehlen. Diese Suchfunktion muss prominent und direkt erkenntlich platziert werden, sodass der User sofort auf diese aufmerksam wirkt.

4Suchleiste-Grafik-Themenwelt-Webdesign4

4. Wireframe erstellen

Sobald Du über das Webdesign einer Webseite nachdenkst, solltest Du Dir Gedanken darüber machen, wie Du Deine Webseite aufgebaut haben möchtest. Lass Dich bei der Ideenfindung auch von anderen Webseiten und deren Webdesign inspirieren. Es ist hilfreich, dass Du Dir Webseiten notierst, die Deiner Meinung nach ein ansprechendes Erscheinungsbild haben, worauf Du dann bei deiner Ideenfindung zurückgreifen kannst. Nachdem Du Dir einige Webseiten angesehen hast, entwickelst Du Deinen eigenen Geschmack und merkst schnell, was für eine Richtung Du einschlagen möchtest. Sobald Du Dir darüber bewusst bist, solltest Du Dich damit beschäftigen einen Webseiten-Wireframe zu erstellen.

Als Wireframe wird ein konzeptioneller Entwurf einer Webseite in der Findungsphase bezeichnet, der die Struktur und Anordnung Deines zukünftigen Internetauftritts plant.  Dieser konzeptionelle Entwurf dient zukünftig als Grundgerüst für die Anordnung diverser Elemente, sodass diese einen bestimmten Zweck auf Deiner Webseite am besten erfüllen. Es ist irrelevant, ob Du Deine Webseite selbst programmierst oder ein Webentwickler. Denn ein Wireframe ist für beide hilfreich und von Vorteil. In einem Wireframe werden nur Positionen und Platzhalter definiert. Farben, Bilder oder Grafiken, die im Endeffekt verwendet werden, spielen noch keine Rolle. Es geht bei einem Wireframe nicht um Webdesign, sondern um die Konzeption Deiner Webseite – sprich die einzelnen Platzierungen verschiedener Elemente auf der Seite.

Dabei gibt es zwei Arten von Wireframes:

Statische Wireframes

Eine schematische Darstellung von einer einzelnen Webseite und deren Anordnung. Das Grundgerüst mit seinen Elementen wird festgehalten. Das Wireframe soll nur konzeptionell und kein vollendetes Design sein.

5Wireframe-Grafik-Themenwelt-Webdesign5

Hier siehst Du wie ein statischer Wireframe, sein Grundgerüst, durch die Vorgabe der Anordnung von Elementen darstellt.

Dynamische Wireframes

Bestehen aus mehreren einzelnen Seiten. Diese Seiten bilden einen funktionellen Prototypen, indem die einzelnen Seiten interaktiv miteinander verknüpft werden. Du kannst bei einem dynamischen Wireframe auch zwischen den einzelnen Seiten navigieren.

5. Richtige Schriftart für Dein Webdesign

Die richtige Schriftwahl im Webdesign spielt eine wichtige Rolle. Dank Google Fonts kannst Du mittlerweile nahezu jede Schrift im Web einbinden, denn die Zeiten, in denen Arial und Verdana die Webfonts noch dominierten, sind glücklicherweise vorbei. Es gibt trotzdem noch einige Kriterien, die Du berücksichtigen solltest:

Serifenschriften

Serifenschriften werden durch die sogenannte „Serife“, die feine Linie am Buchstabenstrich, die quer zur Leserichtung abschließt, erkannt. Eine der bekanntesten und begehrtesten Serifenschriften ist die „Times New Roman“. Der Ursprung der Serife kommt aus der Zeit, als Texte noch in Stein gemeißelt wurden. Dabei sind diese „Ausläufe“ am Buchstabenstrich entstanden, denn meißeln konnte man nie präzise. Heutzutage wird die feine Linie mehr oder weniger als ausschlaggebendes und dekoratives Element bei Serifenschriften gesehen.

6TNR-Grafik-Themenwelt-Webdesign6

Der Einsatzbereich dieser dekorativen Schriften liegt oftmals im Printbereich als Fließtext, denn die Serifen am Fuß der Buchstaben unterstützen das Auge bei der Zeilenbildung und stellen eine sogenannte Verbindung her.

Wenn Du Serifenschriften in Deinem Webdesign verwenden möchtest, solltest Du Dir eine Mindestgröße von 16px setzen. Wenn Du eine kleinere Schriftgröße nutzt, gehen die Details der Serifen verloren und die Lesbarkeit wird nicht mehr unterstützt.

Serifenlose Schriften

Serifenlose Schriften sind daran zu erkennen, dass die Strichstärke der einzelnen Buchstaben (nahezu) gleichmäßig ist und sie, wie der Name schon sagt, keine Serifen besitzen. In der Entstehungszeit widersprach das Weglassen der Serifen allen Gewohnheiten und wurde als durchaus reizvoll und sonderbar betrachtet.

7Avenir-Grafik-Themenwelt-Webdesign7

Der Einsatzbereich von serifenlosen Schriften ist sowohl online als auch offline gern gesehen. Sie sind universell einsetzbar (Überschriften, Fließtexte etc.) und sind auch in kleinen Schriftgrößen gut lesbar.

Serifenlose Schriften solltest Du bei Deinem Webdesign verwenden, um Deinem User besonders bei Fließtexten einen angenehmen Lesefluss zu ermöglichen.

Handschriften

Handschriften sollen bestenfalls eine realistische und handgeschriebene Optik widerspiegeln. Achte darauf, dass die einzelnen Buchstaben sich gut aneinanderfügen und somit echt aussehen, als wären die Wörter in einem Zug geschrieben.

8Scarlette-Grafik-Themenwelt-Webdesign8

Der Einsatzbereich von Handschriften ist sowie online als auch offline möglich. Jedoch ist zu empfehlen, diese überwiegend nur als Überschriften zu benutzen. Achte auch hier darauf, dass Du eine größere Schriftgröße wählst, sonst leidet die Lesbarkeit darunter. Jedoch kann es auch diverse Handschriften geben, die für Fließtexte konzipiert wurden und somit für eine Standardschriftgröße ausreichend ist. Das ist bei jeder Handschrift unterschiedlich und muss ggf. getestet werden. Handschriften sollten thematisch passend eingesetzt werden.

Wenn Du Handschriften bei Deinem Webdesign verwenden möchtest, dann nutze diese bestenfalls nur für Überschriften oder Highlights, denn bei einem Fließtext können diese schnell anstrengend wirken und den Lesefluss negativ beeinträchtigen.

Zierschriften

Zierschriften sind die restlichen Schriften, die Du nicht in die obenstehenden Kategorien einordnen kannst. Sie sind sehr speziell, weswegen Du bei der Benutzung vorsichtig sein solltest. Ebenfalls solltest Du auch hier beachten, dass Du sie thematisch passend verwendest.

9PhosphateGrafik-Themenwelt-Webdesign9

Der Einsatzbereich von Zierschriften ist sowie online als auch offline möglich, überwiegend als Eyecatcher (Logos). Jedoch ist zu empfehlen, diese auch nur für Überschriften zu benutzen. Achte auch hier darauf, dass Du eine größere Schriftgröße wählst, sonst leidet ebenfalls wieder die Lesbarkeit darunter.

Falls Du Zierschriften in Deinem Webdesign verwenden möchtest, solltest Du Dich daran halten sie nur als Eyecatcher beispielsweise für Überschriften zu verwenden.

6. Call to Actions auffällig und zielstrebig einbinden

Wer mit der eigenen Webseite erfolgreich sein möchte und sichergehen will, dass der User auf alle Angebote, Weiterbildungsmöglichkeiten und Blogs – sowieso Magazinartikel aufmerksam wird, sollte diese prominent bewerben und platzieren.

Man spricht bei möglichst auffälligen Elementen, die der User definitiv nicht übersieht, von sogenannten Handlungsaufforderungen. Diese nennt man im Webdesign auch: Call-to-Action Buttons, kurz gesagt: CTA’s. Überwiegend werden diese, wie der Name schon verrät, als Button eingesetzt – jedoch ist es auch möglich diese als Link wie: „Jetzt gratis testen“ einzusetzen. Diese Handlungsaufforderungen beziehen sich überwiegend darauf, eine sofortige Reaktion zu bewirken oder einen sofortigen Verkauf zu fördern.

7. Entscheide Dich für eine Bildwelt

Texte sind selbstverständlich das, was gelesen wird. Aber nicht umsonst gibt es das Sprichwort:

„Ein Bild sagt mehr als 1.000 Worte”

Bei einer erfolgreich gewählten Bildwelt verbindet unser Gehirn bestimmte Bilder direkt mit der zusammenhängenden Marke. Dadurch assoziieren wir bestimmte Eigenschaften und Gefühle damit. Genau das ist das Ergebnis von einer konsequent und erfolgreich durchgezogenen Bildwelt.

Bei der Planung einer Bildwelt solltest Du Dir folgende Punkte im Hinterkopf behalten:

  1. Unternehmen und Marken können durch erfolgreiche Bildwelten bestimmte Emotionen beim User hervorrufen.
  2. Auf emotionale Art und Weise transportiert eine konsequent durchdachte Bildwelt eine Botschaft.
  3. Bei einer erfolgreichen Bildwelt kann ein Unternehmen oder eine Marke schneller erfasst werden und somit langfristig in Erinnerung bleiben.

Zudem werden Bilder, die der User schön und ansprechend findet, in Social Networks öfters mit anderen Menschen und Kontakten geteilt. Damit steigt die Reichweite und Klickrate Deiner Webseite.

Stockfotos sind zwar eine Möglichkeit, allerdings sind diese meistens nicht ideal und oftmals auch als solche zu erkennen. Zudem musst Du dabei auch auf die rechtlichen Hinweise und Anforderungen achten. Deswegen bist Du immer auf der sicheren Seite, wenn Du Dir selbst die Mühe macht und eigene Fotos kreierst. Zudem hat das den Vorteil, dass Du dadurch Deine eigenen Ideen gestalterisch umsetzen kannst und Deine Webseite authentisch wirkt.

8. Briefe Deinen Webentwickler

Wenn Du jemanden hast, der für Dich Deine Webseite programmiert, dann solltest Du unbedingt ein Lasten und Pflichtenheft anlegen und vorbereitet haben. Das Lastenheft und das Pflichtenheft sind zwei vollkommen voneinander getrennte Dokumente!

Lastenheft – Dein Standpunkt

Im Lastenheft, das Du auch als Kundenspezifikation oder Anforderungskatalog betiteln kannst, definierst Du Deine gesamten Anforderungen, was Du von dem Projekt erwartest und genau haben möchtest. Du solltest Dir darüber bewusst sein, dass ein Webentwickler bestenfalls mit dem Lastenheft Deine gesamte Webseite inkl. Webdesign ohne Rückfragen aufbauen kann. Erst wenn Dein Lastenheft erstellt, präsentiert und abgegeben wurde, kann Dir der Webentwickler das Pflichtenheft erstellen.

Pflichtenheft –
Die Antwort des Webentwicklers auf Dein Lastenheft

Das Pflichtenheft bildet sozusagen die Antwort auf Dein Lastenheft und stellt in konkreter Form dar, wie der Webentwickler Deine Anforderrungen umsetzen kann. Zudem wird im Pflichtenheft das Ausschlussprinzip verwendet, das besagt, dass in konkreten Fällen Umsetzungen eingeschlossen oder ausgeschlossen werden können, um die Grundlage für das weitere Vorgehen zu bilden.

Wenn Du Deine Webseite selbst programmierst, dann ist der Aufwand für ein Lasten und Pflichtenheft zu groß. Jedoch solltest Du darauf achten, dass Du Dir selbst Guidelines setzt und diese auch einhältst. Wenn Du das nicht machst, kann sich Deine Programmierung enorm verzögern, weil Du Dir keine eigenen Ziele gesetzt hast und somit schnell den Ehrgeiz verlieren kannst.

9. Halte Dich up-to-date und lasse Dich weiterhin inspirieren

Beim Besuch anderer Webseiten solltest Du immer aufmerksam sein, denn vielleicht findest Du dort was, was Dich total beeindruckt und Du gerne auch auf Deiner Webseite umgesetzt haben möchtest? Natürlich solltest Du andere Webseiten nicht kopieren. Aber überwiegend wird die eigene Idee durch Inspirationen verfeinert. Das Webdesign entwickelt sich stets weiter. Und um in diesen Bereich erfolgreich zu sein, musst Du Dich up-to-date halten, Dich ebenso für andere Webdesigns interessieren und Dich inspirieren lassen.

Mundpropaganda

Nach wie vor eine der gängisten Methoden, um Ziele zu erreichen

Social Media Werbung

Die Zahl der aktiven Social Media Nutzer steigt ständig. Nutze diese Kanäle, um eine bessere Reichweite zu bekommen.

Printprodukte

Nutze diese, um ebenfalls Deine Reichweite zu erweitern. Anbei eine kleine Übersicht für sinnvolle Printprodukte mit ihrem Einsatzbereich:

  • Visitenkarten: Kompakt, immer dabei und einfach zu verteilen
  • Flyer: Kannst Du an diversen Orten, die zu Deinem Unternehmen / Deiner Marke passen, hinterlegen und werden von Besuchern entdeckt. Hierbei ist natürlich darauf zu achten, dass diese einen Blickfang erzeugen, um vom Besucher wahrgenommen zu werden.

Selina Kaus

Selina Kaus ist Graphic Designer bei der ReachX GmbH mit dem Schwerpunkt auf Konzeption und Visualisierung.

Nach Abschluss ihrer Fachhochschulreife mit dem Schwerpunkt Medienproduktion startete sie in einer Frankfurter Werbeagentur ihre Ausbildung als Mediengestalter mit dem Schwerpunkt Konzeption und Visualisierung. Seit ihrer erfolgreich absolvierten Ausbildung als Mediengestalter war sie in verschiedenen Werbeagenturen tätig.

Seit 2019 ist sie Teil der ReachX und unterstützt das Team mit grafischen sowie gestalterischen Umsetzungen und Möglichkeiten.

Webdesign Magazinartikel

Ein ehrlicher Blick auf Headless Commerce OMT Magazin

Ein ehrlicher Blick auf Headless Commerce Webdesign

Stefan Leuenberger 14 Min

Headless-Commerce-Systeme stehen zurzeit hoch im Kurs, da sie besser in unsere schnelllebige Zeit zu passen scheinen als ihre statischen Vorgänger. Die Trennung von Backend und Frontend hat seine Vorteile und es lohnt sich, einen genaueren Blick auf diese Form des Content-Managements zu werfen!

...

Webdesign Buchempfehlungen

gutes-webdesign

Grundkurs gutes Webdesign: Alles, was Sie über Gestaltung im Web wissen müssen, für moderne und attraktive Websites, die jeder gerne besucht!

Ihr Einstieg in gutes Webdesign: alles verstehen auch ohne Vorkenntnisse

Ihre (erste) Website soll richtig gut aussehen und einen rundum positiven Eindruck hinterlassen? Dann lernen Sie in diesem praktischen Buch alles zur Technik und zum Design, was Sie dafür benötigen. Der Grundaufbau sowie alle »Zutaten« einer Website werden ausführlich und besonders verständlich erklärt und gezeigt – ganz so, als würde unser Autor neben Ihnen stehen.

Konzeption, Layout, UX und Navigation

Am Beginn jeder Website steht die Konzeption. Sie müssen wissen, wer Ihre Zielgruppe ist und was mit Ihrer Website erreicht werden soll, damit Sie später konkrete Entscheidungen treffen können. Das mag trivial klingen, jedoch basieren viele Probleme während der Arbeit auf unzureichender Konzeption im Vorfeld. Sie sollten diesen Aspekt also sehr ernst nehmen, denn er ist integraler Bestandteil jedes Projekts und entscheidet oft über dessen Erfolg oder Misserfolg. Björn Rohles zeigt, wie es richtig geht.

Typografie im Web, Grafiken, Bilder und Multimedia

»Webdesign ist zu 95% Typografie«, formulierte Oliver Reichenstein in einem bekannten Aufsatz zum Thema. Tatsächlich ist das Web trotz Zunahme von Video- und Audio-Inhalten ohne Typografie nicht vorstellbar. Worauf Sie achten müssen, damit Ihre Texte gerne gelesen werden, erfahren Sie in diesem Buch. Außerdem lernen Sie alles zum Umgang mit Bildern und Multimedia-Inhalten.

Jetzt kaufen!
OMT Banner SEO Südwest
Back to top