Der Website Guide Teil1: Planung und Konzept

Transkript

1 Der Website Guide Teil1: Planung und Konzept

2 1/3 Über den Tak-Tak-Guide Der Tak Tak Guide ist eine interaktive Vorbereitungshilfe für alle, die eine eigene Website erstellen möchten. Ganz egal, ob du dich für Tak Tak entschieden hast, oder nicht der Guide soll dir dabei helfen, die Herausforderungen bei der Erstellung geeigneter und einer klaren Seitenstruktur zu meistern. Wenn du alle Schritte richtig befolgst, wirst du am Ende des Guides die perfekte Grundlage für die Umsetzung deiner Website haben.

3 2/3 Warum es sich lohnt, den Guide Schritt für Schritt durchzugehen. Du fragst dich vielleicht, warum man nicht einfach Vorweg gibt es 3 simple Prinzipien, die dir bei der direkt mit der Gestaltung und Umsetzung der Website Planung und Umsetzung deiner Website immer wieder beginnen kann. Doch bevor du damit loslegst, sind ein behilflich sein werden: paar wichtige Vorüberlegungen nötig. Eine Website soll am Ende nicht nur technisch und gestalterisch funktionieren, sondern vor allem deine e erfüllen. Wie plant man eine Website, wenn man nicht vorhersagen kann, welcher, aus welchen Grund, mit welcher Häufigkeit und Dauer auf die Website geht? Wie gestaltet man eine Website, wenn man nicht weiß, wie groß der Bildschirm des Gerätes ist? Es gibt nur eine Lösung: Man trifft Annahmen, auf deren Grundlage man die Website entwickelt, überprüft und verbessert. Der 1. Dont make me think! eine Website muss klar, verständlich und selbsterklärend sein, denn die ersten 10 Sekunden entscheiden darüber, ob ein auf deiner Website bleibt oder nicht 2. lesen keine, sondern überfliegen sie. Die einer Website sollten schnell erfassbar sein und hierarchisch strukturiert werden. klicken auf den erstbesten Link. 3. Wichtige sollten schnell und einfach erreichbar sein 60 Prozent der Deutschen surfen von unterwegs mit schlechter Internetverbindung. Guide zeigt dir Schritt für Schritt, wie du die wichtigsten Annahmen formulierst.

4 3/3 Jetzt geht s los! Trage den Wunschnamen deiner Website ein. Name deiner Website

5 Schritt 1: Das definieren.

6 1/2 Welches verfolgst du mit der Website? Beschreibe das wichtigste deiner Website. Was soll deine Website deinem Unternehmen, deiner Organisation oder dir selbst bringen. Wie profitierst du davon? (Ein Satz oder wenige Stichpunkte genügen) Beispiele ich will meine Fähigkeiten nicht nur erklären, sondern im Internet zeigen. ich möchte mich abheben von anderen Anbietern. ich möchte meine Marke oder Identität kontrollieren. Dein ich möchte mein eigenes Netzwerk vorantreiben. ich möchte einfach gefunden werden. ich möchte die Bekanntheit meiner Marke stärken. ich möchte Einnahmen durch Produktverkäufe generieren.

7 2/2 Woran erkennst du, dass deine neue Website erfolgreich ist? ich erkenne es an der Anzahl an n auf meiner Seite. Beschreibe das wichtigste Kriterium für den Erfolg deiner Website. Was sollte ich erkenne es an den Einnahmen durch Produktverkäufe eintreten, wenn deine Website dein errreicht? Wie kannst du den Erfolg messen? (Ein Satz oder wenige Stichpunkte genügen) Beispiele ich erkenne es, wenn mich jemand über meine Seite kontaktiert. Deine Messkriterien

8 Schritt 2: Die Kernaussage formulieren.

9 1/1 Was willst du mit deiner Website sagen? Beschreibe die zentrale Botschaft deiner Website. Was ist der Eindruck, den du in den ersten 30 Sekunden vermitteln willst? Was macht deine Website gegenüber anderen Websites besonders? Was kannst du am besten und was unterscheidet dich von den Anderen? (Nicht mehr als ein Satz.) Deine Botschaft (Maximal 144 Zeichen) Beispiele wir sind das erste Sushi-Restaurant in Berlin, dass rund um die Uhr geöffnet hat. wir pflanzen Träume und n Wir ernten erfolgreiche Geschäftsmodelle. mein Name ist Andre Abenteurer, Schauspieler und Unternehmer. Tipp Eine klare Botschaft in einem Satz macht oft den Unterschied zwischen einer langweiligen, diffusen Website und einer selbsterklärenden und überzeugenden Website. Weniger ist Mehr. Beginne mit einer Frage. Nutze eine Metapher. Wir wissen, dass dieser Schritt nicht gerade einfach ist. Wir bieten dir die Möglichkeit mit uns zusammen an deiner persönlichen Botschaft zu arbeiten. Schreibe uns einfach: info@studiobosco.de. Du findest uns unter: Mach s einfach. Erzähle, wobei du helfen kannst. Sei selbstbewusst & authentisch. Es geht auch lustig ;-)

10 Schritt 3: Die gruppe und deren Bedürfnisse definieren.

11 1/4 Wer geht auf deine Seite und warum? Die Entwicklung einer Website fällt viel leichter, wenn man weiß, für wen sie eigentlich gedacht ist. Stell dir dazu vor, deine Website ist schon fertig und online. Welche Person wird auf deine Website gehen und was sucht sie da? Versuche die Person möglichst detailliert zu beschreiben. Verwende dafür die Vorlage auf der nächsten Seite. Du solltest mindestens eine (auch Persona genannt) genauer charakterisieren. Zu den Persona-Vorlagen () Tipp Je besser und genauer du die Personen, ihre Bedürfnisse und Probleme beschreiben kannst, desto geringer ist das Risiko am vorbei zu entwickeln. Personas sind ein starkes Werkzeug, wenn es um die Priorisierung von Funktionen oder um wichtige Entscheidungen geht. Links Kostenlose Persona Vorlage online Einige aktuelle Beispiele Begriffsdefinition auf Wikipedia

12 2/4 Person 1: Name, Alter, Wohnort (z.b. Klaus Müller, 54 Jahre, Leipzig) Details e Beruf (z.b. Elektroinstallateur) Was macht die Person auf deiner Website? (z.b. Suche nach einem guten Friseur) Famillie (z.b. 2 KInder, geschieden) Welches Problem hat die Person? (z.b. Große Unzufriedenheit mit der letzten Frisur) Lieblingsessen (z.b. Spaghetti Carbonara) Welche Wünsche hat die Person? (Friseur um die Ecke, 50er-Jahre-Frisuren im Angebot) Lieblingsfilm (z.b.»gefährliche Brandung«) Hobbies (z.b. Motorad fahren & Seilspringen)

15 Schritt 4: Die inhaltliche festlegen.

16 1/2 Vom Kärtchen zur übersichtlichen Seitenstruktur Tipp Suche dir für diese Aufgabe ein paar Bekannte oder bestenfalls Leute, die deinen Personas entsprechen. Stelle ihnen deine vor und macht das Card Sorting gemeinsam. So kommst du den Vorstellung deiner gruppe am nächsten und die Aufgabe erledigt sich wie von allein! 1. Kernaussage 2. Brainstorming 3. Gruppieren Mach dir deine Kernaussage und die Bedürfnisse und Wünsche deiner gruppe bewusst. Sie sind der Ausgangspunkt für dass Brainstorming. Schreibe alle möglichen und Funktionen auf einzelne Kärtchen (Wichtig! Immer nur eine Information auf einen Zettel) Ordne die Kärtchen nach Ähnlichkeiten. Bilde thematische Gruppen in Form von Stapeln. 4. Betiteln Gib den Stapeln Namen, mit denen deine gruppe etwas anfangen kann Priorisieren Ordne die Stapel nach ihrer Bedeutung. Wichtige oder Funktionen stehen an erster Stelle. Startseite 6. Startseite Gehe die der einzelnen Stapel durch. Überlege, welche oder Funktionen auch auf der Startseite zu sehen sein sollten.

17 2/2 Welche inhaltliche hat deine Website? Über das Card-Sorting solltest du jetzt wissen, wie deine Seitenstruktur aussieht, wie die einzelnen Seiten heißen sollen und welche groben auf den jeweiligen Seiten erscheinen. Übertrage diese Ergebnisse in die Vorlage auf der nächsten Seite. Sollest du das Card-Sorting nicht gemacht haben, dann überlege dir eine gute Seitenaufteilung/-bettitelung und schreibe die Themebereiche der jeweiligen Seiten auf. Zur Vorlage ()

18 Startseite 1. Unterseite Name Name Inhaltsangabe Inhaltsangabe 2. Unterseite Inhaltsangabe Name Tipp Fülle nur so viele Unterseiten aus, wie du für deine Website benötigst und priorisiere sie dabei (1.Unterseite ist die wichtigste und die 3. Unterseite Inhaltsangabe Name 5.Unterseite die unwichtigste Unterseite). Solltest du mehr als 5 Seiten benötigen, dann übertrage die auf ein Blatt Papier. 4. Unterseite Inhaltsangabe Name

19 Schritt 5: Die erstellen.

20 1/1 Welche detaillierten hat die Website? Sammle dein Material (Bilder, Videos, Text, Sound, Links, etc.) und lege es unter»_material«in die Ordner ab. Erstelle für jede Seite aus der Seitenstruktur (siehe Schritt 4) ein Textdokument und formuliere den Textinhalt inkl. der Links. Erstelle einen Ordner»Bilder«und lege alle Bilder für die jeweilige Seite an. Tipp Video: Für Videos empfehlen wir einen Vimeo-Plus Account. Du kannst dievideos ganz einfach auf deiner Website einbetten und einstellen, auf welcher Seite deine Videos gezeigt werden. Sound: Für Sound-Material empfehlen wir einen kostenlosen Soundcloud Account. So kannst du den Sound ganz einfach auf deiner Website einbetten. Administration: Lege ein Text- dokument mit allen Links zu deinen Accounts an.

21 Schritt 6: Das Look-and-Feel definieren.

22 1/1 Welche visuelle Anmutung soll deine Website haben? Lege die Bilder in dem Ordner»_Moods«ab. Wähle mindestens 5 exemplarische Bilder als Wegweiser für die Orientiere dich an den deinen Bildern und Videos, die du bereits unter»_material«gesammelt hast. visuelle Erscheinung deiner Seite. Tipp Gute Möglichkeiten für die Bildersuche zu deinem Mood board sind: Pinterest, Google Bildersuche und Getty Images

23 Fertig! Du hast alle erforderlichen Schritte erfolgreich gemeistert! Jetzt geht s an die Umsetzung. ()

24 1/2 Wie geht es weiter? Glückwunsch! Du hast den schwierigsten Teil beim Erstellen deiner neuen Website gemeistert! Du hast dich mit den wichtigen Fragen rundum das, die Kernaussage, die gruppe und den verfügbaren n auseinandergesetzt. Bestenfalls hast du mit Anderen überlegt, wie deine strukturiert werden können. Die gewonnenen Überlegungen bilden den Ausgangspunkt für die nächste Phase den gemeinsamen Tak-Tak Workshop. Tak-Tak Workshop ()

25 2/2 Was erwartet dich bei dem Ein-Tages-Workshop von Tak Tak? Gemeinsam gehen wir Schritt für Schritt die Ergebnisse der Guide durch und geben dir zu den einzelnen Punkten Feedback. Kein Angst, wenn du bei bestimmten Schritten unsicher bist wir sind da, um dir zu helfen. Anhand der inhaltlichen entwerfen wir gemeinsam ein Seitenlayout und erstellen einen kleinen Papier-Prototypen deiner Seite. Parallel arbeiten wir an visuellen und typographischen vorschlägen auf Grundlage deines Moodboards. Nach der Mittagspause geben wir dir eine in das Content-Management-System von Squarespace und zeigen dir, wie du selbst einpflegen und verwalten kannst. Zusammen füllen wir deine Seite mit Leben und sorgen dafür, dass sie auch noch gut aussieht. Am Ende des Tages hast du eine neue Website und wir kümmern uns um die restlichen Anpassungen. Weitere Infos ()

26 Weitere Infos: Folge uns auf: Tak Tak ist ein Workshop-Angebot von Studio Bosco