Well, I’m glad I’m not the only one who feels that way 
I thought I was just weird or something, learning all this stuff and not being able to use it. I feel much more confident now thanks to you guys. I will practice a lot more now.
Honestly I thought I was the only one who felt that way haha. I learned so much, and knew what stuff did and how all the tags worked…but I was never able to put it all together and actually do something.
Until I said “No more BS. Lets learn this.”
You really have to think logically when you design from scratch. Thats all it is. You have the knowledge, then you just need to logical thinking to put it all together and it will be super easy after the 10th layout, the 20th, the 30th, and so on!
That design you showed is great and all but really rather worthless when it comes to practical cases. Do yourself a huge favor and start working with real cases such as; eCommerce front, corporate site, news, etc. Something that uses actual content and patterns common to the business, technology and design. If yoy lack any “real work” than best you can do is try mimicking it, creating a “portfolio” site does not accomplish that. In a practica no jobs are going to be developing “portfolio” sites. They are going to involve the cases I mentioned previously so its important to have a portfolio that least showcases those practical applications instead of a “portfolio” site. Adding to that design is dependent on content. So its vital to design with some type of content at hand. Creating “blocks” for “possible” content is not the way to design. The way to design is to have content in hand and make design decisions based on it in a way that improves its cognition while improving the overall aesthetic of
the entire site.
I’m not really in a design role so I wouldn’t feel right commentating on that. However, from a development standpoint to go with what I already said content always comes first. Not a line of HTML should be written without the content. With assembling content comes determining aggregation and context which the content will be used across an entire site or app. Practical cases such as; favorites, carts, recent, etc “widgets” should be known not only in terms of how they will be derived but on the pages they will be present. From there practical and DRY(don’t repeat yourself) based decisions regarding layout can then be made.
Now this looks interesting: #71: Building a Website (1 of 3): Photoshop Mockup
It’s a 3-part video series that takes you from designing the “mock-up” in Photoshop, converting that to CSS/HTML, and finally to WordPress. Part 3 I’m a little confused about how that ties into anything. But we will see. It’s about three hours long, so it should contain a lot of info.
Interesting, still wanting to learn how to turn HTML/CSS layouts into Wordpress ones. Thanks for the link!
You’re welcome. It was quite a find. Exactly the kind of tutorial that more web design masters should be making. There’s actually two series in there. Videos #1-2 or 3 are on the same topic. I haven’t viewed those, but i know they are much shorter.
lol, i actually saw that and it’s great. Extremely helpful. But the thing is, watching someone else do it and doing it yourself and two completely different things 
Chris is an expert and I did learn a lot of new things. But he still has a lot more experience then me. I’m hoping he makes another screencast like that one because that actually really helped me out.
I’m going to agree with oddz and then further: no matter how many “professionals” are out there doing it, starting with a Photoshop image and turning it into HTML/CSS is the backwards way to go. This is why lots of pwetty pwetty websites out there are practically unusable or riddled with poor usability practices and inaccessible. A popular example is how almost every third site I come across have this hip and trendy 9px light grey text on a white background.
Yes, that “looks clean”. No, it’s not useful for anyone except the designer who made it. Nobody (except other designers) come to marvel at how jawsome your site looks. The come to Do Something. They have a task. They want it done, done quickly, done easily, with a minimal of frustration so they can get back to whatever it is they WANT to do.
Start learning to mark up content with the BEST tag. Make ugly but functional web sites. Then learn CSS tricks and techniques to make them look less ugly.
I started with Ian Lloyd’s book Build Your Own Web Site the Right Way Using HTML and CSS. And I made the mistake of getting half-way through that book and then trying my own thing. That book doesn’t give you enough to do your own thing. You stick to the book until you understand it.
My second book was HTML Utopia: Designing Without Tables Using CSS by Rachel Andrew and Dan Shafer. Yes, coincidence that they are both SitePoint books: that’s actually how I got here.
The first half of that book is basically a re-hash of Lloyd’s book (which is good), but the second half does show you what to do when you are given valid (x)HTML markup and a PSD. How to make that markup look like that Photoshop image. (Again, this is the backwards way of building a site, but it’s good for your CSS skills… likely similar to this video Elephant posted)
This was valuable for me because positioning with CSS was a weak point for me. The book only barely introduces floats and likely if I looked at the CSS they used today, I’d prolly barf. But that’s ok. It gave me a start. After that, reading tutorials and watching other people on forums made sense to me, and I could learn further without needing courses and whatnot.
Now if only that would work for me with Javascript… arg.
“The Principles of Beautiful Web Design”
this is awesome and i loves it for tutorials
In my opinion SEO should be the most important aspect. without a good base of SEO the site will not have a great pagerank and thus be lost in the abundance of other sites.
Steve
I’m not sure whether your a BOT or not, or trolling. But SEO is not the most important aspect. If you focused all your efforts on SEO and got a bunch of people to come to a crappy ugly website with lame content, your bounce rate would be 99% with an average view time of 1.5 seconds. Thus punishing your rank due to bad SEO 
Pandoraaaa
Web design is too complicated. Way too many new things coming in. Some people tell you to follow trends (using photoshop), and others don’t. I guess I’m going to have to learn with REAL experience what’s right.
Hey stomme. Always a pleasure to have you chime in here. I probably read ‘HMTL Utopia’ as a follow-up to BYOWSTRW because of you. That was over a year ago I was building my dog walking website, so I cant’ quite remember if it was based on your recommendation or not. Since that time I read 3/4 of CSS: The Missing Manual. I’m working on reading Head First - Web Design. One major road bump from the pages I’ve read so far: I need to learn how to sketch!
Do you agree that once you have CSS down pretty good that it’s a good idea to start learning to design via Photoshop like in the CSS-Tricks.com videos I provided?
I totally agree. It could also be the culture here at Sitepoint. I think a lot of folks here don’t like Photoshop as a tool for designing a website. Whereas if you go somewhere else they will say the complete opposite. I just don’t see the harm once you’ve learned CSS.
With all due respect, that’s like saying that American cars have poor fit and finish because they’re designed using clay models instead of full-size concepts. There’s absolutely no logic connecting the evidence to the conclusion, and having worked in various creative fields (architecture, advertising, and web) for over 15 years, and having experimented with dozens of design processes in various fields, I couldn’t disagree more with your conclusion.
Sites with poor usability are designed by poor web designers. Period. It’s not Photoshop’s fault. Contrary to popular opinion, there’s no “50% gray” lock on Photoshop’s text tool. The fact of the matter is that Photoshop is an AMAZING tool for visualizing websites quickly prior to “diving in” to HTML and CSS, and if one is a good web designer, Photoshop can be used very effectively for conceptual design. Photoshop or some other visual tool should without question be a preliminary step to HTML.
Web design encompasses 1) Information Architecture (IA), 2) Aesthetics, and 3) Technical Markup. None is less valuable than the other. Going straight to HTML & CSS skips 2 very important steps in the process of web design - 1) IA / Wireframing, and 2) Aesthetics / full-color concepts. If you don’t go through these steps, then your site will very likely be, as you say, “riddled with poor usability practices” (and ugly).
Let’s draw a parallel to Architecture… what you’re saying is akin to suggesting that creating sketches, wood models, or 3D renderings of a building prior to construction documents is focusing too much on the “pretty artsy fartsy bits of architecture” and will lead to a less usable final product? You think architects should skip straight to AutoCAD? What you’re saying is akin to that… only HTML/CSS is even less visual than AutoCAD.
I say focusing too much on technical execution limits the REAL usability of your site, which is evidenced not in how well it’s coded, but in how the information is visually presented in a fashion that makes sense and attracts users. Do you believe that ANYONE can make a better visual presentation by “coding” it without ever having even mocked it up in a WYSIWYG design tool?
Can a surgeon perform surgery better without first getting X-Rays to see where he should make his incision?
Should I draw another metaphor? LOL
Ok, one more then… Markup (HTML & CSS) has nothing to do with actually designing a website… at least no more than AutoCAD has to do with designing a building. It’s simply a tool of conveyance - used to translate concepts into reality. With the exception of “working out details”, there’s very little actual design going on in either process. Both are technical markup - construction documentation. The real design (grandiose concepts, etc.) should always happen prior to jumping in to construction… that’s where the other tools mentioned above (including Photoshop) come into play. Cheers.
Wow, this is turning into a hot debate. I like (:
Lawlz, them’s fightin’ words.
(note: every instance of “Photoshop” below represents the gamut of image editors, not just specifically Photoshop)
that’s like saying that American cars have poor fit and finish because they’re designed using clay models instead of full-size concepts.
I thought it was simply because they weren’t Japanese. =^.^=
The fact of the matter is that Photoshop is an AMAZING tool for visualizing websites quickly prior to “diving in” to HTML and CSS
If you can’t build a quick idea with HTML and CSS then work on your skills there. It should take you longer to draw what you think a web site will look like than it does to code a basic layout (and your basic layout will scale in various user agents the way no Photoshop mockup ever will).
Web design encompasses 1) Information Architecture (IA), 2) Aesthetics, and 3) Technical Markup. None is less valuable than the other.
Aesthetics are last, and least valuable. That doesn’t mean skip it, but it’s definitely last. We call it “icing on the cake”. You bake the cake first. Icing is nice, and you shouldn’t leave it out, and it’s damned tasty, but it’s definitely last.
Going straight to HTML & CSS skips 2 very important steps in the process of web design - 1) IA / Wireframing, and 2) Aesthetics / full-color concepts.
Aesthetics do not come before markup, because markup has nothing to do with aesthetics. Absolutely nothing.
Wireframing, as part of UI, is indeed important, and should be done early, but that’s called organising your content. Once you know WHAT your content is (and this includes organisation), you can mark it up. CSS is styling, presentation, nice-to-have. It can always come later. If your site needs CSS to work, you did it wrong. I should be able to use your site in Lynx, with JAWS, and any other non-visual user agents.
If you don’t go through these steps, then your site will very likely be, as you say, “riddled with poor usability practices” (and ugly).
I disagree. Your markup is NOT based on looks. It isn’t. That’s simply not what HTML is. It’s not “this tag to make this look one way”. HTML is what the content is, period.
And to say someone needs a €1434 visual pixel-pushing software to do wireframing, basic layout or usability testing… are you sure you’re not a salesman for Adobe? (and there’s some pretty expensive software out there just for stuff like wireframing… man, I won’t even get into that! But it’s not image-editing software at all)
Photoshop or some other visual tool should without question be a preliminary step to HTML.
I disagree. How it looks is always secondary to WHAT it is and WHAT it does. Always. Visual is but one representation of a web site. One that not everyone even gets.
I say focusing too much on technical execution limits the REAL usability of your site, which is evidenced not in how well it’s coded, but in how the information is visually presented in a fashion that makes sense and attracts users.
I do not believe that one must use Photoshop (or similar image-editing software) to do any of that. Seriously. I do agree with you that how information is presented and it making sense etc is indeed important and must really come before you mark up content… because at that point you’re still figuring out what the content is in the first place.
Can a surgeon perform surgery better without first getting X-Rays to see where he should make his incision?
Having worked as an X-ray and C-arm tech, I can say that’s how I could tell the good surgeons from the meh-okay ones. The good ones used films to confirm what they already knew.
But I think that’s a dying art. None of the younger docs could do that. And of course, seeing what you have before doing something to it is quite different than creating something new.
The real design (grandiose concepts, etc.) should always happen prior to jumping in to construction…
If you’re talking about organising content, I agree. But at that point, you’re not even behind a computer. You don’t set that “real design” in Photoshop. You use Photoshop later to make individual images which are later added to the site to increase its attractiveness, as a nice extra.
Photoshop pictures is the LAST thing you do. Photoshop isn’t a web browser. Photoshop isn’t flexible. Web sites are. Photoshop doesn’t use the user’s web fonts. Browsers do. Photoshop doesn’t resize anything. Browsers do. Photoshop does not react with the user’s computer, OS, software, settings. Browsers do.
Photoshop is not blueprints. There is no engineering it it. It’s just pixel-based images. A web site is not pixel-based images. If you need a basic layout to help think your code through, fine: napkins work. Pencil and paper work. Whiteboards work. In fact, you should be user-testing those napkins and papers.
If you want to make 5 times as much work for yourself (do you make a different Photoshop layout for every screen size? Every font enlargement? Every browser rendering scheme? Every media type?) I guess that’s your choice, but I would never recommend it to people starting out.
On a similar note, some people like to recommend WYSIWYGs for coding web sites. And they are certainly popular in the industry. But I’d never recommend those to people starting out either.
I’d have to agree with the Poes HTML 4.01 is ‘structural markup’ in nature. Neither CSS, JS or images are required for a web page for core functionally. If you want dynamic interaction or fancy colours, bells and whistles then you might want to add the images and CSS and client side script at a later stage.
It’s clearly obvious she was talking about slicing in Photoshop ridiculously complicated pixel perfect designs being “backwards”, if you going to do that… You might as well just have a large image and forget bothering with any markup and CSS. Who needs hyperlinks anyway they are ugly.
Obviously in some cases you might want a pencil and paper to make a very rough draft. Without structure; a drawing is just that, nothing at all to do with a webpage, no more than pixels arranged in a specific order (possibly pretty). I don’t need to reiterate her last five paragraphs because they are more-or-less accurate.
With all due respect drawing a goof assed pretty picture in an even goofier paint program before you even have semantic markup of a reasonable facsimile of your final content is such an idiotic approach to web development I’m in favor of lining up most PSD jockeys in front of firing squads. That nimrod bull should be filed alongside WYSIYWGS, HTML 3.2 style presentational markup, CSS frameworks, Scripting frameworks, and all the other idiocy resulting in fat bloated USELESS websites and repeatedly flushing perfectly good concepts down the toilet!
BULLCOOKIES. Content should dictate layout, not the other way around – semantic markup, logical document structure and separation of presentation from content means that CSS is EXACTLY where layout should be designed, with making the graphics to hang on that layout in the goof-assed paint program the VERY LAST THING that should be done on a design. That way the layout fits the content, instead of shoe-horning content into a layout.
Failing to do this is how one ends up with absurdly undersized fixed metric fonts, elements that don’t work unless you fix the font size like fixed-height backgrounds behind content areas resulting in broken page layouts for large font/120dpi users, fixed width layouts that make the pages useless for netbook much less handheld users; and end up a crappy little stripe on decent machines… and that’s before we even talk about how most PSD jockeys wouldn’t know accessibility from the hole in their ****.
Much less concepts like bandwidth restrictions which not only effect the speed of the site for the user, but more importantly the cost of hosting it. The “But I can do it in Photoshop” IDIOCY being the leading cause of people needing dedicated quad xeons with 8 gigs of RAM to do a shared Atom 330 with 2 gig’s job, where people end up blowing say… 277k in 44 files to deliver 4.5k of plaintext and a 9k object file? Say hello to 156k of scripting for nothing, 50k of images doing 15k’s job, 23k of markup doing 15k’s job, and a 40k stylesheet doing 20k’s job.
… and that’s using a reasonably “lean” site as an example (bonus points to anyone who guesses which one). Again, it’s nothing more than Lame Excuses for Not Being a Web Professional!
IMO, if you’re a good designer, you can use PS and get the same amount of mark up and semantics as the other method without having to use images everywhere. There are thousands of techniques used when slicing with CSS to make it seem like it’s made out of images, but it’s just clever effects. And with CSS3, I expect that to become even easier. It’s like drawing a picture. Would you use straight start drawing or would you like to first create thumbnail sketches, carefully pick your color palette, and then finally draw the final thing (the coding).