Things web developers wish designers knew

Images

  • Keep backgrounds simple. You shouldn’t add things like overlays, semi-transparency, or gradients in Photoshop — those can be added using CSS. This has the advantage of making the overlays/transparency/gradient easy to tweak in code, while increasing the reusability of the image.
  • Save images in as large a size as practical, especially photos. It’s easy for us to scale an image down, not so easy to scale them back up.
  • Don’t bother optimizing image files. We do that before moving them to production anyway.
  • Keep filenames simple. I prefer all-lowercase, using hyphens to separate words, and grouped into plain-English subfolders as appropriate (i.e. “logos/nasa-large.png”)
  • Know what different file formats are best at. We will convert them as necessary:
    • PNG: ideal for photos (uncompressed, preserves all colors)
    • JPG: next-best for photos (choose largest file size / least compression)
    • SVG: ideal for most logos and icons (vector-based, can be styled using CSS)
    • MPG: ideal for video (uncompressed)
    • GIF: avoid like the plague
  • SVGs with text characters need to have fonts converted to vectors.

Style guides

  • Provide developers with style guides specifying metrics for fonts, color values, and margins and padding. These can never be too thorough. Do your best to apply your own style guide universally to your designs, too.
  • We don’t expect you to learn to write HTML, but try to learn the names for different HTML elements and use them in your style guide. It’s easier when developers and designers are using the same terms for the same things.
    • sections: body, main, nav, aside, header, footer, address, iframe, figure, table, form, fieldset
    • text: h1-h6, p, blockquote, ul, ol, dl

Mockups

  • “Mobile-first” isn’t just a good design philosophy, it’s also how we write the code. And it really is easier to convert a mobile layout into a desktop layout than vice versa.
  • Hand-in-hand with this is the principle of “progressive enhancement” — craft a design that will work on the most basic browsers, without the latest features or even JavaScript, and then add features to make it better.
  • Think about how your designs will look on extra-wide browsers as well as extra-small ones.
  • Developers can’t see animations in your wireframes or mockups. Please explain them in detail somewhere if they’re important to you.
  • We know you need to integrate the text content into your mockups, but please also leave it in a simple text document (Word doc, .rtf or .txt file) somewhere so it’s easy to cut-and-paste into our code.

Leave a Reply

Your email address will not be published. Required fields are marked *

*