Blog

Design Checklist

Ensure a smooth hand-over between design and development with the design checklist

This design checklist is meant as a basis for exchanging assets between the designer and developer. Especially in a non-agile setting, this list can help with a smooth hand-over between design and front-end development. The list contains the most important points that might otherwise be overlooked or deemed unimportant. It is in no way meant as a complete list and might be updated when browsers, devices or specifications, etc. change.

The checkboxes won't uncheck when you refresh or close the tab. This makes the list easy to use over a longer period of time.

    • The hover state is activated when the link is targeted by the mouse cursor.

    • The focus state is activated when the link is targeted by the keyboard. Most browsers have a default focus state, usually a blue outline. The default styling can be replaced with custom styling that matches the design. In general, the focus and hover state have the same styling.

    • The active state gives the user feedback that the activation has been detected by the browser. In other words, it lets the user know that the link was indeed clicked.

    • A link is given a visited state if the user has already been on the page it's leading to. It's telling users the difference between the pages they have visited before and the ones they have not.

    • Links can have a target attribute which we can use to specify what should happen when the link is clicked. One of the possible values is blank, which tells the browser to open the link in a new window or tab (based on the user's preference). Opening a link in a new window or tab is a change in the default behaviour. To make sure the user knows what to expect there should be a clear visual distinction between internal and external links.

    • If a link is used for downloading a resource, we can add the download attribute to it. This way, when the user clicks the link the resource will be downloaded directly (instead of navigating to it).

      It can be pretty annoying when a download starts without expecting it. Therefore, the behaviour should be clear to the user before the link is clicked, by making download links visually distinct. It is also recommended to add some download details, like the type and size of the download.

  • When you choose a font for your design, you have two options:

    • System fonts: the fonts already installed on our computer
      • They are always available and you get them for free
      • The number of system fonts installed on computers is limited
    • Custom fonts
      • the font will match the visual design and branding
      • font files can be very large and add extra requests to your site. Both are hurtful for performance.

    When you decide to use a custom font, be sure to include the correct format, a fallback system font and (if possible) a subsetted font.

    • We used to include four file formats of our web font in order to get optimal browser support. Nowadays, the WOFF format will be sufficient in most cases, because it covers nearly all browsers (the only browsers not supporting WOFF are IE8, Opera Mini, and older versions of Android and iOS). Including only the WOFF format of the custom font has a couple of benefits:

      • It saves HTTP requests, improving the performance of the site
      • The WOFF format loads faster than other formats, because it uses a compressed version of the structure used by OpenType and TrueType fonts

      With the Font Squirrel Webfont Generator, you can add a font and it will generate the needed formats for you.

    • When you know in advance which letters you'll need, for example when the font is used in a logo, you can only include those characters. Subsetting reduces the web font file size, which will increase the site's performance. This can be done with the Font Squirrel Webfont Generator.

    • Always include a fallback system font that matches the custom font as close as possible. Browsers can select the fallback system font when it doesn't not support the WOFF format or the custom font can not be downloaded.

  • At De Voorhoede, we prefer to use SVG icons because:

    • they're vector graphics and thus are crisp on displays of all resolutions
    • they are semantic
    • they are fast and non-blocking
    • they support multiple colours and gradients, as opposed to icon fonts (which are monochrome)

    To provide an appropriate fallback solution, you can make use of several tools, like Grunticon and Iconizr.

    These tools take your SVG icons and processes them to a bunch of files, including SVG data URI's (for better performance), PNG data URI's (for browsers that don't support SVG) and some fallback CSS files (for older browsers and for browsers with JavaScript disabled).

    • According to the WCAG, 'any keyboard operable user interface has a mode of operation where the keyboard focus indicator is visible'. Just as links, browsers have a default state for focused form elements.

      The default browser styling for focused form element isn't always consistent with the visual design. For aesthetic reasons, it can be tempting to remove the focus indicator. However, this will make the form inaccessible to some users (e.g. those who rely on their keyboard). Fortunately, we can replace the default browser styling with custom styling that matches the visual design.

    • This state indicates that the user can not interact with the form element, e.g., a checkbox can not be selected or a button is not clickable.

      Since the default color of disabled form fields is grey in most browsers, you should be careful with making regular form fields grey. There should be sufficient contrast between regular and disabled form fields to make sure the user can easily see the difference.

    • A placeholder is an additional hint for users to help them with form completion (it's additional - it is not a substitute for a form label). A hint could be an example value or a brief description of the expected format.

      In most browsers, if supported, the default color of placeholder text is light grey. You can alter this default color to suit the visual design (be sure to apply a style that has sufficient contrast with the background color!).

    • Most browsers supply additional information if the user tries to submit the form without filling in the required value. However, it is useful to include an indicator of required/optional fields in the visual design to make sure that:

      • users know which fields are required or optional before they try to submit the form
      • they match the overall look and feel. The default browser tooltips can't be styled. However, we can add custom tooltips, using only CSS.

    • With the :valid and :invalid CSS pseudo-classes we can give users feedback about whether or not the entered input is valid, while they are interacting with the form. For example, we can make email fields red or green, based on whether or not the contents match a valid email address pattern.

    • The use of required/optional indicators and placeholders help the user to complete the form successfully. However, something always can go wrong. Be sure to include error messages in the visual design in case this happens.

  • Images are often the main source of page weight. An overweight website results in a poor user experience and high bandwidth costs. There are a couple of ways to take control over image size and quality in order to deliver fast loading site.

    • There are two types of images to consider:

      • vector images: use lines, points, and polygons to represent an image. They are suited for images that consist of simple geometric shapes, like logos, icons etc.

        Although SVGs are already pretty small, there are still things we can do to optimize them. SVGs contain a lot of metadata, like XML namespaces and layer information. Tools like SVG Editor remove unnecessary attributes, whitespace etc., resulting in reduced file sizes.

      • raster images: represent an image by encoding the individual values of each pixel within a rectangular grid. They are suitable for photographs and other images.

        Because JPG compresses the data to be much smaller, it is the preferred images type for photographic images. If the image has transparency, PNG is favorited.

        For SVG's and PNG's, make sure that the exported assets have the right fill colours and transparency where necessary (not the background color of the document in which they were made).

    • You can reduce image file sizes with minimal image quality loss by using compression tools like TinyJPG.

    • There are two kinds of JPGs: baseline and progressive. A baseline JPG is a full-resolution top-to-bottom scan of the image, and a progressive JPG is a series of scans of increasing quality. The progressive method has a positive effect on the perceived performance.

      an example of a baseline jpg
      An example of a baseline JPG
      an example of a progressive jpg
      An example of a progressive JPG

      Using the progressive method in your image is easy: Simply save your JPEG images with the 'progressive' option.

    • To cater for high-resolution displays, you need two images: a normal resolution and a high-resolution image (@2x). The @2x images can have a high compression rate. High compression doesn't affect the final image that much: since that image is more than twice the resolution of the display size, it also looks sharp on retina screens. High compression will decrease the file size of the images.

    • Often, static charts - like pie or bar charts - are represented by images. However, those images have some accessibility issues, since they provide very little information about the data to color blind people and users of screen readers. An ALT text generally doesn't do justice to the complexity of a chart. Luckily, in most cases, instead of using an image, we can construct graphs as HTML. So before deciding to create an image, think about whether or not the data can be visualized using HTML.

  • The best solution to have videos working, including fallbacks for older browsers, is the use of embeds. Youtube, Vimeo, etc. provide easy embedding of their videos. The control over these videos is a little limited but is enough in most cases.

    If videos can't be hosted on an external service which provides an embed link, the videos should be delivered in three different formats to make sure they will be visible on all common modern browsers/devices. The different formats are:

    • WebM
    • Ogg Vorbis
    • MP4 (H.264)

    Miro Converter is a free application which can convert MP4 files to other formats on Mac.

    Older browsers which don't support these formats can fallback to Flash movies. This fallback provides limited control and usually doesn't give the best quality.

One more thing..

If you have checked all the boxes in this list, you're good to go and you can hand you're assets over to development. However, there's one more thing you might want to pay attention to: naming your assets. Using naming conventions ensures consistency and makes sure that files are easy to find. Some things to keep in mind when naming your assets:

← All blog posts

Also in love with the web?

For us, that’s about technology and user experience. Fast, available for all, enjoyable to use. And fun to build. This is how our team bands together, adhering to the same values, to make sure we achieve a solid result for clients both large and small. Does that fit you?

Join our team
Return to top