Website Design Philosophy:
The website for Concept Rehab is designed to convey a confident, high-touch, personal connection with the audience.
Landing pages use selective-focus stock photos showcasing therapeutic scenes in realistic settings.
Headlines connect the Concept Rehab experience with data and proof points.
“Below the fold,” the content is informative, concise, and connected to the real people doing the real work. This is achieved through carefully selected real photographs of the Concept Rehab staff. Key testimonials and therapists’ stories are shared, enhancing the personal connections.
Enhancing the high-touch, personal connection, the site uses the impactful “arrow” in various positions. This arrow draws the audience to key pieces of information, accentuates photographs, and adds the actionable Concept, Rehab Green.
On the desktop version, action and movement are also conveyed through several moving artifacts. These include parallax photos, “growing hovers”, moving type, and moving arrows.
Content is broken into digestible pieces of information (aka sections), allowing viewers to skim and connect with various content types, such as data points, paragraphs, videos, or blog entries.
Finally, several pages feature a contact us form, allowing viewers many opportunities to connect with Concept Rehab.
Concept Rehab Website Brand & Instructional Guide
Summary: The website has been designed with a series of branded “Saved Sections” and “My Designs” that can be added to any page. In addition, Three Primary Landing Pages and Two Secondary Landing Pages (fully designed) live within the Pages section (hidden from the menu).
Overall Design: The website has all primary landing pages fully designed, with most content and links in place. These primary landing pages include:
-
Home
-
Services
-
Therapy
-
Resources
-
About Us
-
Contact Us
-
Blog
Please note that Concept Rehab will add several images and files to these pages. Imagery such as the stock photos for the Landing Page headers. Leadership, Team, and support imagery for articles. As well as video links, tools, and resources.
Creating a new page:
When creating a new page design, there are two ways to accomplish this.
Option One: Using a template
Step 1: Find the Page Template you would like to start with (for example, Secondary Landing Page Type 2).
Step 2: Duplicate this page.
Step 3: Rename this page and place it within the menu structure as desired.
Step 4: Begin entering content.
Feel free to add or remove sections from the starting template to match the content being programmed. This will create unique pages with matching aesthetics.
Option Two: Using “Saved Sections” and “My Designs”
Step 1: Add a new page in the desired menu structure.
Step 2: Go to the “Saved Sections” and select the sections that will work with the type of content being displayed.
Step 3: Repeat this process with “My Designs”. Note: My Designs carries most of the testimonial structures and interactive components, such as video input.
Step 4: Begin entering content within selected fields.
Tip: Once the page is complete and ready in desktop view, switch to mobile view. Often, the sections carry over seamlessly – inevitably, some don’t. If the section carries over to mobile unformatted, reformat to work within the mobile view. This will not affect the desktop version. Note: “hiding” images or art may be required for a more seamless viewing experience. For example, the green arrow in the Landing Page headers is hidden on mobile. Also, hovers do not work on mobile, content that is revealed on a desktop is hidden on mobile. Take special consideration in these instances as links to the content, or replacing it is necessary, ie Services Quad Hover on the landing page.
Brand Specifics:
Color Palette and ADA Compliance.
When using the Concept Rehab Green on the web, a slightly modified version is required for ADA compliance. This pertains to usage in typography.
ADA Compliant Green
Hex: 839B27
The type size must be at least 25 pt, using this hex color to meet ADA requirements.
When desired, the true Concept Rehab Green can be used as a background accent color (arrows, boxes, lines, etc)
True Concept Rehab Green
Hex: 99B52B
Primary Text Palette
All body copy is to be set at the Medium Grey
Hex: 717172
Note: Concept Rehab dark grey; Hex: 424143; is only used in the Footer.
Header Image (above the fold)
The header image on the Primary Landing Pages is 458 pixels high. Note: When editing the headlines, extra spaces may cause the header to expand with the text. You will have to manually reset the image to 458 pixels if this happens.
Live Movement & Animations
To enhance content presentation and create action-forward pages, several animations and image movements are used. The breakdown of recommendations is below. Using only these animations will ensure a consistent tone across the site.
Hero Images:
The Landing Page images and Values Image sections use the Parallax feature. This animation creates movement as viewers scroll through the page. The Parallax is programmed at a 0.5 speed.
Values Typography:
The "Values" word in this image section uses the "Expand" animation. This creates a growing effect.
Green Rollover Boxes:
Info boxes such as those found on the home page use the "Expand" animation feature. Group all elements together before programming this animation so the items "grow" together.
Dynamic Arrow:
A core element of the entire site is the Concept Rehab Arrow. Where appropriate, use the "Glide" animation push the arrow in the direction it is moving. Use this animation sparingly.