Web page design: where to start?

[Megatomic]

I can't believe I'm going to ask such a newb question , but where should I go to learn the basics of modern web page design and what programs should I use to do it? I have made basic pages in the past using *gasp* Frontpage 97, but I want to do a little better and maybe even do pro/commercial work in the future.

You see, I had several local small business owners who I do some PC and networking work for ask me to set up pages for them recently and I had to say "let me see what I can do" rather than "sure thing!". A search on Google for web page design is a scary thing. Maybe I can get some concise pointers here. Thanks to all.

 

[CrowDog]

I learned the basics from HtmlGoodies. Ive always been told thats its best to learn how to manualy type up a webpage in something like notepad before you get into wysiwyg programs like frontpage.

Im by no means a webpage guru though so maybe someone will disagree with me

 

[DJFuji]

wow ok where to start. The problem with the design industry is that you have a lot of people skilled in the mechanics of web design who know absolutely nothing about design. That is, they know HTML and CSS, but are horrible at actually designing a good looking site. Web design is a careful fusion of design and mechanics (html/javascript/etc).

Unfortunately, most "design" classes only teach you the mechanics of it. What i've found is that the best designers out there learned true "design" either from print media training, or just plain old experience. That's how i first started out. Visit sites like americandesignawards and webdesignforums.com to analyze what "good" sites look like. There are a few tutorials out there that highlight basic aspects of design such as color combinations, pixel manipulation, and other things.

One thing that's helped me is to constantly analyze sites that i go to. I have about 300 bookmarks of sites which have good design examples. I periodically go through them for inspiration.

Web design, as you'll learn, is much more about inspiration and art than it is placing tags on a page.

edit: spelling

 

[MrChad]

I agree 100 percent with what Fuji stated above. Web design is more than just learning HTML. It's about learning how to communicate information effectively. I'd recommend going to a local bookstore and picking up a few titles about web design. For HTML basics, I always recommend W3 Schools.

 

[Zucarita9000]

Fuji is right. You'll need design and layout knowledge if you want to become a web designer. I started out studying design at college. We had a few classes specialized in web design (navigation schemes, user interaction, interface metaphors, usability testing) so I gain useful know-how there. Web design is very similar to editorial design, you have to take in account lots of stuff that you would take for granted otherwise.

However, if you only want toget technical knowledge, there are lots of websites out there. You can also buy some books.

 

[Megatomic]

Thanks for all the pointers. I would like to not only learn the mechanics but to learn the aesthetics also. Classes are probably out of the question for the time being but DJ Fuji's links will help me get a feel for what the Pros are doing.

As for books, I have a giant HTML book but it is really dry. Any suggestions for a more intuitive learning guide? And aside from just writing raw HTML from scratch in Notepad, what software packages are commonly used? Thanks again.

 

[bleuiko]

Web design, as you'll learn, is much more about inspiration and art than it is placing tags on a page.

I totally agree with that. For me personally, I found looking at other people's websites and checking out their source really helps in understanding what they did (don't copy!) and a place to find new inspirations and my own style. Just play around and be patient... It takes me about 3 months to work up a design, which is fast enough for me as I am not even remotely artsy (*crosses fingers* medical school medical school).

As a side note, I also agree with DJ Fuji's sig: "Modifying a civic for racing is like overclocking a 286." MAXIMA BABY!

 

[WobbleWobble]

I like to draw out things visually using Macromedia Fireworks and then slicing/exporting the code and images into Dreamweaver. You then edit your code in Dreamweaver and clean things up. This is what I do at work.

It's a lot easier to design graphically than starting with code.

 

[EeyoreX]

I like to draw out things visually using Macromedia Fireworks and then slicing/exporting the code and images into Dreamweaver. You then edit your code in Dreamweaver and clean things up. This is what I do at work.

It's a lot easier to design graphically than starting with code.

While I agree, in principle, I also disagree. WYSISYG web editing is a mixed bag. I found (years ago) that WYSIWYG editors, really are not WYSIWYG... Plus, when you know what the tags actually do, you are far better suited to designing using these tools. I still semi-hand code. When ever I do any web work, I use Homesite. It's the closest I will get to WYSIWYG, and I still hand code html pages. Once you learn the code, though, use any tools you are comfortable with.

\Dan

 

[ProviaFan]

Originally posted by: EeyoreX

I like to draw out things visually using Macromedia Fireworks and then slicing/exporting the code and images into Dreamweaver. You then edit your code in Dreamweaver and clean things up. This is what I do at work.

It's a lot easier to design graphically than starting with code.

While I agree, in principle, I also disagree. WYSISYG web editing is a mixed bag. I found (years ago) that WYSIWYG editors, really are not WYSIWYG... Plus, when you know what the tags actually do, you are far better suited to designing using these tools. I still semi-hand code. When ever I do any web work, I use Homesite. It's the closest I will get to WYSIWYG, and I still hand code html pages. Once you learn the code, though, use any tools you are comfortable with.

\Dan

I mostly-hand code; though I use Dreamweaver because it has pretty nice site management tools (it will automatically update URLs in your pages if you move things around to different folders, among other things), I don't do any WYSIWYG unless it's something I don't care about or unless I'm in a hurry. For the "average person" who doesn't need site management, DW would be uber-overkill. In fact, it's probably almost-uber-overkill for me, but I've yet to see any other programs (Aside from Frontpage, but it's retarded) that do the kind of site management that DW does.

 

[WobbleWobble]

Originally posted by: EeyoreX
While I agree, in principle, I also disagree. WYSISYG web editing is a mixed bag. I found (years ago) that WYSIWYG editors, really are not WYSIWYG... Plus, when you know what the tags actually do, you are far better suited to designing using these tools. I still semi-hand code. When ever I do any web work, I use Homesite. It's the closest I will get to WYSIWYG, and I still hand code html pages. Once you learn the code, though, use any tools you are comfortable with.

\Dan

Don't get me wrong, I'm no saying a WYSIWYG tool is the end-all-be-all to web design. I'm just saying that it's a lot easier and faster to design your site using Fireworks/Dreamweaver. You can only do so much using CSS and such. Sometimes things like navigational bars and stuff can only be achieved using images, which Fireworks will help you slice out.

I like to use Dreamweaver when coding (mainly ColdFusion) because of the pop-up box with a list of available/common tags and attributes.

 

[DJFuji]

Originally posted by: WobbleWobble
I like to draw out things visually using Macromedia Fireworks and then slicing/exporting the code and images into Dreamweaver. You then edit your code in Dreamweaver and clean things up. This is what I do at work.

It's a lot easier to design graphically than starting with code.

EeyoreX, i'm not sure if you and wobble wobble are thinking about the same thing. I assume he does the same thing that i do. That is, play around with photoshop until i find a general design that i like. I pretty much use it as a sketchboard to draw a general design because i cant draw with pen and paper worth a damn. After i get something i like, i slice the image up and use them in my HTML code thru dreamweaver. I don't use the WYSIWYG features because i dont like the program writing my code for me. I guess i'm too anal for that. In fact, i dont even use photoshop/imageready's automatic slicing and html generating thing because i like to write my own HTML around the images i created. That's just me, though. I'm not exactly a natural in the art dept (very left brained), so it's hard for me to envision design without playing around with sketches/drawings beforehand.