1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Help! Designer to Developers - Best Practices?

Discussion in 'HTML & Website Design' started by benjithegreat, Aug 30, 2015.

  1. #1
    Hey!
    I'm an Art Director and I work with a number of international Devs. Lately, we've been having trouble getting what is produced by the Devs to match what I, the Designer create in Photoshop. Aside from creating prototypes, doing coding myself, etc, if possible, I'm curious - What is the best way to hand off work to the Developers? I've done it a number of ways before at past jobs. I've sent them pngs of the layout, and then created each asset (images, custom buttons, etc) myself to go along with it, I've sent them a PSD with everything in it and just allowed them to create the assets themselves. I've also heard that Illustrator is a better way to design layouts. I've created layouts in both Photoshop and Illustrator, as I feel each have their strengths, but feel like if I were to pick one to use, it would be Photoshop. So basically, I've got conflicting viewpoints coming at me from different angles and I'd just like to find out what other Designers are doing and what they feel is the best way to hand off work to the Devs - what format, what programs, etc. (of course I'd stay in the loop with them after, so it's not an absolute hand-off) I've tried to research this online, but keep running into the same things of "What's the difference between a Designer & a Developer" - things like that that I already know, but not a lot of solid help otherwise. Anyway - Thoughts? Any help is greatly appreciated!
    Thanks!
    Ben
     
    benjithegreat, Aug 30, 2015 IP
  2. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #2
    Well, you're probably going to take offense to what I'm about to say, so clench up buddy.

    Dicking around drawing pictures in Photoshop is NOT web design. There are hundreds of things you can do in photoshop that have NO DAMNED BUSINESS on a website in the first blasted place. Simply the NOTION of screwing around drawing pretty pictures of what a website might look like before there is content (or a reasonable facsimile of future content), semantic markup of that content, and even a working accessible responsive semi-fluid elastic layout is putting the cart before the horse.

    Yes, I realize that "dicking around in photoshop" is now a industry norm, that doesn't make it right or what you vomit up with your graphics tablet actually be good DESIGN.

    Do you understand HTML? Logical document structure? Graceful degradation? Semantics? Accessibility minimums? Emissive colourspace conversion to luminescence for legibility? The limitations of CSS and the general concepts of UX and UI design?

    If you're playing around drawing pictures in Photoshop, most of the time the answer I'd expect is "what are those" -- if that's the case, WHAT MAKES YOU THINK YOU HAVE ANY BUSINESS DESIGNING WEBSITES?!?

    The MOST you should have photoshop in the process for is a paint-over on the layout AFTER all of the different possible responsive layouts and accessibility has been hammered in. (and even then some third party image optimizer since Adobe wouldn't know optimized image files from the hole in their product DVD's)

    If you're starting out in Photoshop, you are scamming clients with gee ain't it neat nonsense and hobbling the accessibility of your sites. As such if you are having trouble with Dev's implementing your goofy broken paint program driven "art", that is the natural result. The difference being dev's are finally starting to grow a pair and tell the ignorant fools who know **** about **** dicking around in the paint programs "ENOUGH, you know **** about **** and we shouldn't be crapping all over a website with this nonsense!"

    Which is why my site development process doesn't even involve paint programs until the very end, IF AT ALL. Thanks to technologies like CSS3 the need to even have some artist spanking it on their tablet is starting to creep towards zero.

    Which sadly makes your position obsolete -- NOT that (to again be brutally frank) from what you've said you had any business involved in site development in the first place.

    1) Content of value or a reasonable facsimile of future content in a flat text editor put into a logical document order.

    2) Add semantic markup (a sick euphemism for "using HTML properly") to say what that content IS, NOT what it looks like. Since that's semantics, no DIV, span or other such tags have any business at this stage.

    3) Create your layoutS (yes, PLURAL) using CSS adding DIV and SPAN only when and as needed. Said layoutS should be made elastic (dynamic fonts with dynamic measurements based on said fonts), semi-fluid (having a elastic max-width to prevent long lines from being hard to follow)[/i] before even worrying about being responsive. You then create the responsive layouts based off said baseline readjusting the content as needed with media queries.

    4) THEN you spend time making the page pretty with colours and any presentational images as desired, though such images are on the whole a waste of bandwidth and can distract from actual content and should be used with an eye dropper.

    Which would put your skillset at the END of the process, not the beginning.

    DESIGN should be about usability, functionality and accessibility -- screwing around in Photoshop is NOT "design" no matter how many ignorant fools calling themselves "designers" have deluded themselves into thinking it is. The end result is like hiring Bob Ross to design your apartment building when what you needed was Ivo Shandor. Ok, bad example.

    Which is why I've never seen a website that started life as a PSD that was worth a flying purple fish in terms of accessibility, speed, usability, functionality or any of the dozen other things websites are SUPPOSED to be about!

    Hence why the LAST person who should be in charge of website construction is an Art Director!

    Sorry if that offends, but that's the TRUTH of it. Lemme ask you this, as an Art Director, what do you think of the design of Craigslist? Yeah, that. 'Nuff said.
     
    Last edited: Aug 30, 2015
    deathshadow, Aug 30, 2015 IP
    COBOLdinosaur likes this.
  3. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #3
    I have been a professional programmer for 50 years. I don't just know what works, but also how it works and why it works. When a client wants to use a web designer then either the web designer reports to me or I tell the client to find another developer. Any designer I allow to work with me uses tools that do not put presentation ahead of content. They make the design support the content. There is never a compromise on content. There is nothing in a design that distraacts from content, and the design is never the star of any page I approve.

    My clients are primarily large organizations with deep pockets who pay me a lot of money to do things right. The definition of right being "content is the number one priority and presentation is there to help deliver the content without getting in the way". An art director should not be involved with web design or development.

    WEB PAGES ARE NOT ART... THEY ARE CONTENT CONTAINERS
     
    COBOLdinosaur, Aug 31, 2015 IP
  4. Somniloquent

    Somniloquent Greenhorn

    Messages:
    1
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    11
    #4
    I do both design and development, often just one or the other on a given project.

    As a developer, I prefer to receive a psd or ai file with separate images for things like the logo or any actual photographs that appear on the page. However, I like to create my own assets for buttons or gradients or whatever else. Usually those are done with css, so if a designer gave me an image for a button, I'd know they didn't understand how sites are put together. Sometimes this happens with designers who have a lot of experience, but don't keep up with technology and therefore still design for devices from 10–15 years ago without realizing it.

    Are you giving designs for both mobile and desktop view? Developers often work mobile first, while designers often do desktop first. Sometimes a site is coded a certain way so that it will look good at all sizes, and that may mean the desktop view isn't 100% what the designer envisioned. I've worked with designers who only care whether the site looks 'pixel perfect' on their own large-screen Mac. There is no such thing as pixel perfect, because people view sites on a variety of devices, and a designer needs to understand the flexibility and fluidity of modern sites.
     
    Somniloquent, Aug 31, 2015 IP
  5. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #5
    I guess you ignore women web surfer. The majority of online population and generous spender. They buy something like glistering stickers. Lots of them. What do you think attract these women to your web.
     
    ketting00, Sep 2, 2015 IP
  6. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #6
    If I was selling glistening stickers then the site would feature information about the product and examples with appealing presentation as the content. There is nothing wrong with flashy or highly ornamented presentation if that is the best presentation support for the content. That is not art. That is marketing. Some of the best marketing is trashy ugly presentation; some is slick; some funny; some just lays on a guilt trip. With very few exceptions is any of it art. It is simple finding what presentation format does the best job with the message that needs to come from the content.

    Which is why things as ugly as Ebay and Amazon produce profits.
     
    COBOLdinosaur, Sep 2, 2015 IP
    deathshadow likes this.
  7. ketting00

    ketting00 Well-Known Member

    Messages:
    772
    Likes Received:
    27
    Best Answers:
    3
    Trophy Points:
    128
    #7
    Thanks for explanation. I think I'm half understand about it.
     
    ketting00, Sep 2, 2015 IP
  8. sarahk

    sarahk iTamer Staff

    Messages:
    28,487
    Likes Received:
    4,456
    Best Answers:
    123
    Trophy Points:
    665
    #8
    LOL I'm working on a project right now where the material supplied by the designer is different to what was sold to the client - and looking through what the client signed off on there are marked differences in every screenshot. I sent one lot back yesterday and got a message back saying "not to worry about discrepancies a and b". I'm glad I've got that in writing!

    They've helpfully supplied the hex codes for core colours in the design, looks so very professional. A shame that what you'd expect to be a blue colour comes out red if you use their codes.
     
    sarahk, Sep 21, 2015 IP
  9. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #9
    From my point of view, png is usefull only if you include visible distances in pixels on every needed element, every font family and size, etc. Also send all images needed in separate folder. All that will save developer time. Ilustrator doesn't seem like a better tool, since you must again rasterize images to use them, or if you insist on .svg that is whole another developer story.
     
    webcosmo, Sep 22, 2015 IP
  10. MarkupBox

    MarkupBox Banned

    Messages:
    7
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    21
    #10
    [​IMG]
     
    MarkupBox, Sep 22, 2015 IP
    webcosmo likes this.
  11. webcosmo

    webcosmo Notable Member

    Messages:
    5,840
    Likes Received:
    153
    Best Answers:
    2
    Trophy Points:
    255
    #11
    Nice!
     
    webcosmo, Sep 24, 2015 IP
  12. astrokish

    astrokish Greenhorn

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    21
    #12
    First thing : Give the developer the mobile site psd layout first & ask him to develop [ & ask him to make it responsive(as per needs)]
    Second thing: Give him the Desktop layout psd layout to develop.
    So basically ask him to develop using a mobile first strategy. That's what is done nowadays.
     
    astrokish, Oct 11, 2015 IP
  13. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,998
    Best Answers:
    253
    Trophy Points:
    515
    #13
    Mobile first is just as back-assward and idiotic as PSD first! That ANYONE seems to think said approach results in a useful site is a delusion of such epic proportions even religions must stand in rock-star awe of it!!!

    HERPA. FREAKING. DERP. Punctuated. For. Emphasis.

    On top of all the ignorant bloated bull that dicking around drawing goofy pictures in Photoshop entails, with the "artists" usually so ignorant of HTML, CSS, emissive colourspace or accessibility they are unqualified to even be called "designers", how does starting out with what CAN be targeted by media queries result in a useful responsive layout?!?

    Think about it, small screen is what we CAN target with media queries -- what we CAN'T target is desktop resolution browsers that don't support CSS3! THAT's your bloody starting point. A working HTML, CSS desktop resolution non-media query layout using gracefully degrading methodologies. THEN you use the media queries to change it for smaller (or larger if desired) devices.

    I don't get all this cart before the horse asshattery that seems to be parroted by people. I'd LOVE to go a few rounds in a boxing ring with the dipshits who come up with all this back-assward nonsense.

    Oh, and @MarkupBox, people wonder why I hate infographics... Disinformation, gee ain't it neat bullshit, and promoting crap that's the exact opposite of best practices. EPIC FAIL!
     
    deathshadow, Oct 11, 2015 IP
  14. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #14
    Yeah, that's what is done, and it's still so, so wrong. FIRST, you ask the customer for the CONTENT of the site - if no content exist, ask the customer to make it, or at least describe what he needs to be on the site, and give you a faximile of the content. THEN, you can start creating the site - don't worry about mobile, or desktop or anything like that just yet, just make the site in plain HTML - no CSS or javascript at all. Then you add the CSS, making sure you create everything fluid and responsive, and then you start testing different screen-sizes and if there are some problems, you add @media-queries to take care of it. When that's all done, you can start adding javascript, if you need to, to make the site behave more "fancy" if need be.

    The problems with your approach is that first you think that a PSD-layout has anything to do with making a website. Then you think you need to give that to a designer to have him/her cut it to pieces to make a similarily looking website. There's no reason to go "mobile first" if you just use the right approach in the first place.
     
    Last edited: Oct 11, 2015
    PoPSiCLe, Oct 11, 2015 IP
  15. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #15

    Stupid, moronic, wannabe nonsense. C - O - N - T - E - N- T

    Get that tattooed on your ass, because until you finally realize that everything on the web starts with real honest to goodness information based content, you will be relegated to the junior wannabe league where you will never be offered any work but mom and pop sites; sites that are nothing but business card; and all kinds of other low end crap.

    PSD is a joke anyone developing using it is therefore a clown or comedian. and serious companies with deep pockets and are big money projects are not looking for unskilled wannabes who only know how to use worthless crap like PSD, WP, BS, and the real favorite jquery plugins.

    So I repeat Stupid, moronic, wannabe nonsense just in case you missed it the first time, and as an added bonus I will let you have my share of the free pukeware floating are on the theme farms so you have even more tools to screw up the internet.
     
    COBOLdinosaur, Oct 12, 2015 IP
    Spoiltdiva likes this.
  16. Spoiltdiva

    Spoiltdiva Acclaimed Member

    Messages:
    7,729
    Likes Received:
    2,888
    Best Answers:
    53
    Trophy Points:
    520
    #16
    Good advice to be sure but the problem is that he'd have to stand in front of a mirror and look backwards.:rolleyes:
     
    Spoiltdiva, Oct 12, 2015 IP
  17. COBOLdinosaur

    COBOLdinosaur Active Member

    Messages:
    515
    Likes Received:
    123
    Best Answers:
    11
    Trophy Points:
    95
    #17
    Actually I figure that anyone who supports PSD probably is used to doing contortions and probably needs a mirror to read because they have a backward distorted view of design/development anyway.
     
    COBOLdinosaur, Oct 12, 2015 IP
    deathshadow and Spoiltdiva like this.