Webdesign-Allendoerfer.de

10 Tipps für professionelles Webdesign

Professionelles Webdesign bedeutet im Grunde nur, dass der Webdesigner hier sein Produkt auch verkauft, also den Job professionell betreibt. Man kann es allerdings auch so verstehen: Professionelles Webdesign verkauft seinerseits etwas.

Dieser Artikel ist Teil der Serie 70 Tipps für professionelle Websites ist, die ich – natürlich viel zu spät – endlich einmal fortführen möchte.

Inhaltsverzeichnis

  1. Allgemeine Tipps
  2. Professionelles Webdesign
  3. Tipps für sauberes HTML
  4. Gute Webtexte
  5. Bilder im Webdesign
  6. No-Gos auf Business-Websites
  7. Website-Pflege

2. Professionelles Webdesign

Professionelles Webdesign hilft die eigenen Produkte an den Mann bzw. die Frau (wie ich Geschlechtergerechte Sprache hasse) zu bringen. Webdesign bedeutet natürlich mehr als die reine Pixelschubserei, ich möchte mich bei meinen 10 Tipps allerdings weitgehend darauf beschränken.

  1. Beständig bleiben

    Ein professionelles Webdesign sollte sich dem restlichen Corporate Identity anpassen. Das heißt, es sollten die Firmenfarben verwendet werden, aber auch Formen und wieder auftretende Motive können und sollten im Webdesign wieder aufgegriffen werden. Selbstverständlich sollte das Firmenlogo verwendet werden, soweit es vorhanden ist.

    Besteht noch kein Corporate Design, ist es wichtig, bewusst eines zu erstellen. Ich kann mich an ein Kundenprojekt erinnern, bei dem ich meine Ideen für das Webdesign erklärte und der Kunde meinte, dass ich auf das Logo noch warten müsse, da ein anderer Grafiker dies momentan erstelle, ob ich nicht schon anfangen könne? So etwas macht natürlich keinen Sinn. Es wird nicht nachträglich noch einmal ein Logo eingefügt. Professionelles Webdesign ist beständig.

  2. An Zielgruppe und Produkt halten

    Bevor in Photoshop (oder Gimp!) der erste Pixel eingefärbt wird, sollte man in sich gehen und sich das Produkt oder die Produkte die verkauft werden sollen konzentrieren. Wirtschaftlich gesehen hat das Design den einzigen Sinn das Produkt der Zielgruppe nahe zu bringen und zu verkaufen.

    Wie alt ist die Zielgruppe? Wie groß sollte die Schrift deshalb sein? Wie internetaffin ist sie? Kann man ihr Dinge wie RSS-Feeds einfach so hinstellen oder weiß sie damit gar nichts anzufangen? Welche Farben und Formen passen zum Produkt und sprechen die Zielgruppe an? Wie seriös oder wie spannend sollte die Website werden?

  3. Farbschema erstellen

    Farbschema

    Ein Farbschema erstellt mit Color Scheme Designer

    Nachdem Dir nun klar ist, welche Firmenfarben es gibt, welche Farben gut zum Produkt passen würden und vor allem, welche Farben der Zielgruppe präsentiert werden können, sollte nun ein Farbschema erstellt werden. Hierbei ist wichtig, dass Farben nicht nur einfach zum Produkt passen oder die Zielgruppe ansprechen.

    Farben kann man innerhalb einer Gesellschaft Bedeutungen zuordnen, die dann assoziiert werden, wenn sie im Webdesign auftauchen. Farben wirken außerdem unterschiedlich warm oder kalt. Gemeinsam mit anderen Farbtönen haben sie eine ganz eigene Wirkung. Über Farben gibt es wirklich viel zu Erfahren. Eine nützliche Quelle ist www.metacolor.de. Einen weiteren nützlichen Artikel findest du hier.

    Das Positive ist, dass wir als Menschen selbst ebenfalls die Wirkung des Farbschemas erfahren. Man kann mit praktischen Tools wie Color Scheme Designer und etwas Gespür für Ästhetik sehr ansehnliche Farbschemata zaubern.

  4. Auch beim Layout Schemata verwenden

    Nun geht es ans Eingemachte. Beim Layout nutze ich meist ein Scribble. Danach mache ich im Grafikprogramm weiter. Auch hier kann man sich nach Schemata richten. Was immer funktioniert ist der Goldene Schnitt. Raster können die Arbeit erleichtern. Beliebt ist 960.gs und CSSGrid.net. Ich persönlich probiere Sie ab und an aus.

    Ich versuche ebenfalls ein Formschema zu etablieren. Wie eckig, rund, schief oder gebogen sollte das Webdesign werden? Hängt natürlich wieder vom Produkt und der Zielgruppe ab. Auch hier ist mir Beständigkeit wichtig: Wenn die Ecken abgerundet werden, dann werden alle Ecken abgerundet. Natürlich kann man dies gezielt auflockern oder zwei oder drei verschiedene Typen festlegen. Man sollte das ganze aber gezielt machen.

  5. Einheitliches Schriftbild

    Auch bei der Typografie setze ich auf Schemata. Eine durchschnittliche Website verwendet bis zu 6 Überschriften, Fließtext, Links, hat ein oder mehrere Navigationselemente. Oft Sind Seitenbestandteile beschriftet. Gerade durch CSS ist es ganz leicht Textelemente zu gruppieren und einheitlich zu gestalten.

    Eine wirklich hilfreiche Matrix um selbst als Laie professionelle Typografie hinzubekommen bietet Jan Quickels. Zu empfehlen ist auch die 141 Folien lange Präsentation Elegant Web Typography von Jeff Croft (englisch).

  6. Genügend Layouts erstellen

    Für die meisten kleinen Websites mag es genügen, ein Layout zu erstellen und dort im Inhaltsbereich die Inhalte der jeweiligen Unterseite zu präsentieren. Selbst hier macht es aber oft schon Sinn, der Startseite einen ganz eigenen Aufbau zu verpassen. Ist die Website ein reines Lexikon, welches den Besucher mit Wissen füttert, braucht man natürlich kein zweites Layout.

    Das Web kann aber heute viel mehr. Startseiten, Kategorieseiten, Inhaltsseiten, Galerieseiten, spezielle Generatoren – kann man hier wirklich ein universelles Layout erstellen und alle reinpressen? Besser wäre es, für jeden Seitentyp ein Layout parat zu haben, welches dessen Funktionen unterstützt. Das es anders geht zeigen Blogazines.

  7. KISS

    Keep it small & simple oder besser: “keep it simple, stupid!”, heißt im Grunde, alles so einfach zu präsentieren, wie möglich. Natürlich muss das Webdesign alle wichtigen Elemente wie Seitennavigation, Suche, Logo oder Text beherbergen. Um das Ganze möglichst einfach zu gestalten, kann man zwei weitere Ratschläge anwenden:

    • Kenne den Sinn jeden Elements. D.h. füge nichts einfach in das Layout ein, nur weil es andere Websites auch haben. Überlege zuvor, ob es wirklich Sinn macht und notwendig ist.
    • Gruppiere Elemente. Der Mensch kann in einer horizontalen Navigation bspw. maximal 3-4 Navigationspunkte gleichzeitig erfassen. Wenn Du Dein Webdesign sinnvoll aufteilst, findet sich der Besucher schneller zurecht.
  8. Liebe die Details

    Gerade wie man mit den nebensächlichen Bestandteilen seines Webdesigns umgeht, kann entscheiden, wie hochwertig das Webdesign wird. Bei einem Anzug wählt man ja auch nicht den edelsten Stoff und lässt dann die Nähte ausfransen.

    Das bedeutet: Achte auf Farbverläufe, Ecken und Kanten oder Muster. Buttons und Icons können liebevoll und Pixelgenau gestaltet werden. Natürlich darf man es nicht übertreiben: Hintergrundelemente dürfen sich nicht in den Vordergrund drängen.

    Designblogs veröffentlichen oft tolle Beispielsammlungen. Hier zum Beispiel über pixelgenaues Buttondesign.

  9. Plane den Einsatz von dynamischen Elementen

    Mithilfe von CSS, JavaScript und Ajax oder Flash kann man seinem Webdesign Leben einhauchen. Hier bitte die vorherigen Punkte im Blick haben: Was kann ich meiner Zielgruppe zumuten? Wie kann ich möglichst einfach bleiben? Hat das wirklich Sinn?

    Ab und an kann man diese Techniken zum Beispiel nutzen um Besucher nicht zu erschlagen und Elemente nachträglich aufklappbar oder ausziehbar macht. Gute Beispiele für wirklich intelligenten Einsatz dynamischer Elemente sind:

    Amazon Navigation

    Die vielfach kopierte, ausklappbare Navigation von Amazon.

    Preisbereich bestimmen billiger.de

    Das Werkzeug um den Preisbereich der Suche festzulegen auf billiger.de

  10. Lenke den Besucher

    Zum Schluss der wichtigste Punkt: Lenke Deinen Besucher! Im Grunde sind die ganzen Punkte zuvor völlig irrelevant, solange das Webdesign im Stande seine Aufgabe zu erfüllen und das Produkt an den Mann zu bringen.

    Das Stichwort lautet: “call to action”. Mache Dir bewusst, welche Aktion Deine Besucher ausführen sollen und hebe diese Möglichkeit hervor. Auf dem Weg dorthin gibt es viele Punkte zu beachten, die Kurzfassung lautet:

    Befriedige mit dem Produkt das Verlangen des Besuchers. Mache dies in Überschriften, Texten und Bildern klar. Aber Achtung: Führe dies so weit wie möglich auf unsere Urtriebe zurück. Kein Mensch braucht eine teure Frisur, wer sich eine wünscht, möchte gut Aussehen und Sex. (Einfach in dieser Art denken, funktioniert meist recht einfach :D )

    Als nächstes muss sich der Besucher sicher fühlen. Durch ein professionelles Webdesign haben wir hier schon die halbe Miete. Man kann dafür sorgen, dass irgendwelche Prüfsiegel (TÜV, Trusted Shops, SSL-Verschlüsselung) oder Kundenrezessionen weiter bestätigen. Vermeiden sollte man die Kombination “Billiges Design + schmierige Anzugträger”.

    Als nächstes brauchen wir die Handlungsaufforderung (also call to action). “Bestellen Sie jetzt”, “Kontaktieren Sie mich” usw. Natürlich benötigt das Design auch ein Element, mit dem sich diese Handlung dann ausführen lässt, sprich ein Button, ein Kontaktformular usw.

    Weitere Tipps zur Optimierung der Conversion findest Du bei konversionskraft.de hier ist bspw. ein sehr hilfreicher Analyseartikel zur Gestaltung von Landing Pages.

    Tipp: Durch (künstliche) Knappheit erhöht man das Verlangen des Interessenten die gewünschte Aktion auszuführen. Vom Teleshopping kann man hier viel lernen …

Das war’s. Die nächsten 10 Tipps sind fertig. Ich hoffe, sie helfen und gelobe, die fehlenden 50 etwas schneller zu bringen! Es wäre super, wenn Du das Geschriebene nun in den Kommentaren bestätigst oder vervollständigst. Natürlich kannst Du es auch verneinen, kritisieren oder vollständig zerfetzen.


Abonnieren 8 Kommentare:
  1. Ich glaube, dass dieser Artikel hier, Außenstehenden einen ganz guten inhaltlichen Abriß zum Thema Webdesign vermittelt. Viele sehen nur eine fertige Website. Kaum einer, der sich nicht mit diesem Thema beschäftigt, weiß wie vielseitig und umfassend dieser Bereich ist. Ich finde dass hier ein guter, grober Überblick vermittelt wird.

  2. Was ist professionelles Webdesign? Natürlich gibt es technische Kriterien, aber grundsätzlich sind es wirtschaftliche. Kunden, die professionelles Webdesign verlangen, suchen Qualität, Vertrauen und einen Outsourcing-Partner. Und dafür sind sie bereit zu bezahlen, wie unsere Erhebung zu den Website Kosten zeigt.

    Viele Grüsse

  3. Auch wenn sich KISS und liebe die Details erst mal wie ein Widerspruch anhört: beides ist richtig. Wichtig ist vor allem, genau zu welchem Punkt man anfangen sollte, sich an Details zu machen. Auch nach 10 Jahren als Webdesigner ertappe ich mich immerwieder mal dabei, mich in Details zu verlierne, während ich eigentlich besser strukturelle Diagramme zeichnen sollte.

  4. Als Neuling in der Branche habe ich bis hierhin einiges erfahren, was ich bisher nicht wusste. Werde den Blog auf jedenfall weiterverfolgen…sehr informativ.Danke !

  5. Gerade dein Punkt 10. Lenke den Besucher wird oft zu sehr vernachlässigt. Gerade hier müssen professionelle Webdesigner Ihre Kunden mehr informieren.

    Wirklich ein guter Artikel.

    Gruß Mika

  6. Super Artikel! Sollte mich mehr daran halten, dann würde meine Webseite nicht so aussehen, wie sie es jetzt tut. Unübersichtlich, schwer nachvollziehbar, etc.

    Werd’ mich ab sofort an ein neues Layout setzen und mal schauen wie mich Deine Punkte weiter bringen.

    Danke an dieser Stelle!

  7. Vielen Dank für den wirklich sehr gelungenen Artikel. Es werden viele wichtige Informationen und Anhaltspunkte genannt, um Einsteigern im Bereich Webdesign unter die Arme zu greifen.

  8. Ein schöner Artikel, besonders für Neulinge die sich noch nicht so sehr mit Webdesign auskennen. Deine Seite wurde gleich mal in die Favoriten gelegt :)
    Weiter so!

Kommentieren

Über Gravatar kannst du einen Avatar verwenden.
Kommentare kannst du über den RSS-Feed verfolgen.