Front End User Experience Design Checklist

If you’re an Agency sending work to Spark Logix Studios and are providing all design assets for development, here’s a little group of checklists to help you. When provided, these lists will enable us to quickly take into account your exact requests.

Understanding What’s Needed

  1. Provide a PDF of all requested page designs. May also include a PSD file (with accompanying JPG or PDF files for compatibility purposes).
  2. Provide a Checklist of all Text/Font Uses (as described below).
  3. Provide all Image Assets at 144DPI (Sized as intended) -Sizing instruction typically occurs during the initial design brief. We may also provide standard sizes that work well for full width and responsive needs. (We may also create the site using dummy images for later image placement by the Agency).
  4. Provide Content (written out for each page) – (or we use dummy text and the Agency enters the content)

Provided List Details

Content and Images

  1. Logo (either PNG or SVG)
  2. Favicon
  3. All Images & Written Content (provided via a specific Basecamp Discussion for each page).

General Font Usage

  1. General Font (default with Respondo Pro: Arial, Abril Fatface, Alegreya, Arvo, Droid Sans, Francois One, Helvetica, Helvetica Neue, Lato, Montserrat, Open Sans, Oswald, Product Sans, Raleway, Tahoma, Ultra, Verdana) If you have a font preference not listed here, please provide the web font for inclusion.
  2. General Paragraph Font Size
  3. Font Line Height (if unsure, it’s okay, we’ll make it look just right)
  4. Lead Font Size and Face (Face is just referring to the font used)
  5. Title Font Size and Face
  6. SubTitle Font Size and Face (may not be applicable)
  7. H1 – H6 Font Size
  8. Text Color (for example: #262626)
  9. Titles Color
  10. Link Color
  11. Link Hover Color
  12. Title Link Color
  13. Title Link Hover Color
  14. SubTitle Color (may not be applicable)
  15. Breadcrumbs Font, Link and Hover Colors (background too, if applicable)

Headers and Footers

Specify which. Include detail on: (PreHeader, Header, PreFooter, Footer). All color & style details may be collected via the design images provided.

  1. General Font (default with Respondo Pro: Arial, Abril Fatface, Alegreya, Arvo, Droid Sans, Francois One, Helvetica, Helvetica Neue, Lato, Montserrat, Open Sans, Oswald, Product Sans, Raleway, Tahoma, Ultra, Verdana) If you have a font preference not listed here, please provide the web font for inclusion.
  2. Font Size
  3. Link Color
  4. Link Hover Color
  5. Link Active Color

Dropdown Menu

All color & style details may be collected via the design images provided.

  1. General Font (see options above)
  2. Font Size
  3. Link Color
  4. Link Hover Color
  5. Link Active Color

Widget Areas

  1. General Font Size and Face
  2. General Text Color
  3. Title Font Size and Face
  4. Title’s Color
  5. Link Color
  6. Link Hover Color
  7. Link Hover Background Color (if applicable) -Provide via list or we can simply take the color options form the provided design assets.

Pagination

  1. Font Size and Face
  2. Text Color
  3. Link Color
  4. Link Hover Color
  5. Link Hover Background Color (if applicable) -Provide via list or we can simply take the color options from the provided design assets.
Design Notes (working with Agencies)

2 Comments on “Front End User Experience Design Checklist

  1. Britanica

    Excellent list. I am working on expanding my branding and blog to other options online and I was considered using Sparx Logix. If I had just dove in and did this, I have a feeling I would not have gotten the most of their service. Thanks for this list! Super helpful 🙂

    Reply
  2. Jen

    I love that this post is itself an example of user-friendly interface. Your bolds and headings make it easy to read. Thanks for the details!

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *