Web design from Scratch, free online course in design for the webHome - introduction to Web Design from ScratchBasics - effective web design processTutorials - hands-on, practical lessons in designing clear web pagesCase Studies - useful examples that apply the web design principles
Free web design course - basics, layout, free tutorials, case studies, how to guide, examples

'Web Design from Scratch' is a free online course for everyone interested in creating effective web pages.

Web Design from Scratch LIVE

Don't miss

We're running our first live training seminar on November 7th in Chesterfield, England.

It's the perfect foundation for anyone who would like to be a professional web designer, or for web site owners, developers or designers who want to strengthen their skills.

It's an intensive & interactive experience, incorporating half a day each on Site Design (how to plan sites that succeed) and Page Design (how to create effective pages, covering every key aspect of visual design for the web).

Costs £295 (inc VAT). For more details and booking info, see the WDFS LIVE page.

Overview

This is a free practical guide to designing effective web communication, by Ben Hunt, founder of UK-based web consultancy Scratchmedia.

Basics explores the factors that influence communication between web-based content and the people who use it. Basics also describes methods for approaching the discipline of web design, to help you maximise the success you get for your effort.

Building on the Basics, the Tutorials section introduces principles that form a complete how-to guide to web design. Tutorials are illustrated with real-world examples.

The Case Studies put all the principles into practice. Each one analyses the strengths and weaknesses of a real web page and presents an alternative design solution, based on WDFS principles.

This course is shareware

The course is made freely available under the shareware principle. That means it's offered free of charge, and if you find it valuable, you are invited to support this work by donating.

I particularly encourage you to contribute if you use this as part of an educational or business training programme. Your support will help me develop this resource for everyone.

Top ^ Next topic »
Comments
Interesting site - find the contents being on the right a bit odd (I keep looking to the left for it)
Andy - 06:05 on 01 Jul 2004
nice site, indeed :) i really liked it. 10x
nick - 09:22 on 07 Aug 2004
Ben,Your site is absolutely awesome. It will be a resource that I recommend to all of my newsletter readers, and I will be including it in my new ebook. Way to go!
Jinger Jarrett - 10:56 on 08 Aug 2004
just curious.......how come this site doesn't have a favicon?
paranoidandroid - 01:48 on 14 Nov 2004
Great!! simple, but nice.. Cool!!
Diar - 04:50 on 19 Nov 2004
Have you found someone to translate into German yet, I notice the mail was last year's.

Karin
karin campbell - 06:08 on 06 Mar 2005
Karin, no the only translation we currently have is Bulgarian. If you're interested in translating, please email me.
Ben Hunt - 09:30 on 06 Mar 2005
Outrageously great web design resource. I can hardly wait to rest up a bit before I tear through a few more sections.

Great job!
James - 05:09 on 17 Mar 2005
It would be nice if you could gather all of the side-panel resources onto one page. For instance, you have a few reccomendations for books but I can't remember on what page they're on.
James - 02:12 on 22 Mar 2005
I really feel your explanation of what the true meaning of web design will help make the process more simple for all who engage in this field.  Thank you for sharing your vision.  This will help a lot of people.  Congrats on a fine website!
Mike - 06:06 on 24 Mar 2005
As a 5 year server side programmer, it's hard to grasp the artistic side of frontend design. Great read; helps me get a much better understanding of what 'looks' good.
james - 08:17 on 31 Mar 2005
Hey nice site on web communication
mark - 01:29 on 05 Apr 2005
Fantastic site.. Very resourceful..
web man - 01:05 on 15 Apr 2005
Never thought I'd find anything like it.
It sure is resourcefull.
Laupex - 03:02 on 02 May 2005
It would be great if there were a search box somewhere.  Otherwise, this is very helpful resource.
Shival - 01:21 on 12 May 2005
dude, who ever u are, u'r site's an answer to my prayers. i was sulking bcause i ran out of ideas for my site & besides the codes had all messed up my head, and your site , jus set it right ! thanx a lot, you are doing a gr8 job, keep it going.
Sin - 08:06 on 17 May 2005
This site is super cool. Every link is useful...useful and interesting to the point of addiction!. Great job keep it up. You have no idea how many people ur helping. Thanx sooooo much.  
Faith - 05:30 on 25 May 2005
i like simple design :)
magicbox - 09:41 on 27 May 2005
hi,I just would like to learn how to design the website?please tell me about how to website design of details.
Regards,
Sandra
Sandra - 10:43 on 29 May 2005
Sandra, this site doesn't cover the mechanics of creating web sites. There are lots of other sites that do.
Ben Hunt - 10:26 on 31 May 2005
Hi,nice site but there is no flow of the course in a prespective manner
Chandu - 02:46 on 01 Jun 2005
You should have a LINKS section with links to other sites that are related to usability, general design principles, etc.
David - 07:24 on 02 Jun 2005
Very nice site, I have not seen anything on the web covering this type of info
bennett - 07:01 on 03 Jun 2005
I Love it! I Use it! I come back to remind myself! I tell people about it! This is a wonderful resource!
marti - 07:21 on 04 Jun 2005
this is good site to know webdesigning , i like this very much
shiras - 08:14 on 05 Jun 2005
I want to know onething that if i want to create a webdesign, do i need to know about java programmming. I interest only layout design, & flow of the webpage. So can u tell me what courses i have to follow.
Aya - 03:24 on 06 Jun 2005
Aya, no you don't need to know Java programming (or Javascript) to make great web sites.

I'm getting more an more requests from people asking how to create web pages (the actual mechanics). Perhaps it would be a worthwhile addition to WDFS now...
Ben Hunt - 03:39 on 06 Jun 2005
Ben, can you post a tuturial on how to make a comment posting box such as this one.
JK - 06:59 on 08 Jun 2005
I was shocked to find out that your site is translated in...Bulgarian of all languages. Is the Bulgarian version published on line, and could you please forward the link to me? I'd love to check it out.
Daniela - 01:34 on 08 Jun 2005
Daniela, I'll try to get you the link shortly.
Ben Hunt - 01:18 on 09 Jun 2005
JK, I'm sorry, I don't go into much hands-on information on how to build web sites on WDFS. However, I am considering adding a whole section on this topic, starting with the basics of HTML & CSS.. Can't say when though..
Ben Hunt - 01:21 on 09 Jun 2005
hi, i just want to how to design web
adeleke gabriel - 03:51 on 12 Jun 2005
OK, just thought I'd ask. I've been searching for this exact type of message posting tool for my site for weeks...
JK - 07:31 on 17 Jun 2005
Dude, this comment system is a bit of ColdFusion code that writes the comments into an Access database (yeah, I know, but it does the job just fine). There's a bit of logic to mark any messages that contain suspect words as 'private'. I get an email every time a comment is posted, with a link straight to the page..
Ben Hunt - 11:20 on 17 Jun 2005
lado jasto cha machiknieeee.
lado prasad putigai - 06:26 on 19 Jun 2005
Cool Site Man, sure an inspiration for me...
I have three sites, and may add a new one inspired by yours...
demonhale - 04:12 on 22 Jun 2005
Seven comments by a raving wdfs Maniac

Really impressed by your site, and if you did a quick find and replace of the  tags to  and the '&' symbol for '&' then it would be valid XHTML Transitional  ( validator.w3.org/check?uri=www.webdesignfromscratch.com )

I believe this site (particularly) could do with having a 'colour scheme changer', I find the grey background makes me feel tired, though in short doses the colour scheme works well for me

Very refreshing to find no tables in the source, if more people would follow that simple rule, perhaps we would finally get an across the board box-model implementation

As already posted, it does seem a little odd that you havent used a favicon, esp as the logo at the top of the page seem built to order for it

A lack of search box, considering how spider friendly the site is, is a little frustrating

The content, well, the content speaks for itself... conciese, accurate, broad and readable

I rate this site in the 99th percentile. Tick vg.

Thankyou to the author and the users for making it worth his while ;-)


Henry - 04:43 on 23 Jun 2005
Hey Henry, thanks for your comments. I've hacked the comments code a bit to get xhtml 1.0 validation on most pages. Personally, I don't treat standards with religious reverence.

A bit like the rules of grammar or etiquette - they can be helpful, but you can still communicate effectively without following them to the letter.

While fixing broken code is definitely worthwhile, it seems a bit absurd to go and hack perfectly functional code or markup just to pass validation.
Ben Hunt - 05:34 on 24 Jun 2005
Hi Ben,

I agree that standards aren't entirely important in effective communication. That being said, I wouldn't want to encourage developers to ignore standards, albeit if their code is perfectly functional. Standards are a great mechanism for technology growth in a community environment, as we have seen, without standards, and adherence to those standards, vendors are free to create heterogeneous browsers which make our jobs hard and/or compromise the end user experience. One might argue that the browser developers are responsible for standards before web developers, but this attitude undermines the community process responsible for the continued improvement of these standards.

Re your comment 'A bit like the rules of grammar or etiquette - they can be helpful, but you can still communicate effectively without following them to the letter.'

-If you think about it, we have all adapted these functions perfectly for the environment in which we use them, failure to apply these rules can only result in one of two things, everything else adapts, or its broken.

In the case of browsers and specification implementation, allowing browsers to force the standards to adapt, is again, undermining the development of these standards.


Looking forward to the next episode from WDFS.

Cheers,
Henry
Henry - 06:49 on 05 Jul 2005
hi im trying to make a simple site but that has a forum where people can register and become part of a big member forum.. sortof like a friend message thing. id also like to have a chat room in it. is this possible, and can you give me some advice on how i can do it? thanks.
paris - 01:34 on 06 Jul 2005
Sorry paris, this isn't the right place to discuss that, but if you head over to www.cre8asiteforums.com I'm sure you'll get lots of friendly advice. That's my usual hangout for sharing tips and support.
Ben Hunt - 12:38 on 08 Jul 2005
sooooo great !!!! sorry i have no extra money for you but i have extra thanks for you for sure :)
daysleeper - 05:41 on 14 Jul 2005
Excellent webpage, I'll be reccommending it to quite a lot of people.
Raine Duncan - 07:16 on 20 Jul 2005
Hi, It is good to hear abt this site, i like to much.
Narayan - 03:09 on 28 Jul 2005
Hi and thanks for your great cool site.
I'm a persian (Iranian) man and was interested in your site . Can I use your tutorial in mySelf site ??
It is greate and I cant let that it not translate to persian..
mahdy asady - 12:41 on 30 Jul 2005
i did a Adobe photoshop now i want to do some thing more i mean i want to know how to design web so give me some tips
Raja Rizwan - 10:13 on 31 Jul 2005
very good
arshad - 10:51 on 01 Aug 2005
Mahdy Asady - you are very welcome to re-publish any of this content in Iranian or any other language, with my best wishes, according to the Creative Commons license (see link below).
Ben Hunt - 02:21 on 01 Aug 2005
Greetings .... fantastic site Ben, a very simple and easy to understand. Salute.

I would like to re-publish your tutorials in my forums with due credits/links/copyrights to you if you allow me to do so.

Furthermore, I will translate your tutorials into dutch language pretty soon. (why a day is of 24 hours?)
Afsar - 07:42 on 05 Aug 2005
Helpful site
rj - 09:29 on 11 Aug 2005
Afsar, as I've said above, you're more than welcome to re-publish this work online, with due attribution according to the Creative Commons license (see below).
Ben Hunt - 06:48 on 13 Aug 2005
Great. Thank you Ben. I'll let you know as soon as it's uploaded.
Afsar - 07:01 on 13 Aug 2005
Hi Ben,
your website is truly outstanding - even though Opera has problems with rendering. Nice ideas - will come back for sure :)
Lord Helmchen - 02:25 on 19 Aug 2005
hi ben,
this web site is simply awesome,though, i`ve lookin to find information of how to develop own webpage, i know you found the same question before, but i can`t wait when ye kick off  the mechanics of creating web sites
hammad - 01:28 on 03 Sep 2005
Excellent tutorials! The only thing I missed was the issue: Web Site Accessibility. Or didn't I find it?
John S. Britsios - 12:52 on 05 Sep 2005
I noticed the Opera problem as well. I filed a bug report since your site validates. It looks horrible in Opera though.

Besides that, awesome content.
The_T - 04:24 on 05 Sep 2005
@Hammad, maybe one day...

@John. I'm well up on site accessibility, and may be running a live course in it for 2006.

@The_T, I may be redesigning this site in a few months, and would ensure it worked in Opera8. For now, I don't have the time to fix I'm afraid.
Ben Hunt - 09:42 on 08 Sep 2005
Thanks for the quick reply, Ben. I finally finished reading the entire contents of the site and I know a lot more about good web design. I find myself analyzing websites I visit for contrast, content, layout, etc.

I have one quesiton: What program was used to create the graphics on this site and the Scratchmedia site? The Scratchmedia graphics are particularly nice.
The_T - 10:03 on 08 Sep 2005
Hi, I am a huge fan of this tutorial, and would like to shower you with compliments. However at the moment I do have a very specific question:

What do you think of the concept of having two versions of a site, specifically a flash and non-flash version?

Instinctively I am against it, but I know that my personal preference is sites that use images sparingly, and that is not always suitable (or what the client wants). I believe I am more text-oriented than the general public so I try to balance that out.

Thank you again for this great resource.
ewitch - 11:46 on 12 Sep 2005
Hi ewitch, instinctively I'm with you. Some sites need to use Flash (e.g. for games, or very rich applications), and that's fine. For others, Flash (used carefully) can help enrich the experience. In these cases, I think it's best to use Flash inline in your HTML site, which should be a single site. If Flash is not enabled, then the site should still work (vital for accessibility compliance too).

I think that to design two sites is a waste of time. Much better to select the right, most available, technology for the job and do it once properly.
Ben Hunt - 10:05 on 13 Sep 2005
I have just stumbled upon your site and I am veeeerrrry impressed.  I live in Washington State (USA) and would love to attend your seminar... any plans on a world tour?  I am currently working on a few ideas for some e-commerce sites and I am having a hard time.  I do not do site design, all I have is a vision.  I need help on building the site but then I will need your help in usability of the site.  Help if you can.

Doug
Doug - 04:20 on 20 Sep 2005
Doug, thanks for your feedback. Assuming the first seminars in the UK go well, I'm planning to run them in the USA and Australia, and possibly Canada and India in 2006. Please email me so that I can contact you when we have dates.
Ben Hunt - 10:46 on 21 Sep 2005
hi
chibuzor - 08:10 on 24 Sep 2005