Circle Of Health
Circle of Health is a collaborative health clinic focused on providing you with natural, wholistic options in your healthcare based in Longmont, CO. As a collaborative clinic, Circle of Health embraces the full spectrum of health modalities, offering: Western Primary Care medicine, Traditional Chinese medicine, Psychotherapy solutions, Rolfing, EMDR, Brainspotting, Couples Counseling, Craniosacral Therapy, Grief Support, Life Coaching, Play Therapy, Community Enrichment Classes as well as Halotherapy/Dry Salt Therapy and Infrared Sauna Services.
01. Approach
This project was very direct. One of the clinic owners Suzan Fleck had hired a branding company to create a logo and along with other collateral to be used for the business. We needed to stay within the framework that the branding company had created. We wanted to make sure that the company branding was front and center on most pages. Suzan really wanted to "feel" the website and those design decisions lead to a heavy usage of textures throughout the site. Very little if any white space was used instead a parchment gray texture was used where we would normally have white space. Chinese medicine is a very old art form but Circle of Health takes great pride on cutting edge techniques and staying current with all diagonistic treatments so we wanted to get across modern but timeless in the site design.
02. Design
The logo and color scheme had already been created by the branding agency we just needed to follow the leader. They had also created fonts so we used the same font format for the website to make sure that the printed collateral and the website followed the same design. We also tried to add some clever plays on needles because they provide acupuncture services. So you will notice that the quotation marks that we used for written testimonials are in the shape of needles.
#f0a14b
#11a19f
#585858
#c6e3e1
Acumin
03. Technology
The Circle of Health project is a totally responsive design based on CSS Grid Layout with a Flexbox fallback. That means the project is not reliant on an outside library of code like Bootstrap to be fully responsive. The starting point was HTML5 Boilerplate to make sure the project was utilizing current best practices and most browser based styling was reset using Normalize.css. We don't utilize templates so all coding was done by hand using the Brackets code editor. Suzan and her team is also able to add blog articles, maintain the verbiage and images on the site by utlizing Perch as the content management system. Every page in the project was validated and confirmed to be W3C compliant except for lazy loaded images and using Cloudflare to speed up scripts. All css files are modular in nature so Gulp was used to combine and condense all CSS files in the final project build in order to make the page load speed better. The final page load speed is bogged down a little and averages about 2 - 2.2 seconds per page due to a script that is used for online scheduling by the Centre's patient management software. CSS and javascript animation was created by using the following libraries Animate.css, Hover.css & T-scroll. Other code and libraries used include Modernizr, jQuery, Akismet and Google Analytics. Software utilized to create this project included Brackets, Photoshop, Perch CMS, VectorMagic.com and CompressPNG.com.
The coding and software skills used by Colorado SEO Design to make this project take off included:
- Photoshop
- PHP
- HTML5
- CSS3
- Javascript
- JSON
- Schema.org markup
