Resources for Learning Web Design

v2Media · 10-15-2010, 03:02 AM

For those of you that want to learn Web design and would like a recommendation of on-line and off-line resources, what to do, and what not to do, this thread is for you.

Inspiration and Industry News
Get yourself informed about the web design industry. It's an extremely dynamic arena, so this is a never ending practice.

Smashing Magazine
Smashing Magazine is focused on design and web-development. We deliver useful information, latest trends and techniques, useful ideas, innovative approaches and tools.

A List Apart
A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.

CSS Zen Garden
A demonstration of what can be accomplished visually through CSS-based design.

CSS Gallery Sites
Do a google search for 'css gallery'. Find about 10, frequently updated gallery sites that suit your tastes, bookmark them, and visit a few times a week.

Web Design Style and Graphics
What are the conventions of web design? Where is a good place to learn how to do this stuff properly...

Yale Web Style Guide
Comprehensive coverage of basic design principles for creating web sites.

Websites That Suck
Knowing what NOT to do is just as important as how to design web sites properly. Learn from other designers' mistakes and ensure you don't wind up with a site that sucks donkey nutz.

Web Design @ Wiki
A good introduction to web design, history and current issues. Lots of internal resources and links to good quality related material.

Website Wire-frames
Website wire-frames are the best method of planning and scoping out a website project. I consider wire-frames as the most effective tool for communicating a web design project details to all parties involved from the client to the gfx designer to the developer.

Web Design Coursework and Tutorials
Good tutorials are hard to come by these days. The topic is now full of spam and duplicate content. 90% of the search results for design tutorials are utter garbage. So where to look? Dig into those search results and bookmark a few gem sites, the diamonds in the rough so to speak. Alternatively, check out some of these premium sites:-

Lynda.com
Software training & tutorial video library. Our online courses help you learn critical skills. Free access & previews on hundreds of tutorials.
(Lou - keep ur fricking 'poach lynda content' youtube link to yourself)

W3Schools
HTML XHTML CSS JavaScript XML XSL ASP SQL ADO VBScript Tutorials References Examples.

Web Design Library
Web Design Library offers free web design tutorials, articles, news, interviews, web design showcase, software reviews, free web design stuff.

Sitepoint Courses & Books
An Aussie mob, so I may be biased; but Sitepoint is one of the major players in this niche - there's no denying that. I have a shelf devoted to Sitepoint publications and every book in pdf version. One of the best reference libraries in use at our office.

Web Design Software & Digital Assets
What software do you need to be a productive & creative web designer. Consider though, if you are going to make a living out of web design, pay your dues to the companies that built your software and don't use pirated software.

Photoshop or Gimp
Photoshop if you can afford a license - this is a must. Use Gimp in a pinch.

Fireworks
Fireworks is a graphics optimisation solution. Fireworks is NOT for photo or graphics editing/animation. Whilst Fireworks can do basic bitmap, vector editing and animation, this is not it's primary purpose. Fireworks is chiefly about optimising web graphics; no other software does it better.

Illustrator or CorelDRAW
Many companies will supply logos and digital assets as vector files. Photoshop doesn't handle vectors with remotely as much sophistication as Illustrator or CorelDRAW. For those of you on a budget, check out the open-source offerings (you get what you pay for though): InkScape and Karbon14.

Visual Web Designing Software
Dreamweaver has the largest market share. It is the standard for the visual web design industry.
MS Expression Web (formerly FrontPage). With a heritage from FrontPage, I wouldn't touch it with a 10ft barge pole - but others swear by it, especially if you want to work on MS servers & technology.
NetOjbects Fusion
A fair amount of hype around netobjects. Download a trial and judge for yourself.

There are others, CoffeeCup HTML, KompoZer, and SeaMonkey. All cheap, and will get the job done.

FileZilla
Open-source FTP program (Windows, Linux & MacOSX). Supports everything you'll ever possibly need for file transfers and bulk permissions.

iStockphoto
All web companies that I have worked for have had iStock accounts. Whilst iStock is a good source of stock images and graphics, it is also a controversial source of generic logos and ID designs. If you want a career in web design, don't support off-the-shelf design suppliers.

Fotolia
Buy and sell royalty-free stock photos on Fotolia. Affordable royalty-free stock photos, cheap stock images and stock pictures.

WikiMedia Commons
WikiMedia is a fantastic source of digital assets on a budget (free). Just be sure to double check the licence for what you use.

Your Own Digital Camera
You should own a 1/2 decent, portable digital camera and take it with you EVERYWHERE! Take photos of anything and everything, from fruit down at the local supermarket, crowds and buildings, cars and trees. Build up a collection and organise/tag/categorise them. You won't have to pay for these images, and they're original.

Copyright Warning
You should not source graphics and photos to use in your site from image search engines. In 99.9% of cases, you'll be breaching copyright.

bcee · 10-15-2010, 06:44 PM

Great list, there are so many out there but you narrowed it down to a nice list. I'm sure others will chime in and add others.

v2Media · 10-15-2010, 10:38 PM

Doesn't matter if there's plenty out there. We need one in here, as a sticky. The number of newbies starting topics along these lines is frustrating.

LouTheDesigner · 10-16-2010, 04:29 AM

I'll hold back my free lynda.com tutorial b/c this is your thread and I'll respect your request.

You are certainly right about so many people coming here to ask "Where do I start?" And by all means, this should be a sticky.

BUT, your hostility toward my tutorial, or at least toward my promotion of it, is a bit misplaced. There are so many job postings that will list, for example, 7 or so languages and/or programs that you already know -- but then they'll throw in some program that people have never experienced. (for example, "Experience with Quark a Plus"). This is where my tutorial comes in handy. What free lynda.com tutorials help people to do is apply for that job, and then learn some software relatively quickly before they are actually hired. I never do it out of self promotion, it's just trying to help -- like your potential sticky. Also, keep in mind that many people here are using pirated software for a reason (it's free). Downloading a copy of ZoneAlarm of LittleSnitch is worthwhile, considering that people who love pirated software won't pay to get their mothers out of jail.

I've conducted plenty of interviews for potential employees and some interns as well… I would love it if they could access such a wealth of knowledge for free, rather than wallow in a rich mud of books and crappy tutorials that they'll likely find. I know lynda.com will point them in the right direction.

Just an add-on, and perhaps you may construe this as a question, so I'll formulate it as such:

Why not add fotolia.com? You can get very decent images for $2. Also, Firebug can help people learn from others once they understand the basics.

Furthermore, many clients may ask for some nice business cards. I would recommend vistaprint.com. You can have the client pay you for the cards to be made, and since vistaprint is so cheap, you can make a profit off it. That's called evaluated service fees.

Also, maybe we should throw in some recommendations for FTP clients and hosting services?

For Mac users, try Cyberduck. I've used some purchased software like Transmit, and Cyberduck is more reliable in my experience. For windows users, try Filezilla.

My recommendation for a hosting service would have to be Hostgator, especially if you can gain money through their affiliate program.

-Lou

v2Media · 10-16-2010, 04:41 AM

Hi lou - the reference to your link is tongue-in-cheek, no hostility intended. However I don't condone ripping off intellectual property from anyone for any reason. Lynda is not expensive and the content authors deserve every cent of income. Your providing a means for less honourable people to just take what they want - give them an inch and they'll take a mile.

I'll add fotilla and FileZilla (good idea) though (CyerDuck is a POS).

Brian Angel · 10-19-2010, 02:46 AM

Id like to add in Killersites.com especialy for beginers as he has a very good way of explaining things (alot of advaced stuff to but Stefan has a way of "dumbing it down")

anna · 10-19-2010, 12:31 PM

HTMLdog is a great resource as well...

PixelPusher · 10-21-2010, 04:06 PM

Figured this thread was worthy of a sticky

Thanks v2Media for compiling this list (and other members for their recommendations), this is a great resource for those starting out in the web design field.

CristAndrei · 10-22-2010, 11:28 AM

Hi guys,

Can anyone tell me how to tune my website with an Icon like this?

I would really appreciate it!

Thanks..

anna · 10-22-2010, 12:38 PM

Are you talking about a favicon?

Here is their website. Let us know if you have any other questions.

10-15-2010, 03:02 AM	#1
v2Media Silver Member Join Date: Jul 2010 Location: Queensland, Australia Posts: 119	Resources for Learning Web Design For those of you that want to learn Web design and would like a recommendation of on-line and off-line resources, what to do, and what not to do, this thread is for you. Inspiration and Industry News Get yourself informed about the web design industry. It's an extremely dynamic arena, so this is a never ending practice. Smashing Magazine Smashing Magazine is focused on design and web-development. We deliver useful information, latest trends and techniques, useful ideas, innovative approaches and tools. A List Apart A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices. CSS Zen Garden A demonstration of what can be accomplished visually through CSS-based design. CSS Gallery Sites Do a google search for 'css gallery'. Find about 10, frequently updated gallery sites that suit your tastes, bookmark them, and visit a few times a week. Web Design Style and Graphics What are the conventions of web design? Where is a good place to learn how to do this stuff properly... Yale Web Style Guide Comprehensive coverage of basic design principles for creating web sites. Websites That Suck Knowing what NOT to do is just as important as how to design web sites properly. Learn from other designers' mistakes and ensure you don't wind up with a site that sucks donkey nutz. Web Design @ Wiki A good introduction to web design, history and current issues. Lots of internal resources and links to good quality related material. Website Wire-frames Website wire-frames are the best method of planning and scoping out a website project. I consider wire-frames as the most effective tool for communicating a web design project details to all parties involved from the client to the gfx designer to the developer. Web Design Coursework and Tutorials Good tutorials are hard to come by these days. The topic is now full of spam and duplicate content. 90% of the search results for design tutorials are utter garbage. So where to look? Dig into those search results and bookmark a few gem sites, the diamonds in the rough so to speak. Alternatively, check out some of these premium sites:- Lynda.com Software training & tutorial video library. Our online courses help you learn critical skills. Free access & previews on hundreds of tutorials. (Lou - keep ur fricking 'poach lynda content' youtube link to yourself) W3Schools HTML XHTML CSS JavaScript XML XSL ASP SQL ADO VBScript Tutorials References Examples. Web Design Library Web Design Library offers free web design tutorials, articles, news, interviews, web design showcase, software reviews, free web design stuff. Sitepoint Courses & Books An Aussie mob, so I may be biased; but Sitepoint is one of the major players in this niche - there's no denying that. I have a shelf devoted to Sitepoint publications and every book in pdf version. One of the best reference libraries in use at our office. Web Design Software & Digital Assets What software do you need to be a productive & creative web designer. Consider though, if you are going to make a living out of web design, pay your dues to the companies that built your software and don't use pirated software. Photoshop or Gimp Photoshop if you can afford a license - this is a must. Use Gimp in a pinch. Fireworks Fireworks is a graphics optimisation solution. Fireworks is NOT for photo or graphics editing/animation. Whilst Fireworks can do basic bitmap, vector editing and animation, this is not it's primary purpose. Fireworks is chiefly about optimising web graphics; no other software does it better. Illustrator or CorelDRAW Many companies will supply logos and digital assets as vector files. Photoshop doesn't handle vectors with remotely as much sophistication as Illustrator or CorelDRAW. For those of you on a budget, check out the open-source offerings (you get what you pay for though): InkScape and Karbon14. Visual Web Designing Software Dreamweaver has the largest market share. It is the standard for the visual web design industry. MS Expression Web (formerly FrontPage). With a heritage from FrontPage, I wouldn't touch it with a 10ft barge pole - but others swear by it, especially if you want to work on MS servers & technology. NetOjbects Fusion A fair amount of hype around netobjects. Download a trial and judge for yourself. There are others, CoffeeCup HTML, KompoZer, and SeaMonkey. All cheap, and will get the job done. FileZilla Open-source FTP program (Windows, Linux & MacOSX). Supports everything you'll ever possibly need for file transfers and bulk permissions. iStockphoto All web companies that I have worked for have had iStock accounts. Whilst iStock is a good source of stock images and graphics, it is also a controversial source of generic logos and ID designs. If you want a career in web design, don't support off-the-shelf design suppliers. Fotolia Buy and sell royalty-free stock photos on Fotolia. Affordable royalty-free stock photos, cheap stock images and stock pictures. WikiMedia Commons WikiMedia is a fantastic source of digital assets on a budget (free). Just be sure to double check the licence for what you use. Your Own Digital Camera You should own a 1/2 decent, portable digital camera and take it with you EVERYWHERE! Take photos of anything and everything, from fruit down at the local supermarket, crowds and buildings, cars and trees. Build up a collection and organise/tag/categorise them. You won't have to pay for these images, and they're original. Copyright Warning You should not source graphics and photos to use in your site from image search engines. In 99.9% of cases, you'll be breaching copyright. __________________ I do Web Design, Brisbane - Gold Coast based. Spend a lot of time in PHP/MySQL Web Development. And Search Engine Optimisation chews up the rest. Last edited by v2Media; 10-23-2010 at 12:46 AM. Reason: More links added.

10-15-2010, 06:44 PM	#2
bcee Gold Member Join Date: Nov 2009 Location: New York Posts: 370	Great list, there are so many out there but you narrowed it down to a nice list. I'm sure others will chime in and add others. __________________ Submit to my Website Gallery \| NY Web Design

10-15-2010, 10:38 PM	#3
v2Media Silver Member Join Date: Jul 2010 Location: Queensland, Australia Posts: 119	Doesn't matter if there's plenty out there. We need one in here, as a sticky. The number of newbies starting topics along these lines is frustrating. __________________ I do Web Design, Brisbane - Gold Coast based. Spend a lot of time in PHP/MySQL Web Development. And Search Engine Optimisation chews up the rest.

10-16-2010, 04:29 AM	#4
LouTheDesigner Gold Member Join Date: Oct 2008 Location: Yonkers, NY Posts: 495	I'll hold back my free lynda.com tutorial b/c this is your thread and I'll respect your request. You are certainly right about so many people coming here to ask "Where do I start?" And by all means, this should be a sticky. BUT, your hostility toward my tutorial, or at least toward my promotion of it, is a bit misplaced. There are so many job postings that will list, for example, 7 or so languages and/or programs that you already know -- but then they'll throw in some program that people have never experienced. (for example, "Experience with Quark a Plus"). This is where my tutorial comes in handy. What free lynda.com tutorials help people to do is apply for that job, and then learn some software relatively quickly before they are actually hired. I never do it out of self promotion, it's just trying to help -- like your potential sticky. Also, keep in mind that many people here are using pirated software for a reason (it's free). Downloading a copy of ZoneAlarm of LittleSnitch is worthwhile, considering that people who love pirated software won't pay to get their mothers out of jail. I've conducted plenty of interviews for potential employees and some interns as well… I would love it if they could access such a wealth of knowledge for free, rather than wallow in a rich mud of books and crappy tutorials that they'll likely find. I know lynda.com will point them in the right direction. Just an add-on, and perhaps you may construe this as a question, so I'll formulate it as such: Why not add fotolia.com? You can get very decent images for $2. Also, Firebug can help people learn from others once they understand the basics. Furthermore, many clients may ask for some nice business cards. I would recommend vistaprint.com. You can have the client pay you for the cards to be made, and since vistaprint is so cheap, you can make a profit off it. That's called evaluated service fees. Also, maybe we should throw in some recommendations for FTP clients and hosting services? For Mac users, try Cyberduck. I've used some purchased software like Transmit, and Cyberduck is more reliable in my experience. For windows users, try Filezilla. My recommendation for a hosting service would have to be Hostgator, especially if you can gain money through their affiliate program. -Lou Last edited by LouTheDesigner; 10-16-2010 at 04:32 AM.

10-16-2010, 04:41 AM	#5
v2Media Silver Member Join Date: Jul 2010 Location: Queensland, Australia Posts: 119	Hi lou - the reference to your link is tongue-in-cheek, no hostility intended. However I don't condone ripping off intellectual property from anyone for any reason. Lynda is not expensive and the content authors deserve every cent of income. Your providing a means for less honourable people to just take what they want - give them an inch and they'll take a mile. I'll add fotilla and FileZilla (good idea) though (CyerDuck is a POS). __________________ I do Web Design, Brisbane - Gold Coast based. Spend a lot of time in PHP/MySQL Web Development. And Search Engine Optimisation chews up the rest.

10-19-2010, 02:46 AM	#6
Brian Angel Silver Member Join Date: Oct 2010 Location: Philadelphia Pa Posts: 153	Id like to add in Killersites.com especialy for beginers as he has a very good way of explaining things (alot of advaced stuff to but Stefan has a way of "dumbing it down") Last edited by PixelPusher; 01-05-2011 at 02:28 PM. Reason: fixed link

10-19-2010, 12:31 PM	#7
anna Platinum Member Join Date: Jul 2009 Location: Michigan Posts: 549	HTMLdog is a great resource as well...

10-21-2010, 04:06 PM	#8
PixelPusher Super Moderator Join Date: Oct 2008 Location: Arizona, USA Posts: 1,053	Figured this thread was worthy of a sticky Thanks v2Media for compiling this list (and other members for their recommendations), this is a great resource for those starting out in the web design field. __________________ John Darling Graphic / Web Designer SmarterTools Inc. (877) 357-6278 www.smartertools.com

10-22-2010, 11:28 AM	#9
CristAndrei New Member Join Date: Oct 2010 Location: Copenhagen Posts: 2	Website Icon Hi guys, Can anyone tell me how to tune my website with an Icon like this? I would really appreciate it! Thanks.. __________________ Free smart and safe backlink building - PDF MoneyBook.co - About Internet Marketing

10-22-2010, 12:38 PM	#10
anna Platinum Member Join Date: Jul 2009 Location: Michigan Posts: 549	Are you talking about a favicon? Here is their website. Let us know if you have any other questions.

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode