Designing for the web

From WebScience

Jump to: navigation, search


Fact Box
Module Design
Course
representatives
Silvio Barta
Credits 3
Term Term 1, Term 2
Course is not required
Current course page Winter 2016
Active No


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.

HTML5

2011 was a big year for the latest iteration of HTML and for the advancement of web development in general. HTML5 became widely adopted, especially for the mobile web. 
Enormous prospects have been made, which led to a new generation of websites and web-applications. 
Technically the standard of HTML5 is a specification on the W3C site where all new tags, attributes, new APIs and the new Canvas element are described, but HTML5 has also become an umbrella term for the whole generation of new technologies, including CSS3 new JavaScript APIs, SVG, Geolocation, Webfonts and even WebGL.

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.


References for the 1st Online Workshop

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 [1]
– Don't fear the Internet [2]
– What is HTML? Back to Basics [3]
– What is HTML? The anatomy of an HTML5 document [4]
– HTML5 Pocketbook [5]
– Web Design is 95% Typography [6]
– Jason Santa Maria on Web Typography [7]
– 16px for Body Copy. Anything Less Is A Costly Mistake [1]
– Type study: Is anyone paying attention? [8]
– Make Your Mockup in Markup [9]


Essential tools:

Text Editor
http://www.sublimetext.com

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.

Typetester
http://www.typetester.org

CSS Properties Index
http://meiert.com/en/indices/css-properties

Color Schemes
http://colorschemedesigner.com

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 [10]
– HAKIM HTML5 Experiments [11]
– Following A Web Design Process [12]
– Shortening the build-measure-learn cycle with clickable mockups [13]
– Web Design is Product Design [14]
– Design for Developers [15]
– iPad: Scroll or Card? [16]
– If You Can Think, Design & Code, You Win [17]
– Craftsmanship in Designing Websites [18]


Support tools:

HTML5 & CSS3 Browser Support
http://www.findmebyip.com/litmus/

When can i use
http://caniuse.com/

HTML5 Video Player Comparison
http://praegnanz.de/html5video

Support Details
http://supportdetails.com


Templates:

Free HTML Editor:
http://kompozer.net


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.


References for the 3rd Online Workshop

– Media Queries - Examples of responsive webdesign [19]
– Responsive Web Design [20]
– Responsive Design Techniques [21]
– Understanding the Elements of Responsive Web Design [22]
– Mulitscreen Patterns [23]


Essential tools:

Boilerplate for Responsive Development
http://www.getskeleton.com/

Responsive Design Bookmarklet
http://www.benjaminkeen.com/misc/bricss/


Recap: HTML5 & CSS3

HTML5 Semantics and good coding practises
http://www.aniketpant.com/article/html5-semantics-and-good-coding-practices

Wireframing in the final product
http://www.webdesignerdepot.com/2011/04/html5-and-css3-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.

Examination

The students submit a launching page individually. Each submission comprises:

  • the launching page in HTML and an open format (if an editor was used to generate this)
  • documentation as a PDF with the general concept (2-3 paragraphs) and all sources for material used (templates, images, etc.)

The submission is due with the design project.

References

  1. 1.0 1.1 "20 things i learned about the browser and the web". http://www.20thingsilearned.com. Retrieved 1 February 2012. 
  2. "Don´t fear the Internet". http://www.dontfeartheinternet.com/the-basics/fear-not. Retrieved 1 February 2012. 
  3. "What is HTML? Back to Basics". http://designshack.net/?p=25363. Retrieved 1 February 2012. 
  4. "What is HTML? The anatomy of an HTML5 document". http://designshack.net/articles/html/what-is-html-the-anatomy-of-an-html5-document. Retrieved 1 February 2012. 
  5. "HTML5 Pocketbook". http://adactio.com/extras/pocketbooks/html5. Retrieved 1 February 2012. 
  6. "Web Design is 95% Typography". http://www.informationarchitects.jp/en/the-web-is-all-about-typography-period. Retrieved 1 February 2012. 
  7. "Jason Santa Maria on Web Typography". http://www.lukew.com/ff/entry.asp?1352. Retrieved 1 February 2012. 
  8. "Type study: Is anyone paying attention?". http://blog.typekit.com/2011/08/03/type-study-is-anyone-paying-attention. Retrieved 1 February 2012. 
  9. "Make Your Mockup in Markup". https://24ways.org/2009/make-your-mockup-in-markup/. Retrieved 1 February 2012. 
  10. "The Current State of Web Design". http://www.smashingmagazine.com/2010/05/04/web-design-trends-2010. Retrieved 1 February 2012. 
  11. "HAKIM HTML5 Experiments". http://hakim.se/experiments. Retrieved 1 February 2012. 
  12. "Following A Web Design Process". http://www.smashingmagazine.com/2011/06/22/following-a-web-design-process. Retrieved 1 February 2012. 
  13. "Shortening the build-measure-learn cycle with clickable mockups". http://www.designstaff.org/articles/shortening-the-build-measure-learn-cycle-2012-02-06.html#. Retrieved 1 February 2012. 
  14. "Web Design is Product Design". http://andyrutledge.com/web-design-is-product-design.php. Retrieved 1 February 2012. 
  15. "Design for Developers". http://learningbyhacking.posterous.com/design-for-developers. Retrieved 1 February 2012. 
  16. "iPad: Scroll or Card?". http://www.informationarchitects.jp/en/ipad-scroll-or-card. Retrieved 1 February 2012. 
  17. "If You Can Think, Design & Code, You Win". http://flyosity.com/application-design/if-you-can-think-design-code-you-win.php. Retrieved 1 February 2012. 
  18. "Craftsmanship in Designing Websites". http://sixrevisions.com/web_design/craftsmanship-in-designing-websites. Retrieved 1 February 2012. 
  19. "Media Queries - Examples of responsive webdesign". http://mediaqueri.es. Retrieved 1 February 2012. 
  20. "Responsive Web Design". http://www.alistapart.com/articles/responsive-web-design. Retrieved 1 February 2012. 
  21. "Responsive Design Techniques". http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies. Retrieved 1 February 2012. 
  22. "Understanding the Elements of Responsive Web Design". http://sixrevisions.com/web_design/understanding-the-elements-of-responsive-web-design. Retrieved 1 February 2012. 
  23. "Mulitscreen Patterns". http://precious-forever.com/2011/05/26/patterns-for-multiscreen-strategies/?PHPSESSID=8eoarqfetfd0kbnko3vq5fv2u7. Retrieved 1 February 2012. 

Past Course Pages