*HELP!*Communication Disconnect between Graphic Designer and Programmer.

Hey all,

I'm sure this isn't a new topic but I am a Graphic Designer who needs to ask questions about why my work doesn't seem to come through out the other end looking like I designed it. I mainly work with websites and web content. This has been an ongoing problem and before I take it directly to my CEO, I wish to make sure I have a foot to stand on seeing as my expertise is not web programming or scripting other than basic HTML.

**IMPORTANT******************************************************************
Before I get into it, it is important to know that it would be wise for me NOT to post existing links to websites I have issues with that were made within the company, or any of the work I have done preexisting. If needed I will try to make examples of the issues as to convey my hardship.
******************************************************************************

1. Not using the same font-

When I first started I was told that there are only 26(approximate) fonts that are usable for website use.

This with a little bit of digging on, the internet, I have found to be false.

Google, as we know is all powerful, has made everything a little easier. True there were
only a small number of fonts able to be used when the internet came out, but it is naive
to think that there is always going to be such a small number of fonts to be able to be used on websites... Well Google has answered with Google font. I read that there is a simple script that you can plug into your code that allows the "reader" to read whatever you put up on the website in the font you selected as long as that font is within the Google font cache.

Google allows more fonts to be used and the production team is still giving me the same excuse of, "That font can't be used in websites." Even though I made sure Google had the font I used.(Even downloaded it from Google Font)

2. Image Issues-

The production team has told me that every image used in making the site requires to be saved out separately in accordance to the image itself i.e.(PNG or JPEG). So when I go through the tedious phase of taking everything from a 10 page site that needs to be saved out and they give me the finished product, they aren't even using a lot of the same images it seems. Where things should be overlapping or need to have transparencies don't and ultimately it really kills the website itself, which makes for an unhappy customer(I deal with the customer directly and show them my concepts before it goes to production) who pays 10's of thousands of dollars to make sure they have a great website.

One example is the Navigation bar, in one case I have the nav bar be just a somewhat thin bar at the top of the screen that spans the 1920 resolution, the background is an image of an author we have and the nav bar's opacity is dropped to 75% of black so it shows through to the image. What ended up happening though is they formatted the background image to be just touching the nav bar thus throwing off the entire design of the website because I used this in other areas as well.

Another thing is image sizes, I have started to just work on a 1920x1080 72dpi(My screen resolution) image format in Photoshop. When I have a background image I save it out to that resolution in hopes that there will not be any hiccups later. In the most recent case though, the background image seems to be much larger and cropped at a certain point, which leads me to believe I am doing something wrong but they won't tell me otherwise. Even when I go fullscreen on the website it doesn't seem to fit correctly.

Am I in the wrong on this?

3. Alignment issues-

This is probably the biggest killer of the websites themselves.

It may be only a few pixels here and there but that adds up and when I make my concept image look good and then show it to the client who approves it and the team throws half of the images off by a hundred pixels or so it just looks bad and makes the customer unhappy.

--------------------------------------------------------------------------------------------------

I guess what I'm asking here is, are these big problems on my end or their end? I wouldn't mind changing my workflow but no one seems to be telling me to do things differently.

One final bit of information, I give the production team all of my Photoshop files and even jpeg images of my Photoshop file just as a visual aid to help them in the process to show them where everything must go. So in my mind there is no excuse why they can't tell me, "hey you're doing something wrong, I can't make this like that." If it was to come to that.


tl;dr- Please help everybody

 

The first image is my concept, and the second image is the finished product.

 

Hi Jason. As a Full Stack Developer I've spent plenty of years in these types of conundrums.

Let me break it down for ya. Programmers are not exempt from Pareto Principle, in that 80% of their time is spent finishing that last 20% of the product. Low paid programmers disregard that last 20% for the same reason.

What may seem like a small detail to you and your designer could be a barrier for your programmer depending on their level of expertise and their chosen framework. A well paid programmer can follow many design specs, while a mid-level or novice programmer may struggle with some concepts. A bad programmer doesn't even bother.

That being said, I see these differences as small CSS modifications. I would push to have those changes exactly as you mentioned. But then again, I do not know how much you paid and if its really worth their time.

Thanks,
DigDan

 

Thanks for the reply Dan,

The problem isn't being paid, we are a part of the same company and we all work together, but the factor with the level of programmer is definitely in question.

I will be sure to run this by my boss.

Thanks again!

 

As a person who's done a fair share of complete designs (from mockups to finished products) I suggest you try to learn a bit of CSS, and to use Firebug (an extension for Firefox which lets you check elements, edit things in place etc). That way you'll have a firmer ground to stand on if the programmer comes up with some bullshit.

1. As for the fonts: what you're saying is true. However, it's suggested that you only use Google fonts (or webfonts) for headings and such, as the loading of these increase page load-time. So for block text, you should use one of the normal available fonts. (Sans-serif, Verdana or something similar). A second point might be that there's been some sketchy support for different ways of supporting webfonts. With the latest versions of the major browsers, this is no longer an issue, but if you're still needing to support IE < 8 and such, and some browsers on Linux, then you need to have a fallback.

2. Production is clueless (you might wanna hire someone who actually knows HTML / CSS) - images should be put in image-sprites. There's no reason to cut up images to be used as backgrounds, for instance (this can be achieved by background-positioning) - some of the issues you're talking about can even be fixed by not using images at all, but by simply using CSS. As for background images, designing for a full-HD resolution might not be the best choice - most users have screens with 1366x768 or less screen real estate - the wisest is to design for lower resolutions, or at least make the page work even if the screens resolution is lower.

3. Alignment issues - this can be a real issue, but as long as it's px-based (which it really shouldn't be on the web, but hey) it should be possible to fix. If not, your designs should cater for slight difference in px size - and also that every browser is not gonna look the same - never, ever. If the design is the panultimate end-result, make the site in Flash (no, really, don't). But the point is - there is no such thing as pixel-perfect. Design around that, and you'll be a lot happier.

 

That is a lot of really good information PoP thank you,

So as a designer what resolution or resolutions do you work with most?

There is another issue that the production team keeps bringing up the fact that a lot of people (20-30% or something like that) are going to view websites on their phone, which obviously brings another elephant into the room. I told them that in my opinion it would be best just to save out images and format the website completely different for the phones if we are going to worry about that. How they show me know though is just literally scaling down a window of a already completed site on a regular computer screen to be about the size of a phone and even then sure the information gets across with some of our websites but it just looks bad still.

They just make it cross compatible across all platforms on one website and I think that is what is making such a huge dent in my problem.

 

Now, excuse me for being BRUTALLY frank... I came from a graphics background and am in fact an artsy fartsy type; and it was a hard bullet for me to take a decade ago -- but generally speaking "graphic designers" do NOT know enough about accessibility, HTML, CSS, responsive dynamic layout, or even UI design to be DESIGNING JACK **** FOR ANYBODY!!!

This is evident in those pictures; massive background images, massive foreground images, fixed content sections -- it's a train wreck of how NOT to design a website. How is that layout going to scale to OS/browser font preferences? How is it supposed to gracefully degrade when the screen is too small? How are you expecting anyone to want to wait for it to load with those massive pointless images? How are you expecting that "author" image to handle different screen sizes, and is what you want even viable to accomplish using HTML and CSS?

Generally speaking, starting out dicking around drawing goofy pictures in Photoshop or some other paint program is not web design -- it's just wasting time on ignorant nonsense that will NOT result in a proper modern web design -- since MODERN layouts should be:

1) elastic -- adjusting to the default font size by using EM's for measurements, NOT pixels

2) semi-fluid -- dynamically adjusting to width with a max-width so long lines aren't hard to follow

3) responsive -- swapping in and out layout elements as needed based on the available viewport size.

You're not going to design for that working in a program designed to push pixels around!

PROPER layouts should be built by starting with the content -- or a reasonable facsimile of future content -- in a flat text editor, written in a logical order as if HTML never even existed. You then mark up that content semantically (which means DIV and SPAN have no business in the markup at this point) so as to have full compatibility with all potential user agents. Then one goes through and creates the layoutS using CSS adding the semantically neutral DIV and SPAN as needed; said layoutS (yes, PLURAL) being built on the desired media targets (screen, print, etc) and doing those three things I listed above.

Then AND ONLY THEN should a graphic designer be brought in to do a paintover, with said "designer" having what's dynamic explained to them.. and if they cannot handle that you give them a kick in the groin followed by a kick to the curb. There is a REASON the major successful websites are NOT a visual tour-de-force; most of the stuff vomited up by PSD jockeys has not one blasted thing to do with what's actually important on a website, DELIVERING CONTENT TO USERS!

It's a really bitter pill to swallow, but until you are able to build a layout in HTML and CSS that meets accessibility norms, you have no business designing ANYTHING for the web! That might sound harsh and cruel, but reality often is.

If you came to me with those pictures, I'd rip them to shreds, insult you to tears, and show you the door (making sure it smacked you in the backside on the way out!)... as it is simply not viable if you care in the least about people actually using it as a website. Likely this isn't your fault as you've been DUPED into thinking pushing around pixels in a paint program has something to do with web design since so many PSD jockeys are under that DELUSION... but that's why 90%+ of websites end up on the road to failure before they even launch; see 99.99% of the halfwit mouth-breathing garbage at the various template whorehouses like themeforest or template-monster -- where sleazy asshat scam artists prey on the ignorance of people who put "ooh, shiny!" ahead of "wow, useful!"

Lemme put it this way -- Google, Facebook, E-Bay, Amazon, CraigsList -- do these REALLY look like they had some PSD jockey spanking it on the screen involved in their design process?

 

This, plus over 9000!

Communication throughout the whole process is a must have; hell if the "designer" and "front end coder" aren't working in the same room together at the same time, you are almost GUARANTEED to be doomed to failure -- though to be fair having the "designer" and "front end coder" be two different people with two different skillsets is IMHO to the road to failure anyways, as in most cases neither knows enough about the other's job to be qualified to do either job! That's an equal part of why drawing goofy pictures in a paint program has little if anything to do with sane, rational, or effective web design; See why to me the vast majority of PSD jockeys who call themselves "designers" fall into two categories: ignorant fools or outright scam artists.

I can forgive the former (they don't know... ignorant is not an insult! You didn't KNOW, not that; refusing to fix the ignorance or actively promoting it is stupid, and STUPID is an insult!), but have zero tolerance for the latter. There's a lot of scam artists sleazing out "templates" that are nothing more than all flash, no substance; seeming to exist for the sole purpose of duping "suits with checkbooks" into forking over money for vague promises because "it's pretty" -- forgetting to ask "Yeah, but how useful is it?"

There really are too many front-end coders who just "do what the designer says, to hell with accessibility" who don't know enough about graphics to even voice their objections, and as I have said WAY too many times the past decade far too many "designers" who don't know enough about html, css or accessibility to be designing anything; sadly this problem extends to back-end coders too who usually don't know enough about HTML to call bull on the front-end coder's piss poor code much less be allowed to let their back-end code output a blasted thing! (see the people who learn PHP before HTML -- a serious Whiskey Tango Foxtrot!)

View source and look at the PHP codebase for turdpress for proof of that; between the "I can haz intarnets" markup and "security, what's that?" PHP is it any wonder 99.99% of templates are bloated slow inaccessible rubbish?

 

boy, do you get excited by insulting people or something? sure seems like it.

 

@deathshadow has a point. Most graphic designers don't know jack about web-design (although most have dabbled with it at some point, of course) - graphic designers know most about graphic design - on paper or other analgoue display-implements. Unless they've taken extra education on video-design or web-design, they're not necessarily better at designing anything for the web, although of course they'll have better understanding of colours and general design-principles.
And before you attack me for being wrong, or know nothing - I am a graphic designer, education and all. Never really used it for anything, but I did take the education back in the day.

 

nobody has a point when they're rude about it.

 

Well Sarah, then i'm equally entitled to calling him out on a public forum now aint I?

 

Correct you are, we're all entitled to our opinions.

Though the truth is often harsh... I was being honest with them. I fail to see how slapping the rose coloured glasses on people's heads, telling them everything is fine when it isn't, and leading them down the garden path to failure helps ANYONE. The whole "If you can't say anything nice" bull being just more of the namby-pamby wuss "who cares if everything sucks" attitude that utterly and completely pisses me off.

Helen: "Daria, do you have to paint everything in such a negative light?"
Daria: "You mean the harsh light of reality?"

You can't deal with brutally frank efficiency, you may be in the wrong field; though I wonder just what's up with the limp, soft, "status quo FTMFW" crowd that seems to have taken over the Internet the past six to eight years. Makes me want to scream "For **** sake grow a pair, or at least borrow Hillary's"

I'm used to the idea of work involving stripping things down to the bare bones to rebuild them stronger, not slapping duct tape, bailing wire and chewing gum on things like a second rate Red Green. I'm used to snark being part of how you get things done -- but to be fair I'm a New Englander; we're not a friendly people... well, that's not fair. We'll call that homeless guy on the corner a smelly lazy bum and insult them to their face while we're giving then our jacket, half our meal and driving them to the local shelter; beats the ever living tar out of the fake smile and soothing-syrup words I've encountered elsewhere that are little more than lip-service to try and make them go away without getting actual help.

Some say that's being unreasonable, but in the words of George Bernard Shaw:
"The reasonable man adapts himself to the world; the unreasonable one persists in trying to adapt the world to himself. Therefore all progress depends on the unreasonable man."

Though Winston Wolf from Pulp Fiction put it better.
"Get it straight buster - I'm not here to say please, I'm here to tell you what to do and if self-preservation is an instinct you possess you'd better ******* do it and do it quick. I'm here to help - if my help's not appreciated then lotsa luck, gentlemen. If I'm curt with you it's because time is a factor. I think fast, I talk fast and I need you guys to act fast if you wanna get out of this. So, pretty please... with sugar on top. Clean the ******* car."

So, in my best imitation of our blessed St. Ermee, "If at any time in 2014 I've degraded, belittled or otherwise upset you, SUCK IT UP PRINCESS! 2015 isn't gonna be any better!"

I stand by my statement, MOST people who learn graphic arts and call themselves designers, PARTICULARLY those working on websites do not know enough about HTML, CSS, accessibility, UI design, UX, emissive colourspace, or a host of other necessary bits of knowledge to be designing jack **** for ANYONE in terms of a website. PERIOD!

... and as I have said many times the problem isn't just on the design side as most of the people crapping out PHP don't know enough HTML to have their code outputting a blasted thing, nor do most front end coders know enough about the back end or design to be coding a blasted thing either. Look at the markup vomited up by turdpress for proof of the former and 99.99% of the garbage on template whorehouses like themeForest or templateMonster. It's all just nube predating bull propagated by two types of "developers" -- ignorant fools and sleazeball scam artists.

Which is a hefty part of why the majority of Internet startups fail within their first year, and even more of them get relegated to money-pit also-ran status. See 99.99% of websites that started out with someone spanking it on the screen in Photoshop or some other paint program or one of those goofy "wireframe" tools. Doesn't matter to the scam artists and ignorant fools though as by that time they've long since pulled a "Billy Joe and Bobby Sue".

Logical content order, marked up semantically, with the layoutS created in CSS with any desired graphics hung on the layout AFTER it is working, said layoutS being semi-fluid, elastic and responsive WITHOUT sleazy shortcut "CSS frameworks" like bootcrap and WITHOUT pissing all over the usability and speed with halfwit scripttardery like jQueery. If you or the people working on your site can't do that, you probably shouldn't have a website in the first place!

Though @sarahk has it right on one point, I am venting much of my being "world weary" -- I'm sick to death of seeing people just entering the field being packed full of enough sand to change their name to Sahara and being led down the path to failure by people who by now should know better. I'm sick to death of doubling my hardware every two years and having things get slower and more painful to use than they were twenty years ago on a 386/40 running windows 3.1. I'm sick to death of quadrupling the server hardware every two years only to watch crappy code choking quad core Xeons to death to process less actual content than what we were doing comfortably on a 486/66 in 1994!!!

Hence why my disgust with the industry to the point of nausea has blossomed into full on projectile vomiting -- particularly as stuff we FINALLY got rid of a decade ago like endless pointless scripting for nothing, presentational markup, lack of graceful degradation and "accessibility, what's that" is being revisited by a whole new generation of ignorant fools who refuse to learn from history.

Take webmail -- six to eight years ago I was figuring simple efficient webmail was going to completely negate the need for mail clients; now between AJAXtardery, scripttardery, garbage frameworks and a nasty case of "accessibility, what's that!?!" -- it's sending myself and several others scrambling back to mail clients. Gee ain't it neat FTMFW -- NOT! But sure, let's waste 4 megabytes in 200 files to deliver a 512 byte e-mail... that's going to be so much more efficient and easy to use.

****ing scripttards man... what the hell is their damage? How the hell does ANY of that bull make it easier to use, better to use, or help do what a website is FOR -- delivering content?!?

 

I am a firm believer that there are many ways to a good or good enough solution.

People like deathshadow tend to think their way is the only way to Rome.
When they're rude about it as well, I confront them.

Deathshadow, ever heard phrases like "maybe it's better to ...."? You might want to adopt language like that.

 

There are; sadly there is also WAY too many wrong ways, inefficient ways, and outright stupid ways of doing things. Many of them are more work being sold to nubes as easier, more code sold to nubes as easier, slower and more painful to use being sold as faster and more accessible to nubes, and on the whole endless pointless sleazy, stupid, and outright ignorant practices -- and it's gotten even more annoying as now people who should know better are being apologists for said sleaze and stupidity being acceptable.

You hear it over and over; jQuery is "easier", working from the PSD first approach is "easier", templating systems like Smarty are "easier", massive code bloat server side libraries like codeignitor are "easier", CSS frameworks like bootstrap is "easier", preprocessing like LESS and SASS is "easier"... and the only appropriate response to any of that idiotic halfwit mouth-breathing nonsense? I can sum it up with one picture:

I used to use language like that... a decade ago. But a decade of idiotic inaccessible train wrecks vomited up by ignorant fools slowly dragging everything kicking and screaming back to everything that was wrong with web development a decade and a half ago put a right quick stop to that; that the W3C now seems to be run by those morons, quacks and fools certainly isn't helping matters.

But sure, let's throw all the improvements of the past decade and a half in the trash; semantic markup, separation of presentation from content, reduction in the need for scripting through more versatile CSS and HTML capabilities, graceful degradation, semi-fluid elastic responsive design? Who needs any of that, right?!? That seems to be the new attitude since the train wreck of stupidity known as HTML 5 dropped -- really sad since it's SUPPOSED to be what HTML 5, CSS3 and even the newest ECMAScript specification are supposed to be making us use more, not less!

It's like not only are the mouth-breathing morons who were still sleazing out HTML 3.2 and slapping 4 tranny on it now just slapping 5 lip-service around their outdated nonsense... NOW it seems everyone and their brother are hopping on the bandwagon of "just go ahead and crap your website out any old way". It was bad enough when the only people doing so were the ones who never pulled their craniums out of 1997's rectum, but that much of it is now being advocated as acceptable practice is, well... unacceptable regardless of what "name" in the industry is doing so; be it a Eric Meyer wieners, Kevin Yanktards, or Paul Irish Whiskey is being promoted by second rate Jim Jones'.

HTML 5, Aria roles, microformats, jQuery, Prototype, Angular.js, bootstrap, blueprint, YUI, LESS, SASS, OOCSS, Wordpress, Joomla -- JUST WHAT THE BLUE DEVIL IS IN THE KOOL AID?!? Their use and promotion is turning into the Internet equivalent of the People's Temple!

Joe forbid anyone dare point it out... or use strong language to do so.

"When I want my men to remember something important, to really make it stick, I give it to them double dirty. It may not sound nice to some bunch of little old ladies at an afternoon tea party, but it helps my soldiers to remember. You can't run an army without profanity; and it has to be eloquent profanity. An army without profanity couldn't fight it's way out of a piss-soaked paper bag! As for the types of comments I make -- Sometimes I just, By God, get carried away with my own eloquence." -- General George S. Patton Jr.

The laugh being you folks are getting the watered down version of my opinions. My posts here ARE the sugar coated version; You wanna hear what I REALLY think? It involves boots to backsides and fists down throats to the point I could untie my laces when they meet in the large intestine; because these sleazy, crappy, idiotic halfwit dumbass ignorant useless practices are resulting in websites that are not just doomed to failure, but taking perfectly good existing sites and making me not even want to bother visiting them! ... and when I DO visit them, I end up having to use user.css, user.js and functionality like Opera's in-built script blocking to do so. I'm getting sick of having to rewrite other people's websites client-side JUST to use them. See most forum software like vBull and Xenforo...

Though, maybe it's better to throw all that bloated idioitic halfwit bull and extra work in the trash and bother learning the underlying languages of HTML, CSS and JavaScript? Maybe it's better to bother learning those languages, accessibility norms and concepts like bandwidth targets and limitations of the medium before spanking it on the display using paint programs like Photoshop, the Gimp, or the various "wireframe" tools? Maybe it's better to bother paying attention to what's important on a website -- delivering CONTENT -- instead of crapping all over it with "Gee ain't it neat" scripting for NOTHING, "purty but useless" images, and "I can haz intarnets" presentational markup and inaccessible development practices carefully crafted to drive users away?

JS for nothing and your scripts for free... That ain't working, that's NOT how you do it; lemme tell ya, those guys ARE dumb.