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

>>>


//Facts

Quelle: http://news.netcraft.com


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


Beratung /Planung

Konzept Design Technik

//1. Das Projektteam



Beratung /Planung


- Recherche- Ziele / Zielgruppe- Zeitplan- Projektmanagement- Inhalte und Funktionen- Kalkulation



Beratung / Planung


- Grob- und Feinkonzept- Informationsarchitektur- Navigationsstruktur- Funktionsbeschreibungen- Wireframes



Beratung / Planung


- Design & Layout- Styleguide- Beispielseiten



Beratung / Planung


- Frontend- Backend- Serverarchitektur


Planung Konzeption Umsetzung

//2. Die Projektphasen

Briefing

Angebot/Kalkulation

Grobkonzeption




Grobkonzeption

Feinkonzeption

Designkonzeption

Briefing

Angebot/Kalkulation




Grobkonzeption

Feinkonzeption ProduktionText

ProduktionGrafik

ProduktionHTML & Code

Usability-Tests

Designkonzeption

Briefing

Angebot/Kalkulation


//3.1 Die „klassische“ Konzeption - Grobkonzeption

- Zielfindung (Main Idea)

- Zielgruppenbestimmung

- Funktionen und Inhalte festlegen

- Konkurrenzanalyse

- Technische Struktur


//3.1 Grobkonzeption

Konkurrenzanalyse („Benchmarking“)

“Users spend most of their time on other websites.“ (Jakob Nielsen)



//3.1 Grobkonzeption

- Zielfindung

- Zielgruppenbestimmung

- Funktionen und Inhalte festlegen

- Konkurrenzanalyse

- Technische Struktur



- Konzepter braucht umfangreiches technisches Wissen

- Was ist technisch möglich / umsetzbar?

//3.1 Exkurs: Technisches Konzept


//3.1 Exkurs: Technisches Konzept - Frontend


//3.1 Exkurs: Technisches Konzept - Backend


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?





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.




//3.1 Exkurs: Technisches Konzept - Welches CMS?


//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)


- Informationsarchitektur

- Sitestruktur

- Suche

- Wireframes

//3.2 Feinkonzeption


- Listen - Mindmaps

- Kartenlegen („Card Sorting“)

//3.2 Feinkonzeption - Informationsarchitektur






- Sinnvolle Kategorien benennen

//3.2 Feinkonzeption - Sitestruktur



Gliederungsmöglichkeiten: -alphabetisch -chronologisch -intuitiv

-...


Die Sitemap...

- gibt Bereiche und Unterbereiche hierarchisch an

- zeigt Verlinkungen zwischen Seiten an

- verdeutlicht die Wege des Benutzers von der Startseite aus





Flache oder Tiefe Struktur?



Flache oder Tiefe Struktur?



Sieben plus/minus zwei - Regel

- Das menschliche Gehirn kann optimal 7 Elemente aufnehmen



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


//3.2 Feinkonzeption - SucheAfter Search Navigation

AutoComplete


Wireframes = vereinfachte Darstellung des Contents

- KEIN Design oder Gestaltungselemente!

//3.2 Feinkonzeption - Wireframes






//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)


//4. Tools und Software


//5. Eine alternative Methode - Core and Paths

- Prioritäten/Ziel setzen und Kern festlegen

- Vom Kern nach außen arbeiten


//5. Core and Paths


//5. Core and Paths


//5. Core and Paths


//5. Core and Paths


//6. Workshop „Saturn“

1. Legt die Einzelteile der Website zu einer sinnvollen Struktur zusammen

2. Zeichnet dazu ein Wireframe (Mockingbird.com)


//6. Wireframe „Saturn“


//6. Website „Saturn“


//Vielen Dank!

Documents

Website Konzeption