Tutorial :Teaching principles of web design [closed]


So, another teaching question. I'm teaching this course in web development and the school i'm with has a recommended text that we should use but i feel that most of the stuff is pretty surface level for the "principles of web design" area, eg, these are the topics:

  • Browsers
  • Platforms
  • Standards
  • Monitor Resolution
  • Connection speed and methods and Audiences

Do you think this is sufficient to introduce web design concepts?


Is this a course for Graphic Designers to learn how to design web pages?

In that case it's all about the major elements (browsers, fonts, colors, pages, applets, etc.), and how to use them to look pretty.

Is this a course for Programmers to learn how to build web apps?

Then you need to dig deep into the protocols, security, and boat load of technical issues associated with getting things to run over the web (it's horribly complex technology).

Is this a course for Interactive Designers to learn how to build interfaces?

Then you need to consider the user's point of view, and how to make their experience with the tools friendlier and more productive.

"web design" is a pretty generic term :-)



I would add "usability" as topic. I recommend a book by Steve Krug

Don't Make Me Think
A Common Sense Approach to Web Usability

Usability design is one of the most important - yet often least attractive - tasks for a Web developer. In Don't Make Me Think, author Steve Krug lightens up the subject with good humor and excellent, to-the-point examples.

Another excellent resource is Nathan Bower's UX Hero blog about User Experience Design.


I think that web design and web development are separate disciplines. The topics that you are listing cover neither.


Web Design - color and color reproduction considerations, image formats, design tools, page composition and code implications, HTML basics, CSS, information architecture, usability and usability metrics, RIA tools ...

Web Development - HTTP protocol, HTML, CSS, Javascript, server-side languages, runtime and deployment considerations, performance and scalability, database basics, Ajax, Flex, Silverlight, ...

The list is endless, but in essence, web design is about the presentation and structuring of information, web deveopment is about, well, development.


Given that your students are IS students, probably the most important thing missing from your list is usability---it's something they should be aware of and may not get from other courses. Jakob Nielsen's textbooks are pretty good.


I'd like to see Accessibility within any web design/development teaching plan. With increasing legislation, seems to me to be quite a logical basis on which to base a professional career.


Absolutely not. you need much more meaning in the class.

Web design is ultimately about the organization of information. The design is about the efficiency of the visual presentaton. to understand what good organization is, they need to know why organization works and what it does.

Everyone knows the internet is important but not everyone knows why.

I would add the following:

-> The rearangement of space and time from the internet: Websites bring storefronts into peoples livingrooms, let them read/view/watch things on thier own time. Email and forums let people post questions and answers on thier own time. chats let people talk while multitasking. This is how the effectiveness of web design must be measured how it inhances or impedes these activities.

-> Accelerated Sharing: Allows information to be organized which makes two way opinion sharing more accesible. Targeted and organized information gets read, specific oppinions get voiced. A minority opinion in a small town can collaborate with a shared oppinion across the continent.

I would modify the original points as follows to be broader concepts:

combine Browsers,Standards, Monitor resolution, to be: -> Viewed From Multiple Places: Why everything on the internet must be built for a variety of settings, contrast it with a printed page where the size and medium is predictible, with the Browser/OS/User preference differentiation of the web. And add mobile devices and disabilities to the list.

Expand the Standards point to include open source software and the concept of how proprietary software became a barrier to collaboration which is what is untimately needed on the internet.


Do the students know HTML/CSS coming into the course or are you teaching it to them? If they still need to learn HTML then this will limit what you can teach during the course of the semester. It is imperative that they have a comfortable and accurate understanding of HTML.

If there is a solid foundation of html then the concepts that are taught in usability, accessibility and standards will come much easier. Make sure you stress that html is used to describe the content within, not to design a webpage. That's the job of CSS.

In order to teach usability, accessibility, etc. you should assign reading. Pick out a few blogs, some tutorial site or any place on the web where there is an intelligent discussion of web design. This will push the students to think about the principles of web design while learning the code. This will also show them the resources to learn on their own.

One of the skills that is rarely taught in classes (at least in my experience) is how to learn something on your own. With web design and web development this skill is extraordinarily important. So teach them how to google, where to go when google fails and then places to ask questions. I would say get rid of the book and make the class resources entire digital. The students wouldn't need to buy a book, the material would be much more up to date and they learn skills that they can use once the class is done.

I hope this helps because I would love to see a change in the way that web design is taught. I am in a university and have taken a couple of disappointing web design classes. If you would like me to expand on any of the points, just let me know.


First of all, there is a difference between a Web Developer and a Web Designer.

The Developer is the coder, who uses HTML, CSS, JavaScript, PHP, ASP, MySQL and other languages in combination to make a website work.

The Designer is the person who comes up with the graphic looks of a site. This person uses a program, usually Adobe Photoshop, to create the looks of a site, and then gives the completed look to a developper, sothat this person knows what to work on.

Second, the course itself.

At the very start, you should make clear how the different languages are separated and how they work togheter.

  • (X)HTML: Markup Language. It gives definition to what the text actually is. Is it and address, is it a paragraph, is it a hyperlink, or something else?

  • CSS: Used to define the looks of a site, the font used, pixelsize, location of text and images and so on.

  • JavaScript: Used to influence the behavior of a site upon certain things happening. A great example is this site. The JavaScript ensures an easy to use environment.

Somuch for clientside. That should take a year on it's own. Then serverside, things like PHP and such, which much easier if you've spent some time on HTML/CSS/JavaScript without having to worry about serverside languages.

Note:If u also have question or solution just comment us below or mail us on toontricks1994@gmail.com
Next Post »