http://Website Konzeption Von der Idee zum Storybook Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel >>>
http://Website Konzeption Von der Idee zum Storybook
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
>>>
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//Facts
Quelle: http://news.netcraft.com
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
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
//Agenda
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
Beratung /Planung
Konzept Design Technik
//1. Das Projektteam
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//1. Das Projektteam
Beratung /Planung
Konzept Design Technik
- 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
//1. Das Projektteam
Beratung / Planung
Konzept Design Technik
- Grob- und Feinkonzept- Informationsarchitektur- Navigationsstruktur- Funktionsbeschreibungen- Wireframes
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//1. Das Projektteam
Beratung / Planung
Konzept Design Technik
- Design & Layout- Styleguide- Beispielseiten
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//1. Das Projektteam
Beratung / Planung
Konzept Design Technik
- Frontend- Backend- Serverarchitektur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
Planung Konzeption Umsetzung
//2. Die Projektphasen
Briefing
Angebot/Kalkulation
Grobkonzeption
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//2. Die Projektphasen
Planung Konzeption Umsetzung
Grobkonzeption
Feinkonzeption
Designkonzeption
Briefing
Angebot/Kalkulation
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//2. Die Projektphasen
Planung Konzeption Umsetzung
Grobkonzeption
Feinkonzeption ProduktionText
ProduktionGrafik
ProduktionHTML & Code
Usability-Tests
Designkonzeption
Briefing
Angebot/Kalkulation
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
//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
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
- Konzepter braucht umfangreiches technisches Wissen
- Was ist technisch möglich / umsetzbar?
//3.1 Exkurs: Technisches Konzept
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//3.1 Exkurs: Technisches Konzept - Frontend
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//3.1 Exkurs: Technisches Konzept - Backend
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
Content Management System = Software, die hilft Webseiten zu erstellen und Inhalte zu verwalten.
- ermöglicht es, Technik, Struktur und Design zu trennen
//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
//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
//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
//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
//3.1 Exkurs: Technisches Konzept - Welches CMS?
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
- Informationsarchitektur
- Sitestruktur
- Suche
- Wireframes
//3.2 Feinkonzeption
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
- Listen - Mindmaps
- Kartenlegen („Card Sorting“)
//3.2 Feinkonzeption - Informationsarchitektur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//3.2 Feinkonzeption - Informationsarchitektur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//3.2 Feinkonzeption - Informationsarchitektur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
- Sinnvolle Kategorien benennen
//3.2 Feinkonzeption - Sitestruktur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
Die Sitemap...
- gibt Bereiche und Unterbereiche hierarchisch an
- zeigt Verlinkungen zwischen Seiten an
- verdeutlicht die Wege des Benutzers von der Startseite aus
//3.2 Feinkonzeption - Sitestruktur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//3.2 Feinkonzeption - Sitestruktur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
Flache oder Tiefe Struktur?
//3.2 Feinkonzeption - Sitestruktur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
Flache oder Tiefe Struktur?
//3.2 Feinkonzeption - Sitestruktur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
Sieben plus/minus zwei - Regel
- Das menschliche Gehirn kann optimal 7 Elemente aufnehmen
//3.2 Feinkonzeption - Sitestruktur
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
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.
//3.2 Feinkonzeption - Suche
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//3.2 Feinkonzeption - SucheAfter Search Navigation
AutoComplete
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
Wireframes = vereinfachte Darstellung des Contents
- KEIN Design oder Gestaltungselemente!
//3.2 Feinkonzeption - Wireframes
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//3.2 Feinkonzeption - Wireframes
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//3.2 Feinkonzeption - Wireframes
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
//4. Tools und Software
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
//5. Core and Paths
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//5. Core and Paths
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//5. Core and Paths
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//5. Core and Paths
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
//6. Wireframe „Saturn“
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//6. Website „Saturn“
Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//Vielen Dank!