TUNE UP YOUR DIGITAL MARKETING:
Designing Your Site Like a Pro
Learning Objective: Plan the design of your WordPress website like a pro so that it accurately represents your message and personality
Getting your website live on the web with a strong domain name is just the beginning of your process. Next, we’ll turn our attention to design—and make sure that design meets functionality and focus for both your needs and your visitors’.
Step One: Planning for Powerful Design
Don’t assume that a web designer will get a better result for your website than you will. Web designers come in all shapes and sizes; from designers who are all about the design and can win art awards, to the other end of the scale—web designers who are all about powerful, clean code. You can hire web designers who operate with a team of twenty specialist coders or you can hire someone who only knows how to set up a blog. And out of all these different types of web designer, a relatively small percentage understand what a niche business website needs. The rest, you have to educate—and you might as well do it yourself.
You will still need to clarify:
- Your mission
- Your message
- Who should work with you
- Who shouldn’t work with you
- Your story
- Why it matters to the right reader
- What you do and why it is unique
- What paint point it will address
- What solution you can help her find
- How you do it
Sure, some web designers can help you with that part too—but as a business owner, you know that it is especially important that people feel they are connecting with the real “you”.
Can you design a powerful site that represents you and your message accurately? Absolutely.
And WordPress is a platform that makes this easy, with so many incredible plugins to facilitate functions and shortcut hours of coding; and so many quality themes and design choices that allow you to quickly set up a site that feels right to you.
Planning for powerful design starts in knowing what you want. Identifying the feel of your site, the general look that resonates with you (and that will resonate with your ideal client).
You also have to know what you want to say. The minimum you need to have, when it comes to pages, is:
- A landing page
Yes. You can get away with just that—particularly if you are promoting a single powerful product or program.
If you want to do more than that, the minimum you should consider is:
- Home page/landing page
- Contact page
- About page
- Products and programs section or page
- Media section or page
- Contact form
Testimonials are also vital—but you can decide if you want to put these on your home page and/or About page (especially if you don’t have more than a couple) … or in a separate “Client Success Stories” section.
You will need to decide also if you wish to lump all your products, packages or programs together in one section; or have drop-down menus separating multiple offerings into categories:
- Special event, program, challenge, etc.
Finally, if you are offering “Discovery Sessions” (or whatever you want to call them), you might want to put these on their own tab—and include a set of qualifying questions potential candidates have to answer, in a contact form format. Or you may prefer just to let them know they will be “expected to answer a question sheet” which you will send them by email.
And there is one other website element whose placement you need to decide on: Your red hot sign-up incentive or gift. Will it go on your home page? A separate landing page? In a widget allowing it to appear on every page? In its own unique section?
These are a lot of choices to make, but deciding what is absolutely essential to say to the right visitor is a good first step to avoid overloading your site and becoming a “kitchen sinker”, with all sorts of unnecessary sections.
Don’t be afraid to make a rough plan, at first—the beauty of WordPress means it is incredibly easy to add a page or section later on… or consolidate two pages, if you come to feel that you’re dealing with a split message.
But start with your absolute basics:
- Your home page
- Your about page
- Your contact form
If you take this route, your Home page should tell visitors:
- Who you are
- What you do
- What pain you can help relieve
- How this will benefit them
- Why you do it
Tell your story in as little as one sentence or one paragraph on your home page—start with the most dramatic or important point—and tell the rest of your story, for those you have hooked, on your about page.
Step two: how design can make your message—or break it
Remember that design is all about your message. You can let people know who you are—gain an impression of you and your personality—through more than just reams of text. You can do it through:
- A single qualifying, “knife edge” question
- A single statement or tag line
- Your photograph
- The colors you are using
- Accessories, props or background in your photographs
- Design elements
- Your theme’s style
You can make choosing these elements an easy process by pre-qualifying them yourself with your own “knife edge” design question:
- “Will this support the message and image I wish to convey?”
(What do knives do? They slice, with absolute precision. And when they have cut, the object slice is halved. One falls one way … and the opposite half, the other. You need to use this type of questioning process everywhere in your website: For design elements, pages, messages—does it attract people … or drive them away.
You will want to do both, when it comes to getting people to sign up.)
The more you plan at this page, the stronger your website design will be … whether you hire a web designer, or do it yourself.
Your accompanying Exercises for this Module will include studying eight specific coaching websites, seeing which ones resonate most with you, then writing down why. This process should help you crystallize in your mind what you want your site to look like (and what you don’t want it to look like)—so don’t skip your Action Plan and Exercises!
Let’s take a sneak preview at these very different but successful coaching websites:
One thing should leap out at you instantly in these “thumbnail” views of these top websites: Notice how much of the message gets lost when reduced in size on some of the most gorgeous ones … and what remains.
When designing your home page especially, you need to consider what mobile viewers will see and what will catch their attention—THINK LARGE when choosing design elements!
Let’s quickly start an analysis of each website seen at this size:
David Neagle sumptuously-designed website fails on:
But his photo is a good size. (This website is typical of a pro web designer “design-comes-first” approach.)
|Leonie Dawson succeeds spectacularly in presenting her originality, playfulness and creativity—but if we were judging on photo and message, this site at this size would be a spectacular fail. However, she has branded her playful graphics style and colors so well, and she has such a huge client base, the sizing and hard-to-read fonts are really not an issue.|
|Laura West does a wonderful job with her bright, happy coral signature color, lightened up with a lot of white space; as well as her cheerful photo—which really gets across her personality—and the photo and colors totally support the business name she is branding (Joyful Business).||Byron Katie’s giant photograph and assertive forward pose totally gets across her powerful “no compromise, no b-s” personality. Her “knife edge” question is prominent and powerful too—but her soft, smoky-mauve color scheme accurately promises a spiritual or metaphysical slant to whatever she is sharing.|
|Allyson Chavez has a gorgeous site whose spiritual mauves, whites, and soft focus give a big tip off that her emphasis is likely to be on the spiritual side—and sure enough she’s all about energy and miracle manifestation. Her photo and name are just prominent enough to scrape through with a pass. (The script font works well with representing flowing energy, but is hard to read at this size.) Her main message doesn’t come across—but if you’re looking for a spiritual/metaphysical approach in your coach, you might be forgiven for checking out her site based on the colors, script and atmosphere her design elements create.||
Nisha Moodley succeeds even at thumbnail size for branding herself, with strong:
Each element doesn’t waste a single stray word or graphic. She cuts straight to the point, and her rich, dark colors give the impression of a luxurious, perhaps even exotic lifestyle, as well as power and wealth. The simplicity of the design, combined with her prominent photo and blunt message, give the impression of a young but powerful woman.
Shawn Driscoll gets top marks for the visibility on:
A deceptively simple site, it heads the pack here for catching the right client’s attention and getting across her branding.
|Amanda Moxley gets a thumbs up for instantly conveying personality and lifestyle—sure to appeal to people who want that type of freedom too. The cool, sea colors reinforce this impression and her site is reminiscent in style, informality and color of Denise Duffield-Thomas’ Lucky Bitch.com and TimeFreedomBusiness.com, Melissa Ingold’s site. This visual message appeals to a creative, younger, action-oriented and wealth-seeking demographic, judging from their combined testimonials.|
So which one of these examples would work best for you? Not suggesting you copy them, but it’s to be hoped this exercise has helped you get a clearer idea of your ideal style.
Step three: The Secret World of Color
It may be you’ve already decided on the colors for your website and are already using them in other online and offline areas—your Facebook Page, your Twitter background, your business cards and so on. But even if you know your colors, read through this short section, because there are things about the online and color you need to know, right now. You need to know—and record in a safe place:
The hex codes, RGB values and CMYK values for your brand colors, so you can make sure they are consistent in all your content
Whether or not they are “web safe” colors—and whether or not you care if they are
Not every color shows up perfectly on every browser—especially subtle colors. Using the hex code instead of your eyeball is a good way to ensure your colors display as accurately as possible on every website. Use these three tools to accurately find and identify your perfect colors:
- Colorzilla – use this color-picker tool to select areas of your existing colors online to quickly identify and give you the hex values and RGB or CMYK values.
(Colorzilla comes as an add-on extension for the Chrome and Firefox browsers)
To use it: (A) Select the eyedropper icon in your browser menu; (B) select Color Picker in the drop-down menu, (C) position the cursor on the page item color you want to analyze—and your RGB color (#1) and Hex values (#2) appear up top, in the analyzer bar.
- ColorCodeHex – if you’d rather just choose a color from scratch, use ColorCodeHex’s handy chart as a quick reference for web-safe color choices.
- Colorizer.org — Use this site to play with different color schemes. Not only will it display and compare colors in CMYK and RGB, it will display a preview of the color scheme you have chosen on the left-hand side of the slider bars. (A) Select the element you wish to change; (B) Move the slider bars in the appropriate color model (e.g. CMYK) till you get the change you want in (C) the preview layout.
STEP Four: Your Dream Theme
Of course, most design problems can be solved before they are ever created by using the right WordPress theme.
As we saw from our earlier eight website snapshots, there are many designs to suit your style, personality and audience.
What is currently hot? Full-page themes that hit the visitor above the fold with your key eye-grabbers, with three round or square widgets directly below the above-fold area (either sending you to alternate pages or different types of offers) and optional section for current promotions or “About” information at the bottom
Here’s an example of CoachGlue using this layout model:
Whatever you do, stay away from free themes. These:
- Often contain harmful scripts or hidden coding that can harm your Google ranking—or even your site
- Don’t have the sophisticated functionality of premium paid themes
- Often include no or little customer support
- Are frequently not updated and kept current with new WordPress releases
If you do use a free theme, make sure it is from a reputable source like the WordPress.org theme directory.
But why mess around? Go with an easy, highly-customizable, well-supported theme such as Divi. You can license Divi for as little as $69 per year—and that includes their famous Divi Builder plugin, which allows you to customize any existing WordPress theme with Divi layout elements and options.
Divi is a favorite theme for both CoachGlue.com and TimeFreedomBusiness.com—and don’t forget the Divi Builder plugin! (Check out the Demo.)
Step five: Getting Ready to Install Your theme
Before we return to your website set-up, let’s recap what you need to have, planned and ready:
- The number of menu tabs (pages or sections) in your site
- Categories you want to use (if you are including a blog, or operating as a blog)
- At least one main offering
- An incentive
- A logo, if that is important to your branding
- A photo of you that is big enough to be seen on mobile (and which supports your message)
- Your brand colors chosen, in both HEX and RGB code
- A contact form built and ready in your colors, created from your autoresponder’s templates and tied to you your autoresponder list
Even if you are not quite ready to deal with contact forms and autoresponder’s lists yet, we’ll get started anyway—and you will learn a simple alternate for installing and creating an effective contact form.
So on to Website Jump Start 3: Leverage the Power of WordPress and let’s get going!