Web Design: Where to start?

Birbo · (06-02-2006, 08:11 PM)

I mainly do print design at work, but would like to branch out and do some web design stuff for my company. I can make slight updates using Contribute, but that's the extent of my knowledge. What's the best course of action? Do I need to learn Dreamweaver or some similar program? How difficult would this be for someone who works with Quark, Photoshop & Illustrator?

Thanks in advance for the advice.

Futureman · (06-02-2006, 08:14 PM)

I read this book called "Head First: HTML with CSS & XHTML" and thought it was a very good beginners guide. It's written so pretty much anyone can get this stuff (tons of repetition and holding your hand). I was able to build a pretty damn decent website hand coding it all.

If you are really serious about learning web design, you have to learn all the basics and be able to do this stuff by hand, and THEN you can use programs like Dreamweaver to assist you.

borghe · (06-02-2006, 08:24 PM)

two schools of thought. the first is that you use a WYSIWYG editor (like dreamweaver/frontpage/golive) and pound out your pages. Honestly from a print design standpoint that might be your best course of action.

The other course is like Futureman stated, to approach it like programming and learn the syntax. Unfortunately at this transition point between XHTML and HTML things can possibly get a bit confusing. I am normally a big fan of this course of action. WYSIWYG editors have a tendency of punching out sloppy non-standards compliant code that favors IE typically (vs. favoring standards based code that works on everything else). However being you already work with print layout, depending on your apptitude for programming (or laying out in a language like PostScript or PJL) it might be more difficult to approach it from that angle.

APF · (06-02-2006, 08:24 PM)

Originally Posted by Birbo:

I mainly do print design at work, but would like to branch out and do some web design stuff for my company. I can make slight updates using Contribute, but that's the extent of my knowledge. What's the best course of action? Do I need to learn Dreamweaver or some similar program? How difficult would this be for someone who works with Quark, Photoshop & Illustrator?

Thanks in advance for the advice.

Ideally it's a completely different world. IRL, most Web designers I've worked with have been print designers who started mocking up site comps in Photoshop.

At most shops, these comps/templates are then handed over to front-end developers who translate them into HTML, at which point these HTML templates are handed over to app devs (/middle-tier/server-side programmers) to implement the logic, DB queries, etc.

Lhadatt · (06-02-2006, 08:29 PM)

1. Draw what you want.
2. Learn how to make the fancy graphics and crap to make it look right.
3. Learn how to translate that into HTML.
4. Learn programmatic methods for running websites (PHP, Ruby, etc.)

I tend to use an editor like Dreamweaver, since I'm lazy and don't like writing source code.

borghe · (06-02-2006, 08:29 PM)

on the contrary, ideally the two are more closely related than you think. the current preferred standard by most devs is layout and style. code your layout (headings, paragraphs, basic image placement, etc) and then add your style. in that respect it is very similar to print layout where you have your copy (layout) and then have to arrange it to the page (style).

honestly my best recommendation is just view source on a page. hell, even gaf. if it makes sense to you, then start by learning the code. if it looks insanely confusing, then start with a WYSIWYG. Either way, you will eventually have to learn both (layout/style AND code). right now you just have to figure out the easiest way to get started.

Admittedly I'm not the best person to ask this though. I started coding with HTML 2.0. I couldn't even imagine entering into the field now with all the various technologies in place that I use every day.

edit - you are correct though. web development today is typically three tiered. the actual template/print designers, the HTML monkeys who get the stuff into HTML, and the backend devs who get the data from the DB and pass it to the HTML monkeys.

APF · (06-02-2006, 08:37 PM)

Originally Posted by borghe:

edit - you are correct though. web development today is typically three tiered. the actual template/print designers, the HTML monkeys who get the stuff into HTML, and the backend devs who get the data from the DB and pass it to the HTML monkeys.

Yeah... I'm one of those monkeys :) Or their ringleader, something like that.

CharlieDigital · 09:27 PM

Originally Posted by APF:

Ideally it's a completely different world. IRL, most Web designers I've worked with have been print designers who started mocking up site comps in Photoshop.

At most shops, these comps/templates are then handed over to front-end developers who translate them into HTML, at which point these HTML templates are handed over to app devs (/middle-tier/server-side programmers) to implement the logic, DB queries, etc.

It's a terrible process.

Typically because what the designers want is not what is most practical in a web layout.

And because most front-end devs I've worked with were clueless hacks that used crap like Dreamweaver to put together the templates (yes, I'm text-editor-hardcore-elitist like that

).

If you have even the slightest graphical talent, putting together a good looking website is trivially easy even without the use of fancy packages like ImageReady or Dreamweaver.

A lot of people suggest starting off with CSS laden techniques which I think while important once you get the hang of things, kind of hinders learning the basics of HTML and how it all works.

I suggest Joe Burns HTML Goodies: http://www.amazon.com/gp/product/078...Fencoding=UTF8

Why? It's incredibly easy to follow and learn from.

Contrary to popular belief, looking at source is not a terribly good way to start learning HTML since complex sites use lots of behind the scenes processing (JavaScript, CSS hacks, etc) to make layouts work; using this as a starting point only makes the first hurdle harder to clear, IMO. The analogy is let's say someone wants to learn how to build a house. Instead of starting from the basics, I tell him to look at my house and use it as an example. Certainly, it can be done, but it's inefficient and a terrible way to learn.

borghe · (06-02-2006, 08:49 PM)

Originally Posted by CharlieDigital:

Contrary to popular belief, looking at source is not a terribly good way to learn since complex sites use lots of behind the scenes processing (JavaScript, CSS hacks, etc) to make layouts work; using this as a starting point only makes the first hurdle harder to clear, IMO.

but HTML/CSS isn't the first or only markup language out there. he said he already works with print layout which means he could have experience with postscript or PJL (or some other markup language). That was why I recommended it. if it's all greek to him, then yeah, looking at the code is far from the best way to do it.

Quote:

Typically because what the designers want is not what is most practical in a web layout.

the designers don't and shouldn't care about what is practical for a layout generally speaking. they typically are taking care of things like moving your eye around the screen, tonally complementing colors and developing moods and thoughts when viewing the site. that is where a (good) front end guy comes into play. take the template the graphic designers devised and lay it out into something that works on the web. you could technically get away with a two tiered approach by combining the HTML monkey job with one of the other ones (backend or layout guy). I have never seen a guy however who can do all three, and never seen a layout guy who could work on the backend at all. at least not to any sort of amazing results.

edit - and for the record laying out good looking sites is far from trivial. laying out sites that don't look like ass is trivial, but an original truly good looking site takes a ton of work and tweaking.

CharlieDigital · 09:01 PM

Originally Posted by borghe:

the designers don't and shouldn't care about what is practical for a layout generally speaking. they typically are taking care of things like moving your eye around the screen, tonally complementing colors and developing moods and thoughts when viewing the site. that is where a (good) front end guy comes into play. take the template the graphic designers devised and lay it out into something that works on the web. you could technically get away with a two tiered approach by combining the HTML monkey job with one of the other ones (backend or layout guy).

I worked at Factiva in 2004 as a UI developer (programmer) for one of their new products. The design team wanted rounded corners on all of the little content regions that we had. That is until it was discussed what a pain in the ass/waste of time/waste of bandwidth it was to have rounded corners. What's visually appealing isn't always what makes the best business sense from a ROI perspective if it takes that much longer to implement.

I'm not saying that you're wrong, but the case is that designers get carried away sometimes and don't realize the reality of the web medium is quite different from that of print (well, in some sense, it's the same if you consider say a color limitation in the same light). As a designer+developer hybrid, I come across this connundrum all the time. Yes, it would be nice to have this design element here, but no, I don't want to spend the time to put it in since it't not important enough/it'll take an extra n bytes/etc.

The process will get better. Microsoft has some amazing stuff coming out; this video is a must see (the entirety of it) if you're a web designer/UI developer: http://channel9.msdn.com/showpost.aspx?postid=115387

Quote:

I have never seen a guy however who can do all three, and never seen a layout guy who could work on the backend at all. at least not to any sort of amazing results.

I feel special, because I do all three (plus DBA work as well) :) If you'd like I can show you some sample work, PM me.

APF · (06-02-2006, 08:59 PM)

Originally Posted by borghe:

the designers don't and shouldn't care about what is practical for a layout generally speaking. they typically are taking care of things like moving your eye around the screen, tonally complementing colors and developing moods and thoughts when viewing the site. that is where a (good) front end guy comes into play. take the template the graphic designers devised and lay it out into something that works on the web. you could technically get away with a two tiered approach by combining the HTML monkey job with one of the other ones (backend or layout guy). I have never seen a guy however who can do all three, and never seen a layout guy who could work on the backend at all. at least not to any sort of amazing results.

In most places, the front-end monkeys won't be allowed to significantly alter the designs they're given. I do like seeing FE folks cross-disciplined however (either leaning more towards design/usability or towards backend/logic/etc)--since the FE guys are basically in the middle of the process, they're the logical intermediary/liaison between these two departments. Similarly I like to see designers with similar leanings--either towards code, or towards IA, or marketing concerns, etc. It's also rare to see backend/server-side folks who have a solid grasp of HTML, CSS, etc as it should be coded, as opposed to what "works."

borghe · (06-02-2006, 09:01 PM)

Originally Posted by CharlieDigital:

I feel special, because I do all three (plus DBA work as well) :) If you'd like I can show you some sample work, PM me.

then you may very well be special. myself, I can pretty much achieve anything in HTML (9 years) and have been doing web programming for around 6 years (regular programming and dba for 11 years), but damned if I can do anything truly creative from a design perspective. :(

Originally Posted by APF:

It's also rare to see backend/server-side folks who have a solid grasp of HTML, CSS, etc as it should be coded, as opposed to what "works."

ironically, this is me :P HTML and CSS are easy, as is programming and db work. it's the design that I just can't grasp. At least I should say I rarely can come up with inspiration for good designs.

Willco · (06-02-2006, 09:02 PM)

I am thinking into branching out into web design myself when I solidify my computing situation within the next month. I do layout and design, in mostly print but some light online work and was thinking I'd benefit from this new skill set. I'd be interested to also hear where I should start off.

CharlieDigital · (06-02-2006, 09:05 PM)

Originally Posted by APF:

In most places, the front-end monkeys won't be allowed to significantly alter the designs they're given. I do like seeing FE folks cross-disciplined however (either leaning more towards design/usability or towards backend/logic/etc)--since the FE guys are basically in the middle of the process, they're the logical intermediary/liaison between these two departments.

Definitely download and watch this video: http://channel9.msdn.com/showpost.aspx?postid=115387

In my experience, the conclusion I've reached, personally, is spend the extra money and find someone that can do both or be that person and learn to do both.

Quote:

Similarly I like to see designers with similar leanings--either towards code, or towards IA, or marketing concerns, etc. It's also rare to see backend/server-side folks who have a solid grasp of HTML, CSS, etc as it should be coded, as opposed to what "works."

Aside from graphics, all this stuff (HTML, JavaScript, CSS, PHP, ASP, ASP.Net, Java, SQL, etc.) is really part of the same basic area of discipline: undstanding how to tell a machine to do what you want it to do. If you can grasp that, you're golden for anything.

Ghost · (06-02-2006, 09:07 PM)

If you want to design sites that work in a pretty way and arent just pretty when they first load, you should look into Javascript and some of the free graphical widgets that you can now get from Yahoo, Dojo and others...you can do amazing things with a Web based GUI these days.

CharlieDigital · (06-02-2006, 09:10 PM)

Originally Posted by Ghost:

If you want to design sites that work in a pretty way and arent just pretty when they first load, you should look into Javascript and some of the free graphical widgets that you can now get from Yahoo, Dojo and others...you can do amazing things with a Web based GUI these days.

Seriously, from the way it looks, Birbo has a very limited (if any) understanding of HTML. How is Dojo going to help in this situation?!?

borghe · (06-02-2006, 09:10 PM)

Originally Posted by CharlieDigital:

Aside from graphics, all this stuff (HTML, JavaScript, CSS, PHP, ASP, ASP.Net, Java, SQL, etc.)is really part of the same basic area of discipline: undstanding how to tell a machine to do what you want it to do. If you can grasp that, you're golden for anything.

this is my primary problem. I'm good at telling the machine to do whatever I want it to do. It's just coming up with the inspiration to design something truly great. admittedly I have literally NEVER had the time due to other responsibilities at work (I'm also the wan guy and app dev guy) and at home on my own time just doin't want to do this for 18 hours a day... I should really give a couple of personal sites a good overhaul though..

one suggestion I'll give to you guys looking to get into it, aside from reading (check out the book). just do basic hello world shit. create a real simple page (either in dreamweaver frontpage etc) and look at the code. these days there are really only a dozen or so tags you use regularly for straight html. the rest is all css styles (which again are mainly a dozen or so common styling parameters dispersed among the dozen or so common tags).

sefskillz · (06-02-2006, 09:13 PM)

steal stuff from here:

http://www.csszengarden.com/

CharlieDigital · 09:38 PM

Originally Posted by borghe:

this is my primary problem. I'm good at telling the machine to do whatever I want it to do. It's just coming up with the inspiration to design something truly great. admittedly I have literally NEVER had the time due to other responsibilities at work (I'm also the wan guy and app dev guy) and at home on my own time just doin't want to do this for 18 hours a day... I should really give a couple of personal sites a good overhaul though..

I tend to think that visual design "taste" (if you will) is more of an individual trait (maybe genetic??). It's hard to learn good design as it's hard to learn to be an artist. Either you can draw, or you can't. I guess the same is true of programming, which requires more logic than most people can handle, but I think it's easier to learn to program than it is to learn to be a good artist/designer (things like painting not only require artistic taste, but also physical skill to command the brush and media).

Quote:

one suggestion I'll give to you guys looking to get into it, aside from reading (check out the book). just do basic hello world shit. create a real simple page (either in dreamweaver frontpage etc) and look at the code. these days there are really only a dozen or so tags you use regularly for straight html. the rest is all css styles or server side coding.

Joe Burns HTML Goodies all the way! I've never liked Dreamweaver (do *everything* HTML/CSS/JS/SQL in a text editor with VS.Net for .Net apps) for doing things like design and layout. Learning from it is "meh" since it's like my previous analogy: telling someone to learn how to build a house by looking at one. It can be done, but it's inefficient and there are lots of little details that are hard to discover this way.

As an aside, to the OP, I highly recommend you start out with a good text editor if you really intend on mastering HTML. There are many out there including PSPad ( http://www.pspad.com/ ), Crimson Editor ( http://www.crimsoneditor.com/ ), and EditPlus ( http://www.editplus.com ). I've used all three and perhaps because EditPlus was the one I started with, it is the one I recommend the most since it's free (kinda, the evaluation expires after 30 days, but you can keep using it without any missing features), it's got a comprehensive set of features, and it's lightweight.

Ghost · (06-02-2006, 09:51 PM)

Originally Posted by CharlieDigital:

Seriously, from the way it looks, Birbo has a very limited (if any) understanding of HTML. How is Dojo going to help in this situation?!?

I have issues with web designers who are completely ignorant to the development of web interfaces, just trying to prevent the creation of another monster

Overseer · (06-02-2006, 10:10 PM)

I just finished my second year of webdesign and I must say the best thing you can do to get started is to read as many HTML tutorials as possible. HTML is the building blocks of all webdesign. Also, read some tutorials on what makes a website effective. All HTML knowlege is worthless unless you know how to put that together effectively.

APF · (06-02-2006, 11:30 PM)

Originally Posted by CharlieDigital:

Aside from graphics, all this stuff (HTML, JavaScript, CSS, PHP, ASP, ASP.Net, Java, SQL, etc.) is really part of the same basic area of discipline: undstanding how to tell a machine to do what you want it to do. If you can grasp that, you're golden for anything.

Well, the app server stuff is essentially the same (in that things are more-or-less the same conceptually; I've been able to shift from platform to platform with relative ease), but CSS and markup languages aren't. I've a lot of programmers who "know" CSS for example, but really they just know syntax and can look up declarations in a reference. Well big whoop. Just like anything, there's a huge difference between "knowing" something and being involved in the craft--being efficient, knowing all the limitations, bugs, workarounds, workflow and organization, etc. In reality any programmer worth anything already knows this when it comes to their core talents, but a) programmers are inherently lazy, and b) CSS and HTML/etc are extremely accessible and simple enough to get something that "works" out there quickly, but that breaks when you look at it the wrong way.

demi · (06-02-2006, 11:41 PM)

Develop all your web pages entirely for Internet Explorer, as it's the standard.

APF · (06-02-2006, 11:45 PM)

There's an old saying in NeoGAF--I know it's in Texas, probably in NeoGAF--that says, troll me once, shame... shame on you. Troll me... you can't get trolled again.

demi · (06-02-2006, 11:48 PM)

There's also an old saying I found on an article of MAD Magazine: What, me troll?

DaCocoBrova · (06-02-2006, 11:51 PM)

Great thread.

Duality · 12:55 AM

Learn standards-compliant XHTML/CSS.

http://en.wikipedia.org/wiki/Xhtml
http://en.wikipedia.org/wiki/Cascading_Style_Sheets

Examples:
http://cssvault.com/

saelz8 · (03-10-2009, 07:15 PM)

Originally Posted by CharlieDigital:

It's a terrible process.

Typically because what the designers want is not what is most practical in a web layout.

And because most front-end devs I've worked with were clueless hacks that used crap like Dreamweaver to put together the templates (yes, I'm text-editor-hardcore-elitist like that

).

If you have even the slightest graphical talent, putting together a good looking website is trivially easy even without the use of fancy packages like ImageReady or Dreamweaver.

A lot of people suggest starting off with CSS laden techniques which I think while important once you get the hang of things, kind of hinders learning the basics of HTML and how it all works.

I suggest Joe Burns HTML Goodies: http://www.amazon.com/gp/product/078...Fencoding=UTF8

Why? It's incredibly easy to follow and learn from.

Contrary to popular belief, looking at source is not a terribly good way to start learning HTML since complex sites use lots of behind the scenes processing (JavaScript, CSS hacks, etc) to make layouts work; using this as a starting point only makes the first hurdle harder to clear, IMO. The analogy is let's say someone wants to learn how to build a house. Instead of starting from the basics, I tell him to look at my house and use it as an example. Certainly, it can be done, but it's inefficient and a terrible way to learn.

I realize this is a 3 year bump, but making a new thread about it would lose context.

Would Joe Burns HTML Goodies be considered out of date now? The book doesn't seem to have been updated for years.

I just want to make sure the content inside is still applicable today.

If a newer, better book has been released since then, I'd go with that as well.

Liu Kang Baking A Pie · (03-10-2009, 08:31 PM)

I've never heard of that book.

Designing with Web Standards by Jeffrey Zeldman is the designer's bible, but I don't know how it would read to a newcomer. Frankly, you don't need a book to just look at a website, see something that looks cool, and View Source to try and emulate it. That's pretty much how just about anyone good at this started back in the '90s. I realize it's more complicated now, but using Firebug in Firefox to inspect some markup and CSS should be pretty self-explanatory given how markup is semantic now and how CSS is mostly plain English.

Futureman · 08:51 PM

I'm reading this right now:

Pretty good guide to get the basic underpinnings of CSS down.

I still also recommend the book I recommended up above (holy crap, that was three years ago!).

I'm really just a novice designer making sites for myself, so I'd guess the pros would maybe suggest different books.

Cheeto · (03-10-2009, 08:40 PM)

Originally Posted by saelz8:

I realize this is a 3 year bump, but making a new thread about it would lose context.

Would Joe Burns HTML Goodies be considered out of date now? The book doesn't seem to have been updated for years.

I just want to make sure the content inside is still applicable today.

If a newer, better book has been released since then, I'd go with that as well.

HTML fundamentals, such as the details covered in that book, haven't changed much at all. 99% if not 100% of that book should still be relevant today. But you're definitely going to want to dive into Server (PHP) and Client (Javascript) side scripting to get the big picture and start making practical/functional websites.

Justin Bailey · (03-10-2009, 08:41 PM)

Originally Posted by saelz8:

I realize this is a 3 year bump, but making a new thread about it would lose context.

Would Joe Burns HTML Goodies be considered out of date now? The book doesn't seem to have been updated for years.

I just want to make sure the content inside is still applicable today.

If a newer, better book has been released since then, I'd go with that as well.

If you just want to learn basic html right now use his site for free: http://htmlgoodies.com/tutorials/getting_started/

I taught myself html years ago with his site and his tutorials are awesome. The basics of html haven't really changed so I wouldn't worry about being out of date.

PantherLotus · (03-10-2009, 09:01 PM)

Hey this is exactly the topic I was going to start, but modified:

I have a website completely planned out, with each and every page designed in photoshop. I know rudimentary XHTML and enough CSS to get me in trouble. Questions:

1. What are the best free WYSIWYG editors?

2. I know they're for n00bs, but will using one prevent the site in question from being streamlined in the future?

3. Is it ok to build the site first and then let a DB guy code the stuff in between at a later date? I may have to be that guy but would like to tackle one thing at a time. (php?)

Thanks!

Cheeto · (03-10-2009, 09:08 PM)

Originally Posted by PantherLotus:

Hey this is exactly the topic I was going to start, but modified:

I have a website completely planned out, with each and every page designed in photoshop. I know rudimentary XHTML and enough CSS to get me in trouble. Questions:

1. What are the best free WYSIWYG editors?

2. I know they're for n00bs, but will using one prevent the site in question from being streamlined in the future?

3. Is it ok to build the site first and then let a DB guy code the stuff in between at a later date? I may have to be that guy but would like to tackle one thing at a time. (php?)

Thanks!

WYSIWYG editors can make life hard for scripters, but not impossible. I'd really suggest not using one though. It's not really that bad to write a page up in a text editor. Just get a good one like Notepad++ with syntax highlighting and it'll help you a lot.

lunarworks · (03-10-2009, 09:25 PM)

My mind is still stuck in the '90s world of basic HTML like tables. I need to get up to date...

pxleyes · (03-10-2009, 09:28 PM)

Originally Posted by lunarworks:

My mind is still stuck in the '90s world of basic HTML like tables. I need to get up to date...

Unless you only deal with coding tabular data.

lunarworks · (03-10-2009, 09:53 PM)

No, I used to design websites regularly. (I even designed the current train wreck that is Gaming Age way back in '99. Yes, it's been that long since they changed it.)

I'm way out of practice, though. Plus, I'm sick of sticking to my old styles.

Fjolle · (03-10-2009, 09:58 PM)

Bah, I came in here expecting flashing/scrolling text and gifs.

What happened to you GAF?

pxleyes · (03-10-2009, 09:59 PM)

We got jobs.

ckohler · (03-10-2009, 10:01 PM)

Originally Posted by lunarworks:

No, I used to design websites regularly. (I even designed the current train wreck that is Gaming Age way back in '99. Yes, it's been that long since they changed it.)

I'm way out of practice, though. Plus, I'm sick of sticking to my old styles.

I'm an old school web developer (over 10 years) and I was slow to get out of those bad habits too (<font>, <table> layouts, dot.gif, etc.) I didn't want to use CSS because for a while it support was sloppy in browsers. Eventually it got good but I was still stuck in the past.

Then the CSS Zen Garden opened my eyes to the benefits of separation of semanticly accurate content and design.

Firestorm · (03-10-2009, 10:06 PM)

I didn't realize this was from 2006 until I got to demi's post and went "waaait a second".

lunarworks · (03-10-2009, 10:22 PM)

Originally Posted by ckohler:

I'm an old school web developer (over 10 years) and I was slow to get out of those bad habits too (<font>, <table> layouts, dot.gif, etc.) I didn't want to use CSS because for a while it support was sloppy in browsers. Eventually it got good but I was still stuck in the past.

Then the CSS Zen Garden opened my eyes to the benefits of separation of semanticly accurate content and design.

Ya, I just saw The Zen Garden. That's handy for building content-based websites, and will be great for one I'm working on right now.

But I need to get deep into the CSS for my own site. The "blog" look doesn't fit for that. (I'm not a very prolific writer.)

Also, smartly, I quit with the evil <font> tag years ago. The only CSS I currently know is for text appearance, applied to my basic HTML.

WickedAngel · (03-29-2009, 08:10 PM)

How exactly are search engines created? I am in the planning stages of a service that will require a search engine with filters options that can be configurable on the search page (For visitors) and saved to a user profile (For visitors that create an account).

I've worked on simple web pages with WYSIWYG and I have a basic understanding of Java but I've never heard of any knowledge source for anything like this.