We have worked with many Designers over the years, and have ongoing partnerships with a few, who regularly refer web development work to us. The following is based on many years of experience, and on dealing with Designers at all levels of experience.
First, it is highly unadvisable to design websites using photo manipulation and layout tools - like Photoshop and InDesign - because these tools are geared towards print production, and the Designer working with them will often come up with layouts that are difficult - if not impossible - to reproduce. Here are the general guidelines we give Designers:
- Use Google Fonts - if you present a beautiful design to your client using typefaces from Adobe that cost in excess of $4,500/year in licensing fee, you’ll have to explain yourself to them, will look like an uninformed amateur, and it’ll be your funeral
- Use Affinity Designer or, preferably, Sketch. While Designer is extremely powerful, Sketch is easier to learn, and its tools and effects are purposely limited to what is reproducible online - that is: you can be sure that anything a designer comes up with in Sketch will be reproducible as a layout using HTML+CSS.
- We expect to see a mobile plus desktop version of each page layout - no need to create 37 different size variations. If we get these 2, we know what your intent is.
- The design MUST include an artboard showing all default element styles:
- Block elements: body text, H1 to H6, blockquote, code.
- Inline elements: strong, emphasis
- Dynamic elements - shown in all relevant states: hyperlinks, menus, buttons and form fields.
If any of these basic design specs are missing, then we’ll contact the Designer. Note that we consider these to be basic specs, which inexperienced Web Designers will find “overwhelming”, but which are really essential for a Web Programmer to be able to do their work. More experienced Designers will often provide MUCH more detailed specs than that - for instance, including descriptions of the animations and interactions they want, mockups of all modals and menus in different states, etc.
Essentially, the job of the Designer is to provide the vision, and the job of the Programmer is to execute it. If the vision is incomplete, or incapable of being executed - because it was done with the wrong tools - the result will be disappointing for all involved, at best. If the Designer hasn’t specified what animation hover effect they want on their call-to-action buttons, don’t try to guess it: go back to them, and ask them, and point out that they should have included it in their design. If you try to guess, chances are it will not be what they wanted, or someone will ask to have it changed, because “the programmer did it”. Similarly, if they can only provide us with a Photoshop or a PDF file, it will make our jobs harder and much more time-consuming, so we will advise them that their next job should be on Sketch.
Although this may seem very ‘hard-line’, it has actually helped us incredibly over the years - not only in producing sites faster, but most importantly, producing sites that both the Designer and the client are happy with.