Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Website Konzeption

11,219 views

Published on

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

×