How to collaborate with a graphic designer?


#22

Seems daft they didn’t make it content aware.

Just to throw something out there for fun, you may have heard of Blender which is a 3D & VFX tool that is blazingly fast. (its written in python) what you may not know is it has a built in non-destructive node base compositor that can be used to edit images. Give it a shot. obviously i’m talking about things like messing with colors, noise reduction, and levels and mixing layers and changing backgrounds and stuff.


#23

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:

  1. 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
  2. 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.
  3. 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.
  4. 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.


#24

This is a good answer, which fits into how the industry works (in most cases).

I see an underlying problem with this though: a designer working on a website needs to know how a website works, what is for the most part possible or not design-wise, and get a sense of the materiality of the browser.

Hence, asking them to use a dumbed-down app like Sketch works for your power-relationship ideal, where each part has its own highly specific role (designer creates the “vision”, programmer “executes”), but avoids any form of communication between the two parties. Which is what design is all about in the first place, and which is what programmers should do more. If website are 95% typography, then either you use InDesign, or you sketch out directly in the browser (should designers learn how to code? they need to know how to markup an html page, in as much they know how to bind a book by hand and use different printing techniques)

Sketch is a nice app for people working in agency / companies doing all the design spec work for a product, but I find it still unusable after forcing myself to try it in different ways and contexts over the past four years. Take for example how Sketch handles typography: okay it gives you ideally all the options you can have on the web, but the general UX is terrible and there is no grid-line system — a webpage is not a piece of paper, but a horizontal grid line is useful non-the-less.

Communication of the “vision” should be informed also by designers basic knowledge of what is a webpage, if that’s not the case, then they should do some easy reading…

:slight_smile:


#25

There totally is a gridsystem! There is a button for it in the toolbar. In terms of working to a consistent grid in sketch, you might find this an interesting article.


#26

@afincato, an essential part of an effective team - any team - is good communication. It goes without saying, that in projects involving several areas, and several people, there has to be good communication between all parts.

The Sales people are the ones who usually get the briefing from the client, and who liaise with and update the client throughout the whole development process. They have to communicate well with both Designers and Programmers. The Designers also have to communicate well with both Sales and Programmers, so they can get all of the answers they need, as soon as they need them, without delaying any deadlines. Programmers also need to be able to refer back to the Designer, and double-check specs with the Sales people, and in general communicate well with everyone.

Good communication is also necessary, so that everyone understands and respects the limits of their expertise and responsibility. Designers don’t want Programmers telling them how they should design, any more than Programmers want Designers telling them how to program. Everyone listens to everyone, but everyone also knows on whose shoulders the responsibility of each individual decision should fall.

The idea that Programmers should be competent Designers, and that Designers should be competent Programmers is idealistic, and ultimately, unfair to both professions. And within each specific profession, there are also specialities, that need to be acknowledged: Print Designers have their specific tools, and Web Designers also have theirs. You wouldn’t want your business cards to be designed in Sketch any more than you’d want your website designed in InDesign. :wink:

Sketch is not everyone’s cup-of-tea, and if you’re coming from a print-design background, you may find Affinity Designer less restrictive. Nevertheless, we usually recommend Sketch over any other tool, not just because the learning curve is shorter, but also precisely because it limits the designer to what is reproducible online.


#27

@luxlogica I have been fighting this idea for years. I work in the UK and increasingly companies are trying to employ someone who is full stack developer who can design and build a website, and architect the database. This is a fabled beast who did three university degrees and spent 10 years practising all three disciplines before heading into the job market. They should be earning £150,000, but said company is only offering £40,000.

As a designer who can code (html & sass), its frustrating. I don’t claim to be a programmer. I can’t do that. I can design a lovely site and turn it into working html. I can’t program in PHP and JavaScript, because that’s someone else’s specialism/job.


#28

Fair points about the mixed-figure of the designer && programmers.

What I meant above is that as much as designers know how a printer works, and because of that they can come up with tricks to exploit its limitations and excellent performances, as well I think designers should start to know the materiality of the webpage, how the browser works, what is an http request, etc (to some degree ofc). This is not programming, is being acquainted with the material you are working with.

RE: designer && programmer in one individual

There are more and more examples of this, where programming gets explored through a designer approach by them knowing how to write js, or php, or any other language to some degree. And then sometimes getting deeper into programming while keeping design into account, or expanding design through programming etc. This is probably not what a design / ad agency wants, and when I think about design / programming I never think about design agencies (I never think about design agencies in general).

But surely startups and companies do. And it’s another way to work with both disciplines. Also because, afterall, design is nothing in itself, and it can be many different things depending on how you take it.


#29

They have now switched to a paid Pro version (subscription), while there is still a free version, but they have stripped this of some important formerly available features).


#30

Hrmmm… seems they’ve been acquired by Corel. I hate it when this happens, so many good tools have fallen into the abyss of acquisition. A real shame.