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.

[rs-space space=”45″/]

[rs-box_content style=”basic_block” txt_color=”#333333″ bkg_color=”#f5f5f5″ bkg_opacity=”1″ brd_color=”#ccc” brd_opacity=”1″ link=”” new_win=”no”]

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)

[/rs-box_content]

[rs-space space=”65″/]

Provided List Details

[rs-divider type=”solid” brd_width=”1″ brd_color=”#2f434a”/]

[rs-space space=”45″/]

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).

[rs-space space=”45″/]

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)

[rs-space space=”45″/]

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

[rs-space space=”45″/]

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

[rs-space space=”45″/]

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.

[rs-space space=”45″/]

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.

[rs-space space=”45″/]

[rs-button label=”Design Notes (working with Agencies)” link=”https://www.sparklogix.com/design-notes-for-agencies-working-with-spark/” new_win=”no” full_width=”no” position=”left” size=”btn-large” type=”btn-primary” wrap=”no”/]

[rs-space space=”75″/]

Leave a Reply

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