Why is it that coders don't ever convert a PSD using the right spacing?

Somewhere along the line, I don't know where, but website designers stopped coding, and left that up to coders, which baffles me.

To be honest though, I don't blame them too much. Sure, back in the day when CSS when considered a "new and upcoming" technology, it was easy to code a site. But now with CSS3, jQuery, the various CMS systems out there, responsive designs, etc... it's quite a bit more difficult than it once was.
 


To be honest though, I don't blame them too much. Sure, back in the day when CSS when considered a "new and upcoming" technology, it was easy to code a site. But now with CSS3, jQuery, the various CMS systems out there, responsive designs, etc... it's quite a bit more difficult than it once was.

I agree.

I think there is an overlap necessary, as with any profession; a designer needs to be capable of doing front end, maybe not all the bells and whistles but enough to fully understand the complexity.

And a front end developer absolutely must have an eye for design to really be good, because in the end, markup and css is just a way to design or recreate a design.
 
A lot of shit that used to be done with images should be replaced by css3, rounded corners and borders obviously, but also box shadows and gradients. lol remember rollover images?
 
To be honest though, I don't blame them too much. Sure, back in the day when CSS when considered a "new and upcoming" technology, it was easy to code a site. But now with CSS3, jQuery, the various CMS systems out there, responsive designs, etc... it's quite a bit more difficult than it once was.

That's not a problem. If a website "designer" does create designs for technologies/techniques they have implemented themselves, then everything would be fine.

The designer needs to deliver a html/css version of the mockup they created, and let the web developer take care of the jQuery, and implementation on CMS systems. That's a developer's job. As long as it's clear in the quote of what's going to happen where and who is responsible for doing it, that's fine.

Here is the problem people on the coder's side face. Website owner goes to some outsourced team, gets a design, and a bunch of PSD files, works with them, then has to find a competent coder to implement it, with the functionality that may have been explained to the outsourced team. If there are multiple parties working together, it's a cluster fuck if there is not 1 person in the middle organizing and understanding the whole process. That ends up being the website owner (since most people go the cheap route and not hire a team or project manager) who doesn't know shit about quality coding, or has ever even done a website project in their life.

But the designers don't want to code (or can't code). The coders can't design, and the website owner is leading the charge but doesn't want to pay more money then whatever value they put on their website. If they see that someone else is advertising websites for $200, they think, this whole project is going to cost $200, and the site will be able to launch into space.

The designer has no interest nor cares what work the coder has to put in. The coder just wants to get it out the door so the website owner will stop calling them for their cheap project, and the website owner thinks everyone is a lazy cause they do not want to break their backs for that small $200 (usually outsourced solution pricing).

In terms of pay is should go like this

Programmer/Developer (serious stuff backend integration) > Web coder (functionality / jquery / light to med CMS implementation) > website designer (html / css) > illustrator (intern that can't code)

If you as a website owner are not paying in accordance to that scale, OR don't even understand that scale, you should not be managing the project. If you were paying in accordance to that scale, you would get EXACTLY what you wanted.

Simple solution, have a website designer that can take their design from A to Z and explain the process to their client.

But then comes the next saga, God forbid that website owner think their web designer also knows SEO and PPC, and can also change the oven timer from blinking 12:00 - PRESS FUCKING CLOCK MOTHERFUCKER!​
 
Just learn how to code - it's not hard and you'll save yourself a lot of money. And then you don't have to wait on anybody when you want to build something.
 
Reasons not to deal with end users:



SK9BvNH.gif
SK9BvNH.gif
SK9BvNH.gif
SK9BvNH.gif


c8xsRwK.gif
c8xsRwK.gif


H5AEMTM.gif
H5AEMTM.gif
H5AEMTM.gif
H5AEMTM.gif

NGyVmPJ.gif
bJvNjr2.gif
bJvNjr2.gif


ZxGRIyK.gif
ZxGRIyK.gif
ZxGRIyK.gif

ZxGRIyK.gif
ZxGRIyK.gif
ZxGRIyK.gif



SK9BvNH.gif
SK9BvNH.gif
SK9BvNH.gif
SK9BvNH.gif
 
If you claim to be a website designer and can't code, you're a waste of space. If you claim to be a coder but can't design, you've got some uses, like updating websites, but you're not a professional in my opinion. It's not a difficult job, a website designer should create a design then make it live. What the fuck is so difficult that you need 3 people to do the job of 1 person?

Watch out we got a bad ass over here!

As much as I have agreed with much of what you've wrote here, it is incredibly rare to find people that can handle the whole development side of things, much less design as well. And really, should you have to?

Coders are unlikely to be very artistic. Artists are generally not very analytical. I know, I use to be a giant art nerd.

I think your time is much better spent focusing on a set of skills. It's near impractical to know the entire design side and keep up with the programming side, and be good at it all. Honestly, you don't have to know it all to make a good living in this game either. That's what the market dictates and thus it is.

Wikipedia said:
A professional is a person who is engaged in a certain activity, or occupation, for gain or compensation as means of livelihood;

Don't confuse that with being good at what you do.

I think you're much better off leveraging the best of both worlds, but the problem is there are a lot of scrubs out there. For how many scrubs are out there, there are that many other people who don't know a lick about web development so they are almost doomed to fail or get totally ripped off.

There is no good answer. There aren't many things you do in life you get right the first time you do them. Think about starting any other business in a sector you don't know shit about. When you start you will probably get your ass handed to you. After you get your face punched in, each time you learn something new about how to go about it. I don't think the web is any different. It's easy to talk big when you've been in the game a while and know the score.

And OP, if you aren't getting back what you want you either shouldn't be paying these people, or seeking professional help from someone in the field that can help you get the project done the right way.

As a rule of thumb you should be super explicit down to the nitty gritty of exactly what you want. Some people are really, really dense, or just scumbags. Do not expect to just say to a designer "I want this LP coded." and it comes out exactly how you envisioned it because chances are it won't be what you wanted. Make sure to hash out all the business details down to the nitty gritty, otherwise someone will just tell you that they did what you asked. Better yet to whomever is going to be doing the programming side of things to have them in on it as well (assuming they are competent).
 
The designer needs to deliver a html/css version of the mockup they created, and let the web developer take care of the jQuery, and implementation on CMS systems. That's a developer's job. As long as it's clear in the quote of what's going to happen where and who is responsible for doing it, that's fine.

Depends on the site though. You know how complex some of these UIs can get. I'm cloning one right now for a client of mine, and the amount of Javascript is insane. Thankfully I'm decent at Javascript, so I can just do it myself, but I wouldn't really expect this skill set from either, the designer or the back-end developer.

You have the designer worried about color palettes, font faces, grids, etc. Then the back-end guy is worried about getting the REST API developed. Which one of those guys is supposed to be doing the drag-and-drop stuff, and all that type of functionality for the UI?

I'm just saying, depends on the site, but I think due to the complexity and amount of user interaction on many sites nowadays, it's created a third required skill set to bring a site to life. Before, it was designer, developer, and that was it. Maybe a server admin if there's going to be huge load, or if security is a huge concern. Nowadays, many sites would require you to have an extra guy on board for the UI work, or at least I think so.

Because otherwise you get into the whole debate about hiring people who are experts at their specific skill sets, or hiring people who are jack of all trades and mediocre at everything.
 
because the place has no quality control. when my guys code a page from psd its pixel perfect....but if i quoted your project youd probably say "but i can get that done for less than half the price elsewhere"
 
Paid a professional company that's been around for awhile $2K for 1 homepage PSD to be coded, it was basic. Text, images and links, nothing fancy.. Came back looking like pure shit, seriously the worst live design/code imaginable.. Looked nothing like the PSD I sent.. I think it broke 2500 lines of code, lol.. Should have been way under 400.

Doesn't matter who I pay, I've had the same experiences at every pay grade.. Those $4/HR India guys have actually had the best coding to date out of any company or freelancer I've hired..

Talk about a mind fuck.

Why on earth did you pay a company $2k to slice & code 1 homepage PSD for you?

Also, IMO designing in photoshop shouldn't be the way things are done anymore. Do mock-ups on paper then go straight into coding. Photoshop just slows things down.

Why we skip Photoshop by Jason Fried of 37signals
 
Do mock-ups on paper then go straight into coding. Photoshop just slows things down.

I mostly agree with this sentiment and rarely do PSD mockups anymore. I have my own responsive framework built and it's so much easier to make design changes with CSS, like colours, font choices, font sizing, margins and gutter spacing, that take place instantly site wide instead of dicking around with things in Photoshop. I can then show the client a working mockup of their site instead of static flats that don't do anything and they get a much better idea how things are going to look and behave.
 
Watch out we got a bad ass over here!

As much as I have agreed with much of what you've wrote here, it is incredibly rare to find people that can handle the whole development side of things, much less design as well. And really, should you have to?

Coders are unlikely to be very artistic. Artists are generally not very analytical. I know, I use to be a giant art nerd.

I think your time is much better spent focusing on a set of skills. It's near impractical to know the entire design side and keep up with the programming side, and be good at it all. Honestly, you don't have to know it all to make a good living in this game either. That's what the market dictates and thus it is.

Depends on the site though. You know how complex some of these UIs can get. I'm cloning one right now for a client of mine, and the amount of Javascript is insane. Thankfully I'm decent at Javascript, so I can just do it myself, but I wouldn't really expect this skill set from either, the designer or the back-end developer.

You have the designer worried about color palettes, font faces, grids, etc. Then the back-end guy is worried about getting the REST API developed. Which one of those guys is supposed to be doing the drag-and-drop stuff, and all that type of functionality for the UI?

I'm just saying, depends on the site, but I think due to the complexity and amount of user interaction on many sites nowadays, it's created a third required skill set to bring a site to life. Before, it was designer, developer, and that was it. Maybe a server admin if there's going to be huge load, or if security is a huge concern. Nowadays, many sites would require you to have an extra guy on board for the UI work, or at least I think so.

I completely agreed. (but Rage9 you know I'm a badass :D come on, but I also know it's very rare, and state, that it's un-realistic for someone to be at my skill level, In fact, I cannot turn on design and coding on the same day). I did go on in my 2nd post to clarify this more. This is how I break it down:

  • Illustrator = Can make a design on PSD / Photoshop. (Intern)
  • Web Designer = Can make a design & chop it up with HTML & CSS (Barebones html & css)
  • "Coder" = Can code in HTML & CSS, javascript, etc & light - medium CMS implementation (Basically making it REALLY LIVE - but does not need to know how to design)
  • Web Developer = Does backend and cross system implementation (accounting (POS integration), billing (quickbooks integration), affiliate, warehouse/shipping (FedEx & UPS integration) server admin or the complicating parts of making it function)

I maybe in a position after doing this since 1995 of doing this I can do all stages extremely well, but that took YEARS of mastering every stage. I don't expect people at all to be at this level, at least without charging for it. It's like a person that goes to learn Kung Fu, Then Ninjutsu, then Jujitsu, then box, then wrestling. That's completely overkill cause you only really need one to survive. The illustrator learnt how to throw a couple of punches once back in the day. :D (That's why these $200 and $2K project quotes get turned down quickly)

I never stated someone needs to have all skills (If I did, I was incorrect), again I went ahead and clarified this in my 2nd post.

I'm going to skip the useless illustrator role.

The person most consumers are looking for is the "web designer", that should be able to create their own design and put it into html and CSS. That's as far as they should be at LEAST able to go. If someone is paying 2K for an illustrator (they just provide PSD files), The consumer needs to know that. There is not really alot to learn since html and css aren't programming languages. In fact you can get outputs of this straight from PSD (not recommended).

The Coder should work with a web designer or illustrator, and should be more of a programming mindset versus artistic. They make the thing REALLY work. javascript, jquery, ajax, all that fun stuff the kids want today (UI stuff). This is probably where 95% of website owners (buyers), at least new to owning a web site, need.

If you need a web developer, then you should be shelling out bigger dollars, cause they integrate systems, and make serious magic happen.

Most of the (web design) industry can survive upto the website designer part, but the illustrator in my opinion is completely useless, until they get to a website designer part. There is NO leap from web designer to coder, since that's going from artist to programmer, which in itself require different halves of the brain. A coder is a beginner "web developer", where as an illustrator is a beginner "web designer".

My main gripe is the website designer should be able to AT LEAST give you a barebones of the HTML and CSS. (If they can use word, excel, and photoshop, they should be able to understand a simple scripting language such and html and css. If they can't they are a useless illustrator).

Now if a consumer knew all this before hand they would be able to get their project off the ground, and hire upto the skills they need.

Why on earth did you pay a company $2k to slice & code 1 homepage PSD for you?

Also, IMO designing in photoshop shouldn't be the way things are done anymore. Do mock-ups on paper then go straight into coding. Photoshop just slows things down.

Why we skip Photoshop by Jason Fried of 37signals


It's necessary for 95% of consumers who are looking for web design. Since they'll want to see a visual of what they are paying for, and it's a good idea for everyone to know what the end product is. 37signals is in a unique position where they really don't "answer" to anyone and can go straight from paper to design. I do this all the time for my personal projects, but if a "client needs to see what you are working on", or "wants to see the website before the work starts" (idiot, design is work), then it's not possible.

People want to see it before it happens, there might be some serious problems that they didn't envision or it's not up to par with their tastes (next step, they'll insert their cat/dog onto the site).​
 
It's necessary for 95% of consumers who are looking for web design. Since they'll want to see a visual of what they are paying for, and it's a good idea for everyone to know what the end product is. 37signals is in a unique position where they really don't "answer" to anyone and can go straight from paper to design. I do this all the time for my personal projects, but if a "client needs to see what you are working on", or "wants to see the website before the work starts" (idiot, design is work), then it's not possible.

People want to see it before it happens, there might be some serious problems that they didn't envision or it's not up to par with their tastes (next step, they'll insert their cat/dog onto the site).

People can't look at a HTML website or a paper sketch? wtf... All that indenting must be messing with your head.

It would make client communication easier because you don't have to send over a bunch of psd/jpg files after every small change.
 
Also, IMO designing in photoshop shouldn't be the way things are done anymore. Do mock-ups on paper then go straight into coding. Photoshop just slows things down.

Why we skip Photoshop by Jason Fried of 37signals

Maybe I'm wrong because I'm not a designer, but wouldn't it be easier to first do it in Photoshop, then slice it?

Doesn't a Photoshop project make for a much better canvas to design in, versus HTML / CSS. With Photoshop you can very easily add new gradients in, switch colors or font faces, change positioning of elements, easily add and move icons / buttons around, etc... all within seconds.

HTML / CSS on the other hand, you can have modify the code in the files, then reload the browser for every small change.
 
It's necessary for 95% of consumers who are looking for web design. Since they'll want to see a visual of what they are paying for, and it's a good idea for everyone to know what the end product is. 37signals is in a unique position where they really don't "answer" to anyone and can go straight from paper to design. I do this all the time for my personal projects, but if a "client needs to see what you are working on", or "wants to see the website before the work starts" (idiot, design is work), then it's not possible.

People want to see it before it happens, there might be some serious problems that they didn't envision or it's not up to par with their tastes (next step, they'll insert their cat/dog onto the site).

Did you read the link?

Why can't I show my client the website in html form, and tweak it from there? Not only is it possible to easily share/show clients, but it's much easier to tweak.
 
Maybe I'm wrong because I'm not a designer, but wouldn't it be easier to first do it in Photoshop, then slice it?

Doesn't a Photoshop project make for a much better canvas to design in, versus HTML / CSS. With Photoshop you can very easily add new gradients in, switch colors or font faces, change positioning of elements, easily add and move icons / buttons around, etc... all within seconds.

HTML / CSS on the other hand, you can have modify the code in the files, then reload the browser for every small change.

I find it much easier to directly edit html/css, I've had more hassles trying to manipulate HTML / CSS to look exactly like a photoshop made PSD which doesn't replicate the web environment than I've thought "oh i wish i could just drag this here..".

If a designer is highly proficient with html / css, they should be able to move stuff around a page as fast by adjusting code as they can in photoshop IMO, for most changes, anyway. You then save massive amounts of time at the other end when you have to do all your work again. You also usually end up with a much lighter weight design, as lots of people slicing up sites use far too many images.

In regards to how I see a web dev project split:

UI/UX Designer does all the icons, graphics, initial sketches, plans out the design to achieve the websites goals based on design principles.

Skills: Photoshop, Illustrator, Typography, Colour Theory, Design Experience, Website Usability knowledge, etc.. Probably will have some coding knowledge too, but not where they excel. Has a design/artistic background.

Front End Developer works with the UI/UX guy to put his plan into action in code form. They work together closely and iterate on the design until they have something workable.

Skills: HTML/CSS/Javascript & the key Javascript frameworks. Can write great javascript that is lightweight, and is great at optimising frontend code in general. Probably has a design or cs background.

Back End Developer integrates the front end design with the CMS/any backend systems.

Skills: Some level of HTML/CSS/Javascript to understand what's going on, primary knowledge are backend programming language(s) (python/ruby/php/asp/perl/insert other language here) & frameworks (rails, django, zend, code igniter..). Probably has a computer science background.

One person can do more than one element of the above "roles", but that's how you tend to see the split work out in larger teams at tech companies.
 
Did you read the link?

Why can't I show my client the website in html form, and tweak it from there? Not only is it possible to easily share/show clients, but it's much easier to tweak.

Yes I did read it. I don't comment on things I don't read. What's if the website design is not a traditional layout? You remember those flash websites from the past, and now-a-days the responsive designs. These designs aren't simple, one website doesn't look like another.

Look at a simple design like American Express (https://www.americanexpress.com/) and JPMorganChase (JPMorgan Chase & Co.), and then Chase (https://www.chase.com/). Those are simple websites, but with uniquely different layouts. Some of the drop shadowing details some websites have are impossible to produce on paper. In a scenario where you give me an html design like Amex, but I was thinking more Chase, you'd have to do the html and css all over.

Again, I no longer do designs for external clients so I find myself not needing the photoshop stage unless I want to deeply think about the User Interface before I code it, but that's the scenario we'd run into in the past. Even if on paper the design looked like chase, but when it was HTML-ed it looked different or "not quite there", a Photoshop version is the best digital representation. And these are simple layouts, what about complicating responsive designs.

I would love this scenario, skipping photoshop and HTMLing it, but it's the consumer that "wants to see the design" before it's coded (because If it’s on your screen it should work) so they can "give you their advice" or the traditional yay or ney on the design. I do agree its an archaic scenario, but I don't think going into html is the best scenario to solve the problem.

Funny Joke, just looking at the design of 37 signals' article, I think they should probably start considering using PSD before doing their website design.

But seriously, if you delivered a design to a client that paid $2K, with the EXACT design of how that page the article is on looks like, what do you honestly think their reaction will be? (remember, take into consideration the lack of education on the consumer side)​
 
I find it much easier to directly edit html/css, I've had more hassles trying to manipulate HTML / CSS to look exactly like a photoshop made PSD which doesn't replicate the web environment than I've thought "oh i wish i could just drag this here..".

If a designer is highly proficient with html / css, they should be able to move stuff around a page as fast by adjusting code as they can in photoshop IMO, for most changes, anyway. You then save massive amounts of time at the other end when you have to do all your work again. You also usually end up with a much lighter weight design, as lots of people slicing up sites use far too many images.

In regards to how I see a web dev project split:

UI/UX Designer does all the icons, graphics, initial sketches, plans out the design to achieve the websites goals based on design principles.

Skills: Photoshop, Illustrator, Typography, Colour Theory, Design Experience, Website Usability knowledge, etc.. Probably will have some coding knowledge too, but not where they excel. Has a design/artistic background.

Front End Developer works with the UI/UX guy to put his plan into action in code form. They work together closely and iterate on the design until they have something workable.

Skills: HTML/CSS/Javascript & the key Javascript frameworks. Can write great javascript that is lightweight, and is great at optimising frontend code in general. Probably has a design or cs background.

Back End Developer integrates the front end design with the CMS/any backend systems.

Skills: Some level of HTML/CSS/Javascript to understand what's going on, primary knowledge are backend programming language(s) (python/ruby/php/asp/perl/insert other language here) & frameworks (rails, django, zend, code igniter..). Probably has a computer science background.

One person can do more than one element of the above "roles", but that's how you tend to see the split work out in larger teams at tech companies.

That's actually a perfect scenario in my opinion. BUT the traditional consumers don't think like that, and that project is going to cost more then $2K to get 2-3 people working on it with a project manager. So when they come in with a $200 or $2K budget, they get what they pay for. Rarely do consumers have this understanding of what it takes to create a real website. Remember their 16 year old nephew can do all that. It's about educating the consumer.​