Webtools für

Website Aufbau

Du träumst von deiner neuen Wohnung und hast auch schon eine Vorstellung davon, wie sie aussehen soll. Nimm Papier und Bleistift und zeichne deine Traumwohnung auf.
Icon-Aufbau.png
Icon-Art2.png

Website Art

 

Was für eine Art Wohnung suchst du? Was für eine Website?

Es ist wichtig sich diese Gedanken zu machen, damit die Wohnung zweckmässig ist und sich die Gäste wohlfühlen. Genau gleich ist dies bei der Website.

Icon-onepage.png

Eine Seite

Einfach eingerichtete Wohnung/Website.

Beispiel

sphere Landing Pages

Komplexität

meter-slow

Einfach

Icon-bleistift.png

Blog

Viele kommen zu dir in die Wohnung und freuen sich über Neuigkeiten.

Beispiel

sphere Web Tagebuch

Komplexität

meter-slow

meter-medium

Einfach bis Mittel

Icon-portfolio.png

Portfolio

Du hast viele Bilder in deiner Wohnung aufgehängt.

Beispiel

sphere Foto Homepage

Komplexität

meter-slow

Einfach

Icon-shop2.png

Shop

In deiner Wohnung verkaufst du Dinge.

Beispiel

sphere Web Shop für Solarleuchten

Komplexität

meter-medium

meter-fast

Mittel bis Hoch

Icon-business.png

Firma

Du hast viele Bilder in deiner Wohnung aufgehängt.

Beispiel

sphere Firmenwebsite

Komplexität

meter-slow

meter-medium

meter-fast

Einfach bis Hoch

Icon-webapp.png

Web App

Deine Wohnung wurde sehr aufwändig und spezifisch eingerichtet.

Beispiel

sphere Word als Web App

Komplexität

meter-fast

Hoch

 Beispiel kuba-reisebericht.ch  Ich brauche eine Portfolio Website, da ich in meinem Kuba Reisebericht viele Fotos mit Text publiziere.

 

Deine Art Website pencil

Schreibe es in dein Online Notizbuch...
profile   Evernote      
 
dropbox   Dropbox Paper      
 
google   Google Keep 
Icon-Struktur2.png

Website Struktur

 

Ein paar Tipps zur Website Struktur

Bei der Struktur einer Website gibt es ein paar wenige Dinge am Anfang zu beachten:

  • Kopfzeile (Header) user 
    • Normalweise ist dies ganz oben bei einer Website angeordnet

    • Dies beinhaltet normalerweise das Menu (Navigation)

      •  Menu-Punkt1 

        •  Menu-Unterpunkt1 

        •  Menu-Unterpunkt2 

      •  Menu-Punkt2 

        •  Menu-Unterpunkt1 

      •  Menu-Punkt3 

    • Die Eingangstür deiner Wohnung ist ein Haupt-Menu-Punkt (vielfach "Home"). Deine anderen Türen sind die weiteren Menu-Punkte

    • Das gleiche Menu wiederholt sich immer wieder auf den anderen Websites. Somit müssen Anpassungen am Menu nur einmal vorgenommen werden. Der Benutzer kann auch viel einfacher navigieren, wenn das Menu immer gleich aussieht.

    • Das Logo ist meistens oben links oder oben in der Mitte. Das Logo mit der Start Seite verlinken, dies erwarten die meisten Benutzer.

  • Inhaltsbereich (Body) user-tie
    • Hier kommt der Blickfang und vor allem Dein wertvoller Inhalt, der Nutzen stiftet.

    • Hier ist ganz wichtig, richte deine Wohnung so ein, dass sich deine Besucher wohlfühlen und von selber wiederkommen möchten!!! Du musst deine Website ansprechend gestalten mit passenden Bildern ("Ein Bild sagt mehr als tausend Worte") und mit Text der dem Kunden einen Mehrwert bietet, ein Problem für ihn löst. Aber nur soviel Text wie nötig verwenden und auf das Wesentliche konzentrieren. Am Schluss den Text nochmals kürzen, damit nur das Wichtigste bleibt.

  • Fusszeile (Footer) footprint
    • Normalerweise ganz unten angeordnet und bildet den Abschluss. Er beinhaltet Informationen die nicht auf den ersten Blick ersichtlich sein müssen. Seit Jahren wird die Fusszeile benutzt für einen Impressum und Datenschutz Link (dies wird in den meisten Ländern vorgeschrieben, bitte schaue im jeweilige Land nach). 

 Beispiel kuba-reisebericht.ch  "kuba-reisebericht.ch" ist so aufgebaut

 

 Tipp  Es ist wichtig diese Struktur zu kennen, wenn es darum geht eine Website zu erstellen. Dann wird die Arbeitsweise der Tools auch klarer, welche im Thema Website Erstellen vorgestellt werden.

Icon-Usability.png

Website Usability

 

Website Benutzerfreundlichkeit

Du solltest deine Website Benutzer freundlich gestalten, damit er deine wertvollen Informationen möglichst schnell findet ohne viel lesen zu müssen, egal ob auf dem Computer oder auf dem Smartphone. Man verwendet hier oft den Begriff "Usability". Setze am richtigen Ort Bilder und Videos ein. Ich habe ein einziges Buch zu diesem Thema und ich kann es empfehlen "Don't make me think", gibt es auch in Deutsch.

Beispiel Kapitel 5 im Buch Titel: "Lassen Sie nutzlose Wörter weg" (Die Kunst des Nicht-Schreibens für das Web). "Werfen Sie die Hälfte aller Wörter auf jeder Seite raus und vom Rest noch einmal die Hälfte" (Krugs drittes Gesetz der Usability). 

 Beispiel kuba-reisebericht.ch  Auf der Einstiegsseite (Homepage) sticht ein bildfüllendes Foto von einem Oldtimer in Kuba hervor, mit ein wenig Text der umschreibt, dass es sich um einen Kuba Reisebericht handelt, dies wird sehr stark unterstützt mit dem Domain Name der kuba-reisebericht.ch heisst. Somit weiss der Besucher sofort um was es geht. Die ganze Navigation ist mit Kuba Fotos (eigene von meinem Smartphone) erstellt. Der Fokus liegt auf Bilder, da dies für einen Reisebericht sehr wichtig ist.

plus-circleSehr gute Tipps kurz und bündig

plus-circleIch finde sehr schnell die relevanten Infos, gut aufgebaut

plus-circleEs gibt auch eine deutsche Fassung

Icon-Buch-Usability.png

Don't make me think

 Tipp  Ich liebe einfache, intuitive, schön gestaltete und sinnvolle Websites. Ich versuche auch, solche auf anhieb erstellen. Ich bin kein Usability (Benutzerfreundlichkeit) Profi. Ich ertappe mich vielfach selber, wie ich am Anfang die Website zu kompliziert erstelle und danach wieder vereinfache. Mit den heutigen Möglichkeiten um Websites schnell und einfach zu erstellen ist dies ein kleiner Aufwand. Schau dir jetzt doch gleich nochmals deine Website Skizze, deine Website Struktur an und überlege dir, ob die Usability einfach und sinnvoll ist. Frage deine Freunde, was sie davon halten.

Icon-Skizze2.png

Website Skizze

 

Zeichne deine Website

Es ist enorm hilfreich, wenn du deine Wohnungseinrichtung bildlich aufzeichnest. Nimm einfach ein leeres Blatt und male deine Vorstellungen deiner Website auf.

 Beispiel kuba-reisebericht.ch  "Website Skizze Kuba Reisebericht"

Deine Skizze  pencil

Schreibe es in dein Online Notizbuch...
profile   Evernote      
 
dropbox   Dropbox Paper      
 
google   Google Keep 

 

 Tipp  Es gibt viele Programme im Internet um Website Skizzen oder Prototypen anzufertigen. Sie sind im Internet zu finden unter "Wireframe", "Mockup", "Prototyp" und noch andere. Ich habe mir einige solcher Programme angeschaut und für mich persönlich bringen sie zu wenig Mehrwert. Der Aufwand um mit dem Tool umgehen zu können, ist zu hoch. Von daher nehme ich einen Stift zur Hand und zeichne den Aufbau der Website einfach auf ein Blatt Papier. Wenn es dann soweit ist, mal einen Prototypen herzustellen, dann sollte gleich das richtige Werkzeug (Tool) verwendet werden. Ich empfehle das gleiche Tool zu verwenden, mit dem ich auch die eigentliche Website erstelle. Unter dem Menu Punkt Website Erstellen findest du mehr Info zu den Tools.