Course MD400 | Jochen Braun , Hala Gabr , Sarah Sallam

Simplicity is when someone takes care of the details - Oliver Reichenstein



  • Start working on your FINAL project - check the guidlines here
  • Best to use Google Chrome to view your work.
  • Final html/css files of the Smashing Website as well as the reset.css file can be downloaded here.

Course description

Introduction to the principles and characteristics of Web Design. This course will go through all steps, that are necessary to complete a web design project, using the example of redesigning the Media Desgin WIKI. That means:

1. Plan
2. Design
3. Implement

The students itself will work on their own portfolio website within given conditions. The main focus will be on the implementing step. Here the students will be introduced to the main Web-technologies: HTML 5, CSS 3 and Javascript.


source: iA


This is a guidline – the actual content may change during the semester.

NOTE: Feedback regarding screenlayouts will take place in the office hours:
Sundays 8am - 11am | 1pm - 3pm

1 Mar 09 Introduction/Course overview Introduction to Web Design and Web Design planning
2 Mar 16 Creative Brief Who is the target group, how do we communicate with them, which goals do we want to reach
TASK: Write a creative brief about your own portfolio
3 Mar 23 Sitemaps Creating a sitemap and analyzing the different Page- and Contenttypes
TASK: Make an extended sitemap about your portfolio and think about communicational improvements for the wiki
4 Mar 30 Introduction into Interface Design How to create a Wireframe - understanding grid-systems, layout-types, screenresolutions and designing in Photoshop - what can be designed?
ASSIGNMENT 01: Create a Screenlayout for your own portfolio, Deadline: May 11th
5 Apr 06 Introduction into HTML and the Internet The internet – how does it work? HTML - history, principles of the syntax and tags - An introduction into the mostly used tags
- Original Web Page and Logical Structure

- HTML Structure

6 Apr 13 The principle of CSS and HTML Understanding classes and IDs – How to manipulate positions and appearance of HTML tags
7 Apr 20 Styling Text-elements via CSS Understand inheritance, different list of available fonts and the possibilities of changing font-appearance
8 Apr 27 Pictures, Videos, Links and Downloads Understand how to save pictures, videos, pdfs etc. for web and how to place them. What are relative and absolute urls? How to embed a video from youtube or vimeo? How to use flickr?
9 May 04 Repetition of the most important tags and questions -
ASSIGNMENT 02: Manipulate a given HTML page, change content and add another page with a given design, guidelines will be announced | Deadline: May 18th
10 May 11 Introduction into javascript and jquery Understand how javascript works, how to embed a .js file and how to make it work using the example of a slideshow
11 May 18 Canvas Understand what a canvas is, the different possibilities and how to create different types of canvas elements
12 May 25 Done! How to get a site online What is a provider? How to get a url? What is FTP? -


Create a screendesign of your own portfolio according to your creative brief, sitemap and wireframe. Take advantage of the office hours or make appointments.
DEADLINE: Sunday May 22th, at 10am.

To submit:
1. Creative brief (pdf)
2. Sitemap (pdf or mindmap)
3. Wireframe(s) (pdf)
4. Screendesign(s) (jpg for each page-type, that will occur on your site)

Everything grouped in one .zip-file, named like this: "gucID_Name_GroupNo"
Mail to media.webdesign.guc@gmail.com with the subject "Assignment01_gucID_Name_GroupNo"
If your .zip turns out to have a file-size more than appr. 5mb, check your files again, most probably you saved them in the wrong way.
Mail to media.webdesign.guc@gmail.com with the subject "Assignment01_gucID_Name_GroupNo"
There will be deduction for those being late or not following these guidlines


Reproduce this tutorial: http://www.smashingmagazine.com/2009/08/04/designing-a-html-5-layout-from-scratch/
Change one picture and 4 CSS styles of your choice.
Deadline: Sunday May 22th, at 10am.

Assignment 02 submission guidlines

  • Group all your folders and files (index.html, the css folder with its style.css file, and the images folder with all the images you used) in one big zipped file.
  • Name that zipped folder as follows; "gucID_Name_GroupNo". Stick to this naming convention; first your guc ID number followed by an underscore, then your name followed by an underscore then your group number.
  • List the 4 CSS styles you changed.
  • Send this zipped folder to media.webdesign.guc@gmail.com with the email subject of "Assignment02_gucID_Name_GroupNo"
  • There will be deduction for those being late or not following these guidlines


Implement your screendesign of your portfolio into a working HTML-site.

DEADLINE: Sunday June 19th, at 10am.

  • Download FINAL Project Submission Guidlines
  • Bonuses will be given to students who use Javascript/JQuery, but a total grade of 100% is the maximum.
  • Cheating cases or students who did not implement the website themselves will be given a zero in the final project.


By the end of the course students will be able to: 1. understand how the internet basically works 2. plan a basic website using sitemaps 3. design a basic website using photoshop 4. to implement basic HTML structures and to shape them via CSS 5. to include javascript libraries or frameworks and to use them


Firebug is a glorious plugin for firefox, that helps to understand and to debug CSS, HTML and Javascript

CSS 3 info is good resource for CSS 3 questions - often with examples.

Processing.js gives us a way to include processing projects easily in webpages - same principle as jquery etc - have a look.

Dive Into HTML5 is a HTML guide book to be published by O’Reilly. The chapter ‘What Does It All Mean’ offers a clear explanation on the basics of HTML5 semantics/elements.

W3Schools provides you with a introduction and a reference list of all HTML 5 elements.

W3C's complete overview!

Works - a simple introduction into CSS3

O'REILLY's Designing Web Interfaces

O'REILLY's Designing Web Navigation

O'REILLY's HTML5: Up and Running


SESSION 01 - What is webdesign

SESSION 02 - The creative brief

SESSION 03 - Sitemap


Video, Slideshow and Overlay source code using jquery

Creative Brief guideline

Creative Brief WIKI-Redesign Version 01
feel free to send your comments to media.webdesign.guc@gmail.com

The Photoshop sample from the lecture


- Hunt studio
- Renascent
- okdeluxe
- SuperReal
- Wieden+Kennedy
- Erica Dorn
- David Löhr
- ill
- PetPunk


1. Creative brief

- summary
- Target group(s)
- Perception
- Communicational strategy
- Single minded message

2. Sitemap

- What is the content? Gather all the information you want to show on the website (projects, pictures, videos, etc.)
- what kind of page-types - how is the content structured? (everything in one page? one navigational page for project overview? startpage, etc)
- name your content-types as a note for each page type (headlines, pictures, subheadlines, etc)?

3. Wireframe

- Where to place which elements and functions on each page type
- Prioritise and built groups

4. Screendesign

- Choose a font (for running text -> typetester)
- Setup photoshop (72 pixels/inch, rgb, 8bit, pixels, width related to the devices your target group is using)
- Gridsystem related to your choosen type
- Color scheme, shades
- What about Pictograms?
- Create groups and prioritise within in your content using whitespace and a consistent graphical language
- Picture language or how to present your work in a consistent way