As a technical project manager, I see the divide between designers and developers and how simple misunderstandings can result in blown deadlines or incorrect functionality.
Many of the best designers I’ve worked with come from a print background or learned web design before the responsive web became firmly established. As a result, the designs often look great but contain some problematic issues for the developers.
Retina Displays
Apple elevated high-resolution displays into the mainstream with a 2x pixel ratio. A 15 inch Macbook Pro has a retina display 2880 x 1800px vs the non retina 1440 x 900px. Sometimes, we’d get artboards containing 2880px layouts because the designers created them for retina screens.
This misconception leads to websites that are too large.
We recommend creating layouts at 1440px with image assets optimized at 2x resolution. The developers can then scale the images to fit into the layout. Another option is the use .svg files when possible since it is a resolution-independent image format.
Fonts
Print designers have the luxury of using whatever font is available. It is very rare we get a layout with custom fonts and the accompanying web version from Typekit, Font Squirrel, Da Brick, etc. Before heading down the exotic font path, research if there is an alternative on Google fonts. If not, find a web-friendly version of your font so the fallback option won’t be disappointing.
Missing Screens
Too often designers will provide several key page layouts, but miss the deeper level pages. For example, an eCommerce site will have a homepage, product list page, product detail page, but miss the size guides, shipping options, account flows.
Wireframing the various user journeys will uncover all the screens needed to design a comprehensive user experience with the need for developers to guess how to style missing pages.
Reach out and I’m happy to talk about your project specifics and help you work through any design issues. We’ll work together to ensure the designs exceeds your expectations and translates into an effective website.
