Designing for the web
The Big Idea
Designing for the web is a very dynamic subject. Not only do we have to cope with the complexity of interactive communication on a mulitude of devices, we also need to be aware of constantly evolving web technlogies and the opportunities and limits they imply. But while technologies constantly emerge, the core principles and the basic building-blocks of webpages haven´t changed since the beginning of the world wide web: The HyperText Markup Language (HTML) is still the essential notation that is used to indicate how content should be displayed. Therefore knowledge about the particularity of this display method is substantial for any creative endeavor on the web.
This course will lay the foundation for designing web pages and online services by first introducing the fundamental concepts of HTML and CSS. From there we will explore typography on the web, grid systems and modern, open source based animation technologies.
Eventually students will gain an understanding of the whole web design process. We will make use of a real life example to illustrate the efficiency of wireframes, the need of mockups and the following steps towards a working prototype.
Intended Learning Outcomes
- Learn to write basic HTML / CSS code. Ability to sketch ideas with HTML
- Ability to evaluate the advantages and disadvantages of different web technologies and to choose the appropriate from a set of available technologies.
- The students will get an understanding of the web design process from the early stage development of an idea to a working prototype
Structure of the Course
Designing for the web requires a commitment to perpetual learning of new technologies, methods and shifting user expectations. Throughout the course the most relevant online resources on web design and web development are made available. Participants will get to know the essential tools for coding, wireframing and prototyping.
The course will put the students on the path to html5 programming as well as give them an understanding of evolving technologies and its implications on the future of interactive design.
During each session the students will be introduced to the most influentual web designers and web developers today. We will take a closer look at their innovate projects and analyze the underlying concepts.
Dive into HTML
HTML is a hyper text markup language created to give content structure and meaning. CSS, also known as cascading style sheets, is a presentation language created to give content style and appearance. Whereas HTML determines the semantic structure of content on a web page while CSS determines the style and appearance of this content. The two languages are independent of one another. It is important to understand the differences between the two languages, their syntax, and the common terminology.
Diving into code is the only way to approach this. But before beginning our journey to learn HTML and CSS we need the right tools, which at its core are just a texteditor and a modern browser. Students will learn to effectively use both for web development.
Typography on the Web
In the beginning of the web there was just text. Typography for the web has come a long way since Tim Berners-Lee laid out the foundation for the world wide web in 1991. Until recently typography on the web was limited to a small “safe list” of only nine typefaces which were supported across all browsers. Today things are different. Web fonts allow web designers to use fonts that are not installed on the viewer's computer and we have access to thousands of oftenly free typesets. Combined with the new creative possibilites of CSS3 we now truly have the opportunity to make web sites come to life through great typography.
One of the driving forces of HTML5 is to make it easy to include and handle multimedia and graphical content on the web without having to resort to proprietary plugins and APIs; the new <canvas>, <svg>, <video>, <audio> tags allow for much of this. WebGL is a context of the canvas HTML element that provides a 3D computer graphics API without the use of plug-ins.
Grid Systems and Responsive Design
Web access methods are becoming increasingly diversifyied: web designs today must function in a multitude number of ways: iPad, iPhone, Android mobile devices, desktops, netbooks. The term Responsive Design basically describes a concept of layouts that are fluid and flexible.
Didactic Concept, Schedule and Assignments
In order to be able to design for the web, it is essential to gain knowledge about the fabrics of modern web pages and browser capabilities. Therefore, for the start we will dive into coding HTML and CSS.
Introductory lecture on site
The introductory meeting deals with organizational course details, a workshop to address basic concepts of designing for the web and to clarify unresolved questions.
1st Online Workshop
In the first session we will dive into the world of HTML and CSS. Students will learn to write basic HTML and CSS code. One needs to experience the construction of a basic html page by hand in order to get a profund understanding of the terminology, the behaviors of specific elements as well as of the web publishing process in general.
We will also cover the basics of web typography, including a short history and an outlook for the new arising possibilties (and problems) with webfonts. At the end of this workshop students will not only be familiar with the basic terminology including tags, elements, attributes, selectors and properties, they will also get a glimpse why the best web designers are coders, too.
These links introduce the basic ideas of screen and web design. Depending on how much knowledge you already have about websites and the technologies behind that, you may find these a bit basic.
– 20 things i learned about the browser and the web
Any text editor (even Word in a pinch) can produce code for the web. During the online session I will be using Dreamweaver from Adobe (download and free trial available here: http://www.adobe.com/products/dreamweaver.html), but you can use other tools.
CSS Properties Index
2nd Online Workshop
The second session will give evidence of what HTML5 can achieve. We will examine excellent demos and real life projects which incorporate the new technologies like CSS3 and Canvas animations, Geolocation and WebGL. We will discuss the implications and chances from the design perspective.
Furthermore we'll take a look at strategies for landing/ launching pages.
References for the 2nd Online Workshop
– The Current State of Web Design
HTML5 & CSS3 Browser Support
When can i use
HTML5 Video Player Comparison
Free HTML Editor:
3rd Online Workshop
The last session will cover the concept of Responsive Design. We look deeper into this method of designing web pages which magically adapt their layout to multiple devices. We examine the criteria for a web design which can be considered “responsive” by looking at excellent examples of responsive websites.
We'll also review your proposals for the submission and discuss.
– Media Queries - Examples of responsive webdesign
Boilerplate for Responsive Development
Responsive Design Bookmarklet
HTML5 Semantics and good coding practises
Wireframing in the final product
Wrap-up Session On Site
During the on site workshop we will resume the learnings from all sessions. Students present a personal summary of their newly gained knowledge of designing for the web.
The students submit a launching page individually. Each submission comprises:
The submission is due with the design project.
Past Course Pages