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

21–30 of 34 posts

Re: Ask HN: Learning Web Design

#21

Post by pbhjpbhj »

DrJokepu wrote: post #16
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,…

>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.

IMO you are the web designer he is acting like an apprentice. I can see how you might want to insulate from the technical constraints in effort to push the boundaries, but if the design is not considering the user's interactions, accessibility, browser limitations, SEO as well as things like calls to action and the design goals (profit or throughput or whatever) then they're not doing web design.

I'd say from your description you're a web designer employing a graphic artist.

Just 'shop-ing a design and transforming it to markup and styles tends to be print design that is put online rather than web design.

Re: Ask HN: Learning Web Design

#22

Post by atestu »

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.

If you're on a Mac, MacRabbit's CSSEdit [http://macrabbit.com/cssedit/] does that too. It's a fantastic application. I can't design without it.

Usually, I draw a basic sketch on a piece of paper, then write the HTML file in TextMate, and then spend a lot of time in CSSEdit.

Re: Ask HN: Learning Web Design

#24

Post by tcdent »

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.

Chrome's developer tools are actually WebKit's, so you'll be able to use the latest/greatest version in WebKit nightlies.

Re: Ask HN: Learning Web Design

#25

Post by metamemetics »

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.

The best part about FireBug is actually JavaScript debugging and the JavaScript console. Writing a web-app would be nearly impossible without this.

For simple CSS you probably want to be changing it in a seperate text editor that auto-refreshes your web-browser so you have the benefit of being able to save.

The CSS-changing feature you mentioned is of questionable use while the JavaScript features are essential.

Re: Ask HN: Learning Web Design

#26

Post by metamemetics »

pbhjpbhj wrote: post #21
DrJokepu wrote: post #16

Earlier quoted context omitted.

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,…

>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. IMO you are the web designer he is acting like an apprentice. I can see…

^^this.

Web Developer: Backend. Databases, app-logic, server

Web Designer: Frontend. HTML\CSS\JavaScript\PNG web graphics

Graphic Designer: Planning. Creates mockups.

Re: Ask HN: Learning Web Design

#27

Post by gmac »

samratjp wrote: post #18
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.

Also http://www.positioniseverything.net/

I'd go so far as to say that the only really difficult thing on the technical side of web design is working round the millions of bugs in IE (and occasionally the odd one in other browsers). That's usually where over half my coding time is spent on a new site, client-side.

Re: Ask HN: Learning Web Design

#28

Post by isleyaardvark »

metamemetics wrote: post #25
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.

The best part about FireBug is actually JavaScript debugging and the JavaScript console. Writing a web-app would be nearly impossible without this. For simple CSS you probably want to be changing it in a seperate text editor that auto-refreshes your web-browser so you have the benefit of being able to save. The CSS-changing feature you mentioned is of questionable use while the JavaScript features are essential.

Firebug is great for CSS because it allows you to find the specific CSS rules for a selected element, along with the line number it appears on in the CSS file(s), helping you find it in the separate text editor in the first place. Also you can try out new rules very quickly and get instant feedback without switching programs and setting up an auto-refresh.

I switched to Webkit's JS debugging tool not long ago, it has much better warnings than Firebug.

Re: Ask HN: Learning Web Design

#29

Post by DrJokepu »

metamemetics wrote: post #26
pbhjpbhj wrote: post #21

Earlier quoted context omitted.

>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. IMO you are the web designer he is acting like an apprentice. I can see…

^^this. Web Developer: Backend. Databases, app-logic, server Web Designer: Frontend. HTML\CSS\JavaScript\PNG web graphics Graphic Designer: Planning. Creates mockups.

Not so sure about that. JavaScript is a quite advanced language, below the surface. To be able to do anything non-trivial in JavaScript, you have to be a developer and have to have a good understanding of Computer Science.

Also, I don't do any "design", in the creative sense. I implement the design of my partner. So I think your terminology is wrong.

Re: Ask HN: Learning Web Design

#30

Post by metamemetics »

DrJokepu wrote: post #29
metamemetics wrote: post #26

Earlier quoted context omitted.

^^this. Web Developer: Backend. Databases, app-logic, server Web Designer: Frontend. HTML\CSS\JavaScript\PNG web graphics Graphic Designer: Planning. Creates mockups.

Not so sure about that. JavaScript is a quite advanced language, below the surface. To be able to do anything non-trivial in JavaScript, you have to be a developer and have to have a good understanding of Computer Science. Also, I don't do any "design", in the creative sense. I implement the design of my partner. So I think your terminology is wrong.

JavaScript for AJAX and loading new information would be developer yes, because that is all about querying and interfacing with the back-end.

Simple visual JavaScript effects for enhancing presentation and interface would be web-designer.

To me the key part of the term "web-designer" is web... you are creating design using the assembly languages of web browsers: HTML, CSS, JavaScript, and small quick-to-load chunks of graphics. Drawing is just the first planning step and there is nothing that makes it "web" specific other than an intention. Whereas in "graphic" design this is the end result. A graphic designer designs instructions for a graphics display process to display graphics, a web designer designs instructions for a web browser to display web pages.

Post reply on HN