Need Help?

Call 802.229.0591

We're Here 24/7

DONATE

STYLE TILE

Lulu's Notes

Hi John & Clare!


The purpose of this style tile is to conceptualize the visual direction for your new website, as well as ignite some ideas for how functionality can be used to display content in a user-friendly way.


This is just a starting point to be used to stimulate ideas, so please don't be afraid to make comments (on this task of the Asana Board).


DESIGN NOTES:


  • The existing WCMHS look and feel is quite "corporatey," something you would usually envision on a bank website of yester-year. It gives the site a heavy, serious, and uninviting demeanor that isn't perhaps representative of your organization.
  • In this style tile, I tried to lighten up the feel to give a sense of:
  • Friendly & inviting
  • Energizing
  • Bright, cheerful, but professional
  • Modern
  • Memorable
  • Using the bright pink from PNS is daring & bold and adds a uniqueness to the design but, if too much for you, the pink can be replaced with the orange (less memorable but still effective).
  • You can use the existing color palette (see below) as a visual guide-map throughout the site (whenever I see lavender, for example, I know I'm on a page or section related to CDS). This color palette doesn't exactly go well together but we can use tints of each shade to adjust and blend.
  • I created a new "inclusion not exclusion" element for fun while waiting for the flag - take or leave as desired.
  • I like the approach of keeping everything bright.

Current Color Palette

Logo

NOT EXCLUSION

SHORT HEADING TWO

This is an example heading in Fjalla One

This is body copy in Nunito Sans which is an attractive, easy-to-read font. This is paragraph text. To change it, simply click and start typing. Once you've added your content, you can customize its design by using different colors, fonts, font sizes and bullets. Just highlight the words you want to design and choose from the various options in the text editing bar. This is the text area for this paragraph.


Link text.

HEADING THREE IN NUNITO SANS


Optional Signature Font

Used sparingly, you can add a little more flair to the site. This is just an example font - we can choose from hundreds out there!


LAYOUT RECOMMENDATIONS

Text Container Width - no more than 730 px (obviously less for mobile devices).

Line Height - 1.5 - 2 for body/paragraph text

Font size - 18 pt or more for desktop / 16 for mobile

Alignment - left justified

SOCIAL


BUTTONS

Click to Call Functionality


EXAMPLE ICONS

Example Text Slider

Good for displaying short testimonials of similar length.

Slide Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed enim eu tortor ultrices pharetra. Fusce vestibulum tempus urna quis convallis. Aenean id ipsum semper, rhoncus sapien in, placerat libero.

Slide Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed enim eu tortor ultrices pharetra. Fusce vestibulum tempus urna quis convallis. Aenean id ipsum semper, rhoncus sapien in, placerat libero.

Slide Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed enim eu tortor ultrices pharetra. Fusce vestibulum tempus urna quis convallis. Aenean id ipsum semper, rhoncus sapien in, placerat libero.

SHORT HEADING TWO

Example colored column

This is body copy in Nunito Sans which is an attractive, easy-to-read font. This is paragraph text. To change it, simply click and start typing. Once you've added your content, you can customize its design by using different colors, fonts, font sizes and bullets. Just highlight the words you want to design and choose from the various options in the text editing bar. This is the text area for this paragraph.


Link text.


BUTTON STYLE 2

SHORT HEADING TWO

Example colored column

This is body copy in Nunito Sans which is an attractive, easy-to-read font. This is paragraph text. To change it, simply click and start typing. Once you've added your content, you can customize its design by using different colors, fonts, font sizes and bullets. Just highlight the words you want to design and choose from the various options in the text editing bar. This is the text area for this paragraph.


Link text.


We understand what it's like...

This section is optional. You can use it to transition to the next section. Using empathy statements to show you understand and care is a great way to, well, show that you understand and care.


This section is optional. You can use it to transition to the next section. Using empathy statements to show you understand and care is a great way to, well, show that you understand and care.

Option CTA

Topic point 1

Subtitle

This is a text area for this paragraph. To change it, simply click and start typing. Once you've added your content, you can customize the design with different colors, fonts, font sizes and bullets. 

Read more

Topic point 2

Subtitle

This is a text area for this paragraph. To change it, simply click and start typing. Once you've added your content, you can customize the design with different colors, fonts, font sizes and bullets. 

Read more

Topic point 3

Subtitle

This is a text area for this paragraph. To change it, simply click and start typing. Once you've added your content, you can customize the design with different colors, fonts, font sizes and bullets. 

Read more

Topic point 4

Subtitle

This is a text area for this paragraph. To change it, simply click and start typing. Once you've added your content, you can customize the design with different colors, fonts, font sizes and bullets. 

Read more

ACCORDION

Two Column Layout

Optional intro paragraph. Lulu's notes: the icons in the accordion are just placeholder for now but you can choose any SVG icon to replace them with OR eliminate altogether. I have included a few images to give you an idea of what could work here (once you choose an image we'll turn the slider off). Images could be cropped and re-positioned to work better.


Optional intro paragraph. Lulu's notes: the icons in the accordion are just placeholder for now but you can choose any SVG icon to replace them with OR eliminate altogether. I have included a few images to give you an idea of what could work here (once you choose an image we'll turn the slider off). Images could be cropped and re-positioned to work better.


Optional intro paragraph. Lulu's notes: the icons in the accordion are just placeholder for now but you can choose any SVG icon to replace them with OR eliminate altogether. I have included a few images to give you an idea of what could work here (once you choose an image we'll turn the slider off). Images could be cropped and re-positioned to work better.

Optional CTA
  • Community & Home-based Services

    Community and Home Based Services include programs in our Children’s Division, which provide support and services to children and their families in the community as well as in their homes. These programs include: Family Partnership and Supports, Residential Treatment Programs, Therapuetic Foster Care Program and Respite Services.


    Family Partnerships and Supports

    Through the Family Partnership and Supports Program, case managers are focused on providing individualized services for children and families who are experiencing a serious emotional disturbance. Children served are typically at-risk of a more restrictive placement, and/or multi-agency involvement.


    Residential Treatment Programs

    Residential Treatment Programs are residential programs that provide intensive community-based services to children with challenging behaviors. Up to four residents are served in each program. WCMHS Children, Youth and Family Services Division currently operates four such programs. Each specializes in serving residents with specific needs. The primary goal of the programs is to provide stable treatment based placements to children and youth who have experienced multiple placements, extended residential placements or who would otherwise be hospitalized.


    Respite Services

    Respite care services are designed to give limited, planned, scheduled breaks to families caring for a child or youth experiencing, or at risk of experiencing a serious emotional disturbance. The Respite Program may provide overnight respite services through licensed the Vermont Department of Children and Families foster care providers.


    Therapeutic Foster Care Program

    The Therapeutic Foster Care Program (TFC) is a new program within the Children’s division. The main objective of the TFC program is to meet the physical, emotional and social needs of children and youth in a supportive family setting until the child’s family can be reunited. TFC is a trauma informed program that supports children who have experienced trauma and have difficulty managing their emotions and behaviors in the regular home environment. The intent of the Therapeutic Foster Care placement will be to support positive and healthy family contact and build on the child and family’s strengths in order to support a successful transition back to the child’s family. It is a team approach that strongly encourages positive family participation, contact and collaboration among all team members. If you are interested in learning more about becoming a Therapeutic Foster Care Provider, please click here for further information.

  • Counseling Services

    The Child and Adolescent Services staff provide a variety of individual, group, and family counseling services using many therapeutic methods. In addition to providing psychological services to youth and their families, staff are also trained in providing therapy designed for children exposed to domestic violence.

  • Developmental Services

    Community Developmental Services (CDS) provides comprehensive services to children and adults with developmental disabilities, autism and other pervasive developmental disorders.


    All persons receiving support from CDS are assigned a Service Coordinator/Case Manager who is responsible for their Individual Support Agreement and assists the person in achieving success within their community.


    The Bridges Program provides care coordination to assist families of children under age 22, eligible for Vermont Medicaid, and who have developmental disabilities.


    The Bridges Program is a goal-driven approach and designed to help families:


    Determine what supports or services are needed.

    Access needed medical, educational, social or other services to address their child’s needs.

    Coordinate multiple community-based services and develop a plan to address their child’s needs.

  • Early Childhood Services

    Outreach specialists provide clinical and consultation services in conjunction with other area agencies. Services are focused on young children ages 0 to 6 experiencing, or at risk of, a serious emotional disturbance and their families.


    One program offered under Early Childhood Services is New Leaf, which provides specialized day care services for children ages 0 to 3. Its primary focus is on serving children experiencing or at risk of a serious emotional disturbance and children with developmental issues and their families.

  • School Contracted Services

    These services result from a contract between a Local Education Agency (LEA) and Washington County Mental Health Services. Services are paid for by the LEA and delivered by WCMHS.


    School Contracted Services Programs include:


    School Based Behavior Interventionist Services (SBBIS) provides multiple highly individualized school-based programs for youth and their families living with significant emotional and behavioral disorders. Youth that we serve are at risk of being placed in residential and/or day treatment facilities. Through the use of a trained behavior interventionists, therapeutic case management services for the family and school, behavioral consultation from a clinician trained in Applied Behavioral Analysis, and close partnerships with the contracting schools, the vast majority of the youths served remain in their homes and in public schools.


    The Beckley Day Program (BDP) is a short-term tutorial program available for students served by the School Based Behavior Intervention Services Program, in grades 1-6, that are having acute difficulties accessing their education in a mainstream environment. Children served by the Beckley Day Program are typically students in need of extra support, stabilization, and assessment. Youth are offered a supportive environment in which their social, emotional and educational needs can be assessed and supported with the goal of transitioning the students back to the least restrictive mainstream educational environment.


    Specialized Treatment and Reaching Success (STARS) has been designed by Children, Youth, and Family Services to address the unique educational and social needs of children and youth ages 3-22 years old diagnosed with an autism spectrum disorder (ASD) and/or other developmental disabilities (DD). STARS provides a wide variety of supports including individualized academic, social skills, and life skills within the client’s public school or within the STARS center on Beckley Hill in Barre, Vermont.


    STARS School is now accepting referrals. STARS School provides a full onsite academic program for students which includes individualized behavioral programming, social skills training, and support around activities of daily living. Programs are individualized and developed by the Consultant and an Educator with significant input from the family and sending school team


    Ch.O.I.C.E. (Changing Our Ideas Concerning Education) Academy, a licensed independent school, and an integrated transitional mental health treatment facility/educational center. Ch.O.I.C.E. provides educational and therapeutic services to youth in grades 5-12. Enrollment is voluntary and limited to youth currently unable to access their education in a mainstream setting.


    There is also an afterschool program that provides any youth currently served by WCMHS therapeutic afterschool activities three days a week during the academic calendar year. First priority for enrollment is given to Ch.O.I.C.E. Academy students. WCMHS case managers or staff makes referrals to the program.


    Home School Coordinators and Positive Behavioral Intervention and Supports Behavior (PBIS) Analysts are Children, Youth and Family Services clinicians/case managers who work in contracting schools to provide home/school coordination, interagency service coordination, and direct services to children and youth experiencing a serious emotional disturbance and their families. Staff also assists the contracting school with the implementation of its Positive Behavior Intervention and Support system.

  • Groups

    Children, Youth & Family Services offers a variety of groups in an ongoing manner to provide additional services to children, youth and families in Washington County. Please click here for the most updated listing of groups and workshops currently being offered.


    Please call (802) 229-0591 if you are interested in joining a group. This will involve some routine questions and then a scheduled, brief interview to begin the process of accessing services.

  • Psychiatric & Nursing Services

    Psychiatric staff provides medication evaluation and ongoing medication management.


    Nursing staff facilitate coordination with primary care providers, oversee medication administration and provide special care procedures.

  • Children & Teen Grief & Loss Support Groups

    (does this belong under Groups?).

    The Children’s Grief and Loss Program [CGLP] provides a variety of therapeutic services to reduce the risk of negative outcomes for youth (ages 5-22) and families who have experienced a significant loss. The CGLP welcomes those who have experienced a death, termination of parental rights, changes in foster/adoptive care, divorce, a significant move(s), or prolonged incarceration. We have found that all youth who have experienced a loss, regardless of the type of loss, are at risk for similar mental health concerns. We strive to provide a safe, supportive environment where youth can connect with each other and learn about ways to cope while engaging in creative activities.


    What do we do?

    Our grief-focused services include:

    •  6-week group for youth (with a 7th session for caregivers)
    • Short and long-term individual therapy with a grief focus
    • Caregiver psychoeducational sessions (time limited)
    • Summer and Winter booster groups for youth already involved with the CGLP
    • Trainings for other providers who want to learn more about supporting grieving youth
    • Trainings for other providers who want to start their own grief program

    All services require an assessment process and groups occur approximately 4 times per year. Please call (802) 479-4083 to find out when the next group will be, to make a referral, or for more information!


    You may also visit us at www.Facebook.com/ChildrensGriefAndLossProgram for resources, tips on how to support grieving youth or information about our upcoming groups.


    More about us…

    The CGLP was started in late 2014 when one of our colleagues attended a workshop titled “Childhood Grief: Interventions to Use with Bereaved Children”. In early 2015 this colleague made contacts with personnel from other agencies with experience in child and family grief and loss, collected resource materials on grief and loss in children, developed a curriculum for grief-focused children’s groups, advertised our groups, and sought grant funding. The first referrals for our program were made in early 2016. Since 2016 the “Children’s Grief and Loss Project” has expanded into a “program” complete with a wide array of services, connections in the community, advertisement materials featuring a unique logo, and statewide recognition. In July 2019 one of our colleagues received a scholarship through the New York Life Foundation to attend the Dougy Center’s Summer Institute. At this week-long conference this colleague learned how to create, develop, and grow a grief and loss program for youth from one of the nation’s most celebrated grief support centers. The CGLP is a member of the National Alliance for Grieving Children and over the past two years the CGLP has received partial funding from grants from the Richard E. & Deborah L. Tarrant Foundation, the Fanny Allen Foundation, and the Northfield Savings Bank.

Example Animated Bars

Good for when you want to display relevant numbers etc. You can change the bar labels and % labels as desired.

Bar Label 30%
30%
Bar Label 80%
80%
Bar Label 100%
100%
Bar Label 100%
100%

Example Affiliate Logo Section

Typography as

DESIGN

INTENSIVE CARE SERVICES

Large font, bold backgrounds and a monochromatic scheme work really well for highlighting content without the need of using images. This section is in the ICS color.

Example Tabbed Panel Functionality

Research & Analytics

Write a description for this tab and include information that will interest site visitors. For example, if you are using tabs to show different services, write about what makes each service unique. If you are using tabs to display restaurant items, write about what makes a specific dish particularly worthwhile or delicious.

Learn more

Planning Strategy

Write a description for this tab and include information that will interest site visitors. For example, if you are using tabs to show different services, write about what makes each service unique. If you are using tabs to display restaurant items, write about what makes a specific dish particularly worthwhile or delicious.

Learn more

Concept Creation

Write a description for this tab and include information that will interest site visitors. For example, if you are using tabs to show different services, write about what makes each service unique. If you are using tabs to display restaurant items, write about what makes a specific dish particularly worthwhile or delicious.

Learn more

Test in the field

Write a description for this tab and include information that will interest site visitors. For example, if you are using tabs to show different services, write about what makes each service unique. If you are using tabs to display restaurant items, write about what makes a specific dish particularly worthwhile or delicious.

Learn more

Success Garanteed

Write a description for this tab and include information that will interest site visitors. For example, if you are using tabs to show different services, write about what makes each service unique. If you are using tabs to display restaurant items, write about what makes a specific dish particularly worthwhile or delicious.

Learn more

Example Accordion Functionality

Use for FAQ's or anything else where you'd like to condense the space.

  • What are your business hours?
    Describe the item or answer the question so that site visitors who are interested get more information. You can emphasize this text with bullets, italics or bold, and add links.
  • Where is your main office?
    Describe the item or answer the question so that site visitors who are interested get more information. You can emphasize this text with bullets, italics or bold, and add links.
  • How do I renew my subscription?
    Describe the item or answer the question so that site visitors who are interested get more information. You can emphasize this text with bullets, italics or bold, and add links.
  • Can I get a full refund?
    Describe the item or answer the question so that site visitors who are interested get more information. You can emphasize this text with bullets, italics or bold, and add links.
  • What is your return policy?
    Describe the item or answer the question so that site visitors who are interested get more information. You can emphasize this text with bullets, italics or bold, and add links.
  • Can I get a full refund?
    Describe the item or answer the question so that site visitors who are interested get more information. You can emphasize this text with bullets, italics or bold, and add links.
  • Do you have any branches overseas?
    Describe the item or answer the question so that site visitors who are interested get more information. You can emphasize this text with bullets, italics or bold, and add links.
  • Is there a discount for family members?
    Describe the item or answer the question so that site visitors who are interested get more information. You can emphasize this text with bullets, italics or bold, and add links.

Example video section

Music is therapy. It soothes your soul, brings joy, gets you moving, and more. Music affects how your heart beats and how you breathe, how you sleep and how you wake. With music so important to life, don't you deserve music freedom? 

Typography as

DESIGN

CFYS

Large font, bold backgrounds and a monochromatic scheme work really well for highlighting content without the need of using images. This section is in the CFYS color.

Programs for the people of Washington County Community

This is one example of how you could provide an overview of the programs offered from the home page. Clicking on the Learn More button would take the website visitor to more information (either a sub-page or section of a page). The background colors are just placeholder for now, but I thought it would be good to use the brand colors for each service provider (we would need to create simple background colors that we upload to the gallery below).

Calendar Functionality

This is your Tockify calendar which has been integrated with your Google calendar. I added tags for each division in the division colors, so if you add an event to Tockify, remember to tag it appropriately for the colors to show up.

Example

Google Calendar

You can integrate any Google calendar into the website.

Mon
Tue
Wed
Thu
Fri
Sat
Sun

29

10:35pm Yankees (0) @ Orioles (2)

30

10:35pm Yankees (2) @ Orioles (4)

1

10:35pm Yankees (2) @ Orioles (0)

2

5:05pm Yankees (2) @ Orioles (7)

3

11:05pm Tigers (1) @ Yankees (2)

4

5:05pm Tigers (3) @ Yankees (5)

5

5:35pm Tigers (2) @ Yankees (5)

6

7

11:05pm Astros (3) @ Yankees (10)

8

11:05pm Astros (4) @ Yankees (9)

9

9:05pm Astros (4) @ Yankees (3)

10

10:50pm Yankees (2) @ Rays (0)

11

8:10pm Yankees @ Rays

12

5:40pm Yankees @ Rays

13

14

11:40pm Yankees @ Twins

15

11:40pm Yankees @ Twins

16

5:10pm Yankees @ Twins

17

11:05pm White Sox @ Yankees

18

5:05pm White Sox @ Yankees

19

5:35pm White Sox @ Yankees

20

11:05pm Mariners @ Yankees

21

11:05pm Mariners @ Yankees

22

11:05pm Mariners @ Yankees

23

4:35pm Mariners @ Yankees

24

25

1:40am Yankees @ Padres

26

1:40am Yankees @ Padres

8:10pm Yankees @ Padres

27

28

29

1:38am Yankees @ Angels

30

1:38am Yankees @ Angels

31

1:38am Yankees @ Angels

1

2:15am Yankees @ Giants

2

2:05am Yankees @ Giants

8:05pm Yankees @ Giants

Typography as

DESIGN

CDS

Large font, bold backgrounds and a monochromatic scheme work really well for highlighting content without the need of using images. This section is in the CDS color which I brightened up a bit.

Timeline functionality

This functionality is a great way to show a timeline or a process. It has many styling options so can be aligned with your branding.

  1. Horizontal Timeline
    January 1st, 2020

    You can use for a timeline or... Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  2. Process Steps
    January 1st, 2020

    You can use to display the steps in a process. <br>fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  3. Horizontal Timeline
    January 1st, 2020

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

  4. Horizontal Timeline
    January 1st, 2020

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

Social & Video

A nice way to keep your website dynamic and interesting is by integration your social feeds directly into the site.  Here are a few examples.

FACEBOOK FEED WIDGET

VIDEO SLIDER WIDGET

Document Viewer Widget

The Document Viewer widget allows you to display a variety of documents directly on your site. Documents may be added via file upload, live URL, or web platforms such as Dropbox, Google Drive or Google Mail. It can be sized to any dimension.

iFrame Widget

This widget allows you to essentially display a website within a website, so you can incorporate data and tools from other sites or third party services.


Consider using this widget when you need to incorporate a complicated data-driven service from another site, such as a real estate search or a booking form. This approach is quick, low cost, and does not require any HTML embed code. I've included an example from the Events page of onecarevt.org.


Image Selection

The images you choose for a website can make or break a design. Choose images that reflect your brand style and color, and the feeling you want to evoke. Keep away from images with a lot of dark colors because they add a heaviness to the site. Here are a few examples, chosen for color alignment but not actual content.

Example CTA

FOR BOTTOM OF ALL PAGES ABOVE FOOTER

It is good practice to end each website page with a single CTA. Below just a few examples.

Contact Us

Stay Connected


Read our latest updates


Never miss a message


Check out our pics

HELP US

HELP OTHERS 

Support our students so they can thrive and achieve their goals

$200

Your donation goes directly to supporting students

Make a Donation →

Children, Youth & Family Services

Programs encompass a wide-variety of office and community-based services, as well as school and home-based services for children and their families living with mental illness. Services are available to expectant mothers and parents up to and including youth who are 22 years of age.

Community Support Program

Comprehensive community-based support services to persons with severe and persistent mental illness. Our services are individualized and emphasize health, wellness, and recovery. We are outreach-based and provide most of work with clients in the community.

Center for Counseling & Psychological Services

Outpatient services for adults and children in times of severe challenges and the stressors of daily living. Individual, couples, family, and group therapies, assessments, service coordination and community supports are offered in a variety of treatment approaches focused on meeting the client’s needs.

Community Development Services

This paragraph would summarize the purpose of this division & its programs instead of listing all of the programs. Clicking anywhere in this box would take you to the website page.

Intensive Care Services

Intensive Care Services (ICS) is a combined service that provides 24-hour emergency services for individuals and families. The primary goal is to reduce the immediate distressing effects of crisis and encourage stabilization.

Psychiatric & Nursing Services

This paragraph would summarize the purpose of this division & its programs instead of listing all of the programs. Clicking anywhere in this box would take you to the website page.

In The Community

This paragraph would summarize the purpose of this division & its programs instead of listing all of the programs. Clicking anywhere in this box would take you to the website page.

How To Reach Us

You could include info here for how to reach WCMHS programs

Share by: