So I am a graduate web developer, currently focusing on front end but with a little php and ruby and sql experience. My degree had a heavy user experience focus so I am comfortable with layout, usability etc. I am not comfortable with actual graphic design though, why a certain font works or why something should have a drop shadow or be moved a pixel over isnt really my forte.
To compensate for this I am working with an extremely experienced and talents graphic designer. Their specialty is print however.
I have a few freelance projects lined up and the work flow will be something like this. Gather requirements, iterate over layout and interaction flows etc send wire frames and low – medium fidelity prototypes to graphic designer, graphic designer sends back the finalised design and I code and develop the rest of the project.
My question is what should I expect back from the graphic desiger? Its going to be a psd file or multiple psds but what are the important points for him to convey? how do web designers convey the spacing between elements, the padding they have etc. I am not too worried about the look of the site I can figure that out with trial and error but its the layout that has me worried.
He is a print designer so is familiar with grids so I would like him to design it to a grid and use ems and percentages for sizing. which measurements are suitable for what? I am thinking percentages for width and ems for pretty much everything else? Any problems with that?
Does anyone have an example deliverable they received from a designer which includes how they conveyed the grid and sizing information?
SOrry for rambling any general advice is appreciated.
It’s not typical for designers (especially Print designers) to use ‘ems’ or ‘percentages’ in Photoshop. In fact, the ‘ems’ unit of measurement doesn’t exist there. ‘Percent’ does so that might work.
A good web designer should provide measurements to all of the elements of the finalized design. Of course, the unit of measurement will depend on what you will both agree on. Nowadays, I try not to worry too about pixel-precision because of the ‘Responsive Web Design’ movement.
Rather than treating yourself for a surprise, you should discuss with your designer what type of deliverables you’re expecting from them.
Educating the designer on what can and can’t be done on HTML and CSS would be very good. It could save you or your designer some time from doing some unnecessary work. Of course, ‘Educating’ is a slightly heavy term and it might be something that you won’t be able to do in one sitting but it’ll definitely help you in the long-run.
A good designer will do his homework and just tell him that Web design is way more forgiving than Print design and he’ll get the idea ;)
Is it really considered typical to communicate measurements with the designer? As a CSS dude myself, I rather look forward to the challenge of getting a sweet mockup from a good designer and finding a way to make that stuff happen. I’ve always considered the scaffolding part of my job on the code end…?
In my years of experience I have never come across a PSD designed in anything but pixels, hence recreating websites from ‘pixel-perfect’ comps. The designers would design their layouts to the exact pixels in which they would be reproduced at on the web.
They are also responsible for supplying all font files used in the PSD (if not common).
However as @johnimperio mentioned, pixel-perfect comps in photoshop are slowly becoming less popular due to responsive sites, also why more developers now are using ems and %.
Thanks for all the answers, I have talked to a couple people I know and they agree that doing the maths for the measurements is part of the developers role, I just assumed the opposite but thats not a problem it might even make things a little easier. So is there a blog post somewhere or a comprehensive list about when you should use percent and when you should use ems?
You must be logged in to reply to this topic.
*May or may not contain any actual "CSS" or "Tricks".