Website Konzeption

9,417 views
9,264 views

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
9,417
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
158
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Website Konzeption

  1. 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. 2. //Facts Quelle: http://news.netcraft.com Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  3. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 16. //3.1 Exkurs: Technisches Konzept - Frontend Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  17. 17. //3.1 Exkurs: Technisches Konzept - Backend Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  18. 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. 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. 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. 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. 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. 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. 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. 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. 26. //3.2 Feinkonzeption - Informationsarchitektur Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  27. 27. //3.2 Feinkonzeption - Informationsarchitektur Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  28. 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. 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. 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. 31. //3.2 Feinkonzeption - Sitestruktur Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  32. 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. 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. 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. 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. 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. 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. 38. //3.2 Feinkonzeption - Wireframes Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  39. 39. //3.2 Feinkonzeption - Wireframes Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  40. 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. 41. //4. Tools und Software Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  42. 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. 43. //5. Core and Paths Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  44. 44. //5. Core and Paths Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  45. 45. //5. Core and Paths Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  46. 46. //5. Core and Paths Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  47. 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. 48. //6. Wireframe „Saturn“ Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  49. 49. //6. Website „Saturn“ Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  50. 50. //Vielen Dank! Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

×