• Happy Independence Day to all our friends in America! 🗽We hope you have an amazing 4th of July, filled with family,… twitter.com/i/web/status/1…

COMPANY BLOG & NEWSROOM

20Aug

Designer’s Checklist for Successful Coding Outsourcing

design_checklist

Sometimes, you get so overwhelmed with a new project that some important details might just slip your mind. When you are handing on your designs to a developer, this can cause some confusion and delays during the coding process. Here’s an ultimate checklist for the case. It’s straightforward, comprehensive, and short. Enjoy!

Links & Buttons

  • Default states are included.
    This is pretty self-explanatory. A default state is what the links and buttons look like before the user hovers over or clicks on them.
  • Hover states are included.
    What happens when the cursor is held over the link or button?
  • Active states are included.
    This is what lets the users know that they’ve clicked the link or button and the content behind it is loading.

Images

images

  • The image format is acceptable.
    Of course, devs can work with any kinds of images, but lightweight vector and high-res images will save a lot of time and help you get the final product you wanted. Keep in mind that JPG is the preferred image format for photos, while PNG is great for images with transparency. Read more here.
  • High-resolution images are provided.
    High DPI (dot’s per inch) means high pixel density and is usually a print measure. High DPI screens produce beautiful results, but image assets require more detail.
    Resolution is a count of number of pixels in the display expressed in the measurement of width and height.
    To ensure that your designs always look stunning, it’s better to provide two versions of your graphical assets: for standard and high-res screens. JavaScript will dynamically serve the correct image keeping the loading time low. Here are few nice tips.

Fonts

  • Non-web fonts are provided.
    If there are any custom fonts that you’d like to add via @font-face or Google Fonts, send them along with your design files. Just check if your fonts are compliant with the safe fonts or have the necessary licenses for web-embedding.
  • Default fonts are specified.
    Please specify what web fonts or default fonts should be used as a substitution to the custom non-web fonts you’ve selected.
  • Font sizes for retina are taken into account.
    When creating layouts for different display sizes, remember to specify what font sizes should be used so that the text remained readable. This is especially important for navigation menus.

Icons

icons

  • Icons embedded into a custom font or used as an SVG file.
    SVG (Scalable Vector Graphics) provide a great support for interactivity and animation. They are very lightweight and are smoothly resized without losing quality. You can import your vector icons from Adobe Illustrator or design your icons in Adobe Photoshop and then put them into smart objects. You can read more about icon fonts and SVG sprites here.
  • Favicons are included.
    Favicon is a little “logo” that represents the site in a tab, or if the user saves a link to it to their desktop. It’s usually best to make them transparent.

Forms

  • Indicators of required and optional fields are specified.
    It’s up to you whether you want to use a required field indicator or to mark all optional fields. Just note that it is useful to such indicators in your visual designs to make sure that your forms are user friendly and match the overall look of the layout. Also specify if you want to use some custom tooltips.
  • Indicators for valid and invalid fields are included.
    You can help the user complete the form successfully by giving them feedback on the information provided. Is it valid or not?
  • Error messages are provided.
    Make sure to specify what the user did wrong.
  • Focus states are defined.
    Indicating when the form element is focused can help you make your web page more accessible (e.g. for the users who rely on their keyboard). Browsers have a default look for focused form elements, which isn’t always consistent with the site design. If you want to use custom form styling, please describe what you need done and provide examples if possible.
  • Disabled states
    Indicating the fields that the user doesn’t have to interact with under their particular set of circumstances. Usually involves “graying out” the form box (and accompanying text) or making the button unclickable.

Oh yeah, don’t forget:

rwd

  • Breakpoints are set.
    Breakpoints are the points at which your site layout responds and scales based on the device it’s viewed on. Plane your breakpoints well and provide design versions for smartphones (320 px) and tablets (768 px).
  • Samples of desired effects are listed.
    Are there any particular animations or effects you want on your site? Make sure you specify how you want them to look, preferably using an example.
  • Video files or links provided.
    To make the development process as smooth as possible, remember to provide all necessary links and video files.
  • A complete list of requirements is attached.
    Do you have any other needs from or requests from your coder? Make sure to spell them out as thoroughly as possible.

We hope this checklist will help get you through the process. Feel free to download it for free and get back to it any time you need it. Just remember that the only way to be sure exactly what your developer needs is to communicate with them, often and in as much detail as possible. In fact, it’s arguable that a coder who is willing to speak up about their needs and go above and beyond to make sure that yours are also met is more valuable than one with a raw talent.

Any other suggestions for the list or comments on the items already on it? Let us know!

leave a comment

All posts Back to top