Ask YC: Best way to learn CSS/UI design?
24 comments
Firebug firebug firebug: http://www.getfirebug.com/
This brilliant Firefox extension is how I learned CSS. Click the "inspect" button, then click any page element, and it'll show you all the CSS rules being applied to that element. It'll also highlight the margin+padding so you can wrap your head around the box model.
Best of all, you can change CSS properties on the fly. Naturally, the best way to learn is to hack up someone else's CSS, so go to a site you like the looks of, and play with the styling.
Soon, you'll be thinking to yourself "man, this isn't complicated at all!"
And then you will open your page in IE 6.
And then you will punch a hole in the wall.
This brilliant Firefox extension is how I learned CSS. Click the "inspect" button, then click any page element, and it'll show you all the CSS rules being applied to that element. It'll also highlight the margin+padding so you can wrap your head around the box model.
Best of all, you can change CSS properties on the fly. Naturally, the best way to learn is to hack up someone else's CSS, so go to a site you like the looks of, and play with the styling.
Soon, you'll be thinking to yourself "man, this isn't complicated at all!"
And then you will open your page in IE 6.
And then you will punch a hole in the wall.
Then you can repeat the same process in IE with the quite good IE Developers Toolbar: http://www.microsoft.com/downloads/details.aspx?familyid=e59...
I use the Web Developer Toolbar.https://addons.mozilla.org/en-US/firefox/addon/60
Any reasons why Firebug is better?
WD seems to do the same things and more.
Any reasons why Firebug is better?
WD seems to do the same things and more.
That's what everyone says until they try Firebug. I'm not kidding -- I know at least three people who asked me the same question, then came back a week later and said "you're right, this is way better."
The interface is far more usable. Also, all WD can do with javascript is turn it on and off; Firebug has a full-fledged javascript debugger. (It's how I learned JS, in addition to CSS!) The DOM inspection tools are amazing.
Pretty much the only things I still use WD for are resizing the browser window and checking if I'm in quirks mode. But if breaking the page by adding a label to every div is a key feature for you, then maybe you should stick with WD. =)
The interface is far more usable. Also, all WD can do with javascript is turn it on and off; Firebug has a full-fledged javascript debugger. (It's how I learned JS, in addition to CSS!) The DOM inspection tools are amazing.
Pretty much the only things I still use WD for are resizing the browser window and checking if I'm in quirks mode. But if breaking the page by adding a label to every div is a key feature for you, then maybe you should stick with WD. =)
Thanks. I'm installing Firebug now.
I would first make a distinction between CSS and UI design. You can make sucky UIs in CSS and you can make great UIs without CSS.
UI design is really more of a set of beliefs than coding.
Start by reading Defensive Web Design for the Web by 37Signals guys.
Jakob Nielsen's useit.com alertbox articles are a great place to start too-- http://www.useit.com/alertbox/ Back in high school I printed all his useit.com articles at the library printer and compiled it neatly in a binder:)
Also checkout Jakob Nielsen's Homepage Usability: 50 Websites Deconstructed.
UI design is really more of a set of beliefs than coding.
Start by reading Defensive Web Design for the Web by 37Signals guys.
Jakob Nielsen's useit.com alertbox articles are a great place to start too-- http://www.useit.com/alertbox/ Back in high school I printed all his useit.com articles at the library printer and compiled it neatly in a binder:)
Also checkout Jakob Nielsen's Homepage Usability: 50 Websites Deconstructed.
Along the same lines, "Don't make me think" by Steve Krug provides an awesome Usability foundation. (Better than Nielson, IMO.)
http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/078972...
http://www.amazon.com/Dont-Make-Me-Think-Usability/dp/078972...
Ah, how did I miss that:) It's the last UI book I bought.
If you're only going to buy one book on CSS, I highly recommend CSS Mastery by Andy Budd. It actually has a great introductory section in there, and no one puts into plain English better the reasons why certain hacks are used in certain browsers. Web Standards Solutions by Dan Cederholm is a solid intermediate level book and if you want a good one on usability, I think Jakob Nielsen's Prioritizing Web Usability is a solid, well-researched read. While Defensive Web Design for the Web by 37signals is alright, I think it's a bit dated and I found it focused more on sites that execute certain principles badly. I really wished there were more books on sites that get interfaces right--or even one on evolution of a design with commentary by the UI engineers...but that would be too useful.
I wrote a cursory article about CSS techniques on Particletree.
An Overview of Current CSS Layout Techniques http://particletree.com/features/an-overview-of-current-css-...
It's from 2005, but I think it's a good start for getting your head around the fundamentals. And honestly, while Firebug is a great tool for debugging CSS issues, it won't help you introduce to what's going on.
In the end, there's no crash course into CSS/UI design. It's an investment and even after you get a handle on executing good CSS, it won't necessarily help you create fantastic UIs. Remember, one doesn't always follow the other.
I wrote a cursory article about CSS techniques on Particletree.
An Overview of Current CSS Layout Techniques http://particletree.com/features/an-overview-of-current-css-...
It's from 2005, but I think it's a good start for getting your head around the fundamentals. And honestly, while Firebug is a great tool for debugging CSS issues, it won't help you introduce to what's going on.
In the end, there's no crash course into CSS/UI design. It's an investment and even after you get a handle on executing good CSS, it won't necessarily help you create fantastic UIs. Remember, one doesn't always follow the other.
I second that! CSS Mastery by Andy Budd is great. After reading that book you will really understand the box model and positioning, as well as a bunch of other stuff. Of course learning CSS goes together with learning to write well structured mark up also.
for learning CSS, start with the basics tutorials http://www.w3schools.com/css/default.asp
try to create a couple of pages, try a CSS framework like blueprint. your next step would be trying to customize the CSS of a wordpress template. play with background colors, font colors, change the layout of elements.
as always, constant practice makes perfect.
UI design on the other hand is something completely different (although you need to know CSS/HTML and javascript to do it). read the online book designinginterfaces.com, the 37Signals blog, try to change the structure and layout of a blog template.
you will find it hard and the first few tries won't be pleasant to see, but if you keep doing it for a few months, then you will be actually be able to do UI design.
UI design on the other hand is something completely different (although you need to know CSS/HTML and javascript to do it). read the online book designinginterfaces.com, the 37Signals blog, try to change the structure and layout of a blog template.
you will find it hard and the first few tries won't be pleasant to see, but if you keep doing it for a few months, then you will be actually be able to do UI design.
Besides the standard specifications, tutorials you'll find everywhere I would recommend you to analyse the existing stuff, pages you especially enjoy, or those created by CSS gurus etc.
Just like with code or any other activity, it is great to try to mimic giants.
Also, two notes.
One. Don't know how about others but I've found myself rather unable to learn conceptually new things on deadlines or working on real projects. So, at least, don't feel bad if you won't deliver good stuff.
Two. There's a lot of "layers" in the UI: information architecture, usability, CSS, graphics, and perhaps some other I forgot to mention.
Just like with code or any other activity, it is great to try to mimic giants.
Also, two notes.
One. Don't know how about others but I've found myself rather unable to learn conceptually new things on deadlines or working on real projects. So, at least, don't feel bad if you won't deliver good stuff.
Two. There's a lot of "layers" in the UI: information architecture, usability, CSS, graphics, and perhaps some other I forgot to mention.
1 Book has it all:
"CSS Mastery" by Andy Budd
You will be a ninja thereafter.
"CSS Mastery" by Andy Budd
You will be a ninja thereafter.
You shouldn't have much trouble. I learned by drawing up a layout in InDesign (you can do it on a piece of paper, it doesn't matter). Get that how you want it, without regard to what you do or don't know how to do in CSS.
Then turn that into HTML/CSS. I find WebKit's CSS compliance to be better than anything else out there, but Gecko browsers are pretty good too, so use one of those two engines. You can solve most bugs with one or two Google searches. Within a week or two, you'll know 90% of what you need to, and it'll take you another couple months to learn the obscure stuff.
Then turn that into HTML/CSS. I find WebKit's CSS compliance to be better than anything else out there, but Gecko browsers are pretty good too, so use one of those two engines. You can solve most bugs with one or two Google searches. Within a week or two, you'll know 90% of what you need to, and it'll take you another couple months to learn the obscure stuff.
Goofing around with CSS Zen Garden doesn't hurt.
You'll also want access to all the major browsers out there -- which means virtual machines or multiple boxes for OS-specific browsers. Heck, you should even try out non-OS specific browsers on different OSes. I once had this bug in which my page rendered differently between Firefox / Windows and Firefox / OS X. They both had the same version number, and I am still baffled to this day.
You'll also want access to all the major browsers out there -- which means virtual machines or multiple boxes for OS-specific browsers. Heck, you should even try out non-OS specific browsers on different OSes. I once had this bug in which my page rendered differently between Firefox / Windows and Firefox / OS X. They both had the same version number, and I am still baffled to this day.
You can also have a look at Blueprint, a CSS framework, which:
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.
http://code.google.com/p/blueprintcss/
Blueprint is a CSS framework, which aims to cut down on your CSS development time. It gives you a solid CSS foundation to build your project on top of, with an easy-to-use grid, sensible typography, and even a stylesheet for printing.
http://code.google.com/p/blueprintcss/
That looks like it would be useful for typesetting, but it seems way more heavy than necessary. Do you use it, and have you found it to actually be helpful?
Sorry, I didn't see this here.
I used it on one project. Whilst it was quick and easy to get the layout done I do agree with you on it been heavy.
One thing that I did get from it was exposure to some decent CSS. I'm confident that my future projects will benefit from having used and learned from their techniques.
I'll certainly use it again.
I used it on one project. Whilst it was quick and easy to get the layout done I do agree with you on it been heavy.
One thing that I did get from it was exposure to some decent CSS. I'm confident that my future projects will benefit from having used and learned from their techniques.
I'll certainly use it again.
Once you've got a bit of a start (i.e. you can write
h1 { color: red }
or whatever, try CSSEdit for the Mac. It's really good for rapidly understanding what you can do with CSS - it's pretty much the OmniGraffle of CSS editing, if that makes any sense to you.
Highly recommended.
h1 { color: red }
or whatever, try CSSEdit for the Mac. It's really good for rapidly understanding what you can do with CSS - it's pretty much the OmniGraffle of CSS editing, if that makes any sense to you.
Highly recommended.
http://www.w3schools.com/css/default.asp
Definitely should be your first port of call.
Definitely should be your first port of call.
I highly recommend the Sitepoint CSS books
Start with CSS tutorials (box model etc):
http://www.w3schools.com/css/default.asp
http://www.html.net/tutorials/css/
and then move to these two books:
http://www.zeldman.com/dwws/
http://www.simplebits.com/publications/bulletproof/
And you should know more than web designers that charge a ton of money to develop table-based sites.
http://www.w3schools.com/css/default.asp
http://www.html.net/tutorials/css/
and then move to these two books:
http://www.zeldman.com/dwws/
http://www.simplebits.com/publications/bulletproof/
And you should know more than web designers that charge a ton of money to develop table-based sites.
Just read the W3C spec.
I highly recommend NOT reading the W3C spec to start out if you actually want to get anywhere.
Just dive in and start coding, CSS isn't really all that hard.
I found it really useful/fun to just copy another site (e.g. Facebook or Digg) to get a hang of how things work. If you get stuck you can always take a look at their CSS using Firebug or by opening up their stylesheet in the browser.
Just dive in and start coding, CSS isn't really all that hard.
I found it really useful/fun to just copy another site (e.g. Facebook or Digg) to get a hang of how things work. If you get stuck you can always take a look at their CSS using Firebug or by opening up their stylesheet in the browser.
In our previous startup, I was mainly involved in writing the back-end code. This time however, I'll need to contribute to the CSS interface coding too.