Logo der HdM
Veranstaltungsbeschreibung

224353a Screendesign

Zuletzt geändert:26.07.2016 / von Carlsburg
EDV-Nr:224353a
Studiengänge: Studienübergreifendes Angebot - Minors, Prüfungsleistung im Modul Screendesign in Semester 1
Häufigkeit: immer
Studienübergreifendes Angebot - Minors, Prüfungsleistung im Modul Screendesign in Semester 1
Häufigkeit: S17; W17/18; S18; W18/19; S19; W19/20; S20
Werbung und Marktkommunikation (Bachelor, 7 Semester), Prüfungsleistung im Modul Screendesign in Semester 3 4 6 7
Häufigkeit: immer
Dozent: Prof. Dr. Jürgen ScheibleDetails zum Dozenten
Sprache: Englisch
Art: V
Umfang: 2 SWS
ECTS-Punkte: 3
Workload: siehe Modulbeschreibung
Prüfungsform:
Bemerkung zur Veranstaltung: Teilnehmerbeschränkung
Beschreibung: In this course students will be introduced to conceptual and technical principles for designing and creating digital screens.

Firstly, by being introduced to simple HTML & CSS, students learn through hands-on exercises how to build a screen screen from scratch.

Secondly, we move on to add navigation and interactive elements to our screens such as navigational menues, buttons, web input elements such as text input fields, pop-up menues, etc.

Thirdly, by going through practical exercises we look at the conceptual basics of screen design such as human perception, placing of screen elements, colors and color schemes, fonts as well as visual look & feel guides.

Fourthly, by learning how to use wireframe tools and stencils, students will gain practical understanding of the design process for creating digital screens and User Interfaces.

Fifthly, we learn how to create mobile web apps for smartphones and tablets.

Sixthly, we learn how to do usability testing on the screen that we created earlier.

The course consists of theoretical introductions to relevant topics as well as hands-on exercises of creating functional screen designs that can be tested and evaluated in a browser and on actual devices (Android smartphone and iPad).

The course will be held mainly in English and the materials will be available mostly in English. German may occasionally be used as a means of help to students.

Creating a static screen from scratch
  • HTML & CSS introduction
  • Basic layout principles
  • Adding text and an image


  • Navigation and Interaction
  • Adding navigation menu
  • Buttons, links
  • Web input elements such as text input fields, pop-up menues
  • HTML5 and interactive, generative graphics


  • Mobile Web Apps
  • How to create Mobile apps and Web apps?
  • Using HTML5 & CCS3 for app design
  • Touch screen design
  • Gestural interfaces


  • Introduction to conceptual principles for Screen design
  • Human perception
  • Screen elements & characteristics
  • Typography, fonts
  • Colors and color schemes


  • Design process
  • Designing navigational models
  • Wireframe tools and stencils
  • Media formats for web and mobile design
  • Visual style, look & feel guides
  • Testing & evaluation


  • Usability testing
  • Introduction to usability and how to use guidelines in practice
  • Introduction into the basics of Human Computer interaction
  • standards & specification


  • Critical reflection of digital media products
  • How can a successful screen design be analyzed and evaluated?
  • What are applicable principles for suitable design judgment?
  • What are the characteristics of good interaction design?


  • Add-on topics
  • Multi-Screen design
  • Mobile advertising - Location based services
  • Multimodal interfaces


  • The course will be marked based on
    1) a screen design draft that has to be created
    2) the documentation that relates to it.

    English Abstract: In this course students will be introduced to conceptual and technical principles for designing and creating digital screens.

    Firstly, by being introduced to simple HTML & CSS, students learn through hands-on exercises how to build a screen screen from scratch.

    Secondly, we move on to add navigation and interactive elements to our screens such as navigational menues, buttons, web input elements such as text input fields, pop-up menues, etc.

    Thirdly, by going through practical exercises we look at the conceptual basics of screen design such as human perception, placing of screen elements, colors and color schemes, fonts as well as visual look & feel guides.

    Fourthly, by learning how to use wireframe tools and stencils, students will gain practical understanding of the design process for creating digital screens and User Interfaces.

    Fifthly, we learn how to create mobile web apps for smartphones and tablets.

    Sixthly, we learn how to do usability testing on the screen that we created earlier.

    The course will be held mainly in English and the materials will be available mostly in English. German may occasionally be used as a means of help to students.

    The course will be marked based on 1) a screen design draft that has to be created and 2) the documentation that relates to it.

    Literatur:
  • Ben Shneiderman, Catherine Plaisant: Designing the User Interfaces, 2005

  • Cooper, Reimann, Cronin: About face 3 : the essentials of interaction design Indianapolis, Wiley, 2007

  • Moggridge, Bill: Designing interactions, Cambridge, MIT, 2007

  • Saffer D.: Designing Gestural Interfaces, O’Reilly

  • Alan Dix, Janet Finley, Gregory Abowd, Russell Beale: Human-Computer Interaction, 2004

  • Luke Wroblewski: Mobile first, 2001

  • Pipes , Alan:Zeichnen für Designer. München, 2008

  • Krisztian/Schlempp-Ülker: Ideen visualisieren : Scribble - Layout - Storyboard. Mainz, 2004

  • Hochuli, Jost: Das Detail in der Typografie, 2011

  • Samara , Timothy: GrafikDesign Praxis : ein Leitfaden zum Erfolg ; [Format, Farbe, Typografie, Bild, Layout], München, 2007

  • Stapelkamp , Torsten: Screen- und Interfacedesign : Gestaltung und Usability für Hard- und Software, Heidelberg: Springer, 2007

  • Bernhard Preim, Raimund Dachselt: Interaktive Systeme 1: Grundlagen, Graphical User Interfaces, Informationsvisualisierung. Springer, Berlin, 2010



  • Weitere Literatur finden Sie in der HdM-Bibliothek.
    Internet: -
    Hinweis zu Terminangaben: Bitte beachten Sie evtl. vorhandene aktuelle Stundenplanänderungen unter
    www.hdm-stuttgart.de/studenten/stundenplan/aenderungen.
    Regelm. Termine:
    Mittwoch11:45-13:15231, Nobelstraße 10(Teilnehmerbeschränkung)
    © Hochschule der Medien 2016 | Impressum | Hinweise zum Datenschutz Login