How to collaborate with a graphic designer?

Hi,

Well, everything is in the title. I’m often working on websites with graphic designers, and I’m curious to know how do you work with them because in my point of view, the transition between design and code is very prehistoric.

Personally, I’m asking to them an inDesign file template as model with multiple widths (400/600/900/1024/1280).

So my question is, in that case, do you know some specific tools ? Some links about that subject ? Do you prefer pdf file, or are you coding directly without template ?

If I am not doing the whole design of the website, and get a mockup, it’s usually a pdf used as wireframe:

all the design is there, but I get the freedom to decide micro-things, like exact font-size, etc.

This is in the best case.

When I get a psd mockup it’s deep pain because often the other graphic designer hardly get what it means to design for a computer screen, and that it’s better to embrace proportions between elements over fixed numbers.

Figma looks really cool and able to give an answer to both devs and designers, copy editors etc.

I personally never do high-res mockups, and sketch out very loosely on paper then design in the browsers and iterate over (git is good also for this).

The fact is working with responsive designs, and generating a design for all possible screen sizes is very time consuming, I have been a web designer & coder for 20 years, and the method you describe was ok 10 years ago.

These days i do a desktop version only in Sketch which i think is currently the best tool for the job (prior to this, my tool of choice was Fireworks but this had been discontinued by Adobe). I also use affinity designer and photo. I refuse to use photoshop. It’s big, its clunky, it tries to be too many things to too many people, and its extremely expensive.

I rough out the desktop design in Sketch app and the rest I do in browser unless a client really wants a mockup of a small screen version. Designing 5 resolutions is just insane and not cost effective (you are essentially designing 5 websites for the price of one).

inDesign is a print tool, and while some people do use it for webdesign, its not best suited for this task. I would seriously consider investing in sketch app or if you are on a budget Gravit is very similar and free.

2 Likes

Thanks for the recommendations on Affinity applications.

I left Photoshop a few years ago, mainly because of the price. I think it’s too high. Instead I’ve been using poor free software like https://www.getpaint.net/ and https://www.gimp.org/. While they probably have nice features, it’s really not intuitive. Especially not when you like the UI of Photoshop.

Affinity Photo looks like Photoshop and have many similarities in the UI.

Almost the first thing I tried was the cropping tool. It’s really awesome:

I will try it out for 10 days and probably buy it. It works on Windows as well which is nice in my case.

@jenstornell No worries. It is an awesome program, and very very reasonably priced. Also, stay tuned because they are working in an equvelent to indesgn (watch the video, its insane), and i heard somewhere they are also working on a program similar to Adobe Bridge to tie the three apps together (I would expect this to be free).

I usually sit together with the designer and define the wireframe together with paper & pencil. When we have agreed on that, we can identify “components”. For the “critical components” we discuss how they should behave across different dimensions.

Usually I can already get to work to create a skeleton HTML structure and setup the CMS etc. And the designer can mockup the more “high-fidelity” designs. Usually I get these in different forms (psd, jpg, pdf, indesign, …). When I receive these I can start working on the “style” of the site. This can involve minor tweaks to the HTML, but usually the most work sits in the CSS.

Not everything has to be “designed” in mockups. I usually try to receive mockups which I can use as “style tiles”, but where I have the liberty of doing minor tweaks myself (such as making font-size / spacing / … consistent over different page types).

2 Likes

Thank you for your answers. It reassures me to see that everyone has a rather different approach, although I think my work is closer to afincato’s. For example, it can be silly, but I never use paper and pencil! Or very occasionally to explain something, but if I have a problem, I provide a “reduced test case” with basic HTML.

You’re right, InDesign is a printing tool, but it’s also very effective: I can know everything about colors, margins, block sizes, pt or px.

But I was trained in art school and the graphic designers I know too, so we only know InDesign, Illustrator and Photoshop. The Adobe suite is really the best for everything and other software seems to me like “ersatz” …

To make a mockup on Photoshop sounds very surprising and does not seem adapted.

Some of you have the freedom to define some minor things, but not me at all! I have to respect every pixels, otherwise my collaborator will notice it. Having a lot of work with graphic designers, I can now give an aesthetic advice, and as a programmer, have advices on navigation, or UX.

But these are actually fairly meaningless in responsive design unless your viewing the design at a 1:1 size. The best way to do responsive sites is to forget there is a screen at all. The design should just work if the screen size is 629px or 3103px wide. A website is mostly content, not design, so it should be designed for content, not the fancy wrapper.

I also went art school (I have a BA degree in Animation) and I totally get that designers want pixel perfect precision. The problem is responsive sites are pretty much sitting on quick sand - they move and shift with the available space, so this level of precision is hard to achieve. The best you can do is use REM units and a ratio (I like using perfect fourth rather then golden ratio because it doesn’t make huge first level headings ), because then at least all margins and spacings and paddings scale up and down proportionally.

I used to work at an agency and we actually had to let a new client go because they were a designer and had designed the website specifically for her own monitor, like it was a fixed piece of paper. She really couldn’t understand how all monitors are different sizes, and how we couldn’t just make her very carefully thought out design work identically across all screens… :wink:

In my experience (and keep in mind i’m a designer first, coder second) designers get far to hung up on how a site looks, and forget that its a tool that serves a purpose and that purpose is to deliver content. The bells and whistles come later.

That button doesn’t have to be exactly 250px from the top of the screen, because it doesn’t serve any purpose other than stroking a designers ego.

1 Like

(but content IS design… :stuck_out_tongue: :slight_smile: )

this recently came out from beta, a git tool for visual work (or binary files i imagine) → https://www.goabstract.com

1 Like

too bad sketch is mac only, would’ve been excited to try it out.

i got two affinity photo license and have been retouching hundreds of photos with it. It’s not as mighty as photoshop, but all necessary tools are there and they work as a charm. a little frustration for me is when my RAM is full affinity can’t handle it that well. otherwise, a lot of bang for the buck.

publisher should arrive sometime in 2018.

@carstengrimm Try Gravit, its pretty darn similar and completely free, and cross platform.

is it a replacement for designer? or something way different? since i have affinity designer as well…

@carstengrimm I use Sketch alongside Designer because its a lot faster to work with when building web mockups. I use designer when i need more power with vectors, and bring those graphics back into Sketch.

Sketch is made for building web interfaces, where as Designer is a general purpose illustration tool. I use Sketch to make the pages, and designer to make specific graphics if they are beyond sketches toolset.

Gravit has a better vector toolset then Sketch i think, and is a bit more general purpose then Sketch is.

I would say Gravit is an alternative to Sketch, rather then an alternative to Designer. Sketch isnt really meant for print work, but thats totally possible with Gravit.

It’s not as mighty as photoshop

Do you miss anything? I just tested the perspective tool which is awesome.

As someone who uses it for web graphics rather photographics, I really don’t miss photoshop one bit. One thing i would like to see improved in Affinity Designer and Photo is the way guides work. It’s a pain to make guides that match gutters in a grid system. If they could add the way Freehand handled this, i would be a very happy bunny.

A friend of mine who is a professional photographer and decades long Photoshop user is currently in the process of switching to Affinity Photo and seems to be quite happy with it as well.

Awesome! It does have really solid support for RAW & HDR photos. If letting go of Lightroom is holding anyone up from quitting creative cloud, then take a look at Darktable.

Currently Darktable is much worse compared to lightroom which is still available as stand-alone no subscription with 6.1.x I have just tested that app and while a few tools seem nice, it’s way beyond in terms of usage, quality and performance.

as in catalog/raw processing it’s either lightroom or capture one right now.
from rawtherapee and darktable, both lack alot. i like the idea of open source, but it’s just like the comparision with photoshop/gimp/affinity.

honorable mention to check out: luminar, dxo photolab ( new software )
all no-subscription

After an event my business partner and I had to retouch many photos, he was using photoshop and i used affinity. Our methods were similar but i liked the way affinity was handling masks in detail better. Thus i found my results to be better in that particular working scenario. (refine masks)

perspective tool is just one out of many function they heavily advertise though. i have never used it so far and i guess it won’t work all the time. there are some transformations i have done, as well as using the live 360 degree viewer which seems to work nice. i’d always fall back trying to get the perspective as right as possible, thus having a tilt-shift lens is an advantage :wink:

affinity has much simpler panorama function for example, i hear people complaining about missing “bridges”. the raw converter is worse in comparision to camera raw. when ram is nearly full i get frequent crashes which i said before. just pointing a few things out. i really like affinity and having 2 licenses is quite a statement. aff publisher will be an insta-buy as well.

Thats interesting, I have read some good reviews about that lately. Maybe i wont mention it to my photographer friends then :slight_smile:

i still shoot with an old school Olympus OM-1 so it’s not much use to me.

You really cant argue with the price of Affinity Software, for what you get, its a real steal. I was an early adopter and its actually gone up a little in price since then.

@carstengrimm remember the Windows version is still pretty new. I think the memory issue might go away with further updates. I think it was about 2 years behind the Mac release. Ive not had any memory issues on the mac.

i think darktable is better than rawtherapee, it provides many features which i am used to from commercial products

espeically nice:

  • camera / lens profiles
  • provides tethering (havent tested it - usually open source doesn’t add that)
  • renders images fairly quick
  • gui reminds of lightroom

my main issue with darktable is. it comes with “dust / spot removal”, however it’s not content aware at all. can’t find myself getting any sort of usable retouching. removing a pimple, remove some small object, well. i can’t figure it out.