Designer Site Build Checklist

When you choose a web development company, you should know what to expect.

We enjoy working with design, marketing, and creative agencies to implement the technical side of your creations. We can add a new section to a page or a website, or build out an entire website based on a custom design.

To help reduce back and forth or what can feel like an endless stream of questions in the process of building a website, we’ve compiled a checklist so you can get a sense of what we need as developers to complete a site build.

Or see here for an editable Google Sheets checklist.

To use the checklist, please log into your Google account, then go to File-> Make a copy, and use that copy.

Alternatively, you can download the file to Excel through File -> Download As.

Items we need for a site build

Access information

  • WordPress admin area login (if there is an existing site)
  • Hosting account login
  • sFTP account login (if you have it, or we can reset or make a new login from the hosting account)

Content Information

  • Sitemap - outline of the page hierarchy
  • Content for those pages in a Google Doc format. Include file names of photos used within the content so we know where they go.
  • Privacy Policy for GDPR & CalOPPA compliance
  • Browsers used by people who will be reviewing the site. Send as many links as needed - have each user copy the link from the field to the left of the green button here: https://www.whatsmybrowser.org/

Design Files

If sending the assets:

  • Logos, graphical elements, small photos
    • 2x sized - 2x is so we can display the image at half the size (real viewing size) with twice the pixels in the same space. This ensures that the image is sharp on mobile.
    • Format in png with transparent backgrounds
    • Compressed
  • Icons
    • Format in SVG if hover styling is preferred. Otherwise 2x PNG files are ok.
    • If sending SVG files, please merge the layers before sending. Otherwise when converting them to a font, they may be imported as multiple colors. See how you can tell if an SVG is ready to use as a font.
  • Photos
    • These don’t have to be 2x if they’re large background images or meant to be displayed at full width.
    • Format in jpg if no transparency needed
    • Compressed
    • Ideally 2000px wide if they will be used for full width backgrounds.
    • For smaller images used in content, no wider than 1200px. It is best if they are sized for the size and space they will be used in to minimize the data load time, especially for mobile visitors.

If sending an Illustrator file:

  • Elements not grouped together where they need to be exported as assets
  • Masking - if masking elements, set the pathfinder crop step before setting the transparency. The reverse order removes the transparency when exporting and it will need to be reset for each asset when transparency is used.
  • Label layers with descriptive names - this helps with finding the right asset

If sending a Photoshop file:

  • Label layers with descriptive names
  • Include logos and graphical elements as vector smart objects, or send separate 2x sized assets

Logo file

  • If not already included in the design files, we’ll need a version of the logo that is at least 180px x 180px in order to make a high quality browser tab icon (favicon) and Apple Touch icon for phones.

Breakpoints

(Desktop screen size and responsive design variations)

  • We suggest that your layout size be no larger than 1440px wide in order to accommodate desktop and laptop screen sizes and that your content container be around 1140px. Layout sizes may vary from these dimensions, but staying within these guidelines will help ensure an optimal user experience on laptop and wide screen computers as well as provide a foundation for creating a responsive user experience on tablet and mobile devices.
  • If you have specific design requirements for mobile or tablet layouts, we need to know this ahead of time. Otherwise we will flow the content responsively as the screen size changes.

Fonts

  • Style guide - guidance on heading sizes, paragraph sizes, font usage, logo usage, etc.
  • For Google fonts, provide font name and weights
  • For web fonts, we’ll need one of the following:
    • Web font files
    • Typekit or other similar embed code
    • Typekit or other similar account information
    • Links to web fonts if you would like us to purchase them on your behalf
  • For Desktop fonts, we’ll need a licensed copy of the font files so we can generate web font versions from them
  • Include desired line height and letter spacing

Suggested File Structure for Design Files and Assets

Suggested folders:

  • Design (Comps and mockups)
  • Images (Any photos that will be displayed on the website, separated into topical folders if necessary)
  • Icons (Vector images, logos, and icons)
  • Fonts
  • Content (Copy and text)

E-Commerce

If the site will have an online shop, we’ll need this general information:

  • Physical address of store location where products will be shipped from. If they will be drop shipped or shipped from multiple locations, please note and include all addresses.
  • Sales tax rate - one flat tax rate or city level sales tax calculations
  • Payment processing method - PayPal, Stripe, others?
  • Shipping
    • Are you selling physical products (ex: t-shirts), downloadable products (ex: e-books), or intangible services (ex: counseling)?
    • Will you ship worldwide, or just North America, or just the 48 continental states, or?
    • Which method(s) - UPS, USPS, FedEx, Local pick up?
    • Calculated by weight, dimension, both, or neither?
    • Handling fee?
    • Any special circumstances such as drop shipping, no shipping charge for some items, additional handling for some items, etc.?
  • Do you want to offer coupons?
  • We enable guest checkout by default - let us know if you would prefer to require an account.
  • What email address(es) should receive notifications of new orders?
  • Do you want to track inventory? If yes, do you want to allow backorders if something goes out of stock or prevent further ordering? Who (email address) should be alerted about low inventory?
  • Do you need to integrate with social media? Facebook, Instagram, or Pinterest?
  • Do you need to integrate with another database/CRM?

Then we’ll need product information:

  • About how many products will the store have? Send two representative products for us to add to the store as examples and we can demonstrate how to add more, or add the rest for you
  • Product titles
  • Description
  • Pricing
  • Any special pricing (bulk discounts, extra charge for X additional option)
  • Weight (if relevant to shipping)
  • Dimensions (if relevant to shipping)
  • How many available (if you do want to track inventory)?

Forms/Marketing/Email Database

If the site will have web forms or marketing integrations:

  • Do the web forms need to integrate with another database/CRM/email provider?
  • Who should receive email notifications of submissions? What email service do you currently use for sending out email (Google, Outlook online, through your website hosting account?)
  • Mailchimp login, or the login for a similar email subscription list or CRM system

See here for an editable Google Sheets checklist. To use the checklist, please log into your Google account, then go to File-> Make a copy, and use that copy. Alternatively, you can download the file to Excel through File -> Download As.

Our Principles

Responsiveness

We respond to emails within one business day. As a stream of emails interrupts the design process and makes that process less efficient, team members may set a designated time to respond to emails, but they will read and respond in a timely manner. We are happy to speak with you on the phone about your project at a scheduled time.

Continuity

If a team member is out for any reason and is unable to contact you within one business day, another team member will be available to assist you with any needs that may arise during that time. We find the process to be smoother if you have one main contact on our team, but we like to have more than one team member familiar with your project for project continuity.

Clear Communication

We try to communicate as clearly as possible with you, and we ask that you do the same. Including page titles, links, or images to indicate which page we are talking about is one of the simple ways we do that. We do our best to avoid jargon. Our goal is for you to feel heard and understood, and we strive to be clear in all of our communication with you.

Why?

Our goal is to provide you with a website that meets your needs and exceeds your expectations. We want to help you get your message out to the world. In doing that, we also want to be wise stewards of your time and your budget. We find that clear expectations and communication are key. We can provide you with an estimate as required, or set budget caps.