PAGE #1 (Home Page Layout)
GOAL: introduce our company and what we do (3 second rule); also to get visitors to take action in all stages of the sales cycle (awareness, evaluation and/or purchase). There will be MULTIPLE calls-to-action on this home page.
FLOW: a TOP-DOWN flow that includes multiple "sections" (highlighting different services/resources/success stories etc.). More information on this below.
MAIN NAVIGATION: will include "Services", "Products", "About", "Success Stories", "Contact", "Blog"
COLORS: blue will likely be the main color. Purple should be a highlight color (maybe headings, links etc.). And perhaps green as well (buttons etc.). But feel free to play with these 3 colors.
*** TOP DOWN FLOW OF PAGE ***:
1. Logo and Main Nav. Would also be nice to incorporate phone number. Logo can hopefully be reworked (likely plain white if on a dark background and only contain test "Awakening Potentials").
2. HEADER: Will include:
(A). Background Image
(B). Headline Text - ["Achieve Results. Faster."]; Highlighted in some way or fancy font. The "Highlight" effect is ideal since it will be easier to achieve with CSS... but some web fonts (e.g. Google) may achieve an artistic effect. Highlight example: http://www.zurb.com. Fancy Font example: http://www.marieforleo.com
(C). Sub-Heading - ["Gain the Upper Hand. It's time to feel better, look better & accomplish more."]
(D). Short sentence ["AWAKENING POTENTIALS is a close-knit team of natural health professionals and personal results specialists who use the latest scientific research to help individuals improve their health and achieve greater success. We've worked with over xxxx clients since 1979."]
(E). Two call-to-action links/buttons (e.g. "Talk to our Team" and "View our Services").
SPECIAL NOTE: The background will need to be engaging and interesting. It will set the tone for the page. This image will likely be full-width (a more modern touch). Unfortunately we can't provide a personal high-res image. So there are likely 3 background image options: (a). Use the attachment provided (least favorite option), (b). Use another "artistic" (no people) background image/illustration (stock photo that we would buy), or (3). Find another real-life high-res stock photo (not an illustration). This may or may not have real people in it. If it does it can't feel "fake" it would need to be something that gives the same feel like http://www.zurb.com.
Then the page content...
3. "How Can We Help You?" SECTION - This section will drill-down into specific services. The section itself should also have a (A). Heading ["How Can We Help You?"], (B). a short intro sentence and (C). a text LINK ["Here's How -->"]. The services listed will be: (1). Health Coaching, (2). Success Coaching, (3). Workshops, (4). Chiropractic, (5). Chinese Acupuncture. But each service should have (a). an Image, (b). Heading, (c). 1-2 sentence intro and (d). "Learn More -->" Link/Button.
SPECIAL NOTE: I would like to use illustrations here for images. But there is a fine line between something that looks professional and something that looks "cartoonish" (which should obviously be avoided).
4. "What Our Clients Say" SECTION - Will highlight personal Success Stories/Case studies in 3 categories: (1). Health, (2). Happiness and (3). Alternative Medicine. The section itself should also have a (a). Heading and (b). a short intro sentence. Each category/success story will have (a). an image (likely a real person or perhaps something "generic" to represent a man/women - so more of a "privacy" success story image), (b). Heading, (c). 1 sentence intro and (d). "Review the ... Success Story -->" Link/Button. Example: http://www.zurb.com | check out the "See what we've been working on" home page section.
5. "Resources to Help You Succeed" SECTION - highlighted resources to download; There will be 4 Categories: (1).Health, (2).Financial, (3).Success and (4). Happiness. Each category will have 1 highlighted resource. This section will take on a similar structure to the other sections, which is having: (a). an Image, (b). Heading, (c). 1-2 sentence intro and (d). "Learn More -->" Link/Button. Example (of look-and feel): check out this page http://www.zurb.com/services | Look at the "What's Your Relationship With Your Customers" section. Colorful, round icon images with text below them. Perfect!
6. Our Commitment SECTION: Maybe best to just use a Layout example: http://www.zurb.com (home page) | the "A Designed World is Better" & "Let's Talk Shop" sections. This flow is perfect. The top area will have a (a). Header ("Our Commitment"), (b). short paragraph, (c). Interesting illustrated Image of some kind and (d). a Button ("See Who We Are"). Below this will be 3 highlight areas (like the "Let's Talk Shop" section on http://www.zurb.com) - three areas that are colorful/vibrant. The 3 areas will contain details about: (1). Highlight Post from the Blog, (2). Latest Company News and (3). Highlighted Event. Each will have a link below it to go to a specific page.
7. FOOTER (common on all pages): Our thoughts are a hybrid solution between http://www.zurb.com (layout) and http://www.hubspot.com (simple link layout). Our footer will include:
- LEFT-TOP: Brief blurb about Company (e.g. http://www.zurb.com)
- LEFT-BOTTOM: How to reach us (e.g. http://www.zurb.com)
- MIDDLE: Link Sections - More Info, Services (e.g. http://www.hubspot.com); perhaps 5 links in each as a template. These can be in the middle, one above the other
- RIGHT-TOP: Subscribe to Newsletter (e.g. http://www.zurb.com)
- ROGHT-BOTTOM: "On the Web" section - so social connections. (either links like hubspot.com or image like zurb.com; whatever works best).
Once the Home Page look-and-feel is defined we would move on to creating...
PAGE #2 (Content Page)
- will contain a HEADER section (like home page): Header Text will change from page to page (based on the context of the page). http://www.zurb.com changes the background image for each content page. http://www.hubspot.com has no background image on content pages (only the home page). Both approach is fine for a design concept. Although we do find http://www.zurb.com more visually appealing.
- will also contain a consistent FOOTER at the bottom (same as home page). The remaining space will contain content.
- Content section will contain sub-navigation down left-hand-side; content will be on right-hand-side
- Inspiration: we like how http://www.zurb.com changes colors with each distinct section of the website. This is a nice design touch.
- NOTE: we will likely also implement a full-width (content) page as well (when integrating into WordPress) - so a page without sub-nav down the left-hand side. Although this should not affect design (e.g. should not be a distinct layout in this competition). This is more of a WordPress thing. But it would be great to see.
Content Page with Left-hand side sub nav: http://www.zurb.com/about
Full-width Content Page: http://clearleft.com/is/
PAGE #3 (Blog Home/Index Page)
- looking for a complimentary unique look and feel for the blog home page; something SIMPLE (not cluttered) yet consistent with the main web site.
- As mentioned, design focus here will be on the blog index/home page (not an individual blog post page).
- So things like a unique blog header and footer, along with the look-and-feel of the "latest blog post" summary. It would also be great to incorporate blog-centric elements like a search box, social sharing elements, sidebar elements (subscribe, downloads etc.).
- example: http://www.zurb.com/blog does a good job of slightly changing the look, feel and content of their blog (from their main site).
NOTE: our current blog can be found at http://www.awakeningpotentialsblog.com