Design Basics

From WebScience

Jump to: navigation, search

Fact Box
Module Foundations and Principles I
Uwe Stoklossa
Credits 3
Term Term 1, Term 2
Course is not required
Current course page Winter 2016
Active No

The Big Idea

Without the existence of “Design”, only a small exclusive circle of computer specialists would be capable to use the manifold chances that became possible with computer technology and networks. Only the development of graphical user interfaces (GUI) has made the success of personal computers and the internet possible. In the process of the HCI (Human-Computer-Interaction) nearly all interaction from computer to human is working through the human eyes. Knowledge about the Basics of Design are therefore essential basic requirements for everyone, who is involved in the development process of applications, websites and any web-based solution. Especially because Design can be the major factor which decides over success or failure of any web based system, or service.

Intended Learning Outcomes

After attending the course, the students are able to recognise the connection between function and design, critically analyse it and develop target-oriented, integrated solutions in communication and design.

For this purpose they

- are aware of the indispensable correlation between composition and perception by means of the „Gestalt Theory“ after Max Wertheimer.

- know the fundamentals of visual communication in use of colour, shape, typography and pictures.

- are proficient in usage of basic design-related technical terms.

- have the ability to identify the best possible solution for a task from a variety of design-alternatives and to communicate the reasons for their decision comprehensible.

Structure of the Course


The importance of “Design” in any matter of communication is demonstrated in various media. A brief history of the research development about seeing and perception in distinct academic and artistic disciplines is given according to Donald D. Hoffman [1] and Uwe Stoklossa [2].

Basic Laws of Visual Design

To use and understand the power and possibilities of visual design we investigate and analyse some fundamental phenomena of seeing and perception: Line, Shape, Negative Space, Volume, Value, Color, Texture, Gestalt, Rhythm, Visual Hierarchy, Balance [3] and the "gestalt principles" after Max Wertheimer [4] [5].

The Power of Type and Words

Text and Type are incredible powerful tools in communication, but are very often neglected and overseen, when it comes to design. We take a closer and indispensable look on the different typefaces, their characters and different styles, basic rules of typesetting, typographic technical terms and a brief history of the most important typeface designers and their work [6] [7]. But we will not only focus on the technical part of typography and text, we discover the underestimated impression of the written word. Copywriting naturally is a part of design and we survey the effect of text-tonalities, the meaning of Corporate Language and how you can create an distinctive design just by distinct wording.

Pictures and Picture Language

Is a Picture really worth a thousand words? This has to be discussed intently. Without question pictures are the most direct way to the human brain in visual communictaion. Pictures work without text, intercultural und transnational. To achieve that aim we gather knowledge about composing, layout and picture language.

Visual Seduction

No matter what should be designed, there is always the challange to stick out of the mass of many competitors. We will learn how you can use the knowledge of the phenomena of perception, type, words and picture language to attract the attention of a recipient. And we learn how important it is to have a carefully and clear worded task in mind, to find a successful way to communicate the intended message.

Analysing Design

Especially with all the recent developments in science there are multiple and powerful tools to research and analyse recipient behaviours which pretend that it would be possible to get exact insights in matter of successful visual communication. We will have a closer look on these techniques and the results of their analysis and discuss their pros and cons with a thematic focus on web-design. [8]

Didactic Concept, Schedule and Assignments

The course concept comprises basic readings, online workshops, online group work and an introductory and final on site presence. After a first introductory lecture on site, the subject is treated in three online workshops, that are supplemented by a session on site. Online workshops are held on three evenings with a duration of three hours each.

Introductory lecture on site

The introductory meeting deals with organizational course details, a workshop with some exercises and experiments to point out the relevance of visual design in any process of communication and a short lecture about the different academic and artistic disciplines and their insights about visual perception.

1st Online workshop

This workshop consists of two phases: The first part is held in a seminarial form. The course subject (Basic Laws of Visual Design) is presented in a highly interactive matter, open questions are discussed with the lecturer and among the students. For the second phase students will work on different exercises and experiments to analyse and verify these "Basic Laws" in scenarios correspondent to reality. Group and individual presentations and a concluding discussion finish this session.

2nd Online workshop

The second workshop is based on basic readings of chapter 3 (The Power of Type and Words) and 4 (Pictures and Picture Language). Each chapter is completed by a task which is dealt with in groups or individual. Additional students will form groups and different scenarios are presented to the groups. In a moderated discussion the groups work out a concrete communication aim based on their scenario. Findings are discussed in a concluding plenary session.

3rd Online workshop

Main topics of the third workshop are chapter 5 (Visual Seduction) and 6 (Analysing Design). After basic readings on the topics, the participants continue with their work from the 2nd workshop, refine their basic concepts in terms of uniqueness, distinctness to competitors and creativeness. Findings are discussed in a concluding plenary session.

Wrap-up session on site

This on site workshop is dedicated to present the solutions for the final exercises in plenary form, clarify open questions of the students concerning course issues and to summarize the content of the workshops. (90 minutes).


The final grade is the result from 10 exercises given during the course.
60% from practical exercises during the online-sessions,
40% from the final practical exercises, which will be presented during the final onsite-session.
No written examination.


  1. Hoffmann, Donald D.. Visual Intelligence: How We Create What We See. W. W. Norton & Company, 2007. p. 1 - 46. 
  2. Stoklossa, Uwe. Advertising: New Techniques for Visual Seduction. Thames & Hudson, 2010. p. 200-259. 
  3. Hashimoto, Alan and Clayton, Mike. Visual Design Fundamentals: A Digital Approach. Charles River Media, 2009. p. 1 - 52. 
  4. "gestalt principles". Retrieved 2 November 2010. 
  5. "Slideshow "Gestalt Theory"". Retrieved 3 November 2010. 
  6. "Slideshow "Typographic Essentials Part 1"". Retrieved 4 November, 2010. 
  7. "Slideshow "Typographic Essentials Part 2"". Retrieved 4 November, 2010. 
  8. Josephson, Sheree. Visualizing the Web: Evaluating Online Design from a Visual Communication Perspective: 1. Peter Lang Pub Inc, 2010. p. 1 - 21, 123 - 140, 165 - 182. 

Past Course Pages