SlideShare ist ein Scribd-Unternehmen logo
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


   Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
//1. Das Projektteam


  Beratung /
                                    Konzept                            Design                           Technik
   Planung




   Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
//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
//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
//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
//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
//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
//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
//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
//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
//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
//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
//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
//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
//3.2 Feinkonzeption

         - Informationsarchitektur

         - Sitestruktur

         - Suche

         - Wireframes




   Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
//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 - Sitestruktur

         - Sinnvolle Kategorien benennen




   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
//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
//3.2 Feinkonzeption - Sitestruktur




   Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//3.2 Feinkonzeption - Sitestruktur

         Flache oder Tiefe Struktur?




   Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//3.2 Feinkonzeption - Sitestruktur

         Flache oder Tiefe Struktur?




   Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
//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
//3.2 Feinkonzeption - Suche
   After Search Navigation




   AutoComplete




   Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
//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
//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!




   Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel

Weitere ähnliche Inhalte

Andere mochten auch

1 website konzeption
1 website konzeption1 website konzeption
1 website konzeption
idealogues
 
Vortrag: Anforderungen an moderne Webseiten - SEO, Usability & Social Media
Vortrag: Anforderungen an moderne Webseiten - SEO, Usability & Social MediaVortrag: Anforderungen an moderne Webseiten - SEO, Usability & Social Media
Vortrag: Anforderungen an moderne Webseiten - SEO, Usability & Social Media
PIXELMECHANICS
 
Maik Hanke - „Alles nur Show?!“ Die Berichterstattung über Wrestling im deuts...
Maik Hanke - „Alles nur Show?!“ Die Berichterstattung über Wrestling im deuts...Maik Hanke - „Alles nur Show?!“ Die Berichterstattung über Wrestling im deuts...
Maik Hanke - „Alles nur Show?!“ Die Berichterstattung über Wrestling im deuts...
Symposium-HH
 
Marcus Franke - Interessenkoalitionen bei Bewerbungen um Sportgroßveranstaltu...
Marcus Franke - Interessenkoalitionen bei Bewerbungen um Sportgroßveranstaltu...Marcus Franke - Interessenkoalitionen bei Bewerbungen um Sportgroßveranstaltu...
Marcus Franke - Interessenkoalitionen bei Bewerbungen um Sportgroßveranstaltu...
Symposium-HH
 
Personas Modell - Vorlage zum Download
Personas Modell - Vorlage zum Download Personas Modell - Vorlage zum Download
Personas Modell - Vorlage zum Download
Michael Leibrecht
 
Einführung in User Stories
Einführung in User StoriesEinführung in User Stories
Einführung in User Stories
Monika Schubert
 
Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...
Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...
Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...
kuehlhaus AG
 
Elektronischer Geschäftsverkehr in Mittelstand und Handwerk 2010 - Zusammefa...
Elektronischer Geschäftsverkehr in Mittelstand und Handwerk 2010 -  Zusammefa...Elektronischer Geschäftsverkehr in Mittelstand und Handwerk 2010 -  Zusammefa...
Elektronischer Geschäftsverkehr in Mittelstand und Handwerk 2010 - Zusammefa...
eBusinessLotse-Suedwestfalen-Hagen
 
Vernetzung die Spaß macht - Social Media Einsatz bei den Unternehmerfrauen im...
Vernetzung die Spaß macht - Social Media Einsatz bei den Unternehmerfrauen im...Vernetzung die Spaß macht - Social Media Einsatz bei den Unternehmerfrauen im...
Vernetzung die Spaß macht - Social Media Einsatz bei den Unternehmerfrauen im...
eBusinessLotse-Suedwestfalen-Hagen
 
Ditch the Persona. User Roles are better for design.
Ditch the Persona. User Roles are better for design.Ditch the Persona. User Roles are better for design.
Ditch the Persona. User Roles are better for design.
John McRee
 
How Card Sorting Helps You Build People-Centric IA
How Card Sorting Helps You Build People-Centric IAHow Card Sorting Helps You Build People-Centric IA
How Card Sorting Helps You Build People-Centric IA
Natalia Story
 
H&M Digital Strategy
H&M Digital StrategyH&M Digital Strategy
H&M Digital Strategy
lmmikeska
 
User stories schreiben
User stories schreibenUser stories schreiben
User stories schreiben
stbaechler
 
Personas - Die Arbeit mit archetypischen Nutzern in der Produktentwicklung
Personas - Die Arbeit mit archetypischen Nutzern in der ProduktentwicklungPersonas - Die Arbeit mit archetypischen Nutzern in der Produktentwicklung
Personas - Die Arbeit mit archetypischen Nutzern in der Produktentwicklung
uxHH
 
Optimierung im Einkauf Beschaffungs- und Lieferantenmanagement im Verlag
Optimierung im Einkauf Beschaffungs- und Lieferantenmanagement im VerlagOptimierung im Einkauf Beschaffungs- und Lieferantenmanagement im Verlag
Optimierung im Einkauf Beschaffungs- und Lieferantenmanagement im Verlag
Markus Wilhelm
 
Brand Study of H&M
Brand Study of H&MBrand Study of H&M
Brand Study of H&M
ALKA YADAV
 
Information Architecture. Card Sorting
Information Architecture. Card SortingInformation Architecture. Card Sorting
Information Architecture. Card Sorting
DCU_MPIUA
 
Business Model Canvas für Websites
Business Model Canvas für WebsitesBusiness Model Canvas für Websites
Business Model Canvas für Websites
Thorsten Faltings
 
Rethinking leadership and management to drive innovation
Rethinking leadership and management to drive innovationRethinking leadership and management to drive innovation
Rethinking leadership and management to drive innovation
Stocker Partnership
 

Andere mochten auch (20)

Session bchh13
Session bchh13Session bchh13
Session bchh13
 
1 website konzeption
1 website konzeption1 website konzeption
1 website konzeption
 
Vortrag: Anforderungen an moderne Webseiten - SEO, Usability & Social Media
Vortrag: Anforderungen an moderne Webseiten - SEO, Usability & Social MediaVortrag: Anforderungen an moderne Webseiten - SEO, Usability & Social Media
Vortrag: Anforderungen an moderne Webseiten - SEO, Usability & Social Media
 
Maik Hanke - „Alles nur Show?!“ Die Berichterstattung über Wrestling im deuts...
Maik Hanke - „Alles nur Show?!“ Die Berichterstattung über Wrestling im deuts...Maik Hanke - „Alles nur Show?!“ Die Berichterstattung über Wrestling im deuts...
Maik Hanke - „Alles nur Show?!“ Die Berichterstattung über Wrestling im deuts...
 
Marcus Franke - Interessenkoalitionen bei Bewerbungen um Sportgroßveranstaltu...
Marcus Franke - Interessenkoalitionen bei Bewerbungen um Sportgroßveranstaltu...Marcus Franke - Interessenkoalitionen bei Bewerbungen um Sportgroßveranstaltu...
Marcus Franke - Interessenkoalitionen bei Bewerbungen um Sportgroßveranstaltu...
 
Personas Modell - Vorlage zum Download
Personas Modell - Vorlage zum Download Personas Modell - Vorlage zum Download
Personas Modell - Vorlage zum Download
 
Einführung in User Stories
Einführung in User StoriesEinführung in User Stories
Einführung in User Stories
 
Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...
Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...
Webinar 06/11: Mobile Web- Nur wer den Trend versteht, kann zielgerichtet han...
 
Elektronischer Geschäftsverkehr in Mittelstand und Handwerk 2010 - Zusammefa...
Elektronischer Geschäftsverkehr in Mittelstand und Handwerk 2010 -  Zusammefa...Elektronischer Geschäftsverkehr in Mittelstand und Handwerk 2010 -  Zusammefa...
Elektronischer Geschäftsverkehr in Mittelstand und Handwerk 2010 - Zusammefa...
 
Vernetzung die Spaß macht - Social Media Einsatz bei den Unternehmerfrauen im...
Vernetzung die Spaß macht - Social Media Einsatz bei den Unternehmerfrauen im...Vernetzung die Spaß macht - Social Media Einsatz bei den Unternehmerfrauen im...
Vernetzung die Spaß macht - Social Media Einsatz bei den Unternehmerfrauen im...
 
Ditch the Persona. User Roles are better for design.
Ditch the Persona. User Roles are better for design.Ditch the Persona. User Roles are better for design.
Ditch the Persona. User Roles are better for design.
 
How Card Sorting Helps You Build People-Centric IA
How Card Sorting Helps You Build People-Centric IAHow Card Sorting Helps You Build People-Centric IA
How Card Sorting Helps You Build People-Centric IA
 
H&M Digital Strategy
H&M Digital StrategyH&M Digital Strategy
H&M Digital Strategy
 
User stories schreiben
User stories schreibenUser stories schreiben
User stories schreiben
 
Personas - Die Arbeit mit archetypischen Nutzern in der Produktentwicklung
Personas - Die Arbeit mit archetypischen Nutzern in der ProduktentwicklungPersonas - Die Arbeit mit archetypischen Nutzern in der Produktentwicklung
Personas - Die Arbeit mit archetypischen Nutzern in der Produktentwicklung
 
Optimierung im Einkauf Beschaffungs- und Lieferantenmanagement im Verlag
Optimierung im Einkauf Beschaffungs- und Lieferantenmanagement im VerlagOptimierung im Einkauf Beschaffungs- und Lieferantenmanagement im Verlag
Optimierung im Einkauf Beschaffungs- und Lieferantenmanagement im Verlag
 
Brand Study of H&M
Brand Study of H&MBrand Study of H&M
Brand Study of H&M
 
Information Architecture. Card Sorting
Information Architecture. Card SortingInformation Architecture. Card Sorting
Information Architecture. Card Sorting
 
Business Model Canvas für Websites
Business Model Canvas für WebsitesBusiness Model Canvas für Websites
Business Model Canvas für Websites
 
Rethinking leadership and management to drive innovation
Rethinking leadership and management to drive innovationRethinking leadership and management to drive innovation
Rethinking leadership and management to drive innovation
 

Mehr von 1560media

Mobile applications
Mobile applicationsMobile applications
Mobile applications
1560media
 
Referat bloggen
Referat bloggenReferat bloggen
Referat bloggen
1560media
 
Social media 111129
Social media 111129Social media 111129
Social media 111129
1560media
 
Suchmaschinenmarketing
SuchmaschinenmarketingSuchmaschinenmarketing
Suchmaschinenmarketing
1560media
 

Mehr von 1560media (7)

Mobile applications
Mobile applicationsMobile applications
Mobile applications
 
Referat bloggen
Referat bloggenReferat bloggen
Referat bloggen
 
Agof
AgofAgof
Agof
 
Webdesign
WebdesignWebdesign
Webdesign
 
E commerce
E commerceE commerce
E commerce
 
Social media 111129
Social media 111129Social media 111129
Social media 111129
 
Suchmaschinenmarketing
SuchmaschinenmarketingSuchmaschinenmarketing
Suchmaschinenmarketing
 

Website Konzeption

  • 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. //Facts Quelle: http://news.netcraft.com Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 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. //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. //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. //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. //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. //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. //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. //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. //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. //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. //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. //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. //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. //3.1 Exkurs: Technisches Konzept - Frontend Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 17. //3.1 Exkurs: Technisches Konzept - Backend Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 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. //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. //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. //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. //3.1 Exkurs: Technisches Konzept - Welches CMS? Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 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. //3.2 Feinkonzeption - Informationsarchitektur - Sitestruktur - Suche - Wireframes Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 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. //3.2 Feinkonzeption - Informationsarchitektur Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 27. //3.2 Feinkonzeption - Informationsarchitektur Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 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. //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. //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. //3.2 Feinkonzeption - Sitestruktur Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 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. //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. //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. //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. //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. //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. //3.2 Feinkonzeption - Wireframes Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 39. //3.2 Feinkonzeption - Wireframes Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 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. //4. Tools und Software Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 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. //5. Core and Paths Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 44. //5. Core and Paths Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 45. //5. Core and Paths Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 46. //5. Core and Paths Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 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. //6. Wireframe „Saturn“ Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 49. //6. Website „Saturn“ Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel
  • 50. //Vielen Dank! Neue Medien / Internet // WS 2011/2012 // Prof. Dr. Thomas Lehning // Website Konzeption // Kim Kreiser // Lena Tippel