Member Login

Welcome to the Clubhouse Online Design Portal!

This site has been created to help you understand the different elements that lead to a successful website design project. Below you will find information on the three project phases (Content, Design, and Final Build) as well as many tips to make your design project a huge success.

For more information, please see the Resources section at the bottom of the page or feel free to reach out to your Project Coordinator or Web Designer.

   

  1. *CONTENT

    • All of the graphics and verbiage contained on each page of the website. 

    • Includes:

      • Sitemap

      • Content Compilation Document (CCD)

  2. *GRAPHICS

    • The overall look and feel of the website

    • Includes:

      • Graphics Gathering

      • Mockup Creation (maximum of 2)

      • Mockup Approval Document

  3. *FINAL BUILD

    • Includes the final Site Build and Round of Changes (one per project)

    • Includes:

      • Final Site Build

      • Club Review

      • Round of Changes Document 

Now let's get started!

Content

Includes all the graphics and verbiage (text) for each page of the website.

Colored processes are the responsibility of the club

Sitemap

  • A visual representation of your website 
  • Maps 1-to-1 to your site's navigation (i.e. each icon represents one page or module)
  • Details which pages are public and private 
  • Includes purchased modules (Statements, Roster, Calendar, Tee Times etc.)
NOTE: Adding or removing pages after the sitemap has been approved constitutes additional billable work. View pricing here

Gather Content

Content Compilation Document

  • A Content Compilation Document (CCD) will be provided to you
  • Each page of the Content Compilation Document maps to one page of the sitemap
  • When completed it will contain all of the images, verbiage, and widgets you would like to see on each page
NOTE: Unless otherwise specified, missing information on the Content Compilation Document may not be added later without incurring an additional fee.

Images

  • Chose high quality and professional images whenever possible 
  • Banner Images - original file must be minimum 2000px wide. DO NOT enlarge image to fit this dimension. If the image is smaller we may be able to use it for a different element. Enlarging it will degrade image quality. 
  • Upload images to your club’s Dropbox 
    • Keep image names specific so they can be easily located
    • Use folders to create logical groups of similar images
Resources

NOTE: High quality images are the single most important element of a great website.

High Quality

properly size image

Low Quality

Verbiage 

  • Include all of the text you would like on each page 
  • Ensure verbiage is free of spelling and grammatical errors 
  • Note which text should be used for headers, sub headers, and body text

NOTE: Content changes made after the start of the site build are the responsibility of the club 

Widgets

  • Widgets are the building blocks of a ClubHouse Online website
  • They allow information to be arranged in a variety of different ways 
  • Widgets can be easily created and modified through Club Central, the administrative side of each ClubHouse Online website 
  • Widget types, examples, and detailed configuration instructions can be found on ClubHouse Online Support Site

Widgets Examples

Check out live examples of the different widgets

Widget Examples

Graphics

The overall look and feel of the site. Comprised of 4 elements: 

Colored processes are the responsibility of the club

1. Logo(s)


  • App - Vector file (AI, EPS, or SVG) 

  • Website Only – 500 pixel minimum (JPG or PNG)  


 

2. Colors

  • Format - Hex Color Codes (e.g. #3FB5FF) 

  • May be taken from branding (use Jonas logo as example)
Resources

3. Fonts

Headers - Monsterrat Semi bold 600

Subheaders- Tinos Oblique

Body text - Raleway

 

NOTE: Custom fonts may be used only with a signed document agreeing to font ownership 

4. Navigation

Mockup Process

  • A mockup allows you to see how the four design elements look in combination with one another
  • A mockup will include 2-4 pages including the: home page, sample inner page, drop down navigation, and mobile view.
  • Mockup revisons include: changing navigation, altering text and/or colors, and altering logo size and/or placement
  • Mockup content (widgets, text, etc) are used to get an idea of the look and feel of the final site, and will be changed during the site build
  • The mockup will be approved when the club signs the online Mockup Approval Document.
  • After the mockup is approved, graphics elements may not be changed without incurring additional fees

NOTE: The mockup approval document must be signed before the project can proceed to the content build stage.

FINAL BUILD

Colored processes are the responsibility of the club

Initial Build

  • Using your club's Sitemap and Content Compilation Document, your designer now has all the information they need to build your website
  • The build occurs on stages, allowing clubs to review before moving forward
  • Pages built are now considered completed 

NOTE: Unless otherwise specified, any content changes made after the start of the build will either: a) be the responsibility of the club; or b) constitute additional billable work

Round of Changes (ROC)

  • Allows the club to review the site and compile all website changes into a single document. 
  • Clubs have 14 days to review the site and return the completed the Round of Changes document to their designer.
  • Returning the Round of Changes Document late may result in additional fees

NOTE: Only ONE Round of Changes is provided for each website.

Item  Included  Not Included 

Changing or rearranging the order/placement of content designed and laid out within the web page. 

yes 

  

Replace placeholder images already uploaded to the page. Club responsible for replacing imagery thereafter.

yes

  

Correcting any data that was mistyped onto the web page by the web designer based on Content Compilation Document (CCD) provided. 

yes

  

Updating outdated verbiage, documents (Note: This is the responsibility of the client to update outdated content. Training materials provided) 

  

no

Adding additional images on a page that were not included with CCD can drastically change the design of the page potentially requiring the page to fully be redone from scratch. Changes at this stage would be billable. 

  

no

Moving/removing/adding pages within the website navigation (These aspects would have been finalized in the sitemap process. Changes at this stage would be billable.) 

  

no

Change logo placement, site colors, themes, fonts, header/footer (These aspects would have been part of the mock-up approval. Changes at this stage would be billable.) 

  

no

Place additional content onto website pages that was not already sent in the CCD or part of content directed to be utilized during the initial website build. 

  

no

Project Overview & Club Deliverables

   

  1. CONTENT

    • Club Deliverables:

      • Sitemap Review & Approval

      • Completed Content Compilation Document (CCD)

    • NOTES:

      • Use high quality, professional images

      • Changes made to content after the start of the final build are the responsibility of the club

  2. GRAPHICS

    • Club Deliverables:

      • Gather Graphics (logos, colors, fonts, navigation)

      • Mockup Review

      • Signed Mockup Approval Document (must be signed before the next phase can start)

    • NOTES:

      • A maximum of 2 mockups may be created

      • The Mockup Approval Document must be signed before the next phase may start

  3. FINAL BUILD

    • Club Deliverables:

      • Final Build Review

      • Completed Round of Changes Document

    • NOTES:

      • Each website gets ONE round of changes

      • Only 3 types of changes are permitted (see table above)

Resources

Example Websites

Content Resources

Image Resources

Image Resources

Compress large images for faster load times Compressor.io
Enhance low quality images Upscale Media
Online photo editor imgtools



 

Graphic Resources

Color Resources

Color Resources

Generate color hex codes from an image or logo ImageColorPicker
AI generated color combinations Coolors
Explore popular color palettes Color Hunt
Experiment with "Flat Design" color (minimal and 2D) Flat UI Color Picker
Generate tints and shades of your primary color palette Tints and Shades
Font Resources

Font Resources

AI generated font combinations Fontjoy