Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ask HN: Learning Web Design

news.ycombinator.com

Post reply on HN
Print view View original

11–20 of 34 posts

Re: Ask HN: Learning Web Design

#11

Post by henrikschroder »

nsfmc wrote: post #10

Ok, so as someone that walked this path and is currently on the other end as a freelance graphic and web designer, i'll put out a brain dump. # Development 1. For web development, you'll find tons of best practices (i.e. alistapart, smashingmag, diveintohtml5, etc). This is the easy part, you can browse these or skim them whenever you get bored. HTML is pretty straightforward, but css is a bit trickier. 1.5. An too-l…

When it comes to CSS, the best tool I've ever used is firebug, http://getfirebug.com/

It's invaluable to have a tool that lets you inspect everything on your page and show you why each element is styled as it is and where in the goddamn CSS file the line is that caused you to start tearing out your hair.

Re: Ask HN: Learning Web Design

#12

Post by seanlinmt »

henrikschroder wrote: post #11
nsfmc wrote: post #10

Ok, so as someone that walked this path and is currently on the other end as a freelance graphic and web designer, i'll put out a brain dump. # Development 1. For web development, you'll find tons of best practices (i.e. alistapart, smashingmag, diveintohtml5, etc). This is the easy part, you can browse these or skim them whenever you get bored. HTML is pretty straightforward, but css is a bit trickier. 1.5. An too-l…

When it comes to CSS, the best tool I've ever used is firebug, http://getfirebug.com/ It's invaluable to have a tool that lets you inspect everything on your page and show you why each element is styled as it is and where in the goddamn CSS file the line is that caused you to start tearing out your hair.

The best part about firebug is that it allows you to change the css on the spot and you get to see how that affects your layout immediately.

Re: Ask HN: Learning Web Design

#13

Post by olalonde »

As a side note, you don't have to know CSS/HTML to be a web designer. As a matter of fact, in most places I've worked, web designers did the graphic part on Photoshop and web developers sliced the images and wrote the HTML/CSS.

Re: Ask HN: Learning Web Design

#15

Post by alinajaf »

seanlinmt wrote: post #12
henrikschroder wrote: post #11

Earlier quoted context omitted.

When it comes to CSS, the best tool I've ever used is firebug, http://getfirebug.com/ It's invaluable to have a tool that lets you inspect everything on your page and show you why each element is styled as it is and where in the goddamn CSS file the line is that caused you to start tearing out your hair.

The best part about firebug is that it allows you to change the css on the spot and you get to see how that affects your layout immediately.

I think I'm in the minority but I've never really seen the appeal. I've always much preferred chromes developer tools. Right click on anything and choose 'inspect element' to see what I mean.

Re: Ask HN: Learning Web Design

#16

Post by DrJokepu »

olalonde wrote: post #13

As a side note, you don't have to know CSS/HTML to be a web designer. As a matter of fact, in most places I've worked, web designers did the graphic part on Photoshop and web developers sliced the images and wrote the HTML/CSS.

I don't know why this was downvoted, I totally agree with that. In fact, my co-founder, who is a graphic designer, knows next to nothing about HTML and CSS and I like it that way. It's his job to come up with nice designs and it's my job to make them work on a computer screen. Obviously we discuss things so he doesn't design stuff that are completely impossible to do in HTML/CSS or simply infeasible for some reason, but I try to give him as much artistic freedom as possible while shielding him from technical constraints. It worked out well so far.

Re: Ask HN: Learning Web Design

#17

Post by henrikschroder »

alinajaf wrote: post #15
seanlinmt wrote: post #12

Earlier quoted context omitted.

The best part about firebug is that it allows you to change the css on the spot and you get to see how that affects your layout immediately.

I think I'm in the minority but I've never really seen the appeal. I've always much preferred chromes developer tools. Right click on anything and choose 'inspect element' to see what I mean.

I've never used Chrome so I don't know if it's better or worse.

My point though is that it's first in recent years that we've had tools like these, and they made a huge difference for me helping me undesrtand what the hell goes on with the styles. It's a much nicer workflow than the old edit-reload-check-edit-reload-check model, where you inserted coloured borders to see exactly how large your divs were, and moved things a few pixels at a time until it looked right.

Re: Ask HN: Learning Web Design

#18

Post by samratjp »

samdk wrote: post #5

Web design is a really broad field. You need to understand HTML and CSS, you need to understand the limitations of web browsers as a medium, you need to understand how users interact with webpages, and you need to have a decent handle on typography/visual design. I don't have good tutorials/articles for all of these areas, unfortunately: they're things I've learned over a pretty long period of time by reading a lot o…

http://www.quirksmode.org/ is pretty good for what you can do with a particular browser and realize its limitations.

Re: Ask HN: Learning Web Design

#20

Post by pierrefar »

alinajaf wrote: post #15
seanlinmt wrote: post #12

Earlier quoted context omitted.

The best part about firebug is that it allows you to change the css on the spot and you get to see how that affects your layout immediately.

I think I'm in the minority but I've never really seen the appeal. I've always much preferred chromes developer tools. Right click on anything and choose 'inspect element' to see what I mean.

But that's how Firebug does it in Firefox!

And on my Chrome, there is a regular inconsistent bug that when I want to inspect an element, the new tool UI is displayed but the element is not selected.

Post reply on HN