Menu
#2

Prepare to build

Designers often ask what we need to start building a website. Over time, we have compiled a comprehensive checklist for materials that we need. Here’s what we usually ask for.

  • A list of the individual page types, or template.

A template in this sense is a basic layout for a number of pages which share a common layout mechanism, for instance a “three column layout with an image in the left column, text in the center column and nothing in the right column” vs. a “three column layout with text running in all three columns” vs. a “page with two columns of thumbnails”.

  • A sitemap which indicates the basic structure of the site.

Ideally, the sitemap would assign the templates (page types) to the pages in the sitemap.

  • A PDF with the design.

Of course! Ideally, the PDF contains only the website design. If possible, strip all decorative elements like the browser UI or the iPhone frame that you may have included to show the client how the beautiful his new website will look like. As a rule of thumb, strip anything that’s not the website itself from the pages. Also, make sure to include pages at full length, not just what’s visible in a browser frame.

One important point that’s often missing in PDFs we get is styling of user-edited content. So if the site is backed by a CMS, make sure to include a page where you show all text formattings your client should be able to use. Remember that editors often tend to use second-level headlines as well as bullet and numbered lists to structure longer texts, want to add quotes and footnotes and use multiple types of emphasis like italics and bold. We’re definitely in line with you to strip these formattings, but think of what should be possible for editors better now than later.

  • A written description of everything that should move, transition, or be interacted with.

This includes explanation in writing of, for example, how slideshows should work, how lightboxes should open, how elements should behave when a page is scrolled, and so on. If you want the site to make heavy use of animations and transitions, include intermediate states. In many cases, annotating the PDF is sufficient, so that a separate document with the written specifications is not required. Yet, such separate documents are helpful in larger projects or when you need to explain complex behavior.

  • A typography specification which includes font name, font weight, font size, line height (leading) and letter spacing (tracking) for each typographic element.

Such a combination of font name, size, line height and letter spacing is what we call a “style”. Ideally, make a list of all styles, and give each style a name. Then, use that name only to indicate that a particular element of your design makes use of that style. The easiest way to reference what style is used where is adding a couple of separate pages to your design with a layer in a different color, indicating the style names for each element. Also, when compiling styles keep in mind that especially in longer texts your client might want to use formattings like emphasis (italics or strong), capitals, headlines of different levels, and so on to structure the text. All of these should end up as additional styles in your list.

  • A specification of the horizontal metrics. Or simply a grid.

Most responsive websites are based on a grid of twelve columns with gutters spanning the full browser window width. The grid columns and gutters are percentages of the window width. Elements in the design span across a number of columns and the gutters in between. If your design is such a design, it would be sufficient to explain the grid once (in percentages or pixels at a defined width), and then indicate which elements span how many columns. As there are endless variants of designs, there are of course countless variants to grids, for instance fixed gutter widths, fixed column widths, grids which grow when the browser extends, grids which have a minimum or maximum width, combinations of these, or no grid at all. Make sure to include an explanation of how the system you have decided for is intended.

For an example of how such a visual specification could look like, check out the keylines and spacing examples from Google.

  • A specification of the vertical metrics.

Some designs work with absolute pixel dimensions for vertical spacings between elements, others are based on font size or line height (leading), others are using a baseline grid (see how Google does it), yet others are based on the dimensions of the horizontal grid. Whatever you choose, give us an indication of the vertical dimensions or the vertical rythm of your design. For instance, if your idea was that all images in that column of thumbnails should have 20 px vertical space, tell us that by adding a page to your design PDF that has a comment added. Specifications for visual elements that change state on user interaction, like link hovers/rollovers, image hover/rollovers, or images that display a caption upon finger touch.

  • All layout graphics.

Layout graphics are everything that is not editable by the client, i. e. should not be managed through a CMS. Most likely, this holds for logos and button symbols used in your design. In times of retina displays, vector images are ideal. For these, there are two options: individual SVG files or a symbol font. For projects with many symbols, a symbol font is often the best choice, while logos and icons in project with few icons are best provided as SVG files. Before preparing the files, we should discuss options.

  • Sample images (JPEG) and texts we can use to populate an initial version of your design.

Ideally, these are the same images and texts you used in the design that you’ve shown your client before so that they recognize what you’ve presented them.

  • For responsive websites, make sure to include designs for all breakpoints.

Ideally, include designs of all pages, but make sure to include at least the key pages for each layout.


Of course we don’t need all materials when we start with the build. Some, like the layout graphics, are good to receive slightly later. If you still think the above is a lot, keep in mind that all together form a valid and sound description of your design and all the fabulous ideas in it. For a straightforward and high quality build process, we need to understand how your design is conceived and intended, so we need to know all about it. The above is just what we think is the best form for it.

Desktop: 1025px and above

12 column responsive grid
Tablet: from 768px to 1024px

4 column responsive grid
Mobile: up to 767px

4 column responsive grid