Design Considerations
Follow these recommendations, and your developer will thank you. These thoughtful aspects make your design easier to build.
Design using a grid.
A 12-column layout with gutters (like Bootstrap offers) is pretty standard. This also makes scaling down to mobile (or up to desktop, if you design mobile-first) much easier because you can specify how many columns wide each element should be for different screen sizes.
Typography is best approached as a set of character/paragraph styles.
Web standard is six header styles (h1 through h6), a paragraph / body style (p), and a link style (a). It helps a lot if all the text treatments in the design fall within one of these styles, so that we don't have to write new style rules for every headline.
Interactivity should be designed too.
For every interactive object (button, link, nav link, etc.) also design 1) a hover state, and 2) an active/focus state (i.e., what the thing looks like after you've clicked it).
The design's width should be specified.
If the site is fixed-width (i.e., does not grow to fill the full width of a page on large monitors and instead shows site margins), specify what that width is, in pixels, and also what happens in the margins (i.e., does the background image grow to fill the margin, or is it always white space, etc.)
Handoff Recommendations
The transition of handing off a mockup from a designer to a developer is where a lot of details get lost. These recommendations will make the developer more likely to be able to build *exactly* what you designed.
Exact color and font specs will save developers time.
Design elements are expressed differently on the web, so be sure to include hex codes for your color palette, Google font links, or raw font files (.otf or .ttf) to upload if we're not using Google fonts.
Assets (images and icons) need to be finalized by the designer, not the developer.
The dev will also need, at some point though not immediately, all of the icon or image assets for the site. These should be scaled down to the pixel dimensions that they will be used in on the site, so that we're not hosting huge image files (which impacts the speed of the page load). For icons, use the FontAwesome set and specify the unicode for the ones you choose.
Design multiple screen sizes.
Mockup a desktop version, but also a mobile version -- and preferably at least one screen size in between (a small desktop or a tablet) -- so that the developer can see how the design scales up and down. Bootstrap's breakpoints are pretty standard to work from for exact pixel dimensions.
Think pixel-perfect.
The dev will also need to know specifics about layout spacing -- the amount of padding an element should have above and below it, etc. If you have 53px above a heading and 47px below, assume that the dev will build exactly that -- even if you meant for them both to be 50px. You can annotate this manually in Photoshop mockups (tedious), or use a UI design program (like Figma and UXPin, which we use often) that allows the dev to inspect the code.
Resources
- Get familiar with Bootstrap, at least the logic for the grid and responsive resizing.
- RGB to HEX color converter if you don’t feel like opening a CC program
- Google fonts -- so great if these can be used instead of custom fonts
- Font-face generator for non-Google font
- An example Figma file for a single-page website -- duplicate it and design your own, using the screen sizes, grid, typography hierarchy, and color palette already set up for you.
- An example UXPin file for a multi-page website -- includes hover states, transitions, etc.