Tutorials - a guide to the language of web design (Web Design from Scratch)

Tutorials

WDFS Tutorials are practical guides that cover the major concepts of web design.

The tutorials don't tell you how to create effects in Photoshop, Flash or CSS.

This is about the essential, timeless skills: how to make sense, how to put together a design that is appealing to use as well as to look at.

Design is a dialogue

Web pages communicate with users via a subtle and complex language. This section analyses that language and shows how to use it to communicate.

Web pages communicate through many subtle visual clues - messages transmitted by every element: the text, images, navigation, and the relationships between them.

Together, these messages form a visual body language, which conveys meanings and connotations that the person using the page decodes, often unconsciously.

These Tutorials describe the fundamental elements of web body-language.

How to design web pages that work

The tutorials in this section address the different levels of putting together a web site.

Top ^ Next topic »

Comments

What tutorials would you like to see? Post a message here.

Ben Hunt - 11:45 on 05 Jul 2004

I want to thank you for your wdfs site. What a treasure trove! Eventually I want to create my own site, I saved your site in my favorites and will come back to it later.

Raffi - 08:30 on 13 Jul 2004

This is a precious site, but, as someone else already suggested, please streamline navigation with simple next/previous links

caffènero - 02:24 on 07 Aug 2004

Your headline spills over into the copy when the page is viewed using Safari.

Mark - 06:45 on 18 Aug 2004

i want to learn some classical layout of indian style

bharat - 06:04 on 21 Sep 2004

You appear to have ignored the importance of Audience which is a Primary cosideration in any communication. Who do you want to talk to? What kinds of communications are best suited to this audience?

Jerry Burke - 01:35 on 28 Sep 2004

How about a tutorial on using photoshop to design the website etc, and then how you take it all into dreamweaver

spacecatz - 06:00 on 10 Oct 2004

spacecatz, I'm really keeping to the more general principles of design, rather than teaching production skills. There are loads of good sites that will show you how to build a site in Photoshop / Dreamweaver, but not enough on how to be a designer. If I tried to do that too, this site would end up a bit more confusing to use.

Ben Hunt - 10:36 on 11 Oct 2004

In creating an Art that is ever expanding, there always something new to learn. This site provides some of the tools to do just that. However, sometimes, something as simple, or complex, as creating the same round-cornered tables as you have on this site would be greatly appreciated by many. So, how about a tutorial on that? Thanks for all the support.

Simo Chao - 12:42 on 04 Jan 2005

Search Engine optimization is a by-product of user centric design that would fit in well with your topics. Maybe you could collaborate with an SEO expert to show how the two work well together?

JamesV - 07:02 on 04 Apr 2005

I feel like I have found a gold mine with these excellent articles on web design and usability! There are already plenty of web sites which go into detail on the technical, implementation side of web development (CSS, HTML, SEO, Photoshop, etc.), but there is definitely a need for articles on generic design and usability. I greatly appreciate your work in filling that gap and look forward to more articles on web design.

Ryan Bates - 06:36 on 08 Apr 2005

So far I have not been able to join a 'FREE and USEFUL' WebDesing sites. BUT: I am very excited about this site and HOPE that it would be a useful site to invest my time. Thank you.

dev - 04:31 on 06 May 2005

Yes,with all the loads of 'free' Webdesign sites out there. I just go PASS all the time, and my eyes oooohhh!!!. But this site i will definately not go pass. Its a great site, just the only one so far. Thanks.

sal - 04:48 12 May 2005 - 03:50 on 11 May 2005

REQUEST: More about color. Which colors go together well? What kind of personality do certain colors project? Examples of why particular companies used certain colors.

David - 10:48 on 02 Jun 2005

COOL

smrad - 01:43 on 20 Jul 2005

Your site is excellent. Excellent information! I've watched and read tutorials on how to use photoshop, dreamweaver, fireworks etc. The information on your site is the most needed to people like me starting at web design. thanks a lot!

Yannis from Athens, Greece - 07:16 on 23 Jul 2005

can you share the guest codes you have here on your site? I really like it, its simple and not bloated...
Thanks

exzyryn - 01:27 on 12 Aug 2005

This site really rocks! Thanks for it. However some simple tutorials on managing the back-end or making admin scripts (eg CMS) would be appreciated too. :)

Amol - 04:32 on 15 Aug 2005

I WANNA SOME INFO ON WEB HOSTING

SHAHID - 03:32 on 15 Sep 2005

Shahid, sorry I can't help on that one. I think a webmaster's forum would be the right place to start, or ask someone locally.

Ben Hunt - 03:39 on 15 Sep 2005

this my web page made by musswir yaftali

mussawir - 12:09 on 24 Sep 2005

As a business owner and web publisher, you've really outdone yourselves. Excellent information and insight. I think a lot of readers miss the point of this site by getting bogged down in the technical aspects over the cerebral aspects of successful web development. Good Show!

Jay Johnson - 12:57 on 24 Sep 2005

As a business owner and web publisher, you've really outdone yourselves. Excellent information and insight. I think a lot of readers miss the point of this site by getting bogged down in the technical aspects over the cerebral aspects of successful web development. Good Show!

Jay Johnson - 01:01 on 24 Sep 2005