Teil 1 (Abschnitt 1): Wer sind Sie, was bieten Sie, warum sind Sie eine gute Wahl

Der erste Abschnitt ist der wichtigste Abschnitt und man nennt ihn Herosection. Er entscheidet, ob der Besucher die ganze Webseite anschaut oder sie wieder verlässt.

(Die Bilder zeigen beispielhaft, wie die Umsetzung auf der Webseite aussehen könnte)

2. Teil (Abschnitt 2): hebt ihre Kernkompetenz hervor

3. Teil (Abschnitt 3): hebt hervor, was sie als Zusatzleistung erbringen

4. Teil (Abschnitt 4): Zeigt, wer hinter dem Service steckt

5. Teil (Abschnitt 5): Welchen Hintergrund und welche Anbindung zum Fachbereich haben Sie?

6. Teil (Abschnitt 6): Kunden berichten über Ihre Erfahrungen

7. Teil (Abschnitt 7): Gibt es Presseberichte wo sie erwähnt werden?

8. Teil (eigene Abschnitte) : Falls sie weitere Abschnitte anfügen wollen

Falls Sie weiter eigene Abschnitte einfügen wollen

9. Teil (Fussnote) : Der Footerbereich gibt Koordinaten bekannt

Links verweisen auf eigene Seiten oder auf Abschnitte innerhalb der Hauptseite.

 

10. Teil: Farben und Bilder

Farben transportieren Emotionen und sind gleichzeitig Signale, die Sie bei den Kunden wiedererkennen lässt. Farben haben auch Bedeutungen und wecken in uns je nach dem wohlwollende oder auch warnende Signale.

Im Internet findet man eine grosse Menge an Informationen, was Farben bedeuten und für was sie stehen. Farben werden in RGB (x,x,x) oder Hex (#xxxxxx) angegeben, damit der Browser die Farbe identifizieren kann. Sie können mir die Farbe auch als Farbpunkt schicken und ich identifiziere die rgb und hex Werte. 

Wählen Sie Ihre Hauptfarbe und leiten Sie daraus zwei weitere Farben ab zum Beispiel mit dem Tool Color Wheel

Die Farben lassen sich auch aus einem Bild das Ihnen gefällt extrahieren mit dem Tool Colorpicker

Es werden meistens 3 Farben gewählt, die nach der 60-30-10 Regel verwendet werden:

60%: Hauptfarbe oder die dominierende Farbe

30%: Nebenfarbe oder Ergänzende Farbe

10%: Action Farbe, das ist die Farbe, wo der Anwender bei Interesse weitere Informationen anfordert oder eine Kontaktaufnahme wünscht.

Dazwischen werden dezente Grautöne (#f6f6f6) und Schwarztöne zur Abgrenzungen und für Texte verwendet.

Hier eine kurze Übersicht über Farben und für was sie stehen:

Bilder

Es ist wichtig qualitativ gute Bilder im Format 1920x1280 Pixel zu beschaffen. Auf dem Portal Pixabay findet man auf Freiwilligkeit finanzierte wie auch eine käufliche Auswahl an Bildern.

Bilddateien erkennt man an der Endung. Sie haben folgende Vor- und Nachteile 

Eigene Bilder sollten möglichst mit einer Kamera erstellt werden, die hochauflösende Bilder erzeugt. Meist müssen die selbst erstellen Bilder mit einem Programm noch bezüglich Helligkeit und Kontrast nachbearbeitet werden.
Für eigene eindrucksvolle Bilder in Ihrem Umfeld ist unter Umständen ein Fotograf eine gute Wahl.

Wenn Sie es wünschen bearbeite ich Ihre Bilder nach.

Beachten Sie, dass die Farben der Bilder in grossen Teilen Ihre oben gewählten Farben enthalten. Abweichungen werden als störend empfunden.

11. Teil: Schriften

Schriften drücken wie Farben Emotionen aus. Sie dürfen aber nicht so verschnörkelt sein, dass die Leserlichkeit darunter leidet. 

Zu viele verschiedene Schriften machen die Webseite wild, nur eine Schrift macht die Webeite eintönig. Wählen sie nicht mehr als maximal drei Schriften.

Schriften finden Sie in Programmen oder auf dem Internet unter google fonts 

12. Teil: Unter welchem Begriff findet man Sie?

Das schönste Design nützt nichts, wenn man sie nicht findet.

Eine Collage in Form eines Programms könnte für das Beispiel so aussehen

Das Beispiel unter Verwendung des Opensource Programms mit Namen drawio. In der online Version können sie gleich loslegen.

Das Programm drawio hat den Vorteil, dass es praktisch kein Wissen voraussetzt, um es nutzen.

Angaben zu Webadresse, Fotos, Farben, Schriften und deren Bedeutungen von Farben finden Sie hier 

Das Design Können Sie mir nach getaner Arbeit im Format .drawio Format zusenden. 

Bei der Erstellung über eine Textdatei könnte das Beispiel so aussehen:

Angaben zu Webadresse, Fotos, Farben, Schriften und die Beutung von Farben finden Sie hier 

Design Bereich begrenzt durch Sections

Was macht eine gute Webseite aus?

Tipp 1:

Ausdrucksstarke Titel, kurz, bündig, einprägsam und auf den Punkt gebracht.
Titel sollten klar Ihr Stichwort Ihres Tuns beinhalten. Das wirkt sich auf die Suchmaschinen aus.

Tipp 2:

Kreative Menüs, frech, spritzig und beeindruckend, lassen Sie die Leute schmutzeln.

Tipp 3:

Design folgt der Funktion. Lenken Sie die Aufmerksamkeit des Lesers.
Vergleich: Ein schwarzer Punkt auf einem leeren Blatt lenkt die Aufmerksamkeit automatisch auf diesen Punkt. Hundert schwarze Punkte verwirren den Betrachter.
Eine Aussage nach der anderen, nicht zu viel auf einmal.

Tipp 4:

Grafische Effekte sollten sparsam eingesetzt werden.
Filme schaut man im Kino, Diashows in Vorträgen und Informationen und Angebote sucht man in Webseiten.

Tipp 5:

Wähle Fotos von "normalen" lebenden Menschen bei der Arbeit.
Die Webseite ist keine Casting-Show für Top-Modells.

Tipp 6:

Niemand liest einen langen langweiligen Textblock, ein sogenanntes Bleigrab.
Kurze prägnante, interessante durch Abstand getrennte Sätze und dazwischen Aufzählungen. Suchmanschinen lieben Struktur und vorallem Aufzählungen.

Tipp 7:

Dynamische Informationen analog Blogs immer mit Datum.
Niemand liest gerne veraltete Informationen.

Tipp 8:

Kontaktaufnahme über ein Formular, nicht nur über ein E-Mailadresse.

Tipp 9:

Ein Brief endet mit einer Verabschiedung.
Die Webseite ist eine Kommunikation und eine Verabschiedung geht mit Kontaktdaten einher.

Tipp 10:

Signalisiere Transparenz und Ehrlichkeit.
Die Webseite repräsentiert ein Angebot zu einer Leistung mit zu erwartenden Kosten oder aber es geht nur um Informationen.
Vermeide lückenhafte Informationen die später zu Kostenfolgen führen.

SEO heisst Search Engine Optimization interpretiert sind das Einstellungen, um bei einer Suche in den Suchmaschine die Chancen zu erhöhen, möglichst an oberster Stelle zu erscheinen.

Die Regeln ändern sich dauernd und was heute zählt kann morgen irrelevant sein.

Folgend einige Regeln, die bei der Erstellung wichtig sind. Tipp 1 ist der Wichtigste und Tipp 9 der weniger wichtige. Rot markiert sind Punkte, wo Sie entscheidend beitragen können.

Tipp 1: Qualität und Relevanz des Inhalts

Hochwertiger, relevanter und einzigartiger Inhalt ist entscheidend für eine gute Platzierung in den Suchergebnissen.

Tipp 2: Keyword-Recherche und -Verwendung

Die Auswahl der richtigen Keywords oder Schlüsselwörter im Inhalt der Webseite sind von großer Bedeutung. Dazu ist es ratsam die Texte über eine KI wie ChatGPT checken zu lassen. Diesen Part übernehme ich für Sie.

Tipp 3: Technische Optimierung

Die Website sollte technisch so aufgebaut sein, dass schnelle Ladezeiten gewährleisten werden können. Dies gelingt am besten mit purem HTTP/CSS und weniger mit CMS. Sie sollte für mobile Geräte optimiert (responsive) sein und sichere HTTPS-Verbindung verwenden.

Tipp 4: Verlinkungen

Die Qualität und Anzahl der externen Links, sogenannte Backlinks, sollten von vertrauenswürdigen und themenrelevanten Websites sein und sie beeinflussen das Ranking positiv. Interne wie externe Links sind für die SEO wichtig.

Tipp 5: Benutzererfahrung

Eine benutzerfreundliche Webseite, die einfach zu navigieren ist und eine positive Erfahrung bietet, wird von Suchmaschinen bevorzugt.

Tipp 6: Social Links

Aktivitäten und Engagement auf sozialen Medien können das Ranking beeinflussen, indem sie auf die Popularität und Relevanz einer Website hinweisen.

Tipp 7: Lokale Vernetzung

Vernetzungen in lokale Medien wie local.ch oder search.ch (Name, Adresse, Telefonnummer) und Eintragungen in lokale Verzeichnisse werden berücksichtigt.

Tipp 8: Meta Tags

Stichwort und Beschreibungen innerhalb der Webseite, sogenannte Meta-Tags und Meta-Beschreibungen waren früher wichtig und sind heute weniger wichtig. Meta-Tags sind Schlüsselwort-Einträge und die Meta-Beschreibung ist ein Zusammenfassung über Sinn und Zweck der Webseite in 160 Zeichen.

Tipp 9: Bildoptimierung

Verwendung aussagekräftiger Dateinamen, textuelle Beschreibung der Bilder in sogenannte Alt-Tags und Bilder möglichst so einbauen, dass die Grösse der Anzeige entspricht und nicht softwaremässig angepasst werden muss. Dies erhöht die Ladegeschwindigkeit.