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
Example Text Slider
Good for displaying short testimonials of similar length.
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.
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.
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.
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.
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.
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.
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.
Example Animated Bars
Good for when you want to display relevant numbers etc. You can change the bar labels and % labels as desired.
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
Example Accordion Functionality
Use for FAQ's or anything else where you'd like to condense the space.
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.
31
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
1
2
3
4
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.
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
HELP US
HELP OTHERS
Support our students so they can thrive and achieve their goals
$200
Your donation goes directly to supporting students
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