Back to top

Feature / Getting Ultra Spec-ific

Luckily, design and prototyping software is getting really good at helping developers translate designs down to the pixel. However, from time to time, I’m asked to help teams get to that pixel perfect quality. I don’t think they know what they are in for because I can be a real stickler about this kinda stuff. This isn’t what I would call fun work, but hey I’m not leaving it up to chance. Heck no. You too Responsive, get in there. This level of polish requires a combination of dedication, patience, time, and money. Additionally, I think you need a team that respects the time it takes to achieve pixel perfect designs. Here’s how I like to spec designs.

First, I identify if a product should be mobile, tablet or desktop forward. I want to make sure I spend most of my time focusing on building a pixel perfect product for the browser size and device that will be used the most. In this case, we were designing for desktop first.

Generally, I like designing with patterns that developers can recognize. I set up a grid that works across common browser dimensions. Next, I create consistent spacing patters for margins, padding, and line spacing. If I use 30px between rows, I try to keep this as consistent as I can throughout the design system. Then, I identify when these spacing rules can be broken.

For fonts, I make a list of all the fonts being used and the styles for each h1, h2, h3, p tags and so on and so forth. Then, I create a guidelines that specify when the fonts should change in size for tablet and mobile devices. I develop alternative navigation menu designs for mobile and tablet designs. I create design templates that specify how elements on the page stack depending on browser width, as well as create guidelines that specify how images should be exported for retina display resolutions. Not every project requires this level of detail, but when I do have to do this kind of work…it’s on like Donkey Kong. I’ve been known to sit on the phone hours at a time working sifting through spacing issues until it’s just right. Don’t test me, I’ll know when something’s off by 8px. Best you believe me….

ULT_Pilot_About_RL

ULT_Pilot_Billboard_Center_RL

ULT_Pilot_Billboard_Left_RL

ULT_Pilot_Browse_Uniform_Grid_RL

ULT_Pilot_CarouselNoDescr_RL

ULT_Pilot_Character_4Col_RL

View More Less Is More