website konzeption

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!