1. http://Website Konzeption
Von der Idee zum Storybook
>>>
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

2. //Facts
Quelle: http://news.netcraft.com
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

3. //Agenda
1. Das Projektteam
2. Die Projektphasen
3. Die „klassische“ Konzeption
3.1 Grobkonzeption
3.2 Feinkonzeption
4. Tools und Software
5. Eine alternative Methode – Core and Paths
6. Workshop / Übung
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

4. //1. Das Projektteam
Beratung /
Konzept Design Technik
Planung
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

5. //1. Das Projektteam
Beratung /
Konzept Design Technik
Planung
- Recherche
- Ziele / Zielgruppe
- Zeitplan
- Projektmanagement
- Inhalte und Funktionen
- Kalkulation
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

6. //1. Das Projektteam
Beratung /
Konzept Design Technik
Planung
- Grob- und Feinkonzept
- Informationsarchitektur
- Navigationsstruktur
- Funktionsbeschreibungen
- Wireframes
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

7. //1. Das Projektteam
Beratung /
Konzept Design Technik
Planung
- Design & Layout
- Styleguide
- Beispielseiten
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

8. //1. Das Projektteam
Beratung /
Konzept Design Technik
Planung
- Frontend
- Backend
- Serverarchitektur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

9. //2. Die Projektphasen
Planung Konzeption Umsetzung
Briefing
Angebot/Kalkulation
Grobkonzeption
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

10. //2. Die Projektphasen
Planung Konzeption Umsetzung
Briefing Feinkonzeption
Angebot/Kalkulation Designkonzeption
Grobkonzeption
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

11. //2. Die Projektphasen
Planung Konzeption Umsetzung
Briefing Feinkonzeption Produktion
Text
Angebot/Kalkulation Designkonzeption Produktion
Grafik
Grobkonzeption
Produktion
HTML & Code
Usability-Tests
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

12. //3.1 Die „klassische“ Konzeption -
Grobkonzeption
- Zielfindung (Main Idea)
- Zielgruppenbestimmung
- Funktionen und Inhalte festlegen
- Konkurrenzanalyse
- Technische Struktur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

13. //3.1 Grobkonzeption
Konkurrenzanalyse („Benchmarking“)
“Users spend most of their time on other websites.“
(Jakob Nielsen)
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

14. //3.1 Grobkonzeption
- Zielfindung
- Zielgruppenbestimmung
- Funktionen und Inhalte festlegen
- Konkurrenzanalyse
- Technische Struktur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

15. //3.1 Exkurs: Technisches Konzept
- Konzepter braucht umfangreiches
technisches Wissen
- Was ist technisch möglich / umsetzbar?
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

16. //3.1 Exkurs: Technisches Konzept -
Frontend
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

17. //3.1 Exkurs: Technisches Konzept -
Backend
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

18. //3.1 Exkurs: Technisches Konzept -
Was ist ein CMS?
Content Management System
= Software, die hilft Webseiten zu erstellen
und Inhalte zu verwalten.
- ermöglicht es, Technik, Struktur und Design zu trennen
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

19. //3.1 Exkurs: Technisches Konzept -
Was ist ein CMS?
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

20. //3.1 Exkurs: Technisches Konzept -
Was ist ein CMS?
Sinnvoll für Sites, die regelmäßig aktualisiert
und geändert werden müssen.
z.B. Newsportale, Shop-Seiten
Nach anfänglichen Mehrkosten, ergeben sich
schnell einige (Kosten-)Vorteile.
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

21. //3.1 Exkurs: Technisches Konzept -
Was ist ein CMS?
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

22. //3.1 Exkurs: Technisches Konzept -
Welches CMS?
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

23. //3.1 Grobkonzeption -
Warum ist sie wichtig?
- Überblick verschaffen
- Grundidee („Main Idea“) als Grundstein
- fasst wichtige Informationen für Umsetzung zusammen
- Meilenstein in der Projektplanung
(Abnahme vom Kunden)
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

24. //3.2 Feinkonzeption
- Informationsarchitektur
- Sitestruktur
- Suche
- Wireframes
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

25. //3.2 Feinkonzeption -
Informationsarchitektur
- Listen
- Mindmaps
- Kartenlegen („Card Sorting“)
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

26. //3.2 Feinkonzeption -
Informationsarchitektur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

27. //3.2 Feinkonzeption -
Informationsarchitektur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

28. //3.2 Feinkonzeption - Sitestruktur
- Sinnvolle Kategorien benennen
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

29. //3.2 Feinkonzeption - Sitestruktur
Gliederungsmöglichkeiten:
-alphabetisch
-chronologisch
-intuitiv
-...
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

30. //3.2 Feinkonzeption - Sitestruktur
Die Sitemap...
- gibt Bereiche und Unterbereiche hierarchisch an
- zeigt Verlinkungen zwischen Seiten an
- verdeutlicht die Wege des Benutzers
von der Startseite aus
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

31. //3.2 Feinkonzeption - Sitestruktur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

32. //3.2 Feinkonzeption - Sitestruktur
Flache oder Tiefe Struktur?
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

33. //3.2 Feinkonzeption - Sitestruktur
Flache oder Tiefe Struktur?
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

34. //3.2 Feinkonzeption - Sitestruktur
Sieben plus/minus zwei - Regel
- Das menschliche Gehirn kann
optimal 7 Elemente aufnehmen
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

35. //3.2 Feinkonzeption - Suche
95 % sehen sich nur die erste Seite der Trefferliste an.
50% geben auf, wenn sie nicht beim ersten Versuch
fündig werden.
50% der Suchanfragen bestehen nur aus einem Wort.
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

36. //3.2 Feinkonzeption - Suche
After Search Navigation
AutoComplete
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

37. //3.2 Feinkonzeption -
Wireframes
Wireframes = vereinfachte Darstellung des Contents
- KEIN Design oder Gestaltungselemente!
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

38. //3.2 Feinkonzeption -
Wireframes
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

39. //3.2 Feinkonzeption -
Wireframes
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

40. //3.1 Feinkonzeption -
Warum ist sie wichtig?
- Detaillierte Beschreibung aller Inhalte und Funktionen
- Grundlage für die Weiterarbeit von
Designern, Programmierern, Textern
- Meilenstein in der Projektplanung
(Abnahme vom Kunden)
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

41. //4. Tools und Software
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

42. //5. Eine alternative Methode -
Core and Paths
- Prioritäten/Ziel setzen und Kern festlegen
- Vom Kern nach außen arbeiten
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

43. //5. Core and Paths
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

44. //5. Core and Paths
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

45. //5. Core and Paths
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

46. //5. Core and Paths
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

47. //6. Workshop „Saturn“
1. Legt die Einzelteile der Website zu einer
sinnvollen Struktur zusammen
2. Zeichnet dazu ein Wireframe
(Mockingbird.com)
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

48. //6. Wireframe „Saturn“
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

49. //6. Website „Saturn“
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

50. //Vielen Dank!
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel