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